feat(manager-wiki): display properties on technical informations

ref: #MANAGER-19982

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

Author: aboungnaseng-ovhcloud

packages/manager-wiki/.storybook/main.tsx

@@ -33,7 +33,18 @@ const config: StorybookConfig = {
     reactDocgenTypescriptOptions: {
       shouldExtractLiteralValuesFromEnum: true,
       shouldRemoveUndefinedFromOptional: true,
-      propFilter: () => true, // ← include all props, even from node_modules
+      compilerOptions: {
+        allowSyntheticDefaultImports: true,
+        esModuleInterop: true,
+      },
+      propFilter: (prop) => {
+        // Include all props from our components
+        if (prop.parent) {
+          // Exclude props from node_modules except from our components
+          return !prop.parent.fileName.includes('node_modules');
+        }
+        return true;
+      },
     },
     check: false,
   },

packages/manager-wiki/.storybook/preview.tsx

@@ -40,7 +40,11 @@ const preview: Preview = {
       },
       source: {
         excludeDecorators: true,
-        state: 'open',
+        state: 'shown',
+        type: 'dynamic',
+      },
+      canvas: {
+        sourceState: 'shown',
       },
       page: TechnicalInformation,
     },
@@ -88,7 +92,7 @@ const preview: Preview = {
   },
 };
 
-const withI18next = (Story, context) => {
+const withI18next = (story, context) => {
   const { locale } = context.globals;
   const [isLoading, setIsLoading] = useState(true);
 
@@ -107,6 +111,7 @@ const withI18next = (Story, context) => {
           setIsLoading(false);
         }
       } catch (error) {
+        // eslint-disable-next-line no-console
         console.error('Language change failed:', error);
         if (isMounted) {
           setIsLoading(false);
@@ -124,15 +129,15 @@ const withI18next = (Story, context) => {
   useEffect(() => {
     const handleBrowserLanguageChange = () => {
       const normalizedLang = normalizeLanguageCode(navigator.language);
+      // eslint-disable-next-line no-console
       console.info('Browser language changed:', normalizedLang);
-      i18n
-        .changeLanguage(normalizedLang)
-        .catch((err) =>
-          console.error(
-            'Failed to change language on system languagechange:',
-            err,
-          ),
+      i18n.changeLanguage(normalizedLang).catch((err) => {
+        // eslint-disable-next-line no-console
+        console.error(
+          'Failed to change language on system languagechange:',
+          err,
         );
+      });
     };
 
     window.addEventListener('languagechange', handleBrowserLanguageChange);
@@ -146,11 +151,13 @@ const withI18next = (Story, context) => {
     return <div>Loading translations...</div>;
   }
 
+  const StoryComponent = story;
+
   return (
     <Suspense fallback={<div>loading translations...</div>}>
       <I18nextProvider i18n={i18n}>
         <QueryClientProvider client={mockQueryClient}>
-          <Story />
+          <StoryComponent />
         </QueryClientProvider>
       </I18nextProvider>
     </Suspense>

packages/manager-wiki/.storybook/technical-information.mdx

@@ -5,6 +5,8 @@ import {
   Primary,
   Stories,
   ArgTypes,
+  Source,
+  Controls,
 } from '@storybook/addon-docs';
 import { Meta, Story, Canvas } from '@storybook/blocks';
 
@@ -14,12 +16,18 @@ import { Meta, Story, Canvas } from '@storybook/blocks';
 
 <Description />
 
-<Canvas sourceState="shown">
-  <Story />
-</Canvas>
+## Basic Usage
 
-## Properties
+<Primary />
 
-<ArgTypes />
+## API Reference
+
+### Props
+
+<Controls />
+
+## Code Examples
+
+All examples below include their source code for easy copy-paste:
 
 <Stories />

packages/manager-wiki/package.json

@@ -16,11 +16,14 @@
     "@ovh-ux/muk": "^0.0.1",
     "@ovhcloud/ods-react": "^19.0.1",
     "@ovhcloud/ods-themes": "^19.0.1",
+    "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-table": "^8.10.0",
     "clsx": "^2.1.1",
+    "i18next": "^23.0.0",
     "lz-string": "^1.5.0",
     "react": "^18.2.0",
     "react-docgen": "^8.0.2",
+    "react-i18next": "^14.0.0",
     "react-router-dom": "^6.3.0",
     "sass": "1.56.1",
     "tailwindcss": "^3.4.4",

packages/manager-wiki/stories/manager-ui-kit/components/Breadcrumb/breadcrumb.stories.tsx

@@ -23,6 +23,18 @@ Basic.args = {
   hideRootLabel: false,
 };
 
+Basic.parameters = {
+  docs: {
+    source: {
+      code: `<Breadcrumb 
+  rootLabel="vRack Services"
+  appName="vrack-services"
+  hideRootLabel={false}
+/>`,
+    },
+  },
+};
+
 export const HideRootLabel = BreadcrumbStory.bind({});
 
 HideRootLabel.args = {
@@ -31,9 +43,22 @@ HideRootLabel.args = {
   hideRootLabel: true,
 };
 
+HideRootLabel.parameters = {
+  docs: {
+    source: {
+      code: `<Breadcrumb 
+  rootLabel="vRack Services"
+  appName="vrack-services"
+  hideRootLabel={true}
+/>`,
+    },
+  },
+};
+
 export default {
   title: 'Manager UI Kit/Components/Breadcrumb',
   component: Breadcrumb,
+  tags: ['autodocs'],
   decorators: [withRouter],
   parameters: {
     docs: {

packages/manager-wiki/stories/manager-ui-kit/components/Clipboard/clipboard.stories.tsx

@@ -4,6 +4,7 @@ import { Clipboard } from '@ovh-ux/muk';
 const meta: Meta<typeof Clipboard> = {
   title: 'Manager UI Kit/Components/Clipboard',
   component: Clipboard,
+  tags: ['autodocs'],
 };
 
 type Story = StoryObj<typeof Clipboard>;
@@ -15,27 +16,64 @@ export const regular: Story = {
     loading: false,
     masked: false,
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Clipboard value="Value to copy to clipboard" />`,
+      },
+    },
+  },
 };
 
 export const disabled: Story = {
   args: {
     value: 'Disabled clipboard',
     disabled: true,
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Clipboard 
+  value="Disabled clipboard" 
+  disabled={true} 
+/>`,
+      },
+    },
+  },
 };
 
 export const loading: Story = {
   args: {
     value: '',
     loading: true,
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Clipboard 
+  value="" 
+  loading={true} 
+/>`,
+      },
+    },
+  },
 };
 
 export const masked: Story = {
   args: {
     value: 'Secret Data',
     masked: true,
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Clipboard 
+  value="Secret Data" 
+  masked={true} 
+/>`,
+      },
+    },
+  },
 };
 
 export default meta;

packages/manager-wiki/stories/manager-ui-kit/components/Datagrid/datagrid.stories.tsx

@@ -438,6 +438,7 @@ FullFooter.args = {
 const meta = {
   title: 'Manager UI Kit/Components/Datagrid New',
   component: Datagrid,
+  tags: ['autodocs'],
   decorators: [withRouter],
   parameters: {
     docs: {

packages/manager-wiki/stories/manager-ui-kit/components/Drawer/Drawer.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Meta } from '@storybook/react';
 import { Button } from '@ovh-ux/muk';
+import { DrawerBase } from '@ovh-ux/muk/src/components/drawer/drawer-base/DrawerBase.component';
 import { DrawerContent } from './DrawerContent.component';
 import { Content } from './mocks/Content.component';
 import {
@@ -11,6 +12,8 @@ import {
 
 const meta = {
   title: 'Manager UI Kit/Components/Drawer',
+  component: DrawerBase,
+  tags: ['autodocs'],
   args: {
     isOpen: false,
     isLoading: false,
@@ -38,7 +41,6 @@ const meta = {
     const [isOpen, setIsOpen] = useState(args.isOpen);
     const triggerDrawer = () => setIsOpen(!isOpen);
 
-    console.info('isOpen', isOpen);
     const title = args.title as string;
     return (
       <>
@@ -49,7 +51,9 @@ const meta = {
           <DrawerCollapsibleComposed
             {...args}
             isOpen={isOpen}
-            onDismiss={() => alert('dismiss')}
+            onDismiss={() => {
+              // Dismiss action
+            }}
             primaryButton={{
               ...args.primaryButton,
               onClick: triggerDrawer,
@@ -88,6 +92,31 @@ export const Default: Meta<DrawerComposedProps> = {
     children: <div>Children drawer story</div>,
     content: <DrawerContent size="short" />,
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer.Root 
+  isOpen={isOpen}
+  onDismiss={handleDismiss}
+>
+  <Drawer.Header title="Classic Drawer" />
+  <Drawer.Content>
+    <div>Your drawer content here</div>
+  </Drawer.Content>
+  <Drawer.Footer
+    primaryButton={{
+      label: 'Confirm',
+      onClick: handleConfirm,
+    }}
+    secondaryButton={{
+      label: 'Cancel',
+      onClick: handleCancel,
+    }}
+  />
+</Drawer.Root>`,
+      },
+    },
+  },
 };
 
 export const ScrollableContent: Meta<DrawerComposedProps> = {
@@ -97,6 +126,31 @@ export const ScrollableContent: Meta<DrawerComposedProps> = {
     children: <div>Children scrollable drawer story</div>,
     content: <DrawerContent size="long" />,
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer.Root 
+  isOpen={isOpen}
+  onDismiss={handleDismiss}
+>
+  <Drawer.Header title="Scrollable Content" />
+  <Drawer.Content>
+    <div>Long scrollable content here...</div>
+  </Drawer.Content>
+  <Drawer.Footer
+    primaryButton={{
+      label: 'Confirm',
+      onClick: handleConfirm,
+    }}
+    secondaryButton={{
+      label: 'Cancel',
+      onClick: handleCancel,
+    }}
+  />
+</Drawer.Root>`,
+      },
+    },
+  },
 };
 
 export const Collapsible: Meta<DrawerComposedProps> = {
@@ -106,4 +160,29 @@ export const Collapsible: Meta<DrawerComposedProps> = {
     children: <div>Children Collapsible drawer story</div>,
     content: <DrawerContent size="short" />,
   },
+  parameters: {
+    docs: {
+      source: {
+        code: `<Drawer.RootCollapsible 
+  isOpen={isOpen}
+  onDismiss={handleDismiss}
+>
+  <Drawer.Header title="Collapsible Drawer" />
+  <Drawer.Content>
+    <div>Your drawer content here</div>
+  </Drawer.Content>
+  <Drawer.Footer
+    primaryButton={{
+      label: 'Confirm',
+      onClick: handleConfirm,
+    }}
+    secondaryButton={{
+      label: 'Cancel',
+      onClick: handleCancel,
+    }}
+  />
+</Drawer.RootCollapsible>`,
+      },
+    },
+  },
 };