Additional tooling

.github/workflows/ci.yml

@@ -24,10 +24,10 @@ jobs:
         run: npm test
       - name: Generates Secrets File
         run: |
-          echo "export default { PROJECT_ID_MAINNET: '${{ secrets.PROJECT_ID_MAINNET  }}', PROJECT_ID_PREVIEW: '${{ secrets.PROJECT_ID_PREVIEW  }}', PROJECT_ID_PREPROD: '${{ secrets.PROJECT_ID_PREPROD  }}'};" > secrets.production.js
+          echo "export default { PROJECT_ID_MAINNET: '${{ secrets.PROJECT_ID_MAINNET  }}', PROJECT_ID_PREVIEW: '${{ secrets.PROJECT_ID_PREVIEW  }}', PROJECT_ID_PREPROD: '${{ secrets.PROJECT_ID_PREPROD  }}', POSTHOG_API_KEY:'${{ secrets.POSTHOG_API_KEY_PRODUCTION }}', POSTHOG_PROJECT_ID: '${{ secrets.POSTHOG_PROJECT_ID_PRODUCTION }}'};" > secrets.production.js
       - name: Build
         run: npm run build
-        with:
+        env:
           SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
           SENTRY_DSN: ${{ vars.SENTRY_DSN }}
           SENTRY_ORG: ${{ vars.SENTRY_ORG }}

.gitignore

@@ -24,3 +24,5 @@ secrets.development.js
 
 # IDEs
 .idea
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,49 @@
+const path = require('path');
+const { NormalModuleReplacementPlugin } = require('webpack');
+
+const config = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  webpackFinal: webPackconfig => {
+    const fileLoaderRule = webPackconfig.module.rules.find(rule =>
+      rule.test?.test('.svg'),
+    );
+    fileLoaderRule.exclude = /\.svg$/;
+    webPackconfig.module.rules.push({
+      test: /\.svg$/i,
+      issuer: /\.[jt]sx?$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            icon: true,
+            exportType: 'named',
+          },
+        },
+      ],
+    });
+    webPackconfig.resolve.extensions.push('.svg');
+    if (webPackconfig.plugins) {
+      webPackconfig.plugins.push(
+        new NormalModuleReplacementPlugin(
+          /^webextension-polyfill$/,
+          path.join(__dirname, './mocks/webextension-polyfill.mock.ts'),
+        ),
+      );
+    }
+
+    return webPackconfig;
+  },
+};
+export default config;

.storybook/mocks/webextension-polyfill.mock.ts

@@ -0,0 +1,2 @@
+export const runtime = {};
+export const storage = {};

.storybook/preview.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Box, DarkMode, Flex, LightMode } from '@chakra-ui/react';
+import Theme from '../src/ui/theme';
+
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export const decorators = [
+  (Story) => {
+    return (
+      <Theme>
+        <Flex>
+          <LightMode>
+            <Box p="50px">
+              <Story />
+            </Box>
+          </LightMode>
+          <DarkMode>
+            <Box p="50px" backgroundColor="#2E2E2E">
+              <Story />
+            </Box>
+          </DarkMode>
+        </Flex>
+      </Theme>
+    );
+  },
+];
+
+export default preview;