Add dynamic props #219

geppetto-showcase/App.js

@@ -1,60 +1,72 @@
-import React, { Component } from "react";
-import { createMuiTheme, responsiveFontSizes, MuiThemeProvider } from "@material-ui/core/styles";
-import { blue, green, orange, purple } from "@material-ui/core/colors";
-import Main from "./components/ui/Main";
-import CssBaseline from "@material-ui/core/CssBaseline";
+import React, { Component } from 'react';
+import {
+  createMuiTheme,
+  responsiveFontSizes,
+  MuiThemeProvider,
+} from '@material-ui/core/styles';
+import { blue, orange } from '@material-ui/core/colors';
+import Main from './components/Main';
+import CssBaseline from '@material-ui/core/CssBaseline';
 
 const GEPPETTO = {};
 window.GEPPETTO = GEPPETTO;
-require('@geppettoengine/geppetto-client/js/common/GEPPETTO.Resources').default(GEPPETTO);
-require('@geppettoengine/geppetto-client/js/pages/geppetto/GEPPETTO.Events').default(GEPPETTO);
-const Manager = require('@geppettoengine/geppetto-client/js/common/Manager').default;
-const ModelFactory = require('@geppettoengine/geppetto-client/js/geppettoModel/ModelFactory').default(GEPPETTO);
+require('@geppettoengine/geppetto-client/js/common/GEPPETTO.Resources').default(
+  GEPPETTO
+);
+require('@geppettoengine/geppetto-client/js/pages/geppetto/GEPPETTO.Events').default(
+  GEPPETTO
+);
+const Manager = require('@geppettoengine/geppetto-client/js/common/Manager')
+  .default;
+const ModelFactory = require('@geppettoengine/geppetto-client/js/geppettoModel/ModelFactory').default(
+  GEPPETTO
+);
 const testModel = require('@geppettoengine/geppetto-client/__tests__/resources/test_model.json');
-const AA = require('@geppettoengine/geppetto-client/js/geppettoModel/model/ArrayElementInstance').default;
+const AA = require('@geppettoengine/geppetto-client/js/geppettoModel/model/ArrayElementInstance')
+  .default;
 
 GEPPETTO.Utility = {};
 GEPPETTO.Utility.extractMethodsFromObject = () => [];
-GEPPETTO.trigger = evt => console.log(evt, 'triggered');
+GEPPETTO.trigger = (evt) => console.log(evt, 'triggered');
 GEPPETTO.Manager = new Manager();
 console.warn = () => null;
 GEPPETTO.CommandController = {
   log: console.log,
-  createTags: (a, b) => null
+  createTags: (a, b) => null,
 };
-GEPPETTO.ComponentFactory ={
+GEPPETTO.ComponentFactory = {
   addExistingComponent: console.log,
 };
 GEPPETTO.on = console.log;
 GEPPETTO.off = console.log;
 GEPPETTO.UnitsController = {
-  getUnitLabel : function (unit){
+  getUnitLabel: function(unit) {
     return unit;
   },
-  hasUnit : function (unit){
+  hasUnit: function(unit) {
     return true;
-  }
+  },
 };
 
 export default class App extends Component {
-  render () {
+  render() {
     let theme = createMuiTheme({
-      typography: { fontFamily: 'Raleway, Arial', },
+      typography: { fontFamily: 'Raleway, Arial' },
       palette: {
-        type: "dark",
-        primary: { main: orange[500], },
-        secondary: { main: blue[500], },
-        button: { main: "#fc6320", },
-        toolbarBackground: { main: "rgb(0,0,0,0.5)", },
-      }
+        type: 'dark',
+        primary: { main: orange[500] },
+        secondary: { main: blue[500] },
+        button: { main: '#fc6320' },
+        toolbarBackground: { main: 'rgb(0,0,0,0.5)' },
+      },
     });
     theme = responsiveFontSizes(theme);
 
     return (
       <MuiThemeProvider theme={theme}>
-        <CssBaseline/>
-        <Main/>
+        <CssBaseline />
+        <Main />
       </MuiThemeProvider>
     );
   }
-}
+}

geppetto-showcase/components/ui/Main.js → geppetto-showcase/components/Main.js

@@ -4,7 +4,7 @@ import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Drawer from '@material-ui/core/Drawer';
-import DrawerContent from './DrawerContent';
+import DrawerContent from './drawer/DrawerContent';
 import Button from '@material-ui/core/Button';
 
 const drawerWidth = 240;

geppetto-showcase/components/ui/DrawerContent.js → geppetto-showcase/components/drawer/DrawerContent.js

@@ -18,7 +18,7 @@ import FlexLayoutShowcase from '../../../geppetto-ui/src/components/flex-layout/
 import MoviePlayerShowcase from '../../../geppetto-ui/src/components/movie-player/showcase/MoviePlayerShowcase';
 import PythonConsoleShowcase from '../../../geppetto-ui/src/components/python-console/showcase/PythonConsoleShowcase';
 import GraphVisualizationShowcase from '../../../geppetto-ui/src/components/graph-visualization/showcase/GraphVisualizationShowcase';
-import Showcase from '../utilities/Showcase';
+import Showcase from '../showcase/Showcase';
 import { DicomViewerConfig } from '../../../geppetto-ui/src/components/dicom-viewer/showcase/DicomViewerConfig';
 
 const styles = (theme) => ({

geppetto-showcase/components/showcase/Showcase.js

@@ -0,0 +1,110 @@
+import React, { Component } from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Code from '../utilities/Code';
+import { getConfigFromMarkdown } from './ShowcaseUtils';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import Paper from '@material-ui/core/Paper';
+
+const styles = (theme) => ({
+  root: {
+    width: '100%',
+  },
+  table: {
+    minWidth: 650,
+    width: 'auto',
+    tableLayout: 'auto',
+  },
+  tableContainer: {
+    display: 'inline-block',
+  },
+  tableName: {
+    color: '#adc285',
+  },
+  tableType: {
+    color: '#a7577f',
+  },
+  tableRequired: {
+    color: '#abaaab',
+  },
+});
+
+class Showcase extends Component {
+  constructor(props) {
+    super(props);
+    this.componentRef = React.createRef();
+  }
+
+  render() {
+    const { classes, markdown } = this.props;
+
+    const configs = getConfigFromMarkdown(markdown);
+
+    return (
+      <div className={classes.root}>
+        <div className={classes.root}>
+          <h1>{configs.name}</h1>
+          <p>{configs.description}</p>
+          <h2>Props</h2>
+          <TableContainer component={Paper} className={classes.tableContainer}>
+            <Table className={classes.table} aria-label="simple table">
+              <TableHead>
+                <TableRow>
+                  <TableCell>
+                    <b>Name</b>
+                  </TableCell>
+                  <TableCell>
+                    <b>Type</b>
+                  </TableCell>
+                  <TableCell>
+                    <b>Required</b>
+                  </TableCell>
+                  <TableCell>
+                    <b>Description</b>
+                  </TableCell>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {Object.keys(configs.props).map((key) => (
+                  <TableRow key={key}>
+                    <TableCell
+                      className={classes.tableName}
+                      component="th"
+                      scope="row"
+                    >
+                      {key}
+                    </TableCell>
+                    <TableCell className={classes.tableType}>
+                      {configs.props[key].type.name}
+                    </TableCell>
+                    <TableCell className={classes.tableRequired}>
+                      {configs.props[key].required ? 'required' : 'optional'}
+                    </TableCell>
+                    <TableCell>{configs.props[key].description}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          {configs.examples.map((obj) => {
+            const file = obj.file.default.split('\n').join('\n');
+            return (
+              <div key={obj.name}>
+                <h2>{obj.name}</h2>
+                <p>{obj.description}</p>
+                <obj.component ref={this.componentRef} />
+                <Code file={file} element={configs.reactElement}></Code>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles, { withTheme: true })(Showcase);

geppetto-showcase/components/showcase/ShowcaseUtils.js

@@ -0,0 +1,152 @@
+const reactDocs = require('react-docgen');
+
+/**
+ *
+ * Gets the only h1 element in dom
+ *
+ * @command getTitle (dom)
+ *
+ * @param dom
+ */
+
+function getTitle(dom) {
+  return dom.querySelector('h1').innerHTML;
+}
+
+/**
+ *
+ * Gets the everything from the h1 element until the next pre element
+ *
+ * @command getDescription (dom)
+ *
+ * @param dom
+ */
+
+function getDescription(dom) {
+  return getContentUntil('pre', dom.querySelector('h1'));
+}
+
+/**
+ *
+ * Gets trimmed value after last slash of code block labelled with element
+ *
+ * @command getReactElement (dom)
+ *
+ * @param dom
+ */
+
+function getReactElement(dom) {
+  return dom
+    .getElementsByClassName('language-element')[0]
+    .innerHTML.split('/')
+    .pop()
+    .trim();
+}
+
+/**
+ *
+ * Gets the props of the component
+ *
+ * @command getProps (dom)
+ *
+ * @param dom
+ */
+
+function getProps(dom) {
+  const path = dom.getElementsByClassName('language-element')[0].innerHTML;
+  const src = require('!raw-loader!../../../geppetto-ui/src/components/' +
+    path +
+    '.js').default;
+  const componentInfo = reactDocs.parse(src);
+  return componentInfo.props;
+}
+
+/**
+ *
+ * Gets an array with all the examples content
+ *
+ * @command getExamples (dom)
+ *
+ * @param dom
+ */
+
+function getExamples(dom) {
+  let examplesDom = getElementsUntil(
+    'h2',
+    dom.getElementById('examples')
+  ).filter((elem) => elem.matches('h3'));
+  let examples = [];
+  while (examplesDom.length) {
+    examples.push(getExample(examplesDom.pop()));
+  }
+  return examples;
+}
+
+/**
+ *
+ * Gets all the example content
+ *
+ * @command getExample (start)
+ *
+ * @param start
+ */
+
+function getExample(start) {
+  let elements = getElementsUntil('pre', start, true);
+  let example = {
+    name: start.innerHTML,
+    description: '',
+  };
+
+  for (let elem of elements) {
+    if (elem.matches('pre')) {
+      const path = elem.children[0].innerText.trim();
+      example['component'] = require('../../../geppetto-ui/src/components/' +
+        path +
+        '.js').default;
+      example[
+        'file'
+      ] = require('!raw-loader!../../../geppetto-ui/src/components/' +
+        path +
+        '.js');
+    } else {
+      example['description'] += elem.innerHTML;
+    }
+  }
+
+  return example;
+}
+
+function getElementsUntil(selector, start, included = false) {
+  let siblings = [];
+  let elem = start.nextElementSibling;
+  while (elem) {
+    if (elem.matches(selector)) {
+      if (included) {
+        siblings.push(elem);
+      }
+      break;
+    }
+    siblings.push(elem);
+    elem = elem.nextElementSibling;
+  }
+  return siblings;
+}
+
+function getContentUntil(selector, start) {
+  return getElementsUntil(selector, start).reduce(
+    (str, elem) => str + elem.innerHTML,
+    ''
+  );
+}
+
+export function getConfigFromMarkdown(markdown) {
+  let dom = new DOMParser().parseFromString(markdown, 'text/html');
+  let configs = {};
+  configs['name'] = getTitle(dom);
+  configs['description'] = getDescription(dom);
+  configs['reactElement'] = getReactElement(dom);
+  configs['props'] = getProps(dom);
+  configs['examples'] = getExamples(dom);
+  return configs;
+}