feat: add storybook

packages/donate-button/.storybook/main.js

@@ -0,0 +1,21 @@
+const path = require('path')
+
+module.exports = {
+  "stories": [
+    "../src/**/*.stories.mdx",
+    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-postcss",
+    "@storybook/addon-essentials"
+  ],
+  webpackFinal: async(config, {configType}) => {
+    config.resolve.modules = [
+      ...(config.resolve.modules || []),
+      path.resolve(__dirname, "../"),
+    ];
+
+    return config
+  }
+}

packages/donate-button/.storybook/preview.js

@@ -0,0 +1,10 @@
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

packages/donate-button/package.json

@@ -14,7 +14,9 @@
     "serve": "preact serve",
     "dev": "preact watch -c ./preact.config.js --no-prerender --no-sw",
     "lint": "xo",
-    "lint:fix": "xo --fix"
+    "lint:fix": "xo --fix",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "keywords": [],
   "author": "P22 Studio",
@@ -30,12 +32,18 @@
     "@babel/plugin-transform-react-jsx": "^7.12.5",
     "@babel/preset-env": "^7.12.1",
     "@babel/preset-stage-1": "^7.8.3",
+    "@storybook/addon-actions": "^6.2.1",
+    "@storybook/addon-essentials": "^6.2.1",
+    "@storybook/addon-links": "^6.2.1",
+    "@storybook/preact": "^6.2.1",
     "@testing-library/react": "^11.2.5",
     "ava": "^3.15.0",
     "babel-core": "^7.0.0-bridge.0",
+    "babel-loader": "^8.2.2",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "core-js": "^3.10.0",
     "deepmerge": "^4.2.2",
     "eslint": "^7.14.0",
     "eslint-config-xo": "^0.34.0",

packages/donate-button/src/components/GenericButton/index.tsx

@@ -7,7 +7,7 @@ import {GenericButtonProps} from 'src/helpers/options-types';
 const GenericButton = ({
 	label = 'Donate',
 	withLogo = true,
-	textColor,
+	textColor = '#fff',
 	bgColor,
 	borderRadius,
 	fontSize,
@@ -45,12 +45,13 @@ const GenericButton = ({
 						style={{
 							color: textColor,
 							height: fontSize,
-							width: fontSize
+							width: fontSize,
+							fill: textColor
 						}}
 						width="64"
 						height="56"
 						viewBox="0 0 64 56"
-						fill="none"
+						fill={textColor}
 						xmlns="http://www.w3.org/2000/svg"
 					>
 						<path d="M48.3746 20.9558C48.3746 9.03877 38.4374 0 25.6754 0C11.4001 0 0 12.0685 0 27.0153C0 43.1235 12.8125 56 30.0639 56C47.3153 56 62.7508 42.3156 63.9614 24.3895H56.0924C54.6295 37.8215 43.2799 48.1226 30.0639 48.1226C17.3523 48.1226 7.91952 38.7809 7.91952 27.0153C7.91952 16.4112 15.7886 7.87737 25.6754 7.87737C33.948 7.87737 40.4551 13.5329 40.4551 20.9558C40.4551 27.1163 36.0161 32.2669 30.1143 32.2669V40.1443C40.556 40.1443 48.3746 31.4085 48.3746 20.9558Z" />

packages/donate-button/src/stories/EveryMonth.stories.tsx

@@ -0,0 +1,238 @@
+import { Story } from '@storybook/preact'
+import { ComponentProps } from 'preact';
+import { DonateButtonOptions, LayoutMode } from 'src/helpers/options-types';
+import EveryMonth from '../components/EveryMonth/every-month'
+
+const configurationExample = {
+  currency: "USD", // Currency to display
+    monthly: {
+      levels: [
+        // Different choices in monthly donation
+        {
+          amount: "25",
+          bgColor: "#BCD9DD",
+          img:
+            "https://images.unsplash.com/photo-1546500840-ae38253aba9b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
+        },
+        {
+          amount: "50",
+          bgColor: "#F4BF86",
+          img:
+            "https://images.unsplash.com/photo-1579890002580-841359ca1aab?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=675&q=80",
+          default: true,
+        },
+        {
+          amount: "100",
+          bgColor: "#A0CBFE",
+          img:
+            "https://images.unsplash.com/photo-1598846019232-a5752b94c3af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1575&q=80",
+        },
+        {
+          amount: "custom",
+          bgColor: "#BCD9DD",
+          img:
+            "https://images.unsplash.com/photo-1602199926649-2e5e447bab97?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80",
+        },
+      ],
+    },
+    oneTime: {
+      levels: [10, 20, 30, 50, 100, 200], // Different choices in one time donation
+      allowCustom: true, // Allow enter custom amount in one time donation
+      bgColor: "#BCD9DD",
+      img:
+        "https://images.unsplash.com/photo-1602199926649-2e5e447bab97?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80",
+    },
+    // Configure action when the user submit the donation in the widget.
+    // You can pass to us the following parameters to customize it or listen to the callback
+    onSubmit: {
+      charity: "your-foundation",
+      params: {
+        share_info: 1,
+        no_exit: 1,
+      },
+    },
+    // Both ways supported
+    // onSubmit: ({amount, frequency}) => { console.log(amount, frequency)},
+    i18n: {
+      // Different languages of the widget.
+      // The keys used here (en, es) are the keys used to change the language via Attrs or Javascript.
+      // By default we use the key "en".
+      en: {
+        company: {
+          logo: "https://i.ibb.co/VDKGT2r/logo-dummy.png",
+          name: "Coral's Guardians",
+          location: "San Andrés, Colombia",
+        },
+        monthly: {
+          logo: {
+            header: "Monthly donation",
+            text: "on <link>every.org</link>",
+            link: "https://every.org",
+          },
+          header: "This is a headline, which could be two lines long.",
+          info:
+            "Monthy gifts help nonprofits focus on their mission and long-term impact",
+          levels: [
+            {
+              amount: "25",
+              name: "Sponge Supporter",
+              description1:
+                "As a <bold>Sponge Supporter</bold>, you will be helping us with this and that and this and that and this.",
+              description2:
+                "We deliver groundbreaking projects, innovative research and inspiring educational content to engage the public, support science and accelerate actions vital to the preservation of coral reefs.",
+            },
+            {
+              amount: "50",
+              name: "Friend of the reef",
+              description1:
+                "As a <bold>Friend of the reef</bold> you will be helping us with this and that and this and that and this.",
+              description2:
+                "We deliver groundbreaking projects, innovative research and inspiring educational content to engage the public, support science and accelerate actions vital to the preservation of coral reefs.",
+            },
+            {
+              amount: "100",
+              name: "Coral Champion",
+              description1:
+                "As a <bold>Coral Champion</bold> you will help us develop the first dynamic map of known ancestral uses of fungi.",
+              description2:
+                "We deliver groundbreaking projects, innovative research and inspiring educational content to engage the public, support science and accelerate actions vital to the preservation of coral reefs.",
+            },
+          ],
+          custom: {
+            label: "Custom",
+            placeholder: "Enter amount",
+            description1:
+              "With your support we will promote do things like this and that",
+            description2:
+              "We deliver groundbreaking projects, innovative research and inspiring educational content to engage the public, support science and accelerate actions vital to the preservation of coral reefs..",
+          },
+          button: "Donate {{amount}} every month",
+          switch: "Or make a <action>One Time Donation</action>",
+        },
+        oneTime: {
+          logo: {
+            header: "One time donation",
+            text: "on <link>every.org</link>",
+            link: "https://every.org",
+          },
+          name: "One time donation",
+          header:
+            "This is another headline, which could be two lines long.",
+          info: "Thank you for supporting the mission of the foundation!",
+          custom: {
+            placeholder: "Enter custom amount",
+          },
+          description:
+            "We deliver groundbreaking projects, innovative research and inspiring educational content to engage the public, support science and accelerate actions vital to the preservation of coral reefs.",
+          button: "Donate {{amount}}",
+          switch: "Or make a <action>Monthly donation</action>",
+        },
+        footer:
+          "You will be redirected to a secure page on Every.org to complete your donation.",
+      },
+      es: {
+        company: {
+          logo: "https://i.ibb.co/VDKGT2r/logo-dummy.png",
+          name: "Guardianes del coral",
+          location: "San Andrés, Colombia",
+        },
+        monthly: {
+          logo: {
+            header: "Donación mensual",
+            text: "en <link>every.org</link>",
+            link: "https://every.org",
+          },
+          header: "Este es un headline, que puede tener dos lineas.",
+          info:
+            "Las ayudas mensuales ayudan a las fundaciones a enfocarse en su misión y generar impacto a largo plazo",
+          levels: [
+            {
+              amount: "25",
+              name: "Soporte Esponjoso",
+              description1:
+                "Como <bold>Soporte Esponjoso</bold>, nos ayudaras a nosotros a lograr estas cosas y ademas estas otras",
+              description2:
+                "Llevamos a cabo proyectos revolucionarios, investigación innovadora y contenido educativo inspirador para involucrar al público, apoyar la ciencia y acelerar las acciones vitales para la preservación de los arrecifes de coral.",
+            },
+            {
+              amount: "50",
+              name: "Amigo del Arrecife",
+              description1:
+                "Como <bold>Amigo del Arrecife</bold>, nos ayudaras a nosotros a lograr estas cosas y ademas estas otras",
+              description2:
+                "Llevamos a cabo proyectos revolucionarios, investigación innovadora y contenido educativo inspirador para involucrar al público, apoyar la ciencia y acelerar las acciones vitales para la preservación de los arrecifes de coral.",
+            },
+            {
+              amount: "100",
+              name: "Campeón del Coral",
+              description1:
+                "Como <bold>Campeón del Coral</bold>, nos ayudaras a nosotros a lograr estas cosas y ademas estas otras",
+              description2:
+                "Llevamos a cabo proyectos revolucionarios, investigación innovadora y contenido educativo inspirador para involucrar al público, apoyar la ciencia y acelerar las acciones vitales para la preservación de los arrecifes de coral.",
+            },
+          ],
+          custom: {
+            label: "Personalizado",
+            placeholder: "Ingrese el monto",
+            description1:
+              "Con tu aporte cuidaremos los arrecifes de coral del caribe",
+            description2:
+              "Llevamos a cabo proyectos revolucionarios, investigación innovadora y contenido educativo inspirador para involucrar al público, apoyar la ciencia y acelerar las acciones vitales para la preservación de los arrecifes de coral.",
+          },
+          button: "Donar {{amount}} cada mes",
+          switch: "O haga una <action>Donación única</action>",
+        },
+        oneTime: {
+          logo: {
+            header: "Donación única",
+            text: "en <link>every.org</link>",
+            link: "https://every.org",
+          },
+          header: "¡Tu aporte hace la diferencia!",
+          info: "¡Gracias por apoyar la misión de la fundación!",
+          custom: {
+            placeholder: "Introduzca la cantidad deseada",
+          },
+          description:
+            "Llevamos a cabo proyectos revolucionarios, investigación innovadora y contenido educativo inspirador para involucrar al público, apoyar la ciencia y acelerar las acciones vitales para la preservación de los arrecifes de coral.",
+          button: "Donar {{amount}}",
+          switch: "O haga una <action>Donación mensual</action>",
+        },
+        footer:
+          "Serás redireccionado a Every.org para completar la donación.",
+      },
+    },
+} as Partial<DonateButtonOptions>
+
+
+export default {
+  title: 'EveryMonth',
+  component: EveryMonth,
+};
+
+const Template: Story<ComponentProps<typeof EveryMonth>> = (args) => <EveryMonth {...args} />;
+
+export const Default = Template.bind({})
+Default.args = {
+  options: {
+    onSubmit: {
+      charity: "ourworldindata"
+    }
+  }
+}
+
+export const ConfiguredSplit = Template.bind({});
+ConfiguredSplit.args = {
+  options: {
+    ...configurationExample,
+    mode: LayoutMode.SPLIT,
+  }
+}
+
+export const ConfiguredSinglePanel = Template.bind({})
+ConfiguredSinglePanel.args = {
+  options: {
+    ...configurationExample,
+    mode: LayoutMode.SINGLE
+  }
+}

packages/donate-button/src/stories/GenericButton.stories.tsx

@@ -0,0 +1,42 @@
+import { Story } from '@storybook/preact'
+import { ComponentProps } from 'preact';
+import GenericButton from '../components/GenericButton'
+
+export default {
+  title: 'Generic Button',
+  component: GenericButton,
+};
+
+const Template: Story<ComponentProps<typeof GenericButton>> = (args) => <GenericButton {...args} />;
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const CustomLabel = Template.bind({})
+CustomLabel.args = {
+  label: 'Custom label'
+}
+
+export const WithoutLogo = Template.bind({})
+WithoutLogo.args = {
+  withLogo: false
+}
+
+export const Background = Template.bind({})
+Background.args = {
+  bgColor: 'black',
+  textColor: 'white',
+}
+
+export const FullConfiguration = Template.bind({})
+FullConfiguration.args = {
+  bgColor: '',
+  borderRadius: '',
+  classes: '',
+  fontSize: '',
+  hrefUrl: '',
+  label: 'Donate',
+  padding: '',
+  textColor: '',
+  withLogo: true 
+}