Skip to content

Commit fae5241

Browse files
jasonbasuiljasonbasuil
committed
upgrade SB 9, fix webpack build errors
1 parent 9c4e649 commit fae5241

File tree

14 files changed

+1430
-3818
lines changed

14 files changed

+1430
-3818
lines changed

‎.storybook/main.js‎

Lines changed: 40 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,33 @@
11
const config = {
2-
addons: [{
3-
name: '@storybook/addon-docs',
4-
options: {
5-
jsxOptions: {
6-
babelrc: true,
7-
configFile: true
2+
addons: [
3+
'@storybook/addon-links',
4+
'@storybook/addon-webpack5-compiler-babel',
5+
{
6+
name: "@storybook/addon-styling-webpack",
7+
options: {
8+
rules: [
9+
{
10+
test: /\.css$/,
11+
sideEffects: true,
12+
use: [
13+
require.resolve("style-loader"),
14+
{
15+
loader: require.resolve("css-loader"),
16+
options: {},
17+
},
18+
],
19+
},
20+
],
821
}
922
}
10-
}, '@storybook/addon-a11y', '@storybook/addon-actions', '@storybook/addon-backgrounds', '@storybook/addon-controls', '@storybook/addon-links', '@storybook/addon-storysource', '@storybook/addon-webpack5-compiler-babel', ({
11-
name: "@storybook/addon-styling-webpack",
12-
13-
options: {
14-
rules: [{
15-
test: /\.css$/,
16-
sideEffects: true,
17-
use: [
18-
require.resolve("style-loader"),
19-
{
20-
loader: require.resolve("css-loader"),
21-
options: {
22-
23-
24-
},
25-
},
26-
],
27-
},],
28-
}
29-
})],
23+
],
3024
docs: {
3125
autodocs: true,
3226
defaultName: 'Docs',
3327
},
3428
stories: [
35-
'../stories/Intro.stories.jsx',
36-
'../src/**/*.stories.@(js|mdx)',
37-
'../src/**/*.stories.@(ts|mdx)',
38-
'../src/**/*.stories.js[x]',
39-
'../src/**/*.stories.ts[x]',
40-
'../stories/**/*.stories.js[x]',
41-
'../stories/**/*.stories.ts[x]'
29+
'../src/**/*.stories.@(js|jsx|ts|tsx)',
30+
'../stories/**/*.stories.@(js|jsx)',
4231
],
4332
framework: {
4433
name: '@storybook/react-webpack5',
@@ -47,6 +36,24 @@ const config = {
4736
typescript: {
4837
check: true,
4938
},
39+
webpackFinal: async (config) => {
40+
// Add MDX loader
41+
config.module.rules.push({
42+
test: /\.mdx?$/,
43+
use: [
44+
{
45+
loader: require.resolve('@storybook/mdx2-csf/loader'),
46+
options: {
47+
mdxCompileOptions: {
48+
remarkPlugins: [],
49+
rehypePlugins: [],
50+
},
51+
},
52+
},
53+
],
54+
});
55+
return config;
56+
},
5057
};
5158

5259
export default config;

‎.storybook/manager.js‎

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

‎.storybook/user-interviews-theme.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { create } from '@storybook/theming';
1+
import { create } from '@storybook/theming/create';
22
import UILogo from '../public/ui-design-system-light.svg';
33

44
export default create({

‎.storybook/webpack.config.js‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,15 @@ module.exports = function({ config }) {
1313
}
1414
}
1515
},
16-
'sass-loader'
16+
{
17+
loader: 'sass-loader',
18+
options: {
19+
sassOptions: {
20+
quietDeps: true,
21+
silenceDeprecations: ['import'],
22+
},
23+
},
24+
}
1725
],
1826
include: path.resolve(__dirname, '../')
1927
},

‎package.json‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
"name": "@user-interviews/ui-design-system",
33
"version": "6.1.0",
44
"dependencies": {
5+
"@storybook/blocks": "^8.6.14",
56
"@tiptap/core": "^3.0.9",
67
"@tiptap/extension-bold": "^3.0.9",
78
"@tiptap/extension-bullet-list": "^3.0.9",
@@ -11,11 +12,13 @@
1112
"@tiptap/extension-history": "^3.0.9",
1213
"@tiptap/extension-italic": "^3.0.9",
1314
"@tiptap/extension-link": "^3.0.9",
15+
"@tiptap/extension-list": "^3.0.9",
1416
"@tiptap/extension-list-item": "^3.0.9",
1517
"@tiptap/extension-ordered-list": "^3.0.9",
1618
"@tiptap/extension-paragraph": "^3.0.9",
1719
"@tiptap/extension-placeholder": "^3.0.9",
1820
"@tiptap/extension-text": "^3.0.9",
21+
"@tiptap/extensions": "^3.0.9",
1922
"@tiptap/pm": "^3.0.9",
2023
"@tiptap/react": "^3.0.9",
2124
"@tiptap/suggestion": "^3.0.9",
@@ -100,19 +103,19 @@
100103
"@fortawesome/pro-regular-svg-icons": "^6.5.2",
101104
"@fortawesome/pro-solid-svg-icons": "^6.5.2",
102105
"@fortawesome/react-fontawesome": "^0.2.0",
106+
"@mdx-js/react": "^3.0.0",
103107
"@popperjs/core": "^2.11.8",
104-
"@storybook/addon-a11y": "^8.6.14",
105-
"@storybook/addon-actions": "^8.6.14",
106-
"@storybook/addon-backgrounds": "^8.6.14",
107-
"@storybook/addon-controls": "^8.6.14",
108-
"@storybook/addon-docs": "^8.6.14",
109-
"@storybook/addon-jest": "^8.6.14",
110-
"@storybook/addon-links": "^8.6.14",
111-
"@storybook/addon-storysource": "^8.6.14",
112-
"@storybook/addon-styling-webpack": "^1.0.1",
108+
"@storybook/addon-a11y": "^9.1.1",
109+
"@storybook/addon-backgrounds": "^9.0.8",
110+
"@storybook/addon-controls": "^9.0.8",
111+
"@storybook/addon-docs": "^9.1.1",
112+
"@storybook/addon-jest": "^9.1.1",
113+
"@storybook/addon-links": "^9.1.1",
114+
"@storybook/addon-styling-webpack": "^2.0.0",
113115
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
114-
"@storybook/react": "^8.6.14",
115-
"@storybook/react-webpack5": "^8.6.14",
116+
"@storybook/mdx2-csf": "^1.0.0",
117+
"@storybook/react": "^9.1.1",
118+
"@storybook/react-webpack5": "^9.1.1",
116119
"@testing-library/dom": "^10.4.0",
117120
"@testing-library/jest-dom": "^6.6.3",
118121
"@testing-library/react": "^16.2.0",
@@ -157,8 +160,7 @@
157160
"react-tracking": "^9.3.2",
158161
"sass": "^1.89.2",
159162
"sass-loader": "^16.0.5",
160-
"storybook": "^8.6.14",
161-
"storybook-addon-designs": "6.3.1",
163+
"storybook": "^9.1.1",
162164
"style-loader": "^4.0.0",
163165
"typescript": "^5.8.3",
164166
"webpack": "^5.100.2",

‎src/Alert/Alert.stories.tsx‎

Lines changed: 11 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { Fragment } from 'react';
2-
import { action } from '@storybook/addon-actions';
32

43
import { Alert, MessageTypes } from 'src/Alert';
54

@@ -75,72 +74,29 @@ export function Warning() {
7574
);
7675
}
7776

78-
const onDismiss = (id) => {
79-
action('alert dismissed')(id);
80-
};
81-
8277
export function WithDismiss() {
8378
return (
8479
<Alert
8580
id="6"
8681
message="Default message"
8782
removeBorderLeft={false}
8883
title="Default title"
89-
type={MessageTypes.SUCCESS}
90-
onDismiss={onDismiss}
84+
type={MessageTypes.SUCCESS}
85+
onDismiss={() => {}}
9186
/>
9287
);
9388
}
9489

9590
export function WithCallToAction() {
9691
return (
97-
<>
98-
<p>Default CTA rendered by component</p>
99-
<Alert
100-
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
101-
id="8"
102-
message="Success message"
103-
removeBorderLeft={false}
104-
title="Success title"
105-
type={MessageTypes.SUCCESS}
106-
onDismiss={onDismiss}
107-
/>
108-
<Alert
109-
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
110-
id="9"
111-
message="Info message"
112-
removeBorderLeft={false}
113-
title="Info title"
114-
type={MessageTypes.INFO}
115-
onDismiss={onDismiss}
116-
/>
117-
<Alert
118-
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
119-
id="11"
120-
message="Error message"
121-
removeBorderLeft={false}
122-
title="Error title"
123-
type={MessageTypes.ERROR}
124-
onDismiss={onDismiss}
125-
/>
126-
<Alert
127-
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
128-
id="12"
129-
message="Warning message"
130-
removeBorderLeft={false}
131-
title="Warning title"
132-
type={MessageTypes.WARNING}
133-
onDismiss={onDismiss}
134-
/>
135-
<Alert
136-
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
137-
id="13"
138-
message="Some context around new feature if needed"
139-
removeBorderLeft={false}
140-
title="New feature alert!"
141-
type={MessageTypes.FEATURE}
142-
onDismiss={onDismiss}
143-
/>
144-
</>
92+
<Alert
93+
id="7"
94+
message="Alert with call to action"
95+
removeBorderLeft={false}
96+
title="CTA title"
97+
type={MessageTypes.INFO}
98+
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
99+
onDismiss={() => {}}
100+
/>
145101
);
146102
}

‎src/Dropdown/Dropdown.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { ArgTypes, Canvas } from '@storybook/blocks';
2-
import { Figma } from "storybook-addon-designs/blocks"
32
import Dropdown from './Dropdown';
43
import * as ComponentStories from './Dropdown.stories';
54

‎src/Form/Form.stories.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useState } from 'react';
2-
import { action } from '@storybook/addon-actions';
32

43
import Button from '../Button';
54
import Form from '.';
@@ -23,7 +22,6 @@ export default {
2322

2423
const onSubmit = (event) => {
2524
event.preventDefault();
26-
action('form submitted')(event);
2725
};
2826

2927
function InputComponent(props) {

‎src/FormControlLabel/FormControlLabel.stories.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React, { useState } from 'react';
2-
import { action } from '@storybook/addon-actions';
32

43
import FormControlLabel from '.';
54
import CheckboxButton from '../CheckboxButton';
@@ -14,7 +13,6 @@ function FormControlLabelControlComponent(props) {
1413
const [value, setValue] = useState(false);
1514
const onChange = (e) => {
1615
setValue(e.target.checked);
17-
action('Control onChange')(e);
1816
};
1917

2018
return (

‎src/Modal/Modal.stories.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { action } from '@storybook/addon-actions';
32
import Button from '../Button';
43
import Input from '../Input';
54
import {
@@ -17,7 +16,7 @@ export default {
1716
},
1817
};
1918

20-
const handleRequestClose = () => action('Close');
19+
const handleRequestClose = () => {};
2120

2221
export function Default() {
2322
return (

0 commit comments

Comments
 (0)