fix docs (#4988)

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 />

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>
-  );
-}
+//   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>
+//   );
+// }

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>
+//   );
+// }

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>
   );
-}
+}