+ );
+}
+
+const ShadcnWrapper = ({ children }: React.PropsWithChildren) => {
+ return (
+ <>
+
+ {children}
+
+ );
+};
+
+renderExample(shadcnRenderers, shadcnCells, ShadcnWrapper);
diff --git a/packages/react-shadcn/example/src/main.tsx b/packages/react-shadcn/example/src/main.tsx
new file mode 100644
index 000000000..1c927fac5
--- /dev/null
+++ b/packages/react-shadcn/example/src/main.tsx
@@ -0,0 +1,2 @@
+import './globals.css';
+import './index';
diff --git a/packages/react-shadcn/example/tsconfig.json b/packages/react-shadcn/example/tsconfig.json
new file mode 100644
index 000000000..671004a76
--- /dev/null
+++ b/packages/react-shadcn/example/tsconfig.json
@@ -0,0 +1,33 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Path Aliases */
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["../src/*"],
+ "@jsonforms/examples-react": ["../../examples-react/src"],
+ "@jsonforms/examples": ["../../examples/src"]
+ },
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/react-shadcn/example/tsconfig.node.json b/packages/react-shadcn/example/tsconfig.node.json
new file mode 100644
index 000000000..42872c59f
--- /dev/null
+++ b/packages/react-shadcn/example/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/packages/react-shadcn/example/vite.config.ts b/packages/react-shadcn/example/vite.config.ts
new file mode 100644
index 000000000..916cf9b9a
--- /dev/null
+++ b/packages/react-shadcn/example/vite.config.ts
@@ -0,0 +1,19 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
+
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ resolve: {
+ alias: {
+ '@jsonforms/react-shadcn': path.resolve(__dirname, '../src'),
+ '@jsonforms/examples-react': path.resolve(
+ __dirname,
+ '../../examples-react/src'
+ ),
+ '@jsonforms/examples': path.resolve(__dirname, '../../examples/src'),
+ '@': path.resolve(__dirname, '../src'),
+ },
+ },
+});
diff --git a/packages/react-shadcn/example/vite.example.config.ts b/packages/react-shadcn/example/vite.example.config.ts
new file mode 100644
index 000000000..bc41850eb
--- /dev/null
+++ b/packages/react-shadcn/example/vite.example.config.ts
@@ -0,0 +1,37 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from '@tailwindcss/vite';
+import path from 'path';
+
+export default defineConfig({
+ plugins: [react(), tailwindcss()],
+ resolve: {
+ alias: {
+ '@jsonforms/react-shadcn': path.resolve(__dirname, '../src'),
+ '@jsonforms/examples-react': path.resolve(
+ __dirname,
+ '../../examples-react/src'
+ ),
+ '@jsonforms/examples': path.resolve(__dirname, '../../examples/src'),
+ '@': path.resolve(__dirname, '../src'),
+ },
+ },
+ build: {
+ outDir: 'dist',
+ emptyOutDir: true,
+ cssCodeSplit: false,
+ rollupOptions: {
+ input: path.resolve(__dirname, 'index.example.html'),
+ output: {
+ format: 'iife',
+ entryFileNames: 'bundle.js',
+ assetFileNames: (assetInfo) => {
+ if (assetInfo.name?.endsWith('.css')) {
+ return 'bundle.css';
+ }
+ return '[name].[ext]';
+ },
+ },
+ },
+ },
+});
diff --git a/packages/react-shadcn/package.json b/packages/react-shadcn/package.json
new file mode 100644
index 000000000..1387e0312
--- /dev/null
+++ b/packages/react-shadcn/package.json
@@ -0,0 +1,135 @@
+{
+ "name": "@jsonforms/react-shadcn",
+ "version": "3.7.0",
+ "description": "shadcn/ui Renderer Set for JSON Forms (React)",
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/eclipsesource/jsonforms.git",
+ "directory": "packages/react-shadcn"
+ },
+ "bugs": "https://github.com/eclipsesource/jsonforms/issues",
+ "homepage": "http://jsonforms.io/",
+ "license": "MIT",
+ "publishConfig": {
+ "access": "public"
+ },
+ "main": "lib/jsonforms-react-shadcn.cjs.js",
+ "module": "lib/jsonforms-react-shadcn.esm.js",
+ "typings": "lib/index.d.ts",
+ "scripts": {
+ "build": "rollup -c rollup.config.js",
+ "build:examples-app": "cd example && pnpm run build-example && mv dist/index.example.html dist/index.html",
+ "dev": "cd example && pnpm run dev",
+ "clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
+ "lint": "eslint .",
+ "lint:fix": "eslint --fix .",
+ "test": "jest --no-cache",
+ "test-cov": "jest --no-cache --coverage",
+ "doc": "typedoc --name 'JSON Forms shadcn/ui Renderers' --excludeExternals --out docs src"
+ },
+ "files": [
+ "lib",
+ "src",
+ "README.md"
+ ],
+ "keywords": [
+ "shadcn",
+ "shadcn-ui",
+ "tailwind",
+ "tailwindcss",
+ "form",
+ "forms",
+ "json",
+ "jsonforms",
+ "frontend",
+ "generator",
+ "input",
+ "renderengine",
+ "jsonschema",
+ "schema",
+ "uischema",
+ "layout",
+ "customization"
+ ],
+ "dependencies": {
+ "class-variance-authority": "^0.7.0",
+ "clsx": "^2.1.0",
+ "lodash": "^4.17.21",
+ "lucide-react": "^0.563.0",
+ "radix-ui": "^1.4.3",
+ "tailwind-merge": "^2.2.0"
+ },
+ "peerDependencies": {
+ "@jsonforms/core": "3.7.0",
+ "@jsonforms/react": "3.7.0",
+ "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+ "tailwindcss": "^4.0.0"
+ },
+ "devDependencies": {
+ "@jsonforms/core": "workspace:*",
+ "@jsonforms/react": "workspace:*",
+ "@rollup/plugin-commonjs": "^23.0.3",
+ "@rollup/plugin-json": "^5.0.2",
+ "@rollup/plugin-node-resolve": "^15.0.1",
+ "@rollup/plugin-replace": "^5.0.1",
+ "@types/enzyme": "^3.10.18",
+ "@types/jest": "^29.5.14",
+ "@types/lodash": "^4.17.0",
+ "@types/react": "^17.0.24",
+ "@types/react-dom": "^17.0.9",
+ "@typescript-eslint/eslint-plugin": "^5.54.1",
+ "@typescript-eslint/parser": "^5.54.1",
+ "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+ "enzyme": "^3.11.0",
+ "eslint": "^8.56.0",
+ "eslint-config-prettier": "^8.7.0",
+ "eslint-plugin-import": "^2.27.5",
+ "eslint-plugin-prettier": "^4.2.1",
+ "eslint-plugin-react": "^7.32.2",
+ "jest": "^29.7.0",
+ "jest-environment-jsdom": "^29.7.0",
+ "jsdom": "^27.2.0",
+ "prettier": "^2.8.4",
+ "react": "^17.0.2",
+ "react-dom": "^17.0.2",
+ "rimraf": "^6.1.0",
+ "rollup": "^2.78.0",
+ "rollup-plugin-cleanup": "^3.2.1",
+ "rollup-plugin-typescript2": "^0.34.1",
+ "rollup-plugin-visualizer": "^5.4.1",
+ "ts-jest": "^29.4.5",
+ "ts-node": "^10.4.0",
+ "tslib": "^2.5.0",
+ "typedoc": "~0.25.3"
+ },
+ "jest": {
+ "moduleFileExtensions": [
+ "ts",
+ "tsx",
+ "js"
+ ],
+ "transform": {
+ "^.+\\.(ts|tsx)$": "ts-jest"
+ },
+ "testEnvironment": "jsdom",
+ "testMatch": [
+ "**/test/**/*.test.tsx"
+ ],
+ "testPathIgnorePatterns": [
+ "/node_modules/",
+ "/dist/",
+ "/lib/"
+ ],
+ "setupFilesAfterEnv": [
+ "/test/setup.ts"
+ ],
+ "moduleNameMapper": {
+ "^@/(.*)$": "/src/$1"
+ },
+ "globals": {
+ "ts-jest": {
+ "tsconfig": "tsconfig.test.json"
+ }
+ }
+ }
+}
diff --git a/packages/react-shadcn/rollup.config.js b/packages/react-shadcn/rollup.config.js
new file mode 100644
index 000000000..574b1519a
--- /dev/null
+++ b/packages/react-shadcn/rollup.config.js
@@ -0,0 +1,53 @@
+import typescript from 'rollup-plugin-typescript2';
+import cleanup from 'rollup-plugin-cleanup';
+import { visualizer } from 'rollup-plugin-visualizer';
+
+const packageJson = require('./package.json');
+
+const baseConfig = {
+ input: 'src/index.ts',
+ external: [
+ ...Object.keys(packageJson.dependencies ?? {}),
+ ...Object.keys(packageJson.peerDependencies),
+ 'react',
+ 'react-dom',
+ /^lodash\/.*/,
+ /^class-variance-authority.*/,
+ /^clsx.*/,
+ /^tailwind-merge.*/,
+ ],
+};
+
+export default [
+ {
+ ...baseConfig,
+ output: {
+ file: packageJson.module,
+ format: 'esm',
+ sourcemap: true,
+ },
+ plugins: [
+ typescript(),
+ cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+ visualizer({ open: false }),
+ ],
+ },
+ {
+ ...baseConfig,
+ output: {
+ file: packageJson.main,
+ format: 'cjs',
+ sourcemap: true,
+ },
+ plugins: [
+ typescript({
+ tsconfigOverride: {
+ compilerOptions: {
+ target: 'ES5',
+ },
+ },
+ }),
+ cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+ ],
+ },
+];
diff --git a/packages/react-shadcn/src/cells/BooleanCell.tsx b/packages/react-shadcn/src/cells/BooleanCell.tsx
new file mode 100644
index 000000000..46a599973
--- /dev/null
+++ b/packages/react-shadcn/src/cells/BooleanCell.tsx
@@ -0,0 +1,56 @@
+/*
+ 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 from 'react';
+import {
+ CellProps,
+ isBooleanControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { Checkbox } from '../shadcn/components/ui/checkbox';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+
+export const BooleanCell = (props: CellProps & ShadcnRendererProps) => {
+ const { data, id, enabled, path, handleChange } = props;
+
+ return (
+ handleChange(path, checked)}
+ disabled={!enabled}
+ />
+ );
+};
+
+/**
+ * Default tester for boolean cells.
+ */
+export const booleanCellTester: RankedTester = rankWith(2, isBooleanControl);
+
+export default withJsonFormsCellProps(withShadcnCellProps(BooleanCell));
diff --git a/packages/react-shadcn/src/cells/DateCell.tsx b/packages/react-shadcn/src/cells/DateCell.tsx
new file mode 100644
index 000000000..230403d8a
--- /dev/null
+++ b/packages/react-shadcn/src/cells/DateCell.tsx
@@ -0,0 +1,74 @@
+/*
+ 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 from 'react';
+import {
+ CellProps,
+ isDateControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { Input } from '../shadcn/components/ui/input';
+import { cn } from '../shadcn/lib/utils';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+import merge from 'lodash/merge';
+
+export const DateCell = (props: CellProps & ShadcnRendererProps) => {
+ const {
+ config,
+ data,
+ id,
+ enabled,
+ uischema,
+ path,
+ handleChange,
+ styleOverrides,
+ } = props;
+
+ const appliedUiSchemaOptions = merge({}, config, uischema.options);
+
+ return (
+
+ handleChange(path, ev.target.value === '' ? undefined : ev.target.value)
+ }
+ className={cn(styleOverrides?.inputClasses)}
+ id={id}
+ disabled={!enabled}
+ autoFocus={appliedUiSchemaOptions.focus}
+ />
+ );
+};
+
+/**
+ * Default tester for date controls.
+ */
+export const dateCellTester: RankedTester = rankWith(2, isDateControl);
+
+export default withJsonFormsCellProps(withShadcnCellProps(DateCell));
diff --git a/packages/react-shadcn/src/cells/DateTimeCell.tsx b/packages/react-shadcn/src/cells/DateTimeCell.tsx
new file mode 100644
index 000000000..8789fe016
--- /dev/null
+++ b/packages/react-shadcn/src/cells/DateTimeCell.tsx
@@ -0,0 +1,76 @@
+/*
+ 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 from 'react';
+import {
+ CellProps,
+ isDateTimeControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { Input } from '../shadcn/components/ui/input';
+import { cn } from '../shadcn/lib/utils';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+import merge from 'lodash/merge';
+
+export const DateTimeCell = (props: CellProps & ShadcnRendererProps) => {
+ const {
+ config,
+ data,
+ id,
+ enabled,
+ uischema,
+ path,
+ handleChange,
+ styleOverrides,
+ } = props;
+
+ const appliedUiSchemaOptions = merge({}, config, uischema.options);
+
+ const toISOString = (inputDateTime: string) => {
+ return inputDateTime === '' ? '' : inputDateTime + ':00.000Z';
+ };
+
+ return (
+ handleChange(path, toISOString(ev.target.value))}
+ className={cn(styleOverrides?.inputClasses)}
+ id={id}
+ disabled={!enabled}
+ autoFocus={appliedUiSchemaOptions.focus}
+ />
+ );
+};
+
+/**
+ * Default tester for datetime controls.
+ */
+export const dateTimeCellTester: RankedTester = rankWith(2, isDateTimeControl);
+
+export default withJsonFormsCellProps(withShadcnCellProps(DateTimeCell));
diff --git a/packages/react-shadcn/src/cells/EnumCell.tsx b/packages/react-shadcn/src/cells/EnumCell.tsx
new file mode 100644
index 000000000..78d5f65a7
--- /dev/null
+++ b/packages/react-shadcn/src/cells/EnumCell.tsx
@@ -0,0 +1,98 @@
+/*
+ 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,
+ isEnumControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import {
+ TranslateProps,
+ withJsonFormsEnumCellProps,
+ withTranslateProps,
+} from '@jsonforms/react';
+import {
+ NativeSelect,
+ NativeSelectOption,
+} from '../shadcn/components/ui/native-select';
+import { cn } from '../shadcn/lib/utils';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+import { i18nDefaults } from '../util';
+
+export const EnumCell = (
+ props: EnumCellProps & ShadcnRendererProps & TranslateProps
+) => {
+ const {
+ data,
+ id,
+ enabled,
+ schema,
+ uischema,
+ path,
+ handleChange,
+ options,
+ t,
+ styleOverrides,
+ } = props;
+
+ const noneOptionLabel = useMemo(
+ () => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
+ [t, schema, uischema, path]
+ );
+
+ return (
+
+ handleChange(
+ path,
+ e.target.selectedIndex === 0 ? undefined : e.target.value
+ )
+ }
+ disabled={!enabled}
+ className={cn('w-full', styleOverrides?.inputClasses)}
+ >
+ {noneOptionLabel}
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+ );
+};
+
+/**
+ * Default tester for enum cells.
+ */
+export const enumCellTester: RankedTester = rankWith(2, isEnumControl);
+
+export default withJsonFormsEnumCellProps(
+ withTranslateProps(withShadcnCellProps(EnumCell))
+);
diff --git a/packages/react-shadcn/src/cells/IntegerCell.tsx b/packages/react-shadcn/src/cells/IntegerCell.tsx
new file mode 100644
index 000000000..7385a2533
--- /dev/null
+++ b/packages/react-shadcn/src/cells/IntegerCell.tsx
@@ -0,0 +1,76 @@
+/*
+ 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 from 'react';
+import {
+ CellProps,
+ isIntegerControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { Input } from '../shadcn/components/ui/input';
+import { cn } from '../shadcn/lib/utils';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+import merge from 'lodash/merge';
+
+const toNumber = (value: string) =>
+ value === '' ? undefined : parseInt(value, 10);
+
+export const IntegerCell = (props: CellProps & ShadcnRendererProps) => {
+ const {
+ config,
+ data,
+ id,
+ enabled,
+ uischema,
+ path,
+ handleChange,
+ styleOverrides,
+ } = props;
+
+ const appliedUiSchemaOptions = merge({}, config, uischema.options);
+
+ return (
+ handleChange(path, toNumber(ev.target.value))}
+ className={cn(styleOverrides?.inputClasses)}
+ id={id}
+ disabled={!enabled}
+ autoFocus={appliedUiSchemaOptions.focus}
+ />
+ );
+};
+
+/**
+ * Default tester for integer controls.
+ */
+export const integerCellTester: RankedTester = rankWith(2, isIntegerControl);
+
+export default withJsonFormsCellProps(withShadcnCellProps(IntegerCell));
diff --git a/packages/react-shadcn/src/cells/NumberCell.tsx b/packages/react-shadcn/src/cells/NumberCell.tsx
new file mode 100644
index 000000000..3ea7129be
--- /dev/null
+++ b/packages/react-shadcn/src/cells/NumberCell.tsx
@@ -0,0 +1,62 @@
+/*
+ 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 from 'react';
+import {
+ CellProps,
+ isNumberControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { Input } from '../shadcn/components/ui/input';
+import { cn } from '../shadcn/lib/utils';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+
+const toNumber = (value: string) => (value === '' ? undefined : Number(value));
+
+export const NumberCell = (props: CellProps & ShadcnRendererProps) => {
+ const { data, id, enabled, path, handleChange, styleOverrides } = props;
+
+ return (
+ handleChange(path, toNumber(e.target.value))}
+ className={cn(styleOverrides?.inputClasses)}
+ id={id}
+ disabled={!enabled}
+ />
+ );
+};
+
+/**
+ * Default tester for number cells.
+ */
+export const numberCellTester: RankedTester = rankWith(2, isNumberControl);
+
+export default withJsonFormsCellProps(withShadcnCellProps(NumberCell));
diff --git a/packages/react-shadcn/src/cells/NumberFormatCell.tsx b/packages/react-shadcn/src/cells/NumberFormatCell.tsx
new file mode 100644
index 000000000..b25fe4e2b
--- /dev/null
+++ b/packages/react-shadcn/src/cells/NumberFormatCell.tsx
@@ -0,0 +1,78 @@
+/*
+ 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 from 'react';
+import {
+ CellProps,
+ Formatted,
+ isNumberFormatControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { Input } from '../shadcn/components/ui/input';
+import { cn } from '../shadcn/lib/utils';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+
+export const NumberFormatCell = (
+ props: CellProps & ShadcnRendererProps & Formatted
+) => {
+ const { id, enabled, uischema, path, handleChange, schema, styleOverrides } =
+ props;
+ const maxLength = schema.maxLength;
+ const formattedNumber: string = props.toFormatted(props.data);
+
+ const onChange = (ev: React.ChangeEvent) => {
+ const validStringNumber = props.fromFormatted(ev.currentTarget.value);
+ handleChange(path, validStringNumber);
+ };
+
+ return (
+
+ );
+};
+
+/**
+ * Default tester for number format cells.
+ * @type {RankedTester}
+ */
+export const numberFormatCellTester: RankedTester = rankWith(
+ 4,
+ isNumberFormatControl
+);
+
+export default withJsonFormsCellProps(withShadcnCellProps(NumberFormatCell));
diff --git a/packages/react-shadcn/src/cells/OneOfEnumCell.tsx b/packages/react-shadcn/src/cells/OneOfEnumCell.tsx
new file mode 100644
index 000000000..0fbdfde90
--- /dev/null
+++ b/packages/react-shadcn/src/cells/OneOfEnumCell.tsx
@@ -0,0 +1,107 @@
+/*
+ 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,
+ isOneOfEnumControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import {
+ TranslateProps,
+ withJsonFormsOneOfEnumCellProps,
+ withTranslateProps,
+} from '@jsonforms/react';
+import {
+ NativeSelect,
+ NativeSelectOption,
+} from '../shadcn/components/ui/native-select';
+import { cn } from '../shadcn/lib/utils';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+import { i18nDefaults } from '../util';
+
+export const OneOfEnumCell = (
+ props: EnumCellProps & ShadcnRendererProps & TranslateProps
+) => {
+ const {
+ data,
+ id,
+ enabled,
+ schema,
+ uischema,
+ path,
+ handleChange,
+ options,
+ t,
+ styleOverrides,
+ } = props;
+
+ const noneOptionLabel = useMemo(
+ () => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
+ [t, schema, uischema, path]
+ );
+
+ const hideEmptyOption = uischema.options?.hideEmptyOption === true;
+
+ return (
+
+ handleChange(
+ path,
+ e.target.selectedIndex === 0 && !hideEmptyOption
+ ? undefined
+ : e.target.value
+ )
+ }
+ disabled={!enabled}
+ className={cn('w-full', styleOverrides?.inputClasses)}
+ >
+ {!hideEmptyOption && (
+ {noneOptionLabel}
+ )}
+ {options.map((option) => (
+
+ {option.label}
+
+ ))}
+
+ );
+};
+
+/**
+ * Default tester for oneOf enum controls.
+ */
+export const oneOfEnumCellTester: RankedTester = rankWith(
+ 2,
+ isOneOfEnumControl
+);
+
+export default withJsonFormsOneOfEnumCellProps(
+ withTranslateProps(withShadcnCellProps(OneOfEnumCell))
+);
diff --git a/packages/react-shadcn/src/cells/SliderCell.tsx b/packages/react-shadcn/src/cells/SliderCell.tsx
new file mode 100644
index 000000000..b94098f76
--- /dev/null
+++ b/packages/react-shadcn/src/cells/SliderCell.tsx
@@ -0,0 +1,67 @@
+/*
+ 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 from 'react';
+import {
+ CellProps,
+ isRangeControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { Slider } from '../shadcn/components/ui/slider';
+import { cn } from '../shadcn/lib/utils';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+
+export const SliderCell = (props: CellProps & ShadcnRendererProps) => {
+ const { data, id, enabled, schema, path, handleChange, styleOverrides } =
+ props;
+
+ const currentValue = data ?? schema.default ?? schema.minimum ?? 0;
+
+ return (
+
+ );
+};
+
+export const sliderCellTester: RankedTester = rankWith(4, isRangeControl);
+
+export default withJsonFormsCellProps(withShadcnCellProps(SliderCell));
diff --git a/packages/react-shadcn/src/cells/TextAreaCell.tsx b/packages/react-shadcn/src/cells/TextAreaCell.tsx
new file mode 100644
index 000000000..d0e7aa6fa
--- /dev/null
+++ b/packages/react-shadcn/src/cells/TextAreaCell.tsx
@@ -0,0 +1,59 @@
+/*
+ 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 from 'react';
+import {
+ CellProps,
+ isMultiLineControl,
+ RankedTester,
+ rankWith,
+} from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { Textarea } from '../shadcn/components/ui/textarea';
+import { cn } from '../shadcn/lib/utils';
+import { withShadcnCellProps } from '../util/props';
+import type { ShadcnRendererProps } from '../util/props';
+
+export const TextAreaCell = (props: CellProps & ShadcnRendererProps) => {
+ const { data, id, enabled, path, handleChange, styleOverrides } = props;
+
+ return (
+