Skip to content

Commit f72e8da

Browse files
shiftpshshiftpsh
authored
Merge pull request #51 from solved-ac/feature/upgrade-storybook
�Bump Storybook version to 7
2 parents 11df547 + 44d6d7e commit f72e8da

32 files changed

+9345
-12172
lines changed

‎example/.babelrc.json

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"sourceType": "unambiguous",
3+
"presets": [
4+
[
5+
"@babel/preset-env",
6+
{
7+
"targets": {
8+
"chrome": 100
9+
}
10+
}
11+
],
12+
"@babel/preset-typescript",
13+
"@babel/preset-react"
14+
],
15+
"plugins": []
16+
}

‎example/.storybook/main.js

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
const path = require('path')
2-
32
const toPath = (_path) => path.join(process.cwd(), _path)
4-
53
module.exports = {
6-
core: {
7-
builder: 'webpack5',
8-
},
94
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
105
addons: [
116
'@storybook/addon-links',
@@ -25,5 +20,11 @@ module.exports = {
2520
},
2621
},
2722
}),
28-
framework: '@storybook/react',
23+
framework: {
24+
name: '@storybook/react-webpack5',
25+
options: {},
26+
},
27+
docs: {
28+
autodocs: true,
29+
},
2930
}

‎example/.storybook/preview.js

+6-7
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React from 'react'
2-
import { addDecorator } from '@storybook/react'
3-
import { SolvedGlobalStyles, solvedThemes } from '@solved-ac/ui-react'
41
import { ThemeProvider } from '@emotion/react'
2+
import { SolvedGlobalStyles, solvedThemes } from '@solved-ac/ui-react'
3+
import React from 'react'
54

65
export const parameters = {
76
actions: { argTypesRegex: '^on[A-Z].*' },
@@ -13,11 +12,11 @@ export const parameters = {
1312
},
1413
}
1514

16-
addDecorator((Story) => {
17-
return (
15+
export const decorators = [
16+
(Story) => (
1817
<ThemeProvider theme={solvedThemes.light}>
1918
<SolvedGlobalStyles />
2019
<Story />
2120
</ThemeProvider>
22-
)
23-
})
21+
),
22+
]

‎example/package.json

+19-16
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
99
"test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
1010
"eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject",
11-
"storybook": "start-storybook -p 6006 -s public",
12-
"build-storybook": "build-storybook -s public"
11+
"storybook": "storybook dev -p 6006 -s public",
12+
"build-storybook": "storybook build -s public"
1313
},
1414
"dependencies": {
1515
"@emotion/react": "link:../node_modules/@emotion/react",
@@ -21,28 +21,31 @@
2121
"@testing-library/user-event": "link:../node_modules/@testing-library/user-event",
2222
"@types/jest": "link:../node_modules/@types/jest",
2323
"@types/node": "link:../node_modules/@types/node",
24-
"@types/react-dom": "link:../node_modules/@types/react-dom",
25-
"@types/react-icons": "link:../node_modules/@types/react-icons",
2624
"@types/react": "link:../node_modules/@types/react",
25+
"@types/react-dom": "link:../node_modules/@types/react-dom",
2726
"framer-motion": "link:../node_modules/framer-motion",
27+
"react": "link:../node_modules/react",
2828
"react-dom": "link:../node_modules/react-dom",
2929
"react-scripts": "link:../node_modules/react-scripts",
30-
"react-icons": "link:../node_modules/react-icons",
31-
"react": "link:../node_modules/react",
3230
"typescript": "link:../node_modules/typescript"
3331
},
3432
"devDependencies": {
33+
"@babel/core": "^7.0.0",
3534
"@babel/plugin-syntax-object-rest-spread": "^7.8.3",
36-
"@storybook/addon-actions": "^6.4.22",
37-
"@storybook/addon-essentials": "^6.4.22",
38-
"@storybook/addon-interactions": "^6.4.22",
39-
"@storybook/addon-links": "^6.4.22",
40-
"@storybook/builder-webpack5": "^6.4.22",
41-
"@storybook/manager-webpack5": "^6.4.22",
42-
"@storybook/node-logger": "^6.4.22",
43-
"@storybook/preset-create-react-app": "^4.1.0",
44-
"@storybook/react": "^6.4.22",
45-
"@storybook/testing-library": "^0.0.11",
35+
"@babel/preset-env": "^7.22.5",
36+
"@babel/preset-react": "^7.22.5",
37+
"@babel/preset-typescript": "^7.22.5",
38+
"@storybook/addon-actions": "^7.0.21",
39+
"@storybook/addon-essentials": "^7.0.21",
40+
"@storybook/addon-interactions": "^7.0.21",
41+
"@storybook/addon-links": "^7.0.21",
42+
"@storybook/node-logger": "^7.0.21",
43+
"@storybook/preset-create-react-app": "^7.0.21",
44+
"@storybook/react": "^7.0.21",
45+
"@storybook/react-webpack5": "^7.0.21",
46+
"@storybook/testing-library": "^0.1.0",
47+
"babel-plugin-dynamic-import-node": "^2.3.3",
48+
"storybook": "^7.0.21",
4649
"webpack": "5"
4750
},
4851
"eslintConfig": {

‎example/src/stories/Button.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Button } from '@solved-ac/ui-react'
2-
import { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { Meta, StoryFn } from '@storybook/react'
33
import React from 'react'
44

55
export default {
@@ -48,9 +48,9 @@ export default {
4848
description: 'The element to render the button as',
4949
},
5050
},
51-
} as ComponentMeta<typeof Button>
51+
} as Meta<typeof Button>
5252

53-
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
53+
const Template: StoryFn<typeof Button> = (args) => <Button {...args} />
5454

5555
export const Default = Template.bind({})
5656
Default.args = {

‎example/src/stories/Card.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Card } from '@solved-ac/ui-react'
2-
import { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { Meta, StoryFn } from '@storybook/react'
33
import React from 'react'
44

55
export default {
@@ -35,9 +35,9 @@ export default {
3535
description: 'The element to render the card as',
3636
},
3737
},
38-
} as ComponentMeta<typeof Card>
38+
} as Meta<typeof Card>
3939

40-
const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />
40+
const Template: StoryFn<typeof Card> = (args) => <Card {...args} />
4141

4242
export const Default = Template.bind({})
4343
Default.args = {

‎example/src/stories/Chip.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Chip } from '@solved-ac/ui-react'
2-
import { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { Meta, StoryFn } from '@storybook/react'
33
import React from 'react'
44

55
export default {
@@ -19,9 +19,9 @@ export default {
1919
description: 'The element to render the chip as',
2020
},
2121
},
22-
} as ComponentMeta<typeof Chip>
22+
} as Meta<typeof Chip>
2323

24-
const Template: ComponentStory<typeof Chip> = (args) => <Chip {...args} />
24+
const Template: StoryFn<typeof Chip> = (args) => <Chip {...args} />
2525

2626
export const Default = Template.bind({})
2727
Default.args = {

‎example/src/stories/Collapse.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Collapse } from '@solved-ac/ui-react'
2-
import { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { Meta, StoryFn } from '@storybook/react'
33
import React from 'react'
44

55
export default {
@@ -22,9 +22,9 @@ export default {
2222
description: 'The children to display',
2323
},
2424
},
25-
} as ComponentMeta<typeof Collapse>
25+
} as Meta<typeof Collapse>
2626

27-
const Template: ComponentStory<typeof Collapse> = (args) => (
27+
const Template: StoryFn<typeof Collapse> = (args) => (
2828
<Collapse {...args} />
2929
)
3030

‎example/src/stories/Container.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Container } from '@solved-ac/ui-react'
2-
import { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { Meta, StoryFn } from '@storybook/react'
33
import React from 'react'
44

55
export default {
@@ -27,9 +27,9 @@ export default {
2727
description: 'The element to render the container as',
2828
},
2929
},
30-
} as ComponentMeta<typeof Container>
30+
} as Meta<typeof Container>
3131

32-
const Template: ComponentStory<typeof Container> = (args) => (
32+
const Template: StoryFn<typeof Container> = (args) => (
3333
<Container {...args} />
3434
)
3535

‎example/src/stories/Divider.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Divider } from '@solved-ac/ui-react'
2-
import { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { Meta, StoryFn } from '@storybook/react'
33
import React from 'react'
44

55
export default {
@@ -18,9 +18,9 @@ export default {
1818
description: 'The element to render the divider as',
1919
},
2020
},
21-
} as ComponentMeta<typeof Divider>
21+
} as Meta<typeof Divider>
2222

23-
const Template: ComponentStory<typeof Divider> = (args) => <Divider {...args} />
23+
const Template: StoryFn<typeof Divider> = (args) => <Divider {...args} />
2424

2525
export const Default = Template.bind({})
2626
Default.args = {}

‎example/src/stories/EmptyStatePlaceholder.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { EmptyStatePlaceholder } from '@solved-ac/ui-react'
2-
import { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { Meta, StoryFn } from '@storybook/react'
33
import React from 'react'
44

55
export default {
@@ -24,9 +24,9 @@ export default {
2424
description: 'The element to render the placeholder as',
2525
},
2626
},
27-
} as ComponentMeta<typeof EmptyStatePlaceholder>
27+
} as Meta<typeof EmptyStatePlaceholder>
2828

29-
const Template: ComponentStory<typeof EmptyStatePlaceholder> = (args) => (
29+
const Template: StoryFn<typeof EmptyStatePlaceholder> = (args) => (
3030
<EmptyStatePlaceholder {...args} />
3131
)
3232

‎example/src/stories/Footer.stories.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Container, Footer } from '@solved-ac/ui-react'
2-
import { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { Meta, StoryFn } from '@storybook/react'
33
import React from 'react'
44

55
export default {
@@ -19,9 +19,9 @@ export default {
1919
description: 'The element to render the footer as',
2020
},
2121
},
22-
} as ComponentMeta<typeof Footer>
22+
} as Meta<typeof Footer>
2323

24-
const Template: ComponentStory<typeof Footer> = (args) => <Footer {...args} />
24+
const Template: StoryFn<typeof Footer> = (args) => <Footer {...args} />
2525

2626
export const Default = Template.bind({})
2727
Default.args = {

0 commit comments

Comments
 (0)