docs: upgrade storybook to v7

canonical · Nov 10, 2023 · 6ba402a · 6ba402a
1 parent 4915006
commit 6ba402a
Show file tree

Hide file tree

Showing 5 changed files with 4,330 additions and 6,519 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,14 +1,13 @@
 const path = require("path");
 
-module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
+const config = {
   stories: ["../src/**/*.stories.@(js|ts|jsx|tsx|mdx)"],
+
   addons: [
     "@storybook/addon-docs",
     "@storybook/addon-controls",
     "@storybook/addon-a11y",
+    "@storybook/addon-mdx-gfm",
   ],
   webpackFinal: async (config, { configType }) => {
     config.module.rules.push({
@@ -18,4 +17,17 @@ module.exports = {
     });
     return config;
   },
+
+  docs: {
+    autodocs: false,
+  },
+
+  core: {},
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
 };
+
+export default config;
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,7 +1,6 @@
 import { themes } from "@storybook/theming";
 import "vanilla-framework/scss/build.scss";
 
-// or global addParameters
 export const parameters = {
   docs: {
     theme: themes.vanillaish,

diff --git a/package.json b/package.json
@@ -27,14 +27,15 @@
     "@babel/preset-typescript": "7.23.2",
     "@percy/cli": "1.27.3",
     "@percy/storybook": "4.3.7",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-controls": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/react": "6.5.16",
-    "@storybook/theming": "6.5.16",
+    "@storybook/addon-a11y": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/addon-mdx-gfm": "7.5.3",
+    "@storybook/addon-onboarding": "1.0.8",
+    "@storybook/blocks": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-webpack5": "7.5.3",
     "@testing-library/cypress": "9.0.0",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "5.17.0",
@@ -61,6 +62,7 @@
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-testing-library": "5.11.1",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
@@ -70,6 +72,7 @@
     "react-dom": "18.2.0",
     "sass": "1.69.3",
     "sass-loader": "10.4.1",
+    "storybook": "7.5.3",
     "style-loader": "3.3.3",
     "stylelint": "15.11.0",
     "stylelint-config-prettier": "9.0.5",
@@ -99,7 +102,11 @@
   "resolutions": {
     "@types/react": "18.2.28",
     "@types/react-dom": "18.2.13",
-    "postcss": "^8.3.11"
+    "postcss": "^8.3.11",
+    "string-width": "^4",
+    "jackspeak": "^2",
+    "strip-ansi": "^6.0.0",
+    "strip-ansi-cjs": "^8.0.0"
   },
   "peerDependencies": {
     "@types/react": "^17.0.2 || ^18.0.0",
@@ -113,9 +120,9 @@
     "build-local": "NODE_ENV=production babel src --out-dir dist --copy-files --extensions '.js,.jsx,.ts,.tsx'",
     "build-declaration": "tsc --project tsconfig.json && tsc-alias -p tsconfig.json",
     "build-watch": "yarn run build-local --watch",
-    "build-docs": "build-storybook -c .storybook -o docs",
+    "build-docs": "storybook build -c .storybook -o docs",
     "clean": "rm -rf node_modules dist .out",
-    "docs": "start-storybook --port ${PORT:-9009}",
+    "docs": "storybook dev -p ${PORT:-9009}",
     "link-packages": "yarn install && yarn build && yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
     "lint-js": "eslint src",
     "lint-style": "stylelint src/**/*.scss",

diff --git a/src/components/ModularTable/ModularTable.stories.mdx b/src/components/ModularTable/ModularTable.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props } from "@storybook/addon-docs";
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
 import { useState } from "react";
 import Notification from "../Notification";
 
@@ -14,7 +14,7 @@ This is a [React](https://reactjs.org/) component to support many table use case
 
 ### Props
 
-<Props of={ModularTable} />
+<ArgsTable of={ModularTable} />
 
 ModularTable components accepts `columns` and `data` arguments in the same format as [`useTable`](https://react-table.tanstack.com/docs/api/useTable) hook of the ReactTable library.
 
@@ -69,7 +69,7 @@ columns = {
 
 ### Default
 
-<Preview>
+<Canvas>
   <Story name="Default">
     <ModularTable
       getCellProps={({ value }) => ({
@@ -151,11 +151,11 @@ columns = {
       )}
     />
   </Story>
-</Preview>
+</Canvas>
 
 ### Empty
 
-<Preview>
+<Canvas>
   <Story name="Empty">
     <ModularTable
       columns={React.useMemo(
@@ -189,11 +189,11 @@ columns = {
       emptyMsg="Waiting for data..."
     />
   </Story>
-</Preview>
+</Canvas>
 
 ### Sortable columns
 
-<Preview>
+<Canvas>
   <Story name="Sortable">
     <ModularTable
       sortable
@@ -283,15 +283,15 @@ columns = {
       )}
     />
   </Story>
-</Preview>
+</Canvas>
 
 ### Subrows
 
 Subrows can be used to group table rows under a heading that needs to appear
 at the start of the group. In the following example sorting the columns will
 sort the group rows, then sort the sub-rows, but the group header always comes first.
 
-<Preview>
+<Canvas>
   <Story name="Subrows">
     <ModularTable
       sortable
@@ -367,7 +367,7 @@ sort the group rows, then sort the sub-rows, but the group header always comes f
       )}
     />
   </Story>
-</Preview>
+</Canvas>
 
 ### Load more items