diff --git a/platform/docs/src/pages/components-list.tsx b/platform/docs/src/pages/components-list.tsx index 4549e049b..189e9f1a4 100644 --- a/platform/docs/src/pages/components-list.tsx +++ b/platform/docs/src/pages/components-list.tsx @@ -1,129 +1,142 @@ import React from 'react'; import '../css/custom.css'; import Layout from '@theme/Layout'; -import { TooltipProvider } from '../../../../platform/ui-next/src/components/Tooltip'; - -// Navigation card components -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 ButtonShowcase from './components/ButtonShowcase'; -import CheckboxShowcase from './components/CheckboxShowcase'; -// import CinePlayerShowcase from './components/CinePlayerShowcase'; -import ComboboxShowcase from './components/ComboboxShowcase'; -import DataRowShowcase from './components/DataRowShowcase'; -import DialogShowcase from './components/DialogShowcase'; -import DropdownMenuShowcase from './components/DropdownMenuShowcase'; -import HoverCardShowcase from './components/HoverCardShowcase'; -import InputShowcase from './components/InputShowcase'; -import LabelShowcase from './components/LabelShowcase'; -import NumericMetaShowcase from './components/NumericMetaShowcase'; -import PanelSectionShowcase from './components/PanelSectionShowcase'; -import PopoverShowcase from './components/PopoverShowcase'; -import ScrollAreaShowcase from './components/ScrollAreaShowcase'; -import SelectShowcase from './components/SelectShowcase'; -import SliderShowcase from './components/SliderShowcase'; -import SwitchShowcase from './components/SwitchShowcase'; -import TabsShowcase from './components/TabsShowcase'; -import ToastShowcase from './components/ToastShowcase'; -import ToolButtonShowcase from './components/ToolButtonShowcase'; -import ToolButtonListShowcase from './components/ToolButtonListShowcase'; -import TooltipShowcase from './components/TooltipShowcase'; +import BrowserOnly from '@docusaurus/BrowserOnly'; /** * Components List page that displays all available UI components */ export default function ComponentsList() { return ( - - -
-
- {/* Navigation cards */} -
- - - - - - Colors & Typography - - - Color Palette and Typography Guidelines - - - - - - - - - - Components - - - Essential UI Components with Variants - - - - - - - - - - Patterns - - - Component-Based Layout Examples - - - - -
+ + }> + {() => { + // Dynamically require all sub-components to avoid SSR issues + const { TooltipProvider } = + require('../../../ui-next/src/components/Tooltip'); -

Components

+ const { + Card, + CardHeader, + CardTitle, + CardDescription, + } = require('../../../ui-next/src/components/Card'); + const { Icons } = require('../../../ui-next/src/components/Icons'); - {/* */} - - - {/* */} - - - - - - - - - - - - - - - - - - - -
-
- + // Showcase modules + const AllinOneMenuShowcase = require('./components/AllinOneMenuShowcase').default; + const ButtonShowcase = require('./components/ButtonShowcase').default; + const CheckboxShowcase = require('./components/CheckboxShowcase').default; + const CinePlayerShowcase = require('./components/CinePlayerShowcase').default; + const ComboboxShowcase = require('./components/ComboboxShowcase').default; + const DataRowShowcase = require('./components/DataRowShowcase').default; + const DialogShowcase = require('./components/DialogShowcase').default; + const DropdownMenuShowcase = require('./components/DropdownMenuShowcase').default; + const HoverCardShowcase = require('./components/HoverCardShowcase').default; + const InputShowcase = require('./components/InputShowcase').default; + const LabelShowcase = require('./components/LabelShowcase').default; + const NumericMetaShowcase = require('./components/NumericMetaShowcase').default; + const PanelSectionShowcase = require('./components/PanelSectionShowcase').default; + const PopoverShowcase = require('./components/PopoverShowcase').default; + const ScrollAreaShowcase = require('./components/ScrollAreaShowcase').default; + const SelectShowcase = require('./components/SelectShowcase').default; + const SliderShowcase = require('./components/SliderShowcase').default; + const SwitchShowcase = require('./components/SwitchShowcase').default; + const TabsShowcase = require('./components/TabsShowcase').default; + const ToastShowcase = require('./components/ToastShowcase').default; + const ToolButtonShowcase = require('./components/ToolButtonShowcase').default; + const ToolButtonListShowcase = require('./components/ToolButtonListShowcase').default; + const TooltipShowcase = require('./components/TooltipShowcase').default; + + return ( + +
+
+ {/* Navigation cards */} +
+ + + + + + Colors & Typography + + + Color Palette and Typography Guidelines + + + + + + + + + + Components + + + Essential UI Components with Variants + + + + + + + + + + Patterns + + + Component‑Based Layout Examples + + + + +
+ +

+ Components +

+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + ); + }} + ); -} +} \ No newline at end of file diff --git a/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx b/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx index 50a7429c6..e7939c323 100644 --- a/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx +++ b/platform/docs/src/pages/components/AllinOneMenuShowcase.tsx @@ -1,150 +1,119 @@ -// 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'; +import React from 'react'; +import useIsBrowser from '@docusaurus/useIsBrowser'; +import ShowcaseRow from './ShowcaseRow'; /** * Pure‑UI mock of the in‑app Window/Level menu. * Clickable, but all actions are inert. */ export default function AllinOneMenuShowcase() { - return null; -} + const isBrowser = useIsBrowser(); -// /* 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 => ( -// -// )); + if (!isBrowser) { + 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 => ( -// -// )); + const { + default: AllInOneMenu, + IconMenu, + SubMenu, + ItemPanel, + Item, + DividerItem, + HorizontalDirection, + VerticalDirection, + } = require('../../../../ui-next/src/components/AllInOneMenu'); + const { Switch } = require('../../../../ui-next/src/components/Switch'); -// return ( -// -// -// } /> -// -// -// -// } /> -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// `} -// > -//
-// -// -// -// } -// useIconSpace={false} -// /> -// -// -// -// -// } -// /> -// -// {renderColorLUTItems()} -// -// -// -// -// {renderWindowPresetItems()} -// -// -// -// + const renderColorLUTItems = () => + [ + 'Grayscale', + 'X Ray', + 'HSV', + 'Hot Iron', + 'Red Hot', + 'S PET', + 'Perfusion', + 'Rainbow', + 'SUV', + 'GE 256', + 'GE', + 'Siemens', + ].map(name => ); -// -// Click the icon to explore an example -// -//
-// -// ); -// } + 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 => ( + + )); + + return ( + …`} + > +
+ + + + } + useIconSpace={false} + /> + + + + + } + /> + + {renderColorLUTItems()} + + + + + {renderWindowPresetItems()} + + + + + + + Click the icon to explore an example + +
+ + ); +} \ No newline at end of file diff --git a/platform/docs/src/pages/components/CinePlayerShowcase.tsx b/platform/docs/src/pages/components/CinePlayerShowcase.tsx index f9bb3d6bc..538d6191e 100644 --- a/platform/docs/src/pages/components/CinePlayerShowcase.tsx +++ b/platform/docs/src/pages/components/CinePlayerShowcase.tsx @@ -1,39 +1,45 @@ -// import React, { useState } from 'react'; -// import CinePlayer from '../../../../ui-next/src/components/CinePlayer/CinePlayer'; -// import ShowcaseRow from './ShowcaseRow'; +import React, { useState } from 'react'; +import useIsBrowser from '@docusaurus/useIsBrowser'; +import ShowcaseRow from './ShowcaseRow'; /** * CinePlayerShowcase displays a playable/pausable cine player with FPS control. */ export default function CinePlayerShowcase() { - return null; -} -// const [isPlaying, setIsPlaying] = useState(false); -// const [fps, setFps] = useState(24); + const [isPlaying, setIsPlaying] = useState(false); + const [fps, setFps] = useState(24); + const isBrowser = useIsBrowser(); -// return ( -// console.log('close clicked')} -// /> -// `} -// > -// console.log('close clicked')} -// /> -// -// ); -// } + // If not browser, return null to avoid SSR parse errors + if (!isBrowser) { + return null; + } + + const { default: CinePlayer } = require('../../../../ui-next/src/components/CinePlayer/CinePlayer'); + + return ( + console.log('close clicked')} +/> + `} + > + console.log('close clicked')} + /> + + ); +} \ No newline at end of file diff --git a/platform/docs/src/pages/components/DropdownMenuShowcase.tsx b/platform/docs/src/pages/components/DropdownMenuShowcase.tsx index 5309847a2..9eeab0c16 100644 --- a/platform/docs/src/pages/components/DropdownMenuShowcase.tsx +++ b/platform/docs/src/pages/components/DropdownMenuShowcase.tsx @@ -18,7 +18,7 @@ export default function DropdownMenuShowcase() { description="Dropdown menu provides a flexible list of options that can open from buttons or other elements" code={` - + @@ -78,4 +78,4 @@ export default function DropdownMenuShowcase() { ); -} +} \ No newline at end of file diff --git a/platform/docs/src/pages/components/TooltipShowcase.tsx b/platform/docs/src/pages/components/TooltipShowcase.tsx index 7fd2c778b..359add8b8 100644 --- a/platform/docs/src/pages/components/TooltipShowcase.tsx +++ b/platform/docs/src/pages/components/TooltipShowcase.tsx @@ -1,47 +1,50 @@ import React from 'react'; -import { - Tooltip, - TooltipTrigger, - TooltipContent, - TooltipProvider, -} from '../../../../../platform/ui-next/src/components/Tooltip'; -import { Button } from '../../../../../platform/ui-next/src/components/Button'; +import BrowserOnly from '@docusaurus/BrowserOnly'; import ShowcaseRow from './ShowcaseRow'; +import { Button } from '../../../../ui-next/src/components/Button'; /** * TooltipShowcase component displays Tooltip variants and examples */ export default function TooltipShowcase() { return ( - - - - - - - Tooltip content - - - - `} - > - - - - + + + Tooltip content + + + `} > - ? - - - Tooltip content - - - + + + + + Tooltip content + + + + ); + }} + ); -} +} \ No newline at end of file diff --git a/platform/docs/src/pages/patterns/index.tsx b/platform/docs/src/pages/patterns/index.tsx index c2b5ef3e3..fc8f67bb2 100644 --- a/platform/docs/src/pages/patterns/index.tsx +++ b/platform/docs/src/pages/patterns/index.tsx @@ -7,25 +7,27 @@ export default function Patterns() { return ( -

Patterns

- - - +
+

Patterns

+ + + +
); -} +} \ No newline at end of file