Restructure and update to JSON Forms 2.5

* Remove redux from react-seed
* Replace initialData with jsonformsData
* Add yalc to gitignore
* Add clear data button
* Replace data attribute with uischema attribute
* Refactor Rating to functional component
* Remove not needed styles
* Clear data instead of reset data
* Update README
* Showcases labels and titles
* Adjust theme to give controls more space
* Remove horizontal scrollbar
* Update to JSON Forms 2.5.0

Co-authored-by: Stefan Dirix <[email protected]>

Author: TheZoker

.gitignore

@@ -59,4 +59,6 @@ typings/
 
 .idea
 
-build
+build
+.yalc
+yalc.lock

README.md

@@ -1,74 +1,31 @@
-This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
 # JSON Forms React seed App
-This seed demonstrates how to use [JSON Forms](https://jsonforms.io) with React in order to render a simple form for displaying a task entity. It showcases both the redux variant and the React standalone component (without redux).
- 
-It is based on create-react-app and only contains minor modifications.
 
- * Execute `npm ci` to install the prerequisites. If you want to have the latest released versions use `npm install`.
- * Execute `npm start` to start the application.
- 
- Browse to http://localhost:3000 to see the application in action.
+This seed demonstrates how to use [JSON Forms](https://jsonforms.io) with React in order to render a simple form for displaying a task entity.
 
-## File Structure
-Let's briefly have a look at the most important files:
-* `src/schema.json` contains the JSON schema (also referred to as 'data schema')
-* `src/uischema.json` contains the UI schema
-* `src/index.js` is the entry point of the application and sets up the redux store that contains the data, the JSON and the UI schema necessary for JSON Forms.
-* `src/App.js` is the main React component and makes use of the core JSON Forms component or the React standalone component in order to render a form.
-  
-The [data schema](https://github.com/eclipsesource/jsonforms-react-seed/blob/master/src/schema.json) defines the structure of a Task: it contains attributes such as title, description, due date and so on.
-
-The [corresponding UI schema](https://github.com/eclipsesource/jsonforms-react-seed/blob/master/src/uischema.json) specifies controls for each property and puts them into a vertical layout that in turn contains two horizontal layouts.
-
-Both the data schema and the UI schema are imported within `index.js` and are used to set up a redux store. We make use of a helper function exported by JSON Forms which expects the initial state. If you already have an existing redux store, you'll need to import the jsonforms reducer and add it to your store. Please refer to [the tutorial](https://jsonforms.io/docs/tutorial) for how to do this.
+It is based on `create-react-app` and only contains minor modifications.
 
-## Setting up the store
+- Execute `npm ci` to install the prerequisites. If you want to have the latest released versions use `npm install`.
+- Execute `npm start` to start the application.
 
-```js
-const store = createStore(
-  jsonformsReducer(),
-  {
-    jsonforms: {
-      common: {
-        data,
-        schema,
-        uischema
-      },
-      renderers: JsonForms.renderers,
-      cells: JsonForms.cells
-    },
-  },
-  applyMiddleware(thunk)
-);
+Browse to http://localhost:3000 to see the application in action.
 
-// initialize store
-store.dispatch({
-  type: Actions.INIT,
-  data,
-  schema,
-  uischema,
-});
+## File Structure
 
-// trigger initial validation
-store.dispatch(Actions.validate());
-```
+Let's briefly have a look at the most important files:
 
-We then use the `Provider` component provided by `react-redux` to provide the store to the JSON Forms redux component and all its children.
+- `src/schema.json` contains the JSON schema (also referred to as 'data schema')
+- `src/uischema.json` contains the UI schema
+- `src/index.tsx` is the entry point of the application. We also customize the Material UI theme to give each control more space.
+- `src/App.tsx` is the main app component and makes use of the `JsonForms` component in order to render a form.
 
-```js
-<Provider store={store}>
-  <JsonFormsReduxContext>
-    <JsonFormsDispatch />
-  </JsonFormsReduxContext>
-</Provider>
-```
+The [data schema](src/schema.json) defines the structure of a Task: it contains attributes such as title, description, due date and so on.
 
-## Rendering our form
-The `App` component is responsible for rendering our actual forms.
+The [corresponding UI schema](src/uischema.json) specifies controls for each property and puts them into a vertical layout that in turn contains two horizontal layouts.
 
-The redux form is rendered by importing and using `DispatchRenderer` from `@jsonforms/core`. `DispatchRenderer` expects `schema` and `uischema` props which define the form to be rendered but if those are omitted, they will be pulled from the store which was provided via `Provider` previously.
+## Rendering JSON Forms
 
-The standalone form is rendered by importing and using the `JsonForms` component and directly handing over the `schema`, `uischema`, `data`, `renderer` and `cell` props. We listen to changes in the form via the `onChange` callback .
+JSON Forms is rendered by importing and using the `JsonForms` component and directly handing over the `schema`, `uischema`, `data`, `renderer` and `cell` props. We listen to changes in the form via the `onChange` callback.
 
 ## Custom renderers
+
 Please see [our corresponding tutorial](https://jsonforms.io/docs/tutorial) on how to add custom renderers.

cypress/plugins/index.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')