PrimeReact support v6

package.json

@@ -95,6 +95,7 @@
     "packages/fluentui-rc",
     "packages/mui",
     "packages/playground",
+    "packages/primereact",
     "packages/react-bootstrap",
     "packages/semantic-ui",
     "packages/utils",

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.

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`          |
 

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",

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,

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) {
         })}
       </FrameContextConsumer>
     ) : null;
+  } else if (theme === 'primereact') {
+    body = ready ? (
+      <>
+        <style>{`html { font-weight: 400; font-size: 14px; color: var(--text-color); }`}</style>
+        <link href='//cdn.jsdelivr.net/npm/primeicons@7.0.0/primeicons.min.css' rel='stylesheet' />
+        <PrimeReactProvider value={{ styleContainer: container, appendTo: 'self' }}>{children}</PrimeReactProvider>
+      </>
+    ) : null;
   }
 
   return (