From bdb847a6eb878895bf0cea41ce678c6a4f1a0a46 Mon Sep 17 00:00:00 2001
From: Alireza <ar.sedghi@gmail.com>
Date: Tue, 22 Apr 2025 10:45:14 -0400
Subject: [PATCH] fix docs (#4988)

---
 platform/docs/src/pages/components-list.tsx   |  14 +-
 .../pages/components/AllinOneMenuShowcase.tsx | 274 +++++++++---------
 .../pages/components/CinePlayerShowcase.tsx   |  64 ++--
 .../src/pages/components/TooltipShowcase.tsx  |  50 ++--
 4 files changed, 212 insertions(+), 190 deletions(-)

diff --git a/platform/docs/src/pages/components-list.tsx b/platform/docs/src/pages/components-list.tsx
index efaae8a44..4549e049b 100644
--- a/platform/docs/src/pages/components-list.tsx
+++ b/platform/docs/src/pages/components-list.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import '../css/custom.css';
 import Layout from '@theme/Layout';
-import { TooltipProvider } from '../../../ui-next/src/components/Tooltip';
+import { TooltipProvider } from '../../../../platform/ui-next/src/components/Tooltip';
 
 // Navigation card components
-import { Card, CardHeader, CardTitle, CardDescription } from '../../../ui-next/src/components/Card';
-import { Icons } from '../../../ui-next/src/components/Icons';
+import { Card, CardHeader, CardTitle, CardDescription } from '../../../../platform/ui-next/src/components/Card';
+import { Icons } from '../../../../platform/ui-next/src/components/Icons';
 
 /* Showcase components (alphabetical) */
-import AllinOneMenuShowcase from './components/AllinOneMenuShowcase';
+// import AllinOneMenuShowcase from './components/AllinOneMenuShowcase';
 import ButtonShowcase from './components/ButtonShowcase';
 import CheckboxShowcase from './components/CheckboxShowcase';
-import CinePlayerShowcase from './components/CinePlayerShowcase';
+// import CinePlayerShowcase from './components/CinePlayerShowcase';
 import ComboboxShowcase from './components/ComboboxShowcase';
 import DataRowShowcase from './components/DataRowShowcase';
 import DialogShowcase from './components/DialogShowcase';
@@ -98,10 +98,10 @@ export default function ComponentsList() {
 
             <h1 className="text-foreground ml-6 mb-6 text-5xl">Components</h1>
 
-            <AllinOneMenuShowcase />
+            {/* <AllinOneMenuShowcase /> */}
             <ButtonShowcase />
             <CheckboxShowcase />
-            <CinePlayerShowcase />
+            {/* <CinePlayerShowcase /> */}
             <ComboboxShowcase />
             <DataRowShowcase />
             <DialogShowcase />
diff --git a/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx b/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
index f479b5d9d..50a7429c6 100644
--- a/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
+++ b/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx
@@ -1,142 +1,150 @@
-import React from 'react';
-import AllInOneMenu, {
-  IconMenu,
-  SubMenu,
-  ItemPanel,
-  Item,
-  DividerItem,
-  HorizontalDirection,
-  VerticalDirection,
-} from '../../../../ui-next/src/components/AllInOneMenu';
-import { Switch } from '../../../../ui-next/src/components/Switch';
-import ShowcaseRow from './ShowcaseRow';
+// import React from 'react';
+// import * as AllInOneMenu from '../../../../../platform/ui-next/src/components/AllInOneMenu';
+// import { Switch } from '../../../../../platform/ui-next/src/components/Switch';
+// import ShowcaseRow from './ShowcaseRow';
 
 /**
  * Pure‑UI mock of the in‑app Window/Level menu.
  * Clickable, but all actions are inert.
  */
 export default function AllinOneMenuShowcase() {
-  /* Helpers to build common static items so the JSX stays concise */
-  const renderColorLUTItems = () =>
-    [
-      'Grayscale',
-      'X Ray',
-      'HSV',
-      'Hot Iron',
-      'Red Hot',
-      'S PET',
-      'Perfusion',
-      'Rainbow',
-      'SUV',
-      'GE 256',
-      'GE',
-      'Siemens',
-    ].map(name => <Item key={name} label={name} />);
+  return null;
+}
 
-  const renderWindowPresetItems = () =>
-    [
-      { desc: 'Soft tissue', wl: '400 / 40' },
-      { desc: 'Lung', wl: '1500 / -600' },
-      { desc: 'Liver', wl: '150 / 90' },
-      { desc: 'Bone', wl: '2500 / 480' },
-      { desc: 'Brain', wl: '80 / 40' },
-    ].map(p => (
-      <Item
-        key={p.desc}
-        label={p.desc}
-        secondaryLabel={p.wl}
-      />
-    ));
+//   /* Helpers to build common static items so the JSX stays concise */
+//   const renderColorLUTItems = () =>
+//     [
+//       'Grayscale',
+//       'X Ray',
+//       'HSV',
+//       'Hot Iron',
+//       'Red Hot',
+//       'S PET',
+//       'Perfusion',
+//       'Rainbow',
+//       'SUV',
+//       'GE 256',
+//       'GE',
+//       'Siemens',
+//     ].map(name => (
+//       <AllInOneMenu.Item
+//         key={name}
+//         label={name}
+//       />
+//     ));
 
-  return (
-    <ShowcaseRow
-      title="All In One Menu"
-      description="A structured, consolidated menu designed to reduce visual clutter, helping users keep their focus on the image. It supports various UI components—including Switches, Numeric Inputs, Tabs, and Sliders—for detailed settings, as well as text-based lists for actionable items."
-      code={`<IconMenu icon="viewport-window-level" menuStyle={{ width: 212, maxHeight: 500 }}>
-  <ItemPanel label="Display">
-    <Item label="Display Color bar" rightIcon={<Switch disabled />} />
-    <DividerItem />
-    <SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
-      <ItemPanel label="Color LUTs">
-        <Item label="Preview in viewport" rightIcon={<Switch disabled />} />
-        <DividerItem />
-        <Item label="Grayscale" />
-        <Item label="X Ray" />
-        <Item label="HSV" />
-        <Item label="Hot Iron" />
-        <Item label="Red Hot" />
-        <Item label="S PET" />
-        <Item label="Perfusion" />
-        <Item label="Rainbow" />
-        <Item label="SUV" />
-        <Item label="GE 256" />
-        <Item label="GE" />
-        <Item label="Siemens" />
-      </ItemPanel>
-    </SubMenu>
-    <SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
-      <ItemPanel label="CT Presets">
-        <Item label="Soft tissue" secondaryLabel="400 / 40" />
-        <Item label="Lung" secondaryLabel="1500 / ‑600" />
-        <Item label="Liver" secondaryLabel="150 / 90" />
-        <Item label="Bone" secondaryLabel="2500 / 480" />
-        <Item label="Brain" secondaryLabel="80 / 40" />
-      </ItemPanel>
-    </SubMenu>
-  </ItemPanel>
-</IconMenu>`}
-    >
-      <div className="border-input/70 relative flex h-12 items-center rounded border bg-black px-4">
-        <IconMenu
-          icon="viewport-window-level"
-          iconClassName="text-xl text-highlight hover:bg-primary/30 cursor-pointer rounded"
-          horizontalDirection={HorizontalDirection.LeftToRight}
-          verticalDirection={VerticalDirection.TopToBottom}
-          menuStyle={{ width: 212, maxHeight: 500 }}
-        >
-          <ItemPanel label="Display">
-            <Item
-              label="Display Color bar"
-              rightIcon={
-                <Switch
-                  checked={false}
-                  disabled
-                  className="pointer-events-none"
-                />
-              }
-              useIconSpace={false}
-            />
-            <DividerItem />
-            <SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
-              <ItemPanel
-                label="Color LUTs"
-                maxHeight="calc(100vh - 250px)"
-                className="flex flex-col"
-              >
-                <Item
-                  label="Preview in viewport"
-                  rightIcon={
-                    <Switch
-                      checked={false}
-                      disabled
-                      className="pointer-events-none"
-                    />
-                  }
-                />
-                <DividerItem />
-                {renderColorLUTItems()}
-              </ItemPanel>
-            </SubMenu>
-            <SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
-              <ItemPanel label="CT Presets">{renderWindowPresetItems()}</ItemPanel>
-            </SubMenu>
-          </ItemPanel>
-        </IconMenu>
+//   const renderWindowPresetItems = () =>
+//     [
+//       { desc: 'Soft tissue', wl: '400 / 40' },
+//       { desc: 'Lung', wl: '1500 / -600' },
+//       { desc: 'Liver', wl: '150 / 90' },
+//       { desc: 'Bone', wl: '2500 / 480' },
+//       { desc: 'Brain', wl: '80 / 40' },
+//     ].map(p => (
+//       <AllInOneMenu.Item
+//         key={p.desc}
+//         label={p.desc}
+//         secondaryLabel={p.wl}
+//       />
+//     ));
 
-        <span className="text-muted-foreground ml-3 text-sm">
-          Click the icon to explore an example
-        </span>
-      </div>
-    </ShowcaseRow>
-  );
-}
\ No newline at end of file
+//   return (
+//     <ShowcaseRow
+//       title="All In One Menu"
+//       description="A structured, consolidated menu designed to reduce visual clutter, helping users keep their focus on the image. It supports various UI components—including Switches, Numeric Inputs, Tabs, and Sliders—for detailed settings, as well as text-based lists for actionable items."
+//       code={`<AllInOneMenu.IconMenu icon="viewport-window-level" menuStyle={{ width: 212, maxHeight: 500 }}>
+//   <AllInOneMenu.ItemPanel label="Display">
+//     <AllInOneMenu.Item label="Display Color bar" rightIcon={<Switch disabled />} />
+//     <AllInOneMenu.DividerItem />
+//     <AllInOneMenu.SubMenu itemLabel="Color LUT" itemIcon="icon-color-lut">
+//       <AllInOneMenu.ItemPanel label="Color LUTs">
+//         <AllInOneMenu.Item label="Preview in viewport" rightIcon={<Switch disabled />} />
+//         <AllInOneMenu.DividerItem />
+//         <AllInOneMenu.Item label="Grayscale" />
+//         <AllInOneMenu.Item label="X Ray" />
+//         <AllInOneMenu.Item label="HSV" />
+//         <AllInOneMenu.Item label="Hot Iron" />
+//         <AllInOneMenu.Item label="Red Hot" />
+//         <AllInOneMenu.Item label="S PET" />
+//         <AllInOneMenu.Item label="Perfusion" />
+//         <AllInOneMenu.Item label="Rainbow" />
+//         <AllInOneMenu.Item label="SUV" />
+//         <AllInOneMenu.Item label="GE 256" />
+//         <AllInOneMenu.Item label="GE" />
+//         <AllInOneMenu.Item label="Siemens" />
+//       </AllInOneMenu.ItemPanel>
+//     </AllInOneMenu.SubMenu>
+//     <AllInOneMenu.SubMenu itemLabel="Window Presets" itemIcon="viewport-window-level">
+//       <AllInOneMenu.ItemPanel label="CT Presets">
+//         <AllInOneMenu.Item label="Soft tissue" secondaryLabel="400 / 40" />
+//         <AllInOneMenu.Item label="Lung" secondaryLabel="1500 / ‑600" />
+//         <AllInOneMenu.Item label="Liver" secondaryLabel="150 / 90" />
+//         <AllInOneMenu.Item label="Bone" secondaryLabel="2500 / 480" />
+//         <AllInOneMenu.Item label="Brain" secondaryLabel="80 / 40" />
+//       </AllInOneMenu.ItemPanel>
+//     </AllInOneMenu.SubMenu>
+//   </AllInOneMenu.ItemPanel>
+// </AllInOneMenu.IconMenu>`}
+//     >
+//       <div className="border-input/70 relative flex h-12 items-center rounded border bg-black px-4">
+//         <AllInOneMenu.IconMenu
+//           icon="viewport-window-level"
+//           iconClassName="text-xl text-highlight hover:bg-primary/30 cursor-pointer rounded"
+//           horizontalDirection={AllInOneMenu.HorizontalDirection.LeftToRight}
+//           verticalDirection={AllInOneMenu.VerticalDirection.TopToBottom}
+//           menuStyle={{ width: 212, maxHeight: 500 }}
+//         >
+//           <AllInOneMenu.ItemPanel label="Display">
+//             <AllInOneMenu.Item
+//               label="Display Color bar"
+//               rightIcon={
+//                 <Switch
+//                   checked={false}
+//                   disabled
+//                   className="pointer-events-none"
+//                 />
+//               }
+//               useIconSpace={false}
+//             />
+//             <AllInOneMenu.DividerItem />
+//             <AllInOneMenu.SubMenu
+//               itemLabel="Color LUT"
+//               itemIcon="icon-color-lut"
+//             >
+//               <AllInOneMenu.ItemPanel
+//                 label="Color LUTs"
+//                 maxHeight="calc(100vh - 250px)"
+//                 className="flex flex-col"
+//               >
+//                 <AllInOneMenu.Item
+//                   label="Preview in viewport"
+//                   rightIcon={
+//                     <Switch
+//                       checked={false}
+//                       disabled
+//                       className="pointer-events-none"
+//                     />
+//                   }
+//                 />
+//                 <AllInOneMenu.DividerItem />
+//                 {renderColorLUTItems()}
+//               </AllInOneMenu.ItemPanel>
+//             </AllInOneMenu.SubMenu>
+//             <AllInOneMenu.SubMenu
+//               itemLabel="Window Presets"
+//               itemIcon="viewport-window-level"
+//             >
+//               <AllInOneMenu.ItemPanel label="CT Presets">
+//                 {renderWindowPresetItems()}
+//               </AllInOneMenu.ItemPanel>
+//             </AllInOneMenu.SubMenu>
+//           </AllInOneMenu.ItemPanel>
+//         </AllInOneMenu.IconMenu>
+
+//         <span className="text-muted-foreground ml-3 text-sm">
+//           Click the icon to explore an example
+//         </span>
+//       </div>
+//     </ShowcaseRow>
+//   );
+// }
diff --git a/platform/docs/src/pages/components/CinePlayerShowcase.tsx b/platform/docs/src/pages/components/CinePlayerShowcase.tsx
index dc07be265..f9bb3d6bc 100644
--- a/platform/docs/src/pages/components/CinePlayerShowcase.tsx
+++ b/platform/docs/src/pages/components/CinePlayerShowcase.tsx
@@ -1,37 +1,39 @@
-import React, { useState } from 'react';
-import CinePlayer from '../../../../ui-next/src/components/CinePlayer/CinePlayer';
-import ShowcaseRow from './ShowcaseRow';
+// import React, { useState } from 'react';
+// import CinePlayer from '../../../../ui-next/src/components/CinePlayer/CinePlayer';
+// import ShowcaseRow from './ShowcaseRow';
 
 /**
  * CinePlayerShowcase displays a playable/pausable cine player with FPS control.
  */
 export default function CinePlayerShowcase() {
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [fps, setFps] = useState(24);
-
-  return (
-    <ShowcaseRow
-      title="Cine Player"
-      description="Play, pause, scrub through dynamic image series and adjust FPS."
-      code={`
-<CinePlayer
-  className="w-[300px]"
-  isPlaying={isPlaying}
-  frameRate={fps}
-  onPlayPauseChange={setIsPlaying}
-  onFrameRateChange={setFps}
-  onClose={() => console.log('close clicked')}
-/>
-      `}
-    >
-      <CinePlayer
-        className="w-[300px]"
-        isPlaying={isPlaying}
-        frameRate={fps}
-        onPlayPauseChange={setIsPlaying}
-        onFrameRateChange={setFps}
-        onClose={() => console.log('close clicked')}
-      />
-    </ShowcaseRow>
-  );
+  return null;
 }
+//   const [isPlaying, setIsPlaying] = useState(false);
+//   const [fps, setFps] = useState(24);
+
+//   return (
+//     <ShowcaseRow
+//       title="Cine Player"
+//       description="Play, pause, scrub through dynamic image series and adjust FPS."
+//       code={`
+// <CinePlayer
+//   className="w-[300px]"
+//   isPlaying={isPlaying}
+//   frameRate={fps}
+//   onPlayPauseChange={setIsPlaying}
+//   onFrameRateChange={setFps}
+//   onClose={() => console.log('close clicked')}
+// />
+//       `}
+//     >
+//       <CinePlayer
+//         className="w-[300px]"
+//         isPlaying={isPlaying}
+//         frameRate={fps}
+//         onPlayPauseChange={setIsPlaying}
+//         onFrameRateChange={setFps}
+//         onClose={() => console.log('close clicked')}
+//       />
+//     </ShowcaseRow>
+//   );
+// }
diff --git a/platform/docs/src/pages/components/TooltipShowcase.tsx b/platform/docs/src/pages/components/TooltipShowcase.tsx
index c9ad13651..7fd2c778b 100644
--- a/platform/docs/src/pages/components/TooltipShowcase.tsx
+++ b/platform/docs/src/pages/components/TooltipShowcase.tsx
@@ -1,6 +1,11 @@
 import React from 'react';
-import { Tooltip, TooltipTrigger, TooltipContent } from '../../../../ui-next/src/components/Tooltip';
-import { Button } from '../../../../ui-next/src/components/Button';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from '../../../../../platform/ui-next/src/components/Tooltip';
+import { Button } from '../../../../../platform/ui-next/src/components/Button';
 import ShowcaseRow from './ShowcaseRow';
 
 /**
@@ -12,24 +17,31 @@ export default function TooltipShowcase() {
       title="Tooltip"
       description="Tooltips reveal helper text when users hover, focus, or tap an element."
       code={`
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Button variant="ghost" size="icon">?</Button>
-  </TooltipTrigger>
-  <TooltipContent>
-    Tooltip content
-  </TooltipContent>
-</Tooltip>
+<TooltipProvider>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button variant="ghost" size="icon">?</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      Tooltip content
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
       `}
     >
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <Button variant="ghost" size="icon">?</Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          Tooltip content
-        </TooltipContent>
-      </Tooltip>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+            >
+              ?
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Tooltip content</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </ShowcaseRow>
   );
-}
\ No newline at end of file
+}