Skip to content

Commit a90854c

Browse files
jasnyheath-freenome
jasny
and
heath-freenome
authored
PrimeReact support v6 (#4497)
* PrimeReact support WIP * Primereact for v6 * Use `prime` in `ui:option` to set PrimeReact specific options. Add `PrimeReact Customization` to docs List `@rjsf/primereact` as them in the docs * Primereact snapshot from test * Apply suggestions from code review Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> * Implemented grid template for primereact * Apply suggestions from code review Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> * npm run cs-format * PrimeReact theme: Remove unused util functions Default form test Add grid test * Fix tests for primereact. Mock inject stylesheet. Mock dropdown, multiselect and slider. They don't work with jsdom. Update snapshots. * Apply suggestions from code review Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> * Add JSDoc for primereact. Set `id` property in `ArrayFieldTitleTemplate` * Update package.json for primereact * Apply suggestions from code review Use RickDescription Update versions in package.json Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> * Add jsdoc for primereact PasswordWidget * Update primereact test snapshots. * Apply suggestions from code review Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com> * Primereact: lint + minor fix * Update themes.md * Apply suggestions from code review * Update packages/primereact/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx --------- Co-authored-by: Heath C <51679588+heath-freenome@users.noreply.github.com>
1 parent c035675 commit a90854c

File tree

91 files changed

+23575
-2
lines changed

Some content is hidden

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

91 files changed

+23575
-2
lines changed

‎package-lock.json‎

Lines changed: 70 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@
9595
"packages/fluentui-rc",
9696
"packages/mui",
9797
"packages/playground",
98+
"packages/primereact",
9899
"packages/react-bootstrap",
99100
"packages/semantic-ui",
100101
"packages/utils",

‎packages/docs/docs/api-reference/themes/primereact/uiSchema.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# PrimeReact Customization
2+
3+
You may set PrimeReact-specific options in the `uiSchema` object using the `"prime"` `"ui:option"`.
4+
5+
```json
6+
{
7+
"password": {
8+
"ui:options": {
9+
"prime": {
10+
"feedback": true,
11+
"weakLabel": "Too weak",
12+
"mediumLabel": "Could be stronger",
13+
"strongLabel": "Strong password",
14+
"toggleMask": true
15+
}
16+
}
17+
}
18+
}
19+
```
20+
21+
## Components
22+
23+
The `@rjsf/primereact` theme renders to the following PrimeReact components:
24+
25+
- [`InputText`](https://primereact.org/inputtext/) as the default widget
26+
- [`AutoComplete`](https://primereact.org/autocomplete/) as the default with `examples`
27+
- [`Checkbox`](https://primereact.org/checkbox/) for boolean fields and `checkboxes` widget
28+
- [`ColorPicker`](https://primereact.org/colorpicker/) as `color` widget
29+
- [`Password`](https://primereact.org/password/) as `password` widget
30+
- [`RadioButton`](https://primereact.org/radiobutton/) as `radio` widget
31+
- [`Slider`](https://primereact.org/slider/) as `range` widget
32+
- [`Dropdown`](https://primereact.org/dropdown/) as `select` widget
33+
- [`MultiSelect`](https://primereact.org/multiselect/) as `select` widget with `multiple` option
34+
- [`InputTextarea`](https://primereact.org/inputtextarea/) as `textarea` widget
35+
- [`InputNumber`](https://primereact.org/inputnumber/) as `updown` widget
36+
37+
Please refer to the [PrimeReact documentation](https://primereact.org/) for the available PrimeReact-specific options
38+
of each component.

‎packages/docs/docs/usage/themes.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,12 @@ meaning that you must load the Bootstrap stylesheet on the page to view the form
88
| Theme Name | Status | Package Name / Link |
99
| --------------------- | --------- | ----------------------- |
1010
| antd | Published | `@rjsf/antd` |
11-
| Bootstrap 3 (default) | Published | `@rjsf/core` |
12-
| react-bootstrap | Published | `@rjsf/react-bootstrap` |
1311
| Chakra UI | Published | `@rjsf/chakra-ui` |
12+
| Bootstrap 3 (default) | Published | `@rjsf/core` |
1413
| fluentui-rc | Published | `@rjsf/fluentui-rc` |
1514
| material-ui | Published | `@rjsf/mui` |
15+
| PrimeReact | - | `@rjsf/primereact` |
16+
| react-bootstrap | Published | `@rjsf/react-bootstrap` |
1617
| Semantic UI | Published | `@rjsf/semantic-ui` |
1718
| shadcn | Published | `@rjsf/shadcn` |
1819

‎packages/playground/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"@rjsf/core": "^6.0.0-beta.10",
4545
"@rjsf/fluentui-rc": "^6.0.0-beta.10",
4646
"@rjsf/mui": "^6.0.0-beta.10",
47+
"@rjsf/primereact": "^6.0.0-beta.10",
4748
"@rjsf/react-bootstrap": "^6.0.0-beta.10",
4849
"@rjsf/semantic-ui": "^6.0.0-beta.10",
4950
"@rjsf/utils": "^6.0.0-beta.10",

‎packages/playground/src/app.tsx‎

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { Theme as BootstrapTheme } from '@rjsf/react-bootstrap';
66
import { Theme as ChakraUITheme } from '@rjsf/chakra-ui';
77
import { Theme as shadcnTheme } from '@rjsf/shadcn';
88
import { Theme as DaisyUITheme } from '@rjsf/daisyui';
9+
import { Theme as PrimeReactTheme } from '@rjsf/primereact';
910
import v8Validator, { customizeValidator } from '@rjsf/validator-ajv8';
1011
import Ajv2019 from 'ajv/dist/2019.js';
1112
import Ajv2020 from 'ajv/dist/2020.js';
@@ -151,6 +152,168 @@ const themes: PlaygroundProps['themes'] = {
151152
stylesheet: '//cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css',
152153
theme: BootstrapTheme,
153154
},
155+
primereact: {
156+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-cyan/theme.css',
157+
theme: PrimeReactTheme,
158+
subthemes: {
159+
'arya-blue': {
160+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/arya-blue/theme.css',
161+
},
162+
'arya-green': {
163+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/arya-green/theme.css',
164+
},
165+
'arya-orange': {
166+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/arya-orange/theme.css',
167+
},
168+
'arya-purple': {
169+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/arya-purple/theme.css',
170+
},
171+
'bootstrap4-dark-blue': {
172+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/bootstrap4-dark-blue/theme.css',
173+
},
174+
'bootstrap4-dark-purple': {
175+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/bootstrap4-dark-purple/theme.css',
176+
},
177+
'bootstrap4-light-blue': {
178+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/bootstrap4-light-blue/theme.css',
179+
},
180+
'bootstrap4-light-purple': {
181+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/bootstrap4-light-purple/theme.css',
182+
},
183+
'fluent-light': {
184+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/fluent-light/theme.css',
185+
},
186+
'lara-dark-amber': {
187+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-amber/theme.css',
188+
},
189+
'lara-dark-blue': {
190+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-blue/theme.css',
191+
},
192+
'lara-dark-cyan': {
193+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-cyan/theme.css',
194+
},
195+
'lara-dark-green': {
196+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-green/theme.css',
197+
},
198+
'lara-dark-indigo': {
199+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-indigo/theme.css',
200+
},
201+
'lara-dark-pink': {
202+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-pink/theme.css',
203+
},
204+
'lara-dark-purple': {
205+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-purple/theme.css',
206+
},
207+
'lara-dark-teal': {
208+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-dark-teal/theme.css',
209+
},
210+
'lara-light-amber': {
211+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-amber/theme.css',
212+
},
213+
'lara-light-blue': {
214+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-blue/theme.css',
215+
},
216+
'lara-light-cyan': {
217+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-cyan/theme.css',
218+
},
219+
'lara-light-green': {
220+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-green/theme.css',
221+
},
222+
'lara-light-indigo': {
223+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-indigo/theme.css',
224+
},
225+
'lara-light-pink': {
226+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-pink/theme.css',
227+
},
228+
'lara-light-purple': {
229+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-purple/theme.css',
230+
},
231+
'lara-light-teal': {
232+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/lara-light-teal/theme.css',
233+
},
234+
'luna-amber': {
235+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/luna-amber/theme.css',
236+
},
237+
'luna-blue': {
238+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/luna-blue/theme.css',
239+
},
240+
'luna-green': {
241+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/luna-green/theme.css',
242+
},
243+
'luna-pink': {
244+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/luna-pink/theme.css',
245+
},
246+
'md-dark-deeppurple': {
247+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/md-dark-deeppurple/theme.css',
248+
},
249+
'md-dark-indigo': {
250+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/md-dark-indigo/theme.css',
251+
},
252+
'md-light-deeppurple': {
253+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/md-light-deeppurple/theme.css',
254+
},
255+
'md-light-indigo': {
256+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/md-light-indigo/theme.css',
257+
},
258+
'mdc-dark-deeppurple': {
259+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mdc-dark-deeppurple/theme.css',
260+
},
261+
'mdc-dark-indigo': {
262+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mdc-dark-indigo/theme.css',
263+
},
264+
'mdc-light-deeppurple': {
265+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mdc-light-deeppurple/theme.css',
266+
},
267+
'mdc-light-indigo': {
268+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mdc-light-indigo/theme.css',
269+
},
270+
mira: {
271+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/mira/theme.css',
272+
},
273+
nano: {
274+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/nano/theme.css',
275+
},
276+
nova: {
277+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/nova/theme.css',
278+
},
279+
'nova-accent': {
280+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/nova-accent/theme.css',
281+
},
282+
'nova-alt': {
283+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/nova-alt/theme.css',
284+
},
285+
rhea: {
286+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/rhea/theme.css',
287+
},
288+
'saga-blue': {
289+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/saga-blue/theme.css',
290+
},
291+
'saga-green': {
292+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/saga-green/theme.css',
293+
},
294+
'saga-orange': {
295+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/saga-orange/theme.css',
296+
},
297+
'saga-purple': {
298+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/saga-purple/theme.css',
299+
},
300+
'soho-dark': {
301+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/soho-dark/theme.css',
302+
},
303+
'soho-light': {
304+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/soho-light/theme.css',
305+
},
306+
'tailwind-light': {
307+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/tailwind-light/theme.css',
308+
},
309+
'viva-dark': {
310+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/viva-dark/theme.css',
311+
},
312+
'viva-light': {
313+
stylesheet: '//cdn.jsdelivr.net/npm/primereact@10.9.2/resources/themes/viva-light/theme.css',
314+
},
315+
},
316+
},
154317
'semantic-ui': {
155318
stylesheet: '//cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css',
156319
theme: SuiTheme,

‎packages/playground/src/components/DemoFrame.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { __createChakraFrameProvider } from '@rjsf/chakra-ui';
77
import { StyleProvider as AntdStyleProvider } from '@ant-design/cssinjs';
88
import { __createFluentUIRCFrameProvider } from '@rjsf/fluentui-rc';
99
import { __createDaisyUIFrameProvider } from '@rjsf/daisyui';
10+
import { PrimeReactProvider } from 'primereact/api';
1011

1112
/*
1213
Adapted from https://github.com/mui-org/material-ui/blob/master/docs/src/modules/components/DemoSandboxed.js
@@ -94,6 +95,14 @@ export default function DemoFrame(props: DemoFrameProps) {
9495
})}
9596
</FrameContextConsumer>
9697
) : null;
98+
} else if (theme === 'primereact') {
99+
body = ready ? (
100+
<>
101+
<style>{`html { font-weight: 400; font-size: 14px; color: var(--text-color); }`}</style>
102+
<link href='//cdn.jsdelivr.net/npm/primeicons@7.0.0/primeicons.min.css' rel='stylesheet' />
103+
<PrimeReactProvider value={{ styleContainer: container, appendTo: 'self' }}>{children}</PrimeReactProvider>
104+
</>
105+
) : null;
97106
}
98107

99108
return (

0 commit comments

Comments
 (0)