refactor(doc): update DocNavigator in a more React way

ovh · Jul 29, 2024 · 08f070d · 08f070d
1 parent f133420
commit 08f070d
Showing 3 changed files with 50 additions and 56 deletions.
diff --git a/packages/storybook/stories/components/table/documentation.mdx b/packages/storybook/stories/components/table/documentation.mdx
@@ -1,6 +1,7 @@
 import { Canvas, Meta, Markdown } from '@storybook/blocks';
 import SpecificationsTable from '@ovhcloud/ods-components/src/components/table/documentation/spec.md?raw';
-import { Banner } from '../../Banner';
+import { Banner } from '../../banner';
+import { DocNavigator } from '../../doc-navigator';
 import * as TableStories from './table.stories';
 
 <Meta of={ TableStories } name='Documentation' />
@@ -13,13 +14,7 @@ Table is a wrapper for displaying tables:
 
 <Canvas of={ TableStories.Default } sourceState='none' />
 
-<div>
-  <osds-button color="primary" variant="ghost" href="https://zeroheight.com/6fc8a63f7/p/82b71b-link/b/40a887" target="_blank">
-    ZEROHEIGHT - TABLE DESIGN GUIDELINES  
-
-    <osds-icon name="external-link" color="primary" size="xs" />
-  </osds-button>
-</div>
+<DocNavigator of={ TableStories } />
 
 # API
 

diff --git a/packages/storybook/stories/doc-navigator.tsx b/packages/storybook/stories/doc-navigator.tsx
@@ -3,57 +3,56 @@ import { type ModuleExports } from '@storybook/types';
 import { navigate } from '@storybook/addon-links';
 import { OdsButton, OdsLink } from '@ovhcloud/ods-components-react';
 import { ODS_BUTTON_VARIANT, ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import React, { useEffect, useState } from 'react';
 import { BASE_URL, LINK_ID } from './zeroheight';
-import React from 'react';
 
-export const DocNavigator = ({ of, children }: { of: ModuleExports, children: React.ReactNode }) => {
+function extractLinkId(storyId: string): string | null {
+  for (const id of Object.values(LINK_ID)) {
+    const idPart = id.split('-');
+    const componentPart = idPart.slice(1).join('-');
+
+    if (storyId.includes(componentPart)) {
+      return id;
+    }
+  }
+  return null;
+}
+
+const DocNavigator = ({ of }: { of: ModuleExports }) => {
   const resolvedOf = useOf(of || 'story', ['meta']);
-  const demoStoryKeys = Object.keys(resolvedOf.csfFile.stories || {}).filter(storyKey => storyKey.includes('--demo'));
-
-  const extractLinkId = (storyId: string): string | null => {
-    for (const id of Object.values(LINK_ID)) {
-      const idPart = id.split('-');
-      const componentPart = idPart.slice(1).join('-');
-      if (storyId.includes(componentPart)) {
-        return id;
-      }
+  const [href, setHref] = useState('');
+  const [storyId, setStoryId] = useState('');
+
+  useEffect(() => {
+    const demoStoryKeys = Object.keys(resolvedOf.csfFile.stories || {}).filter((storyKey) => storyKey.includes('--demo'));
+    const storyId = demoStoryKeys[0];
+    const linkId = extractLinkId(storyId);
+
+    setStoryId(storyId);
+
+    if (linkId) {
+      setHref(`${BASE_URL}${linkId}/b/40a887`);
+    } else {
+      console.error('No Zeroheight link id matching storyId', storyId);
     }
-    return null;
-  };
+  }, [extractLinkId]);
 
   return (
-    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
-      <div>
-        {demoStoryKeys.map((storyId, index) => (
-          <OdsButton
-            key={index}
-            label='Go to Demo'
-            variant={ODS_BUTTON_VARIANT.default}
-            onClick={() => {
-              navigate({ storyId })
-            }}
-          >
-          </OdsButton>
-        ))}
-      </div>
-      <div style={{ marginLeft: '20px' }}>
-        <OdsLink
-          label='Go to functional specification'
-          icon={ODS_ICON_NAME.externalLink}
-          onClick={() => {
-            const storyId = demoStoryKeys[0];
-            const linkId = extractLinkId(storyId);
-
-            if (linkId) {
-              const externalLink = `${BASE_URL}${linkId}/b/40a887`;
-              window.open(externalLink);
-            } else {
-              console.error('No Zeroheight link id matching storyId', storyId);
-            }
-          }}
-        />
-      </div>
-      {children}
+    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', columnGap: '20px' }}>
+      <OdsButton
+        label="Go to Demo"
+        onClick={ () => navigate({ storyId }) }
+        variant={ ODS_BUTTON_VARIANT.default } />
+
+      <OdsLink
+        href={ href }
+        icon={ ODS_ICON_NAME.externalLink }
+        label="Go to functional specification"
+        target="_blank" />
     </div>
   )
-}
+};
+
+export {
+  DocNavigator,
+};
diff --git a/packages/storybook/stories/zeroheight.ts b/packages/storybook/stories/zeroheight.ts
@@ -31,10 +31,10 @@ enum LINK_ID {
   SEARCH_BAR = '278044-search-bar',
   SELECT = '998d9e-select',
   SKELETON = '63ed1a-skeleton',
-  TABLE = '006dd8-table',
-  TAG = '638284-tag',
   SPINNER = '9017bb-spinner',
+  TABLE = '006dd8-table',
   TABS = '69e950-tabs',
+  TAG = '638284-tag',
   TEXT = '5546ea-text',
   TEXTAREA = '708cf6-textarea',
   TILE = '275b24-tile',