rjsf-team · heath-freenome · Apr 17, 2025 · Apr 5, 2025 · Apr 5, 2025 · Apr 8, 2025
diff --git a/README.md b/README.md
@@ -31,6 +31,7 @@
 - [Bootstrap 3](https://github.com/rjsf-team/react-jsonschema-form/tree/main/packages/core)
 - [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)
+- [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 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)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -71,6 +71,7 @@
     "packages/antd",
     "packages/chakra-ui",
     "packages/core",
+    "packages/daisyui",
     "packages/docs",
     "packages/fluentui-rc",
     "packages/mui",
@@ -81,5 +82,10 @@
     "packages/validator-ajv8",
     "packages/snapshot-tests",
     "packages/shadcn"
-  ]
+  ],
+  "dependencies": {
+    "@restart/hooks": "^0.6.2",
+    "@restart/ui": "^1.9.4",
+    "uncontrollable": "^9.0.0"
+  }
 }
diff --git a/packages/daisyui/.eslintrc b/packages/daisyui/.eslintrc
@@ -0,0 +1,18 @@
+{
+  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended"],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "react"],
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "react/prop-types": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
+  }
+}
diff --git a/packages/daisyui/README.md b/packages/daisyui/README.md
@@ -0,0 +1,70 @@
+# @rjsf/daisyui
+
+A [DaisyUI](https://daisyui.com/) theme for [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/).
+
+**Warning:** This integrates DaisyUI v5.0.0-beta.7. This is not yet released and is subject to change. It also integrates tailwindcss v4.0.6.
+
+## Features
+
+- Complete DaisyUI styling for all form elements
+- Support for custom themes via DaisyUI theme system
+- Responsive form layouts
+- Support for all RJSF field types including:
+  - Text inputs
+  - Select dropdowns (with examples support)
+  - Checkboxes and radio buttons
+  - Arrays and objects
+  - Enumerated objects
+  - Custom array handling
+
+## Installation
+
+```bash
+npm install @rjsf/daisyui @rjsf/core @rjsf/utils
+```
+
+## Usage
+
+```jsx
+import { Form } from '@rjsf/daisyui';
+import validator from '@rjsf/validator-ajv8';
+
+function App() {
+  return (
+    <Form 
+      schema={schema}
+      uiSchema={uiSchema}
+      validator={validator}
+      onChange={console.log}
+      onSubmit={console.log}
+    />
+  );
+}
+```
+
+## Theme Customization
+
+The form components use DaisyUI's theme system. You can customize the theme by adding DaisyUI theme classes to your HTML:
+
+```html
+<html data-theme="light">
+  <!-- or any other DaisyUI theme -->
+</html>
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Run tests
+npm test
+```
+
+## License
+
+Apache-2.0
diff --git a/packages/daisyui/babel.config.js b/packages/daisyui/babel.config.js
@@ -0,0 +1,11 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-react',
+    '@babel/preset-typescript'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-object-rest-spread'
+  ]
+};
diff --git a/packages/daisyui/package.json b/packages/daisyui/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "@rjsf/daisyui",
+  "version": "6.0.0-alpha.1",
+  "description": "Daisy UI components for react-jsonschema-form",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "tsc -b",
+    "build:cjs": "esbuild ./src/index.ts --bundle --outfile=dist/index.js --sourcemap --packages=external --format=cjs",
+    "build:esm": "esbuild ./src/index.ts --bundle --outfile=dist/daisy-ui.esm.js --sourcemap --packages=external --format=esm",
+    "build:umd": "rollup dist/daisy-ui.esm.js --format=umd --file=dist/daisy-ui.umd.js --name=@rjsf/daisy-ui",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@tailwindcss/vite": "^4.0.6",
+    "react": "^18.2.0",
+    "react-day-picker": "^9.5.1",
+    "tailwindcss": "^4.0.6"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "@rjsf/core": "^6.x",
+    "@rjsf/utils": "^6.x",
+    "primeicons": ">=6.0.0",
+    "primereact": ">=8.0.0"
+  },
+  "devDependencies": {
+    "daisyui": "^5.0.0-beta.7",
+    "esbuild": "^0.14.0",
+    "rollup": "^2.70.0",
+    "typescript": "^4.9.5"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rjsf-team/react-jsonschema-form.git"
+  },
+  "author": "Your Name <[email protected]>",
+  "license": "Apache-2.0"
+}
diff --git a/packages/daisyui/postcss.config.js b/packages/daisyui/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        '@tailwindcss/postcss': {},
+        autoprefixer: {},
+    },
+} 
diff --git a/packages/daisyui/src/DaisyUIFrameProvider.tsx b/packages/daisyui/src/DaisyUIFrameProvider.tsx
@@ -0,0 +1,71 @@
+/**
+ * __createDaisyUIFrameProvider is used to ensure that DaisyUI styles
+ * can be rendered within an iframe without affecting the parent page.
+ * Required for using DaisyUI in the playground.
+ *
+ * NOTE: This is an internal component only used by @rjsf/playground
+ */
+
+import React from 'react';
+
+interface DaisyUIFrameProviderProps {
+  children: React.ReactNode;
+  subtheme?: { dataTheme?: string } | null;
+}
+
+export const __createDaisyUIFrameProvider = (props: DaisyUIFrameProviderProps) => {
+  return function DaisyUIFrame({ document }: { document?: Document }) {
+    // Get theme from localStorage or use default
+    const theme = (() => {
+      try {
+        if (props.subtheme?.dataTheme) {
+          localStorage.setItem('daisyui-theme', props.subtheme.dataTheme);
+          return props.subtheme.dataTheme;
+        }
+        return localStorage.getItem('daisyui-theme') || 'cupcake';
+      } catch {
+        return 'cupcake';
+      }
+    })();
+
+    if (document) {
+      // Add Tailwind first
+      const tailwindScript = document.createElement('script');
+      tailwindScript.src = 'https://unpkg.com/@tailwindcss/[email protected]';
+      document.head.appendChild(tailwindScript);
+
+      // Add DaisyUI CSS
+      const daisyLink = document.createElement('link');
+      daisyLink.rel = 'stylesheet';
+      daisyLink.href = 'https://cdn.jsdelivr.net/npm/[email protected]/daisyui.css';
+      document.head.appendChild(daisyLink);
+
+      // Add all themes
+      const daisyLinkAllThemes = document.createElement('link');
+      daisyLinkAllThemes.rel = 'stylesheet';
+      daisyLinkAllThemes.href = 'https://cdn.jsdelivr.net/npm/[email protected]/themes.css';
+      document.head.appendChild(daisyLinkAllThemes);
+
+      // Configure Tailwind
+      const configScript = document.createElement('script');
+      configScript.textContent = `
+        window.tailwind = window.tailwind || {};
+        window.tailwind.config = {
+          daisyui: {
+            themes: true,
+          },
+          future: {
+            disableProductionWarning: true
+          }
+        }
+      `;
+      document.head.appendChild(configScript);
+    }
+
+    return (
+      <div data-theme={theme} className='daisy-ui-theme'>
+        {props.children}
+      </div>
+    );
+  };
+};
diff --git a/packages/daisyui/src/daisyForm/DaisyForm.tsx b/packages/daisyui/src/daisyForm/DaisyForm.tsx
@@ -0,0 +1,19 @@
+import { ComponentType } from 'react';
+import { withTheme, FormProps } from '@rjsf/core';
+import { generateTheme } from '../theme';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+export function generateForm<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(): ComponentType<FormProps<T, S, F>> {
+  const theme = generateTheme<T, S, F>();
+  return withTheme<T, S, F>(theme);
+}
+
+const Form = generateForm();
+
+export { Form, generateTheme };
+
+export default Form;
diff --git a/packages/daisyui/src/daisyForm/index.ts b/packages/daisyui/src/daisyForm/index.ts
@@ -0,0 +1,2 @@
+export { default } from './DaisyForm';
+export * from './DaisyForm';
diff --git a/packages/daisyui/src/index.ts b/packages/daisyui/src/index.ts
@@ -0,0 +1,30 @@
+import Form from '@rjsf/core';
+
+export { default as Form, generateForm } from './daisyForm/DaisyForm';
+export { __createDaisyUIFrameProvider } from './DaisyUIFrameProvider';
+export { default as ArrayFieldItemButtonsTemplate } from './templates/ArrayFieldItemButtonsTemplate';
+export { default as ArrayFieldItemTemplate } from './templates/ArrayFieldItemTemplate';
+export { default as BaseInputTemplate } from './templates/BaseInputTemplate/BaseInputTemplate';
+export * from './templates/ButtonTemplates';
+export { default as buttonTemplates } from './templates/ButtonTemplates';
+export { default as DescriptionField } from './templates/DescriptionField';
+export { default as ErrorList } from './templates/ErrorList';
+export { default as FieldErrorTemplate } from './templates/FieldErrorTemplate';
+export { default as FieldHelpTemplate } from './templates/FieldHelpTemplate';
+export { default as FieldTemplate } from './templates/FieldTemplate';
+export { default as ObjectFieldTemplate } from './templates/ObjectFieldTemplate';
+export { generateTemplates } from './templates/Templates';
+export { default as TitleField } from './templates/TitleField';
+export { default as WrapIfAdditionalTemplate } from './templates/WrapIfAdditionalTemplate';
+export { generateTheme, default as Theme } from './theme/Theme';
+export { default as CheckboxesWidget } from './widgets/CheckboxesWidget/CheckboxesWidget';
+export { default as CheckboxWidget } from './widgets/CheckboxWidget/CheckboxWidget';
+export { default as RadioWidget } from './widgets/RadioWidget/RadioWidget';
+export { default as RangeWidget } from './widgets/RangeWidget/RangeWidget';
+export { default as SelectWidget } from './widgets/SelectWidget/SelectWidget';
+export { default as TextAreaWidget } from './widgets/TextareaWidget/TextareaWidget';
+export { generateWidgets, default as Widgets } from './widgets/Widgets';
+
+export type { DaisyUiSchema as UiSchema } from './utils';
+
+export default Form;
diff --git a/packages/daisyui/src/styles.css b/packages/daisyui/src/styles.css
@@ -0,0 +1,9 @@
+@import "tailwindcss/preflight";
+@import "tailwindcss/utilities";
+
+@layer base {
+  :root {
+    --color-primary: 255 115 179;
+    --color-secondary: 111 114 185;
+  }
+} 
-} 
+} 
+
-} 
+} 
+
diff --git a/...ges/daisyui/src/templates/ArrayFieldDescriptionTemplate/ArrayFieldDescriptionTemplate.tsx b/...ges/daisyui/src/templates/ArrayFieldDescriptionTemplate/ArrayFieldDescriptionTemplate.tsx
@@ -0,0 +1,18 @@
+import { FormContextType, StrictRJSFSchema, RJSFSchema, ArrayFieldDescriptionProps } from '@rjsf/utils';
+
+const ArrayFieldDescriptionTemplate = <
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any
+>(
+  props: ArrayFieldDescriptionProps<T, S, F>
+) => {
+  const { description } = props;
+  return (
+    <div>
+      <p className='text-sm text-accent'>{description}</p>
+    </div>
+  );
+};
+
+export default ArrayFieldDescriptionTemplate;
diff --git a/packages/daisyui/src/templates/ArrayFieldDescriptionTemplate/index.ts b/packages/daisyui/src/templates/ArrayFieldDescriptionTemplate/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ArrayFieldDescriptionTemplate';
+export * from './ArrayFieldDescriptionTemplate';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './DaisyForm';
		export * from './DaisyForm';
heath-freenome marked this conversation as resolved. Show resolved Hide resolved
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './ArrayFieldDescriptionTemplate';
		export * from './ArrayFieldDescriptionTemplate';