feat(react): update react storybook to v7.6.7

Install storybook v7.6.7, update scripts, add new Storybook plugin for GitHub-flavoured markdown, fixes to stories . #977
mi6 · Jan 12, 2024 · 1eab0fa · 1eab0fa
1 parent c053329
commit 1eab0fa
Show file tree

Hide file tree

Showing 10 changed files with 8,894 additions and 14,455 deletions.
diff --git a/packages/react/.babelrc.json b/packages/react/.babelrc.json
@@ -0,0 +1,18 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100,
+          "safari": 15,
+          "firefox": 91
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": []
+}
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -1,17 +1,27 @@
 module.exports = {
   "core": {
-    builder: "webpack5",
-    disableTelemetry: true,
+    disableTelemetry: true
   },
+
   "stories": [
     "../src/**/*.stories.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)"
   ],
+
   "addons": [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-postcss",
     "@storybook/addon-a11y",
+    "@storybook/addon-mdx-gfm"
   ],
-  "framework": "@storybook/react"
+
+  "framework": {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  }
 }
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -20,8 +20,8 @@
     "compile": "npm run tsc",
     "tsc": "tsc -p .",
     "rollup": "rollup -c",
-    "storybook": "start-storybook -p 6007 --no-manager-cache",
-    "build-storybook": "rimraf ./storybook-static && build-storybook -s public",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "rimraf ./storybook-static && storybook build -s public",
     "audit": "echo 'Audit for: @ukic/react' && audit-ci -m --config ../../audit-ci.json",
     "prettier": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --check",
     "prettier:fix": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --write",
@@ -40,17 +40,20 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@mdi/js": "^7.2.96",
     "@stencil/react-output-target": "^0.5.3",
-    "@storybook/addon-a11y": "^6.4.8",
-    "@storybook/addon-actions": "^6.4.8",
-    "@storybook/addon-docs": "^6.4.8",
-    "@storybook/addon-essentials": "^6.4.8",
-    "@storybook/addon-links": "^6.4.8",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-actions": "^7.6.7",
+    "@storybook/addon-docs": "^7.6.7",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-mdx-gfm": "^7.6.7",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.14",
-    "@storybook/manager-webpack5": "^6.5.14",
-    "@storybook/react": "^6.5.15",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
     "@types/node": "^16.11.11",
     "@types/react": "^17.0.37",
     "@types/react-dom": "^17.0.11",
@@ -61,6 +64,7 @@
     "react-dom": "^16.7.0",
     "react-hook-form": "^7.38.0",
     "react-router-dom": "^6.3.0",
+    "storybook": "^7.6.7",
     "typescript": "^4.5.2",
     "webpack": "^5.76.0"
   },

diff --git a/packages/react/src/stories/ic-accordion.stories.mdx b/packages/react/src/stories/ic-accordion.stories.mdx
@@ -17,6 +17,7 @@ import {
   IcButton,
   IcDialog,
   IcSearchBar,
+  IcTypography,
 } from "../components";
 import readme from "../../../web-components/src/components/ic-accordion/readme.md";
 

diff --git a/packages/react/src/stories/ic-button.stories.mdx b/packages/react/src/stories/ic-button.stories.mdx
@@ -20,6 +20,8 @@ export const defaultArgs = {
   disabled: false,
   loading: false,
   appearance: "default",
+  size: "default",
+  variant: "secondary",
 };
 
 ### Primary
@@ -786,17 +788,14 @@ export const defaultArgs = {
     args={defaultArgs}
     argTypes={{
       variant: {
-        defaultValue: "secondary",
         options: ["primary", "secondary", "tertiary", "destructive"],
         control: { type: "select" },
       },
       size: {
-        defaultValue: "default",
         options: ["default", "large", "small"],
         control: { type: "inline-radio" },
       },
       appearance: {
-        defaultValue: "deafult",
         options: ["default", "dark", "light"],
         control: { type: "inline-radio" },
       },
@@ -824,17 +823,14 @@ export const defaultArgs = {
     args={{ ...defaultArgs }}
     argTypes={{
       variant: {
-        defaultValue: "secondary",
         options: ["primary", "secondary", "tertiary", "destructive"],
         control: { type: "select" },
       },
       size: {
-        defaultValue: "default",
         options: ["default", "large", "small"],
         control: { type: "inline-radio" },
       },
       appearance: {
-        defaultValue: "deafult",
         options: ["default", "dark", "light"],
         control: { type: "inline-radio" },
       },

diff --git a/packages/react/src/stories/ic-loading-indicator.stories.mdx b/packages/react/src/stories/ic-loading-indicator.stories.mdx
@@ -14,6 +14,18 @@ import readme from "../../../web-components/src/components/ic-loading-indicator/
 
 <Description markdown={readme} />
 
+export const defaultArgs = {
+  progress: 30,
+  min: 0,
+  max: 100,
+};
+
+export const defaultArgTypes = {
+  progress: { type: { name: "number", min: 1, max: 100 } },
+  min: { type: { name: "number", min: 1, max: 100 } },
+  max: { type: { name: "number", min: 1, max: 100 } },
+};
+
 ### Circular (determinate)
 
 <Canvas>
@@ -25,11 +37,8 @@ import readme from "../../../web-components/src/components/ic-loading-indicator/
 <Canvas>
   <Story
     name="Circular (determinate)"
-    argTypes={{
-      progress: { type: { name: "number" }, defaultValue: 30 },
-      min: { type: { name: "number" }, defaultValue: 0 },
-      max: { type: { name: "number" }, defaultValue: 100 },
-    }}
+    args={defaultArgs}
+    argTypes={defaultArgTypes}
   >
     {(args) => (
       <IcLoadingIndicator
@@ -59,11 +68,8 @@ import readme from "../../../web-components/src/components/ic-loading-indicator/
 <Canvas>
   <Story
     name="Circular variants (determinate)"
-    argTypes={{
-      progress: { type: { name: "number" }, defaultValue: 30 },
-      min: { type: { name: "number" }, defaultValue: 0 },
-      max: { type: { name: "number" }, defaultValue: 100 },
-    }}
+    args={defaultArgs}
+    argTypes={defaultArgTypes}
   >
     {(args) => (
       <div style={{ display: "grid", gap: "50px" }}>
@@ -113,11 +119,8 @@ import readme from "../../../web-components/src/components/ic-loading-indicator/
 <Canvas>
   <Story
     name="Linear (determinate)"
-    argTypes={{
-      progress: { type: { name: "number" }, defaultValue: 30 },
-      min: { type: { name: "number" }, defaultValue: 0 },
-      max: { type: { name: "number" }, defaultValue: 100 },
-    }}
+    args={defaultArgs}
+    argTypes={defaultArgTypes}
   >
     {(args) => (
       <IcLoadingIndicator
@@ -154,11 +157,8 @@ import readme from "../../../web-components/src/components/ic-loading-indicator/
 <Canvas>
   <Story
     name="Linear variants (determinate)"
-    argTypes={{
-      progress: { type: { name: "number" }, defaultValue: 30 },
-      min: { type: { name: "number" }, defaultValue: 0 },
-      max: { type: { name: "number" }, defaultValue: 100 },
-    }}
+    args={defaultArgs}
+    argTypes={defaultArgTypes}
   >
     {(args) => (
       <div style={{ display: "grid", gap: "50px" }}>
@@ -266,11 +266,8 @@ import readme from "../../../web-components/src/components/ic-loading-indicator/
 <Canvas>
   <Story
     name="Progress indicator for compact step"
-    argTypes={{
-      progress: { type: { name: "number" }, defaultValue: 30 },
-      min: { type: { name: "number" }, defaultValue: 0 },
-      max: { type: { name: "number" }, defaultValue: 100 },
-    }}
+    args={defaultArgs}
+    argTypes={defaultArgTypes}
     parameters={{ loki: { skip: true } }}
   >
     {(args) => (

diff --git a/packages/react/src/stories/ic-select.stories.mdx b/packages/react/src/stories/ic-select.stories.mdx
@@ -1028,7 +1028,6 @@ export const ExternalFiltering = () => {
     args={{ ...defaultArgs, showClearButton: false }}
     argTypes={{
       validationStatus: {
-        defaultValue: "",
         options: ["none", "error", "success", "warning"],
         control: { type: "inline-radio" },
       },
@@ -1070,12 +1069,10 @@ export const ExternalFiltering = () => {
     }}
     argTypes={{
       searchMatchPosition: {
-        defaultValue: "anywhere",
         options: ["anywhere", "start"],
         control: { type: "inline-radio" },
       },
       validationStatus: {
-        defaultValue: "",
         options: ["none", "error", "success", "warning"],
         control: { type: "inline-radio" },
       },

diff --git a/packages/react/src/stories/ic-theme.stories.mdx b/packages/react/src/stories/ic-theme.stories.mdx
@@ -131,9 +131,8 @@ export const Controlled = () => {
         <IcTypography variant="body" slot="message">
           <p>
             This is some text and
-            <ic-link href="/" inline>
-              this is an inline link
-            </ic-link> within the text.
+            <ic-link href="/"> this is an inline link ic-link</ic-link>
+            within the text
           </p>
         </IcTypography>
       </IcAlert>

diff --git a/packages/react/src/stories/ic-typography.stories.mdx b/packages/react/src/stories/ic-typography.stories.mdx
@@ -18,6 +18,7 @@ export const defaultArgs = {
   italic: false,
   strikethrough: false,
   underline: false,
+  variant: "body",
 };
 
 ### Default
@@ -385,7 +386,6 @@ export const defaultArgs = {
     args={defaultArgs}
     argTypes={{
       variant: {
-        defaultValue: "body",
         options: [
           "body",
           "caption",