chore(CI): Add check story book to CI and update storybook to v7

.github/workflows/check_storybook.yml

@@ -0,0 +1,66 @@
+name: Check storybook
+
+on:
+  push:
+  pull_request:
+
+jobs:
+  default:
+    strategy:
+      matrix:
+        node:
+          - 18.12.0
+        os:
+          - macos-latest
+          - ubuntu-20.04
+          - windows-latest
+
+    runs-on: ${{ matrix.os }}
+
+    name: ${{ matrix.os }}(Node.js ${{ matrix.node }})
+
+    steps:
+      - name: Set git to use LF
+        run: |
+          git config --global core.autocrlf false
+          git config --global core.eol lf
+
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+          cache: "yarn"
+
+      - name: Restore
+        uses: actions/cache@v3
+        with:
+          path: |
+            node_modules
+            */*/node_modules
+          key: 2022-10-11-${{ runner.os }}-${{ hashFiles('**/yarn.lock')}}
+
+      - name: Install libudev
+        if: matrix.os == 'ubuntu-20.04'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y libudev-dev
+
+      - name: Install Lerna
+        run: yarn global add lerna
+
+      - name: Bootstrap
+        run: |
+          yarn
+          yarn build
+        env:
+          CI: false
+
+      - name: Build storybook
+        run: |
+          cd packages/neuron-ui
+          yarn build-storybook
+        env:
+          CI: true

.gitignore

@@ -14,6 +14,7 @@ build
 dist
 pages
 release
+/packages/neuron-ui/storybook-static
 /packages/neuron-wallet/bin/mac
 /packages/neuron-wallet/bin/linux
 /packages/neuron-wallet/bin/win

packages/neuron-ui/.storybook/main.ts

@@ -1,21 +1,21 @@
 export default {
-  "stories": ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/preset-create-react-app",
-    "storybook-addon-react-router-v6"
-  ],
-  "framework": "@storybook/react",
-  core: {
-    builder: "webpack5"
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-interactions", "@storybook/preset-create-react-app", "storybook-addon-react-router-v6"],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
   },
   webpackFinal: config => {
     config.resolve.alias = {
       ...config.resolve.alias,
       electron: require.resolve('./electron')
-    }
-    return config
+    };
+    return config;
+  },
+  docs: {
+    autodocs: true
+  },
+  features: {
+    storyStoreV7: false,
   },
 }

packages/neuron-ui/package.json

@@ -19,10 +19,10 @@
     "lint": "eslint --fix --ext .tsx,.ts,.js src",
     "test": "react-app-rewired test --env=jsdom --watchAll=false",
     "build": "cross-env DISABLE_ESLINT_PLUGIN=true GENERATE_SOURCEMAP=false react-app-rewired build",
-    "clean": "npx rimraf build/*",
+    "clean": "npx rimraf build",
     "precommit": "lint-staged",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
+    "storybook": "storybook dev -p 9009 -s public",
+    "build-storybook": "storybook build -s public"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -63,17 +63,14 @@
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "@babel/preset-typescript": "7.22.5",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/builder-webpack4": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack4": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/node-logger": "6.5.16",
-    "@storybook/preset-create-react-app": "4.1.2",
-    "@storybook/react": "6.5.16",
+    "@storybook/addon-actions": "7.0.24",
+    "@storybook/addon-essentials": "7.0.24",
+    "@storybook/addon-interactions": "7.0.24",
+    "@storybook/addon-links": "7.0.24",
+    "@storybook/node-logger": "7.0.24",
+    "@storybook/preset-create-react-app": "7.0.24",
+    "@storybook/react": "7.0.24",
+    "@storybook/react-webpack5": "7.0.24",
     "@storybook/testing-library": "0.2.0",
     "@types/enzyme": "3.10.13",
     "@types/enzyme-adapter-react-16": "1.0.6",
@@ -95,7 +92,8 @@
     "react-app-rewired": "2.2.1",
     "react-scripts": "5.0.1",
     "react-test-renderer": "16.14.0",
-    "storybook-addon-react-router-v6": "0.2.1",
+    "storybook": "7.0.24",
+    "storybook-addon-react-router-v6": "1.0.2",
     "webpack": "5.88.0"
   },
   "resolutions": {

packages/neuron-ui/src/components/LanguageDialog/index.tsx

@@ -32,7 +32,7 @@ const SelectItem = ({ locale, className, sufIcon, ...res }: SelectItemProps) =>
 
 const LanguageDialog = ({ show, close }: { show: boolean; close: () => void }) => {
   const [t, i18n] = useTranslation()
-  const [lng, setLng] = useState(i18n.language as typeof LOCALES[number])
+  const [lng, setLng] = useState(i18n.language as (typeof LOCALES)[number])
 
   const [isDropdownOpen, setIsDropdownOpen] = useState(false)
 

packages/neuron-ui/src/components/NetworkSetting/index.tsx

@@ -62,14 +62,12 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
           ),
           suffix: (
             <div className={styles.suffix}>
-              {
-                network.chain === LIGHT_CLIENT_TESTNET ? null : (
-                  <button type="button" aria-label={t('common.edit')} onClick={onHandleNetwork}>
-                    <EditNetwork data-action="edit" data-id={network.id} />
-                  </button>
-                )
-              }
-              {(network.type && network.chain !== LIGHT_CLIENT_TESTNET) ? (
+              {network.chain === LIGHT_CLIENT_TESTNET ? null : (
+                <button type="button" aria-label={t('common.edit')} onClick={onHandleNetwork}>
+                  <EditNetwork data-action="edit" data-id={network.id} />
+                </button>
+              )}
+              {network.type && network.chain !== LIGHT_CLIENT_TESTNET ? (
                 <button type="button" aria-label={t('common.delete')} onClick={onHandleNetwork}>
                   <DeleteNetwork data-action="delete" data-id={network.id} />
                 </button>

packages/neuron-ui/src/components/PageContainer/index.tsx

@@ -148,7 +148,7 @@ const PageContainer: React.FC<ComponentProps> = props => {
   )
 }
 
-export const Breadcrumbs: FC<PropsWithChildren<{}>> = ({ children }) => {
+export const Breadcrumbs: FC<PropsWithChildren<React.ReactNode>> = ({ children }) => {
   const childList = React.Children.toArray(children).filter(child => {
     return React.isValidElement(child)
   })

packages/neuron-ui/src/components/SendFieldset/index.tsx

@@ -134,7 +134,9 @@ const SendFieldset = ({
               </div>
               <div className={styles.locktimeWarn}>
                 <Attention />
-                {t('send.locktime-warning', { extraNote: isMainnet ? null : t('messages.light-client-locktime-warning') })}
+                {t('send.locktime-warning', {
+                  extraNote: isMainnet ? null : t('messages.light-client-locktime-warning'),
+                })}
               </div>
             </div>
           ) : (

packages/neuron-ui/src/services/remote/app.ts

@@ -17,8 +17,9 @@ export const requestOpenInExplorer = remoteApi<Controller.RequestOpenInExplorerP
 export const handleViewError = remoteApi<string>('handle-view-error')
 export const setLocale = remoteApi<(typeof LOCALES)[number]>('set-locale')
 export const getCkbNodeDataPath = remoteApi<void, string>('get-ckb-node-data-path')
-export const setCkbNodeDataPath =
-  remoteApi<{ dataPath: string; clearCache?: boolean }, string>('set-ckb-node-data-path')
+export const setCkbNodeDataPath = remoteApi<{ dataPath: string; clearCache?: boolean }, string>(
+  'set-ckb-node-data-path'
+)
 export const stopProcessMonitor = remoteApi<'ckb'>('stop-process-monitor')
 export const startProcessMonitor = remoteApi<'ckb'>('start-process-monitor')
 export const getIsCkbRunExternal = remoteApi<void, boolean>('is-ckb-run-external')

packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts

@@ -130,18 +130,18 @@ export const toggleIsAllowedToFetchList = (allowed?: boolean) => (dispatch: Stat
 }
 
 let timer: ReturnType<typeof setTimeout>
-export const showPageNotice = (i18nKey: string, status: State.PageNotice['status'] = 'success') => (
-  dispatch: StateDispatch
-) => {
-  clearTimeout(timer)
-  dispatch({
-    type: AppActions.SetPageNotice,
-    payload: { i18nKey, status },
-  })
-  timer = setTimeout(() => {
+export const showPageNotice =
+  (i18nKey: string, status: State.PageNotice['status'] = 'success') =>
+  (dispatch: StateDispatch) => {
+    clearTimeout(timer)
     dispatch({
       type: AppActions.SetPageNotice,
-      payload: undefined,
+      payload: { i18nKey, status },
     })
-  }, 2000)
-}
+    timer = setTimeout(() => {
+      dispatch({
+        type: AppActions.SetPageNotice,
+        payload: undefined,
+      })
+    }, 2000)
+  }

packages/neuron-ui/src/widgets/AlertDialog/index.tsx

@@ -32,13 +32,11 @@ const AlertDialog = ({
 
   return (
     <dialog ref={dialogRef} className={styles.alertDialog}>
-      <>
-        {type === 'failed' && <img src={Failed} alt="failed" className={styles.typeImg} />}
-        {type === 'success' && <img src={Success} alt="success" className={styles.typeImg} />}
-        {type === 'warning' && <img src={Tips} alt="warning" className={styles.typeImg} />}
-        <h2 className={styles.title}>{title}</h2>
-        <p className={styles.message}>{message}</p>
-      </>
+      {type === 'failed' && <img src={Failed} alt="failed" className={styles.typeImg} />}
+      {type === 'success' && <img src={Success} alt="success" className={styles.typeImg} />}
+      {type === 'warning' && <img src={Tips} alt="warning" className={styles.typeImg} />}
+      <h2 className={styles.title}>{title}</h2>
+      <p className={styles.message}>{message}</p>
       <div className={styles.actions}>
         {type === 'failed' && <Button type="confirm" onClick={onCancel} label={t('common.back')} />}
         {type === 'success' && <Button type="confirm" onClick={onCancel || onOk} label={t('common.confirm')} />}

packages/neuron-ui/src/widgets/DatetimePickerDialog/index.tsx

@@ -24,7 +24,7 @@ export interface DatetimePickerDialogProps {
   show: boolean
   preset?: Date | string | number | null
   notice?: string
-  onConfirm: Function
+  onConfirm: (time: number) => void
   onCancel: () => void
 }
 const DatetimePickerDialog = ({
@@ -107,7 +107,7 @@ const DatetimePickerDialog = ({
         <div
           role="presentation"
           className={styles.popup}
-          onClick={(e) => {
+          onClick={e => {
             e.stopPropagation()
             e.preventDefault()
           }}

packages/neuron-wallet/package.json

@@ -22,7 +22,7 @@
     "watch": "tsc -w",
     "start:dev": "yarn run build && electron .",
     "start:debug": "yarn run build && electron --inspect=5858 .",
-    "clean": "npx rimraf dist/*",
+    "clean": "npx rimraf dist",
     "test": "jest --runInBand --collect-coverage --forceExit",
     "test:watch": "jest --watch",
     "lint": "eslint --fix --ext .ts,.js src",