dev tools for JSON (#411)

Author: nicolaskruchten

dev/App.js

@@ -2,8 +2,10 @@ import React, {Component} from 'react';
 import {hot} from 'react-hot-loader';
 import plotly from 'plotly.js/dist/plotly';
 import '../src/styles/main.scss';
-import Nav from './Nav';
-import PlotlyEditor from '../src';
+import 'react-select/dist/react-select.css';
+import ReactJson from 'react-json-view';
+import Select from 'react-select';
+import PlotlyEditor, {DefaultEditor, Panel} from '../src';
 
 // https://github.com/plotly/react-chart-editor#mapbox-access-tokens
 import ACCESS_TOKENS from '../accessTokens';
@@ -82,12 +84,43 @@ class App extends Component {
           useResizeHandler
           debug
           advancedTraceTypeSelector
-        />
-        <Nav
-          currentMockIndex={this.state.currentMockIndex}
-          loadMock={this.loadMock}
-          mocks={this.state.mocks}
-        />
+        >
+          {' '}
+          <DefaultEditor>
+            <Panel group="Dev" name="JSON">
+              <Select
+                clearable={true}
+                value={this.state.currentMockIndex}
+                name="mock-dropdown"
+                options={this.state.mocks.map((item, i) => ({
+                  label: item,
+                  value: i,
+                }))}
+                searchable={true}
+                searchPromptText="Search for a mock"
+                onChange={option => this.loadMock(option.value)}
+                noResultsText={'No Results'}
+                placeholder={'Search for a mock'}
+              />
+              <br />
+              <ReactJson
+                enableClipboard={false}
+                name={false}
+                displayDataTypes={false}
+                displayObjectSize={false}
+                indentWidth={2}
+                onAdd={({updated_src}) => this.setState(updated_src)}
+                onEdit={({updated_src}) => this.setState(updated_src)}
+                onDelete={({updated_src}) => this.setState(updated_src)}
+                src={{
+                  data: this.state.data,
+                  layout: this.state.layout,
+                  frames: this.state.frames,
+                }}
+              />
+            </Panel>
+          </DefaultEditor>
+        </PlotlyEditor>
       </div>
     );
   }

dev/Nav.js

@@ -5,49 +5,7 @@ body {
 }
 
 .app {
-  height: calc(100vh - 50px);
-  max-height: calc(100vh - 50px);
+  height: 100vh;
+  max-height: 100vh;
 }
 
-.mock-nav {
-  height: 50px;
-  width: 100%;
-  background-color: #506784;
-  display: inline-flex;
-  color: white;
-}
-
-.mock-nav__label {
-  line-height: 50px;
-  padding-left: 10px;
-}
-
-.mock-nav__select {
-  width: 300px;
-  margin-left: 20px;
-  margin-right: 20px;
-  margin-top: 7px;
-}
-
-.Select.open-top .Select-menu-outer {
-  top: auto;
-  bottom: 100%;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  border-bottom-right-radius: unset;
-  border-bottom-left-radius: unset;
-}
-.Select.open-top .Select-option:first-child {
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-}
-.Select.open-top .Select-option:last-child {
-  border-bottom-right-radius: unset;
-  border-bottom-left-radius: unset;
-}
-.Select.open-top .Select.is-open > .Select-control {
-  border-top-right-radius: unset;
-  border-top-left-radius: unset;
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
-}

dev/styles.css

@@ -63,6 +63,7 @@
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-hot-loader": "^4.0.0-beta.21",
+    "react-json-view": "^1.16.1",
     "react-test-renderer": "^16.2.0",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.1",

package.json

@@ -16,7 +16,7 @@ import {
   StyleUpdateMenusPanel,
 } from './default_panels';
 
-const DefaultEditor = ({localize: _}) => (
+const DefaultEditor = ({children, localize: _}) => (
   <Fragment>
     <PanelMenuWrapper>
       <GraphCreatePanel group={_('Graph')} name={_('Create')} />
@@ -30,12 +30,14 @@ const DefaultEditor = ({localize: _}) => (
       <StyleImagesPanel group={_('Style')} name={_('Images')} />
       <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />
       <StyleUpdateMenusPanel group={_('Style')} name={_('Update Menus')} />
+      {children ? children : null}
     </PanelMenuWrapper>
   </Fragment>
 );
 
 DefaultEditor.propTypes = {
   localize: PropTypes.func,
+  children: PropTypes.node,
 };
 
 export default localize(DefaultEditor);

src/DefaultEditor.js

@@ -48,6 +48,9 @@ class PanelsWithSidebar extends Component {
     let groupIndex;
 
     React.Children.forEach(children, child => {
+      if (!child) {
+        return;
+      }
       const group = child.props.group;
       const name = child.props.name;
 
@@ -81,6 +84,7 @@ class PanelsWithSidebar extends Component {
         {React.Children.map(
           this.props.children,
           (child, i) =>
+            child === null ||
             this.state.group !== child.props.group ||
             this.state.panel !== child.props.name
               ? null

src/components/PanelMenuWrapper.js

@@ -1,4 +1,5 @@
 import PlotlyEditor from './PlotlyEditor';
+import DefaultEditor from './DefaultEditor';
 import EditorControls from './EditorControls';
 import {
   connectAnnotationToLayout,
@@ -143,6 +144,7 @@ export {
   localizeString,
   walkObject,
   EditorControls,
+  DefaultEditor,
 };
 
 export default PlotlyEditor;

src/index.js

@@ -38,6 +38,8 @@ module.exports = {
       },
     ],
   },
+
+  plugins: [new webpack.IgnorePlugin(/vertx/)],
   devServer: {
     open: true,
     contentBase: './dev',