feat: Adapt storybook v7, remove deprecations[ComponentStory, stories…

…Of] (#2766)

* feat: Adapt storybook v7, remove deprecations[ComponentStory, storiesOf]

* fix: Add .story directory to eslint.

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

@@ -1,21 +1,24 @@
 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"],
+  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: {}
+    name: '@storybook/react-webpack5',
+    options: {},
   },
   webpackFinal: config => {
     config.resolve.alias = {
       ...config.resolve.alias,
-      electron: require.resolve('./electron')
-    };
-    return config;
+      electron: require.resolve('./electron'),
+    }
+    return config
   },
   docs: {
-    autodocs: true
-  },
-  features: {
-    storyStoreV7: false,
+    autodocs: true,
   },
 }

packages/neuron-ui/package.json

@@ -28,6 +28,11 @@
     "registry": "https://registry.npmjs.org/"
   },
   "lint-staged": {
+    ".storybook/**/*.{js,cjs,mjs,jsx,ts,tsx}": [
+      "prettier --ignore-path ../../.prettierignore --write",
+      "eslint --fix",
+      "git add"
+    ],
     "src/**/*.{js,cjs,mjs,jsx,ts,tsx}": [
       "prettier --ignore-path ../../.prettierignore --write",
       "eslint --fix",

packages/neuron-ui/src/stories/Addresses.stories.tsx

@@ -1,21 +1,23 @@
-import React from 'react'
-import { ComponentStory } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Addresses from 'components/Addresses'
 import { withRouter } from 'storybook-addon-react-router-v6'
 import addressesStates from './data/addresses'
 
-export default {
-  title: 'Addresses',
+const meta: Meta<typeof Addresses> = {
   component: Addresses,
   decorators: [withRouter],
   argTypes: {
     wallet: { control: 'object', isGlobal: true },
   },
 }
+export default meta
 
-const Template: ComponentStory<typeof Addresses> = () => <Addresses />
+type Story = StoryObj<typeof Addresses>
 
-export const ContentList = Template.bind({})
-ContentList.args = { wallet: { addresses: addressesStates['Content List'] } }
+export const ContentList: Story = {
+  args: {
+    wallet: { addresses: addressesStates['Content List'] },
+  },
+}
 
-export const EmptyList = Template.bind({})
+export const EmptyList: Story = {}

packages/neuron-ui/src/stories/AlertDialog.stories.tsx

@@ -1,24 +1,18 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import AlertDialog from 'widgets/AlertDialog'
 
-const props = {
-  show: true,
-  title: 'This is the title of alert dialog',
-  message:
-    'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
-  dispatch: () => {},
+const meta: Meta<typeof AlertDialog> = {
+  component: AlertDialog,
+  args: {
+    title: 'This is the title of alert dialog',
+    message: 'Here is the alert dialog message',
+    type: 'success',
+    show: false,
+  },
 }
 
-const stories = storiesOf('Alert Dialog', module)
-stories.add('basic alert dialog', () => {
-  return <AlertDialog {...props} type="failed" />
-})
+export default meta
 
-stories.add('basic alert dialog', () => {
-  return <AlertDialog {...props} type="success" />
-})
+type Story = StoryObj<typeof AlertDialog>
 
-stories.add('basic alert dialog', () => {
-  return <AlertDialog {...props} type="warning" />
-})
+export const Default: Story = {}

packages/neuron-ui/src/stories/Balance.stories.tsx

@@ -1,12 +1,19 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import Balance from 'widgets/Balance'
 
-const balances = ['0', '0.00000001', '0.99999999', '1', '1.000000001', '111111111111111111111111111111111.111111111111']
+const meta: Meta<typeof Balance> = {
+  component: Balance,
+  args: {
+    balance: '0',
+  },
+}
 
-const stories = storiesOf('Balance', module)
-balances.forEach(balance => {
-  stories.add(`Balance ${balance} CKB`, () => {
-    return <Balance balance={balance} />
-  })
-})
+export default meta
+
+type Story = StoryObj<typeof Balance>
+
+export const Default: Story = {
+  args: {
+    balance: '0.00000001',
+  },
+}

packages/neuron-ui/src/stories/BalanceSyncIcon.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
 import { ConnectionStatus, SyncStatus } from 'utils'
-import BalanceSyncIcon, { BalanceSyncIconProps } from 'components/BalanceSyncingIcon'
+import BalanceSyncIcon from 'components/BalanceSyncingIcon'
 
-export default {
-  title: 'Balance Sync Icon',
+const meta: Meta<typeof BalanceSyncIcon> = {
   component: BalanceSyncIcon,
   argTypes: {
     connectionStatus: { control: 'radio', options: ['online', 'offline', 'connecting'] },
@@ -12,6 +12,17 @@ export default {
     connectionStatus: ConnectionStatus.Connecting,
     syncStatus: SyncStatus.SyncNotStart,
   },
+  decorators: [
+    Component => (
+      <div style={{ backgroundColor: '#eee' }}>
+        <Component />
+      </div>
+    ),
+  ],
 }
 
-export const Basic = (props: BalanceSyncIconProps) => <BalanceSyncIcon {...props} />
+export default meta
+
+type Story = StoryObj<typeof BalanceSyncIcon>
+
+export const Default: Story = {}

packages/neuron-ui/src/stories/Breadcrum.stories.tsx

@@ -1,37 +1,48 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import { withRouter } from 'storybook-addon-react-router-v6'
-import Breadcrum, { BreadcumProps } from 'widgets/Breadcrum'
+import Breadcrum from 'widgets/Breadcrum'
 
-const stories = storiesOf('Breadcum', module).addDecorator(withRouter())
+const meta: Meta<typeof Breadcrum> = {
+  component: Breadcrum,
+  decorators: [withRouter()],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Breadcrum>
+
+export const Empty: Story = {
+  args: {
+    pages: [],
+  },
+}
 
-const propsList: { [name: string]: BreadcumProps } = {
-  empty: { pages: [] },
-  root: {
+export const Root: Story = {
+  args: {
     pages: [
       {
         label: 'root',
         link: 'root',
       },
     ],
   },
-  '2 layers': {
+}
+
+export const TwoLayers: Story = {
+  args: {
     pages: [
       { label: 'root', link: 'root' },
       { label: 'first', link: 'first' },
     ],
   },
-  '3 layers': {
+}
+
+export const ThreeLayers: Story = {
+  args: {
     pages: [
       { label: 'root', link: 'root' },
       { label: 'first', link: 'first' },
       { label: 'second', link: 'second' },
     ],
   },
 }
-
-Object.entries(propsList).forEach(([name, props]) => {
-  stories.add(name, () => {
-    return <Breadcrum {...props} />
-  })
-})

packages/neuron-ui/src/stories/CompensationPeriodTooltip.stories.tsx

@@ -1,9 +1,6 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react'
 import CompensationPeriodTooltip, { CompensationPeriodTooltipProps } from 'components/CompensationPeriodTooltip'
 
-const stories = storiesOf('Compensation Period Tooltip', module)
-
 const props: { [index: string]: CompensationPeriodTooltipProps } = {
   normalStart: {
     depositEpochValue: 0,
@@ -56,28 +53,74 @@ const props: { [index: string]: CompensationPeriodTooltipProps } = {
     endEpochValue: 180,
     isWithdrawn: true,
   },
-  'immature for withdraw': {
+  immatureForWithdraw: {
     depositEpochValue: 1,
     baseEpochTimestamp: Date.now(),
     baseEpochValue: 4.9,
     endEpochValue: 181,
   },
-  'base less than deposit': {
+  baseLessThanDeposit: {
     depositEpochValue: 1,
     baseEpochTimestamp: Date.now(),
     baseEpochValue: 0,
     endEpochValue: 181,
   },
-  'base larger than end': {
+  baseLargerThanEnd: {
     depositEpochValue: 0,
     baseEpochTimestamp: Date.now(),
     baseEpochValue: 181,
     endEpochValue: 180,
   },
 }
 
-Object.keys(props).forEach(key => {
-  stories.add(key, () => {
-    return <CompensationPeriodTooltip {...props[key]} />
-  })
-})
+const meta: Meta<typeof CompensationPeriodTooltip> = {
+  component: CompensationPeriodTooltip,
+}
+
+export default meta
+
+type Story = StoryObj<typeof CompensationPeriodTooltip>
+
+export const NormalStart: Story = {
+  args: props.normalStart,
+}
+
+export const NormalEnd: Story = {
+  args: props.normalEnd,
+}
+
+export const SuggestedStart: Story = {
+  args: props.suggestedStart,
+}
+
+export const SuggestedEnd: Story = {
+  args: props.suggestedEnd,
+}
+
+export const EndingStart: Story = {
+  args: props.endingStart,
+}
+
+export const WithdrawInNormal: Story = {
+  args: props.withdrawInNormal,
+}
+
+export const WithdrawInSuggested: Story = {
+  args: props.withdrawInSuggested,
+}
+
+export const WithdrawnInEnding: Story = {
+  args: props.withdrawnInEnding,
+}
+
+export const ImmatureForWithdraw: Story = {
+  args: props.immatureForWithdraw,
+}
+
+export const BaseLessThanDeposit: Story = {
+  args: props.baseLessThanDeposit,
+}
+
+export const BaseLargerThanEnd: Story = {
+  args: props.baseLargerThanEnd,
+}