Add support for PrimeReact

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?2ade66860050bf49cfa51680a35802ce6afb63b9",
  "@rjsf/semantic-ui": "^4.0.0",
  "ajv": "^6.7.0",
  "antd": "^4.3.5",
@@ -59,11 +60,15 @@
  "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",
  "react-frame-component": "^4.1.1",
- "react-is": "^16.9.0"
+ "react-is": "^16.9.0",
+ "react-transition-group": "^4.4.2"
  },
  "devDependencies": {
  "@babel/cli": "^7.16.0",

packages/playground/src/DemoFrame.js

@@ -102,6 +102,30 @@ function DemoFrame(props) {
  {__createChakraFrameProvider(props)}
  </FrameContextConsumer>
  );
+ } else if (theme === "primereact") {
+ body = (
+ <>
+ <style
+ // See https://www.primefaces.org/primereact/theming/
+ // The theme CSS itself doesn't apply any global styling.
+ dangerouslySetInnerHTML={{
+ __html: `
+ html {
+ font-size: 16px;
+ }
+ body {
+ margin: 0px;
+ font-family: var(--font-family);
+ color: var(--text-color);
+ }
+ * {
+ border-color: #ced4da;
+ }`,
+ }}
+ />
+ {children}
+ </>
+ );
  }
  return (
  <Frame ref={handleRef} contentDidMount={onContentDidMount} {...other}>

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,
  });
  };
 
@@ -484,6 +485,8 @@ class Playground extends Component {
  validate,
  theme,
  subtheme,
+ stylesheet,
+ stylesheets,
  FormComponent,
  ArrayFieldTemplate,
  ObjectFieldTemplate,
@@ -503,6 +506,14 @@ class Playground extends Component {
  templateProps.extraErrors = extraErrors;
  }
 
+ const stylesheetUrls = [];
+ if (stylesheet) {
+ stylesheetUrls.push(stylesheet);
+ }
+ if (stylesheets?.length) {
+ stylesheetUrls.push(...stylesheets);
+ }
+
  return (
  <div className="container-fluid">
  <div className="page-header">
@@ -576,11 +587,9 @@ class Playground extends Component {
  <DemoFrame
  head={
  <React.Fragment>
- <link
- rel="stylesheet"
- id="theme"
- href={this.state.stylesheet || ""}
- />
+ {stylesheetUrls.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