Add theme uswds v3.0 on v6 (main) #4596

JJediny · 2025-05-02T20:30:41Z

Reasons for making this change

This PR introduces a new theme package, @rjsf/uswds, implementing the U.S. Web Design System (USWDS) v3 for react-jsonschema-form.

Many government projects require adherence to USWDS guidelines. This theme provides developers with an RJSF implementation that uses standard USWDS components, classes, and structure, ensuring visual consistency and compliance.

Key features include:

Templates for all standard RJSF fields (Object, Array, String, Number, Boolean, etc.) styled according to USWDS.
Widgets leveraging USWDS form controls (usa-input, usa-textarea, usa-checkbox, usa-radio, usa-select, etc.).
Array and Object field templates using USWDS fieldset, legend, and grid layout (grid-row, grid-col).
Action buttons (Add, Remove, Move Up, Move Down) using USWDS button styles (usa-button, usa-button--outline, usa-button--unstyled) and icons loaded from the official USWDS CDN.
Error display using USWDS error states (usa-form-group--error, usa-label--error, usa-error-message).
Required field indication using usa-label--required.
Refactored button implementation for better maintainability.

Checklist

I'm updating documentation
- I've checked the rendering of the Markdown text I've added (packages/uswds/README.md)
I'm adding or updating code
- I've added and/or updated tests. I've run npx nx run-many --target=build --exclude=@rjsf/docs && npm run test:update to update snapshots, if needed. (Self-verification step)
- I've updated docs if needed (Added theme README)
- I've updated the changelog with a description of the PR (Self-verification step - Add an entry like: feat(@rjsf/uswds): Add new theme package for US Web Design System v3)
I'm adding a new feature
- I've updated the playground with an example use of the feature

heath-freenome · 2025-05-03T03:05:56Z

.gitignore

 # Dependency directories
 node_modules/

+# Optional npm cache directory


This is already in the .gitignore on the head of main which you are not on yet

packages/uswds/babel.config.json

packages/uswds/package.json

heath-freenome · 2025-05-04T03:07:09Z

packages/uswds/src/Templates/Button/CopyButton.tsx

+      {...otherProps}
+      data-testid="copy-button"
+      aria-label={translatedLabel}
+      className={`usa-button usa-button--unstyled ${otherProps.className || ''}`.trim()}


Suggested change

className={`usa-button usa-button--unstyled ${otherProps.className || ''}`.trim()}

className={`usa-button usa-button--unstyled ${className}`.trim()}

heath-freenome · 2025-05-04T03:07:24Z

packages/uswds/src/Templates/Button/AddButton.tsx

+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: IconButtonProps<T, S, F>) {
+  const { icon, iconType, registry, ...otherProps } = props; // Destructure registry


Suggested change

const { icon, iconType, registry, ...otherProps } = props; // Destructure registry

const { icon, iconType, registry, className = '', ...otherProps } = props; // Destructure registry

heath-freenome · 2025-05-04T03:07:42Z

packages/uswds/src/Templates/Button/AddButton.tsx

+  const translatedLabel = registry.translateString(TranslatableString.AddItemButton);
+  return (
+    // Add appropriate styling for an icon-only button if desired, e.g., usa-button--icon-only
+    <Button type="button" {...otherProps} data-testid="add-button" aria-label={translatedLabel} className={`usa-button usa-button--outline ${otherProps.className || ''}`.trim()}>


Suggested change

<Button type="button" {...otherProps} data-testid="add-button" aria-label={translatedLabel} className={`usa-button usa-button--outline ${otherProps.className || ''}`.trim()}>

<Button type="button" {...otherProps} data-testid="add-button" aria-label={translatedLabel} className={`usa-button usa-button--outline ${className}`.trim()}>

heath-freenome · 2025-05-04T03:12:59Z

packages/uswds/src/Templates/DescriptionField.tsx

+
+export default function DescriptionField<T = any, S extends RJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  description,
+  id,


Suggested change

id,

id,

registry,

uiSchema,

packages/uswds/src/Templates/DescriptionField.tsx

heath-freenome · 2025-05-04T03:16:51Z

Still more comments to come

…build

heath-freenome

@JJediny I'm not going to pull any punches here. This theme is a mess. Tons of duplicated code, implementing things that aren't necessary, multiple template implementations for the same thing. It seems like you don't really understand the basic concepts of building a theme that extends the core theme. Most theme builders look at the other non-core themes that closest represent the way their theme library works, copy that and change the templates and widgets. No need for fields to be updated at all.

I'm almost tempted to suggest you restart building your theme by copying something like the react-bootstrap theme as the starting point and reimplement. There is a lot of cleanup work you'll need to do so that you can have this theme ready

heath-freenome · 2025-05-07T17:57:24Z

packages/playground/vite.config.ts

+          },
  },
-});
+  });


Can you revert these changes?

heath-freenome · 2025-05-07T17:58:21Z

packages/uswds/babel.config.json

+      "@babel/preset-react", 
+      "@babel/preset-typescript"
+    ]
+  }


The little dash surrounded by the red circle means this needs a blank line

Suggested change

}

}

heath-freenome · 2025-05-07T17:59:11Z

packages/uswds/package.json

+      "require": "./dist/index.js",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"


Whoops, the types are supposed to be first, my bad

Suggested change

"require": "./dist/index.js",

"import": "./lib/index.js",

"types": "./lib/index.d.ts"

"types": "./lib/index.d.ts",

"require": "./dist/index.js",

"import": "./lib/index.js"

heath-freenome · 2025-05-07T17:59:27Z

packages/uswds/package.json

+      "require": "./dist/index.js",
+      "import": "./lib/index.js",
+      "types": "./lib/index.d.ts"


Suggested change

"require": "./dist/index.js",

"import": "./lib/index.js",

"types": "./lib/index.d.ts"

"types": "./lib/index.d.ts",

"require": "./dist/index.js",

"import": "./lib/index.js"

heath-freenome · 2025-05-07T17:59:42Z

packages/uswds/package.json

+      "require": "./dist/*.js",
+      "import": "./lib/*.js",
+      "types": "./lib/*.d.ts"


Suggested change

"require": "./dist/*.js",

"import": "./lib/*.js",

"types": "./lib/*.d.ts"

"types": "./lib/*.d.ts",

"require": "./dist/*.js",

"import": "./lib/*.js"

heath-freenome · 2025-05-07T19:53:24Z

packages/uswds/test/ObjectField.test.tsx

@@ -0,0 +1,19 @@
+import Form from '../src';


You don't need this, please delete the whole file

heath-freenome · 2025-05-07T19:53:34Z

packages/uswds/test/StringField.test.tsx

@@ -0,0 +1,22 @@
+import Form from '../src';
+// import { createSchemaTest } from '../schemaTests'; // Removed usage


You don't need this, please delete the whole file

heath-freenome · 2025-05-07T19:53:58Z

packages/uswds/test/ArrayField.test.tsx

+// Create a simple test suite to prevent "test suite must contain at least one test" error
+describe('ArrayField', () => {
+  it('should have a test', () => {
+    expect(true).toBe(true);
+  });
+});


You shouldn't need this as the other themes don't complain

heath-freenome · 2025-05-07T19:54:06Z

packages/uswds/test/Form.test.tsx

+// Create a simple test suite to prevent "test suite must contain at least one test" error
+describe('Form', () => {
+  it('should have a test', () => {
+    expect(true).toBe(true);
+  });
+});
+


You shouldn't need this as the other themes don't complain

heath-freenome · 2025-05-07T19:54:54Z

packages/uswds/jest.config.jsc

Why a .jsc file, use .json instead

heath-freenome · 2025-05-08T20:25:51Z

@JJediny I apologize if my feedback felt harsh. I'm hoping you closed this to follow my suggestion of starting fresh by modifying a copied theme rather than giving up on adding the theme entirely. Feel free to reach out on discord if you need any help

JJediny · 2025-05-08T21:00:32Z

@heath-freenome all good, yes will resume work on our fork and better formulate before another PR. This dropped on our immediate priorities. Next time I will be sure to address all the feedback and suggestions thus far and start from an established theme. Appreciate your time

JJediny added 4 commits May 2, 2025 15:56

Tests working again Build next

de0823b

Tests working again Build next add all

354b27e

tests working snapshot consistency acheived

f926917

All tests running, 10 remaining build errors, pushing until next week

32625a3

JJediny mentioned this pull request May 2, 2025

[WIP] Add USWDS theme #4573

Closed

8 tasks

heath-freenome requested changes May 4, 2025

View reviewed changes

heath-freenome reviewed May 4, 2025

View reviewed changes

packages/uswds/src/Templates/DescriptionField.tsx Outdated Show resolved Hide resolved

JJediny added 5 commits May 6, 2025 09:11

Fullname files to avoid namespace conflict, working tests broken esm …

fdc31ba

…build

adds JSdocs and changlog

36c37f7

working build

4f7ff87

test, lint, build no errors

1460b52

updates based on title description rendering

9e1bd88

heath-freenome requested changes May 7, 2025

View reviewed changes

JJediny closed this May 7, 2025

	className={`usa-button usa-button--unstyled ${otherProps.className \|\| ''}`.trim()}
	className={`usa-button usa-button--unstyled ${className}`.trim()}

	const { icon, iconType, registry, ...otherProps } = props; // Destructure registry
	const { icon, iconType, registry, className = '', ...otherProps } = props; // Destructure registry

	<Button type="button" {...otherProps} data-testid="add-button" aria-label={translatedLabel} className={`usa-button usa-button--outline ${otherProps.className \|\| ''}`.trim()}>
	<Button type="button" {...otherProps} data-testid="add-button" aria-label={translatedLabel} className={`usa-button usa-button--outline ${className}`.trim()}>

		@@ -0,0 +1,22 @@
		import Form from '../src';
		// import { createSchemaTest } from '../schemaTests'; // Removed usage

Add theme uswds v3.0 on v6 (main) #4596

Add theme uswds v3.0 on v6 (main) #4596

Uh oh!

Conversation

JJediny commented May 2, 2025

Reasons for making this change

Checklist

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

heath-freenome commented May 4, 2025

Uh oh!

heath-freenome left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

heath-freenome commented May 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

JJediny commented May 8, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

heath-freenome left a comment •

edited

Loading

heath-freenome commented May 8, 2025 •

edited

Loading