DaisyUI v5 + Tailwind v4 + RJSF v6 #4498

inchoate · 2025-02-14T16:15:31Z

Reasons for making this change

[Please describe them here]

If this is related to existing tickets, include links to them as well. Use the syntax fixes #[issue number] (ex: fixes #123).

If your PR is non-trivial and you'd like to schedule a synchronous review, please add it to the weekly meeting agenda: https://docs.google.com/document/d/12PjTvv21k6LIky6bNQVnsplMLLnmEuypTLQF8a-8Wss/edit

Checklist

I'm updating documentation
- I've checked the rendering of the Markdown text I've added
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.
- I've updated docs if needed
- I've updated the changelog with a description of the PR
I'm adding a new feature
- I've updated the playground with an example use of the feature

inchoate · 2025-02-14T16:16:15Z

Copy of #4495 for RJSF v6. #4495

nickgros · 2025-02-14T22:06:21Z

@heath-freenome Can you provide guidance to @inchoate about your new grid templating system in v6 and what other major changes (if any) he might expect to impact this PR? Would it make sense for us to prioritize merging this and #4497 to v6 before additional templating changes?

inchoate · 2025-02-14T22:18:24Z

Forgot the v6 screenshots:

Themes and Subthemes

Simple Form in the Retro and Dark Themes

Numbers in the Pastel Theme

File Uploaders in the caramellatte Theme

supports single, multiple, and type filters

Datetime picker in the Cupcake, Dracula, and CMYK Themes

integrates w/react-date-picker

Enumerated Objects in the Light Theme

Hope this helps.

heath-freenome · 2025-02-18T18:13:44Z

@heath-freenome Can you provide guidance to @inchoate about your new grid templating system in v6 and what other major changes (if any) he might expect to impact this PR? Would it make sense for us to prioritize merging this and #4497 to v6 before additional templating changes?

@nickgros @inchoate I've completed all of the template changes in V6 already. It seems like there needs to be an implementation of GridTemplate for this theme implementation.

heath-freenome · 2025-02-18T18:18:01Z

packages/daisyui/src/templates/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

+      <div className='card-body p-4'>
+        <div className='array-field-item-content mb-2'>{children}</div>
+        <div className='card-actions justify-end'>
+          {hasMoveUp && (


You will want to use the ArrayFieldItemButtonsTemplate in place of the buttons here. Although your implementation has additional behavior to the default implementation so maybe it is not necessary.

heath-freenome · 2025-02-18T18:19:45Z

packages/daisyui/src/daisyForm/DaisyForm.tsx

+  F extends FormContextType = any
+>(): ComponentType<FormProps<T, S, F>> {
+  const theme = generateTheme<T, S, F>();
+  console.log('Generated theme:', theme); // Debug what templates are available


Please remove all of the console.log() statements before committing

heath-freenome · 2025-02-18T18:21:12Z

packages/daisyui/src/templates/ArrayFieldTitleTemplate/ArrayFieldTitleTemplate.tsx

+  console.log('DaisyUI ArrayFieldTitleTemplate');
+
+  props;
+  return <div>ArrayFieldTitleTemplate</div>;


I'm curious why you implemented this since it does nothing to display the TitleFieldTemplate

heath-freenome · 2025-02-18T18:21:27Z

packages/daisyui/src/templates/BaseInputTemplate/index.ts

@@ -0,0 +1,2 @@
+export { default } from './BaseInputTemplate';
+export * from './BaseInputTemplate';


Suggested change

export * from './BaseInputTemplate';

export * from './BaseInputTemplate';

heath-freenome · 2025-02-18T18:22:17Z

packages/daisyui/src/templates/DescriptionField/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DescriptionField';
+export * from './DescriptionField';


Suggested change

export * from './DescriptionField';

export * from './DescriptionField';

heath-freenome · 2025-02-18T18:24:21Z

packages/daisyui/src/types.d.ts

+declare module '*.css?inline' {
+    const content: string;
+    export default content;
+} 


Suggested change

}

}

heath-freenome · 2025-02-18T18:24:35Z

packages/daisyui/src/utils.ts

+    // Object.keys(daisyProps).forEach((key) => {
+    //     /**
+    //      * Leveraging `shouldForwardProp` to remove props
+    //      *
+    //      * This is a utility function that's used in `@daisy-ui/react`'s factory function.
+    //      * Normally, it prevents DaisyProps from being passed to the DOM.
+    //      * In this case we just want to delete the unknown props. So we flip the boolean.
+    //      */
+    //     if (shouldForwardProp(key)) {
+    //         delete (daisyProps as any)[key];
+    //     }
+    // });


Is this code meant to be commented out?

heath-freenome · 2025-02-18T18:26:18Z

packages/daisyui/src/widgets/DateWidget/DateWidget.tsx

+//
+// Predefined DayPicker styles using DaisyUI classes
+//
+const dayPickerStyles: { classNames: Partial<ClassNames>; modifiers: Partial<ModifiersClassNames> } = {


Is it possible to DRY up this code into the DateTimeWidget with a flag to only show Date?

heath-freenome · 2025-02-18T18:27:19Z

packages/playground/src/app.tsx

-import Ajv2019 from 'ajv/dist/2019.js';
-import Ajv2020 from 'ajv/dist/2020.js';

 import Layout from './layout';
 import Playground, { PlaygroundProps } from './components';

-// @ts-expect-error todo: error TS2345: Argument of type 'Localize' is not assignable to parameter of type 'Localizer'.
 const esV8Validator = customizeValidator({}, localize_es);
-const AJV8_2019 = customizeValidator({ AjvClass: Ajv2019 });
-const AJV8_2020 = customizeValidator({ AjvClass: Ajv2020 });
-const AJV8_DISC = customizeValidator({ ajvOptionsOverrides: { discriminator: true } });
 const AJV8_DATA_REF = customizeValidator({ ajvOptionsOverrides: { $data: true } });

 const validators: PlaygroundProps['validators'] = {
  AJV8: v8Validator,
  'AJV8 $data reference': AJV8_DATA_REF,
-  'AJV8 (discriminator)': AJV8_DISC,
  AJV8_es: esV8Validator,
-  AJV8_2019,
-  AJV8_2020,


Please restore all of these

heath-freenome · 2025-02-18T18:27:55Z

tsconfig.json

    }
  ]
-}
+}


Suggested change

}

}

inchoate · 2025-02-18T22:08:19Z

@heath-freenome thanks for your comments. I believe I addressed everything you brought up. Clearly my commit hooks were not set up correctly and, yet they still refuse to run.

I also added:

Toggle

Ratings

@nickgros

heath-freenome · 2025-02-18T23:17:40Z

@inchoate I don't see an implementation of the GridTemplate.

heath-freenome · 2025-02-18T23:20:21Z

packages/daisyui/src/templates/Templates.tsx

+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,


You are missing a GridTemplate implementation.

inchoate · 2025-02-19T01:04:26Z

@inchoate I don't see an implementation of the GridTemplate.

Sorry. Didn't see you make a comment about that. I'll just read the core implementation and go from there unless I hear otherwise.

inchoate · 2025-02-19T18:01:27Z

@nickgros / @heath-freenome I'm kinda' flailing on the GridTemplate right now. How can I accurately test a different theme's implementation on the v6 branch?

heath-freenome · 2025-02-19T18:15:42Z

I'm working on a new Field that will use it. Give me a few days to get it committed

inchoate · 2025-02-19T18:20:11Z

Awesome. Thanks.

…

On Wed, Feb 19, 2025, 12:16 PM Heath C ***@***.***> wrote: I'm working on a new Field that will use it. Give me a few days to get it committed — Reply to this email directly, view it on GitHub <#4498 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAH34OUF3YWNPHYPFMIDJF32QTC6JAVCNFSM6AAAAABXE7EPRCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNRZGQYTSNJQGM> . You are receiving this because you were mentioned.Message ID: ***@***.***> [image: heath-freenome]*heath-freenome* left a comment (rjsf-team/react-jsonschema-form#4498) <#4498 (comment)> I'm working on a new Field that will use it. Give me a few days to get it committed — Reply to this email directly, view it on GitHub <#4498 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAH34OUF3YWNPHYPFMIDJF32QTC6JAVCNFSM6AAAAABXE7EPRCVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMNRZGQYTSNJQGM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

heath-freenome · 2025-03-13T21:34:58Z

@inchoate I've merged a few PRs with updates and fixes from main. You'll have to rebase and update your PR. Also, checkout the new Layout Grid in the playground and update the layoutGrid.tsx in the samples directory to add your custom uiSchema for the grid to it.

heath-freenome · 2025-03-14T17:08:11Z

package.json

+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
+  "dependencies": {
+    "tailwindcss": "^4.0.1"
+  }


Please remove this and do what it takes to have it work with standard npm install commands.

heath-freenome · 2025-03-14T17:09:22Z

packages/daisyui/package.json

+  "types": "src/index.ts",
+  "scripts": {


Can you add these to improve ESM support, matching the changes made in 5.24.7

Suggested change

"types": "src/index.ts",

"scripts": {

"types": "src/index.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": {

heath-freenome · 2025-03-14T17:11:42Z

packages/daisyui/package.json

+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "tsc -b",


To improve ESM support you will need to change this to:

Suggested change

"build": "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, } }

heath-freenome · 2025-03-14T17:12:00Z

packages/daisyui/src/daisyForm/index.ts

@@ -0,0 +1,2 @@
+export { default } from './DaisyForm';
+export * from './DaisyForm';


Suggested change

export * from './DaisyForm';

export * from './DaisyForm';

heath-freenome · 2025-03-14T17:13:35Z

packages/daisyui/src/templates/ArrayFieldDescriptionTemplate/ArrayFieldDescriptionTemplate.tsx

To fix the errors on this page, it seems like you need a tsconfig.json in your packages/daisyui that looks like:

{ "extends": "../../tsconfig.base.json", "files": [], "references": [ { "path": "./src" }, { "path": "./test" } ] }

heath-freenome · 2025-03-14T17:15:04Z

packages/daisyui/src/templates/ObjectFieldTemplate/ObjectFieldTemplate.tsx

+        {canExpand<T, S, F>(schema, uiSchema, formData) && (
+          <div className='flex justify-end'>
+            <AddButton
+              className='btn btn-primary btn-sm'


Can you add id={buttonId<T>(id, 'add')} to match changes made in other themes in v6

heath-freenome · 2025-03-14T17:15:17Z

packages/daisyui/src/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

+          disabled={disabled || readonly}
+        />
+        {schema.additionalProperties && (
+          <button className='btn btn-danger ml-2' onClick={onDropPropertyClick(label)} disabled={disabled || readonly}>


Can you add id={buttonId<T>(id, 'remove')} to match changes made in other themes in v6

heath-freenome · 2025-03-14T17:15:31Z

packages/daisyui/src/templates/ArrayFieldTemplate/ArrayFieldTemplate.tsx

+      {canAdd && (
+        <div className='flex flex-row justify-end'>
+          <AddButton
+            className='btn btn-primary'


Can you add id={buttonId<T>(id, 'add')} to match changes made in other themes in v6

inchoate · 2025-03-24T22:37:10Z

@heath-freenome -- haven't forgotten this, I should be circling back to it shortly. Appreciate the patience.

inchoate · 2025-04-05T01:09:33Z

@heath-freenome I'm back at it. I'll be rebasing and adapting to the current state of https://github.com/rjsf-team/react-jsonschema-form/tree/rjsf-v6.

Please let me know if I should be doing something else.

heath-freenome · 2025-04-07T19:00:08Z

@inchoate I noticed you now have two PRs?

inchoate · 2025-04-07T19:09:55Z

@heath-freenome yes -- I left this open for the conversation history. We can close it. Please see the other, which is quite better done.

feat: DaisyUI Framework

43ecf0f

inchoate changed the base branch from main to rjsf-v6 February 14, 2025 16:15

heath-freenome reviewed Feb 18, 2025

View reviewed changes

[WIP] - PR comments; added toggle and ratings widgets

c70e065

heath-freenome reviewed Feb 18, 2025

View reviewed changes

heath-freenome reviewed Mar 14, 2025

View reviewed changes

inchoate closed this Apr 7, 2025

		@@ -0,0 +1,2 @@
		export { default } from './BaseInputTemplate';
		export * from './BaseInputTemplate'; No newline at end of file

	export * from './BaseInputTemplate';
	export * from './BaseInputTemplate';

		@@ -0,0 +1,2 @@
		export { default } from './DescriptionField';
		export * from './DescriptionField'; No newline at end of file

	export * from './DescriptionField';
	export * from './DescriptionField';

-  "types": "src/index.ts",
-  "scripts": {
+  "types": "src/index.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": {

	"build": "tsc -b",
	"build:ts": "tsc -b tsconfig.build.json && tsc-alias -p tsconfig.build.json",

		@@ -0,0 +1,2 @@
		export { default } from './DaisyForm';
		export * from './DaisyForm'; No newline at end of file

DaisyUI v5 + Tailwind v4 + RJSF v6 #4498

DaisyUI v5 + Tailwind v4 + RJSF v6 #4498

Uh oh!

Conversation

inchoate commented Feb 14, 2025

Reasons for making this change

Checklist

Uh oh!

inchoate commented Feb 14, 2025

Uh oh!

nickgros commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

inchoate commented Feb 14, 2025

Uh oh!

heath-freenome commented Feb 18, 2025

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!

inchoate commented Feb 18, 2025

Uh oh!

heath-freenome commented Feb 18, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

inchoate commented Feb 19, 2025

Uh oh!

inchoate commented Feb 19, 2025

Uh oh!

heath-freenome commented Feb 19, 2025

Uh oh!

inchoate commented Feb 19, 2025 via email

Uh oh!

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

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!

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!

inchoate commented Mar 24, 2025

Uh oh!

inchoate commented Apr 5, 2025

Uh oh!

heath-freenome commented Apr 7, 2025

Uh oh!

inchoate commented Apr 7, 2025

Uh oh!

nickgros commented Feb 14, 2025 •

edited

Loading

heath-freenome commented Mar 13, 2025 •

edited

Loading