rjsf-team · pkalisiewicz · Apr 24, 2023 · Apr 24, 2023 · Apr 26, 2023 · May 12, 2023
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -30,6 +30,7 @@ body:
         - material-ui
         - mui
         - semantic-ui
+        - mantine-ui
         - utils
         - validator-ajv6
         - validator-ajv8

diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -24,6 +24,7 @@ body:
         - material-ui
         - mui
         - semantic-ui
+        - mantine-ui
         - utils
         - validator-ajv6
         - validator-ajv8

diff --git a/.github/ISSUE_TEMPLATE/question_issue.yml b/.github/ISSUE_TEMPLATE/question_issue.yml
@@ -24,6 +24,7 @@ body:
         - material-ui
         - mui
         - semantic-ui
+        - mantine-ui
         - utils
         - validator-ajv6
         - validator-ajv8

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,9 @@ should change the heading of the (upcoming) version to include a major version b
 
 -->
 
+# 5.9.0
+- Add mantine ui
+
 # 5.8.1
 
 ## Dev / docs / playground

diff --git a/README.md b/README.md
@@ -35,6 +35,8 @@
 - [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)
+- [Mantine UI](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/mantine-ui)
+
 
 ## Documentation
 

diff --git a/packages/antd/package-lock.json b/packages/antd/package-lock.json
diff --git a/packages/bootstrap-4/package-lock.json b/packages/bootstrap-4/package-lock.json
diff --git a/packages/chakra-ui/package-lock.json b/packages/chakra-ui/package-lock.json
diff --git a/packages/core/package-lock.json b/packages/core/package-lock.json
diff --git a/packages/docs/docs/advanced-customization/custom-templates.md b/packages/docs/docs/advanced-customization/custom-templates.md
@@ -369,11 +369,12 @@ import { BaseInputTemplateProps } from '@rjsf/utils';
 import { getDefaultRegistry } from '@rjsf/core';
 import { Templates } from '@rjsf/mui';
 
-const { templates: { BaseInputTemplate } } = getDefaultRegistry();  // To get templates from core
+const {
+  templates: { BaseInputTemplate },
+} = getDefaultRegistry(); // To get templates from core
 // const { BaseInputTemplate } = Templates; // To get templates from a theme do this
 
-function MyBaseInputTemplate(props: BaseInputTemplateProps)
-{
+function MyBaseInputTemplate(props: BaseInputTemplateProps) {
   const customProps = {};
   // get your custom props from where you need to
   return <BaseInputTemplate {...props} {...customProps} />;

diff --git a/packages/docs/docs/usage/themes.md b/packages/docs/docs/usage/themes.md
@@ -5,16 +5,17 @@ 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` |
-| Chakra UI             | Published | `@rjsf/chakra-ui`   |
-| fluent-ui             | Published | `@rjsf/fluent-ui`   |
-| material-ui 4         | Published | `@rjsf/material-ui` |
-| material-ui 5         | Published | `@rjsf/mui`         |
-| Semantic UI           | Published | `@rjsf/semantic-ui` |
+| Theme Name            | Status        | Package Name / Link |
+| --------------------- | ------------- | ------------------- |
+| antd                  | Published     | `@rjsf/antd`        |
+| Bootstrap 3 (default) | Published     | `@rjsf/core`        |
+| Bootstrap 4           | Published     | `@rjsf/bootstrap-4` |
+| Chakra UI             | Published     | `@rjsf/chakra-ui`   |
+| fluent-ui             | Published     | `@rjsf/fluent-ui`   |
+| material-ui 4         | Published     | `@rjsf/material-ui` |
+| material-ui 5         | Published     | `@rjsf/mui`         |
+| Semantic UI           | Published     | `@rjsf/semantic-ui` |
+| Mantine UI            | Not Published | `@rjsf/mantine-ui`  |
 
 ## Using themes
 

diff --git a/packages/fluent-ui/package-lock.json b/packages/fluent-ui/package-lock.json
diff --git a/packages/mantine-ui/.eslintrc b/packages/mantine-ui/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "extends": ["../../.eslintrc-typescript"],
+  "plugins": ["@typescript-eslint", "jsx-a11y", "react", "import", "@emotion"],
+  "rules": { "@emotion/jsx-import": "error" }
+}
diff --git a/packages/mantine-ui/README.md b/packages/mantine-ui/README.md
@@ -0,0 +1,163 @@
+[![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]
+
+<!-- PROJECT LOGO -->
+<br />
+<p align="center">
+  <a href="https://github.com/rjsf-team/react-jsonschema-form">
+    <img src="./logo.png" alt="Logo" width="340">
+  </a>
+
+  <h3 align="center">@rjsf/mantine-ui</h3>
+
+  <p align="center">
+  Mantine UI 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)
+- [Optional Mantine UI Theme properties](#optional-mantine-ui-theme-properties)
+  - [Custom Mantine uiSchema Mantine Property](#custom-mantine-uischema-mantine-property)
+- [Roadmap](#roadmap)
+- [Contributing](#contributing)
+- [Contact](#contact)
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+[![@rjsf/mantine-ui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/mantine-ui)
+
+Exports `mantine-ui` theme, fields and widgets for `react-jsonschema-form`.
+
+### Built With
+
+- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)
+- [Mantine UI](https://mantine.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+### Prerequisites
+
+
+- `@mantine/core >=5.7.1`
+- `@mantine/hooks >=5.7.1`
+- `react >= 17.0.0`
+- `tabler-icons-react >=1.56.0`
+
+
+Refer to the [rjsf installation guide](https://rjsf-team.github.io/react-jsonschema-form/docs/#installation) and [mantine-ui installation guide](https://mantine.dev/pages/getting-started/) and for more details.
+
+---
+
+### Installation
+
+```bash
+yarn add @mantine/core@^5.7.1 @mantine/hooks@^5.7.1 tabler-icons-react@^1.56.0
+```
+
+```bash
+yarn add @rjsf/mantine-ui @rjsf/core
+```
+
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+```js
+import Form from '@rjsf/mantine-ui';
+```
+
+or
+
+```js
+import { withTheme } from '@rjsf/core';
+import { Theme as MantineUITheme } from '@rjsf/mantine-ui';
+
+// Make modifications to the theme with your own fields and widgets
+
+const Form = withTheme(MantineUITheme);
+```
+
+## Optional Mantine UI Theme properties
+
+- To pass additional properties to widgets, see this [guide](https://rjsf-team.github.io/react-jsonschema-form/docs/usage/objects#additional-properties).
+
+You can use `MantineProvider`, to customize the components at a theme level.\
+And, `uiSchema` allows for the use of a `"mantine"` `"ui:option"` to customize the styling of the form widgets.
+
+#### Custom Mantine uiSchema Mantine Property
+
+```json
+{
+  "ui:options": {
+    "mantine": {
+      "sx": {
+        "margin": "0 auto"
+      }
+    }
+  }
+}
+```
+
+It accepts the theme accessible [style props](https://mantine-ui.com/docs/features/style-props) provided by [Mantine](https://mantine-ui.com/docs/getting-started) and [Emotion](https://emotion.sh/docs/introduction).
+
+<!-- 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/mantine-ui/latest.svg?style=flat-square
+[npm-url]: https://www.npmjs.com/package/@rjsf/mantine-ui
+[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/mantine-ui.svg?style=flat-square
+[npm-dl-url]: https://www.npmjs.com/package/@rjsf/mantine-ui
+[product-screenshot]: ./screenshot.png
diff --git a/packages/mantine-ui/jest.config.js b/packages/mantine-ui/jest.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  moduleNameMapper: {
+    '^react$': '<rootDir>/node_modules/react',
+    '^react-dom$': '<rootDir>/node_modules/react-dom',
+  },
+  snapshotSerializers: ['@emotion/jest/serializer'],
+  testEnvironment: 'jsdom',
+  testEnvironmentOptions: {
+    browsers: ['chrome', 'firefox', 'safari'],
+  },
+};
diff --git a/packages/mantine-ui/logo.png b/packages/mantine-ui/logo.png