Merge pull request #3703 from thematters/develop

Release: v4.26.0

.github/workflows/storybook.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - develop
       - stage
+      - feat/user-page
     types:
       - labeled
 
@@ -26,12 +27,14 @@ jobs:
         run: npm ci
 
       - name: Generate Types
-        if: github.base_ref == 'develop'
+        if: github.base_ref == 'develop' || github.base_ref == 'feat/user-page'
         run: npm run gen:type
 
-      - name: Generate Types
-        if: github.base_ref == 'stage'
-        run: npm run gen:type
+      - name: Lint
+        run: |
+          npm run i18n \
+          && npm run lint \
+          && npm run format:check
 
       - name: Build
         run: npm run build-storybook

.storybook/main.js

@@ -1,97 +1,84 @@
 const tsconfig = require('../tsconfig.json')
 const path = require('path')
 const { mergeWithCustomize } = require('webpack-merge')
+
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-a11y',
     '@storybook/addon-mdx-gfm',
+    {
+      name: '@storybook/addon-styling',
+      options: {
+        postCss: true,
+        cssModules: true,
+      },
+    },
   ],
   framework: {
     name: '@storybook/nextjs',
     options: {},
   },
-  /*
-    Next.js automatically supports the tsconfig.json "paths" and "baseUrl"
-    options but the webpack configuration of Storybook doesn't yet.
-    Also need to keep the same effect from `next.config.js` for loaders or plugins of webpack.
-  */
-  webpackFinal(config) {
-    config.module.rules = config.module.rules.filter(
-      (it) => it.test && it.test.toString() !== '/\\.css$/'
-    )
-    config.module.rules.push({
-      resolve: {
-        fullySpecified: false,
-      },
+
+  webpackFinal: async (config) => {
+    // this modifies the existing image rule to exclude .svg files
+    // since we want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find((rule) => {
+      if (typeof rule !== 'string' && rule.test instanceof RegExp) {
+        return rule.test.test('.svg')
+      }
     })
-    const newConfig = mergeWithCustomize({
-      customizeArray(a, b, key) {
-        if (key === 'module.rules') {
-          return b.concat(a)
-        }
-      },
-    })(
-      config,
-      {
-        module: {
-          rules: [
-            {
-              test: /\.svg$/,
-              use: [
+    if (typeof imageRule !== 'string') {
+      imageRule.exclude = /\.svg$/
+    }
+
+    // configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            svgoConfig: {
+              plugins: [
+                {
+                  name: 'removeViewBox',
+                  active: false,
+                },
+                {
+                  name: 'removeDimensions',
+                  active: true,
+                },
                 {
-                  loader: '@svgr/webpack',
-                  options: {
-                    memo: true,
-                    dimensions: false,
-                  },
+                  name: 'prefixIds',
+                  active: true,
                 },
               ],
             },
-          ],
+          },
         },
-      },
-      {
-        resolve: {
-          alias: Object.entries(tsconfig.compilerOptions.paths)
-            /*
-          @see https://webpack.js.org/configuration/resolve/#resolvealias
-         */ .map((pair) => [
-              pair[0].replace('/*', ''),
-              path.join(
-                path.dirname(require.resolve('../tsconfig.json')),
-                tsconfig.compilerOptions.baseUrl,
-                pair[1][0].replace('/*', '')
-              ),
-            ])
-            .reduce(
-              (acc, [key, value]) =>
-                Object.assign(acc, {
-                  [key]: value,
-                }),
-              {}
-            ),
+        {
+          loader: 'url-loader',
+          options: {
+            limit: 1024,
+            publicPath: '/_next/static/',
+            outputPath: `static/`,
+          },
         },
-      }
-    )
-    return newConfig
-  },
-  /*
-    make the components' PropTypes interface works for argTypes of storybook
-  */
-  typescript: {
-    reactDocgen: false,
-    // reactDocgen: 'react-docgen-typescript',
-    // reactDocgenTypescriptOptions: {
-    //   shouldExtractLiteralValuesFromEnum: true,
-    //   // @see https://github.com/storybookjs/storybook/issues/11019#issuecomment-656776919
-    //   shouldRemoveUndefinedFromOptional: true,
-    //   propFilter: (prop) =>
-    //     prop.parent ? !/node_modules/.test(prop.parent.fileName) : true,
-    // },
+      ],
+    })
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '..'),
+      '~': path.resolve(__dirname, '../src'),
+    }
+
+    return config
   },
+
   docs: {
     autodocs: true,
   },

.storybook/preview.js

@@ -1,7 +1,35 @@
 import React from 'react'
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import { IntlProvider } from 'react-intl'
 
 import './styles.css'
+import '~/common/styles/variables/colors.css'
+import '~/common/styles/variables/shadows.css'
+import '~/common/styles/variables/sizing.css'
+import '~/common/styles/variables/spacing.css'
+import '~/common/styles/variables/typography.css'
+import '~/common/styles/variables/z-index.css'
+import '~/common/styles/bases/reset.css'
+import '~/common/styles/bases/defaults.css'
+import '~/common/styles/utils/content.article.css'
+import '~/common/styles/utils/content.comment.css'
+import '~/common/styles/utils/index.css'
+import '~/common/styles/vendors/reach.css'
+import '~/common/styles/vendors/fresnel.css'
+import '~/common/styles/vendors/ptr.css'
+import '~/common/styles/vendors/tippy.css'
+import '~/common/styles/vendors/walletconnect.css'
+import '~/common/styles/components/switch.css'
+import '~/common/styles/components/dialog.css'
+import '~/common/styles/components/gsc.css'
+import '~/common/styles/components/ngprogress.css'
+import '~/common/styles/components/sideDrawerNav.css'
+import '~/common/styles/components/stripe.css'
+import '~/common/styles/components/subscriberAnalytics.css'
+
+import TRANSLATIONS_ZH_HANS from '@/compiled-lang/zh-Hans.json'
+import TRANSLATIONS_ZH_HANT from '@/compiled-lang/zh-Hant.json'
+import TRANSLATIONS_EN from '@/compiled-lang/en.json'
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
@@ -13,8 +41,15 @@ export const parameters = {
 
 export const decorators = [
   (Story) => (
-    <>
+    <IntlProvider
+      locale="en" // lang
+      messages={{
+        en: TRANSLATIONS_EN,
+        'zh-Hans': TRANSLATIONS_ZH_HANS,
+        'zh-Hant': TRANSLATIONS_ZH_HANT,
+      }}
+    >
       <Story />
-    </>
+    </IntlProvider>
   ),
 ]

.storybook/styles.css

@@ -1,4 +1,4 @@
-//background color should be controled by storybook
+/* background color should be controled by storybook */
 html {
   background-color: initial;
 }

README.md

@@ -6,6 +6,7 @@
 
 ### Start local dev
 
+- Install [commitizen](https://github.com/commitizen/cz-cli) globally: `npm install commitizen -g`
 - Install dependencies: `npm i`
 - Environment variables: `cp .env.local.example .env.local`
 - Run `npm run gen:type`