Update dependencies, Switch to TS

Author: edgarmueller

package-lock.json

@@ -3,15 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@jsonforms/core": "^2.0.12-rc.3",
-    "@jsonforms/material-renderers": "^2.0.12-rc.3",
-    "@material-ui/core": "^3.5.1",
-    "react": "^16.3.0",
-    "react-dom": "^16.3.0",
-    "redux": "^3.7.2"
+    "@jsonforms/core": "2.2.0",
+    "@jsonforms/material-renderers": "2.2.0",
+    "@jsonforms/react": "2.2.0",
+    "@material-ui/core": "^3.9.0",
+    "@types/jest": "^23.3.12",
+    "@types/node": "^10.12.18",
+    "@types/react": "^16.4.14",
+    "@types/react-dom": "^16.0.11",
+    "@types/react-redux": "^5.0.19",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "react-redux": "^6.0.0",
+    "redux": "^3.7.2",
+    "typescript": "^3.2.2"
   },
   "devDependencies": {
-    "react-scripts": "^2.1.1"
+    "react-scripts": "^2.1.3"
   },
   "scripts": {
     "start": "react-scripts start",

package.json

@@ -0,0 +1,83 @@
+import { connect } from 'react-redux';
+import { JsonForms } from '@jsonforms/react';
+import React from '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 {getData, JsonFormsState} from '@jsonforms/core';
+import logo from './logo.svg';
+import './App.css';
+import createStyles from "@material-ui/core/styles/createStyles";
+
+const styles = createStyles({
+  container: {
+    padding: '1em'
+  },
+  title: {
+    textAlign: 'center',
+    padding: '0.25em'
+  },
+  dataContent: {
+    display: 'flex',
+    justifyContent: 'center',
+    borderRadius: '0.25em',
+    backgroundColor: '#cecece',
+  },
+  demoform: {
+    margin: 'auto'
+  }
+});
+
+export interface AppProps extends WithStyles<typeof styles> {
+  dataAsString: string;
+}
+
+class App extends React.Component<AppProps, any> {
+
+  render() {
+    const { classes, dataAsString } = this.props;
+    return (
+      <div>
+        <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>
+
+        <Grid container justify={'center'} spacing={24} className={classes.container}>
+          <Grid item sm={6}>
+            <Typography
+              variant={'display1'}
+              className={classes.title}
+            >
+              Bound data
+            </Typography>
+            <div className={classes.dataContent}>
+              <pre>{dataAsString}</pre>
+            </div>
+          </Grid>
+          <Grid item sm={6}>
+            <Typography
+              variant={'display1'}
+              className={classes.title}
+            >
+              Rendered form
+            </Typography>
+            <div className={classes.demoform}>
+              <JsonForms/>
+            </div>
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state: JsonFormsState) => {
+  return { dataAsString: JSON.stringify(getData(state), null, 2) }
+};
+
+export default connect(mapStateToProps)(withStyles(styles)(App));
+

src/App.js

@@ -1,16 +1,17 @@
 import * as React from 'react';
 
-export class Rating extends React.Component {
+// TODO: typings
+export class Rating extends React.Component<any, any> {
 
-  constructor(props) {
+  constructor(props: any) {
     super(props);
     this.state = {
       rating: props.value,
       hoverAt: null
     };
   }
 
-  static getDerivedStateFromProps = (nextProps, prevState) => {
+  static getDerivedStateFromProps = (nextProps: any, prevState: any) => {
     if (prevState.rating !== nextProps.value) {
       return {
         rating: nextProps.value,
@@ -20,7 +21,7 @@ export class Rating extends React.Component {
     return null;
   };
 
-  handleMouseOver(idx) {
+  handleMouseOver(idx: number) {
     this.setState({
       hoverAt: idx + 1
     });
@@ -32,7 +33,7 @@ export class Rating extends React.Component {
     });
   }
 
-  handleClick(idx) {
+  handleClick(idx: number) {
     this.setState({
       rating: idx + 1
     });

src/App.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import {mapDispatchToControlProps, mapStateToControlProps} from '@jsonforms/core';
+import {connect} from 'react-redux';
+import {Rating} from './Rating';
+
+interface RatingControlProps {
+  data: any;
+  handleChange(path: string, value: any): void;
+  path: string
+}
+
+const RatingControl = ({ data, handleChange, path }: RatingControlProps) => (
+  <Rating
+    value={data}
+    onClick={(ev: any) => handleChange(path, Number(ev.value))}
+  />
+);
+
+export default connect(
+  mapStateToControlProps,
+  mapDispatchToControlProps,
+)(RatingControl as any);

src/Rating.js renamed to src/Rating.tsx

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

src/RatingControl.js

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "allowJs": true,
+    "lib": ["es2015", "dom"],
+    "skipLibCheck": false,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "src"
+  ]
+}