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
2020-03-12 13:23:05 -03:00 · 2020-03-12 13:23:05 -03:00 · 2049147021
commit 2049147021
parent dd18de86f8
14 changed files with 426 additions and 82 deletions
--- a/platform/ui/doczrc.js
+++ b/platform/ui/doczrc.js
@ -0,0 +1,4 @@
+export default {
+  title: '@ohif/ui',
+  menu: ['Getting Started', 'Readme', 'Components', 'Views'],
+};
--- a/platform/ui/package.json
+++ b/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",
--- a/platform/ui/src/components/Button/Button.mdx
+++ b/platform/ui/src/components/Button/Button.mdx
@ -22,8 +22,8 @@ import { Button } from '@ohfi/ui';
 ## Outlined Buttons

 <Playground>
-  <>
-    <Button variant="contained" className="m-1">
+  <div className="p-4">
+    <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>
-  <>
-    <Button variant="outlined" className="m-1">
+  <div className="p-4">
+    <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" />
--- a/platform/ui/src/components/ButtonGroup/ButtonGroup.mdx
+++ b/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">
--- a/platform/ui/src/components/Icon/icon.mdx
+++ b/platform/ui/src/components/Icon/icon.mdx
@ -13,12 +13,14 @@ import { ICONS } from './getIcon';
 ## Basic usage

 <Playground>
-  <Icon name="active" className="text-custom-aquaBright m-4" />
+  <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) => {
--- a/platform/ui/src/components/Input/Input.mdx
+++ b/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"
--- a/platform/ui/src/components/Label/Label.mdx
+++ b/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>

--- a/platform/ui/src/components/Typography/Typography.mdx
+++ b/platform/ui/src/components/Typography/Typography.mdx
@ -21,30 +21,32 @@ import { Typography } from '@ohfi/ui';
 ## Basic usage

 <Playground>
-  <Typography variant="h1">
-    h1. The five boxing wizards jump quickly.
-  </Typography>
-  <Typography variant="h2">
-    h2. The five boxing wizards jump quickly.
-  </Typography>
-  <Typography variant="h3">
-    h3. The five boxing wizards jump quickly.
-  </Typography>
-  <Typography variant="h4">
-    h4. The five boxing wizards jump quickly.
-  </Typography>
-  <Typography variant="h5">
-    h5. The five boxing wizards jump quickly.
-  </Typography>
-  <Typography variant="h6">
-    h6. The five boxing wizards jump quickly.
-  </Typography>
-  <Typography variant="subtitle">
-    subtitle. The five boxing wizards jump quickly.
-  </Typography>
-  <Typography variant="body">
-    body. The five boxing wizards jump quickly.
-  </Typography>
+  <div className="p-4">
+    <Typography variant="h1">
+      h1. The five boxing wizards jump quickly.
+    </Typography>
+    <Typography variant="h2">
+      h2. The five boxing wizards jump quickly.
+    </Typography>
+    <Typography variant="h3">
+      h3. The five boxing wizards jump quickly.
+    </Typography>
+    <Typography variant="h4">
+      h4. The five boxing wizards jump quickly.
+    </Typography>
+    <Typography variant="h5">
+      h5. The five boxing wizards jump quickly.
+    </Typography>
+    <Typography variant="h6">
+      h6. The five boxing wizards jump quickly.
+    </Typography>
+    <Typography variant="subtitle">
+      subtitle. The five boxing wizards jump quickly.
+    </Typography>
+    <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>
-  <Typography variant="h1" component="h2">
-    This is a h2 using the h1 styles.
-  </Typography>
+  <div className="p-4">
+    <Typography variant="h1" component="h2">
+      This is a h2 using the h1 styles.
+    </Typography>
+  </div>
 </Playground>

 ## Properties
--- a/platform/ui/src/gatsby-theme-docz/components/Header/index.js
+++ b/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>
+  );
+};
--- a/platform/ui/src/gatsby-theme-docz/components/Layout/index.js
+++ b/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>
+  );
+};
--- a/platform/ui/src/gatsby-theme-docz/components/Sidebar/index.js
+++ b/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>
+        </>
+      )}
+    </>
+  );
+});
--- a/platform/ui/src/gatsby-theme-docz/theme.css
+++ b/platform/ui/src/gatsby-theme-docz/theme.css
@ -3,7 +3,6 @@
 */

 [data-testid='live-preview'] {
-  padding: 10px;
  background: #000;
 }

--- a/platform/ui/src/views/StudyList/StudyList.mdx
+++ b/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';
--- a/platform/ui/tailwind.config.js
+++ b/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: {