-
Notifications
You must be signed in to change notification settings - Fork 85
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
problem: Storybook is not working for the react-app
solution: defined missing vars in preview-head.html; also upgrade Storybook to the latest
- Loading branch information
Showing
71 changed files
with
4,973 additions
and
7,721 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,6 +21,5 @@ | |
| "include": [ | ||
| "../src/**/*.ts", | ||
| "../src/**/*.tsx", | ||
| "../stories/**/*.tsx" | ||
| ] | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
packages/react-app/stories/CreateAccount/HDPathCounter.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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') | ||
| } | ||
| }; |
51 changes: 51 additions & 0 deletions
51
packages/react-app/stories/CreateAccount/SelectCoins.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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') | ||
| } | ||
| }; |
47 changes: 47 additions & 0 deletions
47
packages/react-app/stories/CreateAccount/SelectHDPath.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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), | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| } | ||
| } |
Oops, something went wrong.