@rjsf/daisyui 6.0.0-beta.10

package/src/templates/ButtonTemplates/IconButton.tsx

@@ -0,0 +1,62 @@
+import { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import { faCopy, faArrowDown, faArrowUp, faTrash } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+import DaisyUIButton from './DaisyUIButton';
+
+export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <DaisyUIButton {...props} title={translateString(TranslatableString.CopyButton)} icon={faCopy as IconDefinition} />
+  );
+}
+
+export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <DaisyUIButton
+      {...props}
+      title={translateString(TranslatableString.MoveDownButton)}
+      icon={faArrowDown as IconDefinition}
+    />
+  );
+}
+
+export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <DaisyUIButton
+      {...props}
+      title={translateString(TranslatableString.MoveUpButton)}
+      icon={faArrowUp as IconDefinition}
+    />
+  );
+}
+
+export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>,
+) {
+  const {
+    registry: { translateString },
+  } = props;
+  return (
+    <DaisyUIButton
+      {...props}
+      title={translateString(TranslatableString.RemoveButton)}
+      iconType='danger'
+      icon={faTrash as IconDefinition}
+    />
+  );
+}

package/src/templates/ButtonTemplates/SubmitButton.tsx

@@ -0,0 +1,25 @@
+import { getSubmitButtonOptions, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
+export default function SubmitButton<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({ uiSchema }: SubmitButtonProps<T, S, F>) {
+  const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions<T, S, F>(uiSchema);
+  if (norender) {
+    return null;
+  }
+  return (
+    <div>
+      <button
+        type='submit'
+        {...submitButtonProps}
+        className={`btn btn-primary btn-primary-content ${submitButtonProps.className || ''}`}
+      >
+        {submitText}
+      </button>
+    </div>
+  );
+}

package/src/templates/ButtonTemplates/index.ts

@@ -0,0 +1,19 @@
+import AddButton from './AddButton';
+import SubmitButton from './SubmitButton';
+import { CopyButton, MoveDownButton, MoveUpButton, RemoveButton } from './IconButton';
+
+export { AddButton };
+export { CopyButton, MoveDownButton, MoveUpButton, RemoveButton };
+export { SubmitButton };
+
+// Create a default export with all button templates
+const buttonTemplates = {
+  AddButton,
+  CopyButton,
+  MoveDownButton,
+  MoveUpButton,
+  RemoveButton,
+  SubmitButton,
+};
+
+export default buttonTemplates;

package/src/templates/DescriptionField/DescriptionField.tsx

@@ -0,0 +1,26 @@
+import { DescriptionFieldProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+import { RichDescription } from '@rjsf/core';
+
+/** The `DescriptionField` component renders descriptive text for a form field
+ * with DaisyUI styling. It displays the description in a subtle text color
+ * with proper spacing.
+ *
+ * @param props - The `DescriptionFieldProps` for the component
+ */
+export default function DescriptionField<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: DescriptionFieldProps<T, S, F>) {
+  const { id, description, registry, uiSchema } = props;
+  if (!description) {
+    return null;
+  }
+  return (
+    <div id={id} className='description-field my-4'>
+      <div className='text-sm text-base-content/80'>
+        <RichDescription description={description} registry={registry} uiSchema={uiSchema} />
+      </div>
+    </div>
+  );
+}

package/src/templates/DescriptionField/index.ts

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

package/src/templates/ErrorList/ErrorList.tsx

@@ -0,0 +1,21 @@
+import { ErrorListProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+
+/** The `ErrorList` component renders a list of form-level validation errors
+ * with DaisyUI styling. It displays errors as a bulleted list in red text.
+ *
+ * @param props - The `ErrorListProps` for the component
+ */
+export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: ErrorListProps<T, S, F>,
+) {
+  const { errors } = props;
+  return (
+    <div className='error-list'>
+      <ul className='list-disc list-inside text-red-600'>
+        {errors.map((error, index) => (
+          <li key={index}>{error.stack}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/src/templates/ErrorList/index.ts

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

package/src/templates/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -0,0 +1,22 @@
+import { FieldErrorProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+
+/** The `FieldErrorTemplate` component renders validation errors for a specific field
+ * with DaisyUI styling. It displays field-level errors as a bulleted list in red text.
+ *
+ * Unlike ErrorList which shows form-level errors, this component displays errors
+ * specific to a particular field in the form.
+ *
+ * @param props - The `FieldErrorProps` for the component
+ */
+export default function FieldErrorTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldErrorProps<T, S, F>) {
+  const { errors } = props;
+  return (
+    <div className='rjsf-field-error-template text-red-600'>
+      <ul className='list-disc list-inside'>{errors?.map((error, index) => <li key={index}>{error}</li>) ?? []}</ul>
+    </div>
+  );
+}

package/src/templates/FieldErrorTemplate/index.ts

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

package/src/templates/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -0,0 +1,23 @@
+import { FieldHelpProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+
+/** The `FieldHelpTemplate` component renders help text for a specific form field
+ * with DaisyUI styling. It displays the help text in a subtle gray color and smaller size
+ * to distinguish it from the main field content.
+ *
+ * Help text provides additional guidance to users about how to complete a field
+ * or explains the expected input format.
+ *
+ * @param props - The `FieldHelpProps` for the component
+ */
+export default function FieldHelpTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldHelpProps<T, S, F>) {
+  const { help } = props;
+  return (
+    <div className='rjsf-field-help-template text-gray-500 text-sm'>
+      <div>{help}</div>
+    </div>
+  );
+}

package/src/templates/FieldHelpTemplate/index.ts

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

package/src/templates/FieldTemplate/FieldTemplate.tsx

@@ -0,0 +1,66 @@
+import { FieldTemplateProps, StrictRJSFSchema, RJSFSchema, FormContextType } from '@rjsf/utils';
+
+/** The `FieldTemplate` component provides the main layout for each form field
+ * with DaisyUI styling. It handles:
+ *
+ * - Displaying field labels with required indicators
+ * - Special layout for checkbox fields (label positioned after the input)
+ * - Proper spacing between form fields
+ * - Rendering error messages and help text
+ * - Maintaining accessibility with proper label associations
+ *
+ * This template uses DaisyUI's label and form-control components for consistent styling.
+ *
+ * @param props - The `FieldTemplateProps` for the component
+ */
+export default function FieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: FieldTemplateProps<T, S, F>) {
+  const {
+    id,
+    label,
+    children,
+    errors,
+    formContext,
+    formData,
+    help,
+    hideError,
+    displayLabel,
+    classNames,
+    // Destructure props we don't want to pass to div
+    onKeyChange,
+    onDropPropertyClick,
+    uiSchema,
+    schema,
+    readonly,
+    required,
+    rawErrors,
+    rawHelp,
+    rawDescription,
+    hidden,
+    onChange,
+    registry,
+    ...divProps
+  } = props;
+
+  // Special handling for checkboxes - they should have the label after the input
+  const isCheckbox = schema.type === 'boolean';
+
+  return (
+    <div className={`field-template mb-3 ${classNames || ''}`} {...divProps}>
+      {displayLabel && !isCheckbox && (
+        <label htmlFor={id} className='label'>
+          <span className='label-text font-medium'>
+            {label}
+            {required && <span className='text-error ml-1'>*</span>}
+          </span>
+        </label>
+      )}
+      {children}
+      {errors}
+      {help}
+    </div>
+  );
+}

package/src/templates/FieldTemplate/index.ts

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

package/src/templates/GridTemplate/GridTemplate.tsx

@@ -0,0 +1,26 @@
+import { GridTemplateProps } from '@rjsf/utils';
+
+/** Renders a `GridTemplate` for DaisyUI, which follows the same pattern as other RJSF themes.
+ * This uses DaisyUI's grid system with flexbox for responsive layouts.
+ *
+ * @param props - The GridTemplateProps, including children and column flag
+ */
+export default function GridTemplate(props: GridTemplateProps) {
+  const { children, column, ...rest } = props;
+
+  if (column) {
+    // For columns, use DaisyUI's flex classes
+    return (
+      <div className='flex-grow' {...rest}>
+        {children}
+      </div>
+    );
+  }
+
+  // For rows, use DaisyUI's flex container with wrap
+  return (
+    <div className='flex flex-wrap gap-4' {...rest}>
+      {children}
+    </div>
+  );
+}

package/src/templates/GridTemplate/index.ts

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

package/src/templates/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -0,0 +1,108 @@
+import {
+  canExpand,
+  descriptionId,
+  FormContextType,
+  getTemplate,
+  getUiOptions,
+  ObjectFieldTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  titleId,
+  buttonId,
+} from '@rjsf/utils';
+
+/** The `ObjectFieldTemplate` component renders a layout for object fields in the form
+ * with DaisyUI styling. It handles:
+ *
+ * - Special styling for the root object with extra padding and shadows
+ * - Rendering of title and description using appropriate templates
+ * - Grid layout for object properties with consistent spacing
+ * - Conditionally rendering an add button for expandable objects
+ * - Support for hidden properties
+ *
+ * @param props - The `ObjectFieldTemplateProps` for the component
+ */
+export default function ObjectFieldTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: ObjectFieldTemplateProps<T, S, F>) {
+  const {
+    description,
+    title,
+    properties,
+    required,
+    disabled,
+    readonly,
+    uiSchema,
+    idSchema,
+    schema,
+    formData,
+    onAddClick,
+    registry,
+  } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const TitleFieldTemplate = getTemplate<'TitleFieldTemplate', T, S, F>('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    uiOptions,
+  );
+  // Button templates are not overridden in the uiSchema
+  const {
+    ButtonTemplates: { AddButton },
+  } = registry.templates;
+
+  // Check if this is the root object
+  const isRoot = idSchema.$id === 'root';
+
+  return (
+    <div className={`form-control ${isRoot ? 'bg-base-100 p-6 rounded-xl shadow-lg' : ''}`}>
+      {title && (
+        <TitleFieldTemplate
+          id={titleId<T>(idSchema)}
+          title={title}
+          required={required}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(idSchema)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      <div className={`grid grid-cols-1 gap-${description ? 3 : 4} ${isRoot ? '' : 'mb-4'}`}>
+        {properties.map((element, index) =>
+          element.hidden ? (
+            element.content
+          ) : (
+            <div
+              key={`${idSchema.$id}-${element.name}-${index}`}
+              className={idSchema.$id === 'root' && element.name === 'tasks' ? 'mt-2' : ''}
+            >
+              {element.content}
+            </div>
+          ),
+        )}
+        {canExpand<T, S, F>(schema, uiSchema, formData) && (
+          <div className='flex justify-end'>
+            <AddButton
+              id={buttonId<T>(idSchema, 'add')}
+              className='rjsf-object-property-expand btn btn-primary btn-sm'
+              onClick={onAddClick(schema)}
+              disabled={disabled || readonly}
+              uiSchema={uiSchema}
+              registry={registry}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/templates/ObjectFieldTemplate/index.ts

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

package/src/templates/Templates.tsx

@@ -0,0 +1,63 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+
+import ArrayFieldItemButtonsTemplate from './ArrayFieldItemButtonsTemplate';
+import ArrayFieldItemTemplate from './ArrayFieldItemTemplate';
+import ArrayFieldTemplate from './ArrayFieldTemplate/ArrayFieldTemplate';
+import BaseInputTemplate from './BaseInputTemplate/BaseInputTemplate';
+import { AddButton, CopyButton, MoveDownButton, MoveUpButton, RemoveButton, SubmitButton } from './ButtonTemplates';
+import DescriptionField from './DescriptionField';
+import ErrorList from './ErrorList';
+import FieldErrorTemplate from './FieldErrorTemplate';
+import FieldHelpTemplate from './FieldHelpTemplate';
+import FieldTemplate from './FieldTemplate';
+import GridTemplate from './GridTemplate/GridTemplate';
+import ObjectFieldTemplate from './ObjectFieldTemplate';
+import TitleFieldTemplate from './TitleField/TitleField';
+import WrapIfAdditionalTemplate from './WrapIfAdditionalTemplate';
+
+/** Function that generates all the template components required for the DaisyUI theme.
+ *
+ * This provides a complete set of styled components that implement the DaisyUI design system
+ * for use with react-jsonschema-form.
+ *
+ * The templates include:
+ * - Array field templates (for rendering array items and controls)
+ * - Button templates (for add, submit, copy, move, remove actions)
+ * - Input templates (for rendering form controls)
+ * - Layout templates (for fields, objects, additional properties)
+ * - Helper templates (for titles, descriptions, errors, help text)
+ *
+ * @returns A partial `TemplatesType` object with all required template components
+ */
+export function generateTemplates<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(): Partial<TemplatesType<T, S, F>> {
+  return {
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    ArrayFieldItemButtonsTemplate,
+    BaseInputTemplate,
+    ButtonTemplates: {
+      AddButton,
+      SubmitButton,
+      CopyButton,
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton,
+    },
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    FieldTemplate,
+    GridTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate,
+    WrapIfAdditionalTemplate,
+  };
+}
+
+/** Default export of all generated templates for the DaisyUI theme */
+export default generateTemplates();

package/src/templates/TitleField/TitleField.tsx

@@ -0,0 +1,26 @@
+import { TitleFieldProps, StrictRJSFSchema, RJSFSchema, FormContextType, getUiOptions } from '@rjsf/utils';
+
+/** The `TitleField` component renders the title for a form section or field
+ * with DaisyUI styling. It displays:
+ *
+ * - Large heading with primary color
+ * - Divider element below the title for visual separation
+ * - Support for title override from UI options
+ *
+ * This component is typically used at the top of form sections to provide clear visual hierarchy.
+ *
+ * @param props - The `TitleFieldProps` for the component
+ */
+export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: TitleFieldProps<T, S, F>,
+) {
+  const { id, title, uiSchema } = props;
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+
+  return (
+    <div id={id} className='title-field mb-6'>
+      <h2 className='text-3xl font-bold text-primary mb-2'>{uiOptions.title || title}</h2>
+      <div className='divider divider-primary'></div>
+    </div>
+  );
+}

package/src/templates/TitleField/index.ts

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

package/src/templates/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -0,0 +1,74 @@
+import { useCallback } from 'react';
+import {
+  WrapIfAdditionalTemplateProps,
+  StrictRJSFSchema,
+  RJSFSchema,
+  FormContextType,
+  TranslatableString,
+  buttonId,
+} from '@rjsf/utils';
+
+/** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+ * part of an `additionalProperties` part of a schema.
+ *
+ * @param props - The `WrapIfAdditionalProps` for this component
+ */
+export default function WrapIfAdditionalTemplate<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WrapIfAdditionalTemplateProps<T, S, F>) {
+  const {
+    children,
+    classNames,
+    disabled,
+    id,
+    label,
+    readonly,
+    required,
+    schema,
+    onKeyChange,
+    onDropPropertyClick,
+    registry,
+    ...rest
+  } = props;
+
+  const { translateString } = registry;
+
+  const handleBlur = useCallback(
+    (event: React.FocusEvent<HTMLInputElement>) => {
+      onKeyChange(event.target.value);
+    },
+    [onKeyChange],
+  );
+
+  const handleRemove = useCallback(() => {
+    onDropPropertyClick(label)();
+  }, [onDropPropertyClick, label]);
+
+  return (
+    <div className={`wrap-if-additional-template ${classNames}`} {...rest}>
+      <div className='flex items-center'>
+        <input
+          type='text'
+          className='input input-bordered'
+          id={`${id}-key`}
+          onBlur={handleBlur}
+          defaultValue={label}
+          disabled={disabled || readonly}
+        />
+        {schema.additionalProperties && (
+          <button
+            id={buttonId<T>(id, 'remove')}
+            className='rjsf-array-item-remove btn btn-danger ml-2'
+            onClick={handleRemove}
+            disabled={disabled || readonly}
+          >
+            {translateString(TranslatableString.RemoveButton)}
+          </button>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}

package/src/templates/WrapIfAdditionalTemplate/index.ts

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

package/src/templates/index.ts

@@ -0,0 +1,22 @@
+export * from './ArrayFieldDescriptionTemplate';
+export { default as ArrayFieldItemTemplate } from './ArrayFieldItemTemplate';
+export { default as ArrayFieldTemplate } from './ArrayFieldTemplate';
+export * from './ArrayFieldTitleTemplate';
+export { default as ArrayFieldItemButtonsTemplate } from './ArrayFieldItemButtonsTemplate';
+export { default as BaseInputTemplate } from './BaseInputTemplate';
+export * from './ButtonTemplates';
+export { default as DescriptionField } from './DescriptionField';
+export { default as ErrorList } from './ErrorList';
+export { default as FieldErrorTemplate } from './FieldErrorTemplate';
+export { default as FieldHelpTemplate } from './FieldHelpTemplate';
+export { default as FieldTemplate } from './FieldTemplate';
+export { default as GridTemplate } from './GridTemplate';
+export { default as ObjectFieldTemplate } from './ObjectFieldTemplate';
+export { default as TitleField } from './TitleField';
+export { default as WrapIfAdditionalTemplate } from './WrapIfAdditionalTemplate';
+
+export * from './Templates';
+
+export { generateTemplates } from './Templates';
+
+export { default as buttonTemplates } from './ButtonTemplates';