PrimeReact support v6 #4497
PrimeReact support v6 #4497
Conversation
Add `PrimeReact Customization` to docs List `@rjsf/primereact` as them in the docs
|
Great work! This will be really useful for us! |
|
@jasny I've merged a few PRs with updates and fixes from |
| "typings": "lib/index.d.ts", | ||
| "scripts": { |
There was a problem hiding this comment.
@jasny I improved ESM support in the other themes in 5.24.7. Can you add these:
| "typings": "lib/index.d.ts", | |
| "scripts": { | |
| "typings": "lib/index.d.ts", | |
| "exports": { | |
| ".": { | |
| "require": "./dist/index.js", | |
| "import": "./lib/index.js", | |
| "types": "./lib/index.d.ts" | |
| }, | |
| "./lib": { | |
| "require": "./dist/index.js", | |
| "import": "./lib/index.js", | |
| "types": "./lib/index.d.ts" | |
| }, | |
| "./lib/*.js": { | |
| "require": "./dist/*.js", | |
| "import": "./lib/*.js", | |
| "types": "./lib/*.d.ts" | |
| }, | |
| "./dist": { | |
| "require": "./dist/index.js", | |
| "import": "./lib/index.js", | |
| "types": "./lib/index.d.ts" | |
| }, | |
| "./dist/*.js": { | |
| "require": "./dist/*.js", | |
| "import": "./lib/*.js", | |
| "types": "./lib/*.d.ts" | |
| } | |
| }, | |
| "scripts": { |
| "module": "lib/index.js", | ||
| "typings": "lib/index.d.ts", | ||
| "scripts": { | ||
| "build:ts": "tsc -b", |
There was a problem hiding this comment.
To improve ESM support you need to change this to:
| "build:ts": "tsc -b", | |
| "build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json", |
And add a tsconfig.build.json that looks like:
{
"extends": "../../tsconfig.build.json",
"compilerOptions": {
"outDir": "./lib"
},
"files": [],
"references": [
{
"path": "./src"
}
],
"tsc-alias": {
"resolveFullPaths": true,
"verbose": true,
}
}
| }} | ||
| > | ||
| <AddButton | ||
| className='array-item-add' |
There was a problem hiding this comment.
Can you add id={buttonId<T>(idSchema, 'add')} to match the changes made in other themes in v6
| {canExpand<T, S, F>(schema, uiSchema, formData) && ( | ||
| <div style={{ marginTop: '1rem', textAlign: 'right' }}> | ||
| <AddButton | ||
| icon='pi pi-plus' |
There was a problem hiding this comment.
Can you add id={buttonId<T>(idSchema, 'add')} to match the changes made in other themes in v6
| </div> | ||
| <div style={{ flex: 1 }}>{children}</div> | ||
| <div> | ||
| <RemoveButton disabled={disabled || readonly} onClick={onDropPropertyClick(label)} registry={registry} /> |
There was a problem hiding this comment.
Can you add id={buttonId<T>(idSchema, 'remove')} to match the changes made in other themes in v6
Reasons for making this change
Added PrimeReact theme. PrimeReact is a popular component library for React.
Fixes #2928
PrimeReact is at version 10. A lot has changed since 2022 both v4 to v6 of rjsf and v7 to v10 of primereact. The theme was created from scratch instead of modifying the existing PR. Closes #2723
Checklist
npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:updateto update snapshots, if needed.