Added new navigation structure to docs.

Author: Hyperkid123

packages/react-renderer-demo/src/components/layout.js

@@ -13,7 +13,7 @@ import MenuIcon from '@material-ui/icons/Menu';
 import SvgIcon from '@material-ui/core/SvgIcon';
 import { useRouter } from 'next/router';
 
-import { flatSchema } from './navigation/schema';
+import { flatSchema } from './navigation/schemas/schema';
 import GhIcon from './common/gh-svg-icon';
 import Navigation from './navigation/app-navigation';
 import MenuContext from './navigation/menu-context';

packages/react-renderer-demo/src/components/navigation/app-navigation.js

@@ -10,7 +10,7 @@ import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 
 import { navStyles } from './nav-styles';
 import MenuRenderer from './menu-renderer';
-import schema from './schema';
+import schema from './schemas/schema';
 
 const useStyles = makeStyles(navStyles);
 

packages/react-renderer-demo/src/components/navigation/documentation-pages.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
+import ListSubheader from '@material-ui/core/ListSubheader';
 import Typography from '@material-ui/core/Typography';
 import ExpandLess from '@material-ui/icons/ExpandLess';
 import ExpandMore from '@material-ui/icons/ExpandMore';
@@ -59,7 +60,7 @@ const FinalList = ({ title, level, link, fields, previousLinks = [], renderItems
     <List key={title} component="nav">
       {title && (
         <ListItem button onClick={openable ? closeNav : null} className={classes.listItem}>
-          <ListItemText primary={title} />
+          <ListItemText primary={title} className={classes.listItemText} />
           {openable ? isOpen ? <ExpandLess /> : <ExpandMore /> : null}
         </ListItem>
       )}
@@ -72,9 +73,12 @@ const FinalList = ({ title, level, link, fields, previousLinks = [], renderItems
   );
 };
 
+const SubHeader = ({ title }) => <ListSubheader>{title}</ListSubheader>;
+
 const Mapper = {
   Wrapper: FinalList,
-  Item
+  Item,
+  SubHeader
 };
 
 export default Mapper;

packages/react-renderer-demo/src/components/navigation/mapper.js

@@ -39,14 +39,18 @@ const renderItems = (items, level = 0, previousLinks = ['']) => {
 
   const href = createLink(...previousLinks, link || component);
 
+  if (props.subHeader) {
+    return <Mapper.SubHeader key={title} title={title} />;
+  }
+
   return <Mapper.Item href={href} level={level} key={`${link || component}-${linkText}`} linkText={linkText} component={component} {...props} />;
 };
 
 const MenuRenderer = ({ schema }) => {
   return <React.Fragment>{renderItems(schema)}</React.Fragment>;
 };
 
-const searchFunction = (linkText, value) =>
+const searchFunction = (linkText = '', value) =>
   linkText
     .toLowerCase()
     .replace(/ /g, '')

packages/react-renderer-demo/src/components/navigation/menu-renderer.js

@@ -48,5 +48,10 @@ export const navStyles = (theme) => ({
     width: '100%',
     paddingLeft: 16,
     paddingRight: 16
+  },
+  listItemText: {
+    '&>span': {
+      fontSize: 14
+    }
   }
 });

packages/react-renderer-demo/src/components/navigation/nav-styles.js

@@ -0,0 +1,12 @@
+const schemaHooks = [
+  {
+    component: 'use-field-api',
+    linkText: 'Use field api'
+  },
+  {
+    component: 'use-form-api',
+    linkText: 'Use form api'
+  }
+];
+
+export default schemaHooks;

packages/react-renderer-demo/src/components/navigation/schemas/hooks.schema.js

@@ -0,0 +1,58 @@
+const mappersSchema = [
+  {
+    subHeader: true,
+    noRoute: true,
+    title: 'Component mapper'
+  },
+  {
+    linkText: 'Custom mapper',
+    link: 'custom-mapper'
+  },
+  {
+    linkText: 'blueprint-mapper',
+    link: 'Blueprint mapper'
+  },
+  {
+    linkText: 'mui-mapper',
+    link: 'Material UI mapper'
+  },
+  {
+    linkText: 'pf3-mapper',
+    link: 'PF3 mapper'
+  },
+  {
+    linkText: 'pf4-mapper',
+    link: 'PF4 mapper'
+  },
+  {
+    linkText: 'suir-mapper',
+    link: 'Semantic UI mapper'
+  },
+  {
+    subHeader: true,
+    noRoute: true,
+    title: 'Mapper components'
+  },
+  /**
+   * Here will be component definitions
+   */
+  {
+    subHeader: true,
+    noRoute: true,
+    title: 'Schema mappers'
+  },
+  {
+    linkText: 'action-mapper',
+    link: 'Actio mapper'
+  },
+  {
+    linkText: 'schema-validator-mapper ',
+    link: 'Schema validator mapper'
+  },
+  {
+    linkText: 'validator-mapper',
+    link: 'Validator mapper'
+  }
+];
+
+export default mappersSchema;

packages/react-renderer-demo/src/components/navigation/schemas/mappers.schema.js

@@ -0,0 +1,38 @@
+const schemaRenderer = [
+  {
+    subHeader: true,
+    title: 'Renderer',
+    noRoute: true
+  },
+  {
+    component: 'renderer',
+    linkText: 'Renderer'
+  },
+  {
+    component: 'form-template',
+    linkText: 'Form template'
+  },
+  {
+    subHeader: true,
+    title: 'Form components',
+    noRoute: true
+  },
+  {
+    component: 'field-array',
+    linkText: 'Field array'
+  },
+  {
+    component: 'field-provider',
+    linkText: 'Field provider'
+  },
+  {
+    component: 'form',
+    linkText: 'Form'
+  },
+  {
+    component: 'form-spy',
+    linkText: 'Form spy'
+  }
+];
+
+export default schemaRenderer;

packages/react-renderer-demo/src/components/navigation/schemas/renderer.schema.js

@@ -1,18 +1,43 @@
-import { baseExamples } from './examples-definitions';
-import { docs } from './documentation-pages';
-import { mappers } from './mappers';
+import { baseExamples } from '../examples-definitions';
+import { mappers } from '../mappers';
 import flatMap from 'lodash/flatMap';
+import schemaRenderer from './renderer.schema';
+import schemaNav from './schema.schema';
+import schemaHooks from './hooks.schema';
+import mappersSchema from './mappers.schema';
 
 const schema = [
   {
-    linkText: 'Form builder',
-    link: 'live-editor'
+    linkText: 'Installation',
+    link: 'installation'
+  },
+  {
+    title: 'Schema',
+    noRoute: true,
+    link: 'schema',
+    fields: schemaNav
+  },
+  {
+    title: 'Components',
+    link: 'components',
+    noRoute: true,
+    fields: schemaRenderer
+  },
+  {
+    title: 'Hooks',
+    link: 'hooks',
+    noRoute: true,
+    fields: schemaHooks
   },
   {
-    title: 'React form renderer',
-    link: 'renderer',
+    title: 'Mappers',
+    link: 'mappers',
     noRoute: true,
-    fields: docs
+    fields: mappersSchema
+  },
+  {
+    linkText: 'Form builder',
+    link: 'live-editor'
   },
   {
     title: 'Component definitions',
@@ -30,6 +55,14 @@ const schema = [
     linkText: 'Testing',
     link: 'testing'
   },
+  {
+    linkText: 'Typescript',
+    link: 'typescript'
+  },
+  {
+    linkText: 'Development setup',
+    link: 'dev-setup'
+  },
   {
     linkText: 'Releases',
     link: 'releases'
@@ -66,6 +99,10 @@ export const flatSchema = flatMap(schema, (item) =>
     ? [
         item,
         ...item.fields.map((child) => {
+          if (child.noRoute) {
+            return undefined;
+          }
+
           child.link = child.link || child.component;
           return {
             ...child,
@@ -74,16 +111,18 @@ export const flatSchema = flatMap(schema, (item) =>
         })
       ]
     : [item]
-).reduce(
-  (acc, curr, currentIndex, source) => [
-    ...acc,
-    {
-      ...curr,
-      prev: getPrevLink(curr, currentIndex, source),
-      next: getNextLink(curr, currentIndex, source)
-    }
-  ],
-  []
-);
+)
+  .filter((link) => typeof link !== 'undefined')
+  .reduce(
+    (acc, curr, currentIndex, source) => [
+      ...acc,
+      {
+        ...curr,
+        prev: getPrevLink(curr, currentIndex, source),
+        next: getNextLink(curr, currentIndex, source)
+      }
+    ],
+    []
+  );
 
 export default schema;