Separate Redux and standalone example

.vscode/extensions.json

@@ -0,0 +1,12 @@
+{
+  // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "ms-vscode.vscode-typescript-tslint-plugin"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": []
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "prettier.jsxSingleQuote": true,
+    "prettier.singleQuote": true
+} 

package.json

@@ -3,26 +3,28 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@jsonforms/core": "2.3.1",
-    "@jsonforms/material-renderers": "2.3.1",
-    "@jsonforms/react": "2.3.1",
-    "@material-ui/core": "^4.3.3",
-    "@material-ui/icons": "^4.2.1",
-    "@types/jest": "^24.0.18",
-    "@types/node": "^12.7.2",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-redux": "^7.1.2",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
-    "react-redux": "^7.1.1",
+    "@jsonforms/core": "^2.3.2-beta.0",
+    "@jsonforms/material-renderers": "^2.3.2-beta.0",
+    "@jsonforms/react": "^2.3.2-beta.0",
+    "@material-ui/core": "^4.7.0",
+    "@material-ui/icons": "^4.5.1",
+    "@types/jest": "^24.0.23",
+    "@types/lodash": "^4.14.149",
+    "@types/node": "^12.12.14",
+    "@types/react": "^16.9.13",
+    "@types/react-dom": "^16.9.4",
+    "@types/react-redux": "^7.1.5",
+    "lodash": "^4.17.15",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-redux": "^7.1.3",
     "redux": "^4.0.4",
-    "typescript": "^3.5.3"
+    "typescript": "^3.7.2"
   },
   "devDependencies": {
-    "cypress": "^3.4.1",
-    "react-scripts": "^3.1.1",
-    "start-server-and-test": "^1.10.0"
+    "cypress": "^3.7.0",
+    "react-scripts": "^3.2.0",
+    "start-server-and-test": "^1.10.6"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -24,6 +24,10 @@
 }
 
 @keyframes App-logo-spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
 }

src/App.tsx

@@ -1,17 +1,27 @@
-import React, { Fragment, useState } from 'react';
-import { connect } from 'react-redux';
-import {getData, JsonFormsState} from '@jsonforms/core';
-import { JsonForms, JsonFormsDispatch, JsonFormsReduxContext } from '@jsonforms/react';
-import Grid from "@material-ui/core/Grid";
-import Typography from "@material-ui/core/Typography";
-import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
-import createStyles from "@material-ui/core/styles/createStyles";
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import {
+  JsonForms,
+  JsonFormsDispatch,
+  JsonFormsReduxContext
+} from '@jsonforms/react';
+import { Provider } from 'react-redux';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+import withStyles, { WithStyles } from '@material-ui/core/styles/withStyles';
+import createStyles from '@material-ui/core/styles/createStyles';
 import { Tabs, Tab } from '@material-ui/core';
 import logo from './logo.svg';
 import './App.css';
 import schema from './schema.json';
 import uischema from './uischema.json';
-import { materialRenderers } from '@jsonforms/material-renderers';
+import {
+  materialCells,
+  materialRenderers
+} from '@jsonforms/material-renderers';
+import { Store } from 'redux';
+import { get } from 'lodash';
+import RatingControl from './RatingControl';
+import ratingControlTester from './ratingControlTester';
 
 const styles = createStyles({
   container: {
@@ -25,7 +35,7 @@ const styles = createStyles({
     display: 'flex',
     justifyContent: 'center',
     borderRadius: '0.25em',
-    backgroundColor: '#cecece',
+    backgroundColor: '#cecece'
   },
   demoform: {
     margin: 'auto',
@@ -34,93 +44,118 @@ const styles = createStyles({
 });
 
 export interface AppProps extends WithStyles<typeof styles> {
-  dataAsString: string;
+  store: Store;
 }
 
-const App = ({ classes, dataAsString }: AppProps) => {
+const data = {
+  name: 'Send email to Adrian',
+  description: 'Confirm if you have passed the subject\nHereby ...',
+  done: true,
+  recurrence: 'Daily',
+  rating: 3
+};
+
+const getDataAsStringFromStore = (store: Store) =>
+  store
+    ? JSON.stringify(
+        get(store.getState(), ['jsonforms', 'core', 'data']),
+        null,
+        2
+      )
+    : '';
+
+const App = ({ store, classes }: AppProps) => {
   const [tabIdx, setTabIdx] = useState(0);
-  function handleTabChange(event: any, newValue: number) {
-    setTabIdx(newValue);
-  }
+  const [displayDataAsString, setDisplayDataAsString] = useState('');
+  const [standaloneData, setStandaloneData] = useState(data);
+  const handleTabChange = useCallback(
+    (event: any, newValue: number) => {
+      setTabIdx(newValue);
+      setDisplayDataAsString(
+        newValue === 0
+          ? getDataAsStringFromStore(store)
+          : JSON.stringify(standaloneData, null, 2)
+      );
+    },
+    [store, standaloneData]
+  );
+
+  useEffect(() => {
+    const updateStringData = () => {
+      const stringData = getDataAsStringFromStore(store);
+      setDisplayDataAsString(stringData);
+    };
+    store.subscribe(updateStringData);
+    updateStringData();
+  }, [store]);
+
+  useEffect(() => {
+    setDisplayDataAsString(JSON.stringify(standaloneData, null, 2));
+  }, [standaloneData]);
+
   return (
     <Fragment>
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to JSON Forms with React</h1>
-          <p className="App-intro">More Forms. Less Code.</p>
+      <div className='App'>
+        <header className='App-header'>
+          <img src={logo} className='App-logo' alt='logo' />
+          <h1 className='App-title'>Welcome to JSON Forms with React</h1>
+          <p className='App-intro'>More Forms. Less Code.</p>
         </header>
       </div>
 
-      <Tabs value={tabIdx} onChange={handleTabChange}>
-        <Tab label="via Redux" />
-        <Tab label="Standalone" />
-      </Tabs>
-
-      {tabIdx === 0 &&
-        <Grid container justify={'center'} spacing={1} className={classes.container}>
-          <Grid item sm={6}>
-            <Typography
-              variant={'h3'}
-              className={classes.title}
-            >
-              Bound data
-            </Typography>
-            <div className={classes.dataContent}>
-              <pre id="boundData">{dataAsString}</pre>
+      <Grid
+        container
+        justify={'center'}
+        spacing={1}
+        className={classes.container}
+      >
+        <Grid item sm={6}>
+          <Typography variant={'h3'} className={classes.title}>
+            Bound data
+          </Typography>
+          <div className={classes.dataContent}>
+            <pre id='boundData'>{displayDataAsString}</pre>
+          </div>
+        </Grid>
+        <Grid item sm={6}>
+          <Typography variant={'h3'} className={classes.title}>
+            Rendered form
+          </Typography>
+          <Tabs value={tabIdx} onChange={handleTabChange}>
+            <Tab label='via Redux' />
+            <Tab label='Standalone' />
+          </Tabs>
+          {tabIdx === 0 && (
+            <div className={classes.demoform} id='form'>
+              {store ? (
+                <Provider store={store}>
+                  <JsonFormsReduxContext>
+                    <JsonFormsDispatch />
+                  </JsonFormsReduxContext>
+                </Provider>
+              ) : null}
             </div>
-          </Grid>
-          <Grid item sm={6}>
-            <Typography
-              variant={'h3'}
-              className={classes.title}
-            >
-              Rendered form
-            </Typography>
-            <div className={classes.demoform} id="form">
-              <JsonFormsReduxContext>
-                <JsonFormsDispatch />
-              </JsonFormsReduxContext>
+          )}
+          {tabIdx === 1 && (
+            <div className={classes.demoform}>
+              <JsonForms
+                schema={schema}
+                uischema={uischema}
+                data={standaloneData}
+                renderers={[
+                  ...materialRenderers,
+                  //register custom renderer
+                  { tester: ratingControlTester, renderer: RatingControl }
+                ]}
+                cells={materialCells}
+                onChange={({ errors, data }) => setStandaloneData(data)}
+              />
             </div>
-          </Grid>
+          )}
         </Grid>
-      }
-      {tabIdx === 1 &&
-        <div className={classes.demoform} style={{ maxWidth: 1000 }}>
-          <JsonForms
-            schema={schema}
-            uischema={uischema}
-            data={{
-              name: 'Send email to Adrian',
-              description: 'Confirm if you have passed the subject\nHereby ...',
-              done: true,
-              recurrence: 'Daily',
-              rating: 3,
-            }}
-            renderers={materialRenderers}
-          />
-          <JsonForms
-            schema={schema}
-            uischema={uischema}
-            data={{
-              name: undefined,
-              due_date: '2019-06-19',
-              description: 'Confirm if you have passed the subject\nHereby ...',
-              done: true,
-              recurrence: 'Daily',
-              rating: 3,
-            }}
-            renderers={materialRenderers}
-          />
-        </div>
-      }
+      </Grid>
     </Fragment>
   );
 };
 
-const mapStateToProps = (state: JsonFormsState) => {
-  return { dataAsString: JSON.stringify(getData(state), null, 2) }
-};
-
-export default connect(mapStateToProps)(withStyles(styles)(App));
-
+export default withStyles(styles)(App);

src/Rating.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 
 // TODO: typings
 export class Rating extends React.Component<any, any> {
-
   constructor(props: any) {
     super(props);
     this.state = {
@@ -42,28 +41,28 @@ export class Rating extends React.Component<any, any> {
   render() {
     const { onClick } = this.props;
 
-    return (<div id="#/properties/rating">
-        <p>
-          Rating:
-        </p>
-      {
-        [0, 1, 2, 3, 4].map(i => {
-          const rating = this.state.hoverAt != null ? this.state.hoverAt : this.state.rating;
-
-          return <span onMouseOver={() => this.handleMouseOver(i)}
-            onMouseOut={() => this.handleMouseOut()}
-            onClick={() => {
-              this.handleClick(i);
-              onClick({ value: i + 1 });
+    return (
+      <div id='#/properties/rating'>
+        <p>Rating:</p>
+        {[0, 1, 2, 3, 4].map(i => {
+          const rating =
+            this.state.hoverAt != null ? this.state.hoverAt : this.state.rating;
 
-            }}
-            key={`${this.props.id}_${i}`}
-          >
-            {i < rating ? '\u2605' : '\u2606'}
-          </span>;
-        })
-      }
-    </div>
+          return (
+            <span
+              onMouseOver={() => this.handleMouseOver(i)}
+              onMouseOut={() => this.handleMouseOut()}
+              onClick={() => {
+                this.handleClick(i);
+                onClick({ value: i + 1 });
+              }}
+              key={`${this.props.id}_${i}`}
+            >
+              {i < rating ? '\u2605' : '\u2606'}
+            </span>
+          );
+        })}
+      </div>
     );
   }
 }