chore: uiv2 docz custom page (#1511)

* feat: Customized Docz Layout

* manually apply padding into playground

* fix playground bug -- sticky items

* fix window

* remove specifc tailwind style for docz

platform/ui/doczrc.js

@@ -0,0 +1,4 @@
+export default {
+  title: '@ohif/ui',
+  menu: ['Getting Started', 'Readme', 'Components', 'Views'],
+};

platform/ui/package.json

@@ -27,9 +27,12 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "docz": "^2.2.0",
+    "theme-ui": "^0.2.38",
+    "gatsby": "2.19.24",
     "gatsby-plugin-postcss": "^2.1.20",
     "gatsby-plugin-react-svg": "^3.0.0",
     "gatsby-plugin-sass": "^2.1.28",
+    "gatsby-theme-docz": "^2.2.0",
     "node-sass": "^4.13.1",
     "prop-types": "^15.7.2",
     "react": "^16.11.0",

platform/ui/src/components/Button/Button.mdx

@@ -22,8 +22,8 @@ import { Button } from '@ohfi/ui';
 ## Outlined Buttons
 
 <Playground>
-  <>
+  <div className="p-4">
-    <Button variant="contained" className="m-1">
+    <Button variant="outlined" className="m-1">
       Default
     </Button>
     <Button variant="contained" color="primary" className="m-1">
@@ -32,14 +32,17 @@ import { Button } from '@ohfi/ui';
     <Button variant="contained" color="secondary" className="m-1">
       Secondary
     </Button>
-  </>
+    <Button variant="outlined" color="white" className="m-1">
+      White
+    </Button>
+  </div>
 </Playground>
 
 ## Outlined Buttons
 
 <Playground>
-  <>
+  <div className="p-4">
-    <Button variant="outlined" className="m-1">
+    <Button variant="contained" className="m-1">
       Default
     </Button>
     <Button variant="outlined" color="primary" className="m-1">
@@ -48,13 +51,16 @@ import { Button } from '@ohfi/ui';
     <Button variant="outlined" color="secondary" className="m-1">
       Secondary
     </Button>
-  </>
+    <Button variant="contained" color="white" className="m-1">
+      White
+    </Button>
+  </div>
 </Playground>
 
 ## Text Buttons
 
 <Playground>
-  <>
+  <div className="p-4">
     <Button variant="text" className="m-1">
       Default
     </Button>
@@ -64,13 +70,166 @@ import { Button } from '@ohfi/ui';
     <Button variant="text" color="secondary" className="m-1">
       Secondary
     </Button>
-  </>
+    <Button variant="text" color="white" className="m-1">
+      White
+    </Button>
+  </div>
+</Playground>
+
+## Rounded Buttons
+
+<Playground>
+  <div className="p-4">
+    <div className="mb-2">
+      <Button variant="contained" rounded="none" className="m-1">
+        Non Rounded
+      </Button>
+      <Button variant="contained" rounded="small" className="m-1">
+        Small Rounded
+      </Button>
+      <Button variant="contained" rounded="medium" className="m-1">
+        Medium Rounded
+      </Button>
+      <Button variant="contained" rounded="large" className="m-1">
+        Large Rounded
+      </Button>
+      <Button variant="contained" rounded="full" className="m-1">
+        Full Rounded
+      </Button>
+    </div>
+    <div className="mb-2">
+      <Button
+        variant="contained"
+        rounded="none"
+        color="primary"
+        className="m-1"
+      >
+        Non Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="small"
+        color="primary"
+        className="m-1"
+      >
+        Small Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="medium"
+        color="primary"
+        className="m-1"
+      >
+        Medium Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="large"
+        color="primary"
+        className="m-1"
+      >
+        Large Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="full"
+        color="primary"
+        className="m-1"
+      >
+        Full Rounded
+      </Button>
+    </div>
+    <div className="mb-2">
+      <Button
+        variant="contained"
+        rounded="none"
+        color="secondary"
+        className="m-1"
+      >
+        Non Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="small"
+        color="secondary"
+        className="m-1"
+      >
+        Small Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="medium"
+        color="secondary"
+        className="m-1"
+      >
+        Medium Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="large"
+        color="secondary"
+        className="m-1"
+      >
+        Large Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="full"
+        color="secondary"
+        className="m-1"
+      >
+        Full Rounded
+      </Button>
+    </div>
+    <div className="mb-2">
+      <Button
+        variant="contained"
+        rounded="none"
+        color="white"
+        className="m-1"
+      >
+        Non Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="small"
+        color="white"
+        className="m-1"
+      >
+        Small Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="medium"
+        color="white"
+        className="m-1"
+      >
+        Medium Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="large"
+        color="white"
+        className="m-1"
+      >
+        Large Rounded
+      </Button>
+      <Button
+        variant="contained"
+        rounded="full"
+        color="white"
+        className="m-1"
+      >
+        Full Rounded
+      </Button>
+    </div>
+  </div>
 </Playground>
 
 ## Sizes
 
 <Playground>
-  <>
+  <div className="p-4">
     <div>
       <Button variant="text" size="small" className="m-1">
         Small
@@ -135,31 +294,18 @@ import { Button } from '@ohfi/ui';
     </Button>
     </div>
 
-</>
+</div>
-
 </Playground>
 
 ## Buttons with icons
 
 <Playground>
-  <div className="flex">
+  <div className="p-4 flex">
     <Button
       variant="contained"
       color="primary"
       className="m-1"
-<<<<<<< HEAD
-      startIcon={
-    <svg
-      class="fill-current w-4 h-4"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-    >
-      <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
-    </svg>
-  }
-=======
       startIcon={<Icon name="settings" />}
->>>>>>> 98a130b58... feat: Icon component (#1499)
     >
       Settings
     </Button>
@@ -167,24 +313,6 @@ import { Button } from '@ohfi/ui';
       variant="contained"
       color="primary"
       className="m-1"
-<<<<<<< HEAD
-      endIcon={
-    <svg
-      class="fill-current w-4 h-4"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-    >
-      <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
-    </svg>
-  }
-    >
-      Download
-    </Button>
-      </div>
-    )
-  }}
-
-=======
       endIcon={<Icon name="settings" />}
     >
       Download
@@ -199,7 +327,6 @@ import { Button } from '@ohfi/ui';
       Download
     </Button>
   </div>
->>>>>>> 98a130b58... feat: Icon component (#1499)
 </Playground>
 
 ## Icon Buttons
@@ -211,7 +338,7 @@ import { IconButton } from '@ohfi/ui';
 ```
 
 <Playground>
-  <div className="flex flex-col items-center">
+  <div className="p-4 flex flex-col items-center">
     <div className="">
       <IconButton className="m-2">
         <Icon name="settings" />
@@ -260,7 +387,7 @@ import { IconButton } from '@ohfi/ui';
 </Playground>
 
 <Playground>
-  <div>
+  <div className="p-4">
     <div className="">
       <IconButton className="m-2">
         <Icon name="settings" />

platform/ui/src/components/ButtonGroup/ButtonGroup.mdx

@@ -23,7 +23,7 @@ import { ButtonGroup } from '@ohfi/ui';
 ## Basic button group
 
 <Playground>
-  <div className="flex flex-col items-center">
+  <div className="p-4 flex flex-col items-center">
     <ButtonGroup color="primary" className="m-2">
       <Button>One</Button>
       <Button>Two</Button>
@@ -45,7 +45,7 @@ import { ButtonGroup } from '@ohfi/ui';
 ## Group sizes and colorss
 
 <Playground>
-  <div className="flex flex-col items-center">
+  <div className="p-4 flex flex-col items-center">
     <ButtonGroup color="default" size="small" className="m-2">
       <Button>One</Button>
       <Button>Two</Button>
@@ -67,7 +67,7 @@ import { ButtonGroup } from '@ohfi/ui';
 ## Group orientation
 
 <Playground>
-  <div className="flex flex-row justify-center">
+  <div className="p-4 flex flex-row justify-center">
     <ButtonGroup orientation="vertical" color="primary" className="m-2">
       <Button>One</Button>
       <Button>Two</Button>
@@ -99,7 +99,7 @@ import { ButtonGroup } from '@ohfi/ui';
 ## Split Button
 
 <Playground>
-  <div className="flex flex-col items-center">
+  <div className="p-4 flex flex-col items-center">
     <ButtonGroup color="primary" className="m-2">
       <Button>Options</Button>
       <IconButton className="mr-2">

platform/ui/src/components/Icon/icon.mdx

@@ -13,12 +13,14 @@ import { ICONS } from './getIcon';
 ## Basic usage
 
 <Playground>
+  <div className="p-4">
     <Icon name="active" className="text-custom-aquaBright m-4" />
+  </div>
 </Playground>
 
 ## All Icons
 
-<div className="flex flex-wrap items-center bg-black py-8">
+<div className="p-4 flex flex-wrap items-center bg-black py-8">
   {Object.keys(ICONS)
     .sort()
     .map((name, i) => {

platform/ui/src/components/Input/Input.mdx

@@ -15,7 +15,7 @@ import Input from './';
   {() => {
     const [inputValue, setInputValue] = React.useState('');
     return (
-      <div>
+      <div className="p-4">
         <Input
           transparent
           containerClassName="mb-3"

platform/ui/src/components/Label/Label.mdx

@@ -13,7 +13,11 @@ import Label from './';
 
 <Playground>
   {() => {
-    return <Label text="Label" />;
+    return (
+      <div className="p-4">
+        <Label text="Label" />
+      </div>
+    );
   }}
 </Playground>
 

platform/ui/src/components/Typography/Typography.mdx

@@ -21,6 +21,7 @@ import { Typography } from '@ohfi/ui';
 ## Basic usage
 
 <Playground>
+  <div className="p-4">
     <Typography variant="h1">
       h1. The five boxing wizards jump quickly.
     </Typography>
@@ -45,6 +46,7 @@ import { Typography } from '@ohfi/ui';
     <Typography variant="body">
       body. The five boxing wizards jump quickly.
     </Typography>
+  </div>
 </Playground>
 
 ## Changing the HTML element
@@ -55,9 +57,11 @@ a semantic element. The style of a Typography is independent of the semantic
 element.
 
 <Playground>
+  <div className="p-4">
     <Typography variant="h1" component="h2">
       This is a h2 using the h1 styles.
     </Typography>
+  </div>
 </Playground>
 
 ## Properties

platform/ui/src/gatsby-theme-docz/components/Header/index.js

@@ -0,0 +1,69 @@
+/** @jsx jsx */
+import { jsx, Box, Flex, useColorMode } from 'theme-ui';
+import { useConfig, useCurrentDoc } from 'docz';
+
+import * as styles from 'gatsby-theme-docz/src/components/Header/styles';
+import {
+  Edit,
+  Menu,
+  Sun,
+  Github,
+} from 'gatsby-theme-docz/src/components/Icons';
+import { Logo } from 'gatsby-theme-docz/src/components/Logo';
+
+export const Header = props => {
+  const { onOpen } = props;
+  const {
+    repository,
+    themeConfig: { showDarkModeSwitch, showMarkdownEditButton },
+  } = useConfig();
+  const { edit = true, ...doc } = useCurrentDoc();
+  const [colorMode, setColorMode] = useColorMode();
+
+  const toggleColorMode = () => {
+    setColorMode(colorMode === 'light' ? 'dark' : 'light');
+  };
+
+  return (
+    <div sx={styles.wrapper} data-testid="header">
+      <div sx={styles.innerContainer}>
+        <div className="flex">
+          <button className="mr-4" sx={styles.menuButton} onClick={onOpen}>
+            <Menu size={25} />
+          </button>
+          <Logo />
+        </div>
+        <Flex>
+          {repository && (
+            <Box sx={{ mr: 2 }}>
+              <a
+                href={repository}
+                sx={styles.headerButton}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Github size={15} />
+              </a>
+            </Box>
+          )}
+          {showDarkModeSwitch && (
+            <button sx={styles.headerButton} onClick={toggleColorMode}>
+              <Sun size={15} />
+            </button>
+          )}
+        </Flex>
+        {showMarkdownEditButton && edit && doc.link && (
+          <a
+            sx={styles.editButton}
+            href={doc.link}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Edit width={14} />
+            <Box sx={{ pl: 2 }}>Edit page</Box>
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};

platform/ui/src/gatsby-theme-docz/components/Layout/index.js

@@ -0,0 +1,50 @@
+/** @jsx jsx */
+import { useRef, useState } from 'react';
+import { jsx, Layout as BaseLayout, Main } from 'theme-ui';
+import classnames from 'classnames';
+
+import { Header } from '../Header';
+import { Sidebar } from '../Sidebar';
+import * as styles from 'gatsby-theme-docz/src/components/Layout/styles';
+
+const getSidebarStatus = () =>
+  typeof window !== 'undefined' && window.location.pathname === '/';
+
+export const Layout = ({ children }) => {
+  const [sidebarOpen, setSidebarOpen] = useState(getSidebarStatus());
+  const nav = useRef();
+
+  const handleSidebarToggle = () => {
+    setSidebarOpen(s => !s);
+  };
+
+  return (
+    <BaseLayout sx={{ '& > div': { flex: '1 1 auto' } }} data-testid="layout">
+      <Main
+        sx={styles.main}
+        className={classnames({
+          'overflow-hidden h-screen lg:overflow-auto': sidebarOpen,
+        })}
+      >
+        <Header onOpen={handleSidebarToggle} />
+        <div className={classnames('flex', {})}>
+          <Sidebar
+            ref={nav}
+            sidebarOpen={sidebarOpen}
+            onFocus={() => setSidebarOpen(true)}
+            onBlur={() => setSidebarOpen(false)}
+            onClick={() => setSidebarOpen(false)}
+          />
+          <div
+            className={classnames('py-10 w-full', {
+              'px-4 lg:px-20': sidebarOpen,
+              'px-4 lg:px-8': !sidebarOpen,
+            })}
+          >
+            {children}
+          </div>
+        </div>
+      </Main>
+    </BaseLayout>
+  );
+};

platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js

@@ -0,0 +1,79 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React, { useState, useRef, useEffect } from 'react';
+import classnames from 'classnames';
+
+import { jsx } from 'theme-ui';
+import { useMenus, useCurrentDoc } from 'docz';
+
+import { NavSearch } from 'gatsby-theme-docz/src/components/NavSearch';
+import { NavLink } from 'gatsby-theme-docz/src/components/NavLink';
+import { NavGroup } from 'gatsby-theme-docz/src/components/NavGroup';
+
+export const Sidebar = React.forwardRef((props, ref) => {
+  const [query, setQuery] = useState('');
+  const menus = useMenus({ query });
+  const currentDoc = useCurrentDoc();
+  const currentDocRef = useRef();
+  const handleChange = ev => {
+    setQuery(ev.target.value);
+  };
+  useEffect(() => {
+    if (ref.current && currentDocRef.current) {
+      ref.current.scrollTo(0, currentDocRef.current.offsetTop);
+    }
+  }, [ref]);
+
+  return (
+    <>
+      {props.sidebarOpen && (
+        <>
+          <div className="block lg:hidden">
+            <div
+              onClick={() => props.onClick()}
+              className="fixed z-10 left-0 w-full h-full bg-black opacity-80"
+              style={{ top: '81px' }}
+            />
+          </div>
+          <div
+            ref={ref}
+            data-testid="sidebar"
+            className={classnames(
+              'p-8 flex-col bg-white top-0 overflow-auto z-10 border-r border-gray-400 hidden fixed left-0 bottom-0 lg:block lg:sticky lg:h-screen lg:top-0'
+            )}
+            style={{
+              display: props.sidebarOpen ? 'block' : 'none',
+              top: '81px',
+              minWidth: 250,
+            }}
+          >
+            <NavSearch
+              placeholder="Type to search..."
+              value={query}
+              onChange={handleChange}
+            />
+            {menus &&
+              menus.map(menu => {
+                if (!menu.route)
+                  return (
+                    <NavGroup key={menu.id} item={menu} sidebarRef={ref} />
+                  );
+                if (menu.route === currentDoc.route) {
+                  return (
+                    <NavLink key={menu.id} item={menu} ref={currentDocRef}>
+                      {menu.name}
+                    </NavLink>
+                  );
+                }
+                return (
+                  <NavLink key={menu.id} item={menu}>
+                    {menu.name}
+                  </NavLink>
+                );
+              })}
+          </div>
+        </>
+      )}
+    </>
+  );
+});

platform/ui/src/gatsby-theme-docz/theme.css

@@ -3,7 +3,6 @@
 */
 
 [data-testid='live-preview'] {
-  padding: 10px;
   background: #000;
 }
 

platform/ui/src/views/StudyList/StudyList.mdx

@@ -1,7 +1,7 @@
 ---
 name: Study List
 menu: Views
-route: components/studyList
+route: views/studyList
 ---
 
 import { Playground, Props } from 'docz';

platform/ui/tailwind.config.js

@@ -166,6 +166,9 @@ module.exports = {
       '48': '12rem',
       '56': '14rem',
       '64': '16rem',
+      '72': '18rem',
+      '80': '20rem',
+      '250px': '250px',
     },
     backgroundColor: theme => theme('colors'),
     backgroundPosition: {