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

@@ -41,4 +44,4 @@
      "path": "./packages/snapshot-tests"
    }
  ]
-}
+}


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: ***@***.***>

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DaisyUI v5 + Tailwind v4 + RJSF v6 #4498

DaisyUI v5 + Tailwind v4 + RJSF v6 #4498

inchoate commented Feb 14, 2025

inchoate commented Feb 14, 2025

nickgros commented Feb 14, 2025 •

edited

Loading

inchoate commented Feb 14, 2025

heath-freenome commented Feb 18, 2025

heath-freenome Feb 18, 2025

heath-freenome Feb 18, 2025

heath-freenome Feb 18, 2025

heath-freenome Feb 18, 2025

heath-freenome Feb 18, 2025

heath-freenome Feb 18, 2025

heath-freenome Feb 18, 2025

inchoate Feb 18, 2025

heath-freenome Feb 18, 2025

heath-freenome Feb 18, 2025

heath-freenome Feb 18, 2025

inchoate commented Feb 18, 2025

heath-freenome commented Feb 18, 2025

heath-freenome Feb 18, 2025

inchoate commented Feb 19, 2025

inchoate commented Feb 19, 2025

heath-freenome commented Feb 19, 2025

inchoate commented Feb 19, 2025 via email

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

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

DaisyUI v5 + Tailwind v4 + RJSF v6 #4498

Are you sure you want to change the base?

DaisyUI v5 + Tailwind v4 + RJSF v6 #4498

Conversation

inchoate commented Feb 14, 2025

Reasons for making this change

Checklist

inchoate commented Feb 14, 2025

nickgros commented Feb 14, 2025 • edited Loading

inchoate commented Feb 14, 2025

heath-freenome commented Feb 18, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

inchoate commented Feb 18, 2025

heath-freenome commented Feb 18, 2025

Choose a reason for hiding this comment

inchoate commented Feb 19, 2025

inchoate commented Feb 19, 2025

heath-freenome commented Feb 19, 2025

inchoate commented Feb 19, 2025 via email

nickgros commented Feb 14, 2025 •

edited

Loading