chore(CI): Add check story book to CI

nervosnetwork · Jun 28, 2023 · 3695bff · 3695bff
1 parent 232b947
commit 3695bff
Show file tree

Hide file tree

Showing 12 changed files with 874 additions and 634 deletions.
diff --git a/.github/workflows/check_storybook.yml b/.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: Boostrap
+        run: |
+          yarn
+          yarn build
+        env:
+          CI: false
+
+      - name: Build storybook
+        run: |
+          cd packages/neuron-ui
+          yarn build-storybook
+        env:
+          CI: true
diff --git a/.gitignore b/.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

diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json
@@ -63,18 +63,18 @@
   "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/addon-actions": "6.5.17-alpha.0",
+    "@storybook/addon-essentials": "6.5.17-alpha.0",
+    "@storybook/addon-interactions": "6.5.17-alpha.0",
+    "@storybook/addon-links": "6.5.17-alpha.0",
+    "@storybook/builder-webpack4": "6.5.17-alpha.0",
+    "@storybook/builder-webpack5": "6.5.17-alpha.0",
+    "@storybook/manager-webpack4": "6.5.17-alpha.0",
+    "@storybook/manager-webpack5": "6.5.17-alpha.0",
+    "@storybook/node-logger": "6.5.17-alpha.0",
     "@storybook/preset-create-react-app": "4.1.2",
-    "@storybook/react": "6.5.16",
-    "@storybook/testing-library": "0.2.0",
+    "@storybook/react": "6.5.17-alpha.0",
+    "@storybook/testing-library": "0.0.13",
     "@types/enzyme": "3.10.13",
     "@types/enzyme-adapter-react-16": "1.0.6",
     "@types/node": "18.16.18",

diff --git a/packages/neuron-ui/src/components/LanguageDialog/index.tsx b/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)
 

diff --git a/packages/neuron-ui/src/components/NetworkSetting/index.tsx b/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>

diff --git a/packages/neuron-ui/src/components/PageContainer/index.tsx b/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)
   })

diff --git a/packages/neuron-ui/src/components/SendFieldset/index.tsx b/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>
           ) : (

diff --git a/packages/neuron-ui/src/services/remote/app.ts b/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')

diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts b/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)
+  }
diff --git a/packages/neuron-ui/src/widgets/AlertDialog/index.tsx b/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')} />}

diff --git a/packages/neuron-ui/src/widgets/DatetimePickerDialog/index.tsx b/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()
           }}