chore: upgrade to storybook 7

nl-design-system · Aug 7, 2023 · 52b7a8d · 52b7a8d
1 parent 6046850
commit 52b7a8d
Show file tree

Hide file tree

Showing 12 changed files with 2,055 additions and 4,749 deletions.
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ You need to have the following tools installed to run Storybook locally:
 3. Choose and register an npm organisation on [npmjs.com](https://www.npmjs.com/org/create), if you haven't already. This is very important to keep your project secure. The core NL Design System uses `@nl-design-system/`, and you can choose something for yourself. This prevents others from adding their code to your teams codebase.
 4. Modify all `package.json` files to use your npm organisation scope. Don't forget the locally linked packages under `devDependencies`.
 5. Modify `.npmpackagejsonlintrc.json` to require your organisation scope in package names, by configuring the `valid-values-name-scope` property.
-6. Modify the imports in `/packages/storybook/config/preview.js` and `packages/web-components-stencil/src/button/index.scss` to use your prefix.
+6. Modify the imports in `/packages/storybook/config/preview.tsx` and `packages/web-components-stencil/src/button/index.scss` to use your prefix.
 
 ### Run storybook
 
@@ -69,7 +69,7 @@ To add a component implementation to storybook, we use the `<component-name>-sto
 - Declare a story for each component variation and bind the template
 - Declare the possible inputs, with types and a description in the `argTypes` property of the `Meta` component in `stories.mdx`.
 - Add an `Argstable` component in your `stories.mdx`
-- Optionally add a different `status` to the `Meta` parameters. The options and colors can be found in `.storybook/preview.js`
+- Optionally add a different `status` to the `Meta` parameters. The options and colors can be found in `storybook/config/preview.tsx`
 
 ---
 

diff --git a/documentation/introduction.stories.mdx b/documentation/introduction.stories.mdx
@@ -1,6 +1,6 @@
-import { Description, Meta } from "@storybook/addon-docs";
+import { Markdown, Meta } from "@storybook/addon-docs";
 import markdown from "./introduction.md";
 
 <Meta title="Example/Intro" />
 
-<Description>{markdown}</Description>
+<Markdown>{markdown}</Markdown>
diff --git a/documentation/license.stories.mdx b/documentation/license.stories.mdx
@@ -1,6 +1,6 @@
-import { Description, Meta } from "@storybook/addon-docs";
+import { Markdown, Meta } from "@storybook/addon-docs";
 import markdown from "../LICENSE.md";
 
 <Meta title="Example/Open Source License" />
 
-<Description>{markdown}</Description>
+<Markdown>{markdown}</Markdown>
diff --git a/documentation/notice.stories.mdx b/documentation/notice.stories.mdx
@@ -1,6 +1,6 @@
-import { Description, Meta } from "@storybook/addon-docs";
+import { Markdown, Meta } from "@storybook/addon-docs";
 import markdown from "../NOTICE.md";
 
 <Meta title="Example/Toestemming voor gebruik" />
 
-<Description>{markdown}</Description>
+<Markdown>{markdown}</Markdown>
diff --git a/documentation/package.json b/documentation/package.json
@@ -11,7 +11,7 @@
   "devDependencies": {
     "@babel/core": "7.21.3",
     "@mdx-js/react": "1.6.22",
-    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-docs": "7.0.26",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5",

diff --git a/packages/components-css/package.json b/packages/components-css/package.json
@@ -11,7 +11,7 @@
   "devDependencies": {
     "@babel/core": "7.21.3",
     "@mdx-js/react": "1.6.22",
-    "@storybook/addon-docs": "6.5.16",
+    "@storybook/addon-docs": "7.0.26",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5",

diff --git a/packages/storybook/.babelrc.json b/packages/storybook/.babelrc.json
@@ -0,0 +1,16 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/packages/storybook/config/main.js → packages/storybook/config/main.tsx b/packages/storybook/config/main.js → packages/storybook/config/main.tsx
@@ -8,9 +8,11 @@ module.exports = {
     '@storybook/addon-viewport/register',
     '@storybook/preset-scss',
   ],
-  framework: '@storybook/react',
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
   core: {
-    builder: '@storybook/builder-webpack5',
     disableTelemetry: true,
   },
   docs: {

diff --git a/packages/storybook/config/preview.js → packages/storybook/config/preview.tsx b/packages/storybook/config/preview.js → packages/storybook/config/preview.tsx
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -13,32 +13,34 @@
     "url": "git@github.com:nl-design-system/example.git"
   },
   "scripts": {
-    "build": "build-storybook --output-dir dist/ --config-dir config/",
+    "build": "storybook build --output-dir dist/ --config-dir config/",
     "clean": "rimraf dist/",
-    "storybook": "start-storybook --config-dir config/ --port 6006"
+    "storybook": "storybook dev --config-dir config/ --port 6006"
   },
   "devDependencies": {
     "@babel/core": "7.21.3",
-    "@etchteam/storybook-addon-status": "4.2.2",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/addon-viewport": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.5.16",
-    "@storybook/testing-library": "0.0.13",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
+    "@babel/preset-env": "7.22.7",
+    "@babel/preset-react": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
+    "@etchteam/storybook-addon-status": "4.2.4",
     "@example/assets": "workspace:*",
     "@example/components-css": "workspace:*",
-    "@example/documentation": "workspace:*",
     "@example/design-tokens": "workspace:*",
+    "@example/documentation": "workspace:*",
     "@example/font": "workspace:*",
     "@example/web-components-stencil": "workspace:*",
+    "@storybook/addon-a11y": "7.0.26",
+    "@storybook/addon-actions": "7.0.26",
+    "@storybook/addon-docs": "7.0.26",
+    "@storybook/addon-interactions": "7.0.26",
+    "@storybook/addon-links": "7.0.26",
+    "@storybook/addon-viewport": "7.0.26",
+    "@storybook/preset-scss": "1.0.3",
+    "@storybook/react": "7.0.26",
+    "@storybook/react-webpack5": "7.0.26",
+    "@storybook/testing-library": "0.2.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "babel-loader": "9.1.2",
     "css-loader": "6.7.3",
     "react": "18.2.0",
@@ -47,9 +49,9 @@
     "rimraf": "4.4.1",
     "sass": "1.59.3",
     "sass-loader": "13.2.1",
+    "storybook": "7.0.26",
     "style-loader": "3.3.2",
     "typescript": "4.9.5",
     "webpack": "5.76.3"
-  },
-  "dependencies": {}
+  }
 }
diff --git a/packages/storybook/tsconfig.json b/packages/storybook/tsconfig.json
@@ -4,6 +4,6 @@
     "allowSyntheticDefaultImports": true
   },
   "extends": "../../tsconfig.json",
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "include": ["config/**/*.ts", "config/**/*.tsx", "src/**/*.ts", "src/**/*.tsx"],
   "exclude": ["**/node_modules/*"]
 }