Skip to content

Commit 3c07647

Browse files
Made @rjsf/material-ui only be for Material UI 4 (#2949)
- Deleted the `MuiComponentContext`, `MuiForm5`, `Theme5` and `ThemeCommon` directories (moving the contents of `ThemeCommon/index.js` directly into `Theme`) - Deleted the `MaterialUIContext` and `MaterialUIContextProps` files and everything in `Theme.tsx` that related to them - Replaced all fetching of the Material UI components from the `useMuiComponent()` hook with actual imports from `@material-ui/core` and `@material-ui/icons` - Deleted the `tests/mui-5` directory and fixed up the tests to work with the simple `Form` - Regenerated the `package-lock.json` file with node-16 - Added the `cs-check`, `cs-format` and `lint` scripts along with `lint-staged` to the `package.json` file - Copied the `.eslintrc` file from `core` - This involved adding `@typescript-eslint`, `eslint` and `eslint-plugin-*` - Ran `eslint --fix` and `cs-format` over the `src` and `test` directories to fix the build
1 parent 387b555 commit 3c07647

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+150929
-15249
lines changed

packages/material-ui/.eslintrc

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
{
2+
"parser": "@typescript-eslint/parser",
3+
"rules": {
4+
"react/jsx-uses-react": 2,
5+
"react/jsx-uses-vars": 2,
6+
"react/react-in-jsx-scope": 2,
7+
"react/jsx-tag-spacing": [1, {
8+
"beforeSelfClosing": "always"
9+
}],
10+
"curly": [2],
11+
"linebreak-style": [2, "unix"],
12+
"semi": [2, "always"],
13+
"comma-dangle": [0],
14+
"no-unused-vars": [2, {
15+
"vars": "all",
16+
"args": "none",
17+
"ignoreRestSiblings": true
18+
}],
19+
"no-console": [0],
20+
"object-curly-spacing": [2, "always"],
21+
"keyword-spacing": ["error"],
22+
"no-prototype-builtins": "warn",
23+
"@typescript-eslint/no-empty-function": "warn",
24+
"@typescript-eslint/no-var-requires": "warn"
25+
},
26+
"env": {
27+
"es6": true,
28+
"browser": true,
29+
"node": true
30+
},
31+
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
32+
"plugins": [
33+
"@typescript-eslint",
34+
"jsx-a11y",
35+
"react",
36+
"import"
37+
]
38+
}

packages/material-ui/README.md

Lines changed: 9 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<h3 align="center">@rjsf/material-ui</h3>
1515

1616
<p align="center">
17-
Material UI 4 and 5 themes, fields and widgets for <a href="https://github.com/rjsf-team/react-jsonschema-form/"><code>react-jsonschema-form</code></a>.
17+
Material UI 4 theme, fields and widgets for <a href="https://github.com/rjsf-team/react-jsonschema-form/"><code>react-jsonschema-form</code></a>.
1818
<br />
1919
<a href="https://react-jsonschema-form.readthedocs.io/en/latest/"><strong>Explore the docs »</strong></a>
2020
<br />
@@ -46,13 +46,12 @@
4646

4747
[![@rjsf/material-ui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/material-ui)
4848

49-
Exports `material-ui` version 4 and 5 themes, fields and widgets for `react-jsonschema-form`.
49+
Exports `material-ui` version 4 theme, fields and widgets for `react-jsonschema-form`.
5050

5151
### Built With
5252

5353
- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)
5454
- [Material UI](https://material-ui.com/)
55-
- [Mui](https://mui.com/)
5655
- [TypeScript](https://www.typescriptlang.org/)
5756

5857
<!-- GETTING STARTED -->
@@ -61,28 +60,14 @@ Exports `material-ui` version 4 and 5 themes, fields and widgets for `react-json
6160

6261
### Prerequisites
6362

64-
#### Material UI version 4
65-
6663
- `@material-ui/core >= 4.12.0` (in 4.12.0, the library developers made it forward compatible with Material-UI V5)
6764
- `@material-ui/icons >= 4.11.0` (in 4.11.0, the library developers made it forward compatible with Material-UI V5)
68-
- `@rjsf/core >= 4.0.0`
69-
70-
```bash
71-
yarn add @material-ui/core @material-ui/icons @rjsf/core
72-
```
73-
74-
#### Material UI version 5
75-
76-
NOTE: Material UI 5 requires React 17, so you will need to upgrade
77-
78-
- `@mui/material`
79-
- `@mui/icons-material`
80-
- `@emotion/react`
81-
- `@emotion/styled`
82-
- `@rjsf/core >= 4.0.0`
65+
- `@rjsf/core >= 5.0.0`
66+
- `@rjsf/utils >= 5.0.0`
67+
- `@rjsf/validator-ajv6 >= 5.0.0`
8368

8469
```bash
85-
yarn add @mui/material @mui/icons-material @emotion/react @emotion/styled @rjsf/core
70+
yarn add @material-ui/core @material-ui/icons @rjsf/core @rjsf/utils @rjsf/validator-ajv6
8671
```
8772

8873
### Installation
@@ -95,106 +80,21 @@ yarn add @rjsf/material-ui
9580

9681
## Usage
9782

98-
### Material UI version 4
99-
100-
```js
101-
import Form from '@rjsf/material-ui/v4';
102-
```
103-
104-
or
105-
106-
```js
107-
import { withTheme } from '@rjsf/core';
108-
import Theme from '@rjsf/material-ui/v4';
109-
110-
// Make modifications to the theme with your own fields and widgets
111-
112-
const Form = withTheme(Theme);
113-
```
114-
115-
### Typescript configuration adjustments
116-
117-
If you are using Typescript you may have to update your `tsconfig.json` file in to avoid problems with import aliasing.
118-
119-
If you are experiencing an error that is similar to `TS2307: Cannot find module '@rjsf/material-ui/v4' or its corresponding type declarations.` you can add the following:
120-
121-
```
122-
{
123-
...
124-
"compilerOptions": {
125-
...
126-
"baseUrl": ".",
127-
"paths": {
128-
"@rjsf/material-ui/*": ["node_modules/@rjsf/material-ui/dist/*"]
129-
}
130-
}
131-
}
132-
```
133-
134-
### Jest configuration adjustments
135-
136-
If you are using Jest you may have to update your `jest.config.json` file in to avoid problems with import aliasing.
137-
138-
If you are experiencing an error that is similar to `Cannot find module '@rjsf/material-ui/v4' from '<file path>'` you can add the following:
139-
140-
```
141-
{
142-
"moduleNameMapper": {
143-
"@rjsf/material-ui/v4": "<rootDir>/node_modules/@rjsf/material-ui/dist/v4.js"
144-
},
145-
}
146-
```
147-
148-
### Material UI version 5
149-
15083
```js
151-
import Form from '@rjsf/material-ui/v5';
84+
import Form from '@rjsf/material-ui';
15285
```
15386

15487
or
15588

15689
```js
15790
import { withTheme } from '@rjsf/core';
158-
import Theme from '@rjsf/material-ui/v5';
91+
import Theme from '@rjsf/material-ui';
15992

16093
// Make modifications to the theme with your own fields and widgets
16194

16295
const Form = withTheme(Theme);
16396
```
16497

165-
### Typescript configuration adjustments
166-
167-
If you are using Typescript you may have to update your `tsconfig.json` file in to avoid problems with import aliasing.
168-
169-
If you are experiencing an error that is similar to `TS2307: Cannot find module '@rjsf/material-ui/v5' or its corresponding type declarations.` you can add the following:
170-
171-
```
172-
{
173-
...
174-
"compilerOptions": {
175-
...
176-
"baseUrl": ".",
177-
"paths": {
178-
"@rjsf/material-ui/*": ["node_modules/@rjsf/material-ui/dist/*"]
179-
}
180-
}
181-
}
182-
```
183-
184-
### Jest configuration adjustments
185-
186-
If you are using Jest you may have to update your `jest.config.json` file in to avoid problems with import aliasing.
187-
188-
If you are experiencing an error that is similar to `Cannot find module '@rjsf/material-ui/v5' from '<file path>'` you can add the following:
189-
190-
```
191-
{
192-
"moduleNameMapper": {
193-
"@rjsf/material-ui/v5": "<rootDir>/node_modules/@rjsf/material-ui/dist/v5.js"
194-
},
195-
}
196-
```
197-
19898
<!-- ROADMAP -->
19999

200100
## Roadmap
@@ -228,4 +128,4 @@ GitHub repository: [https://github.com/rjsf-team/react-jsonschema-form](https://
228128
[npm-url]: https://www.npmjs.com/package/@rjsf/material-ui
229129
[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/material-ui.svg?style=flat-square
230130
[npm-dl-url]: https://www.npmjs.com/package/@rjsf/material-ui
231-
[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/e2e1181d1020f18cad0c80c661ddae28edb9794e/packages/material-ui/screenshot5.png
131+
[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/e2e1181d1020f18cad0c80c661ddae28edb9794e/packages/material-ui/screenshot.png

0 commit comments

Comments
 (0)