[WIP] Add USWDS theme

.eslintrc.json

@@ -33,6 +33,7 @@
     "comma-dangle": [
       0
     ],
+    "@typescript-eslint/no-require-imports": "off",
     "@typescript-eslint/no-unused-vars": [
       2,
       {

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -22,16 +22,16 @@ body:
     attributes:
       label: What theme are you using?
       options:
-        - core
         - antd
-        - bootstrap-4
         - chakra-ui
-        - fluent-ui
-        - material-ui
+        - core
+        - daisyui
+        - fluentui-rc
         - mui
+        - react-bootstrap
         - semantic-ui
+        - shadcn
         - utils
-        - validator-ajv6
         - validator-ajv8
         - other
     validations:

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -16,16 +16,16 @@ body:
     attributes:
       label: What theme are you using?
       options:
-        - core
         - antd
-        - bootstrap-4
         - chakra-ui
-        - fluent-ui
-        - material-ui
+        - core
+        - daisyui
+        - fluentui-rc
         - mui
+        - react-bootstrap
         - semantic-ui
+        - shadcn
         - utils
-        - validator-ajv6
         - validator-ajv8
         - other
     validations:

.github/ISSUE_TEMPLATE/question_issue.yml

@@ -16,16 +16,16 @@ body:
     attributes:
       label: What theme are you using?
       options:
-        - core
         - antd
-        - bootstrap-4
         - chakra-ui
-        - fluent-ui
-        - material-ui
+        - core
+        - daisyui
+        - fluentui-rc
         - mui
+        - react-bootstrap
         - semantic-ui
+        - shadcn
         - utils
-        - validator-ajv6
         - validator-ajv8
         - other
     validations:

.github/workflows/ci.yml

@@ -2,16 +2,16 @@ name: CI
 
 on:
   push:
-    branches: [main]
+    branches: [main, rjsf-v6]
   pull_request:
-    branches: [main]
+    branches: [main, rjsf-v6]
 
 jobs:
   build:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x]
+        node-version: [20.x, 22.x]
 
     steps:
       - uses: actions/checkout@v4
@@ -21,42 +21,37 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'npm'
           cache-dependency-path: 'package-lock.json'
-      - run: npm i -g npm@9
       - run: npm ci
       - run: npm run lint
 
       - name: Build with Netlify badge
-        if: github.ref != 'refs/heads/main' && matrix.node-version != '14.x'
         run: npm run build-serial
         env:
           VITE_SHOW_NETLIFY_BADGE: true
           NODE_OPTIONS: --max_old_space_size=4096
 
       - name: Build
-        if: github.ref == 'refs/heads/main' && matrix.node-version != '14.x'
         run: npm run build-serial
         env:
           NODE_OPTIONS: --max_old_space_size=4096
 
       # Docusaurus doesn't support Node 14. These tasks can be removed once Node 14 is EOL (May 2023)
       - name: Build with Netlify badge (no docs)
-        if: github.ref != 'refs/heads/main' && matrix.node-version == '14.x'
         run: npx nx run-many --target=build --exclude=@rjsf/docs --parallel=false
         env:
           VITE_SHOW_NETLIFY_BADGE: true
           NODE_OPTIONS: --max_old_space_size=4096
       - name: Build (no docs)
-        if: github.ref == 'refs/heads/main' && matrix.node-version == '14.x'
         run: npx nx run-many --target=build --exclude=@rjsf/docs --parallel=false
         env:
           NODE_OPTIONS: --max_old_space_size=4096
 
-      - if: matrix.node-version == '18.x'
+      - if: matrix.node-version == '22.x'
         uses: actions/upload-artifact@v4
         with:
           name: playground
           path: packages/playground/dist
-      - if: matrix.node-version == '18.x'
+      - if: matrix.node-version == '22.x'
         uses: actions/upload-artifact@v4
         with:
           name: docs

.github/workflows/codeql.yml

@@ -13,9 +13,9 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ "main" ]
+    branches: [ "main", "rjsf-v6" ]
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "rjsf-v6" ]
   schedule:
     - cron: '19 2 * * 1'
 

.github/workflows/release.yml

@@ -26,6 +26,6 @@ jobs:
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - run: git update-index --assume-unchanged .npmrc
-      - run: npx lerna publish from-package --yes
+      - run: npx nx release publish
       - if: always()
         run: rm .npmrc

.gitignore

@@ -141,6 +141,14 @@ out/
 # typescript tsbuildinfo
 *.tsbuildinfo
 lodashReplacer.js
+lodashReplacer.cjs
 muiReplacer.js
+muiReplacer.cjs
 ajvReplacer.js
+ajvReplacer.cjs
 
+# Need this due to shadcn default utils folder is lib
+!packages/shadcn/src/lib
+
+.nx/cache
+.nx/workspace-data

.node-version

@@ -1 +1 @@
-18.16.0
+22.13.1

.nvmrc

@@ -1 +1 @@
-18
+22

CHANGELOG_v6.md

@@ -0,0 +1,180 @@
+<!--
+
+INSTRUCTIONS:
+
+For each PR, add a changelog entry that describes what your PR does. Add it to the heading
+for the appropriate package it modifies and include it in this format:
+- [Description] ([Link to PR])
+
+If your PR affects multiple packages, list it multiple times under headings for each package.
+If it affects more general things such as dependency updates or non-package-specific changes,
+add it under a "Dev / docs / playground" section.
+
+You should also update the heading of the latest (upcoming) version if your PR change merits
+it according to semantic versioning. For example, if your PR adds a breaking change, then you
+should change the heading of the (upcoming) version to include a major version bump.
+
+-->
+# 6.0.0-beta.1
+
+## @rjsf/antd
+
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
+- BREAKING CHANGE: Removed support for version 4 of `antd`
+- Updated `ArrayFieldItemTemplate` to replace `Button.Group` with `Space.Compact` since `Button.Group` is deprecated in `antd` version 5
+- Upgraded to `@ant-design/icon@5`
+- fix: Ensure peer dependencies align with v6 beta versions.
+
+## @rjsf/chakra-ui
+
+- BREAKING CHANGE: upgrade from v2 to v3
+- BREAKING CHANGE: remove deprecated `@chakra-ui/icon` in favor of `lucide-react`
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
+- fix: Ensure peer dependencies align with v6 beta versions.
+
+## @rjsf/core
+
+- BREAKING CHANGE: Updated `ArrayField` to provide the `buttonsProps` to the `ArrayFieldItemTemplateType`
+- Added `ArrayFieldItemButtonsTemplate` component as a refactor of all the common buttons code from all the `ArrayFieldItemTemplate` implementations, adding a unique id using the `buttonId()` function
+- Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
+- Implemented the new `LayoutGridField`, `LayoutMultiSchemaField` and `LayoutHeaderField` fields, adding them to the `fields` list
+- BREAKING CHANGE: Removed support for the deprecated `schema.enumNames` and `uiSchema.classNames` as well as the deprecated `acceptcharset` prop on `Form`
+
+## @rjsf/daisyui
+
+- Added new theme!
+- fix: Ensure peer dependencies align with v6 beta versions.
+- fix: Remove unused FontAwesome dependency causing build issues.
+
+## @rjsf/fluent-ui
+
+- BREAKING CHANGE: Deleted this theme in favor of `fluentui-rc`
+
+## @rjsf/fluentui-rc
+
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
+- fix: Ensure peer dependencies align with v6 beta versions.
+
+## @rjsf/mui
+
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+- Updated the theme to use `Grid2` instead of the deprecated `Grid`
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
+- fix: Ensure peer dependencies align with v6 beta versions.
+
+## @rjsf/react-bootstrap
+
+- Added new package to replace `@rjsf/bootstrap-4`
+- `react-bootstrap` peer dependency bumped to `^2.0.0`, corresponding to Bootstrap 5
+- CheckboxesWidget: Remove deprecated prop `custom`
+- IconButton: Remove deprecated `block` prop
+- RangeWidget: Use `FormRange` component
+- SelectWidget: Use new FormSelect component, remove `bsPrefix` prop to achieve correct styling
+- fix: Ensure peer dependencies align with v6 beta versions.
+
+## @rjsf/semantic-ui
+
+- BREAKING CHANGE: Refactored `ArrayFieldItemTemplate` to use the new `ArrayFieldItemButtonsTemplate`
+- Updated the `ArrayFieldTemplate`, `ObjectFieldTemplate`, and `WrapIfAdditionalTemplate` to a unique id using the `buttonId()` function and adding consistent marker classes
+- Implemented the `GridTemplate` component, adding it to the `templates` for the theme
+- fix: Ensure peer dependencies align with v6 beta versions.
+
+## @rjsf/shadcn
+
+- Added new theme!
+- fix: Ensure peer dependencies align with v6 beta versions.
+
+## @rjsf/uswds
+
+- BREAKING: Initial release of the USWDS theme package (`@rjsf/uswds`).
+- BREAKING: Uses components from `@trussworks/react-uswds` library for core form elements, templates, and buttons.
+- feat: Implemented `GridTemplate` using `@trussworks/react-uswds` Grid components.
+- fix: Refactored `WrapIfAdditionalTemplate` to use `@trussworks/react-uswds` components (`FormGroup`, `Label`, `TextInput`, `Grid`).
+- fix: Refactored all Widgets to use components from `@trussworks/react-uswds`.
+- fix: Refactored all Templates (Field, ErrorList, Buttons, ArrayField*, ObjectField*, TitleField*, etc.) to use components from `@trussworks/react-uswds`.
+- fix: Removed unused `BaseInputTemplate` and `Templates.tsx`.
+- fix: Updated `GridTemplate` to accept `className` and `style` props for consistency.
+- fix: Ensure `Widgets/index.ts` correctly exports `generateWidgets`.
+- fix: Remove unused FontAwesome dependency causing build issues.
+- fix: Remove deprecated `defaultProps` from `TextareaWidget`.
+- fix: Ensure peer dependencies align with v6 beta versions.
+- test: Uses standard snapshot tests for `@rjsf/uswds`.
+- test: Added `@testing-library/react` for testing components.
+
+## @rjsf/utils
+
+- BREAKING CHANGE: Refactored the `ArrayFieldItemTemplateType` to extract out all the button related props to `ArrayFieldItemButtonsTemplateType`, adding `buttonsProps: ArrayFieldItemButtonsTemplateType` as a new prop
+  - Also created a deprecated alias type `ArrayFieldTemplateItemType` that points to `ArrayFieldItemTemplateType` for backwards compatibility
+- Added new `GridTemplateProps` type
+- BREAKING CHANGE: Added two the following new, required props to `TemplatesType`:
+  - `ArrayFieldItemButtonsTemplate: ComponentType<ArrayFieldItemButtonsTemplateType<T, S, F>>;`
+  - `GridTemplate: ComponentType<GridTemplateProps>`
+- BREAKING CHANGE: Updated the `SchemaUtilsType` to add new validator-based functions to the interface
+- Added the following new non-validator utility functions:
+  - `buttonId<T>(id: IdSchema<T> | string, btn: 'add' | 'copy' | 'moveDown' | 'moveUp' | 'remove')`: used to generate consistent ids for RJSF buttons
+  - `getTestIds(): TestIdShape`: Returns an object of test IDs that can only be used in test mode, helpful for writing unit tests for React components
+  - `hashObject(object: unknown): string`: Stringifies an `object` and returns the hash of the resulting string
+  - `hashString(string: string): string`: Hashes a string into hex format
+  - `lookupFromFormContext<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(regOrFc: Registry<T, S, F> | Registry<T, S, F>['formContext'], toLookup: string, fallback?: unknown)`: Given a React JSON Schema Form registry or formContext object, return the value associated with `toLookup`
+- Added the following new validator-based utility functions:
+  - `findFieldInSchema<T = undefined, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(validator: ValidatorType<T, S, F>, rootSchema: S, path: string | string[], schema: S, formData?: T, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>): FoundFieldType<S>`: Finds the field specified by the `path` within the root or recursed `schema`
+  - `findSelectedOptionInXxxOf<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(validator: ValidatorType<T, S, F>, rootSchema: S, schema: S, fallbackField: string,xxx: 'anyOf' | 'oneOf', formData?: T, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>): S | undefined`: Finds the option that matches the selector field in the `schema` or undefined if nothing is selected
+  - `getFromSchema<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(validator: ValidatorType<T, S, F>, rootSchema: S, schema: S, path: string | string[], defaultValue: T | S, experimental_customMergeAllOf?: Experimental_CustomMergeAllOf<S>): T | S`: Helper that acts like lodash's `get` but additionally retrieves `$ref`s as needed to get the path for schemas
+- BREAKING CHANGE: Removed support for the deprecated `schema.enumNames` from `getOptionsList()` while switching the order of its generic types
+- BREAKING CHANGE: Removed the deprecated `getMatchingOption()` and `mergeValidationData()` from the library export and the `SchemaUtilsType` interface
+- BREAKING CHANGE: Removed the deprecated `toErrorList()` function from the `ValidatorType` interface
+- BREAKING CHANGE: Removed the deprecated `RJSF_ADDITONAL_PROPERTIES_FLAG` constant
+
+## @rjsf/validator-ajv6
+
+- BREAKING CHANGE: This deprecated validator has been removed
+
+## @rjsf/validator-ajv8
+
+- BREAKING CHANGE: Removed the implementation of the deprecated `toErrorList()` function from the validator implementations
+
+## Dev / docs / playground
+
+- Updated the playground to Chakra UI v3
+- Updated the playground to remove `fluent-ui` theme
+- Updated the `custom-templates.md` documentation for the changes to the `ArrayFieldTemplateItem` and add the two new templates
+- Updated the `utility-functions.md` documentation to add the `buttonId()` function
+- Added the `v6.x upgrade guide.md` documentation
+- Updated the `playground` to add a `Layout Grid` example and made the selected example now be part of the shared export
+- Replaced Lerna with Nx, updated all lerna commands to use the Nx CLI
+- fix(playground): Update dependencies to use `workspace:` protocol for local linking.
+- fix(playground): Update `index.tsx` to use React 18 `createRoot` API.
+- fix(docs): Update theme table for v6 changes (add USWDS, remove deprecated).
+- BREAKING CHANGE: Updated all `peerDependencies` to change minimal `React` support to `>=18`
+
+# 6.0.0-alpha.0
+
+## @rjsf/bootstrap-4
+
+- BREAKING CHANGE: Package has been replaced with `@rjsf/react-bootstrap`. `react-boostrap` v1 / Bootstrap 4 are no longer supported in RJSF v6.
+
+## @rjsf/material-ui
+
+- BREAKING CHANGE: Removed `@rjsf/material-ui` package. Material UI v4 (`@material-ui/core`) has been deprecated since September 2021. To use Material UI v5 (`@mui/core`) with RJSF, please use the `@rjsf/mui` theme instead.
+
+## @rjsf/react-bootstrap
+
+- Added new package to replace `@rjsf/bootstrap-4`
+- `react-bootstrap` peer dependency bumped to `^2.0.0`, corresponding to Bootstrap 5
+- CheckboxesWidget: Remove deprecated prop `custom`
+- IconButton: Remove deprecated `block` prop
+- RangeWidget: Use `FormRange` component
+- SelectWidget: Use new FormSelect component, remove `bsPrefix` prop to achieve correct styling
+
+## Dev / docs / playground
+
+- Updated the playground to remove `material-ui-4` theme and replace the `bootstrap-4` theme with `react-bootstrap`

README.md

@@ -29,13 +29,13 @@
 
 - [Ant Design](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/antd)
 - [Bootstrap 3](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/core)
-- [Bootstrap 4](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/bootstrap-4)
+- [React-Bootstrap (Bootstrap 5)](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/react-bootstrap)
 - [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)
+- [Daisy UI](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/daisyui)
 - [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)
+- [USWDS](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/uswds)
 
 ## Documentation