Merge pull request #3226 from mi6/3135-fix-the-docs-tab-for-storybook-v8

fix(web-components): fixed displaying readme docs on storybook
mi6 · Feb 24, 2025 · 0734cc8 · 0734cc8
2 parents 8b010c9 + 2e321f9
commit 0734cc8
Show file tree

Hide file tree

Showing 120 changed files with 451 additions and 9,692 deletions.
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -1,49 +1,54 @@
 module.exports = {
-  "core": {
-    disableTelemetry: true
+  core: {
+    disableTelemetry: true,
   },
 
   stories: [
     {
-      directory: '../src/stories',
-      files: '*.stories.*',
-      titlePrefix: 'React Components',
+      directory: "../src/stories",
+      files: "*.mdx",
+      titlePrefix: "React Components",
+    },
+    {
+      directory: "../src/stories",
+      files: "*.stories.*",
+      titlePrefix: "React Components",
     },
   ],
 
-  "addons": [
+  addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@storybook/addon-postcss",
     "@storybook/addon-a11y",
     "@storybook/addon-mdx-gfm",
     "storybook-addon-performance",
-    "@storybook/addon-webpack5-compiler-babel"
+    "@storybook/addon-webpack5-compiler-babel",
   ],
 
-  "framework": {
+  framework: {
     name: "@storybook/react-webpack5",
-    options: {}
+    options: {},
   },
 
   docs: {},
 
   typescript: {
-    reactDocgen: "react-docgen-typescript"
+    reactDocgen: "react-docgen-typescript",
   },
 
   webpackFinal: async (config) => {
     config.module.rules.push({
       test: /\.(js|jsx)$/,
       exclude: /node_modules/,
       use: {
-        loader: 'babel-loader',
+        loader: "babel-loader",
         options: {
-          presets: ['@babel/preset-env', '@babel/preset-react']
-        }
-      }
+          presets: ["@babel/preset-env", "@babel/preset-react"],
+        },
+      },
     });
 
     return config;
-  }
-}
+  },
+};
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -1,17 +1,16 @@
 import "../dist/core/normalize.css";
 import "@ukic/fonts/dist/fonts.css";
 import "../dist/core/core.css";
-import { withPerformance } from 'storybook-addon-performance';
+import { withPerformance } from "storybook-addon-performance";
 
 export const parameters = {
-    controls: { 
-        matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
-      hideNoControlsWarning: true
-    }
-  }
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+    hideNoControlsWarning: true,
+  },
+};
 
 export const decorators = [withPerformance];
-export const tags = ["autodocs"];
diff --git a/packages/react/src/stories/ic-accordion.mdx b/packages/react/src/stories/ic-accordion.mdx
@@ -1,221 +1,13 @@
-import { useState, useRef } from "react";
 import {
   Meta,
-  Story,
-  Canvas,
-  Controls,
-  Description,
+  Stories,
+  Markdown
 } from "@storybook/blocks";
-import {
-  IcAccordion,
-  IcAccordionGroup,
-  IcSelect,
-  IcTooltip,
-  IcPopoverMenu,
-  IcMenuItem,
-  IcMenuGroup,
-  IcButton,
-  IcDialog,
-  IcSearchBar,
-  IcTypography,
-} from "../components";
 import readme from "../../../web-components/src/components/ic-accordion/readme.md";
 import * as IcAccordionStories from './ic-accordion.stories';
 
 <Meta of={IcAccordionStories} />
 
-<Description markdown={readme} />
-
-### Default
-
-<Canvas>
-  <Story of={IcAccordionStories.Default} />
-</Canvas>
-
-### Expanded
-
-<Canvas>
-  <Story of={IcAccordionStories.Expanded} />
-</Canvas>
-
-### Icon
-
-<Canvas>
-  <Story of={IcAccordionStories.Icon} />
-</Canvas>
-
-### Group Title
-
-<Canvas>
-  <Story of={IcAccordionStories.GroupTitle} />
-</Canvas>
-
-### Sizes
-
-<Canvas>
-  <Story of={IcAccordionStories.Sizes} />
-</Canvas>
-
-### Single expansion
-
-<Canvas>
-  <Story of={IcAccordionStories.SingleExpansion} />
-</Canvas>
-
-### Light text
-
-<Canvas>
-  <Story of={IcAccordionStories.LightText} />
-</Canvas>
-
-### Parent
-
-<Canvas>
-  <Story of={IcAccordionStories.Parent} />
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story of={IcAccordionStories.Disabled} />
-</Canvas>
-
-### With Popover content
-
-export const PopoverMenu = () => {
-  const [open, setOpen] = useState(false);
-  const buttonClick = () => {
-    setOpen(true);
-  };
-  return (
-    <>
-      <IcButton id="button-1" onClick={buttonClick}>
-        Show popover
-      </IcButton>
-      <IcPopoverMenu anchor="button-1" aria-label="popover" open={open}>
-        <IcMenuItem label="Copy code" disabled />
-        <IcMenuGroup label="View">
-          <IcMenuItem label="Zoom in" keyboardShortcut="Cmd+" />
-          <IcMenuItem label="Zoom out" keyboardShortcut="Cmd-" />
-        </IcMenuGroup>
-        <IcMenuItem label="Actions" submenuTriggerFor="abc" />
-      </IcPopoverMenu>
-      <IcPopoverMenu submenuId="abc">
-        <IcMenuItem label="Edit" />
-        <IcMenuItem label="Find" submenuTriggerFor="abc123" />
-        <IcMenuItem label="Delete" variant="destructive" />
-      </IcPopoverMenu>
-      <IcPopoverMenu submenuId="abc123">
-        <IcMenuItem
-          label="Search the web"
-          description="This will search the web to find the thing you are looking for."
-        />
-        <IcMenuItem label="Find..." />
-        <IcMenuItem label="Find icons">
-          <svg
-            slot="icon"
-            xmlns="http://www.w3.org/2000/svg"
-            height="24px"
-            viewBox="0 0 24 24"
-            width="24px"
-          >
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" />
-          </svg>
-        </IcMenuItem>
-        <IcMenuItem label="Show found results" variant="toggle" />
-      </IcPopoverMenu>
-    </>
-  );
-};
-
-export const Dialog = () => {
-  const dialogEl = useRef();
-  const showDialog = () => {
-    dialogEl.current.showDialog();
-  };
-  return (
-    <>
-      <IcButton onClick={showDialog}>Show Dialog</IcButton>
-      <IcDialog
-        heading="This is a medium dialog"
-        label="medium"
-        size="medium"
-        id="medium-dialog"
-        ref={dialogEl}
-      >
-        <IcAccordionGroup groupTitle="Title of the Accordion Group">
-          <IcAccordion heading="Accordion 1">
-            <svg
-              slot="icon"
-              width="20"
-              height="1em"
-              viewBox="0 0 512 512"
-              fill="currentColor"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
-            </svg>
-            <IcTypography variant="body">
-              This is an example of the main body text
-            </IcTypography>
-          </IcAccordion>
-          <IcAccordion heading="Accordion 2">
-            <svg
-              slot="icon"
-              width="20"
-              height="1em"
-              viewBox="0 0 512 512"
-              fill="currentColor"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z" />
-            </svg>
-            <IcTypography variant="body">
-              This is an example of the main body text
-            </IcTypography>
-            <IcSelect
-              options={[
-                { label: "Cappuccino", value: "Cap" },
-                { label: "Latte", value: "Lat" },
-                { label: "Americano", value: "Ame" },
-              ]}
-              id="select-2"
-              label="What is your favourite coffee?"
-            />
-          </IcAccordion>
-        </IcAccordionGroup>
-      </IcDialog>
-    </>
-  );
-};
-
-<Canvas>
-  <Story of={IcAccordionStories.WithPopoverContent} />
-</Canvas>
-
-### Slotted headings
-
-<Canvas>
-  <Story of={IcAccordionStories.SlottedHeadings} />
-</Canvas>
-
-### Playground
-
-export const defaultArgs = {
-  accessibleButtonLabel: "accordions",
-  appearance: "default",
-  expanded: false,
-  groupTitle: "Accordion group",
-  singleExpansion: false,
-  size: "default",
-  disabled: false,
-  expandedAccordion: false,
-  heading: "Accordion 1",
-  message: "This is an example of the main body text.",
-  sizeAccordion: "default",
-};
+<Markdown>{readme}</Markdown>
 
-<Canvas>
-  <Story of={IcAccordionStories.Playground} />
-</Canvas>
+<Stories />
diff --git a/packages/react/src/stories/ic-accordion.stories.js b/packages/react/src/stories/ic-accordion.stories.js
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable react/jsx-no-bind */
 import React, { useState, useRef } from "react";
 import {
   IcAccordion,
@@ -12,7 +14,6 @@ import {
   IcSearchBar,
   IcTypography,
 } from "../components";
-import readme from "../../../web-components/src/components/ic-accordion/readme.md";
 
 const PopoverMenu = () => {
   const [open, setOpen] = useState(false);