feat(web-components): update web-components storybook to v7.6.7

Storybook-static folder is now being served on a http-server to interact with Loki, update MDX files from MDX1 to MDX2. Prettier fixes to files. . #977
mi6 · Jan 12, 2024 · 1993929 · 1993929
1 parent 3368798
commit 1993929
Show file tree

Hide file tree

Showing 8 changed files with 11,141 additions and 14,031 deletions.
diff --git a/packages/web-components/.storybook/main.js b/packages/web-components/.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/web-components"
+
+  "framework": {
+    name: "@storybook/web-components-webpack5",
+    options: {}
+  },
+
+  docs: {
+    autodocs: true
+  }
 }
diff --git a/packages/web-components/package-lock.json b/packages/web-components/package-lock.json
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -35,16 +35,18 @@
     "test-a11y": "jest",
     "create-component": "stencil generate",
     "storybook": "npm-run-all --parallel build:watch start-storybook",
-    "start-storybook": "start-storybook -p 6006 -s dist --no-manager-cache",
-    "build-storybook": "rimraf /storybook-static && build-storybook -s public",
+    "start-storybook": "storybook dev -p 6006 -s dist",
+    "build-storybook": "rimraf /storybook-static && storybook build -s public",
     "prettier": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --check",
     "prettier:fix": "prettier --config ../../.prettierrc.json --ignore-path ../../.prettierignore src --write",
     "lint": "remark src && echo '*** Linting CSS ***' && stylelint --config ../../.stylelintrc.json src/**/*.css && echo '*** Linting standard files ***' && eslint --config ../../.eslintrc.js src",
     "lint:fix": "echo '*** Linting CSS ***' && stylelint --config ../../.stylelintrc.json src/**/*.css --fix && echo '*** Linting standard files ***' && eslint --config ../../.eslintrc.js src --fix",
-    "test-visual": "loki --requireReference --reactUri file:./storybook-static --chromeTolerance=1",
-    "test-visual:ci": "loki --requireReference --reactUri file:./storybook-static --chromeFlags=\"--no-sandbox --headless --hide-scrollbars --disable-gpu\" --chromeTolerance=1",
-    "test-visual:update": "npm run build-storybook && loki update --reactUri file:./storybook-static",
-    "audit": "echo 'Audit for: @ukic/web-components' && audit-ci -m --config ../../audit-ci.json"
+    "start": "npx http-server storybook-static -s",
+    "kill": "npx kill-port 8080",
+    "test-visual": "npm start & loki --requireReference --port 8080 --chromeTolerance=1 && npm run kill",
+    "test-visual:ci": "npm start & loki --requireReference --port 8080 --chromeFlags=\"--no-sandbox --headless --hide-scrollbars --disable-gpu\" --chromeTolerance=1 && npm run kill",
+    "test-visual:update": "(npm run build-storybook) & npm start & loki update --port 8080 --chromeTolerance=1 && npm run kill",
+    "audit": "echo 'Audit for: @ukic/web-components' & audit-ci -m --config ../../audit-ci.json"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
@@ -58,14 +60,14 @@
     "@open-wc/testing-helpers": "^2.0.2",
     "@stencil/postcss": "^2.1.0",
     "@stencil/react-output-target": "^0.5.3",
-    "@storybook/addon-a11y": "^6.4.8",
-    "@storybook/addon-actions": "^6.4.3",
-    "@storybook/addon-essentials": "^6.4.3",
-    "@storybook/addon-links": "^6.4.3",
+    "@storybook/addon-a11y": "^7.6.7",
+    "@storybook/addon-actions": "^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/web-components": "^6.4.3",
+    "@storybook/web-components": "^7.6.7",
+    "@storybook/web-components-webpack5": "^7.6.7",
     "@types/autoprefixer": "^10.2.0",
     "@types/jest": "^26.0.24",
     "@types/jest-axe": "^3.5.3",
@@ -81,6 +83,7 @@
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "stencil-inline-svg": "^1.1.0",
+    "storybook": "^7.6.7",
     "ts-jest": "^26.5.6",
     "webpack": "^5.76.0"
   },

diff --git a/...b-components/src/components/ic-breadcrumb-group/ic-breadcrumb-group.stories.mdx b/...b-components/src/components/ic-breadcrumb-group/ic-breadcrumb-group.stories.mdx
@@ -151,93 +151,8 @@ import BreadcrumbReadme from "../ic-breadcrumb/readme.md";
 ### Appearance
 
 <Canvas>
-  <Story name="Appearance">{html`<ic-breadcrumb-group>
-      <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1">
-        <svg
-          slot="icon"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
-            fill="currentColor"
-          ></path>
-        </svg>
-      </ic-breadcrumb>
-      <ic-breadcrumb page-title="Breadcrumb 2" current="true" href="/">
-        <svg
-          slot="icon"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
-            fill="currentColor"
-          ></path>
-        </svg>
-      </ic-breadcrumb>
-    </ic-breadcrumb-group>
-    <ic-breadcrumb-group back-breadcrumb-only="true">
-      <ic-breadcrumb
-        page-title="Breadcrumb 1"
-        href="/breadcrumb-1"
-      ></ic-breadcrumb>
-      <ic-breadcrumb
-        current="true"
-        page-title="Breadcrumb 2"
-        href="/breadcrumb-2"
-      ></ic-breadcrumb> </ic-breadcrumb-group
-    ><ic-breadcrumb-group appearance="dark">
-      <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1">
-        <svg
-          slot="icon"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
-            fill="currentColor"
-          ></path>
-        </svg>
-      </ic-breadcrumb>
-      <ic-breadcrumb page-title="Breadcrumb 2" current="true" href="/">
-        <svg
-          slot="icon"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
-            fill="currentColor"
-          ></path>
-        </svg>
-      </ic-breadcrumb>
-    </ic-breadcrumb-group>
-    <ic-breadcrumb-group appearance="dark" back-breadcrumb-only="true">
-      <ic-breadcrumb
-        page-title="Breadcrumb 1"
-        href="/breadcrumb-1"
-      ></ic-breadcrumb>
-      <ic-breadcrumb
-        current="true"
-        page-title="Breadcrumb 2"
-        href="/breadcrumb-2"
-      ></ic-breadcrumb>
-    </ic-breadcrumb-group>
-    <div style="background-color: black; width: fit-content;">
-      <ic-breadcrumb-group appearance="light">
+  <Story name="Appearance">
+    {html`<ic-breadcrumb-group>
         <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1">
           <svg
             slot="icon"
@@ -269,9 +184,49 @@ import BreadcrumbReadme from "../ic-breadcrumb/readme.md";
           </svg>
         </ic-breadcrumb>
       </ic-breadcrumb-group>
-    </div>
-    <div style="background-color: black; width: fit-content;">
-      <ic-breadcrumb-group appearance="light" back-breadcrumb-only="true">
+      <ic-breadcrumb-group back-breadcrumb-only="true">
+        <ic-breadcrumb
+          page-title="Breadcrumb 1"
+          href="/breadcrumb-1"
+        ></ic-breadcrumb>
+        <ic-breadcrumb
+          current="true"
+          page-title="Breadcrumb 2"
+          href="/breadcrumb-2"
+        ></ic-breadcrumb> </ic-breadcrumb-group
+      ><ic-breadcrumb-group appearance="dark">
+        <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </ic-breadcrumb>
+        <ic-breadcrumb page-title="Breadcrumb 2" current="true" href="/">
+          <svg
+            slot="icon"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+              fill="currentColor"
+            ></path>
+          </svg>
+        </ic-breadcrumb>
+      </ic-breadcrumb-group>
+      <ic-breadcrumb-group appearance="dark" back-breadcrumb-only="true">
         <ic-breadcrumb
           page-title="Breadcrumb 1"
           href="/breadcrumb-1"
@@ -282,7 +237,54 @@ import BreadcrumbReadme from "../ic-breadcrumb/readme.md";
           href="/breadcrumb-2"
         ></ic-breadcrumb>
       </ic-breadcrumb-group>
-    </div>`}</Story>
+      <div style="background-color: black; width: fit-content;">
+        <ic-breadcrumb-group appearance="light">
+          <ic-breadcrumb page-title="Breadcrumb 1" href="/breadcrumb-1">
+            <svg
+              slot="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </ic-breadcrumb>
+          <ic-breadcrumb page-title="Breadcrumb 2" current="true" href="/">
+            <svg
+              slot="icon"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 6.19L17 10.69V18.5H15V12.5H9V18.5H7V10.69L12 6.19ZM12 3.5L2 12.5H5V20.5H11V14.5H13V20.5H19V12.5H22L12 3.5Z"
+                fill="currentColor"
+              ></path>
+            </svg>
+          </ic-breadcrumb>
+        </ic-breadcrumb-group>
+      </div>
+      <div style="background-color: black; width: fit-content;">
+        <ic-breadcrumb-group appearance="light" back-breadcrumb-only="true">
+          <ic-breadcrumb
+            page-title="Breadcrumb 1"
+            href="/breadcrumb-1"
+          ></ic-breadcrumb>
+          <ic-breadcrumb
+            current="true"
+            page-title="Breadcrumb 2"
+            href="/breadcrumb-2"
+          ></ic-breadcrumb>
+        </ic-breadcrumb-group>
+      </div>`}
+  </Story>
 </Canvas>
 
 ### Icon

diff --git a/packages/web-components/src/components/ic-link/ic-link.stories.mdx b/packages/web-components/src/components/ic-link/ic-link.stories.mdx
@@ -15,34 +15,35 @@ import readme from "./readme.md";
 ### Default
 
 <Canvas>
-  <Story name="Default">{html`<ic-link href="/"
-    >This is a link</ic-link
-  >`}</Story>
+  <Story name="Default">
+    {html`<ic-link href="/">This is a link</ic-link>`}
+  </Story>
 </Canvas>
 
 ### With icon
 
 <Canvas>
-  <Story name="With icon">{html`<ic-link href="/" show-icon
-    >This is a link</ic-link
-  >`}</Story>
+  <Story name="With icon">
+    {html`<ic-link href="/" show-icon>This is a link</ic-link>`}
+  </Story>
 </Canvas>
 
 ### Dark
 
 <Canvas>
-  <Story name="Dark">{html`<ic-link href="/" appearance="dark" target="_blank"
-    >This is a link</ic-link
-  >`}</Story>
+  <Story name="Dark">
+    {html`<ic-link href="/" appearance="dark" target="_blank"
+      >This is a link</ic-link
+    >`}
+  </Story>
 </Canvas>
 
 ### Light
 
 <Canvas>
-  <Story
-    name="Light"
-    parameters={{ backgrounds: { default: "dark" } }}
-  >{html` <ic-link href="/" appearance="light" show-icon
-    >This is a link</ic-link
-  >`}</Story>
+  <Story name="Light" parameters={{ backgrounds: { default: "dark" } }}>
+    {html` <ic-link href="/" appearance="light" show-icon
+      >This is a link</ic-link
+    >`}
+  </Story>
 </Canvas>