Skip to content

Commit c52cfbe

Browse files
Methuselah96Methuselah96
authored
Upgrade to Storybook 7 (#1386)
* Migrate * Config updates * Remove * No require-from-string * Update lock file * Fix types * Doesn't work * Update to CSF3
1 parent 59be92a commit c52cfbe

File tree

17 files changed

+2444
-5260
lines changed

17 files changed

+2444
-5260
lines changed

‎package.json‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,6 @@
4343
"pnpm": {
4444
"overrides": {
4545
"@babel/highlight>chalk": "Methuselah96/chalk#v2-without-process"
46-
},
47-
"peerDependencyRules": {
48-
"allowedVersions": {
49-
"react": "18",
50-
"react-dom": "18"
51-
}
5246
}
5347
}
5448
}

‎packages/redux-devtools-ui/.storybook/main.js‎

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎packages/redux-devtools-ui/.storybook/main.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { StorybookConfig } from '@storybook/react-webpack5';
2+
3+
const config: StorybookConfig = {
4+
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
5+
addons: [
6+
'@storybook/addon-links',
7+
{
8+
name: '@storybook/addon-essentials',
9+
options: {
10+
backgrounds: false,
11+
},
12+
},
13+
'@storybook/addon-interactions',
14+
],
15+
framework: {
16+
name: '@storybook/react-webpack5',
17+
options: {},
18+
},
19+
docs: {
20+
autodocs: 'tag',
21+
},
22+
};
23+
24+
export default config;

‎packages/redux-devtools-ui/.storybook/preview.tsx‎

Lines changed: 40 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,9 @@
11
import React from 'react';
2+
import type { Preview } from '@storybook/react';
3+
24
import { Container } from '../src';
35
import { listSchemes, listThemes } from '../src/utils/theme';
46

5-
export const parameters = {
6-
actions: { argTypesRegex: '^on[A-Z].*' },
7-
};
8-
9-
export const globalTypes = {
10-
theme: {
11-
name: 'Theme',
12-
description: 'Global theme for components',
13-
defaultValue: 'default',
14-
toolbar: {
15-
items: listThemes(),
16-
showName: true,
17-
},
18-
},
19-
scheme: {
20-
name: 'Color Scheme',
21-
description: 'Global color scheme for components',
22-
defaultValue: 'default',
23-
toolbar: {
24-
items: listSchemes(),
25-
showName: true,
26-
},
27-
},
28-
color: {
29-
name: 'Color',
30-
description: 'Global color for components',
31-
defaultValue: 'light',
32-
toolbar: {
33-
items: ['auto', 'light', 'dark'],
34-
showName: true,
35-
},
36-
},
37-
};
38-
397
const withThemeProvider = (Story, context) => (
408
<Container
419
themeData={{
@@ -47,4 +15,41 @@ const withThemeProvider = (Story, context) => (
4715
<Story {...context} />
4816
</Container>
4917
);
50-
export const decorators = [withThemeProvider];
18+
19+
const preview: Preview = {
20+
parameters: {
21+
actions: { argTypesRegex: '^on[A-Z].*' },
22+
},
23+
globalTypes: {
24+
theme: {
25+
name: 'Theme',
26+
description: 'Global theme for components',
27+
defaultValue: 'default',
28+
toolbar: {
29+
items: listThemes(),
30+
showName: true,
31+
},
32+
},
33+
scheme: {
34+
name: 'Color Scheme',
35+
description: 'Global color scheme for components',
36+
defaultValue: 'default',
37+
toolbar: {
38+
items: listSchemes(),
39+
showName: true,
40+
},
41+
},
42+
color: {
43+
name: 'Color',
44+
description: 'Global color for components',
45+
defaultValue: 'light',
46+
toolbar: {
47+
items: ['auto', 'light', 'dark'],
48+
showName: true,
49+
},
50+
},
51+
},
52+
decorators: [withThemeProvider],
53+
};
54+
55+
export default preview;

‎packages/redux-devtools-ui/package.json‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
},
2626
"scripts": {
2727
"start": "pnpm run storybook",
28-
"storybook": "start-storybook --port 6006 --static-dir ./fonts",
29-
"build:storybook": "build-storybook --static-dir ./fonts --quiet",
28+
"storybook": "storybook dev --port 6006 --static-dir ./fonts",
29+
"build:storybook": "storybook build --static-dir ./fonts --quiet",
3030
"build": "pnpm run build:lib && pnpm run build:storybook",
3131
"build:lib": "pnpm run build:cjs && pnpm run build:esm && pnpm run build:types && pnpm run build:css",
3232
"build:cjs": "babel src --extensions \".ts,.tsx\" --out-dir lib/cjs",
@@ -67,10 +67,11 @@
6767
"@babel/preset-env": "^7.20.2",
6868
"@babel/preset-react": "^7.18.6",
6969
"@babel/preset-typescript": "^7.21.0",
70-
"@storybook/addon-essentials": "^6.5.16",
71-
"@storybook/builder-webpack5": "^6.5.16",
72-
"@storybook/manager-webpack5": "^6.5.16",
73-
"@storybook/react": "^6.5.16",
70+
"@storybook/addon-essentials": "^7.0.2",
71+
"@storybook/addon-interactions": "^7.0.2",
72+
"@storybook/addon-links": "^7.0.2",
73+
"@storybook/react": "^7.0.2",
74+
"@storybook/react-webpack5": "^7.0.2",
7475
"@testing-library/dom": "^9.2.0",
7576
"@testing-library/react": "^14.0.0",
7677
"@testing-library/user-event": "^14.4.3",
@@ -93,8 +94,8 @@
9394
"react": "^18.2.0",
9495
"react-dom": "^18.2.0",
9596
"react-is": "^18.2.0",
96-
"require-from-string": "^2.0.2",
9797
"rimraf": "^4.4.1",
98+
"storybook": "^7.0.2",
9899
"styled-components": "^5.3.9",
99100
"stylelint": "^15.3.0",
100101
"stylelint-config-prettier": "^9.0.5",

‎packages/redux-devtools-ui/src/Button/Button.stories.tsx‎

Lines changed: 42 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from 'react';
22
import styled from 'styled-components';
33
import { MdFiberManualRecord } from 'react-icons/md';
4-
import { Story } from '@storybook/react';
4+
import { Meta, StoryObj } from '@storybook/react';
55
import Button from './';
6-
import { ButtonProps } from './Button';
76

8-
export default {
7+
const meta: Meta = {
98
title: 'Button',
109
component: Button,
1110
};
1211

12+
export default meta;
13+
1314
const Container = styled.div`
1415
display: flex;
1516
height: 100%;
@@ -18,41 +19,45 @@ const Container = styled.div`
1819
align-items: center;
1920
`;
2021

21-
const Template: Story<ButtonProps> = (args) => (
22-
<Container>
23-
<Button {...args} />
24-
</Container>
25-
);
22+
type Story = StoryObj<typeof Button>;
2623

27-
export const Default = Template.bind({});
28-
Default.args = {
29-
title: 'Hello Tooltip! \\a And from new line hello!',
30-
tooltipPosition: 'top',
31-
primary: true,
32-
size: 'normal',
33-
disabled: false,
34-
children: 'Hello Button',
35-
};
36-
Default.argTypes = {
37-
onClick: { control: { disable: true } },
38-
type: { control: { disable: true } },
39-
mark: { control: { disable: true } },
40-
theme: { control: { disable: true } },
24+
export const Default: Story = {
25+
render: (args) => (
26+
<Container>
27+
<Button {...args} />
28+
</Container>
29+
),
30+
args: {
31+
title: 'Hello Tooltip! \\a And from new line hello!',
32+
tooltipPosition: 'top',
33+
primary: true,
34+
size: 'normal',
35+
disabled: false,
36+
children: 'Hello Button',
37+
},
38+
argTypes: {
39+
onClick: { control: { disable: true } },
40+
type: { control: { disable: true } },
41+
mark: { control: { disable: true } },
42+
theme: { control: { disable: true } },
43+
},
4144
};
4245

43-
export const Mark = Template.bind({});
44-
Mark.args = {
45-
mark: 'base08',
46-
title: 'Hello Tooltip',
47-
tooltipPosition: 'top',
48-
size: 'normal',
49-
disabled: false,
50-
children: <MdFiberManualRecord />,
51-
};
52-
Mark.argTypes = {
53-
children: { control: { disable: true } },
54-
onClick: { control: { disable: true } },
55-
type: { control: { disable: true } },
56-
primary: { control: { disable: true } },
57-
theme: { control: { disable: true } },
46+
export const Mark: Story = {
47+
render: Default.render,
48+
args: {
49+
mark: 'base08',
50+
title: 'Hello Tooltip',
51+
tooltipPosition: 'top',
52+
size: 'normal',
53+
disabled: false,
54+
children: <MdFiberManualRecord />,
55+
},
56+
argTypes: {
57+
children: { control: { disable: true } },
58+
onClick: { control: { disable: true } },
59+
type: { control: { disable: true } },
60+
primary: { control: { disable: true } },
61+
theme: { control: { disable: true } },
62+
},
5863
};

‎packages/redux-devtools-ui/src/ContextMenu/ContextMenu.stories.tsx‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from 'react';
22
import styled from 'styled-components';
3-
import { Story } from '@storybook/react';
3+
import { Meta, StoryObj } from '@storybook/react';
44
import ContextMenu from './';
55
import { items } from './data';
6-
import { ContextMenuProps } from './ContextMenu';
76

8-
export default {
7+
const meta: Meta = {
98
title: 'ContextMenu',
109
component: ContextMenu,
1110
};
1211

12+
export default meta;
13+
1314
const Container = styled.div`
1415
display: flex;
1516
height: 100%;
@@ -18,21 +19,23 @@ const Container = styled.div`
1819
align-items: center;
1920
`;
2021

21-
const Template: Story<ContextMenuProps> = (args) => (
22-
<Container>
23-
<ContextMenu {...args} />
24-
</Container>
25-
);
22+
type Story = StoryObj<typeof ContextMenu>;
2623

27-
export const Default = Template.bind({});
28-
Default.args = {
29-
visible: true,
30-
x: 100,
31-
y: 100,
32-
items,
33-
};
34-
Default.argTypes = {
35-
visible: { control: { disable: true } },
36-
items: { control: { disable: true } },
37-
onClick: { control: { disable: true } },
24+
export const Default: Story = {
25+
render: (args) => (
26+
<Container>
27+
<ContextMenu {...args} />
28+
</Container>
29+
),
30+
args: {
31+
visible: true,
32+
x: 100,
33+
y: 100,
34+
items,
35+
},
36+
argTypes: {
37+
visible: { control: { disable: true } },
38+
items: { control: { disable: true } },
39+
onClick: { control: { disable: true } },
40+
},
3841
};

0 commit comments

Comments
 (0)