Added theme for Fluent UI 9 (#3913)

* Initial for fluentui-rc

* More fluent-ui templates and widgets integrated

* More work on fluentui RC integration

* Readme + tests for fluentui-rc

* Updated documentation

* Removed from playground for now

* package.json fix

* Updated changelog

* Updatet screenshot

* Updated changelog

* Updated package version

* eslint fix

* package-lock update

* Process feedback

* Fixed another label

* Updated snapshots

CHANGELOG.md

@@ -15,6 +15,12 @@ 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.
 
 -->
+# 5.14.0
+
+## @rjsf/fluentui-rc
+
+- Added theme for Fluent UI v9 (React Components), fixing [#3659](https://github.com/rjsf-team/react-jsonschema-form/issues/3659)
+
 # 5.13.6
 
 ## @rjsf/core

README.md

@@ -32,6 +32,7 @@
 - [Bootstrap 4](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/bootstrap-4)
 - [Chakra UI](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/chakra-ui)
 - [Fluent UI](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/fluent-ui)
+- [Fluent UI 9](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/fluentui-rc)
 - [Material UI 4](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/material-ui)
 - [Material UI 5](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/mui)
 - [Semantic UI](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/semantic-ui)

package.json

@@ -66,6 +66,7 @@
     "packages/core",
     "packages/docs",
     "packages/fluent-ui",
+    "packages/fluentui-rc",
     "packages/material-ui",
     "packages/mui",
     "packages/playground",

packages/docs/docs/usage/themes.md

@@ -12,6 +12,7 @@ meaning that you must load the Bootstrap stylesheet on the page to view the form
 | Bootstrap 4           | Published | `@rjsf/bootstrap-4` |
 | Chakra UI             | Published | `@rjsf/chakra-ui`   |
 | fluent-ui             | Published | `@rjsf/fluent-ui`   |
+| fluentui-rc           | Published | `@rjsf/fluentui-rc` |
 | material-ui 4         | Published | `@rjsf/material-ui` |
 | material-ui 5         | Published | `@rjsf/mui`         |
 | Semantic UI           | Published | `@rjsf/semantic-ui` |

packages/fluentui-rc/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "extends": ["../../.eslintrc"],
+  "plugins": ["@typescript-eslint", "jsx-a11y", "react", "import"]
+}

packages/fluentui-rc/.npmignore

@@ -0,0 +1 @@
+src/

packages/fluentui-rc/README.md

@@ -0,0 +1,127 @@
+[![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]
+
+<br />
+<p align="center">
+  <a href="https://github.com/rjsf-team/react-jsonschema-form">
+    <img src="./logo.png" alt="Logo" width="120" height="120">
+  </a>
+
+  <h3 align="center">@rjsf/fluentui-rc</h3>
+
+  <p align="center">
+    Fluent UI React Components (v9) 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://rjsf-team.github.io/react-jsonschema-form/docs/"><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
+
+- [Table of Contents](#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 -->
+
+## About The Project
+
+Fluent UI React Components (v9) theme, fields and widgets for `react-jsonschema-form`.
+
+### Built With
+
+- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)
+- [Fluent UI React Components (v9)](https://react.fluentui.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+### Prerequisites
+
+- `@fluentui/react-components >= 9.35.0`
+- `@rjsf/core >= 2.0.0`
+
+```bash
+yarn add @fluentui/react-components @rjsf/core @rjsf/utils @rjsf/validator-ajv6
+```
+
+### Installation
+
+```bash
+yarn add @rjsf/fluentui-rc
+```
+
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+```js
+import Form from '@rjsf/fluentui-rc';
+```
+
+or
+
+```js
+import { withTheme } from '@rjsf/core';
+import { Theme as FluentUIRCTheme } from '@rjsf/fluentui-rc';
+
+// Make modifications to the theme with your own fields and widgets
+
+const Form = withTheme(FluentUIRCTheme);
+```
+
+<!-- ROADMAP -->
+
+## Roadmap
+
+See the [open issues](https://github.com/rjsf-team/react-jsonschema-form/issues) for a list of proposed features (and known issues).
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+Read our [contributors' guide](https://rjsf-team.github.io/react-jsonschema-form/docs/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/fluent-ui/latest.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/@rjsf/fluent-ui
+[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/fluent-ui.svg?style=flat-square
+[npm-dl-url]: https://www.npmjs.com/package/@rjsf/fluent-ui
+[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/fluent-ui/screenshot.png

packages/fluentui-rc/babel.config.js

@@ -0,0 +1,3 @@
+const defaultConfig = require('../../babel.config');
+
+module.exports = defaultConfig;

packages/fluentui-rc/jest.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  snapshotSerializers: ['@emotion/jest/serializer'],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    browsers: ['chrome', 'firefox', 'safari'],
+  },
+  transformIgnorePatterns: [`/node_modules/(?!nanoid)`],
+};