Added simple drawer for sm

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);

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>
+  );
+}

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';

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,

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>
+    </>
     : <>
     </>
   );

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.