fix(manager-react-components): storybook documentation auto generate

ref: MANAGER-15088

Signed-off-by: Alex Boungnaseng <[email protected]>

packages/manager-react-components/.storybook/CustomDocsPage.mdx

@@ -0,0 +1,24 @@
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  ArgsTable,
+  Stories,
+} from '@storybook/addon-docs';
+
+<div>
+  <Title />
+</div>
+
+<Subtitle />
+
+<Description />
+
+<Primary />
+
+## Properties
+
+<ArgsTable />
+
+<Stories />

packages/manager-react-components/.storybook/main.ts

@@ -4,6 +4,7 @@ const config: StorybookConfig = {
   stories: [
     '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
     '../src/docs/*.mdx',
+    '../src/**/*.mdx',
     '../src/docs/whatsnew/migration-guide/*.mdx',
   ],
   addons: [
@@ -22,7 +23,11 @@ const config: StorybookConfig = {
     },
   },
   docs: {
-    autodocs: 'tag',
+    autodocs: true,
+    defaultName: 'Technical information',
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript', // Necessary for extracting TypeScript types
   },
 };
 export default config;

packages/manager-react-components/.storybook/preview.tsx

@@ -6,6 +6,8 @@ import { Preview } from '@storybook/react';
 import '../src/tailwind/theme.css';
 import i18n from './i18n';
 import './storybook.css';
+import CustomDocsPage from './CustomDocsPage.mdx';
+import { themes } from '@storybook/theming';
 
 const mockQueryClient = new QueryClient({
   defaultOptions: {
@@ -21,19 +23,19 @@ const preview: Preview = {
     docs: {
       toc: {
         contentsSelector: '.sbdocs-content',
-        headingSelector: 'h2, h3',
+        headingSelector: 'h1, h2, h3',
         disable: false,
       },
       source: {
         excludeDecorators: true,
       },
+      page: CustomDocsPage,
+      theme: themes.light,
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
+      expanded: true,
+      hideNoControlsWarning: true,
     },
     options: {
       storySort: {

packages/manager-react-components/package.json

@@ -24,7 +24,7 @@
     "build:storybook": "storybook build",
     "prepare": "tsc && vite build",
     "prettier": "prettier --write \"src/**/*.{ts,tsx,js,mdx}\"",
-    "start": "storybook dev -p 6006",
+    "start": "rm -rf dist/.cache/storybook && storybook dev -p 6006",
     "test": "vitest run",
     "test:cov": "vitest run --coverage",
     "test:watch": "vitest"

packages/manager-react-components/src/components/ManagerButton/ManagerButton.stories.tsx

@@ -13,6 +13,14 @@ export const Default = {
 const managerSimpleButton: Meta<ManagerButtonProps> = {
   title: 'Components/Manager Button',
   component: ManagerButton,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The `ManagerButton` component is used to trigger an action or event.',
+      },
+    },
+  },
 };
 
 export default managerSimpleButton;

packages/manager-react-components/src/components/datagrid/datagrid-cursor.stories.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { ColumnSort } from '@tanstack/react-table';
 import { withRouter } from 'storybook-addon-react-router-v6';
-import { useSearchParams } from 'react-router-dom';
 import { Datagrid } from './datagrid.component';
 import { DataGridTextCell } from './text-cell.component';
 
@@ -27,19 +26,12 @@ const columns = [
   },
 ];
 
-const DatagridStory = ({
-  items,
-  isSortable,
-}: {
-  items: Item[];
-  isSortable: boolean;
-}) => {
+const DatagridStory = (args) => {
   const [sorting, setSorting] = useState<ColumnSort>();
-  const [data, setData] = useState(items);
-  const [searchParams] = useSearchParams();
+  const [data, setData] = useState(args.items);
 
   const fetchNextPage = () => {
-    const itemsIndex = data.length;
+    const itemsIndex = data?.length;
     const tmp = [...Array(10).keys()].map((_, i) => ({
       label: `Item #${i + itemsIndex}`,
       price: Math.floor(1 + Math.random() * 100),
@@ -49,19 +41,13 @@ const DatagridStory = ({
 
   return (
     <>
-      {`${searchParams}` && (
-        <>
-          <pre>Search params: ?{`${searchParams}`}</pre>
-          <hr />
-        </>
-      )}
       <Datagrid
         columns={columns}
         items={data}
-        totalItems={data.length}
-        hasNextPage={data.length > 0 && data.length < 30}
+        totalItems={data?.length}
+        hasNextPage={data?.length > 0 && data.length < 30}
         onFetchNextPage={fetchNextPage}
-        {...(isSortable
+        {...(args.isSortable
           ? {
               sorting,
               onSortChange: setSorting,
@@ -73,34 +59,39 @@ const DatagridStory = ({
   );
 };
 
-export const Empty: any = {
-  args: {
-    items: [],
-  },
+export const Basic = DatagridStory.bind({});
+
+Basic.args = {
+  columns: columns,
+  items: [...Array(10).keys()].map((_, i) => ({
+    label: `Item #${i}`,
+    price: Math.floor(1 + Math.random() * 100),
+  })),
+  totalItems: 20,
+  isSortable: false,
+  onFetchNextPage: true,
 };
 
-export const Basic = {
-  args: {
-    items: [...Array(10).keys()].map((_, i) => ({
-      label: `Item #${i}`,
-      price: Math.floor(1 + Math.random() * 100),
-    })),
-    isSortable: false,
-  },
+export const Empty = DatagridStory.bind({});
+
+Empty.args = {
+  columns: columns,
+  items: [],
 };
 
-export const Sortable = {
-  args: {
-    items: [...Array(10).keys()].map((_, i) => ({
-      label: `Item #${i}`,
-      price: Math.floor(1 + Math.random() * 100),
-    })),
-    isSortable: true,
-  },
+export const Sortable = DatagridStory.bind({});
+
+Sortable.args = {
+  columns: columns,
+  items: [...Array(10).keys()].map((_, i) => ({
+    label: `Item #${i}`,
+    price: Math.floor(1 + Math.random() * 100),
+  })),
+  isSortable: true,
 };
 
 export default {
   title: 'Components/Datagrid Cursor',
-  component: DatagridStory,
+  component: Datagrid,
   decorators: [withRouter],
 };

packages/manager-react-components/src/components/datagrid/datagrid.stories.tsx

@@ -84,44 +84,38 @@ const DatagridStory = ({
   );
 };
 
-export const Empty: any = {
-  args: {
-    items: [],
-  },
-};
+export const Basic = DatagridStory.bind({});
 
-export const Basic = {
-  args: {
-    items: [...Array(15).keys()].map((_, i) => ({
-      label: `Item #${i}`,
-      price: Math.floor(1 + Math.random() * 100),
-    })),
-  },
+Basic.args = {
+  columns: columns,
+  items: [...Array(50).keys()].map((_, i) => ({
+    label: `Item #${i}`,
+    price: Math.floor(1 + Math.random() * 100),
+  })),
+  isPaginated: true,
+  isSortable: true,
 };
 
-export const Sortable = {
-  args: {
-    items: [...Array(15).keys()].map((_, i) => ({
-      label: `Item #${i}`,
-      price: Math.floor(1 + Math.random() * 100),
-    })),
-    isSortable: true,
-  },
+export const Empty = DatagridStory.bind({});
+
+Empty.args = {
+  columns: columns,
+  items: [],
 };
 
-export const Pagination = {
-  args: {
-    items: [...Array(50).keys()].map((_, i) => ({
-      label: `Item #${i}`,
-      price: Math.floor(1 + Math.random() * 100),
-    })),
-    isPaginated: true,
-    isSortable: true,
-  },
+export const Sortable = DatagridStory.bind({});
+
+Sortable.args = {
+  columns: columns,
+  items: [...Array(10).keys()].map((_, i) => ({
+    label: `Item #${i}`,
+    price: Math.floor(1 + Math.random() * 100),
+  })),
+  isSortable: true,
 };
 
 export default {
   title: 'Components/Datagrid Paginated',
-  component: DatagridStory,
+  component: Datagrid,
   decorators: [withRouter],
 };

packages/manager-react-components/src/docs/introduction.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import { Links, LinkType } from './../index.ts';
-import { version, dependencies } from './../../package.json';
+import { version, devDependencies } from './../../package.json';
 
 <Meta title="Manager React Components/Introduction" />
 
@@ -19,7 +19,7 @@ import { version, dependencies } from './../../package.json';
 <div>
   <Links
     type={LinkType.external}
-    label={`@ovhcloud/ods-components and @ovhcloud/ods-themes version ${dependencies['@ovhcloud/ods-components']}`}
+    label={`@ovhcloud/ods-components and @ovhcloud/ods-themes version ${devDependencies['@ovhcloud/ods-components']}`}
     href="https://ovh.github.io/design-system/v18.3.0/?path=/docs/ovhcloud-design-system-welcome--docs"
     target="_blank"
   />