Tests/fix existing

lerna.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.6",
   "nohoist": ["vue", "rollup-plugin-vue", "@vue/test-utils"],
   "npmClient": "pnpm"
 }

package.json

@@ -13,7 +13,8 @@
     "test-cov": "lerna run test-cov",
     "lint": "lerna run --no-bail lint",
     "lint:fix": "lerna run --no-bail lint:fix",
-    "build:examples-app": "lerna run build:examples-app && node packages/examples-app/prepare-examples-app.js"
+    "build:examples-app": "lerna run build:examples-app && node packages/examples-app/prepare-examples-app.js",
+    "release": "lerna publish --no-private from-git"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

packages/antd-renderers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactjsonforms/antd-renderers",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.3",
   "description": "Ant Design Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",

packages/antd-renderers/src/controls/DateTimeControl.tsx

@@ -34,6 +34,11 @@ import {
 import { Control, withJsonFormsControlProps } from '@reactjsonforms/react';
 import { DatePicker, Form } from 'antd';
 import dayjs from 'dayjs';
+import weekday from 'dayjs/plugin/weekday';
+import localeData from 'dayjs/plugin/localeData';
+
+dayjs.extend(weekday);
+dayjs.extend(localeData);
 
 export class DateTimeControl extends Control<ControlProps, ControlState> {
   render() {

packages/antd-renderers/test/renderers/TimeCell.test.tsx

@@ -49,14 +49,14 @@ const uischema: ControlElement = {
 
 describe('Ant Design time cell tester', () => {
   it('should fail', () => {
-    expect(timeCellTester(undefined, undefined, undefined)).toBe(
+    expect(timeCellTester(undefined as any, undefined as any, undefined as any)).toBe(
       NOT_APPLICABLE
     );
-    expect(timeCellTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(timeCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
+    expect(timeCellTester(null as any, undefined as any, undefined as any)).toBe(NOT_APPLICABLE);
+    expect(timeCellTester({ type: 'Foo' }, undefined as any, undefined as any)).toBe(
       NOT_APPLICABLE
     );
-    expect(timeCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(timeCellTester({ type: 'Control' }, undefined as any, undefined as any)).toBe(
       NOT_APPLICABLE
     );
   });
@@ -71,7 +71,7 @@ describe('Ant Design time cell tester', () => {
             foo: { type: 'string' },
           },
         },
-        undefined
+        undefined as any
       )
     ).toBe(NOT_APPLICABLE);
   });
@@ -90,7 +90,7 @@ describe('Ant Design time cell tester', () => {
             },
           },
         },
-        undefined
+        undefined as any
       )
     ).toBe(NOT_APPLICABLE);
   });
@@ -108,7 +108,7 @@ describe('Ant Design time cell tester', () => {
             },
           },
         },
-        undefined
+        undefined as any
       )
     ).toBe(2);
   });
@@ -185,7 +185,7 @@ describe('Material time cell', () => {
   it.skip('should update via event', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined,
+      data: undefined as any,
     };
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers, core }}>
@@ -232,14 +232,14 @@ describe('Material time cell', () => {
     expect(input.props().value).toBe('');
   });
 
-  it('update with undefined value', () => {
+  it('update with undefined as any value', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers, core }}>
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
-    core.data = { ...core.data, foo: undefined };
+    core.data = { ...core.data, foo: undefined as any };
     wrapper.setProps({ initState: { renderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
@@ -274,14 +274,14 @@ describe('Material time cell', () => {
     expect(input.props().value).toBe('13:37');
   });
 
-  it('should update with undefined ref', () => {
+  it('should update with undefined as any ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers, core }}>
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
-    core.data = { ...core.data, undefined: '20:15' };
+    core.data = { ...core.data, undefined as any: '20:15' };
     wrapper.setProps({ initState: { renderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();

packages/chakra-renderers/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reactjsonforms/chakra-renderers",
-  "version": "4.0.0-alpha.2",
+  "version": "4.0.0-alpha.8",
   "description": "Chakra Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -61,7 +61,7 @@
     "@emotion/styled": "^11.3.0",
     "@reactjsonforms/core": "^4.0.0-alpha.0",
     "@reactjsonforms/react": "^4.0.0-alpha.0",
-    "framer-motion": "^6.5.1"
+    "framer-motion": ">=6.5.1"
   },
   "devDependencies": {
     "@cfaester/enzyme-adapter-react-18": "^0.7.0",
@@ -77,6 +77,7 @@
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
+    "@rollup/plugin-typescript": "^11.1.2",
     "@types/enzyme": "^3.10.3",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
@@ -99,11 +100,10 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.78.0",
+    "rollup": "^2.79.1",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-import-css": "^3.3.1",
-    "rollup-plugin-typescript2": "^0.35.0",
     "rollup-plugin-visualizer": "^5.9.2",
     "source-map-loader": "^4.0.1",
     "source-map-support": "0.5.21",

packages/chakra-renderers/rollup.config.js

@@ -1,4 +1,4 @@
-import typescript from 'rollup-plugin-typescript2';
+import typescript from '@rollup/plugin-typescript';
 import cleanup from 'rollup-plugin-cleanup';
 import { visualizer } from 'rollup-plugin-visualizer';
 
@@ -39,10 +39,8 @@ export default [
     },
     plugins: [
       typescript({
-        tsconfigOverride: {
-          compilerOptions: {
-            target: 'ES5',
-          },
+        compilerOptions: {
+          target: 'ES5',
         },
       }),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),

packages/chakra-renderers/rollup.example.config.js

@@ -4,7 +4,7 @@ import nodeResolve from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
 import copy from 'rollup-plugin-copy';
 import css from 'rollup-plugin-import-css';
-import typescript from 'rollup-plugin-typescript2';
+import typescript from '@rollup/plugin-typescript';
 
 /**
  * @type {import('rollup').RollupOptions}
@@ -27,11 +27,9 @@ const config = {
     css(),
     json(),
     typescript({
-      tsconfigOverride: {
-        compilerOptions: {
-          // Do not emit typescript declarations for our bundled example app
-          declaration: false,
-        },
+      compilerOptions: {
+        // Do not emit typescript declarations for our bundled example app
+        declaration: false,
       },
     }),
     copy({

packages/chakra-renderers/src/additional/LabelRenderer.tsx

@@ -47,7 +47,7 @@ export const LabelRenderer = ({ uischema, visible }: OwnPropsOfRenderer) => {
   const labelElement: LabelElement = uischema as LabelElement;
   return (
     <Hidden hidden={!visible}>
-      <Heading as='h4'>
+      <Heading size='md'>
         {labelElement.text !== undefined &&
           labelElement.text !== null &&
           labelElement.text}

packages/chakra-renderers/src/cells/BooleanCell.tsx

@@ -26,6 +26,7 @@ import React from 'react';
 import { Checkbox } from '@chakra-ui/react';
 import {
   CellProps,
+  createLabelDescriptionFrom,
   isBooleanControl,
   RankedTester,
   rankWith,
@@ -39,6 +40,7 @@ export const BooleanCell: FC<CellProps> = (
   props: CellProps & VanillaRendererProps
 ) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
+  const { text: label } = createLabelDescriptionFrom(uischema, props.schema);
 
   return (
     <Checkbox
@@ -48,7 +50,9 @@ export const BooleanCell: FC<CellProps> = (
       id={id}
       isDisabled={!enabled}
       autoFocus={uischema.options && uischema.options.focus}
-    />
+    >
+      {label}
+    </Checkbox>
   );
 };
 

packages/chakra-renderers/src/chakra-controls/ChakraCheckbox.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable react/display-name */
+/*
+  The MIT License
+
+  Copyright (c) 2017-2021 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 React from 'react';
+import { CellProps, WithClassname } from '@reactjsonforms/core';
+import { Checkbox, Text } from '@chakra-ui/react';
+import merge from 'lodash/merge';
+
+export const ChakraCheckbox = React.memo(
+  (props: CellProps & WithClassname & { label: string }) => {
+    const {
+      data,
+      className,
+      enabled,
+      uischema,
+      path,
+      handleChange,
+      config,
+      label,
+    } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const checked = !!data;
+
+    return (
+      <Checkbox
+        isChecked={checked}
+        onChange={(ev) => handleChange(path, ev.target.checked)}
+        className={className}
+        isDisabled={!enabled}
+        autoFocus={!!appliedUiSchemaOptions.focus}
+      >
+        <Text fontSize='md' fontWeight='medium'>
+          {label}
+        </Text>
+      </Checkbox>
+    );
+  }
+);

packages/chakra-renderers/src/chakra-controls/ChakraSelect.tsx

@@ -0,0 +1,82 @@
+/*
+  The MIT License
+
+  Copyright (c) 2017-2019 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 React, { useMemo } from 'react';
+import { EnumCellProps, WithClassname } from '@reactjsonforms/core';
+
+import { Select } from '@chakra-ui/react';
+import merge from 'lodash/merge';
+import { i18nDefaults } from '../util';
+import { TranslateProps } from '@reactjsonforms/react';
+
+export const ChakraSelect = (
+  props: EnumCellProps & WithClassname & TranslateProps
+) => {
+  const {
+    data,
+    className,
+    id,
+    enabled,
+    schema,
+    t,
+    uischema,
+    path,
+    handleChange,
+    options = [],
+    config,
+  } = props;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const selectStyle = appliedUiSchemaOptions.trim ? {} : { width: '100%' };
+  const noneOptionLabel = useMemo(
+    () => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
+    [t, schema, uischema, path]
+  );
+
+  return (
+    <Select
+      className={className}
+      id={id}
+      isDisabled={!enabled}
+      autoFocus={appliedUiSchemaOptions.focus}
+      value={data || ''}
+      onChange={(ev) =>
+        handleChange(
+          path,
+          ev.target.selectedIndex === 0 ? undefined : ev.target.value
+        )
+      }
+      style={selectStyle}
+    >
+      <option value={''} key={'jsonforms.enum.none'}>
+        {noneOptionLabel}
+      </option>
+      ,
+      {options.map((optionValue) => (
+        <option value={optionValue.value} key={optionValue.value}>
+          {optionValue.label}
+        </option>
+      ))}
+    </Select>
+  );
+};