Add support for PrimeReact

.gitignore

@@ -119,6 +119,7 @@ build
 _build
 site
 dist
+!packages/primereact/dist
 lib
 yarn.lock
 

CHANGELOG.md

@@ -15,7 +15,10 @@ it according to semantic versioning. For example, if your PR adds a breaking cha
 should change the heading of the (upcoming) version to include a major version bump.
 
 -->
-# v4.0.1 (upcoming)
+# v4.1.0 (upcoming)
+
+## @rjsf/primereact
+- Add support for the PrimeReact component library.
 
 # v4.0.0
 

docs/usage/themes.md

@@ -6,14 +6,15 @@ meaning that you must load the Bootstrap stylesheet on the page to view the form
 ## Supported themes
 
 | Theme Name            | Status    | Package Name / Link |
-| --------------------- | --------- | ------------------- |
+|-----------------------| --------- |---------------------|
+| antd                  | Published | `@rjsf/antd`        |
 | Bootstrap 3 (default) | Published | `@rjsf/core`        |
 | Bootstrap 4           | Published | `@rjsf/bootstrap-4` |
-| material-ui 4 & 5     | Published | `@rjsf/material-ui` |
+| Chakra UI             | Published | `@rjsf/chakra-ui`   |
 | fluent-ui             | Published | `@rjsf/fluent-ui`   |
-| antd                  | Published | `@rjsf/antd`        |
+| material-ui 4 & 5     | Published | `@rjsf/material-ui` |
+| PrimeReact            | Published | `@rjsf/primereact`  |
 | Semantic UI           | Published | `@rjsf/semantic-ui` |
-| Chakra UI             | Published | `@rjsf/chakra-ui`   |
 
 ## Using themes
 

packages/playground/package.json

@@ -48,6 +48,7 @@
     "@rjsf/core": "^4.0.0",
     "@rjsf/fluent-ui": "^4.0.0",
     "@rjsf/material-ui": "^4.0.0",
+    "@rjsf/primereact": "https://gitpkg.now.sh/dchenk/react-jsonschema-form/packages/primereact?8a7eb51f2f92d691dd2901476c54dd88245fb9d3",
     "@rjsf/semantic-ui": "^4.0.0",
     "ajv": "^6.7.0",
     "antd": "^4.3.5",
@@ -59,6 +60,9 @@
     "less": "^3.11.3",
     "less-loader": "^5.0.0",
     "lodash": "^4.17.21",
+    "primeflex": "^3.1.3",
+    "primeicons": "^5.0.0",
+    "primereact": "^7.2.0",
     "prop-types": "^15.7.2",
     "react-app-polyfill": "^1.0.4",
     "react-bootstrap": "^1.0.1",

packages/playground/src/app.js

@@ -422,14 +422,15 @@ class Playground extends Component {
 
   onThemeSelected = (
     theme,
-    { subthemes, stylesheet, theme: themeObj } = {}
+    { subthemes, stylesheet, stylesheets, theme: themeObj } = {}
   ) => {
     this.setState({
       theme,
       subthemes,
       subtheme: null,
       FormComponent: withTheme(themeObj),
       stylesheet,
+      stylesheets,
     });
   };
 
@@ -503,6 +504,14 @@ class Playground extends Component {
       templateProps.extraErrors = extraErrors;
     }
 
+    const stylesheets = [];
+    if (this.state.stylesheet) {
+      stylesheets.push(this.state.stylesheet);
+    }
+    if (this.state.stylesheets?.length) {
+      stylesheets.push(...this.state.stylesheets);
+    }
+
     return (
       <div className="container-fluid">
         <div className="page-header">
@@ -576,11 +585,9 @@ class Playground extends Component {
             <DemoFrame
               head={
                 <React.Fragment>
-                  <link
-                    rel="stylesheet"
-                    id="theme"
-                    href={this.state.stylesheet || ""}
-                  />
+                  {stylesheets.map(url => (
+                    <link key={url} rel="stylesheet" id="theme" href={url} />
+                  ))}
                   {theme === "antd" && (
                     <div
                       dangerouslySetInnerHTML={{

packages/playground/src/index.js

@@ -5,6 +5,7 @@ import { Theme as SuiTheme } from "@rjsf/semantic-ui";
 import { Theme as AntdTheme } from "@rjsf/antd";
 import { Theme as Bootstrap4Theme } from "@rjsf/bootstrap-4";
 import { Theme as ChakraUITheme } from "@rjsf/chakra-ui";
+import { Theme as PrimeReactTheme } from "@rjsf/primereact";
 import Playground from "./app";
 import { render } from "react-dom";
 
@@ -119,6 +120,15 @@ const themes = {
     stylesheet: "",
     theme: ChakraUITheme,
   },
+  primereact: {
+    stylesheets: [
+      "https://unpkg.com/[email protected]/primeicons.css",
+      "https://unpkg.com/[email protected]/resources/themes/lara-light-indigo/theme.css",
+      "https://unpkg.com/[email protected]/resources/primereact.min.css",
+      "https://unpkg.com/[email protected]/primeflex.min.css",
+    ],
+    theme: PrimeReactTheme,
+  },
 };
 
 render(<Playground themes={themes} />, document.getElementById("app"));

packages/primereact/.gitignore

@@ -0,0 +1 @@
+.rts2_**

packages/primereact/README.md

@@ -0,0 +1,109 @@
+<!-- PROJECT LOGO -->
+<br />
+<p align="center">
+  <a href="https://github.com/rjsf-team/react-jsonschema-form">
+    <img src="./logo.svg" alt="Logo">
+  </a>
+
+  <h3 align="center">@rjsf/primereact</h3>
+
+  <p align="center">
+  PrimeReact theme, fields, and widgets for <a href="https://github.com/rjsf-team/react-jsonschema-form"><code>react-jsonschema-form</code></a>.
+    <br />
+    <a href="https://react-jsonschema-form.readthedocs.io/en/latest/"><strong>Explore the docs »</strong></a>
+    <br />
+    <br />
+   <a href="https://rjsf-team.github.io/react-jsonschema-form/">View Playground</a>
+    ·
+    <a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Report Bug</a>
+    ·
+    <a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Request Feature</a>
+  </p>
+</p>
+
+<!-- TABLE OF CONTENTS -->
+
+## Table of Contents
+
+- [About The Project](#about-the-project)
+- [Getting Started](#getting-started)
+  - [Prerequisites](#prerequisites)
+  - [Installation](#installation)
+- [Usage](#usage)
+- [Contributing](#contributing)
+- [Contact](#contact)
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+
+Exports `primereact` theme, fields and widgets for `react-jsonschema-form`.
+
+### Built With
+
+- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)
+- [PrimeReact](https://www.primefaces.org/primereact/)
+- [Typescript](https://www.typescriptlang.org/)
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+### Prerequisites
+
+- `primereact >= 7.2.0`
+- `@rjsf/core >= 4.0.0`
+
+```bash
+yarn add primereact @rjsf/core
+```
+
+### Installation
+
+```bash
+yarn add @rjsf/primereact
+```
+
+## Usage
+
+```js
+import Form from '@rjsf/primereact';
+```
+
+or
+
+```js
+import { withTheme } from '@rjsf/core';
+import { Theme as PrimeReactTheme } from '@rjsf/primereact';
+
+const Form = withTheme(PrimeReactTheme);
+```
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Read our [contributors' guide](https://react-jsonschema-form.readthedocs.io/en/latest/contributing/) to get started.
+
+<!-- CONTACT -->
+
+## 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)
+
+<!-- MARKDOWN LINKS & IMAGES -->
+<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links -->
+
+[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