Skip to content

chore(site): upgrade storybook to v8 #12831

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Apr 1, 2024
Merged

chore(site): upgrade storybook to v8 #12831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b067c89
chore(site): upgrade storybook to v8
BrunoQuaresma Mar 20, 2024
801e900
Fix deps and format
BrunoQuaresma Mar 20, 2024
5ee50bf
Upgrade router addon
BrunoQuaresma Mar 21, 2024
1f9c3e1
Fix fmt
BrunoQuaresma Mar 21, 2024
2f5d356
Upgrade to 8.0.5
BrunoQuaresma Apr 1, 2024
3880eea
Merge branch 'main' of https://github.com/coder/coder into bq/upgrade…
BrunoQuaresma Apr 1, 2024
4463294
Upgrade all deps
BrunoQuaresma Apr 1, 2024
cf0cb64
Upgrade chromatic and move decorators around
BrunoQuaresma Apr 1, 2024
085de56
Merge branch 'main' of https://github.com/coder/coder into bq/upgrade…
BrunoQuaresma Apr 1, 2024
d19519d
Fix storybook
BrunoQuaresma Apr 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions site/.storybook/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import turbosnap from "vite-plugin-turbosnap";

module.exports = {
stories: ["../src/**/*.stories.tsx"],

addons: [
{
name: "@storybook/addon-essentials",
Expand All @@ -14,12 +15,16 @@ module.exports = {
"@storybook/addon-themes",
"@storybook/addon-actions",
"@storybook/addon-interactions",
"storybook-addon-remix-react-router",
],

staticDirs: ["../static"],

framework: {
name: "@storybook/react-vite",
options: {},
},

async viteFinal(config, { configType }) {
config.plugins = config.plugins || [];
// return the customized config
Expand All @@ -33,4 +38,8 @@ module.exports = {
}
return config;
},

docs: {
autodocs: false,
},
Comment on lines +42 to +44
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I get why we're starting this off as false, but this looks like it could be a cool feature to flip on at some point

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe?! I see this as helpful for component libraries but not for internal component usage.

};
23 changes: 10 additions & 13 deletions site/.storybook/preview.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import {
} from "@mui/material/styles";
import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";
import { DecoratorHelpers } from "@storybook/addon-themes";
import { withRouter } from "storybook-addon-react-router-v6";
import { withRouter } from "storybook-addon-remix-react-router";
import { QueryClient, QueryClientProvider } from "react-query";
import { HelmetProvider } from "react-helmet-async";
import themes from "theme";
Expand All @@ -14,6 +14,15 @@ import "theme/globalFonts";
DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");

export const decorators = [
withRouter,
withQuery,
(Story) => {
return (
<HelmetProvider>
<Story />
</HelmetProvider>
);
},
Comment on lines +17 to +25
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does changing the decorators affect anything here? I would assume this wouldn't break anything, but I'm not sure if there's anything else I'm missing

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Idk why, to be honest, but I had to make the theme provider the last decorator to make it work.

(Story, context) => {
const selectedTheme = DecoratorHelpers.pluckThemeFromContext(context);
const { themeOverride } = DecoratorHelpers.useThemeParameters();
Expand All @@ -30,15 +39,6 @@ export const decorators = [
</StyledEngineProvider>
);
},
withRouter,
(Story) => {
return (
<HelmetProvider>
<Story />
</HelmetProvider>
);
},
withQuery,
];

export const parameters = {
Expand All @@ -49,9 +49,6 @@ export const parameters = {
locales: "en-US",
},
},
actions: {
argTypesRegex: "^(on|handler)[A-Z].*",
},
Comment on lines -52 to -54
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was reading up on this, and I think I get how it works
Did this basically make it so that for any stories that had props that started with on or handle automatically received a Storybook action function as the input?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess so but it is not necessary anymore.

controls: {
expanded: true,
matchers: {
Expand Down
28 changes: 14 additions & 14 deletions site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,16 +96,16 @@
"devDependencies": {
"@octokit/types": "12.3.0",
"@playwright/test": "1.42.1",
"@storybook/addon-actions": "7.6.11",
"@storybook/addon-essentials": "7.6.11",
"@storybook/addon-interactions": "7.6.11",
"@storybook/addon-links": "7.6.11",
"@storybook/addon-mdx-gfm": "7.6.11",
"@storybook/addon-themes": "7.6.11",
"@storybook/preview-api": "7.6.11",
"@storybook/react": "7.6.11",
"@storybook/react-vite": "7.6.11",
"@storybook/test": "7.6.11",
"@storybook/addon-actions": "8.0.5",
"@storybook/addon-essentials": "8.0.5",
"@storybook/addon-interactions": "8.0.5",
"@storybook/addon-links": "8.0.5",
"@storybook/addon-mdx-gfm": "8.0.5",
"@storybook/addon-themes": "8.0.5",
"@storybook/preview-api": "8.0.5",
"@storybook/react": "8.0.5",
"@storybook/react-vite": "8.0.5",
"@storybook/test": "8.0.5",
"@swc/core": "1.3.38",
"@swc/jest": "0.2.24",
"@testing-library/jest-dom": "6.1.2",
Expand Down Expand Up @@ -133,7 +133,7 @@
"@typescript-eslint/eslint-plugin": "6.9.1",
"@typescript-eslint/parser": "6.9.1",
"@vitejs/plugin-react": "4.1.0",
"chromatic": "10.6.1",
"chromatic": "11.3.0",
"eslint": "8.52.0",
"eslint-config-prettier": "9.0.0",
"eslint-import-resolver-typescript": "3.6.0",
Expand All @@ -144,7 +144,7 @@
"eslint-plugin-jsx-a11y": "6.7.1",
"eslint-plugin-react": "7.33.0",
"eslint-plugin-react-hooks": "4.6.0",
"eslint-plugin-storybook": "0.6.12",
"eslint-plugin-storybook": "0.8.0",
"eslint-plugin-testing-library": "6.1.0",
"eslint-plugin-unicorn": "49.0.0",
"eventsourcemock": "2.0.0",
Expand All @@ -161,8 +161,8 @@
"protobufjs": "7.2.4",
"rxjs": "7.8.1",
"ssh2": "1.14.0",
"storybook": "7.6.11",
"storybook-addon-react-router-v6": "2.0.0",
"storybook": "8.0.5",
"storybook-addon-remix-react-router": "3.0.0",
"storybook-react-context": "0.6.0",
"ts-node": "10.9.1",
"ts-proto": "1.164.0",
Expand Down
Loading