mirror of https://github.com/coder/coder.git
chore(site): upgrade storybook to v8 (#12831)
This commit is contained in:
parent
3addf7ac5d
commit
7c1d10b952
|
@ -2,6 +2,7 @@ import turbosnap from "vite-plugin-turbosnap";
|
|||
|
||||
module.exports = {
|
||||
stories: ["../src/**/*.stories.tsx"],
|
||||
|
||||
addons: [
|
||||
{
|
||||
name: "@storybook/addon-essentials",
|
||||
|
@ -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
|
||||
|
@ -33,4 +38,8 @@ module.exports = {
|
|||
}
|
||||
return config;
|
||||
},
|
||||
|
||||
docs: {
|
||||
autodocs: false,
|
||||
},
|
||||
};
|
||||
|
|
|
@ -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";
|
||||
|
@ -14,6 +14,15 @@ import "theme/globalFonts";
|
|||
DecoratorHelpers.initializeThemeState(Object.keys(themes), "dark");
|
||||
|
||||
export const decorators = [
|
||||
withRouter,
|
||||
withQuery,
|
||||
(Story) => {
|
||||
return (
|
||||
<HelmetProvider>
|
||||
<Story />
|
||||
</HelmetProvider>
|
||||
);
|
||||
},
|
||||
(Story, context) => {
|
||||
const selectedTheme = DecoratorHelpers.pluckThemeFromContext(context);
|
||||
const { themeOverride } = DecoratorHelpers.useThemeParameters();
|
||||
|
@ -30,15 +39,6 @@ export const decorators = [
|
|||
</StyledEngineProvider>
|
||||
);
|
||||
},
|
||||
withRouter,
|
||||
(Story) => {
|
||||
return (
|
||||
<HelmetProvider>
|
||||
<Story />
|
||||
</HelmetProvider>
|
||||
);
|
||||
},
|
||||
withQuery,
|
||||
];
|
||||
|
||||
export const parameters = {
|
||||
|
@ -49,9 +49,6 @@ export const parameters = {
|
|||
locales: "en-US",
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
argTypesRegex: "^(on|handler)[A-Z].*",
|
||||
},
|
||||
controls: {
|
||||
expanded: true,
|
||||
matchers: {
|
||||
|
|
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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",
|
||||
|
|
3216
site/pnpm-lock.yaml
3216
site/pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
|
@ -3,7 +3,7 @@ import {
|
|||
reactRouterParameters,
|
||||
reactRouterOutlet,
|
||||
type RouteDefinition,
|
||||
} from "storybook-addon-react-router-v6";
|
||||
} from "storybook-addon-remix-react-router";
|
||||
import { HEALTH_QUERY_KEY, HEALTH_QUERY_SETTINGS_KEY } from "api/queries/debug";
|
||||
import { chromatic } from "testHelpers/chromatic";
|
||||
import {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { useArgs } from "@storybook/preview-api";
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { userEvent, within } from "@storybook/test";
|
||||
import { chromatic } from "testHelpers/chromatic";
|
||||
import { MockTemplateVersion } from "testHelpers/entities";
|
||||
import { ProvisionerTagsPopover } from "./ProvisionerTagsPopover";
|
||||
|
@ -14,29 +14,19 @@ const meta: Meta<typeof ProvisionerTagsPopover> = {
|
|||
args: {
|
||||
tags: MockTemplateVersion.job.tags,
|
||||
},
|
||||
render: function Render(args) {
|
||||
const [{ tags }, updateArgs] = useArgs();
|
||||
|
||||
return (
|
||||
<ProvisionerTagsPopover
|
||||
{...args}
|
||||
tags={tags}
|
||||
onSubmit={({ key, value }) => {
|
||||
updateArgs({ tags: { ...tags, [key]: value } });
|
||||
}}
|
||||
onDelete={(key) => {
|
||||
const newTags = { ...tags };
|
||||
delete newTags[key];
|
||||
updateArgs({ tags: newTags });
|
||||
}}
|
||||
/>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof ProvisionerTagsPopover>;
|
||||
|
||||
const Example: Story = {};
|
||||
const Example: Story = {
|
||||
play: async ({ canvasElement, step }) => {
|
||||
const canvas = within(canvasElement);
|
||||
|
||||
await step("Open popover", async () => {
|
||||
await userEvent.click(canvas.getByRole("button"));
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export { Example as ProvisionerTagsPopover };
|
||||
|
|
|
@ -42,7 +42,7 @@ const validationSchema = Yup.object({
|
|||
}),
|
||||
});
|
||||
|
||||
interface ProvisionerTagsPopoverProps {
|
||||
export interface ProvisionerTagsPopoverProps {
|
||||
tags: Record<string, string>;
|
||||
onSubmit: (values: typeof initialValues) => void;
|
||||
onDelete: (key: string) => void;
|
||||
|
@ -54,7 +54,6 @@ export const ProvisionerTagsPopover: FC<ProvisionerTagsPopoverProps> = ({
|
|||
onDelete,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const form = useFormik({
|
||||
initialValues,
|
||||
validationSchema,
|
||||
|
|
|
@ -2,7 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
|
|||
import {
|
||||
reactRouterOutlet,
|
||||
reactRouterParameters,
|
||||
} from "storybook-addon-react-router-v6";
|
||||
} from "storybook-addon-remix-react-router";
|
||||
import { getAuthorizationKey } from "api/queries/authCheck";
|
||||
import { workspaceByOwnerAndNameKey } from "api/queries/workspaces";
|
||||
import type { Workspace, WorkspaceAgentLifecycle } from "api/typesGenerated";
|
||||
|
|
Loading…
Reference in New Issue