chore: update storybook

rodrimaia · rodrimaia · commit a7dfa9424431 · 2023-04-11T15:56:03.000-03:00
diff --git a/site/.storybook/main.ts b/site/.storybook/main.ts
@@ -3,47 +3,50 @@
  *
  * @see <https://storybook.js.org/docs/react/configure/overview>
  */
-const path = require("path")
-
-module.exports = {
+import remarkGfm from 'remark-gfm';
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
   // 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",
+  addons: ["@storybook/addon-links", {
+    name: "@storybook/addon-essentials",
+    options: {
+      actions: false
+    }
+  },
     {
-      name: "@storybook/addon-essentials",
+      name: '@storybook/addon-docs',
       options: {
-        actions: false,
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
       },
     },
   ],
-
   // SEE: https://storybook.js.org/docs/react/configure/babel
-  babel: async (options) => ({
+  babel: async options => ({
     ...options,
-    plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
+    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: {}
   },
-}
+  docs: {
+    autodocs: true
+  }
+};
+export default config
diff --git a/site/.storybook/preview.tsx b/site/.storybook/preview.tsx
@@ -1,18 +1,20 @@
 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"
+import React from "react"
+import { Preview } from '@storybook/react';
 
-addDecorator((story) => (
+
+const themeProviderDecorator = (story) => (
   <ThemeProvider theme={dark}>
     <CssBaseline />
     {story()}
   </ThemeProvider>
-))
+)
 
 const history = createMemoryHistory()
 
@@ -24,18 +26,20 @@ const routerDecorator = (Story) => {
   )
 }
 
-addDecorator(routerDecorator)
-
-export const parameters = {
-  actions: {
-    argTypesRegex: "^on[A-Z].*",
-    argTypesRegex: "^handle[A-Z].*",
-  },
-  controls: {
-    expanded: true,
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+const preview: Preview = {
+  decorators: [themeProviderDecorator, routerDecorator],
+  parameters: {
+    actions: {
+      argTypesRegex: "(^on[A-Z].*)?(^handle[A-Z].*)",
+    },
+    controls: {
+      expanded: true,
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
     },
   },
 }
+
+export default preview
diff --git a/site/.tool-versions b/site/.tool-versions
@@ -0,0 +1 @@
+nodejs 16.19.1
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 dev -p 6006",
+    "storybook:build": "storybook build",
     "test": "jest --selectProjects test",
     "test:ci": "jest --selectProjects test --silent",
     "test:coverage": "jest --selectProjects test --collectCoverage",
@@ -84,7 +84,7 @@
     "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,12 @@
   },
   "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.2",
+    "@storybook/addon-essentials": "7.0.2",
+    "@storybook/addon-links": "7.0.2",
+    "@storybook/addon-mdx-gfm": "7.0.2",
+    "@storybook/react": "7.0.2",
+    "@storybook/react-vite": "7.0.2",
     "@swc/core": "1.3.38",
     "@swc/jest": "0.2.24",
     "@testing-library/jest-dom": "5.16.5",
@@ -127,6 +129,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 +142,8 @@
     "prettier": "2.8.1",
     "resize-observer": "1.0.4",
     "semver": "7.3.7",
-    "storybook-addon-mock": "^3.2.0",
+    "storybook": "7.0.2",
+    "storybook-addon-mock": "^4.0.0",
     "storybook-react-context": "^0.6.0",
     "typescript": "4.8.2"
   },
diff --git a/site/src/components/AppLink/ShareIcon.stories.tsx b/site/src/components/AppLink/ShareIcon.stories.tsx
diff --git a/site/vite.config.ts b/site/vite.config.ts
@@ -43,16 +43,26 @@ export default defineConfig({
     },
   },
   resolve: {
-    alias: {
-      api: path.resolve(__dirname, "./src/api"),
-      components: path.resolve(__dirname, "./src/components"),
-      hooks: path.resolve(__dirname, "./src/hooks"),
-      i18n: path.resolve(__dirname, "./src/i18n"),
-      pages: path.resolve(__dirname, "./src/pages"),
-      testHelpers: path.resolve(__dirname, "./src/testHelpers"),
-      theme: path.resolve(__dirname, "./src/theme"),
-      util: path.resolve(__dirname, "./src/util"),
-      xServices: path.resolve(__dirname, "./src/xServices"),
-    },
-  },
+    alias: [
+      { find: "api", replacement: path.resolve(__dirname, "./src/api") },
+      {
+        find: "components",
+        replacement: path.resolve(__dirname, "./src/components"),
+      },
+      { find: "hooks", replacement: path.resolve(__dirname, "./src/hooks") },
+      { find: "i18n", replacement: path.resolve(__dirname, "./src/i18n") },
+      { find: "pages", replacement: path.resolve(__dirname, "./src/pages") },
+      {
+        find: "testHelpers",
+        replacement: path.resolve(__dirname, "./src/testHelpers"),
+      },
+      { find: "theme", replacement: path.resolve(__dirname, "./src/theme") },
+      { find: /^util$/, replacement: path.resolve("./node_modules/util") },
+      { find: "util", replacement: path.resolve(__dirname, "./src/util") },
+      {
+        find: "xServices",
+        replacement: path.resolve(__dirname, "./src/xServices"),
+      },
+    ],
+  }
 })
diff --git a/site/yarn.lock b/site/yarn.lock
