Skip to content

Commit 17bb1a1

Browse files
BrunoQuaresmaBrunoQuaresma
authored
chore(site): Upgrade storybook to 7.0.4 (#7127)
1 parent 085330a commit 17bb1a1

File tree

217 files changed

+2358
-5809
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

217 files changed

+2358
-5809
lines changed

‎.github/workflows/ci.yaml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -634,6 +634,9 @@ jobs:
634634
- name: Publish to Chromatic (non-mainline)
635635
if: github.ref != 'refs/heads/main' && github.repository_owner == 'coder'
636636
uses: chromaui/action@v1
637+
env:
638+
NODE_OPTIONS: "--max_old_space_size=4096"
639+
STORYBOOK: true
637640
with:
638641
buildScriptName: "storybook:build"
639642
exitOnceUploaded: true
@@ -651,6 +654,9 @@ jobs:
651654
- name: Publish to Chromatic (mainline)
652655
if: github.ref == 'refs/heads/main' && github.repository_owner == 'coder'
653656
uses: chromaui/action@v1
657+
env:
658+
NODE_OPTIONS: "--max_old_space_size=4096"
659+
STORYBOOK: true
654660
with:
655661
autoAcceptChanges: true
656662
buildScriptName: "storybook:build"

‎site/.storybook/main.js

Lines changed: 6 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,14 @@
1-
/**
2-
* @fileoverview This file is configures Storybook
3-
*
4-
* @see <https://storybook.js.org/docs/react/configure/overview>
5-
*/
6-
const path = require("path")
7-
81
module.exports = {
9-
// Automatically loads all stories in source ending in 'stories.tsx'
10-
//
11-
// SEE: https://storybook.js.org/docs/react/configure/overview#configure-story-loading
122
stories: ["../src/**/*.stories.tsx"],
13-
14-
// addons are official and community plugins to extend Storybook.
15-
//
16-
// SEE: https://storybook.js.org/addons
173
addons: [
184
"@storybook/addon-links",
19-
{
20-
name: "@storybook/addon-essentials",
21-
options: {
22-
actions: false,
23-
},
24-
},
5+
"@storybook/addon-essentials",
6+
"@storybook/addon-mdx-gfm",
7+
"@storybook/addon-actions",
258
],
26-
27-
// SEE: https://storybook.js.org/docs/react/configure/babel
28-
babel: async (options) => ({
29-
...options,
30-
plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
31-
}),
32-
33-
// Static files loaded by storybook, relative to this file.
34-
//
35-
// SEE: https://storybook.js.org/docs/react/configure/overview#using-storybook-api
369
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
10+
framework: {
11+
name: "@storybook/react-vite",
12+
options: {},
4813
},
4914
}

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

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,32 @@
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"
98

10-
addDecorator((story) => (
11-
<ThemeProvider theme={dark}>
12-
<CssBaseline />
13-
{story()}
14-
</ThemeProvider>
15-
))
16-
179
const history = createMemoryHistory()
1810

19-
const routerDecorator = (Story) => {
20-
return (
21-
<HistoryRouter history={history}>
11+
export const decorators = [
12+
(Story) => (
13+
<ThemeProvider theme={dark}>
14+
<CssBaseline />
2215
<Story />
23-
</HistoryRouter>
24-
)
25-
}
26-
27-
addDecorator(routerDecorator)
16+
</ThemeProvider>
17+
),
18+
(Story) => {
19+
return (
20+
<HistoryRouter history={history}>
21+
<Story />
22+
</HistoryRouter>
23+
)
24+
},
25+
]
2826

2927
export const parameters = {
3028
actions: {
31-
argTypesRegex: "^on[A-Z].*",
32-
argTypesRegex: "^handle[A-Z].*",
29+
argTypesRegex: "^(on|handler)[A-Z].*",
3330
},
3431
controls: {
3532
expanded: true,

‎site/package.json

Lines changed: 13 additions & 11 deletions
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=true 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",
@@ -54,7 +54,7 @@
5454
"date-fns": "2.29.3",
5555
"dayjs": "1.11.4",
5656
"emoji-mart": "5.4.0",
57-
"eslint-plugin-testing-library": "^5.10.2",
57+
"eslint-plugin-testing-library": "5.10.2",
5858
"eventsourcemock": "2.0.0",
5959
"formik": "2.2.9",
6060
"front-matter": "4.0.2",
@@ -75,16 +75,16 @@
7575
"react-markdown": "8.0.3",
7676
"react-router-dom": "6.4.1",
7777
"react-syntax-highlighter": "15.5.0",
78-
"react-virtualized-auto-sizer": "^1.0.7",
79-
"react-window": "^1.8.8",
78+
"react-virtualized-auto-sizer": "1.0.7",
79+
"react-window": "1.8.8",
8080
"remark-gfm": "3.0.1",
8181
"rollup-plugin-visualizer": "5.9.0",
8282
"sourcemapped-stacktrace": "1.1.11",
8383
"ts-prune": "0.10.3",
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,11 @@
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.4",
97+
"@storybook/addon-essentials": "7.0.4",
98+
"@storybook/addon-links": "7.0.4",
99+
"@storybook/addon-mdx-gfm": "7.0.4",
100+
"@storybook/react-vite": "7.0.4",
100101
"@swc/core": "1.3.38",
101102
"@swc/jest": "0.2.24",
102103
"@testing-library/jest-dom": "5.16.5",
@@ -127,6 +128,7 @@
127128
"eslint-plugin-jsx-a11y": "6.6.1",
128129
"eslint-plugin-react": "7.31.1",
129130
"eslint-plugin-react-hooks": "4.6.0",
131+
"eslint-plugin-storybook": "^0.6.11",
130132
"eslint-plugin-unicorn": "44.0.0",
131133
"jest": "29.5.0",
132134
"jest-canvas-mock": "2.4.0",
@@ -139,7 +141,7 @@
139141
"prettier": "2.8.1",
140142
"resize-observer": "1.0.4",
141143
"semver": "7.3.7",
142-
"storybook-addon-mock": "^3.2.0",
144+
"storybook": "7.0.4",
143145
"storybook-react-context": "^0.6.0",
144146
"typescript": "4.8.2"
145147
},

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import { makeStyles } from "@material-ui/core/styles"
55
import Tooltip from "@material-ui/core/Tooltip"
66
import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
77
import { FC } from "react"
8-
import { combineClasses } from "util/combineClasses"
8+
import { combineClasses } from "utils/combineClasses"
99
import * as TypesGen from "../../api/typesGenerated"
10-
import { generateRandomString } from "../../util/random"
10+
import { generateRandomString } from "../../utils/random"
1111
import { BaseIcon } from "./BaseIcon"
1212
import { ShareIcon } from "./ShareIcon"
1313

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

Whitespace-only changes.

‎site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
22
import { AuditLog } from "api/typesGenerated"
33
import { colors } from "theme/colors"
44
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
5-
import { combineClasses } from "util/combineClasses"
5+
import { combineClasses } from "utils/combineClasses"
66
import { FC } from "react"
77

88
const getDiffValue = (value: unknown): string => {

‎site/src/components/Avatar/Avatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import MuiAvatar, {
55
} from "@material-ui/core/Avatar"
66
import { makeStyles } from "@material-ui/core/styles"
77
import { FC } from "react"
8-
import { combineClasses } from "util/combineClasses"
8+
import { combineClasses } from "utils/combineClasses"
99
import { firstLetter } from "./firstLetter"
1010

1111
export type AvatarProps = MuiAvatarProps & {

‎site/src/components/BorderedMenuRow/BorderedMenuRow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import SvgIcon from "@material-ui/core/SvgIcon"
44
import CheckIcon from "@material-ui/icons/Check"
55
import { FC } from "react"
66
import { NavLink } from "react-router-dom"
7-
import { ellipsizeText } from "../../util/ellipsizeText"
7+
import { ellipsizeText } from "../../utils/ellipsizeText"
88
import { Typography } from "../Typography/Typography"
99

1010
type BorderedMenuRowVariant = "narrow" | "wide"

‎site/src/components/BuildsTable/BuildAvatar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import PlayArrowOutlined from "@material-ui/icons/PlayArrowOutlined"
55
import PauseOutlined from "@material-ui/icons/PauseOutlined"
66
import DeleteOutlined from "@material-ui/icons/DeleteOutlined"
77
import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated"
8-
import { getDisplayWorkspaceBuildStatus } from "util/workspace"
8+
import { getDisplayWorkspaceBuildStatus } from "utils/workspace"
99
import { PaletteIndex } from "theme/palettes"
1010
import { Avatar, AvatarProps } from "components/Avatar/Avatar"
1111

‎site/src/components/BuildsTable/BuildRow.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { MONOSPACE_FONT_FAMILY } from "theme/constants"
1010
import {
1111
displayWorkspaceBuildDuration,
1212
getDisplayWorkspaceBuildInitiatedBy,
13-
} from "util/workspace"
13+
} from "utils/workspace"
1414
import { BuildAvatar } from "./BuildAvatar"
1515

1616
export interface BuildRowProps {

‎site/src/components/CodeBlock/CodeBlock.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { makeStyles } from "@material-ui/core/styles"
22
import { FC, Fragment, ReactElement } from "react"
33
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
4-
import { combineClasses } from "../../util/combineClasses"
4+
import { combineClasses } from "../../utils/combineClasses"
55

66
export interface CodeBlockProps {
77
lines: string[]

‎site/src/components/CodeExample/CodeExample.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { makeStyles, Theme } from "@material-ui/core/styles"
22
import { FC } from "react"
33
import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
4-
import { combineClasses } from "../../util/combineClasses"
4+
import { combineClasses } from "../../utils/combineClasses"
55
import { CopyButton } from "../CopyButton/CopyButton"
66

77
export interface CodeExampleProps {

‎site/src/components/CopyButton/CopyButton.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
33
import Tooltip from "@material-ui/core/Tooltip"
44
import Check from "@material-ui/icons/Check"
55
import { useClipboard } from "hooks/useClipboard"
6-
import { combineClasses } from "../../util/combineClasses"
6+
import { combineClasses } from "../../utils/combineClasses"
77
import { FileCopyIcon } from "../Icons/FileCopyIcon"
88

99
interface CopyButtonProps {

‎site/src/components/CopyableValue/CopyableValue.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Tooltip from "@material-ui/core/Tooltip"
33
import { useClickable } from "hooks/useClickable"
44
import { useClipboard } from "hooks/useClipboard"
55
import { FC, HTMLProps } from "react"
6-
import { combineClasses } from "util/combineClasses"
6+
import { combineClasses } from "utils/combineClasses"
77

88
interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
99
value: string

‎site/src/components/CreateUserForm/CreateUserForm.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
getFormHelpers,
99
nameValidator,
1010
onChangeTrimmed,
11-
} from "../../util/formUtils"
11+
} from "../../utils/formUtils"
1212
import { FormFooter } from "../FormFooter/FormFooter"
1313
import { FullPageForm } from "../FullPageForm/FullPageForm"
1414
import { Stack } from "../Stack/Stack"

‎site/src/components/DeploySettingsLayout/Badges.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
22
import { Stack } from "components/Stack/Stack"
33
import { PropsWithChildren, FC } from "react"
44
import { MONOSPACE_FONT_FAMILY } from "theme/constants"
5-
import { combineClasses } from "util/combineClasses"
5+
import { combineClasses } from "utils/combineClasses"
66

77
export const EnabledBadge: FC = () => {
88
const styles = useStyles()

‎site/src/components/DeploySettingsLayout/Sidebar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { GitIcon } from "components/Icons/GitIcon"
88
import { Stack } from "components/Stack/Stack"
99
import { ElementType, PropsWithChildren, ReactNode, FC } from "react"
1010
import { NavLink } from "react-router-dom"
11-
import { combineClasses } from "util/combineClasses"
11+
import { combineClasses } from "utils/combineClasses"
1212

1313
const SidebarNavItem: FC<
1414
PropsWithChildren<{ href: string; icon: ReactNode }>

‎site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,16 @@ export default {
66
title: "Components/Dialogs/ConfirmDialog",
77
component: ConfirmDialog,
88
argTypes: {
9-
onClose: {
10-
action: "onClose",
11-
defaultValue: action("onClose"),
12-
},
13-
onConfirm: {
14-
action: "onConfirm",
15-
defaultValue: action("onConfirm"),
16-
},
179
open: {
1810
control: "boolean",
19-
defaultValue: true,
20-
},
21-
title: {
22-
defaultValue: "Confirm Dialog",
2311
},
2412
},
13+
args: {
14+
onClose: action("onClose"),
15+
onConfirm: action("onConfirm"),
16+
open: true,
17+
title: "Confirm Dialog",
18+
},
2519
} as ComponentMeta<typeof ConfirmDialog>
2620

2721
const Template: Story<ConfirmDialogProps> = (args) => (

‎site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx

Lines changed: 8 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,29 +6,18 @@ export default {
66
title: "Components/Dialogs/DeleteDialog",
77
component: DeleteDialog,
88
argTypes: {
9-
onCancel: {
10-
action: "onClose",
11-
defaultValue: action("onClose"),
12-
},
13-
onConfirm: {
14-
action: "onConfirm",
15-
defaultValue: action("onConfirm"),
16-
},
179
open: {
1810
control: "boolean",
19-
defaultValue: true,
20-
},
21-
entity: {
22-
defaultValue: "foo",
23-
},
24-
name: {
25-
defaultValue: "MyFoo",
26-
},
27-
info: {
28-
defaultValue:
29-
"Here's some info about the foo so you know you're deleting the right one.",
3011
},
3112
},
13+
args: {
14+
onCancel: action("onClose"),
15+
onConfirm: action("onConfirm"),
16+
open: true,
17+
entity: "foo",
18+
name: "MyFoo",
19+
info: "Here's some info about the foo so you know you're deleting the right one.",
20+
},
3221
} as ComponentMeta<typeof DeleteDialog>
3322

3423
const Template: Story<DeleteDialogProps> = (args) => <DeleteDialog {...args} />

‎site/src/components/Dialogs/Dialog.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import MuiDialog, {
44
import { alpha, darken, makeStyles } from "@material-ui/core/styles"
55
import * as React from "react"
66
import { colors } from "theme/colors"
7-
import { combineClasses } from "../../util/combineClasses"
7+
import { combineClasses } from "../../utils/combineClasses"
88
import {
99
LoadingButton,
1010
LoadingButtonProps,

0 commit comments

Comments
 (0)