Migrate to storybook@6.4.x

.storybook/main.js

@@ -1,13 +1,11 @@
 module.exports = {
+  staticDirs: ['../public'],
   stories: ['../src/renderer/**/*.stories.@(ts|tsx)'],
   addons: [
+    "@storybook/addon-essentials",
     '@storybook/preset-create-react-app',
-    '@storybook/addon-controls',
-    '@storybook/addon-viewport',
-    '@storybook/addon-actions',
-    '@storybook/addon-knobs',
-    '@react-theming/storybook-addon/register'
   ],
+  framework: "@storybook/react",
   webpackFinal: async (webpackConfig) => {
     /**
      * CRA doesn't support .mjs files
@@ -57,7 +55,7 @@ module.exports = {
    * ```
    * @see https://github.com/styleguidist/react-docgen-typescript/issues/356#issuecomment-850400428
    */
-  typescript: {
-    reactDocgen: 'react-docgen'
-  }
+  // typescript: {
+  //   reactDocgen: 'react-docgen'
+  // }
 }

.storybook/preview.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { addDecorator } from '@storybook/react/dist/client/preview'
-import { withThemes } from '@react-theming/storybook-addon'
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { BrowserRouter as Router, Route } from 'react-router-dom'
 
 import { AppProvider } from '../src/renderer/contexts/AppContext'
@@ -34,10 +33,20 @@ const providerFn = ({ theme, children }) => (
   </AppProvider>
 )
 
-addDecorator(withThemes(null, [lightTheme, darkTheme], { providerFn }))
+// const _themDecorator = withThemes(null, [lightTheme, darkTheme], { providerFn })
 
-addDecorator((story) => (
+// Creates a `Router` decorator
+// based on https://storybook.js.org/docs/react/essentials/toolbars-and-globals#create-a-decorator
+const withRouter = (Story, context) => (
   <Router>
-    <Route path="/" element={story()} />
+    <Route path="/" element={<Story {...context} />} />
   </Router>
-))
+)
+
+export const decorators = [withRouter];
+
+export const parameters = {
+  viewport: {
+    viewports: INITIAL_VIEWPORTS
+  }
+};

README.md

@@ -186,6 +186,14 @@ yarn lint
 
 Note: `eslint` is provided by `react-scripts` located in `./node_modules/react-scripts/node_modules/` and don't need to be extra installed. If your editor has some issues to find `eslint`, you might point it to this location (see [VSCode settings file](.vscode/settings.json) as an example).
 
+## Storybook
+
+Note: Running `storybook` is broken currently due lack of `React 18` support (see #2248). It will be fixed as soon as `storybook` supports `React 18`.
+
+```bash
+yarn storybook
+```
+
 ### bundle analyze
 
 visualize the bundle map using `source-map-explorer`

package.json

@@ -24,8 +24,8 @@
     "generate:types": "yarn clean:types:midgard && yarn generate:types:midgard",
     "generate:types:midgard": "TS_POST_PROCESS_FILE=./node_modules/.bin/prettier openapi-generator-cli generate -i https://testnet.midgard.thorchain.info/v2/swagger.json -g typescript-rxjs -o ./src/renderer/types/generated/midgard --reserved-words-mappings in=in --enable-post-process-file",
     "clean:types:midgard": "rimraf ./src/renderer/types/generated/midgard",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public",
+    "storybook": "start-storybook -p 9009",
+    "build-storybook": "build-storybook",
     "analyze": "source-map-explorer 'build/static/js/*.js'",
     "prepare": "husky install"
   },
@@ -111,7 +111,7 @@
     "electron-updater": "^5.0.1",
     "electron-window-state": "^5.0.3",
     "ethers": "^5.4.7",
-    "fp-ts": "^2.11.5",
+    "fp-ts": "^2.12.1",
     "fp-ts-rxjs": "^0.6.15",
     "fs-extra": "^10.1.0",
     "io-ts": "^2.2.16",
@@ -134,15 +134,13 @@
     "wif": "^2.0.6"
   },
   "devDependencies": {
-    "@react-theming/storybook-addon": "^1.1.1",
-    "@storybook/addon-actions": "^6.3.12",
-    "@storybook/addon-backgrounds": "^6.3.12",
-    "@storybook/addon-controls": "^6.3.12",
-    "@storybook/addon-knobs": "^6.3.1",
-    "@storybook/addon-viewport": "^6.3.12",
-    "@storybook/preset-create-react-app": "^3.2.0",
-    "@storybook/react": "6.1.21",
-    "@storybook/theming": "^6.3.12",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-interactions": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/node-logger": "^6.4.22",
+    "@storybook/react": "^6.4.22",
+    "@storybook/preset-create-react-app": "^4.0.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/react-hooks": "^8.0.0",
@@ -184,5 +182,9 @@
     "wait-on": "^6.0.1",
     "webpack-cli": "^4.9.2",
     "webpack-node-externals": "^3.0.0"
+  },
+  "resolutions": {
+    "@storybook/react-docgen-typescript-plugin": "1.0.2-canary.253f8c1.0",
+    "react-refresh": "0.11.0"
   }
 }

src/renderer/components/Bonds/Bonds.stories.tsx

@@ -1,12 +1,16 @@
 import React from 'react'
 
-import { withKnobs, select } from '@storybook/addon-knobs'
+// TODO (@veado) Replace knobs
+// import { withKnobs, select } from '@storybook/addon-knobs'
 import { useCallback, useState } from '@storybook/addons'
 import { Meta, Story } from '@storybook/react'
 import { Address } from '@xchainjs/xchain-client'
 import { baseAmount } from '@xchainjs/xchain-util'
 
-import { getMockRDValueFactory, RDStatus } from '../../../shared/mock/rdByStatus'
+import {
+  getMockRDValueFactory
+  // RDStatus
+} from '../../../shared/mock/rdByStatus'
 import { AddressValidation } from '../../services/clients'
 import { NodeInfo } from '../../services/thorchain/types'
 import { ApiError, ErrorId } from '../../services/wallet/types'
@@ -29,20 +33,20 @@ const addressValidation: AddressValidation = (_) => true
 export const Default: Story = () => {
   const [nodesList, setNodesList] = useState<Address[]>([])
 
-  const nodesSelect: Record<Address, RDStatus> = nodesList
-    .map((node) =>
-      select(
-        node,
-        {
-          initial: 'initial',
-          pending: 'pending',
-          error: 'error',
-          success: 'success'
-        },
-        'pending'
-      )
-    )
-    .reduce((acc, node, index) => ({ ...acc, [index]: node }), {})
+  // const nodesSelect: Record<Address, RDStatus> = nodesList
+  //   .map((node) =>
+  //     select(
+  //       node,
+  //       {
+  //         initial: 'initial',
+  //         pending: 'pending',
+  //         error: 'error',
+  //         success: 'success'
+  //       },
+  //       'pending'
+  //     )
+  //   )
+  //   .reduce((acc, node, index) => ({ ...acc, [index]: node }), {})
 
   const removeNode = useCallback(
     (node: Address) => {
@@ -59,9 +63,10 @@ export const Default: Story = () => {
       addNode={addNode}
       removeNode={removeNode}
       goToNode={(node) => console.log('go to ', node)}
-      nodes={nodesList.map((node, index) => ({
+      nodes={nodesList.map((node, _index) => ({
         nodeAddress: node,
-        data: getMockRDValue(nodesSelect[index])
+        // data: getMockRDValue(nodesSelect[index])
+        data: getMockRDValue()
       }))}
     />
   )
@@ -70,8 +75,8 @@ Default.storyName = 'default'
 
 const meta: Meta = {
   component: Bonds,
-  title: 'Bonds',
-  decorators: [withKnobs]
+  title: 'Bonds'
+  // decorators: [withKnobs]
 }
 
 export default meta

src/renderer/components/Bonds/table/BondsTable.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useState } from 'react'
 
-import { withKnobs, select } from '@storybook/addon-knobs'
+// TODO (@veado) Replace knobs
+// import { withKnobs, select } from '@storybook/addon-knobs'
 import { Meta, Story } from '@storybook/react'
 import { Address } from '@xchainjs/xchain-client'
 import { baseAmount } from '@xchainjs/xchain-util'
@@ -23,43 +24,49 @@ const getMockRDValue = getMockRDValueFactory<ApiError, NodeInfo>(
 )
 
 export const Default: Story = () => {
-  const firstNodeRdKnob: RDStatus = select(
-    'first node',
-    {
-      initial: 'initial',
-      pending: 'pending',
-      error: 'error',
-      success: 'success'
-    },
-    'initial'
-  )
+  // const firstNodeRdKnob: RDStatus = select(
+  //   'first node',
+  //   {
+  //     initial: 'initial',
+  //     pending: 'pending',
+  //     error: 'error',
+  //     success: 'success'
+  //   },
+  //   'initial'
+  // )
 
-  const secondNodeRdKnob: RDStatus = select(
-    'second node',
-    {
-      initial: 'initial',
-      pending: 'pending',
-      error: 'error',
-      success: 'success'
-    },
-    'initial'
-  )
+  // const secondNodeRdKnob: RDStatus = select(
+  //   'second node',
+  //   {
+  //     initial: 'initial',
+  //     pending: 'pending',
+  //     error: 'error',
+  //     success: 'success'
+  //   },
+  //   'initial'
+  // )
 
-  const thirdNodeRdKnob: RDStatus = select(
-    'third node',
-    {
-      initial: 'initial',
-      pending: 'pending',
-      error: 'error',
-      success: 'success'
-    },
-    'success'
-  )
+  // const thirdNodeRdKnob: RDStatus = select(
+  //   'third node',
+  //   {
+  //     initial: 'initial',
+  //     pending: 'pending',
+  //     error: 'error',
+  //     success: 'success'
+  //   },
+  //   'success'
+  // )
+
+  // const nodesSelect: Record<Address, RDStatus> = {
+  //   thor1766mazrxs5asuscepa227r6ekr657234f8p7nf: firstNodeRdKnob,
+  //   thor1766mazrxs5asuscepa227r6ekr657234f9asda: secondNodeRdKnob,
+  //   thor1766mazrxs5asuscepa227r6ekr657234fkswjh: thirdNodeRdKnob
+  // }
 
   const nodesSelect: Record<Address, RDStatus> = {
-    thor1766mazrxs5asuscepa227r6ekr657234f8p7nf: firstNodeRdKnob,
-    thor1766mazrxs5asuscepa227r6ekr657234f9asda: secondNodeRdKnob,
-    thor1766mazrxs5asuscepa227r6ekr657234fkswjh: thirdNodeRdKnob
+    thor1766mazrxs5asuscepa227r6ekr657234f8p7nf: 'initial',
+    thor1766mazrxs5asuscepa227r6ekr657234f9asda: 'pending',
+    thor1766mazrxs5asuscepa227r6ekr657234fkswjh: 'success'
   }
   const [nodesList, setNodesList] = useState<Address[]>([
     'thor1766mazrxs5asuscepa227r6ekr657234f8p7nf',
@@ -92,8 +99,8 @@ Default.storyName = 'default'
 
 const meta: Meta = {
   component: BondsTable,
-  title: 'Bonds/BondsTable',
-  decorators: [withKnobs]
+  title: 'Bonds/BondsTable'
+  // decorators: [withKnobs]
 }
 
 export default meta

src/renderer/components/header/lock/HeaderLock.stories.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 
-import { boolean } from '@storybook/addon-knobs'
+// TODO (@veado) Replace knobs
+// import { boolean } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import * as O from 'fp-ts/lib/Option'
 
 import { HeaderLock } from './HeaderLock'
 
 storiesOf('Components/HeaderLock', module).add('desktop / mobile', () => {
-  const isDesktopView = boolean('isDesktopView', false)
-  return <HeaderLock isDesktopView={isDesktopView} keystore={O.none} />
+  // const isDesktopView = boolean('isDesktopView', false)
+  // return <HeaderLock isDesktopView={isDesktopView} keystore={O.none} />
+  return <HeaderLock isDesktopView={false} keystore={O.none} />
 })

src/renderer/components/header/price/HeaderPriceSelector.stories.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
-import { boolean } from '@storybook/addon-knobs'
+// TODO (@veado) Replace knobs
+// import { boolean } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import { AssetBTC, AssetETH, AssetRuneNative } from '@xchainjs/xchain-util'
 import * as O from 'fp-ts/lib/Option'
@@ -13,11 +14,12 @@ const assets: PricePoolAssets = [AssetRuneNative, AssetBTC, AssetETH, AssetBUSDB
 
 storiesOf('Components/HeaderPriceSelector', module).add('desktop / mobile', () => {
   const changeHandler = (asset: PricePoolAsset) => console.log(`changed: ${asset}`)
-  const isDesktopView = boolean('isDesktopView', false)
+  // const isDesktopView = boolean('isDesktopView', false)
   return (
     <HeaderPriceSelector
       assets={assets}
-      isDesktopView={isDesktopView}
+      // isDesktopView={isDesktopView}
+      isDesktopView={true}
       changeHandler={changeHandler}
       selectedAsset={O.some(AssetBUSDBAF)}
     />

src/renderer/components/header/settings/HeaderSettings.stories.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 
-import { boolean } from '@storybook/addon-knobs'
+// TODO (@veado) Replace knobs
+// import { boolean } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 
 import { HeaderSettings } from './HeaderSettings'
 
 storiesOf('Components/HeaderSettings', module).add('desktop / mobile', () => {
-  const isDesktopView = boolean('isDesktopView', false)
-  return <HeaderSettings isDesktopView={isDesktopView} />
+  // const isDesktopView = boolean('isDesktopView', false)
+  // return <HeaderSettings isDesktopView={isDesktopView} />
+  return <HeaderSettings isDesktopView={true} />
 })

src/renderer/components/header/theme/HeaderTheme.stories.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 
-import { boolean } from '@storybook/addon-knobs'
+// TODO (@veado) Replace knobs
+// import { boolean } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 
 import { HeaderTheme } from './HeaderTheme'
 
 storiesOf('Components/HeaderTheme', module).add('desktop / mobile', () => {
-  const isDesktopView = boolean('isDesktopView', false)
-  return <HeaderTheme isDesktopView={isDesktopView} />
+  // const isDesktopView = boolean('isDesktopView', false)
+  // return <HeaderTheme isDesktopView={isDesktopView} />
+  return <HeaderTheme isDesktopView={true} />
 })