diff --git a/.github/workflows/check_storybook.yml b/.github/workflows/check_storybook.yml new file mode 100644 index 0000000000..c63ff69d39 --- /dev/null +++ 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: Bootstrap + 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 index e752ec8fce..7e8a5d078a 100755 --- 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/.storybook/main.ts b/packages/neuron-ui/.storybook/main.ts index 4848eaf6ef..1c2bd5971a 100644 --- a/packages/neuron-ui/.storybook/main.ts +++ b/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, }, } diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json index 96248ce2b6..ad5a758b01 100644 --- a/packages/neuron-ui/package.json +++ b/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": { diff --git a/packages/neuron-ui/src/components/LanguageDialog/index.tsx b/packages/neuron-ui/src/components/LanguageDialog/index.tsx index 58174feb08..d8d61f6266 100644 --- 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 index 248a47aef1..d72dc65975 100644 --- 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: (
- { - network.chain === LIGHT_CLIENT_TESTNET ? null : ( - - ) - } - {(network.type && network.chain !== LIGHT_CLIENT_TESTNET) ? ( + {network.chain === LIGHT_CLIENT_TESTNET ? null : ( + + )} + {network.type && network.chain !== LIGHT_CLIENT_TESTNET ? ( diff --git a/packages/neuron-ui/src/components/PageContainer/index.tsx b/packages/neuron-ui/src/components/PageContainer/index.tsx index d69e622984..ce132f7202 100755 --- 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 = props => { ) } -export const Breadcrumbs: FC> = ({ children }) => { +export const Breadcrumbs: FC> = ({ 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 index 3ea71a7118..af758a88b4 100644 --- a/packages/neuron-ui/src/components/SendFieldset/index.tsx +++ b/packages/neuron-ui/src/components/SendFieldset/index.tsx @@ -134,7 +134,9 @@ const SendFieldset = ({
- {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'), + })}
) : ( diff --git a/packages/neuron-ui/src/services/remote/app.ts b/packages/neuron-ui/src/services/remote/app.ts index 723f402308..167c4893fa 100644 --- 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('handle-view-error') export const setLocale = remoteApi<(typeof LOCALES)[number]>('set-locale') export const getCkbNodeDataPath = remoteApi('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('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 index 7e1eef490d..c1773013aa 100644 --- 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 -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 index c3d60413e0..55decbcbb8 100644 --- 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 ( - <> - {type === 'failed' && failed} - {type === 'success' && success} - {type === 'warning' && warning} -

{title}

-

{message}

- + {type === 'failed' && failed} + {type === 'success' && success} + {type === 'warning' && warning} +

{title}

+

{message}

{type === 'failed' &&