problem: Storybook is not working for the react-app

packages/react-app/.babelrc.json

@@ -0,0 +1,19 @@
+{
+  "sourceType": "module",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 120,
+          "electron": 22
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-transform-optional-chaining"
+  ]
+}

packages/react-app/.storybook/main.js

@@ -1,5 +1,13 @@
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
+// see { StorybookConfig } from '@storybook/react-webpack5';
+const config = {
+  framework: '@storybook/react-webpack5',
+  stories: [
+    '../stories/**/*.stories.tsx'
+  ],
+
+  docs: {
+    autodocs: true
+  }
 };
+
+export default config;

packages/react-app/.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<script>
+  //
+  // React-App uses some functions/classes provided by Electron (clipboard, files, etc.), so it's built with `target = 'electron-renderer'` Webpack option,
+  // but Storybook loads the previews with an IFrame which has an isolated context, here we populate required global variables from the main window.
+  //
+  window.global = top.global;
+  window.require = top.require;
+  window.process = top.process;
+  window.Buffer = top.Buffer;
+</script>

packages/react-app/.storybook/preview.tsx

@@ -1,13 +1,16 @@
 import {Theme} from '@emeraldwallet/ui';
 import {ThemeProvider} from '@material-ui/core/styles';
-import { addDecorator, configure } from '@storybook/react';
 import * as React from 'react';
+import { Preview } from '@storybook/react';
 
-const req = require.context('../stories/', true, /\.tsx$/);
+const preview: Preview = {
+  decorators: [
+    (Story) => (
+        <ThemeProvider theme={Theme}>
+          <Story />
+        </ThemeProvider>
+    ),
+  ],
+};
 
-function loadStories () {
-  addDecorator((story) => (<ThemeProvider theme={Theme}>{story()}</ThemeProvider>));
-  req.keys().forEach((filename) => req(filename));
-}
-
-configure(loadStories, module);
+export default preview;

packages/react-app/.storybook/tsconfig.json

@@ -21,6 +21,5 @@
   "include": [
     "../src/**/*.ts",
     "../src/**/*.tsx",
-    "../stories/**/*.tsx"
   ]
 }

packages/react-app/package.json

@@ -11,7 +11,7 @@
     "clean": "rimraf lib/ tsconfig.tsbuildinfo",
     "compile": "tsc -b",
     "resources": "copyfiles -u 1 src/**/*.png lib/",
-    "storybook": "start-storybook -p 9001 -c .storybook --ci",
+    "storybook:build": "storybook dev -p 9001 -c .storybook --ci",
     "storybook:electron": "electron stories/electron_index.js",
     "test": "jest",
     "test:coverage": "jest --coverage"
@@ -52,11 +52,15 @@
     "sortablejs": "^1.15.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/react": "6.5.16",
+    "@babel/core": "^7.24.6",
+    "@babel/plugin-transform-optional-chaining": "^7.24.6",
+    "@babel/preset-env": "^7.24.6",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.24.6",
+    "@storybook/addon-actions": "8.1.3",
+    "@storybook/cli": "^8.1.3",
+    "@storybook/react": "^8.1.3",
+    "@storybook/react-webpack5": "^8.1.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "12.1.5",
     "@types/enzyme": "^3.10.13",
@@ -69,6 +73,7 @@
     "@types/react-redux": "^7.1.25",
     "@types/react-virtualized": "^9.21.22",
     "@types/sortablejs": "^1.15.1",
+    "@types/webpack-env": "^1.18.5",
     "copyfiles": "^2.4.1",
     "dotenv-webpack": "^8.0.1",
     "electron": "22.3.27",
@@ -82,11 +87,12 @@
     "jest-transform-stub": "^2.0.0",
     "require-from-string": "^2.0.2",
     "rimraf": "^5.0.1",
+    "storybook": "8.1.3",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
     "ts-node": "^10.9.1",
     "typescript": "^5.1.6",
-    "webpack": "5.74.0"
+    "webpack": "5.91.0"
   },
   "jest": {
     "preset": "ts-jest",

packages/react-app/stories/ContactForm/index.tsx → packages/react-app/stories/ContactForm/ContactForm.stories.tsx

@@ -1,19 +1,29 @@
 import { Blockchains } from '@emeraldwallet/core';
+import type { Meta, StoryObj } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { storiesOf } from '@storybook/react';
 import * as React from 'react';
 import ContactForm from '../../src/address-book/ContactForm';
 
-storiesOf('ContactForm', module)
-  .add('new contact', () => (
+const meta: Meta<typeof ContactForm> = {
+  title: 'ContactForm',
+  component: ContactForm,
+};
+export default meta;
+
+type Story = StoryObj<typeof ContactForm>;
+
+export const AddContact: Story = {
+  render: () =>
     <ContactForm
       blockchains={Object.values(Blockchains)}
       title="Add Contact"
       onCancel={action('onCancel')}
       onSubmit={action('onSubmit')}
     />
-  ))
-  .add('edit', () => (
+};
+
+export const EditContact: Story = {
+  render: () =>
     <ContactForm
       blockchains={Object.values(Blockchains)}
       contact={{
@@ -28,4 +38,6 @@ storiesOf('ContactForm', module)
       onCancel={action('onCancel')}
       onSubmit={action('onSubmit')}
     />
-  ));
+}
+
+

packages/react-app/stories/CreateAccount/HDPathCounter.stories.tsx

@@ -0,0 +1,37 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {createSeeds, xpubSeedId} from "../wallets";
+import {providerForStore} from "../storeProvider";
+import {createNew} from './data';
+import HDPathCounter from "../../src/create-account/HDPathCounter";
+import {action} from "@storybook/addon-actions";
+
+const { api, backend} = createNew();
+
+const meta: Meta<typeof HDPathCounter> = {
+  title: 'Create Account',
+  component: HDPathCounter,
+  decorators: [
+    //@ts-ignore
+    providerForStore(api, backend, [...createSeeds])
+  ]
+};
+export default meta;
+
+type Story = StoryObj<typeof HDPathCounter>;
+
+export const Base: Story = {
+  name: 'HDPath Counter / Base',
+  args: {
+    base: "m/44'/60'/0'/0/0",
+    onChange: action('changed')
+  }
+};
+
+export const WithDisabled: Story = {
+  name: 'HDPath Counter / With Disabled',
+  args: {
+    base: "m/44'/60'/0'/0/0",
+    disabled: [0, 3, 4],
+    onChange: action('changed')
+  }
+};

packages/react-app/stories/CreateAccount/SelectCoins.stories.tsx

@@ -0,0 +1,51 @@
+import {BlockchainCode, Blockchains} from '@emeraldwallet/core';
+import type {Meta, StoryObj} from '@storybook/react';
+import {createSeeds, xpubSeedId} from "../wallets";
+import {providerForStore} from "../storeProvider";
+import {createNew} from './data';
+import SelectCoins from '../../src/create-account/SelectBlockchains';
+import {action} from "@storybook/addon-actions";
+
+const { api, backend} = createNew();
+
+const meta: Meta<typeof SelectCoins> = {
+  title: 'Create Account',
+  component: SelectCoins,
+  decorators: [
+    //@ts-ignore
+    providerForStore(api, backend, [...createSeeds])
+  ]
+};
+export default meta;
+
+type Story = StoryObj<typeof SelectCoins>;
+
+export const Empty: Story = {
+  name: 'Select Blockchain / Empty',
+  args: {
+    multiple: true,
+    blockchains: [Blockchains[BlockchainCode.ETH], Blockchains[BlockchainCode.ETC]],
+    enabled: [],
+    onChange: action('selected')
+  }
+};
+
+export const OneSet: Story = {
+  name: 'Select Blockchain / One Set',
+  args: {
+    multiple: true,
+    blockchains: [Blockchains[BlockchainCode.ETH], Blockchains[BlockchainCode.ETC]],
+    enabled: [BlockchainCode.ETH],
+    onChange: action('selected')
+  }
+};
+
+export const Single: Story = {
+  name: 'Select Blockchain / Single',
+  args: {
+    multiple: false,
+    blockchains: [Blockchains[BlockchainCode.ETH], Blockchains[BlockchainCode.ETC]],
+    enabled: [],
+    onChange: action('selected')
+  }
+};

packages/react-app/stories/CreateAccount/SelectHDPath.stories.tsx

@@ -0,0 +1,47 @@
+import {BlockchainCode} from '@emeraldwallet/core';
+import type {Meta, StoryObj} from '@storybook/react';
+import SelectHDPath from '../../src/create-account/SelectHDPath';
+import {createSeeds, xpubSeedId} from "../wallets";
+import {providerForStore} from "../storeProvider";
+import {createNew} from './data';
+
+const { api, backend} = createNew();
+
+const meta: Meta<typeof SelectHDPath> = {
+  title: 'Create Account',
+  component: SelectHDPath,
+  decorators: [
+    //@ts-ignore
+    providerForStore(api, backend, [...createSeeds])
+  ]
+};
+export default meta;
+
+type Story = StoryObj<typeof SelectHDPath>;
+
+export const SelectAccount: Story = {
+  name: 'Select Account / Base',
+  args: {
+    seed: { type: 'id', value: 'e23378da-d4b2-4843-ae4d-f42888a11b58' },
+    blockchains: [BlockchainCode.BTC, BlockchainCode.ETH],
+    onChange: (accountId, indexes) => console.log('Account selected', accountId, indexes),
+  }
+};
+
+export const SelectAccountETH: Story = {
+  name: 'Select Account / Only ETH',
+  args: {
+    seed: { type: 'id', value: 'e23378da-d4b2-4843-ae4d-f42888a11b58' },
+    blockchains: [BlockchainCode.ETH],
+    onChange: (accountId, indexes) => console.log('Account selected', accountId, indexes),
+  }
+};
+
+export const SelectAccountXpub: Story = {
+  name: 'Select Account / Xpub',
+  args: {
+    seed: { type: 'id', value: xpubSeedId },
+    blockchains: [BlockchainCode.BTC, BlockchainCode.ETH],
+    onChange: (accountId, indexes) => console.log('Account selected', accountId, indexes),
+  }
+};

packages/react-app/stories/CreateAccount/data.ts

@@ -0,0 +1,65 @@
+import {BackendMock, MemoryApiMock} from "../__mocks__";
+import {BlockchainCode} from "@emeraldwallet/core";
+import {xpubSeedId, wallet3SeedAddresses} from "../wallets";
+
+export interface Data {
+  api: MemoryApiMock;
+  backend: BackendMock;
+}
+
+export function createNew(): Data {
+
+  console.log("prepare api data");
+
+  const api = new MemoryApiMock();
+  const backend = new BackendMock();
+
+  api.vault.addSeedAddress(
+    'e23378da-d4b2-4843-ae4d-f42888a11b58',
+    "m/44'/60'/0'/0/0",
+    '0xc4cf138d349ead73f7a93306096a626c40f56653',
+  );
+  api.vault.addSeedAddress(
+    'e23378da-d4b2-4843-ae4d-f42888a11b58',
+    "m/44'/61'/0'/0/0",
+    '0x75a32a48a215675f822fca1f9d99dadf7c6ec104',
+  );
+  api.vault.addSeedAddress(
+    'e23378da-d4b2-4843-ae4d-f42888a11b58',
+    "m/44'/60'/1'/0/0",
+    '0x49dbb473f4fbdc20a4367763351df63553c86824',
+  );
+  api.vault.addSeedAddress(
+    'e23378da-d4b2-4843-ae4d-f42888a11b58',
+    "m/44'/61'/1'/0/0",
+    '0x2b59a19f1f4de027d039ac3f24e9b73ddf03386f',
+  );
+  api.vault.addSeedAddresses(xpubSeedId, wallet3SeedAddresses());
+
+  backend.useBlockchains([BlockchainCode.ETH, BlockchainCode.ETC]);
+  backend.blockchains[BlockchainCode.ETC]?.setBalance(
+    '0x75a32a48a215675f822fca1f9d99dadf7c6ec104',
+    'ETC',
+    '30400000000000000000',
+  );
+  backend.blockchains[BlockchainCode.ETH]?.setBalance(
+    '0xc4cf138d349ead73f7a93306096a626c40f56653',
+    'ETH',
+    '150078009050000000',
+  );
+  backend.blockchains[BlockchainCode.ETH]?.setBalance(
+    '0xc4cf138d349ead73f7a93306096a626c40f56653',
+    'DAI',
+    '250018500000000000000',
+  );
+  backend.blockchains[BlockchainCode.ETH]?.setBalance(
+    '0xc4cf138d349ead73f7a93306096a626c40f56653',
+    'USDT',
+    '41010000000',
+  );
+
+  return {
+    api,
+    backend
+  }
+}