Merge pull request #3246 from mi6/cherry-pick-storybook-docs

Cherry pick storybook docs
mi6 · Feb 24, 2025 · 9db9933 · 9db9933
2 parents e08fa20 + 62bb763
commit 9db9933
Show file tree

Hide file tree

Showing 126 changed files with 554 additions and 7,551 deletions.
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
@@ -1,12 +1,17 @@
 module.exports = {
   core: {
-    disableTelemetry: true
+    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: [
@@ -17,40 +22,40 @@ module.exports = {
     "@storybook/addon-mdx-gfm",
     "storybook-addon-performance",
     "@storybook/addon-webpack5-compiler-babel",
-    "@storybook/addon-docs"
+    "@storybook/addon-docs",
   ],
   framework: {
     name: "@storybook/react-webpack5",
-    options: {}
-  },
-  docs: {
-    autodocs: true,
+    options: {},
   },
+  docs: {},
   typescript: {
     reactDocgen: "react-docgen-typescript",
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
       propFilter: (prop) => {
         if (prop.parent) {
-          return !prop.parent.fileName.includes('node_modules');
+          return !prop.parent.fileName.includes("node_modules");
         }
         return true;
-      }
-    }
+      },
+    },
   },
   webpackFinal: async (config) => {
-    config.module.rules.push(
-      {
-        test: /\.(js|jsx|ts|tsx)$/,
-        exclude: /node_modules/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript']
-          }
-        }
+    config.module.rules.push({
+      test: /\.(js|jsx|ts|tsx)$/,
+      exclude: /node_modules/,
+      use: {
+        loader: "babel-loader",
+        options: {
+          presets: [
+            "@babel/preset-env",
+            "@babel/preset-react",
+            "@babel/preset-typescript",
+          ],
+        },
       },
-    );
+    });
     return config;
-  }
-};
+  },
+};
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 import "@ukic/fonts/dist/fonts.css";
 import "ag-grid-community/styles/ag-grid.css";
@@ -7,40 +7,46 @@ import "../dist/core/core.css";
 import "../dist/core/normalize.css";
 import "./storybook-overrides.css";
 
-import { withPerformance } from 'storybook-addon-performance';
+import { withPerformance } from "storybook-addon-performance";
 import { IcTheme } from "../src/components";
 
 const preview = {
   parameters: {
     controls: {
-        matchers: {
+      matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
-      hideNoControlsWarning: true
+      hideNoControlsWarning: true,
     },
   },
 
   globalTypes: {
     theme: {
-      description: 'Global theme for components',
+      description: "Global theme for components",
       toolbar: {
-        title: 'Theme',
-        icon: 'paintbrush',
-        items: [{value: 'light', title: 'Light mode', left: '☀️'}, {value:'dark', title: 'Dark mode', left: '🌙'}],
+        title: "Theme",
+        icon: "paintbrush",
+        items: [
+          { value: "light", title: "Light mode", left: "☀️" },
+          { value: "dark", title: "Dark mode", left: "🌙" },
+        ],
         dynamicTitle: true,
       },
     },
   },
 
   initialGlobals: {
-    theme: 'light',
+    theme: "light",
   },
 
   decorators: [
     (story, context) => {
       const selectedTheme = context.globals.theme || "light";
-      const backgroundColor = selectedTheme === 'dark' ? 'var(--ic-color-background-primary-dark)' : 'var(--ic-color-background-primary-light)';
+      const backgroundColor =
+        selectedTheme === "dark"
+          ? "var(--ic-color-background-primary-dark)"
+          : "var(--ic-color-background-primary-light)";
       return (
         <>
           <style>
@@ -50,18 +56,12 @@ const preview = {
               }
             `}
           </style>
-          <IcTheme 
-            theme={selectedTheme}
-          >
-            {story()}
-          </IcTheme>
+          <IcTheme theme={selectedTheme}>{story()}</IcTheme>
         </>
       );
     },
-    withPerformance
+    withPerformance,
   ],
-
-  tags: ['autodocs']
 };
 
 export default preview;
diff --git a/packages/react/src/stories/ic-accordion.mdx b/packages/react/src/stories/ic-accordion.mdx
@@ -1,108 +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>
-
-### Parent
-
-<Canvas>
-  <Story of={IcAccordionStories.Parent} />
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story of={IcAccordionStories.Disabled} />
-</Canvas>
-
-### With Popover content
-
-<Canvas>
-  <Story of={IcAccordionStories.WithPopoverContent} />
-</Canvas>
-
-### Slotted headings
-
-<Canvas>
-  <Story of={IcAccordionStories.SlottedHeadings} />
-</Canvas>
-
-### Playground
-
-export const defaultArgs = {
-  accessibleButtonLabel: "accordions",
-  expanded: false,
-  label: "Accordion group",
-  singleExpansion: false,
-  size: "medium",
-  disabled: false,
-  heading: "Accordion 1",
-  message: "This is an example of the main body text.",
-  theme: "inherit",
-  expandedAccordion: false,
-  sizeAccordion: "medium",
-  themeAccordion: "inherit",
-};
+<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,4 +1,7 @@
-import React, { useRef, useState } from "react";
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+/* eslint-disable react/jsx-no-bind */
+import React, { useState, useRef } from "react";
 import {
   IcAccordion,
   IcAccordionGroup,

diff --git a/packages/react/src/stories/ic-alert.mdx b/packages/react/src/stories/ic-alert.mdx
@@ -1,99 +1,13 @@
 import {
   Meta,
-  Story,
-  Canvas,
-  Controls,
-  Description,
+  Stories,
+  Markdown
 } from "@storybook/blocks";
-import { IcAlert, IcLink, IcButton } from "../components";
 import readme from "../../../web-components/src/components/ic-alert/readme.md";
-import { SlottedSVG } from "../react-component-lib/slottedSVG";
 import * as IcAlertStories from './ic-alert.stories';
 
 <Meta of={IcAlertStories} />
 
-<Description markdown={readme} />
+<Markdown>{readme}</Markdown>
 
-export const defaultArgs = {
-  dismissible: false,
-  heading: "Heading",
-  message: "Message",
-  titleAbove: false,
-  variant: "neutral",
-  showAction: false,
-  showDefaultIcon: true,
-  showSlottedIcon: false,
-  theme: "inherit",
-};
-
-### Variants
-
-<Canvas>
-  <Story of={IcAlertStories.Variants} />
-</Canvas>
-
-### Message only
-
-<Canvas>
-  <Story of={IcAlertStories.MessageOnly} />
-</Canvas>
-
-### Dismissible
-
-<Canvas>
-  <Story of={IcAlertStories.Dismissible} />
-</Canvas>
-
-### With action
-
-<Canvas>
-  <Story of={IcAlertStories.WithAction} />
-</Canvas>
-
-### Dismissible with action
-
-<Canvas>
-  <Story of={IcAlertStories.DismissibleWithAction} />
-</Canvas>
-
-### Title above
-
-<Canvas>
-  <Story of={IcAlertStories.TitleAbove} />
-</Canvas>
-
-### Responsive title
-
-<Canvas>
-  <Story of={IcAlertStories.ResponsiveTitle} />
-</Canvas>
-
-### Custom message
-
-<Canvas>
-  <Story of={IcAlertStories.CustomMessage} />
-</Canvas>
-
-### Custom message and title above
-
-<Canvas>
-  <Story of={IcAlertStories.CustomMessageAndTitleAbove} />
-</Canvas>
-
-### Slotted icon
-
-<Canvas>
-  <Story of={IcAlertStories.SlottedIcon} />
-</Canvas>
-
-### No icon
-
-<Canvas>
-  <Story of={IcAlertStories.NoIcon} />
-</Canvas>
-
-### Playground
-
-<Canvas>
-  <Story of={IcAlertStories.Playground} />
-</Canvas>
+<Stories />
diff --git a/packages/react/src/stories/ic-alert.stories.js b/packages/react/src/stories/ic-alert.stories.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import React from "react";
 import { IcAlert, IcButton, IcLink, IcTypography } from "../components";
 import { SlottedSVG } from "../react-component-lib/slottedSVG";