From c124cfaeeaf33ef34c26f2ff69df2fc6e002f761 Mon Sep 17 00:00:00 2001
From: basicprimitives <info@BasicPrimitives.com>
Date: Mon, 23 Nov 2020 23:48:13 -0500
Subject: [PATCH] Added simple drawer for sm

---
 client/src/containers/App/App.js              | 143 +++++++++---------
 client/src/containers/App/AppBar.js           |  62 ++++++++
 .../FamilyChartWithAnnotations.js             |   2 +-
 .../containers/ReactUseCases/ReactHowToUse.js |   4 +-
 .../src/containers/Reference/ApiReference.js  |  16 +-
 server/src/static/orgeditor.md                |  11 +-
 6 files changed, 154 insertions(+), 84 deletions(-)
 create mode 100644 client/src/containers/App/AppBar.js

diff --git a/client/src/containers/App/App.js b/client/src/containers/App/App.js
index 0007ab3..387646b 100644
--- a/client/src/containers/App/App.js
+++ b/client/src/containers/App/App.js
@@ -1,21 +1,19 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import clsx from 'clsx';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import Drawer from '@material-ui/core/Drawer';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
 import Divider from '@material-ui/core/Divider';
 import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import Helmet from 'react-helmet';
-import Link from '@material-ui/core/Link';
-import GitHubIcon from '@material-ui/icons/GitHub';
 import AppDrawer from './AppDrawer';
 import Version from './Version';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
+import Hidden from '@material-ui/core/Hidden';
+import withWidth from '@material-ui/core/withWidth';
+import AppBar from './AppBar';
 
 const drawerWidth = 350;
 
@@ -40,6 +38,9 @@ const useStyles = makeStyles((theme) => ({
       duration: theme.transitions.duration.enteringScreen,
     }),
   },
+  appBarShiftStatic: {
+    flexGrow: 1
+  },
   menuButton: {
     marginRight: theme.spacing(2),
   },
@@ -77,13 +78,18 @@ const useStyles = makeStyles((theme) => ({
     }),
     marginLeft: 0,
   },
+  contentStatic: {
+    flexGrow: 1,
+    padding: theme.spacing(1),
+  }
 }));
 
 const App = (props) => {
   const { children } = props;
   const classes = useStyles();
   const theme = useTheme();
-  const [open, setOpen] = React.useState(true);
+  const [open, setOpen] = React.useState(false);
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   const handleDrawerOpen = () => {
     setOpen(true);
@@ -93,74 +99,73 @@ const App = (props) => {
     setOpen(false);
   };
 
+  useEffect(() => {
+    setOpen(!isSmallScreen);
+  }, [isSmallScreen]);
+
   return (
     <div className={classes.root}>
       <Helmet titleTemplate="Basic Primitives Diagrams %s" />
       <CssBaseline />
-      <AppBar
-        position="fixed"
-        className={clsx(classes.appBar, {
-          [classes.appBarShift]: open,
-        })}
-      >
-        <Toolbar>
-          <IconButton
-            color="inherit"
-            aria-label="open drawer"
-            onClick={handleDrawerOpen}
-            edge="start"
-            className={clsx(classes.menuButton, open && classes.hide)}
-          >
-            <MenuIcon />
-          </IconButton>
-          <div className={classes.grow}>
-            <Typography variant="h6" noWrap>
-              Basic Primitives
-            </Typography>
+      <Hidden smDown implementation="js">
+        <AppBar open={open} className={clsx(classes.appBar, {
+            [classes.appBarShift]: open,
+          })} handleDrawerOpen={handleDrawerOpen}
+        />
+        <Drawer
+          className={classes.drawer}
+          variant="persistent"
+          anchor="left"
+          open={open}
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+        >
+          <div className={classes.drawerHeader}>
+            {Version()}  
+            <IconButton onClick={handleDrawerClose}>
+              {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+            </IconButton>
+          </div>
+          <Divider />
+          <AppDrawer onClose={() => setOpen(!isSmallScreen)} />
+        </Drawer>
+        <main
+          className={clsx(classes.content, {
+            [classes.contentShift]: open,
+          })}
+        >
+          <div className={classes.drawerHeader} />
+          {children}
+        </main>
+      </Hidden>
+      <Hidden mdUp implementation="js">
+        <AppBar open={open} className={classes.appBarShiftStatic} handleDrawerOpen={handleDrawerOpen} />
+        <Drawer
+          className={classes.drawer}
+          anchor="left"
+          open={open}
+          classes={{
+            paper: classes.drawerPaper,
+          }}
+        >
+          <div className={classes.drawerHeader}>
+            {Version()}  
+            <IconButton onClick={handleDrawerClose}>
+              {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+            </IconButton>
           </div>
-          <IconButton 
-            color="inherit"
-            edge="end"
-            aria-label="GitHub repos."
-          >
-            <Link
-              color="inherit"
-              href="https://github.com/BasicPrimitives"
-            >
-              <GitHubIcon />
-            </Link>
-          </IconButton>
-        </Toolbar>
-      </AppBar>
-      <Drawer
-        className={classes.drawer}
-        variant="persistent"
-        anchor="left"
-        open={open}
-        classes={{
-          paper: classes.drawerPaper,
-        }}
-      >
-        <div className={classes.drawerHeader}>
-          {Version()}  
-          <IconButton onClick={handleDrawerClose}>
-            {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
-          </IconButton>
-        </div>
-        <Divider />
-        <AppDrawer />
-      </Drawer>
-      <main
-        className={clsx(classes.content, {
-          [classes.contentShift]: open,
-        })}
-      >
-        <div className={classes.drawerHeader} />
-        {children}
-      </main>
+          <Divider />
+          <AppDrawer onClose={() => setOpen(!isSmallScreen)} />
+        </Drawer>
+        <main className={classes.contentStatic} >
+          <div className={classes.drawerHeader} />
+          {children}
+        </main>
+      </Hidden>
     </div>
   );
 }
 
 
-export default App;
+export default withWidth()(App);
diff --git a/client/src/containers/App/AppBar.js b/client/src/containers/App/AppBar.js
new file mode 100644
index 0000000..e1582c9
--- /dev/null
+++ b/client/src/containers/App/AppBar.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Link from '@material-ui/core/Link';
+import GitHubIcon from '@material-ui/icons/GitHub';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+import clsx from 'clsx';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme) => ({
+  grow: {
+    flexGrow: 1,
+  },
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+  hide: {
+    display: 'none',
+  },
+}));
+
+export default function ApplicationBar(props) {
+  const { open, className, handleDrawerOpen } = props;
+  const classes = useStyles();
+  return (
+    <AppBar
+    position="fixed"
+    className={className}
+  >
+    <Toolbar>
+      <IconButton
+        color="inherit"
+        aria-label="open drawer"
+        onClick={handleDrawerOpen}
+        edge="start"
+        className={clsx(classes.menuButton, open && classes.hide)}
+      >
+        <MenuIcon />
+      </IconButton>
+      <div className={classes.grow}>
+        <Typography variant="h6" noWrap>
+          Basic Primitives
+        </Typography>
+      </div>
+      <IconButton 
+        color="inherit"
+        edge="end"
+        aria-label="GitHub repos."
+      >
+        <Link
+          color="inherit"
+          href="https://github.com/BasicPrimitives"
+        >
+          <GitHubIcon />
+        </Link>
+      </IconButton>
+    </Toolbar>
+  </AppBar>
+  );
+}
diff --git a/client/src/containers/FamilyChartWithAnnotations/FamilyChartWithAnnotations.js b/client/src/containers/FamilyChartWithAnnotations/FamilyChartWithAnnotations.js
index 1b256eb..60f39ad 100644
--- a/client/src/containers/FamilyChartWithAnnotations/FamilyChartWithAnnotations.js
+++ b/client/src/containers/FamilyChartWithAnnotations/FamilyChartWithAnnotations.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useCallback } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import Helmet from 'react-helmet';
 import Container from '@material-ui/core/Container';
 import Drawer from '@material-ui/core/Drawer';
diff --git a/client/src/containers/ReactUseCases/ReactHowToUse.js b/client/src/containers/ReactUseCases/ReactHowToUse.js
index ff0ceb9..c851ef5 100644
--- a/client/src/containers/ReactUseCases/ReactHowToUse.js
+++ b/client/src/containers/ReactUseCases/ReactHowToUse.js
@@ -15,7 +15,7 @@ import { faUserPlus, faUserSlash, faCoffee, faSitemap, faUser, faComment, faCog
 import primitives from 'basicprimitives';
 import { OrgDiagram, FamDiagram } from 'basicprimitivesreact';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { DndProvider, DropTarget, DragSource } from 'react-dnd';
+import { DndProvider, useDrag, useDrop, DropTarget, DragSource } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 require('./global.scss');
 
@@ -70,6 +70,8 @@ function ReactHowToUse(props) {
             DndProvider,
             DropTarget,
             DragSource,
+            useDrag,
+            useDrop,
             HTML5Backend,
             FontAwesomeIcon,
             faUserPlus,
diff --git a/client/src/containers/Reference/ApiReference.js b/client/src/containers/Reference/ApiReference.js
index 1ae3496..6739acd 100644
--- a/client/src/containers/Reference/ApiReference.js
+++ b/client/src/containers/Reference/ApiReference.js
@@ -1,6 +1,8 @@
 import React, { useEffect } from 'react';
 import Helmet from 'react-helmet';
 import { Link } from '@reach/router';
+import TableContainer from '@material-ui/core/TableContainer';
+import Paper from '@material-ui/core/Paper';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
@@ -29,12 +31,6 @@ function ApiReference(props) {
   let key = 0;
 
   function handleIterate(Tag, props, children, level) {
-    if (level === 1) {
-      props = {
-        ...props,
-        className: 'first-level-class'
-      };
-    }
     key++;
     switch(Tag) {
       case "h2":
@@ -56,7 +52,7 @@ function ApiReference(props) {
         }
         break;
       case 'table':
-        return <Table key={key}>{children}</Table>;
+        return <Paper style={{overflowX: "auto"}}><Table style={{minWidth: 640}} key={key}>{children}</Table></Paper>;
       case 'tbody':
         return <TableBody key={key}>{children}</TableBody>;
       case 'thead':
@@ -76,6 +72,8 @@ function ApiReference(props) {
         return <TableCell style={style} key={key}>{children}</TableCell>;
       case 'td':
         return <TableCell key={key}>{children}</TableCell>;
+      case 'span':
+        return <Container maxWidth={false}>{children}</Container>;
       default:
         break;
     }
@@ -88,10 +86,10 @@ function ApiReference(props) {
   }
 
   return (markdown ?
-    <Container fixed>
+    <>
       <Helmet title={` API Reference - ${title}`} />
       <MDReactComponent text={markdown} onIterate={handleIterate} />
-    </Container>
+    </>
     : <>
     </>
   );
diff --git a/server/src/static/orgeditor.md b/server/src/static/orgeditor.md
index 61efb8e..923e32a 100644
--- a/server/src/static/orgeditor.md
+++ b/server/src/static/orgeditor.md
@@ -1,13 +1,16 @@
 ## Demoed features
 ### General
 * Diagram reset
-* PDF file generation
+* [PDF file generation](https://pdfkit.org/)
 * Diagram options drawer
 * Nodes search drawer
 * Add new root node
-* Drag & Drop node from parent to parent
+* [React](https://reactjs.org/)
+* [Redux](https://redux.js.org/)
+* [React Drag & Drop support](https://react-dnd.github.io/react-dnd/docs/overview)
+* [React Material-UI](https://material-ui.com/)
 ### Dual Mode View
-* Showing two diagram components side by side lets you see distant parts of the same diagram
+* Showing two diagraming components side by side let you see distant parts of the same diagram
 * Zoom in on one side and Drag & Drop nodes to other side.
 ### Diagram node:
 * Edit node properties
@@ -22,5 +25,5 @@
 * Remove item from selected nodes
 
 
-## Matrix children layout 
+### Matrix children layout 
 Usually organizational charts grow horizontally more than vertically. So keeping nodes in square formation saves horizontal space. It is important to fit matrix into width of screen, it is fine to scroll nodes vertically or horizontally, but necessaty to scroll both ways creates usability issue, so chart support extra option `maximumColumnsInMatrix` limiting number of columns. For example when node has 4 children they are matrxied into 2 * 2 matrix, 9 children are matrixed into 3 * 3 matrix, 16 into 4 * 4 and so on, but if we put limitation for number of columns for example at 4 then 20 children would be matrixed into 4 * 5 matrix.
\ No newline at end of file