[DDW-596] Upgraded story files to storybook 6

fstoqnov-iohk · Dec 24, 2021 · b53b9d6 · b53b9d6
2 parents fadfb7c + b696f1e
commit b53b9d6
Show file tree

Hide file tree

Showing 65 changed files with 3,906 additions and 2,774 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -1,2 +1,3 @@
 [build]
   environment = { YARN_VERSION = "1.22.4", NODE_VERSION = "14.17.0" }
+  command = "yarn && yarn storybook:build"  
diff --git a/package.json b/package.json
@@ -89,6 +89,7 @@
     "@dump247/storybook-state": "1.6.1",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.3",
     "@storybook/addon-actions": "6.4.9",
+    "@storybook/addon-essentials": "^6.4.9",
     "@storybook/addon-knobs": "6.4.0",
     "@storybook/addon-links": "6.4.9",
     "@storybook/addons": "6.4.9",

diff --git a/storybook/main.js b/storybook/main.js
@@ -1,19 +1,22 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const path = require('path');
+const isCi = process.env.CI && process.env.CI !== '';
 
 module.exports = {
-  alias: {
-    Renderer: path.resolve(__dirname, 'source/renderer'),
-  },
-  stories: ['./stories/**/*.stories.@(js|mdx|ts)'],
+  stories: ['../source/**/*.stories.js', './stories/index.js'],
   addons: [
+    '@storybook/addon-essentials',
     '@storybook/addon-knobs',
     '@storybook/addon-actions',
     '@storybook/addon-links',
     '@storybook/builder-webpack5',
     '@storybook/manager-webpack5',
     './addons/DaedalusMenu/register',
   ],
+  previewHead: (head) => `
+    ${head}
+    ${isCi ? '' : '<script src="vendor.dll.js"></script>'}
+  `,
   core: {
     builder: 'webpack5',
   },

diff --git a/storybook/preview-head.html b/storybook/preview-head.html
diff --git a/storybook/preview.js b/storybook/preview.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import StoryWrapper from './stories/_support/StoryWrapper';
+import '!style-loader!css-loader!sass-loader!../source/renderer/app/themes/index.global.scss'; // eslint-disable-line
+import './stories/_support/environment';
+
+export const decorators = [(story) => <StoryWrapper>{story}</StoryWrapper>];
diff --git a/storybook/stories/assets/Asset.stories.js b/storybook/stories/assets/Asset.stories.js
@@ -7,7 +7,7 @@ import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
 import StoryDecorator from '../_support/StoryDecorator';
 import Asset from '../../../source/renderer/app/components/assets/Asset';
 
-storiesOf('Assets|Asset pill', module)
+storiesOf('Assets/Asset pill', module)
   .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>)
   .addDecorator(withKnobs)
 

diff --git a/storybook/stories/assets/AssetSettingsDialog.stories.js b/storybook/stories/assets/AssetSettingsDialog.stories.js
@@ -5,7 +5,6 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, number } from '@storybook/addon-knobs';
 import StoryDecorator from '../_support/StoryDecorator';
-import StoryProvider from '../_support/StoryProvider';
 import AssetSettingsDialog from '../../../source/renderer/app/components/assets/AssetSettingsDialog';
 
 const asset = {
@@ -20,12 +19,8 @@ const asset = {
   metadata: null,
 };
 
-storiesOf('Assets|AssetSettingsDialog', module)
-  .addDecorator((story) => (
-    <StoryProvider>
-      <StoryDecorator>{story()}</StoryDecorator>
-    </StoryProvider>
-  ))
+storiesOf('Assets/AssetSettingsDialog', module)
+  .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>)
   .addDecorator(withKnobs)
 
   // ====== Stories ======

diff --git a/storybook/stories/common/ItemsDropdown.stories.js b/storybook/stories/common/ItemsDropdown.stories.js
@@ -80,7 +80,7 @@ const stakePoolsOptions = stakePoolsList.reduce((obj, pool) => {
   return obj;
 }, {});
 
-storiesOf('Common|ItemsDropdown', module)
+storiesOf('Common/ItemsDropdown', module)
   .addDecorator((story: any, context: any) => {
     if (context.name === 'CountdownWidget') {
       return story();

diff --git a/storybook/stories/common/Widgets.stories.js b/storybook/stories/common/Widgets.stories.js
@@ -76,7 +76,7 @@ const messages = defineMessages({
   },
 });
 
-storiesOf('Common|Widgets', module)
+storiesOf('Common/Widgets', module)
   .addDecorator((story: any, context: any) => {
     if (context.name === 'CountdownWidget') {
       return story();
@@ -134,43 +134,46 @@ storiesOf('Common|Widgets', module)
     </div>
   ))
 
-  .add('BigButtonForDialogs', (props: { locale: string }) => (
-    <div>
-      <div style={{ width: '300px', height: '200px', display: 'flex' }}>
-        <BigButtonForDialogs
-          description={intl[props.locale].formatMessage(
-            messages.createNewWallet
-          )}
-          label={intl[props.locale].formatMessage(messages.create)}
-          icon={createIcon}
-          onClick={() => {}}
-        />
-      </div>
-      <div style={{ width: '300px', height: '200px', display: 'flex' }}>
-        <BigButtonForDialogs
-          description={intl[props.locale].formatMessage(
-            messages.joinSharedWallet
-          )}
-          label={intl[props.locale].formatMessage(messages.join)}
-          icon={joinSharedIcon}
-          onClick={() => {}}
-          isDisabled
-        />
-      </div>
-      <div style={{ width: '300px', height: '200px', display: 'flex' }}>
-        <BigButtonForDialogs
-          description={intl[props.locale].formatMessage(
-            messages.importExistingWallet
-          )}
-          label={intl[props.locale].formatMessage(messages.import)}
-          icon={importIcon}
-          onClick={() => {}}
-        />
+  .add('BigButtonForDialogs', (_, props: { locale: string }) => {
+    console.log('_', _);
+    return (
+      <div>
+        <div style={{ width: '300px', height: '200px', display: 'flex' }}>
+          <BigButtonForDialogs
+            description={intl[props.locale].formatMessage(
+              messages.createNewWallet
+            )}
+            label={intl[props.locale].formatMessage(messages.create)}
+            icon={createIcon}
+            onClick={() => {}}
+          />
+        </div>
+        <div style={{ width: '300px', height: '200px', display: 'flex' }}>
+          <BigButtonForDialogs
+            description={intl[props.locale].formatMessage(
+              messages.joinSharedWallet
+            )}
+            label={intl[props.locale].formatMessage(messages.join)}
+            icon={joinSharedIcon}
+            onClick={() => {}}
+            isDisabled
+          />
+        </div>
+        <div style={{ width: '300px', height: '200px', display: 'flex' }}>
+          <BigButtonForDialogs
+            description={intl[props.locale].formatMessage(
+              messages.importExistingWallet
+            )}
+            label={intl[props.locale].formatMessage(messages.import)}
+            icon={importIcon}
+            onClick={() => {}}
+          />
+        </div>
       </div>
-    </div>
-  ))
+    );
+  })
 
-  .add('MnemonicInputWidget - 9 words', (props: { locale: string }) => {
+  .add('MnemonicInputWidget - 9 words', (_, props: { locale: string }) => {
     const tokens = observable(['', '', '', '', '', '', '', '', '']);
     return (
       <div style={{ padding: 20 }}>
@@ -187,11 +190,11 @@ storiesOf('Common|Widgets', module)
 
   .add('TinySwitch', () => <TinySwitch />)
 
-  .add('TinySwitch - short label', (props: { locale: string }) => (
+  .add('TinySwitch - short label', (_, props: { locale: string }) => (
     <TinySwitch label={intl[props.locale].formatMessage(messages.save)} />
   ))
 
-  .add('ButtonLink', (props: { locale: string }) => (
+  .add('ButtonLink', (_, props: { locale: string }) => (
     <ButtonLink
       label={intl[props.locale].formatMessage(messages.save)}
       onClick={action('onClick')}

diff --git a/storybook/stories/dapps/TransactionRequest.stories.js b/storybook/stories/dapps/TransactionRequest.stories.js
@@ -8,7 +8,7 @@ import { withState } from '@dump247/storybook-state';
 import StoryDecorator from '../_support/StoryDecorator';
 import DappTransactionRequest from '../../../source/renderer/app/components/dapp/DappTransactionRequest';
 import Notification from '../../../source/renderer/app/components/notifications/Notification';
-import StoryProvider, { WALLETS_V2 } from '../_support/StoryProvider';
+import { WALLETS_V2 } from '../_support/StoryProvider';
 import { generateAssetToken } from '../_support/utils';
 
 const allAssets = [
@@ -37,12 +37,8 @@ const allAssets = [
   ),
 ];
 
-storiesOf('dApps|TransactionRequest', module)
-  .addDecorator((story) => (
-    <StoryProvider>
-      <StoryDecorator>{story()}</StoryDecorator>
-    </StoryProvider>
-  ))
+storiesOf('dApps/TransactionRequest', module)
+  .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>)
   .addDecorator(withKnobs)
 
   // ====== Stories ======

diff --git a/storybook/stories/index.js b/storybook/stories/index.js
@@ -1,6 +1,4 @@
 // @flow
-import '../../source/renderer/app/themes/index.global.scss';
-import './_support/environment';
 
 // Wallets
 import './wallets';

diff --git a/storybook/stories/navigation/Sidebar.stories.js b/storybook/stories/navigation/Sidebar.stories.js
@@ -109,12 +109,8 @@ const sidebarMenusHardware = observable({
 
 let emptyMenus;
 
-storiesOf('Navigation|Sidebar', module)
-  .addDecorator((story) => (
-    <StoryProvider>
-      <StoryDecorator>{story()}</StoryDecorator>
-    </StoryProvider>
-  ))
+storiesOf('Navigation/Sidebar', module)
+  .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>)
   .addDecorator(withKnobs)
   // ====== Stories ======
   .add('No Category', (props: { currentTheme: string }) => (

diff --git a/storybook/stories/navigation/SidebarCategory.stories.js b/storybook/stories/navigation/SidebarCategory.stories.js
@@ -11,7 +11,7 @@ const category = {
   icon: walletsIcon,
   route: 'WALLETS',
 };
-storiesOf('Navigation|Sidebar', module)
+storiesOf('Navigation/Sidebar', module)
   .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>)
 
   // ====== Stories ======

diff --git a/storybook/stories/navigation/SidebarWalletsMenu.stories.js b/storybook/stories/navigation/SidebarWalletsMenu.stories.js
@@ -7,7 +7,7 @@ import { isShelleyTestnetTheme } from '../_support/utils';
 import WalletsWrapper from '../wallets/_utils/WalletsWrapper';
 import SidebarWalletsMenu from '../../../source/renderer/app/components/sidebar/wallets/SidebarWalletsMenu';
 
-storiesOf('Navigation|Wallets Menu', module)
+storiesOf('Navigation/Wallets Menu', module)
   .addDecorator((story) => (
     <StoryDecorator>
       <div style={{ width: '200px' }}>{story()}</div>

diff --git a/storybook/stories/news/AlertsOverlay.stories.js b/storybook/stories/news/AlertsOverlay.stories.js
@@ -84,11 +84,11 @@ const getAlerts = (locale: string) => [
   }),
 ];
 
-storiesOf('News|Overlays', module)
+storiesOf('News/Overlays', module)
   .addDecorator((story, context) => (
     <StoryDecorator>{withKnobs(story, context)}</StoryDecorator>
   ))
-  .add('Alerts', (props: { locale: string }) => (
+  .add('Alerts', (_, props: { locale: string }) => (
     <AlertsOverlay
       allAlertsCount={getAlerts(props.locale).length}
       alerts={getAlerts(props.locale)}

diff --git a/storybook/stories/news/AppUpdateOverlay.stories.js b/storybook/stories/news/AppUpdateOverlay.stories.js
@@ -8,10 +8,10 @@ import AppUpdateOverlay from '../../../source/renderer/app/components/appUpdate/
 import { update, version, availableAppVersion } from './_utils/fakeDataUpdate';
 import { rangeMap } from '../../../source/renderer/app/utils/numbers';
 
-storiesOf('News|Overlays', module)
+storiesOf('News/Overlays', module)
   .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>)
   .addDecorator(withKnobs)
-  .add('Update', ({ locale }: { locale: string }) => {
+  .add('Update', (_, { locale }: { locale: string }) => {
     const scenario = radios(
       'Scenario',
       {

diff --git a/storybook/stories/news/IncidentOverlay.stories.js b/storybook/stories/news/IncidentOverlay.stories.js
@@ -8,7 +8,7 @@ import IncidentOverlay from '../../../source/renderer/app/components/news/Incide
 import { dateOptions } from '../_support/profileSettings';
 import { DATE_ENGLISH_OPTIONS } from '../../../source/renderer/app/config/profileConfig';
 
-storiesOf('News|Overlays', module)
+storiesOf('News/Overlays', module)
   .addDecorator((story) => (
     <StoryDecorator>
       {story({
@@ -29,7 +29,7 @@ storiesOf('News|Overlays', module)
     </StoryDecorator>
   ))
   .addDecorator(withKnobs)
-  .add('Incident Overlay', (props) => (
+  .add('Incident Overlay', (_, props) => (
     <IncidentOverlay
       incident={props}
       onOpenExternalLink={action('onOpenExternalLink')}
@@ -41,7 +41,7 @@ storiesOf('News|Overlays', module)
       )}
     />
   ))
-  .add('Incident - Themed', (props) => (
+  .add('Incident - Themed', (_, props) => (
     <IncidentOverlay
       incident={{
         ...props,
@@ -56,7 +56,7 @@ storiesOf('News|Overlays', module)
       )}
     />
   ))
-  .add('Incident - Grey', (props) => (
+  .add('Incident - Grey', (_, props) => (
     <IncidentOverlay
       incident={{
         ...props,

diff --git a/storybook/stories/news/NewsFeed.stories.js b/storybook/stories/news/NewsFeed.stories.js
@@ -19,7 +19,7 @@ const updateDownloadProgressOptions = {
   step: 1,
 };
 
-storiesOf('News|NewsFeed', module)
+storiesOf('News/NewsFeed', module)
   .addDecorator((story, context) => (
     <StoryDecorator>{withKnobs(story, context)}</StoryDecorator>
   ))
@@ -66,7 +66,7 @@ storiesOf('News|NewsFeed', module)
     </div>
   ))
 
-  .add('Fetched', ({ locale }: { locale: string }) => {
+  .add('Fetched', (_, { locale }: { locale: string }) => {
     const displayAppUpdateNewsItem = boolean('displayAppUpdateNewsItem', true);
     const updateDownloadProgress = displayAppUpdateNewsItem
       ? number('updateDownloadProgress', 30, updateDownloadProgressOptions)

diff --git a/storybook/stories/nodes/about/About.stories.js b/storybook/stories/nodes/about/About.stories.js
@@ -6,7 +6,7 @@ import StoryDecorator from '../../_support/StoryDecorator';
 import AboutDialog from '../../../../source/renderer/app/containers/static/AboutDialog';
 import { aboutDialogProps } from '../_utils/props';
 
-storiesOf('Nodes|About', module)
+storiesOf('Nodes/About', module)
   .addDecorator((story, context) => (
     <StoryDecorator>{withKnobs(story, context)}</StoryDecorator>
   ))

diff --git a/storybook/stories/nodes/environment/TopBarEnvironment.stories.js b/storybook/stories/nodes/environment/TopBarEnvironment.stories.js
@@ -107,12 +107,8 @@ const topBarProductionEnv = (currentTheme) => (
   </TopBar>
 );
 
-storiesOf('Nodes|Environment', module)
-  .addDecorator((story) => (
-    <StoryProvider>
-      <StoryDecorator>{story()}</StoryDecorator>
-    </StoryProvider>
-  ))
+storiesOf('Nodes/Environment', module)
+  .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>)
   .addDecorator(withKnobs)
   // ====== Stories ======
   .add('Testnet', (props: { currentTheme: string }) => (

diff --git a/storybook/stories/nodes/errors/Errors.stories.js b/storybook/stories/nodes/errors/Errors.stories.js
@@ -8,7 +8,7 @@ import StoryDecorator from '../../_support/StoryDecorator';
 import { NoDiskSpaceErrorStory } from './NoDiskSpaceError.stories';
 import { SystemTimeErrorStory } from './SystemTimeError.stories';
 
-storiesOf('Nodes | Errors', module)
+storiesOf('Nodes / Errors', module)
   .addDecorator((story, context) => (
     <StoryDecorator>{withKnobs(story, context)}</StoryDecorator>
   ))

diff --git a/storybook/stories/nodes/errors/SystemTimeError.stories.js b/storybook/stories/nodes/errors/SystemTimeError.stories.js
@@ -5,7 +5,10 @@ import { action } from '@storybook/addon-actions';
 
 import SystemTimeError from '../../../../source/renderer/app/components/loading/system-time-error/SystemTimeError';
 
-export const SystemTimeErrorStory = ({ locale }: { locale: string }) => (
+export const SystemTimeErrorStory = (
+  _: any,
+  { locale }: { locale: string }
+) => (
   <SystemTimeError
     localTimeDifference={number('localTimeDifference', 0)}
     currentLocale={locale}

diff --git a/storybook/stories/nodes/splash/Splash.stories.js b/storybook/stories/nodes/splash/Splash.stories.js
@@ -4,7 +4,7 @@ import { storiesOf } from '@storybook/react';
 import SplashNetworkFlight from '../../../../source/renderer/app/components/splash/SplashNetworkFlight';
 import StoryDecorator from '../../_support/StoryDecorator';
 
-storiesOf('Nodes|Splash Network Info', module)
+storiesOf('Nodes/Splash Network Info', module)
   .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>)
   .add('Flight', () => (
     <SplashNetworkFlight onClose={() => null} openExternalLink={() => null} />

diff --git a/storybook/stories/nodes/status/Diagnostics.stories.js b/storybook/stories/nodes/status/Diagnostics.stories.js
@@ -33,7 +33,7 @@ const coreInfo = {
     '/Users/daedalus/Library/Application Support/Daedalus Demo',
 };
 
-storiesOf('Nodes|Status', module)
+storiesOf('Nodes/Status', module)
   .addDecorator((story) => <StoryDecorator>{story()}</StoryDecorator>)
   .addDecorator(withKnobs)