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

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

@@ -3,7 +3,7 @@ import { StorybookConfig } from '@storybook/react-vite';
 const config: StorybookConfig = {
   stories: [
     '../src/**/*.stories.@(js|jsx|ts|tsx|mdx)',
-    '../src/docs/*.mdx',
+    '../src/**/*.mdx',
     '../src/docs/whatsnew/migration-guide/*.mdx',
   ],
   addons: [
@@ -12,6 +12,7 @@ const config: StorybookConfig = {
     '@storybook/addon-interactions',
     '@storybook/addon-styling',
     '@storybook/addon-docs',
+    '@etchteam/storybook-addon-status',
   ],
   framework: {
     name: '@storybook/react-vite',
@@ -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/ovh.theme.ts

@@ -2,13 +2,12 @@ import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'light',
-
   // Brand
   // colorPrimary: '#004FD6',
   // colorSecondary: '#004FD6',
 
   // UI
-  // appBg: '#FF3358',
+  appBg: '#f3fcff',
   appBorderColor: '#004FD6',
   appBorderRadius: 0,
   appContentBg: '#ffffff',

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

@@ -1,11 +1,13 @@
 import React, { Suspense, useEffect } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import '../src/lib.scss';
 import { Preview } from '@storybook/react';
+import './storybook.css';
 import '../src/tailwind/theme.css';
+import '../src/lib.scss';
+import '@ovhcloud/ods-themes/default';
 import i18n from './i18n';
-import './storybook.css';
+import TechnicalInformation from './technical-information.mdx';
 
 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,
+        state: 'open',
       },
+      page: TechnicalInformation,
     },
     actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/,
-      },
+      expanded: true,
+      hideNoControlsWarning: true,
     },
     options: {
       storySort: {
@@ -45,6 +47,9 @@ const preview: Preview = {
       },
       showPanel: true,
     },
+    status: {
+      type: 'stable',
+    },
   },
 };
 

packages/manager-react-components/.storybook/technical-information.mdx

@@ -0,0 +1,25 @@
+import {
+  Title,
+  Subtitle,
+  Description,
+  Primary,
+  Stories,
+  ArgTypes,
+} from '@storybook/addon-docs';
+import { Meta, Story, Canvas } from '@storybook/blocks';
+
+<Title />
+
+<Subtitle />
+
+<Description />
+
+<Canvas sourceState="shown">
+  <Story />
+</Canvas>
+
+## Properties
+
+<ArgTypes />
+
+<Stories />

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"
@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.22.10",
+    "@etchteam/storybook-addon-status": "^5.0.0",
     "@mdx-js/react": "^3.0.1",
     "@ovh-ux/manager-core-api": "^0.9.0",
     "@ovh-ux/manager-react-shell-client": "^0.8.2",

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,13 +1,15 @@
 import React, { useState } from 'react';
 import { ColumnSort } from '@tanstack/react-table';
+import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
 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';
+import { ActionMenu } from '../navigation';
 
 interface Item {
   label: string;
   price: number;
+  actions: React.ReactElement;
 }
 
 const columns = [
@@ -27,19 +29,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),
@@ -48,59 +43,104 @@ 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}
-        onFetchNextPage={fetchNextPage}
-        {...(isSortable
-          ? {
-              sorting,
-              onSortChange: setSorting,
-              manualSorting: false,
-            }
-          : {})}
-      />
-    </>
+    <Datagrid
+      items={data}
+      columns={args.columns}
+      hasNextPage={data?.length > 0 && data.length < 30}
+      onFetchNextPage={fetchNextPage}
+      totalItems={data?.length}
+      {...(args.isSortable
+        ? {
+            sorting,
+            onSortChange: setSorting,
+            manualSorting: false,
+          }
+        : {})}
+    />
   );
 };
 
-export const Empty: any = {
-  args: {
-    items: [],
-  },
+export const Basic = DatagridStory.bind({});
+
+Basic.args = {
+  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,
+  items: [],
+};
+
+export const Sortable = DatagridStory.bind({});
+
+Sortable.args = {
+  columns,
+  items: [...Array(10).keys()].map((_, i) => ({
+    label: `Item #${i}`,
+    price: Math.floor(1 + Math.random() * 100),
+  })),
+  isSortable: true,
+};
+
+const actionsColumns = {
+  id: 'actions',
+  cell: (item: Item) => {
+    return item.actions;
   },
+  label: '',
 };
 
-export const Sortable = {
-  args: {
-    items: [...Array(10).keys()].map((_, i) => ({
-      label: `Item #${i}`,
+export const WithActions = DatagridStory.bind({});
+
+WithActions.args = {
+  columns: [...columns, actionsColumns],
+  items: [...Array(8).keys()].map((_, i) => {
+    return {
+      label: `Service #${i}`,
       price: Math.floor(1 + Math.random() * 100),
-    })),
-    isSortable: true,
-  },
+      actions: (
+        <div className="flex items-center justify-center">
+          <div>
+            <ActionMenu
+              isCompact={true}
+              variant={ODS_BUTTON_VARIANT.ghost}
+              id={i.toString()}
+              items={[
+                {
+                  id: 1,
+                  target: '_blank',
+                  label: 'Action 1',
+                  urn: 'urn:v9:eu:resource:manatestkds-fdsfsd',
+                  iamActions: ['vrackServices:apiovh:iam/resource/update'],
+                },
+                {
+                  id: 2,
+                  target: '_blank',
+                  label: 'Action 2',
+                  urn: 'urn:v9:eu:resource:manate',
+                  iamActions: ['vrackServices:apiovh:iam/resource/delete'],
+                },
+              ]}
+            />
+          </div>
+        </div>
+      ),
+    };
+  }),
+  isSortable: true,
 };
 
 export default {
   title: 'Components/Datagrid Cursor',
-  component: DatagridStory,
+  component: Datagrid,
   decorators: [withRouter],
 };