diff --git a/MIGRATION.md b/MIGRATION.md index 073af2deb..bfad9d875 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -110,6 +110,10 @@ The `scope` attribute in `Scopable` is now optional. Use `Scoped` instead for non optional scopes. The utility function `fromScopable` was renamed to `fromScoped` accordingly. +### Localization of Date Picker in Angular Material + +Date Picker in Angular Material will use the global configuration of your Angular Material application. + ## Migrating to JSON Forms 2.5 ### JsonForms Component for Angular diff --git a/README.md b/README.md index 9c37ab73b..36cb2cb4e 100644 --- a/README.md +++ b/README.md @@ -9,13 +9,13 @@ Please see the official JSON Forms website, [jsonforms.io](https://jsonforms.io) ## Getting started 1. Clone the seed app with `git clone https://github.com/eclipsesource/jsonforms-react-seed.git` -2. Install dependencies with `npm ci` (or `npm install` when using an older version) +2. Install dependencies with `npm ci` 3. Run the app with `npm run start` For more info about the seed app, please see the corresponding README file of the [seed repo](https://github.com/eclipsesource/jsonforms-react-seed). For a more detailed tutorial about the usage of JSON Forms, please see [this tutorial](http://jsonforms.io/docs/tutorial). -## Upgrading to JSON Forms 3.0 Alpha +## Upgrading to JSON Forms 3.0 With version 3.0 of JSON Forms we removed `json-schema-ref-parser` from the core package. This change only affects users of the React variant (Vue and Angular are not affected) and even for React only a few users will need to adjust their code. diff --git a/lerna.json b/lerna.json index b23921ce1..0d2c58d39 100644 --- a/lerna.json +++ b/lerna.json @@ -4,7 +4,7 @@ "packages/vue/*", "packages/vue2/*" ], - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "nohoist": [ "core-js", "vue", diff --git a/packages/angular-material/README.md b/packages/angular-material/README.md index 453f73564..817807d30 100644 --- a/packages/angular-material/README.md +++ b/packages/angular-material/README.md @@ -39,11 +39,58 @@ import { angularMaterialRenderers } from "@jsonforms/angular-material"; }) export class AppComponent { renderers = angularMaterialRenderers; + uischema = { + type: "VerticalLayout", + elements: [ + { + type: "Control", + label: false, + scope: "#/properties/done", + }, + { + type: "Control", + scope: "#/properties/name", + }, + { + type: "HorizontalLayout", + elements: [ + { + type: "Control", + scope: "#/properties/due_date", + }, + { + type: "Control", + scope: "#/properties/recurrence", + }, + ], + }, + ], + }; + schema = { + type: "object", + properties: { + name: { + type: "string", + minLength: 1, + }, + done: { + type: "boolean", + }, + due_date: { + type: "string", + format: "date", + }, + recurrence: { + type: "string", + enum: ["Never", "Daily", "Weekly", "Monthly"], + }, + }, + required: ["name", "due_date"], + }; data = {}; } ``` - -Example module file: +Example module file `app.module.ts`: ```ts import { NgModule } from "@angular/core"; @@ -65,6 +112,7 @@ import { AppComponent } from "./app.component"; bootstrap: [AppComponent], }) +export class AppModule { } ``` ## License @@ -83,3 +131,7 @@ If you encounter any problems feel free to [open an issue](https://github.com/ec For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group). You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms). In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms. + +## Migration + +See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms. diff --git a/packages/angular-material/example/app/app.component.ts b/packages/angular-material/example/app/app.component.ts index 99308d882..d80b7e0f1 100644 --- a/packages/angular-material/example/app/app.component.ts +++ b/packages/angular-material/example/app/app.component.ts @@ -26,6 +26,8 @@ import { Component } from '@angular/core'; import { ExampleDescription, getExamples } from '@jsonforms/examples'; import { UISchemaElement, UISchemaTester } from '@jsonforms/core'; import { angularMaterialRenderers } from '../../src/index'; +import { DateAdapter } from '@angular/material/core'; + const uiSchema = { type: 'HorizontalLayout', elements: [ @@ -89,14 +91,17 @@ export class AppComponent { i18n = { locale: 'en-US' } + private dateAdapter; private readonly = false; data: any; uischemas: { tester: UISchemaTester; uischema: UISchemaElement; }[] = [ { tester: itemTester, uischema: uiSchema } ]; - constructor() { + constructor(dateAdapter: DateAdapter) { this.selectedExample = this.examples[19]; + this.dateAdapter = dateAdapter; + dateAdapter.setLocale(this.i18n.locale); } onChange(ev: any) { @@ -105,6 +110,7 @@ export class AppComponent { changeLocale(locale: string) { this.i18n.locale = locale; + this.dateAdapter.setLocale(locale); } toggleReadonly() { diff --git a/packages/angular-material/package-lock.json b/packages/angular-material/package-lock.json index 0ebed0a83..e456f3ec3 100644 --- a/packages/angular-material/package-lock.json +++ b/packages/angular-material/package-lock.json @@ -1,6 +1,6 @@ { "name": "@jsonforms/angular-material", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json index a5a47e272..c08ff67ee 100644 --- a/packages/angular-material/package.json +++ b/packages/angular-material/package.json @@ -1,6 +1,6 @@ { "name": "@jsonforms/angular-material", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "description": "Material Renderer Set for Angular module of JSON Forms", "repository": "https://github.com/eclipsesource/jsonforms", "bugs": "https://github.com/eclipsesource/jsonforms/issues", @@ -63,8 +63,8 @@ "@angular/material": "^12.0.0 || ^13.0.0", "@angular/platform-browser": "^12.0.0 || ^13.0.0", "@angular/router": "^12.0.0 || ^13.0.0", - "@jsonforms/angular": "3.0.0-beta.2", - "@jsonforms/core": "3.0.0-beta.2", + "@jsonforms/angular": "3.0.0-beta.4", + "@jsonforms/core": "3.0.0-beta.4", "core-js": "^2.5.3", "rxjs": "^6.4.0" }, @@ -84,10 +84,10 @@ "@angular/platform-browser": "^12.0.0", "@angular/platform-browser-dynamic": "^12.0.0", "@angular/router": "^12.0.0", - "@jsonforms/angular": "^3.0.0-beta.2", - "@jsonforms/angular-test": "^3.0.0-beta.2", - "@jsonforms/core": "^3.0.0-beta.2", - "@jsonforms/examples": "^3.0.0-beta.2", + "@jsonforms/angular": "^3.0.0-beta.4", + "@jsonforms/angular-test": "^3.0.0-beta.4", + "@jsonforms/core": "^3.0.0-beta.4", + "@jsonforms/examples": "^3.0.0-beta.4", "@types/node": "^10.10.0", "angular2-template-loader": "^0.6.2", "copy-webpack-plugin": "^5.0.5", diff --git a/packages/angular-material/src/controls/date.renderer.ts b/packages/angular-material/src/controls/date.renderer.ts index 69b323946..fd79f47ac 100644 --- a/packages/angular-material/src/controls/date.renderer.ts +++ b/packages/angular-material/src/controls/date.renderer.ts @@ -24,13 +24,11 @@ */ import { Component, ChangeDetectionStrategy } from '@angular/core'; import { - getLocale, isDateControl, RankedTester, rankWith } from '@jsonforms/core'; import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular'; -import { DateAdapter, NativeDateAdapter } from '@angular/material/core'; @Component({ selector: 'DateControlRenderer', @@ -58,16 +56,10 @@ import { DateAdapter, NativeDateAdapter } from '@angular/material/core'; export class DateControlRenderer extends JsonFormsControl { constructor( jsonformsService: JsonFormsAngularService, - private dateAdapter: DateAdapter ) { super(jsonformsService); } - mapAdditionalProps() { - const locale = getLocale(this.jsonFormsService.getState()); - this.dateAdapter.setLocale(locale); - } - getEventValue = (event: any) => event.value.toISOString().substr(0, 10); } diff --git a/packages/angular-test/package.json b/packages/angular-test/package.json index 32fc3a7b2..b6cf4c89a 100644 --- a/packages/angular-test/package.json +++ b/packages/angular-test/package.json @@ -1,11 +1,11 @@ { "name": "@jsonforms/angular-test", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "private": true, "main": "./lib/index.js", "dependencies": { - "@jsonforms/angular": "^3.0.0-beta.2", - "@jsonforms/core": "^3.0.0-beta.2" + "@jsonforms/angular": "^3.0.0-beta.4", + "@jsonforms/core": "^3.0.0-beta.4" }, "devDependencies": { "jasmine": "^3.2.0", diff --git a/packages/angular/README.md b/packages/angular/README.md index 4358071c4..1afb1bf33 100644 --- a/packages/angular/README.md +++ b/packages/angular/README.md @@ -127,6 +127,7 @@ import { AppComponent } from "./app.component"; bootstrap: [AppComponent], }) +export class AppModule { } ``` ## License @@ -145,3 +146,7 @@ If you encounter any problems feel free to [open an issue](https://github.com/ec For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group). You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms). In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms. + +## Migration + +See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms. diff --git a/packages/angular/package.json b/packages/angular/package.json index b500e14fa..875e892f8 100644 --- a/packages/angular/package.json +++ b/packages/angular/package.json @@ -1,6 +1,6 @@ { "name": "@jsonforms/angular", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "description": "Angular module of JSON Forms", "repository": "https://github.com/eclipsesource/jsonforms", "bugs": "https://github.com/eclipsesource/jsonforms/issues", @@ -63,7 +63,7 @@ "peerDependencies": { "@angular/core": "^12.0.0 || ^13.0.0", "@angular/forms": "^12.0.0 || ^13.0.0", - "@jsonforms/core": "3.0.0-beta.2", + "@jsonforms/core": "3.0.0-beta.4", "rxjs": "^6.4.0" }, "devDependencies": { @@ -71,7 +71,7 @@ "@angular/compiler-cli": "^12.0.0", "@angular/core": "^12.0.0", "@angular/forms": "^12.0.0", - "@jsonforms/core": "^3.0.0-beta.2", + "@jsonforms/core": "^3.0.0-beta.4", "ava": "~2.4.0", "copy-webpack-plugin": "^5.0.5", "cross-env": "^7.0.2", diff --git a/packages/core/README.md b/packages/core/README.md index f3304874b..ff6dfe8ca 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -21,6 +21,12 @@ See the official [documentation](https://jsonforms.io/) and the [Example Package Check for all published JSON Forms packages. +## Upgrading to JSON Forms 3.0 + +With version 3.0 of JSON Forms we removed `json-schema-ref-parser` from the core package. +This change only affects users of the React variant (Vue and Angular are not affected) and even for React only a few users will need to adjust their code. +To avoid issues and for more information, please have a look at our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md). + ## License The JSON Forms project is licensed under the MIT License. See the [LICENSE file](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) for more information. @@ -37,3 +43,8 @@ If you encounter any problems feel free to [open an issue](https://github.com/ec For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group). You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms). In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms. + + +## Migration + +See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms. \ No newline at end of file diff --git a/packages/core/package.json b/packages/core/package.json index 8e937c15c..545d8bf9c 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@jsonforms/core", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "description": "Core module of JSON Forms", "repository": "https://github.com/eclipsesource/jsonforms", "bugs": "https://github.com/eclipsesource/jsonforms/issues", diff --git a/packages/core/src/testers/testers.ts b/packages/core/src/testers/testers.ts index b20d7e355..70a89feea 100644 --- a/packages/core/src/testers/testers.ts +++ b/packages/core/src/testers/testers.ts @@ -144,7 +144,7 @@ export const formatIs = (expectedFormat: string): Tester => schema => !isEmpty(schema) && schema.format === expectedFormat && - schema.type === 'string' + hasType(schema, 'string') ); /** @@ -445,10 +445,7 @@ export const isObjectArrayWithNesting = ( } const schemaPath = (uischema as ControlElement).scope; const resolvedSchema = resolveSchema(schema, schemaPath, rootSchema ?? schema); - const wantedNestingByType: { [key: string]: number } = { - object: 2, - array: 1 - }; + let objectDepth = 0; if (resolvedSchema !== undefined && resolvedSchema.items !== undefined) { // check if nested arrays if ( @@ -459,16 +456,16 @@ export const isObjectArrayWithNesting = ( if (val.$ref !== undefined) { return false; } - // we don't support multiple types - if (typeof val.type !== 'string') { - return true; + if (hasType(val, 'object')) { + objectDepth++; + if (objectDepth === 2) { + return true; + } } - const typeCount = wantedNestingByType[val.type]; - if (typeCount === undefined) { - return false; + if (hasType(val, 'array')) { + return true; } - wantedNestingByType[val.type] = typeCount - 1; - return wantedNestingByType[val.type] === 0; + return false; }, rootSchema) ) { return true; diff --git a/packages/example/package.json b/packages/example/package.json index c1b85df93..836bd8ace 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -1,11 +1,11 @@ { "name": "@jsonforms/examples-react", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "private": true, "dependencies": { - "@jsonforms/core": "^3.0.0-beta.2", - "@jsonforms/examples": "^3.0.0-beta.2", - "@jsonforms/react": "^3.0.0-beta.2", + "@jsonforms/core": "^3.0.0-beta.4", + "@jsonforms/examples": "^3.0.0-beta.4", + "@jsonforms/react": "^3.0.0-beta.4", "@mui/material": "^5.2.2", "@types/react-highlight": "^0.12.5", "@types/react-tabs": "^2.3.3", diff --git a/packages/examples/README.md b/packages/examples/README.md index 7a0377666..7ec7dac42 100644 --- a/packages/examples/README.md +++ b/packages/examples/README.md @@ -8,7 +8,7 @@ JSON Forms eliminates the tedious task of writing fully-featured forms by hand b This is the examples package which demonstrates how to integrate JSON Forms with your application. -You can use the examples with any renderer set you want, for example the [Material Renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers) or the [Angular Renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers). +You can use the examples with any renderer set you want, for example the [Material Renderers](https://github.com/eclipsesource/jsonforms/tree/master/packages/material) or the [Angular Renderers](https://github.com/eclipsesource/jsonforms/tree/master/packages/angular-material). Check for all published JSON Forms packages. @@ -28,3 +28,7 @@ If you encounter any problems feel free to [open an issue](https://github.com/ec For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group). You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms). In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms. + +## Migration + +See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms. diff --git a/packages/examples/package.json b/packages/examples/package.json index f7cc31da2..9239ec2a6 100644 --- a/packages/examples/package.json +++ b/packages/examples/package.json @@ -1,6 +1,6 @@ { "name": "@jsonforms/examples", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "description": "JSON Forms Example Data", "repository": "https://github.com/eclipsesource/jsonforms", "bugs": "https://github.com/eclipsesource/jsonforms/issues", @@ -45,10 +45,10 @@ "ajv-i18n": "^3.5.0" }, "peerDependencies": { - "@jsonforms/core": "3.0.0-beta.2" + "@jsonforms/core": "3.0.0-beta.4" }, "devDependencies": { - "@jsonforms/core": "^3.0.0-beta.2", + "@jsonforms/core": "^3.0.0-beta.4", "rimraf": "^3.0.2", "rollup": "^2.7.3", "rollup-plugin-cleanup": "^3.2.1", diff --git a/packages/examples/src/examples/1948.ts b/packages/examples/src/examples/1948.ts new file mode 100644 index 000000000..a4d8abbde --- /dev/null +++ b/packages/examples/src/examples/1948.ts @@ -0,0 +1,87 @@ +/* + The MIT License + + Copyright (c) 2022 EclipseSource Munich + https://github.com/eclipsesource/jsonforms + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the 'Software'), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + THE SOFTWARE. +*/ +import { registerExamples } from '../register'; +import { UISchemaElement } from '@jsonforms/core'; + +export const schema = { + type: 'object', + definitions: { + import: { + title: 'Import', + type: 'object', + properties: { + eClass: { + const: 'http://my_schema/1.0.0#//Import' + }, + document: { + type: 'string' + }, + package: { + type: 'string' + }, + prefix: { + type: 'string' + } + } + } + }, + properties: { + import: { + type: 'array', + items: { + $ref: '#/definitions/import' + } + } + } +}; + +export const uischema: UISchemaElement = undefined; + +export const data = { + import: [ + { + document: 'Document1', + package: 'Package1', + prefix: 'Prefix' + } + ] +}; + +registerExamples([ + { + name: '1948_with', + label: 'Issue 1948 with schema', + data, + schema, + uischema + }, + { + name: '1948_without', + label: 'Issue 1948 w/o schema', + data, + schema: undefined, + uischema + } +]); diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts index 89fd97102..73fd1cf15 100644 --- a/packages/examples/src/index.ts +++ b/packages/examples/src/index.ts @@ -59,6 +59,7 @@ import * as listWithDetail from './examples/list-with-detail'; import * as listWithDetailRegistered from './examples/list-with-detail-registered'; import * as object from './examples/object'; import * as i18n from './examples/i18n'; +import * as issue_1948 from './examples/1948'; import * as issue_1169 from './examples/1169'; import * as issue_1220 from './examples/1220'; import * as issue_1253 from './examples/1253'; @@ -83,6 +84,7 @@ export * from './example'; import * as ifThenElse from './examples/if_then_else'; export { + issue_1948, defaultExample, allOf, anyOf, diff --git a/packages/material/README.md b/packages/material/README.md index 34eeb6426..27a00985b 100644 --- a/packages/material/README.md +++ b/packages/material/README.md @@ -10,7 +10,7 @@ This is the JSON Forms Material Renderers Package. This package only contains re See the official [documentation](https://jsonforms.io/docs/integrations/react/) and the JSON Forms React [seed repository](https://github.com/eclipsesource/jsonforms-react-seed) for examples on how to integrate JSON Forms with your application. -You can combine [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react) with other renderers too, for example with the [Vanilla Renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers). +You can combine [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react) with other renderers too, for example with the [Vanilla Renderers](https://github.com/eclipsesource/jsonforms/tree/master/packages/vanilla). Check for all published JSONForms packages. @@ -24,24 +24,78 @@ npm i --save @jsonforms/core @jsonforms/react @jsonforms/material-renderers Use the `JsonForms` component for each form you want to render and hand over the renderer set. -```js + +```ts import React, { useState } from 'react'; +import { + materialRenderers, + materialCells +} from '@jsonforms/material-renderers'; import { JsonForms } from '@jsonforms/react'; -import { materialCells, materialRenderers } from '@jsonforms/material-renderers'; + +const schema = { + type: 'object', + properties: { + name: { + type: 'string', + minLength: 1 + }, + done: { + type: 'boolean' + }, + due_date: { + type: 'string', + format: 'date' + }, + recurrence: { + type: 'string', + enum: ['Never', 'Daily', 'Weekly', 'Monthly'] + } + }, + required: ['name', 'due_date'] +}; + +const uischema = { + type: 'VerticalLayout', + elements: [ + { + type: 'Control', + label: false, + scope: '#/properties/done' + }, + { + type: 'Control', + scope: '#/properties/name' + }, + { + type: 'HorizontalLayout', + elements: [ + { + type: 'Control', + scope: '#/properties/due_date' + }, + { + type: 'Control', + scope: '#/properties/recurrence' + } + ] + } + ] +}; + +const initialData = {}; function App() { const [data, setData] = useState(initialData); return ( -
- setData(data)} - /> -
+ setData(data)} + /> ); } ``` @@ -62,3 +116,7 @@ If you encounter any problems feel free to [open an issue](https://github.com/ec For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group). You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms). In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms. + +## Migration + +See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms. diff --git a/packages/material/package.json b/packages/material/package.json index 704bc36e7..77b4b295b 100644 --- a/packages/material/package.json +++ b/packages/material/package.json @@ -1,6 +1,6 @@ { "name": "@jsonforms/material-renderers", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "description": "Material Renderer Set for JSON Forms", "repository": "https://github.com/eclipsesource/jsonforms", "bugs": "https://github.com/eclipsesource/jsonforms/issues", @@ -74,10 +74,10 @@ "dayjs": "1.10.6" }, "peerDependencies": { - "@emotion/react": "^11.5.0", + "@emotion/react": "^11.4.1", "@emotion/styled": "^11.3.0", - "@jsonforms/core": "3.0.0-beta.2", - "@jsonforms/react": "3.0.0-beta.2", + "@jsonforms/core": "3.0.0-beta.4", + "@jsonforms/react": "3.0.0-beta.4", "@mui/icons-material": "^5.0.0", "@mui/lab": "^5.0.0-alpha.54", "@mui/material": "^5.0.0" @@ -85,8 +85,8 @@ "devDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@jsonforms/core": "^3.0.0-beta.2", - "@jsonforms/react": "^3.0.0-beta.2", + "@jsonforms/core": "^3.0.0-beta.4", + "@jsonforms/react": "^3.0.0-beta.4", "@mui/icons-material": "^5.2.0", "@mui/lab": "^5.0.0-alpha.58", "@mui/material": "^5.2.2", diff --git a/packages/material/src/complex/MaterialTableControl.tsx b/packages/material/src/complex/MaterialTableControl.tsx index 9f608cd19..4f2a7c414 100644 --- a/packages/material/src/complex/MaterialTableControl.tsx +++ b/packages/material/src/complex/MaterialTableControl.tsx @@ -370,7 +370,7 @@ const TableRows = ({ moveDownCreator={moveDown} enableUp={index !== 0} enableDown={index !== data - 1} - showSortButtons={appliedUiSchemaOptions.showSortButtons} + showSortButtons={appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons} enabled={enabled} cells={cells} path={path} diff --git a/packages/material/src/layouts/ExpandPanelRenderer.tsx b/packages/material/src/layouts/ExpandPanelRenderer.tsx index e648fb5da..4e84e6d7d 100644 --- a/packages/material/src/layouts/ExpandPanelRenderer.tsx +++ b/packages/material/src/layouts/ExpandPanelRenderer.tsx @@ -119,6 +119,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => { ); const appliedUiSchemaOptions = merge({}, config, uischema.options); + const showSortButtons = appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayLayoutSortButtons; return ( { justifyContent='center' alignItems='center' > - {appliedUiSchemaOptions.showSortButtons ? ( + {showSortButtons ? ( { const addItemCb = useCallback((p: string, value: any) => addItem(p, value), [ addItem @@ -56,20 +45,9 @@ export const MaterialArrayLayoutRenderer = ({ return ( ); diff --git a/packages/material/test/renderers/MaterialArrayLayout.test.tsx b/packages/material/test/renderers/MaterialArrayLayout.test.tsx index 35958da3a..362e1f2b7 100644 --- a/packages/material/test/renderers/MaterialArrayLayout.test.tsx +++ b/packages/material/test/renderers/MaterialArrayLayout.test.tsx @@ -333,6 +333,36 @@ describe('Material array layout', () => { .find({ 'aria-label': 'Move down' }).length ).toBe(1); }); + it('should render sort buttons if showSortButtons is true in config', () => { + wrapper = mount( + + ); + + expect(wrapper.find(MaterialArrayLayout).length).toBeTruthy(); + + // up button + expect( + wrapper + .find('Memo(ExpandPanelRendererComponent)') + .at(0) + .find('button') + .find({ 'aria-label': 'Move up' }).length + ).toBe(1); + // down button + expect( + wrapper + .find('Memo(ExpandPanelRendererComponent)') + .at(0) + .find('button') + .find({ 'aria-label': 'Move down' }).length + ).toBe(1); + }); it('should move item up if up button is presses', (done) => { const onChangeData: any = { data: undefined @@ -341,7 +371,8 @@ describe('Material array layout', () => { { onChangeData.data = data; diff --git a/packages/react/README.md b/packages/react/README.md index 69f45f839..9ba2e2469 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -8,7 +8,7 @@ JSON Forms eliminates the tedious task of writing fully-featured forms by hand b This is the JSON Forms React package which provides the necessary bindings for React. It uses [JSON Forms Core](https://github.com/eclipsesource/jsonforms/blob/master/packages/core). -You can combine the react package with any react-based renderer set you want, for example the [Material Renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers) or the [Vanilla Renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/vanilla-renderers). +You can combine the react package with any react-based renderer set you want, for example the [Material Renderers](https://github.com/eclipsesource/jsonforms/tree/master/packages/material) or the [Vanilla Renderers](https://github.com/eclipsesource/jsonforms/tree/master/packages/vanilla). See the official [documentation](https://jsonforms.io/) and the JSON Forms React [seed repository](https://github.com/eclipsesource/jsonforms-react-seed) for examples on how to integrate JSON Forms with your application. @@ -107,6 +107,7 @@ function App() { /> ); } +export default App; ``` ## License @@ -125,3 +126,7 @@ If you encounter any problems feel free to [open an issue](https://github.com/ec For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group). You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms). In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms. + +## Migration + +See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms. diff --git a/packages/react/package.json b/packages/react/package.json index be803008d..6cd0cf058 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@jsonforms/react", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "description": "React module of JSON Forms", "repository": "https://github.com/eclipsesource/jsonforms", "bugs": "https://github.com/eclipsesource/jsonforms/issues", @@ -80,14 +80,14 @@ "lodash": "^4.17.15" }, "peerDependencies": { - "@jsonforms/core": "3.0.0-beta.2", + "@jsonforms/core": "3.0.0-beta.4", "react": "^16.12.0 || ^17.0.0 || ^18.0.0" }, "optionalPeerDependencies": { "react-redux": "^7.1.3" }, "devDependencies": { - "@jsonforms/core": "^3.0.0-beta.2", + "@jsonforms/core": "^3.0.0-beta.4", "@rollup/plugin-alias": "^3.1.8", "@types/enzyme": "^3.10.3", "@types/object-hash": "^1.3.0", diff --git a/packages/vanilla/README.md b/packages/vanilla/README.md index e881a8b95..8d071613f 100644 --- a/packages/vanilla/README.md +++ b/packages/vanilla/README.md @@ -8,7 +8,7 @@ JSON Forms eliminates the tedious task of writing fully-featured forms by hand b This is the JSONForms Vanilla Renderers Package. This package only contains renderers and must be combined with [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react). -You can combine [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react) with other renderers too, for example with the [Material Renderers](https://github.com/eclipsesource/jsonforms/blob/master/packages/material-renderers). +You can combine [JSON Forms React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react) with other renderers too, for example with the [Material Renderers](https://github.com/eclipsesource/jsonforms/tree/master/packages/material). See the official [documentation](https://jsonforms.io/docs/integrations/react/) and the JSON Forms React [seed repository](https://github.com/eclipsesource/jsonforms-react-seed) for examples on how to integrate JSON Forms with your application. @@ -31,19 +31,66 @@ import React, { useState } from 'react'; import { JsonForms } from '@jsonforms/react'; import { vanillaCells, vanillaRenderers } from '@jsonforms/vanilla-renderers'; +const schema = { + type: 'object', + properties: { + name: { + type: 'string', + minLength: 1 + }, + done: { + type: 'boolean' + }, + due_date: { + type: 'string', + format: 'date' + }, + recurrence: { + type: 'string', + enum: ['Never', 'Daily', 'Weekly', 'Monthly'] + } + }, + required: ['name', 'due_date'] +}; +const uischema = { + type: 'VerticalLayout', + elements: [ + { + type: 'Control', + label: false, + scope: '#/properties/done' + }, + { + type: 'Control', + scope: '#/properties/name' + }, + { + type: 'HorizontalLayout', + elements: [ + { + type: 'Control', + scope: '#/properties/due_date' + }, + { + type: 'Control', + scope: '#/properties/recurrence' + } + ] + } + ] +}; +const initialData = {}; function App() { const [data, setData] = useState(initialData); return ( -
- setData(data)} - /> -
+ setData(data)} + /> ); } ``` @@ -64,3 +111,7 @@ If you encounter any problems feel free to [open an issue](https://github.com/ec For questions and discussions please use the [JSON Forms board](https://jsonforms.discourse.group). You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms). In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms. + +## Migration + +See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms. diff --git a/packages/vanilla/package.json b/packages/vanilla/package.json index bab82426d..39e188f0a 100644 --- a/packages/vanilla/package.json +++ b/packages/vanilla/package.json @@ -1,6 +1,6 @@ { "name": "@jsonforms/vanilla-renderers", - "version": "3.0.0-beta.2", + "version": "3.0.0-beta.4", "description": "Default Renderer Set for JSON Forms", "repository": "https://github.com/eclipsesource/jsonforms", "bugs": "https://github.com/eclipsesource/jsonforms/issues", @@ -36,14 +36,14 @@ "customization" ], "peerDependencies": { - "@jsonforms/core": "3.0.0-beta.2", - "@jsonforms/react": "3.0.0-beta.2", + "@jsonforms/core": "3.0.0-beta.4", + "@jsonforms/react": "3.0.0-beta.4", "react": "^16.12.0 || ^17.0.0 || ^18.0.0" }, "devDependencies": { "@istanbuljs/nyc-config-typescript": "^1.0.2", - "@jsonforms/core": "^3.0.0-beta.2", - "@jsonforms/react": "^3.0.0-beta.2", + "@jsonforms/core": "^3.0.0-beta.4", + "@jsonforms/react": "^3.0.0-beta.4", "@types/enzyme": "^3.10.3", "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3", "copy-webpack-plugin": "^5.0.5", diff --git a/packages/vanilla/src/complex/array/ArrayControl.tsx b/packages/vanilla/src/complex/array/ArrayControl.tsx index 859dece46..a9b86a9d0 100644 --- a/packages/vanilla/src/complex/array/ArrayControl.tsx +++ b/packages/vanilla/src/complex/array/ArrayControl.tsx @@ -50,7 +50,7 @@ export const ArrayControl = ({ diff --git a/packages/vanilla/src/complex/array/index.ts b/packages/vanilla/src/complex/array/index.ts index 19757364c..80e8d9d26 100644 --- a/packages/vanilla/src/complex/array/index.ts +++ b/packages/vanilla/src/complex/array/index.ts @@ -33,7 +33,7 @@ import { ArrayControl } from './ArrayControl'; export { ArrayControl, ArrayControlRenderer }; export const arrayControlTester: RankedTester = rankWith( - 2, + 4, isObjectArrayWithNesting ); diff --git a/packages/vue/vue-vanilla/README.md b/packages/vue/vue-vanilla/README.md index 0d23aba79..12976d9f0 100644 --- a/packages/vue/vue-vanilla/README.md +++ b/packages/vue/vue-vanilla/README.md @@ -20,12 +20,21 @@ Install JSON Forms Core, Vue and Vue Vanilla Renderers npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vanilla ``` +Also add the packages to the transpile dependencies in the `vue.config.js` file: + +```js +module.exports = { + transpileDependencies: ['@jsonforms/core', '@jsonforms/vue2', '@jsonforms/vue2-vanilla'] +} +``` + Use the `json-forms` component for each form you want to render and hand over the renderer set. ```vue