diff --git a/package-lock.json b/package-lock.json index 242a2ff038..2b5e720378 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "packages/mui", "packages/playground", "packages/react-bootstrap", + "packages/primereact", "packages/semantic-ui", "packages/utils", "packages/validator-ajv8", @@ -9929,6 +9930,10 @@ "resolved": "packages/playground", "link": true }, + "node_modules/@rjsf/primereact": { + "resolved": "packages/primereact", + "link": true + }, "node_modules/@rjsf/react-bootstrap": { "resolved": "packages/react-bootstrap", "link": true @@ -30700,6 +30705,44 @@ "node": ">=4" } }, + "node_modules/primeflex": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/primeflex/-/primeflex-3.3.1.tgz", + "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/primeicons": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz", + "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==", + "dev": true, + "license": "MIT" + }, + "node_modules/primereact": { + "version": "10.9.5", + "resolved": "https://registry.npmjs.org/primereact/-/primereact-10.9.5.tgz", + "integrity": "sha512-4O6gm0LrKF7Ml8zQmb8mGiWS/ugJ94KBOAS/CAxWFQh9qyNgfNw/qcpCeomPIkjWd98jrM2XDiEbgq+W0395Hw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/react-transition-group": "^4.4.1", + "react-transition-group": "^4.4.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/prism-react-renderer": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/prism-react-renderer/-/prism-react-renderer-2.4.1.tgz", @@ -38090,6 +38133,7 @@ "@rjsf/core": "^6.0.0-beta.10", "@rjsf/fluentui-rc": "^6.0.0-beta.10", "@rjsf/mui": "^6.0.0-beta.10", + "@rjsf/primereact": "^6.0.0-beta.10", "@rjsf/react-bootstrap": "^6.0.0-beta.10", "@rjsf/semantic-ui": "^6.0.0-beta.10", "@rjsf/utils": "^6.0.0-beta.10", @@ -38145,6 +38189,32 @@ "react": "^18.2.0" } }, + "packages/primereact": { + "name": "@rjsf/primereact", + "version": "6.0.0-beta.10", + "license": "Apache-2.0", + "devDependencies": { + "@rjsf/core": "^6.0.0-beta.10", + "@rjsf/snapshot-tests": "^6.0.0-beta.10", + "@rjsf/utils": "^6.0.0-beta.10", + "@rjsf/validator-ajv8": "^6.0.0-beta.10", + "@rollup/plugin-replace": "^6.0.2", + "eslint": "^8.56.0", + "primeflex": "^3.3.1", + "primeicons": "^7.0.0", + "primereact": "^10.9.2" + }, + "engines": { + "node": ">=20" + }, + "peerDependencies": { + "@rjsf/core": "^6.0.0-beta", + "@rjsf/utils": "^6.0.0-beta", + "primeicons": ">=6.0.0", + "primereact": ">=8.0.0", + "react": ">=18" + } + }, "packages/react-bootstrap": { "name": "@rjsf/react-bootstrap", "version": "6.0.0-beta.10", diff --git a/package.json b/package.json index de85797e0d..a750cf0ee1 100644 --- a/package.json +++ b/package.json @@ -95,6 +95,7 @@ "packages/fluentui-rc", "packages/mui", "packages/playground", + "packages/primereact", "packages/react-bootstrap", "packages/semantic-ui", "packages/utils", diff --git a/packages/docs/docs/api-reference/themes/primereact/uiSchema.md b/packages/docs/docs/api-reference/themes/primereact/uiSchema.md new file mode 100644 index 0000000000..ada5378d87 --- /dev/null +++ b/packages/docs/docs/api-reference/themes/primereact/uiSchema.md @@ -0,0 +1,38 @@ +# PrimeReact Customization + +You may set PrimeReact-specific options in the `uiSchema` object using the `"prime"` `"ui:option"`. + +```json +{ + "password": { + "ui:options": { + "prime": { + "feedback": true, + "weakLabel": "Too weak", + "mediumLabel": "Could be stronger", + "strongLabel": "Strong password", + "toggleMask": true + } + } + } +} +``` + +## Components + +The `@rjsf/primereact` theme renders to the following PrimeReact components: + +- [`InputText`](https://primereact.org/inputtext/) as the default widget +- [`AutoComplete`](https://primereact.org/autocomplete/) as the default with `examples` +- [`Checkbox`](https://primereact.org/checkbox/) for boolean fields and `checkboxes` widget +- [`ColorPicker`](https://primereact.org/colorpicker/) as `color` widget +- [`Password`](https://primereact.org/password/) as `password` widget +- [`RadioButton`](https://primereact.org/radiobutton/) as `radio` widget +- [`Slider`](https://primereact.org/slider/) as `range` widget +- [`Dropdown`](https://primereact.org/dropdown/) as `select` widget +- [`MultiSelect`](https://primereact.org/multiselect/) as `select` widget with `multiple` option +- [`InputTextarea`](https://primereact.org/inputtextarea/) as `textarea` widget +- [`InputNumber`](https://primereact.org/inputnumber/) as `updown` widget + +Please refer to the [PrimeReact documentation](https://primereact.org/) for the available PrimeReact-specific options +of each component. diff --git a/packages/docs/docs/usage/themes.md b/packages/docs/docs/usage/themes.md index d34942999b..ad9629dfcb 100644 --- a/packages/docs/docs/usage/themes.md +++ b/packages/docs/docs/usage/themes.md @@ -8,11 +8,12 @@ meaning that you must load the Bootstrap stylesheet on the page to view the form | Theme Name | Status | Package Name / Link | | --------------------- | --------- | ----------------------- | | antd | Published | `@rjsf/antd` | -| Bootstrap 3 (default) | Published | `@rjsf/core` | -| react-bootstrap | Published | `@rjsf/react-bootstrap` | | Chakra UI | Published | `@rjsf/chakra-ui` | +| Bootstrap 3 (default) | Published | `@rjsf/core` | | fluentui-rc | Published | `@rjsf/fluentui-rc` | | material-ui | Published | `@rjsf/mui` | +| PrimeReact | - | `@rjsf/primereact` | +| react-bootstrap | Published | `@rjsf/react-bootstrap` | | Semantic UI | Published | `@rjsf/semantic-ui` | | shadcn | Published | `@rjsf/shadcn` | diff --git a/packages/playground/package.json b/packages/playground/package.json index 46c80bee39..fbe9afad89 100644 --- a/packages/playground/package.json +++ b/packages/playground/package.json @@ -44,6 +44,7 @@ "@rjsf/core": "^6.0.0-beta.10", "@rjsf/fluentui-rc": "^6.0.0-beta.10", "@rjsf/mui": "^6.0.0-beta.10", + "@rjsf/primereact": "^6.0.0-beta.10", "@rjsf/react-bootstrap": "^6.0.0-beta.10", "@rjsf/semantic-ui": "^6.0.0-beta.10", "@rjsf/utils": "^6.0.0-beta.10", diff --git a/packages/playground/src/app.tsx b/packages/playground/src/app.tsx index ac88ccdcaf..1ea90154ff 100644 --- a/packages/playground/src/app.tsx +++ b/packages/playground/src/app.tsx @@ -6,6 +6,7 @@ import { Theme as BootstrapTheme } from '@rjsf/react-bootstrap'; import { Theme as ChakraUITheme } from '@rjsf/chakra-ui'; import { Theme as shadcnTheme } from '@rjsf/shadcn'; import { Theme as DaisyUITheme } from '@rjsf/daisyui'; +import { Theme as PrimeReactTheme } from '@rjsf/primereact'; import v8Validator, { customizeValidator } from '@rjsf/validator-ajv8'; import Ajv2019 from 'ajv/dist/2019.js'; import Ajv2020 from 'ajv/dist/2020.js'; @@ -151,6 +152,168 @@ const themes: PlaygroundProps['themes'] = { stylesheet: '//cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css', theme: BootstrapTheme, }, + primereact: { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-cyan/theme.css', + theme: PrimeReactTheme, + subthemes: { + 'arya-blue': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/arya-blue/theme.css', + }, + 'arya-green': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/arya-green/theme.css', + }, + 'arya-orange': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/arya-orange/theme.css', + }, + 'arya-purple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/arya-purple/theme.css', + }, + 'bootstrap4-dark-blue': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/bootstrap4-dark-blue/theme.css', + }, + 'bootstrap4-dark-purple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/bootstrap4-dark-purple/theme.css', + }, + 'bootstrap4-light-blue': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/bootstrap4-light-blue/theme.css', + }, + 'bootstrap4-light-purple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/bootstrap4-light-purple/theme.css', + }, + 'fluent-light': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/fluent-light/theme.css', + }, + 'lara-dark-amber': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-amber/theme.css', + }, + 'lara-dark-blue': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-blue/theme.css', + }, + 'lara-dark-cyan': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-cyan/theme.css', + }, + 'lara-dark-green': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-green/theme.css', + }, + 'lara-dark-indigo': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-indigo/theme.css', + }, + 'lara-dark-pink': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-pink/theme.css', + }, + 'lara-dark-purple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-purple/theme.css', + }, + 'lara-dark-teal': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-teal/theme.css', + }, + 'lara-light-amber': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-amber/theme.css', + }, + 'lara-light-blue': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-blue/theme.css', + }, + 'lara-light-cyan': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-cyan/theme.css', + }, + 'lara-light-green': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-green/theme.css', + }, + 'lara-light-indigo': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-indigo/theme.css', + }, + 'lara-light-pink': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-pink/theme.css', + }, + 'lara-light-purple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-purple/theme.css', + }, + 'lara-light-teal': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-teal/theme.css', + }, + 'luna-amber': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/luna-amber/theme.css', + }, + 'luna-blue': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/luna-blue/theme.css', + }, + 'luna-green': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/luna-green/theme.css', + }, + 'luna-pink': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/luna-pink/theme.css', + }, + 'md-dark-deeppurple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/md-dark-deeppurple/theme.css', + }, + 'md-dark-indigo': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/md-dark-indigo/theme.css', + }, + 'md-light-deeppurple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/md-light-deeppurple/theme.css', + }, + 'md-light-indigo': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/md-light-indigo/theme.css', + }, + 'mdc-dark-deeppurple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mdc-dark-deeppurple/theme.css', + }, + 'mdc-dark-indigo': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mdc-dark-indigo/theme.css', + }, + 'mdc-light-deeppurple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mdc-light-deeppurple/theme.css', + }, + 'mdc-light-indigo': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mdc-light-indigo/theme.css', + }, + mira: { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mira/theme.css', + }, + nano: { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/nano/theme.css', + }, + nova: { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/nova/theme.css', + }, + 'nova-accent': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/nova-accent/theme.css', + }, + 'nova-alt': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/nova-alt/theme.css', + }, + rhea: { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/rhea/theme.css', + }, + 'saga-blue': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/saga-blue/theme.css', + }, + 'saga-green': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/saga-green/theme.css', + }, + 'saga-orange': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/saga-orange/theme.css', + }, + 'saga-purple': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/saga-purple/theme.css', + }, + 'soho-dark': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/soho-dark/theme.css', + }, + 'soho-light': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/soho-light/theme.css', + }, + 'tailwind-light': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/tailwind-light/theme.css', + }, + 'viva-dark': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/viva-dark/theme.css', + }, + 'viva-light': { + stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/viva-light/theme.css', + }, + }, + }, 'semantic-ui': { stylesheet: '//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css', theme: SuiTheme, diff --git a/packages/playground/src/components/DemoFrame.tsx b/packages/playground/src/components/DemoFrame.tsx index 045ae7b627..76faedd8f7 100644 --- a/packages/playground/src/components/DemoFrame.tsx +++ b/packages/playground/src/components/DemoFrame.tsx @@ -7,6 +7,7 @@ import { __createChakraFrameProvider } from '@rjsf/chakra-ui'; import { StyleProvider as AntdStyleProvider } from '@ant-design/cssinjs'; import { __createFluentUIRCFrameProvider } from '@rjsf/fluentui-rc'; import { __createDaisyUIFrameProvider } from '@rjsf/daisyui'; +import { PrimeReactProvider } from 'primereact/api'; /* Adapted from https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/DemoSandboxed.js @@ -94,6 +95,14 @@ export default function DemoFrame(props: DemoFrameProps) { })} ) : null; + } else if (theme === 'primereact') { + body = ready ? ( + <> + + + {children} + + ) : null; } return ( diff --git a/packages/playground/src/samples/layoutGrid.tsx b/packages/playground/src/samples/layoutGrid.tsx index 6054f2fafd..511bcf5126 100644 --- a/packages/playground/src/samples/layoutGrid.tsx +++ b/packages/playground/src/samples/layoutGrid.tsx @@ -1923,6 +1923,167 @@ const layoutGrid: Sample = { }, }, }; + case 'primereact': + return { + 'ui:field': 'LayoutGridField', + 'ui:layoutGrid': { + 'ui:row': { + children: [ + { + 'ui:col': { + children: ['person'], + }, + }, + { + 'ui:columns': { + xs: 4, + children: ['person.name.first', 'person.name.middle', 'person.name.last'], + }, + }, + { + 'ui:col': { + sm: 4, + children: ['person.birth_date'], + }, + }, + { + 'ui:col': { + sm: 8, + children: ['person.race'], + }, + }, + { + 'ui:col': { + sm: 6, + children: [ + { + 'ui:row': { + children: [ + { + 'ui:columns': { + children: ['person.address.line_1', 'person.address.line_2', 'person.address.city'], + }, + }, + { + 'ui:columns': { + sm: 6, + children: ['person.address.state', 'person.address.postal_code'], + }, + }, + ], + }, + }, + ], + }, + }, + { + 'ui:col': { + sm: 6, + children: [ + { + 'ui:row': { + children: [ + { + 'ui:columns': { + children: ['employment'], + }, + }, + { + 'ui:condition': { + field: 'employment.job_type', + value: 'company', + operator: 'all', + children: [ + { + 'ui:columns': { + children: ['employment.business', 'employment.title'], + }, + }, + { + 'ui:col': { + children: ['employment.location.city'], + }, + }, + { + 'ui:col': { + children: ['employment.location.state'], + }, + }, + ], + }, + }, + { + 'ui:condition': { + field: 'employment.job_type', + value: 'education', + operator: 'all', + children: [ + { + 'ui:columns': { + children: ['employment.district', 'employment.school', 'employment.title'], + }, + }, + { + 'ui:col': { + children: ['employment.location.city'], + }, + }, + { + 'ui:col': { + children: ['employment.location.state'], + }, + }, + ], + }, + }, + { + 'ui:condition': { + field: 'employment.job_type', + value: 'other', + operator: 'all', + children: [ + { + 'ui:columns': { + children: [ + { + name: 'employment.description', + rows: 6, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + ], + }, + }, + person: { + 'ui:field': 'LayoutHeaderField', + race: { + 'ui:options': { + widget: 'checkboxes', + }, + }, + address: { + 'ui:field': 'LayoutGridField', + }, + }, + employment: { + 'ui:options': { + inline: true, + }, + description: { + 'ui:widget': 'textarea', + }, + }, + }; default: return { 'ui:field': 'LayoutGridField', diff --git a/packages/playground/tsconfig.json b/packages/playground/tsconfig.json index 1d8bcd8d5b..d8894b2927 100644 --- a/packages/playground/tsconfig.json +++ b/packages/playground/tsconfig.json @@ -53,6 +53,9 @@ { "path": "../mui" }, + { + "path": "../primereact" + }, { "path": "../react-bootstrap" }, diff --git a/packages/playground/vite.config.ts b/packages/playground/vite.config.ts index 65821a815c..dc571fee62 100644 --- a/packages/playground/vite.config.ts +++ b/packages/playground/vite.config.ts @@ -20,6 +20,7 @@ export default defineConfig({ '@rjsf/core': path.resolve(__dirname, '../core/src'), '@rjsf/fluentui-rc': path.resolve(__dirname, '../fluentui-rc/src'), '@rjsf/mui': path.resolve(__dirname, '../mui/src'), + '@rjsf/primereact': path.resolve(__dirname, '../primereact/src'), '@rjsf/react-bootstrap': path.resolve(__dirname, '../react-bootstrap/src'), '@rjsf/semantic-ui': path.resolve(__dirname, '../semantic-ui/src'), '@rjsf/shadcn': path.resolve(__dirname, '../shadcn/src'), diff --git a/packages/primereact/.eslintrc b/packages/primereact/.eslintrc new file mode 100644 index 0000000000..8f31b04e27 --- /dev/null +++ b/packages/primereact/.eslintrc @@ -0,0 +1,9 @@ +{ + "extends": "../../.eslintrc", + "plugins": [ + "@typescript-eslint", + "jsx-a11y", + "react", + "import" + ] +} diff --git a/packages/primereact/README.md b/packages/primereact/README.md new file mode 100644 index 0000000000..c6835c580f --- /dev/null +++ b/packages/primereact/README.md @@ -0,0 +1,120 @@ +[![Build Status][build-shield]][build-url] +[![npm][npm-shield]][npm-url] +[![npm downloads][npm-dl-shield]][npm-dl-url] +[![Contributors][contributors-shield]][contributors-url] +[![Apache 2.0 License][license-shield]][license-url] + +
+

+ + Logo + + +

@rjsf/primereact

+ +

+ PrimeReact theme, fields, and widgets for react-jsonschema-form. +
+ Explore the docs » +
+
+ View Playground + · + Report Bug + · + Request Feature +

+

+ +## Table of Contents + +- [About The Project](#about-the-project) + - [Built With](#built-with) +- [Getting Started](#getting-started) + - [Prerequisites](#prerequisites) + - [Installation](#installation) +- [Usage](#usage) +- [Roadmap](#roadmap) +- [Contributing](#contributing) +- [Contact](#contact) + +## About The Project + +PrimeReact theme, fields, and widgets for `react-jsonschema-form`. + +### Built With + +- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/) +- [PrimeReact](https://github.com/primefaces/primereact) + +## Getting Started + +### Prerequisites + +- `primereact >= 8.0.0` +- `primeicons >= 6.0.0` +- `@rjsf/core >= 6` +- `@rjsf/utils >= 6` +- `@rjsf/validator-ajv8 >= 6` + +```sh +npm install primereact primeicons @rjsf/core +``` + +### Installation + +```sh +npm install @rjsf/primereact +``` + +## Usage + +```javascript +import Form from '@rjsf/primereact'; +``` + +or + +```javascript +import { withTheme } from '@rjsf/core'; +import { Theme as PrimeReactTheme } from '@rjsf/primereact'; + +// Customize the theme with your own fields and widgets + +const Form = withTheme(PrimeReactTheme); +``` + +## Roadmap + +See the general [open issues](https://github.com/rjsf-team/react-jsonschema-form/issues). + +## Contributing + +Read our [contributors' guide](https://rjsf-team.github.io/react-jsonschema-form/docs/contributing/) to get started. + +## Contact + +rjsf team: [https://github.com/orgs/rjsf-team/people](https://github.com/orgs/rjsf-team/people) + +GitHub +repository: [https://github.com/rjsf-team/react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form) + +[build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg + +[build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions + +[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg + +[contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors + +[license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square + +[license-url]: https://choosealicense.com/licenses/apache-2.0/ + +[npm-shield]: https://img.shields.io/npm/v/@rjsf/primereact/latest.svg?style=flat-square + +[npm-url]: https://www.npmjs.com/package/@rjsf/primereact + +[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/primereact.svg?style=flat-square + +[npm-dl-url]: https://www.npmjs.com/package/@rjsf/primereact diff --git a/packages/primereact/babel.config.json b/packages/primereact/babel.config.json new file mode 100644 index 0000000000..ac08da0a4a --- /dev/null +++ b/packages/primereact/babel.config.json @@ -0,0 +1,3 @@ +{ + "extends": "../../babel.config.json" +} diff --git a/packages/primereact/jest.config.json b/packages/primereact/jest.config.json new file mode 100644 index 0000000000..715150b8f4 --- /dev/null +++ b/packages/primereact/jest.config.json @@ -0,0 +1,13 @@ +{ + "testEnvironment": "jsdom", + "transform": { + "^.+\\.(ts|tsx|js|jsx)$": ["babel-jest", { "configFile": "./babel.config.json" }] + }, + "transformIgnorePatterns": ["/node_modules/(?!nanoid/.*)"], + "moduleNameMapper": { + "^@/(.*)$": "/src/$1" + }, + "setupFilesAfterEnv": [ + "/test/setup.ts" + ] +} diff --git a/packages/primereact/logo.png b/packages/primereact/logo.png new file mode 100644 index 0000000000..b4a65d42e6 Binary files /dev/null and b/packages/primereact/logo.png differ diff --git a/packages/primereact/package.json b/packages/primereact/package.json new file mode 100644 index 0000000000..f4bce48d01 --- /dev/null +++ b/packages/primereact/package.json @@ -0,0 +1,104 @@ +{ + "name": "@rjsf/primereact", + "version": "6.0.0-beta.10", + "description": "PrimeReact theme, fields and widgets for react-jsonschema-form", + "main": "dist/index.js", + "module": "lib/index.js", + "typings": "lib/index.d.ts", + "type": "module", + "exports": { + ".": { + "types": "./lib/index.d.ts", + "require": "./dist/index.js", + "import": "./lib/index.js" + }, + "./lib": { + "types": "./lib/index.d.ts", + "require": "./dist/index.js", + "import": "./lib/index.js" + }, + "./lib/*.js": { + "types": "./lib/*.d.ts", + "require": "./dist/*.js", + "import": "./lib/*.js" + }, + "./dist": { + "types": "./lib/index.d.ts", + "require": "./dist/index.js", + "import": "./lib/index.js" + }, + "./dist/*.js": { + "types": "./lib/*.d.ts", + "require": "./dist/*.js", + "import": "./lib/*.js" + } + }, + "scripts": { + "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json", + "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs", + "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/primereact.esm.js --sourcemap --packages=external --format=esm", + "build:umd": "rollup dist/primereact.esm.js --format=umd --file=dist/primereact.umd.js --name=@rjsf/primereact", + "build": "npm run build:ts && npm run build:cjs && npm run build:esm && npm run build:umd", + "cs-check": "prettier -l \"{src,test}/**/*.ts?(x)\"", + "cs-format": "prettier \"{src,test}/**/*.ts?(x)\" --write", + "lint": "eslint src test", + "precommit": "lint-staged", + "test": "jest", + "test:update": "jest --u" + }, + "lint-staged": { + "{src,test}/**/*.ts?(x)": [ + "eslint --fix" + ] + }, + "files": [ + "dist", + "lib", + "src" + ], + "engineStrict": false, + "engines": { + "node": ">=20" + }, + "peerDependencies": { + "@rjsf/core": "^6.0.0-beta", + "@rjsf/utils": "^6.0.0-beta", + "primeicons": ">=6.0.0", + "primereact": ">=8.0.0", + "react": ">=18" + }, + "devDependencies": { + "@rjsf/core": "^6.0.0-beta.10", + "@rjsf/snapshot-tests": "^6.0.0-beta.10", + "@rjsf/utils": "^6.0.0-beta.10", + "@rjsf/validator-ajv8": "^6.0.0-beta.10", + "@rollup/plugin-replace": "^6.0.2", + "eslint": "^8.56.0", + "primeicons": "^7.0.0", + "primeflex": "^3.3.1", + "primereact": "^10.9.2" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git" + }, + "keywords": [ + "primereact", + "primeicons", + "react", + "react-jsonschema-form", + "jsonschema", + "json-schema", + "json", + "rjsf-primereact" + ], + "author": "Arnold Daniels ", + "license": "Apache-2.0", + "bugs": { + "url": "https://github.com/rjsf-team/react-jsonschema-form/issues" + }, + "homepage": "https://github.com/rjsf-team/react-jsonschema-form", + "publishConfig": { + "access": "public" + } +} diff --git a/packages/primereact/src/AddButton/AddButton.tsx b/packages/primereact/src/AddButton/AddButton.tsx new file mode 100644 index 0000000000..86876e7b07 --- /dev/null +++ b/packages/primereact/src/AddButton/AddButton.tsx @@ -0,0 +1,23 @@ +import { Button } from 'primereact/button'; +import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils'; + +/** The `AddButton` renders a button that represents the `Add` action on a form + */ +export default function AddButton({ + uiSchema, + registry, + color, + ...props +}: IconButtonProps) { + const { translateString } = registry; + return ( + + + + + + + + + + +`; + +exports[`array fields array icons 1`] = ` +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ +
+
+
+
+
+
+ + + + +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +exports[`array fields checkboxes 1`] = ` +
+
+
+ +
+
+ + + +
+`; + +exports[`array fields fixed array 1`] = ` +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+ +
+`; + +exports[`array fields has errors 1`] = ` +
+ +
+
+
+
+ + + +
+
+
+
+ +
+`; + +exports[`array fields no errors 1`] = ` +
+
+
+
+
+ + +
+
+
+
+ +
+`; + +exports[`with title and description array 1`] = ` +
+
+
+
+ Test field + +
+
+
+
+ + a test description + +
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +exports[`with title and description array icons 1`] = ` +
+
+
+
+ Test field + +
+
+
+
+ + a test description + +
+
+
+
+
+ + + + +
+
+
+
+ + + + + a test item description + + +
+
+
+
+
+
+ + + + +
+
+
+
+ + + + + a test item description + + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +exports[`with title and description checkboxes 1`] = ` +
+
+
+ + + + + a test item description + + +
+
+ +
+
+
+ + + + + a test item description + + +
+
+
+ + + + + + + + +
+`; + +exports[`with title and description from both array 1`] = ` +
+
+
+
+ My Field + +
+
+
+
+ + a fancier description + +
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +exports[`with title and description from both array icons 1`] = ` +
+
+
+
+ My Field + +
+
+
+
+ + a fancier description + +
+
+
+
+
+ + + + +
+
+
+
+ + + + + a fancier item description + + +
+
+
+
+
+
+ + + + +
+
+
+
+ + + + + a fancier item description + + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +exports[`with title and description from both checkboxes 1`] = ` +
+
+
+ + + + + a fancier item description + + +
+
+ +
+
+
+ + + + + a fancier item description + + +
+
+
+ + + + + + + + +
+`; + +exports[`with title and description from uiSchema array 1`] = ` +
+
+
+
+ My Field + +
+
+
+
+ + a fancier description + +
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +exports[`with title and description from uiSchema array icons 1`] = ` +
+
+
+
+ My Field + +
+
+
+
+ + a fancier description + +
+
+
+
+
+ + + + +
+
+
+
+ + + + + a fancier item description + + +
+
+
+
+
+
+ + + + +
+
+
+
+ + + + + a fancier item description + + +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +exports[`with title and description from uiSchema checkboxes 1`] = ` +
+
+
+ + + + + a fancier item description + + +
+
+ +
+
+
+ + + + + a fancier item description + + +
+
+
+ + + + + + + + +
+`; + +exports[`with title and description with global label off array 1`] = ` +
+
+
+
+ Test field + +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +exports[`with title and description with global label off array icons 1`] = ` +
+
+
+
+ Test field + +
+
+
+
+
+
+
+
+
+ + + + +
+
+
+
+ +
+
+
+
+
+
+ + + + +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+`; + +exports[`with title and description with global label off checkboxes 1`] = ` +
+
+
+ + +
+
+ +
+
+
+ +
+
+
+ + + + + + + + +
+`; diff --git a/packages/primereact/test/__snapshots__/Form.test.tsx.snap b/packages/primereact/test/__snapshots__/Form.test.tsx.snap new file mode 100644 index 0000000000..5e9c48660f --- /dev/null +++ b/packages/primereact/test/__snapshots__/Form.test.tsx.snap @@ -0,0 +1,4144 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`single fields checkbox field 1`] = ` +
+
+
+
+
+ +
+
+
+
+
+ + +`; + +exports[`single fields checkbox field with label 1`] = ` +
+
+
+
+
+ +
+
+ +
+
+
+ + +`; + +exports[`single fields checkbox field with label and description 1`] = ` +
+
+
+ + test description + +
+
+ +
+
+ +
+
+
+ + +`; + +exports[`single fields checkbox field with label and rich text description 1`] = ` +
+
+
+ + + + test + + + + description + + + +
+
+ +
+
+ +
+
+
+ + +`; + +exports[`single fields checkboxes field 1`] = ` +
+
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+
+ + +`; + +exports[`single fields field with description 1`] = ` +
+
+
+
+
+ + + + + some description + + +
+
+
+
+ +
+`; + +exports[`single fields field with description in uiSchema 1`] = ` +
+
+
+
+
+ + + + + some other description + + +
+
+
+
+ +
+`; + +exports[`single fields field with markdown description 1`] = ` +
+
+
+
+
+ + + + + + some + + Rich + + description + + + +
+
+
+
+ +
+`; + +exports[`single fields field with markdown description in uiSchema 1`] = ` +
+
+
+
+
+ + + + + + some other description + + + +
+
+
+
+ +
+`; + +exports[`single fields format color 1`] = ` +
+
+
+
+ +
+
+
+ +
+`; + +exports[`single fields format date 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields format datetime 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields format time 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields help and error display 1`] = ` +
+ +
+
+ + + + help me! + +
+
+ +
+`; + +exports[`single fields hidden field 1`] = ` +
+
+
+
+ +
+
+
+ +
+`; + +exports[`single fields hidden label 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields null field 1`] = ` +
+
+
+
+ + +`; + +exports[`single fields number field 0 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields number field 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields password field 1`] = ` +
+
+
+
+ +
+
+
+ +
+`; + +exports[`single fields radio field 1`] = ` +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ + +`; + +exports[`single fields schema examples 1`] = ` +
+
+
+ + + + +
+
+ +
+`; + +exports[`single fields select field 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields select field multiple choice enumDisabled 1`] = ` +
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+ +
+
+ +
+
+
+
+ + +`; + +exports[`single fields select field multiple choice formData 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields select field single choice enumDisabled 1`] = ` +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ + +`; + +exports[`single fields select field single choice form disabled using radio widget 1`] = ` +
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ + +`; + +exports[`single fields select field single choice formData 1`] = ` +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+ + +`; + +exports[`single fields slider field 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields string field format data-url 1`] = ` +
+
+
+
+ +
+
+
+ +
+`; + +exports[`single fields string field format email 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields string field format uri 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields string field regular 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields string field with placeholder 1`] = ` +
+
+
+ +
+
+ +
+`; + +exports[`single fields textarea field 1`] = ` +
+
+
+