diff --git a/platform/ui/doczrc.js b/platform/ui/doczrc.js index 5c6861900..a52552d35 100644 --- a/platform/ui/doczrc.js +++ b/platform/ui/doczrc.js @@ -1,4 +1,14 @@ export default { title: '@ohif/ui', - menu: ['Getting Started', 'Readme', 'Components', 'Views'], + menu: [ + 'Getting Started', + // COMPONENTS ARE DEFINED JUST TO CUSTOMIZE THEIR SORTING + 'General', + 'Form', + 'Navigation', + // 'Feedback', + // 'Other', + 'Data Display', + ], + ignore: ['README.md'], }; diff --git a/platform/ui/src/components/Button/Button.mdx b/platform/ui/src/components/Button/Button.mdx index 9c6e757bd..bd5dd8598 100644 --- a/platform/ui/src/components/Button/Button.mdx +++ b/platform/ui/src/components/Button/Button.mdx @@ -1,6 +1,6 @@ --- name: Button -menu: Components +menu: General route: components/button --- @@ -180,20 +180,10 @@ import { Button } from '@ohif/ui';
- - - -
@@ -344,7 +324,7 @@ import { IconButton } from '@ohif/ui'; - + @@ -390,7 +370,7 @@ import { IconButton } from '@ohif/ui'; - + @@ -433,7 +413,6 @@ import { IconButton } from '@ohif/ui'; - ## Properties diff --git a/platform/ui/src/components/ButtonGroup/ButtonGroup.mdx b/platform/ui/src/components/ButtonGroup/ButtonGroup.mdx index b1eb44a5c..e19fad96c 100644 --- a/platform/ui/src/components/ButtonGroup/ButtonGroup.mdx +++ b/platform/ui/src/components/ButtonGroup/ButtonGroup.mdx @@ -1,6 +1,6 @@ --- name: ButtonGroup -menu: Components +menu: General route: components/buttonGroup --- diff --git a/platform/ui/src/components/DateRange/DateRange.mdx b/platform/ui/src/components/DateRange/DateRange.mdx index 187e835bf..7f0166f55 100644 --- a/platform/ui/src/components/DateRange/DateRange.mdx +++ b/platform/ui/src/components/DateRange/DateRange.mdx @@ -1,6 +1,6 @@ --- name: Date Range -menu: Components +menu: Form route: components/date-range --- diff --git a/platform/ui/src/components/EmptyStudies/EmptyStudies.mdx b/platform/ui/src/components/EmptyStudies/EmptyStudies.mdx index c8c012148..97146fc66 100644 --- a/platform/ui/src/components/EmptyStudies/EmptyStudies.mdx +++ b/platform/ui/src/components/EmptyStudies/EmptyStudies.mdx @@ -1,6 +1,6 @@ --- name: Empty Studies -menu: Components +menu: Data Display route: components/empty-studies --- diff --git a/platform/ui/src/components/Icon/icon.mdx b/platform/ui/src/components/Icon/icon.mdx index 2e097ed15..13eb3e201 100644 --- a/platform/ui/src/components/Icon/icon.mdx +++ b/platform/ui/src/components/Icon/icon.mdx @@ -1,6 +1,6 @@ --- name: Icon -menu: Components +menu: General route: components/icon --- diff --git a/platform/ui/src/components/Input/Input.mdx b/platform/ui/src/components/Input/Input.mdx index 49d79112b..e44c58421 100644 --- a/platform/ui/src/components/Input/Input.mdx +++ b/platform/ui/src/components/Input/Input.mdx @@ -1,6 +1,6 @@ --- name: Input -menu: Components +menu: Form route: components/input --- diff --git a/platform/ui/src/components/InputDateRange/InputDateRange.mdx b/platform/ui/src/components/InputDateRange/InputDateRange.mdx index e59e6c89b..99905936f 100644 --- a/platform/ui/src/components/InputDateRange/InputDateRange.mdx +++ b/platform/ui/src/components/InputDateRange/InputDateRange.mdx @@ -1,6 +1,6 @@ --- name: InputDateRange -menu: Components +menu: Form route: components/InputDateRange --- @@ -30,7 +30,7 @@ import { InputDateRange } from '@ohif/ui'; setDates(dates)} + onChange={(dates) => setDates(dates)} /> diff --git a/platform/ui/src/components/InputGroup/InputGroup.mdx b/platform/ui/src/components/InputGroup/InputGroup.mdx index 076b75a34..348e9672b 100644 --- a/platform/ui/src/components/InputGroup/InputGroup.mdx +++ b/platform/ui/src/components/InputGroup/InputGroup.mdx @@ -1,6 +1,6 @@ --- name: InputGroup -menu: Components +menu: Form route: components/InputGroup --- diff --git a/platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx b/platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx index aa15367b1..bca8a24fc 100644 --- a/platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx +++ b/platform/ui/src/components/InputMultiSelect/InputMultiSelect.mdx @@ -1,6 +1,6 @@ --- name: InputMultiSelect -menu: Components +menu: Form route: components/InputMultiSelect --- @@ -33,7 +33,7 @@ import { InputMultiSelect } from '@ohif/ui'; { value: 'SR', label: 'SR' }, ]} value={values} - onChange={values => { + onChange={(values) => { setValues(values); }} /> diff --git a/platform/ui/src/components/InputText/InputText.mdx b/platform/ui/src/components/InputText/InputText.mdx index 9ebbab234..3d47d96f3 100644 --- a/platform/ui/src/components/InputText/InputText.mdx +++ b/platform/ui/src/components/InputText/InputText.mdx @@ -1,6 +1,6 @@ --- name: InputText -menu: Components +menu: Form route: components/InputText --- diff --git a/platform/ui/src/components/Label/Label.mdx b/platform/ui/src/components/Label/Label.mdx index dc5e44b80..df7139046 100644 --- a/platform/ui/src/components/Label/Label.mdx +++ b/platform/ui/src/components/Label/Label.mdx @@ -1,6 +1,6 @@ --- name: Label -menu: Components +menu: Form route: components/label --- diff --git a/platform/ui/src/components/NavBar/NavBar.mdx b/platform/ui/src/components/NavBar/NavBar.mdx index 5101d55ae..9c6bb6f52 100644 --- a/platform/ui/src/components/NavBar/NavBar.mdx +++ b/platform/ui/src/components/NavBar/NavBar.mdx @@ -1,6 +1,6 @@ --- name: NavBar -menu: Components +menu: Navigation route: components/navBar --- diff --git a/platform/ui/src/components/Select/Select.mdx b/platform/ui/src/components/Select/Select.mdx index e50954ebe..1ada1e17c 100644 --- a/platform/ui/src/components/Select/Select.mdx +++ b/platform/ui/src/components/Select/Select.mdx @@ -1,6 +1,6 @@ --- name: Select -menu: Components +menu: Form route: components/select --- diff --git a/platform/ui/src/components/StudyListPagination/StudyListPagination.mdx b/platform/ui/src/components/StudyListPagination/StudyListPagination.mdx index 57fb91e9d..57a44e332 100644 --- a/platform/ui/src/components/StudyListPagination/StudyListPagination.mdx +++ b/platform/ui/src/components/StudyListPagination/StudyListPagination.mdx @@ -1,6 +1,6 @@ --- name: Study List Pagination -menu: Components +menu: Navigation route: components/studyListPagination --- diff --git a/platform/ui/src/components/StudyListTable/StudyListTable.mdx b/platform/ui/src/components/StudyListTable/StudyListTable.mdx index d3565411b..e09a4eb98 100644 --- a/platform/ui/src/components/StudyListTable/StudyListTable.mdx +++ b/platform/ui/src/components/StudyListTable/StudyListTable.mdx @@ -1,6 +1,6 @@ --- name: Study List Table -menu: Components +menu: Data Display route: components/studyListTable --- diff --git a/platform/ui/src/components/Table/Table.mdx b/platform/ui/src/components/Table/Table.mdx index e319f9fae..42723820e 100644 --- a/platform/ui/src/components/Table/Table.mdx +++ b/platform/ui/src/components/Table/Table.mdx @@ -1,6 +1,6 @@ --- name: Table -menu: Components +menu: Data Display route: components/table --- @@ -36,7 +36,7 @@ import { Table, TableBody, TableCell, TableHead, TableRow } from '@ohif/ui'; - {new Array(25).fill('').map(row => ( + {new Array(25).fill('').map((row) => ( Content 01 Content 02 diff --git a/platform/ui/src/components/Typography/Typography.mdx b/platform/ui/src/components/Typography/Typography.mdx index 605f01aa8..8774dc29a 100644 --- a/platform/ui/src/components/Typography/Typography.mdx +++ b/platform/ui/src/components/Typography/Typography.mdx @@ -1,6 +1,6 @@ --- name: Typography -menu: Components +menu: General route: components/typography --- diff --git a/platform/ui/src/gatsby-theme-docz/components/Layout/index.js b/platform/ui/src/gatsby-theme-docz/components/Layout/index.js index 8495bad79..8d82717c8 100644 --- a/platform/ui/src/gatsby-theme-docz/components/Layout/index.js +++ b/platform/ui/src/gatsby-theme-docz/components/Layout/index.js @@ -15,12 +15,13 @@ export const Layout = ({ children }) => { const nav = useRef(); const handleSidebarToggle = () => { - setSidebarOpen(s => !s); + setSidebarOpen((s) => !s); }; return ( div': { flex: '1 1 auto' } }} data-testid="layout">
{ + const currentDoc = useCurrentDoc(); + const currentDocRef = React.useRef(); + const { name, menu } = item; + const [subheadingsVisible, setShowsubheadings] = React.useState( + currentDoc.menu === name + ); + const toggleSubheadings = () => setShowsubheadings(!subheadingsVisible); + React.useEffect(() => { + if (sidebarRef.current && currentDocRef.current) { + sidebarRef.current.scrollTo(0, currentDocRef.current.offsetTop); + } + }, [sidebarRef]); + return ( +
+
+ {item.name} + +
+
+ {menu && + subheadingsVisible && + menu.map((menu) => { + if (currentDoc.route === menu.route) { + return ( + + {menu.name} + + ); + } + + return ( + + {menu.name} + + ); + })} +
+
+ ); +}; diff --git a/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js b/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js index 4ee12e9b4..d5dbcb84f 100644 --- a/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js +++ b/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js @@ -15,7 +15,7 @@ export const Sidebar = React.forwardRef((props, ref) => { const menus = useMenus({ query }); const currentDoc = useCurrentDoc(); const currentDocRef = useRef(); - const handleChange = ev => { + const handleChange = (ev) => { setQuery(ev.target.value); }; useEffect(() => { @@ -24,6 +24,47 @@ export const Sidebar = React.forwardRef((props, ref) => { } }, [ref]); + const customMenus = { + Components: [], + System: [], + Examples: [], + }; + + const MENU_CATEGORIES = { + Components: [ + 'General', + 'Form', + 'Navigation', + 'Feedback', + 'Data Display', + 'Other', + ], + Examples: ['Views'], + System: ['Colors'], + }; + + const renderMenuCategories = () => { + return Object.keys(customMenus).map((menuName) => { + return ( +
+

+ {menuName} +

+ {customMenus[menuName].map((item) => item)} +
+ ); + }); + }; + + const getMenuCategory = (menuName) => { + return Object.keys(MENU_CATEGORIES).find((category) => { + if (MENU_CATEGORIES[category].includes(menuName)) { + return category; + } + return null; + }); + }; + return ( <> {props.sidebarOpen && ( @@ -56,11 +97,26 @@ export const Sidebar = React.forwardRef((props, ref) => { onChange={handleChange} /> {menus && - menus.map(menu => { - if (!menu.route) + menus.map((menu) => { + const isGroup = !!menu.menu; + const Component = isGroup ? NavGroup : NavLink; + const menuCategory = getMenuCategory(menu.name) || null; + + if (menuCategory) { + customMenus[menuCategory].push( + + {!isGroup && menu.name} + + ); + return null; + } + + if (!menu.route) { return ( ); + } + if (menu.route === currentDoc.route) { return ( @@ -74,6 +130,7 @@ export const Sidebar = React.forwardRef((props, ref) => { ); })} + {renderMenuCategories()} )} diff --git a/platform/ui/src/gatsby-theme-docz/theme.css b/platform/ui/src/gatsby-theme-docz/theme.css index 6864e3e8f..a6d6fb193 100644 --- a/platform/ui/src/gatsby-theme-docz/theme.css +++ b/platform/ui/src/gatsby-theme-docz/theme.css @@ -4,6 +4,9 @@ [data-testid='live-preview'] { background: #000; +} + +#main-layout { @apply font-sans; } diff --git a/platform/ui/src/index.mdx b/platform/ui/src/index.mdx deleted file mode 100644 index cdffa6654..000000000 --- a/platform/ui/src/index.mdx +++ /dev/null @@ -1,20 +0,0 @@ ---- -name: Getting Started -route: / ---- - -# Getting Started - -Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications. - -Regardless of the technologies and tools behind them, a successful design system follows these guiding principles: - -- **It’s consistent**. The way components are built and managed follows a predictable pattern. -- **It’s self-contained**. Your design system is treated as a standalone dependency. -- **It’s reusable**. You’ve built components so they can be reused in many contexts. -- **It’s accessible**. Applications built with your design system are usable by as many people as possible, no matter how they access the web. -- **It’s robust**. No matter the product or platform to which your design system is applied, it should perform with grace and minimal bugs. - -## Consistency - -Your first, most important task when starting out is to define the rules of your system, document them, and ensure that everyone follows them. When you have clearly documented code standards and best practices in place, designers and developers from across your organization can easily use and, more importantly, contribute to your design system. diff --git a/platform/ui/src/pages/getting-started.mdx b/platform/ui/src/pages/getting-started.mdx new file mode 100644 index 000000000..3c38456a0 --- /dev/null +++ b/platform/ui/src/pages/getting-started.mdx @@ -0,0 +1,47 @@ +--- +name: Getting Started +route: / +--- + +import { Playground } from 'docz'; +import { Button } from '@ohif/ui'; + +# Getting Started + +`@ohif/ui` is a collection of components and utilities that power OHIF's +zero-footprint DICOM viewer. + +It's maintained in a monorepo, in the +[OHIF's repository](https://github.com/OHIF/Viewers/). + +## Installation + +Install `@ohif/ui` from your terminal: + +```bash +// with npm +npm i @ohif/ui --save-exact +​ +// with yarn +yarn add @ohif/ui --exact +``` + +## Usage + +```javascript +// Import and use components +import { Button } from '@ohif/ui'; +``` + + +
+ +
+ + +## Examples + +In the **Examples** section you can check many examples on how to build your +application using `@ohif/ui` components. + +... diff --git a/platform/ui/src/views/Colors/Colors.mdx b/platform/ui/src/views/Colors/Colors.mdx index 5b9f0f790..d12c1c73d 100644 --- a/platform/ui/src/views/Colors/Colors.mdx +++ b/platform/ui/src/views/Colors/Colors.mdx @@ -1,6 +1,5 @@ --- name: Colors -menu: System route: system/colors --- @@ -9,9 +8,9 @@ import BackgroundColor from './BackgroundColor'; # Color System -**@ohif/ui** offers a color system with a handful of color utility classes. +`@ohif/ui` offers a color system with a handful of color utility classes. -As **@ohif/ui** uses Tailwind as a base styling library, you will be able to use +As `@ohif/ui` uses Tailwind as a base styling library, you will be able to use all the default colors from Tailwind, besides our custom colors too. # How to use