coder · BrunoQuaresma · Apr 13, 2023 · Apr 12, 2023 · Apr 13, 2023 · Apr 13, 2023
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
@@ -634,6 +634,9 @@ jobs:
       - name: Publish to Chromatic (non-mainline)
         if: github.ref != 'refs/heads/main' && github.repository_owner == 'coder'
         uses: chromaui/action@v1
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+          STORYBOOK: true
         with:
           buildScriptName: "storybook:build"
           exitOnceUploaded: true
@@ -651,6 +654,9 @@ jobs:
       - name: Publish to Chromatic (mainline)
         if: github.ref == 'refs/heads/main' && github.repository_owner == 'coder'
         uses: chromaui/action@v1
+        env:
+          NODE_OPTIONS: "--max_old_space_size=4096"
+          STORYBOOK: true
         with:
           autoAcceptChanges: true
           buildScriptName: "storybook:build"

diff --git a/site/.storybook/main.js b/site/.storybook/main.js
@@ -1,49 +1,14 @@
-/**
- * @fileoverview This file is configures Storybook
- *
- * @see <https://storybook.js.org/docs/react/configure/overview>
- */
-const path = require("path")
-
 module.exports = {
-  // Automatically loads all stories in source ending in 'stories.tsx'
-  //
-  // SEE: https://storybook.js.org/docs/react/configure/overview#configure-story-loading
   stories: ["../src/**/*.stories.tsx"],
-
-  // addons are official and community plugins to extend Storybook.
-  //
-  // SEE: https://storybook.js.org/addons
   addons: [
     "@storybook/addon-links",
-    {
-      name: "@storybook/addon-essentials",
-      options: {
-        actions: false,
-      },
-    },
+    "@storybook/addon-essentials",
+    "@storybook/addon-mdx-gfm",
+    "@storybook/addon-actions",
   ],
-
-  // SEE: https://storybook.js.org/docs/react/configure/babel
-  babel: async (options) => ({
-    ...options,
-    plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
-  }),
-
-  // Static files loaded by storybook, relative to this file.
-  //
-  // SEE: https://storybook.js.org/docs/react/configure/overview#using-storybook-api
   staticDirs: ["../static"],
-
-  // Storybook internally uses its own Webpack configuration instead of ours.
-  //
-  // SEE: https://storybook.js.org/docs/react/configure/webpack
-  webpackFinal: async (config) => {
-    config.resolve.modules = [
-      path.resolve(__dirname, ".."),
-      "node_modules",
-      "../src",
-    ]
-    return config
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
   },
 }
diff --git a/site/.storybook/preview.js → site/.storybook/preview.jsx b/site/.storybook/preview.js → site/.storybook/preview.jsx
@@ -1,35 +1,32 @@
 import CssBaseline from "@material-ui/core/CssBaseline"
 import ThemeProvider from "@material-ui/styles/ThemeProvider"
 import { createMemoryHistory } from "history"
-import { addDecorator } from "node_modules/@storybook/react"
 import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom"
 import { dark } from "../src/theme"
 import "../src/theme/globalFonts"
 import "../src/i18n"
 
-addDecorator((story) => (
-  <ThemeProvider theme={dark}>
-    <CssBaseline />
-    {story()}
-  </ThemeProvider>
-))
-
 const history = createMemoryHistory()
 
-const routerDecorator = (Story) => {
-  return (
-    <HistoryRouter history={history}>
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={dark}>
+      <CssBaseline />
       <Story />
-    </HistoryRouter>
-  )
-}
-
-addDecorator(routerDecorator)
+    </ThemeProvider>
+  ),
+  (Story) => {
+    return (
+      <HistoryRouter history={history}>
+        <Story />
+      </HistoryRouter>
+    )
+  },
+]
 
 export const parameters = {
   actions: {
-    argTypesRegex: "^on[A-Z].*",
-    argTypesRegex: "^handle[A-Z].*",
+    argTypesRegex: "^(on|handler)[A-Z].*",
   },
   controls: {
     expanded: true,

diff --git a/site/package.json b/site/package.json
@@ -17,8 +17,8 @@
     "lint:fix": "FIX=true yarn lint",
     "playwright:install": "playwright install --with-deps chromium",
     "playwright:test": "playwright test --config=e2e/playwright.config.ts",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
+    "storybook": "STORYBOOK=true storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "test": "jest --selectProjects test",
     "test:ci": "jest --selectProjects test --silent",
     "test:coverage": "jest --selectProjects test --collectCoverage",
@@ -54,7 +54,7 @@
     "date-fns": "2.29.3",
     "dayjs": "1.11.4",
     "emoji-mart": "5.4.0",
-    "eslint-plugin-testing-library": "^5.10.2",
+    "eslint-plugin-testing-library": "5.10.2",
     "eventsourcemock": "2.0.0",
     "formik": "2.2.9",
     "front-matter": "4.0.2",
@@ -75,16 +75,16 @@
     "react-markdown": "8.0.3",
     "react-router-dom": "6.4.1",
     "react-syntax-highlighter": "15.5.0",
-    "react-virtualized-auto-sizer": "^1.0.7",
-    "react-window": "^1.8.8",
+    "react-virtualized-auto-sizer": "1.0.7",
+    "react-window": "1.8.8",
     "remark-gfm": "3.0.1",
     "rollup-plugin-visualizer": "5.9.0",
     "sourcemapped-stacktrace": "1.1.11",
     "ts-prune": "0.10.3",
     "tzdata": "1.0.30",
     "ua-parser-js": "1.0.33",
     "uuid": "9.0.0",
-    "vite": "3.1.3",
+    "vite": "4.2.1",
     "xstate": "4.33.5",
     "xterm": "4.19.0",
     "xterm-addon-fit": "0.5.0",
@@ -93,10 +93,11 @@
   },
   "devDependencies": {
     "@playwright/test": "1.29.2",
-    "@storybook/addon-actions": "6.5.9",
-    "@storybook/addon-essentials": "6.5.12",
-    "@storybook/addon-links": "6.5.9",
-    "@storybook/react": "6.5.12",
+    "@storybook/addon-actions": "7.0.4",
+    "@storybook/addon-essentials": "7.0.4",
+    "@storybook/addon-links": "7.0.4",
+    "@storybook/addon-mdx-gfm": "7.0.4",
+    "@storybook/react-vite": "7.0.4",
     "@swc/core": "1.3.38",
     "@swc/jest": "0.2.24",
     "@testing-library/jest-dom": "5.16.5",
@@ -127,6 +128,7 @@
     "eslint-plugin-jsx-a11y": "6.6.1",
     "eslint-plugin-react": "7.31.1",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-unicorn": "44.0.0",
     "jest": "29.5.0",
     "jest-canvas-mock": "2.4.0",
@@ -139,7 +141,7 @@
     "prettier": "2.8.1",
     "resize-observer": "1.0.4",
     "semver": "7.3.7",
-    "storybook-addon-mock": "^3.2.0",
+    "storybook": "7.0.4",
     "storybook-react-context": "^0.6.0",
     "typescript": "4.8.2"
   },

diff --git a/site/src/components/AppLink/AppLink.tsx b/site/src/components/AppLink/AppLink.tsx
@@ -5,9 +5,9 @@ import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import ErrorOutlineIcon from "@material-ui/icons/ErrorOutline"
 import { FC } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import * as TypesGen from "../../api/typesGenerated"
-import { generateRandomString } from "../../util/random"
+import { generateRandomString } from "../../utils/random"
 import { BaseIcon } from "./BaseIcon"
 import { ShareIcon } from "./ShareIcon"
 

diff --git a/site/src/components/AppLink/ShareIcon.stories.tsx b/site/src/components/AppLink/ShareIcon.stories.tsx
diff --git a/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx b/site/src/components/AuditLogRow/AuditLogDiff/AuditLogDiff.tsx
@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { AuditLog } from "api/typesGenerated"
 import { colors } from "theme/colors"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { FC } from "react"
 
 const getDiffValue = (value: unknown): string => {

diff --git a/site/src/components/Avatar/Avatar.tsx b/site/src/components/Avatar/Avatar.tsx
@@ -5,7 +5,7 @@ import MuiAvatar, {
 } from "@material-ui/core/Avatar"
 import { makeStyles } from "@material-ui/core/styles"
 import { FC } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 import { firstLetter } from "./firstLetter"
 
 export type AvatarProps = MuiAvatarProps & {

diff --git a/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx b/site/src/components/BorderedMenuRow/BorderedMenuRow.tsx
@@ -4,7 +4,7 @@ import SvgIcon from "@material-ui/core/SvgIcon"
 import CheckIcon from "@material-ui/icons/Check"
 import { FC } from "react"
 import { NavLink } from "react-router-dom"
-import { ellipsizeText } from "../../util/ellipsizeText"
+import { ellipsizeText } from "../../utils/ellipsizeText"
 import { Typography } from "../Typography/Typography"
 
 type BorderedMenuRowVariant = "narrow" | "wide"

diff --git a/site/src/components/BuildsTable/BuildAvatar.tsx b/site/src/components/BuildsTable/BuildAvatar.tsx
@@ -5,7 +5,7 @@ import PlayArrowOutlined from "@material-ui/icons/PlayArrowOutlined"
 import PauseOutlined from "@material-ui/icons/PauseOutlined"
 import DeleteOutlined from "@material-ui/icons/DeleteOutlined"
 import { WorkspaceBuild, WorkspaceTransition } from "api/typesGenerated"
-import { getDisplayWorkspaceBuildStatus } from "util/workspace"
+import { getDisplayWorkspaceBuildStatus } from "utils/workspace"
 import { PaletteIndex } from "theme/palettes"
 import { Avatar, AvatarProps } from "components/Avatar/Avatar"
 

diff --git a/site/src/components/BuildsTable/BuildRow.tsx b/site/src/components/BuildsTable/BuildRow.tsx
@@ -10,7 +10,7 @@ import { MONOSPACE_FONT_FAMILY } from "theme/constants"
 import {
   displayWorkspaceBuildDuration,
   getDisplayWorkspaceBuildInitiatedBy,
-} from "util/workspace"
+} from "utils/workspace"
 import { BuildAvatar } from "./BuildAvatar"
 
 export interface BuildRowProps {

diff --git a/site/src/components/CodeBlock/CodeBlock.tsx b/site/src/components/CodeBlock/CodeBlock.tsx
@@ -1,7 +1,7 @@
 import { makeStyles } from "@material-ui/core/styles"
 import { FC, Fragment, ReactElement } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 
 export interface CodeBlockProps {
   lines: string[]

diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -1,7 +1,7 @@
 import { makeStyles, Theme } from "@material-ui/core/styles"
 import { FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "../../theme/constants"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import { CopyButton } from "../CopyButton/CopyButton"
 
 export interface CodeExampleProps {

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -3,7 +3,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import Tooltip from "@material-ui/core/Tooltip"
 import Check from "@material-ui/icons/Check"
 import { useClipboard } from "hooks/useClipboard"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import { FileCopyIcon } from "../Icons/FileCopyIcon"
 
 interface CopyButtonProps {

diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
@@ -3,7 +3,7 @@ import Tooltip from "@material-ui/core/Tooltip"
 import { useClickable } from "hooks/useClickable"
 import { useClipboard } from "hooks/useClipboard"
 import { FC, HTMLProps } from "react"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 interface CopyableValueProps extends HTMLProps<HTMLDivElement> {
   value: string

diff --git a/site/src/components/CreateUserForm/CreateUserForm.tsx b/site/src/components/CreateUserForm/CreateUserForm.tsx
@@ -8,7 +8,7 @@ import {
   getFormHelpers,
   nameValidator,
   onChangeTrimmed,
-} from "../../util/formUtils"
+} from "../../utils/formUtils"
 import { FormFooter } from "../FormFooter/FormFooter"
 import { FullPageForm } from "../FullPageForm/FullPageForm"
 import { Stack } from "../Stack/Stack"

diff --git a/site/src/components/DeploySettingsLayout/Badges.tsx b/site/src/components/DeploySettingsLayout/Badges.tsx
@@ -2,7 +2,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { Stack } from "components/Stack/Stack"
 import { PropsWithChildren, FC } from "react"
 import { MONOSPACE_FONT_FAMILY } from "theme/constants"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 export const EnabledBadge: FC = () => {
   const styles = useStyles()

diff --git a/site/src/components/DeploySettingsLayout/Sidebar.tsx b/site/src/components/DeploySettingsLayout/Sidebar.tsx
@@ -8,7 +8,7 @@ import { GitIcon } from "components/Icons/GitIcon"
 import { Stack } from "components/Stack/Stack"
 import { ElementType, PropsWithChildren, ReactNode, FC } from "react"
 import { NavLink } from "react-router-dom"
-import { combineClasses } from "util/combineClasses"
+import { combineClasses } from "utils/combineClasses"
 
 const SidebarNavItem: FC<
   PropsWithChildren<{ href: string; icon: ReactNode }>

diff --git a/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx b/site/src/components/Dialogs/ConfirmDialog/ConfirmDialog.stories.tsx
@@ -6,22 +6,16 @@ export default {
   title: "Components/Dialogs/ConfirmDialog",
   component: ConfirmDialog,
   argTypes: {
-    onClose: {
-      action: "onClose",
-      defaultValue: action("onClose"),
-    },
-    onConfirm: {
-      action: "onConfirm",
-      defaultValue: action("onConfirm"),
-    },
     open: {
       control: "boolean",
-      defaultValue: true,
-    },
-    title: {
-      defaultValue: "Confirm Dialog",
     },
   },
+  args: {
+    onClose: action("onClose"),
+    onConfirm: action("onConfirm"),
+    open: true,
+    title: "Confirm Dialog",
+  },
 } as ComponentMeta<typeof ConfirmDialog>
 
 const Template: Story<ConfirmDialogProps> = (args) => (

diff --git a/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx b/site/src/components/Dialogs/DeleteDialog/DeleteDialog.stories.tsx
@@ -6,29 +6,18 @@ export default {
   title: "Components/Dialogs/DeleteDialog",
   component: DeleteDialog,
   argTypes: {
-    onCancel: {
-      action: "onClose",
-      defaultValue: action("onClose"),
-    },
-    onConfirm: {
-      action: "onConfirm",
-      defaultValue: action("onConfirm"),
-    },
     open: {
       control: "boolean",
-      defaultValue: true,
-    },
-    entity: {
-      defaultValue: "foo",
-    },
-    name: {
-      defaultValue: "MyFoo",
-    },
-    info: {
-      defaultValue:
-        "Here's some info about the foo so you know you're deleting the right one.",
     },
   },
+  args: {
+    onCancel: action("onClose"),
+    onConfirm: action("onConfirm"),
+    open: true,
+    entity: "foo",
+    name: "MyFoo",
+    info: "Here's some info about the foo so you know you're deleting the right one.",
+  },
 } as ComponentMeta<typeof DeleteDialog>
 
 const Template: Story<DeleteDialogProps> = (args) => <DeleteDialog {...args} />

diff --git a/site/src/components/Dialogs/Dialog.tsx b/site/src/components/Dialogs/Dialog.tsx
@@ -4,7 +4,7 @@ import MuiDialog, {
 import { alpha, darken, makeStyles } from "@material-ui/core/styles"
 import * as React from "react"
 import { colors } from "theme/colors"
-import { combineClasses } from "../../util/combineClasses"
+import { combineClasses } from "../../utils/combineClasses"
 import {
   LoadingButton,
   LoadingButtonProps,