Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DaisyUI v5 Theme for React JSON Schema Form v6 #4551

Open
wants to merge 14 commits into
base: rjsf-v6
Choose a base branch
from

Conversation

inchoate
Copy link

@inchoate inchoate commented Apr 5, 2025

Integrate DaisyUI v5 with RJSF v6

This PR integrates DaisyUI v5 with React JSON Schema Form v6, providing a complete theme implementation with enhanced visual styling and component architecture.

Changes

  • Implemented all required template components for RJSF v6 compatibility
  • Added support for DaisyUI v6 utility classes across all form elements
  • Created connected card styling for array items with proper visual hierarchy
  • Enhanced field layout with consistent spacing and alignment
  • Implemented specialized widget rendering for improved cross-browser compatibility
  • Fixed checkbox handling to avoid double-labeling issues
  • Optimized button positioning and styling
  • Added proper handling of error states and validation messages
  • Included comprehensive documentation of component architecture
  • Added a few more fields to nested.ts to enhance the demo
  • Fixes Selects
  • Fixes Calendars
  • Uses Fieldsets for arrays instead of custom array rendering
  • Using new linter settings, so should have proper newlines everywhere
  • Passes linting
  • Passes cs-format

Testing

Tested across multiple browsers with complex nested schemas including:

  • Deeply nested objects
  • Array fields with dynamic items
  • Various input types (text, numbers, checkboxes, dates)
  • Error validation states

Screenshots

Screenshot 2025-04-04 at 10 58 01 PM Screenshot 2025-04-04 at 10 57 47 PM Screenshot 2025-04-04 at 10 57 20 PM Screenshot 2025-04-04 at 10 56 59 PM Screenshot 2025-04-04 at 10 55 13 PM Screenshot 2025-04-04 at 10 55 01 PM Screenshot 2025-04-04 at 10 54 45 PM Screenshot 2025-04-04 at 10 54 37 PM

@heath-freenome @saadeghi

Redesigned form templates with connected card
styling, consistent spacing, and improved layout.
Added proper visual hierarchy for nested elements,
optimized control button positioning, and
implemented cross-browser date/time widgets.
Applied DaisyUI utility classes consistently for a
cohesive interface while maintaining full RJSF
functionality.
@inchoate inchoate changed the title DaisyUI Theme for React JSON Schema Form v6 DaisyUI v5 Theme for React JSON Schema Form v6 Apr 5, 2025
PR feedback.

PR review
@inchoate
Copy link
Author

inchoate commented Apr 8, 2025

  • Addressing PR feedback
  • Added Rating widget to the demo
Screenshot 2025-04-08 at 9 32 22 AM
  • TODO: GridTemplate

@inchoate
Copy link
Author

inchoate commented Apr 8, 2025

  • Added GridLayout
  • Fixed Calendar Rendering
  • Addressed all PR issues

@inchoate
Copy link
Author

inchoate commented Apr 8, 2025

@heath-freenome - ready, sir.

@inchoate
Copy link
Author

inchoate commented Apr 9, 2025

@heath-freenome I think we're closer now.

  • Fixed almost all linter issues. Some I'm okay w/.
  • (feat) / Added new RatingWidget across the board and added it to the 'Widgets' demo
  • Addressed all of your concerns. Please note, however, that my IDE linter is overriding yours so a newline or two might have been eaten somew
    here. Happy to fix whatever snuck through.
  • This also fixed up the calendar some more.

Core Rating Widget

Screenshot 2025-04-09 at 6 25 08 AM

Default Style

Screenshot 2025-04-09 at 6 24 22 AM

Daisy Style ❤️

Screenshot 2025-04-09 at 6 25 35 AM

@heath-freenome
Copy link
Member

@inchoate you have a build error to fix with linting. Consider running npm run lint

inchoate added 2 commits April 9, 2025 13:01
Fixes selects.
Uses Fieldsets instead of custom arrays.
Uses join for buttons when appropriate.
Calendar fix
@@ -0,0 +1,20 @@
/** @type {import('tailwindcss').Config} */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I'm guessing this is working without the conversion

* Updated .github templates to add: fluent-rc, shadcn, daisy
* Addresses all PR comments
* Updates README
Comment on lines +34 to +37
const onCopyClick = useMemo(() => onCopyIndexClick(index), [index, onCopyIndexClick]);
const onRemoveClick = useMemo(() => onDropIndexClick(index), [index, onDropIndexClick]);
const onArrowUpClick = useMemo(() => onReorderClick(index, index - 1), [index, onReorderClick]);
const onArrowDownClick = useMemo(() => onReorderClick(index, index + 1), [index, onReorderClick]);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could switch these to useCallback() instead

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants