Skip to content

Commit a7dfa94

Browse files
rodrimaiarodrimaia
committed
chore: update storybook
1 parent 4b99e2d commit a7dfa94

File tree

7 files changed

+1959
-5308
lines changed

7 files changed

+1959
-5308
lines changed

‎site/.storybook/main.js renamed to ‎site/.storybook/main.ts

+27-24
Original file line numberDiff line numberDiff line change
@@ -3,47 +3,50 @@
33
*
44
* @see <https://storybook.js.org/docs/react/configure/overview>
55
*/
6-
const path = require("path")
7-
8-
module.exports = {
6+
import remarkGfm from 'remark-gfm';
7+
import type { StorybookConfig } from '@storybook/react-vite';
8+
const config: StorybookConfig = {
99
// Automatically loads all stories in source ending in 'stories.tsx'
1010
//
1111
// SEE: https://storybook.js.org/docs/react/configure/overview#configure-story-loading
1212
stories: ["../src/**/*.stories.tsx"],
13-
1413
// addons are official and community plugins to extend Storybook.
1514
//
1615
// SEE: https://storybook.js.org/addons
17-
addons: [
18-
"@storybook/addon-links",
16+
addons: ["@storybook/addon-links", {
17+
name: "@storybook/addon-essentials",
18+
options: {
19+
actions: false
20+
}
21+
},
1922
{
20-
name: "@storybook/addon-essentials",
23+
name: '@storybook/addon-docs',
2124
options: {
22-
actions: false,
25+
mdxPluginOptions: {
26+
mdxCompileOptions: {
27+
remarkPlugins: [remarkGfm],
28+
},
29+
},
2330
},
2431
},
2532
],
26-
2733
// SEE: https://storybook.js.org/docs/react/configure/babel
28-
babel: async (options) => ({
34+
babel: async options => ({
2935
...options,
30-
plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
36+
plugins: [["@babel/plugin-proposal-class-properties", {
37+
loose: true
38+
}]]
3139
}),
32-
3340
// Static files loaded by storybook, relative to this file.
3441
//
3542
// SEE: https://storybook.js.org/docs/react/configure/overview#using-storybook-api
3643
staticDirs: ["../static"],
37-
38-
// Storybook internally uses its own Webpack configuration instead of ours.
39-
//
40-
// SEE: https://storybook.js.org/docs/react/configure/webpack
41-
webpackFinal: async (config) => {
42-
config.resolve.modules = [
43-
path.resolve(__dirname, ".."),
44-
"node_modules",
45-
"../src",
46-
]
47-
return config
44+
framework: {
45+
name: "@storybook/react-vite",
46+
options: {}
4847
},
49-
}
48+
docs: {
49+
autodocs: true
50+
}
51+
};
52+
export default config

‎site/.storybook/preview.js renamed to ‎site/.storybook/preview.tsx

+19-15
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import CssBaseline from "@material-ui/core/CssBaseline"
22
import ThemeProvider from "@material-ui/styles/ThemeProvider"
33
import { createMemoryHistory } from "history"
4-
import { addDecorator } from "node_modules/@storybook/react"
54
import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
65
import { dark } from "../src/theme"
76
import "../src/theme/globalFonts"
87
import "../src/i18n"
8+
import React from "react"
9+
import { Preview } from '@storybook/react';
910

10-
addDecorator((story) => (
11+
12+
const themeProviderDecorator = (story) => (
1113
<ThemeProvider theme={dark}>
1214
<CssBaseline />
1315
{story()}
1416
</ThemeProvider>
15-
))
17+
)
1618

1719
const history = createMemoryHistory()
1820

@@ -24,18 +26,20 @@ const routerDecorator = (Story) => {
2426
)
2527
}
2628

27-
addDecorator(routerDecorator)
28-
29-
export const parameters = {
30-
actions: {
31-
argTypesRegex: "^on[A-Z].*",
32-
argTypesRegex: "^handle[A-Z].*",
33-
},
34-
controls: {
35-
expanded: true,
36-
matchers: {
37-
color: /(background|color)$/i,
38-
date: /Date$/,
29+
const preview: Preview = {
30+
decorators: [themeProviderDecorator, routerDecorator],
31+
parameters: {
32+
actions: {
33+
argTypesRegex: "(^on[A-Z].*)?(^handle[A-Z].*)",
34+
},
35+
controls: {
36+
expanded: true,
37+
matchers: {
38+
color: /(background|color)$/i,
39+
date: /Date$/,
40+
},
3941
},
4042
},
4143
}
44+
45+
export default preview

‎site/.tool-versions

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
nodejs 16.19.1

‎site/package.json

+12-8
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
"lint:fix": "FIX=true yarn lint",
1818
"playwright:install": "playwright install --with-deps chromium",
1919
"playwright:test": "playwright test --config=e2e/playwright.config.ts",
20-
"storybook": "start-storybook -p 6006",
21-
"storybook:build": "build-storybook",
20+
"storybook": "storybook dev -p 6006",
21+
"storybook:build": "storybook build",
2222
"test": "jest --selectProjects test",
2323
"test:ci": "jest --selectProjects test --silent",
2424
"test:coverage": "jest --selectProjects test --collectCoverage",
@@ -84,7 +84,7 @@
8484
"tzdata": "1.0.30",
8585
"ua-parser-js": "1.0.33",
8686
"uuid": "9.0.0",
87-
"vite": "3.1.3",
87+
"vite": "4.2.1",
8888
"xstate": "4.33.5",
8989
"xterm": "4.19.0",
9090
"xterm-addon-fit": "0.5.0",
@@ -93,10 +93,12 @@
9393
},
9494
"devDependencies": {
9595
"@playwright/test": "1.29.2",
96-
"@storybook/addon-actions": "6.5.9",
97-
"@storybook/addon-essentials": "6.5.12",
98-
"@storybook/addon-links": "6.5.9",
99-
"@storybook/react": "6.5.12",
96+
"@storybook/addon-actions": "7.0.2",
97+
"@storybook/addon-essentials": "7.0.2",
98+
"@storybook/addon-links": "7.0.2",
99+
"@storybook/addon-mdx-gfm": "7.0.2",
100+
"@storybook/react": "7.0.2",
101+
"@storybook/react-vite": "7.0.2",
100102
"@swc/core": "1.3.38",
101103
"@swc/jest": "0.2.24",
102104
"@testing-library/jest-dom": "5.16.5",
@@ -127,6 +129,7 @@
127129
"eslint-plugin-jsx-a11y": "6.6.1",
128130
"eslint-plugin-react": "7.31.1",
129131
"eslint-plugin-react-hooks": "4.6.0",
132+
"eslint-plugin-storybook": "^0.6.11",
130133
"eslint-plugin-unicorn": "44.0.0",
131134
"jest": "29.5.0",
132135
"jest-canvas-mock": "2.4.0",
@@ -139,7 +142,8 @@
139142
"prettier": "2.8.1",
140143
"resize-observer": "1.0.4",
141144
"semver": "7.3.7",
142-
"storybook-addon-mock": "^3.2.0",
145+
"storybook": "7.0.2",
146+
"storybook-addon-mock": "^4.0.0",
143147
"storybook-react-context": "^0.6.0",
144148
"typescript": "4.8.2"
145149
},

‎site/src/components/AppLink/ShareIcon.stories.tsx

Whitespace-only changes.

‎site/vite.config.ts

+22-12
Original file line numberDiff line numberDiff line change
@@ -43,16 +43,26 @@ export default defineConfig({
4343
},
4444
},
4545
resolve: {
46-
alias: {
47-
api: path.resolve(__dirname, "./src/api"),
48-
components: path.resolve(__dirname, "./src/components"),
49-
hooks: path.resolve(__dirname, "./src/hooks"),
50-
i18n: path.resolve(__dirname, "./src/i18n"),
51-
pages: path.resolve(__dirname, "./src/pages"),
52-
testHelpers: path.resolve(__dirname, "./src/testHelpers"),
53-
theme: path.resolve(__dirname, "./src/theme"),
54-
util: path.resolve(__dirname, "./src/util"),
55-
xServices: path.resolve(__dirname, "./src/xServices"),
56-
},
57-
},
46+
alias: [
47+
{ find: "api", replacement: path.resolve(__dirname, "./src/api") },
48+
{
49+
find: "components",
50+
replacement: path.resolve(__dirname, "./src/components"),
51+
},
52+
{ find: "hooks", replacement: path.resolve(__dirname, "./src/hooks") },
53+
{ find: "i18n", replacement: path.resolve(__dirname, "./src/i18n") },
54+
{ find: "pages", replacement: path.resolve(__dirname, "./src/pages") },
55+
{
56+
find: "testHelpers",
57+
replacement: path.resolve(__dirname, "./src/testHelpers"),
58+
},
59+
{ find: "theme", replacement: path.resolve(__dirname, "./src/theme") },
60+
{ find: /^util$/, replacement: path.resolve("./node_modules/util") },
61+
{ find: "util", replacement: path.resolve(__dirname, "./src/util") },
62+
{
63+
find: "xServices",
64+
replacement: path.resolve(__dirname, "./src/xServices"),
65+
},
66+
],
67+
}
5868
})

0 commit comments

Comments
 (0)