@rjsf/daisyui 6.0.0-beta.2

package/src/theme/Theme.tsx

@@ -0,0 +1,93 @@
+import { createContext, ReactNode, useCallback, useContext, useState } from 'react';
+import { getDefaultRegistry, ThemeProps } from '@rjsf/core';
+import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+
+import { generateTemplates } from '../templates/Templates';
+import { generateWidgets } from '../widgets/Widgets';
+
+/** Generates a complete theme configuration for RJSF with DaisyUI styling
+ *
+ * Combines templates and widgets with default fields to create a complete theme
+ * that can be used with react-jsonschema-form.
+ *
+ * @returns A ThemeProps object containing all necessary components for the theme
+ */
+export function generateTheme<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(): ThemeProps<T, S, F> {
+  const { fields } = getDefaultRegistry<T, S, F>();
+  const generatedWidgets = generateWidgets<T, S, F>();
+  const templates = generateTemplates<T, S, F>();
+
+  return {
+    templates,
+    widgets: {
+      ...generatedWidgets,
+      boolean: generatedWidgets.toggle,
+    },
+    fields,
+  };
+}
+
+/** Default theme export with pre-generated theme components */
+const Theme = generateTheme();
+
+export default Theme;
+
+/** Interface for the theme context that manages and provides the current DaisyUI theme */
+interface ThemeContextType {
+  /** Current DaisyUI theme name */
+  theme: string;
+  /** Function to update the current theme */
+  setTheme: (theme: string) => void;
+}
+
+/** React context for sharing theme information throughout the application */
+export const ThemeContext = createContext<ThemeContextType>({
+  theme: 'night',
+  setTheme: () => {},
+});
+
+/** Props for the ThemeProvider component */
+interface ThemeProviderProps {
+  /** React components to be wrapped by the provider */
+  children: ReactNode;
+}
+
+/** ThemeProvider component that manages DaisyUI theme state and persistence
+ *
+ * This provider:
+ * - Loads the theme from localStorage
+ * - Provides theme state via context
+ * - Persists theme changes to localStorage
+ *
+ * @param props - The props for the component
+ */
+export function ThemeProvider({ children }: ThemeProviderProps) {
+  const [theme, setTheme] = useState(() => {
+    try {
+      return localStorage.getItem('daisyui-theme') || 'cupcake';
+    } catch {
+      return 'cupcake';
+    }
+  });
+
+  const handleSetTheme = useCallback((newTheme: string) => {
+    try {
+      localStorage.setItem('daisyui-theme', newTheme);
+      setTheme(newTheme);
+    } catch {
+      // Ignore localStorage errors
+    }
+  }, []);
+
+  return <ThemeContext.Provider value={{ theme, setTheme: handleSetTheme }}>{children}</ThemeContext.Provider>;
+}
+
+/** Custom hook for accessing the current theme and theme setter function
+ *
+ * @returns The current theme context with theme name and setter function
+ */
+export const useTheme = () => useContext(ThemeContext);

package/src/theme/index.ts

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

package/src/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": [
+    "./"
+  ],
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "../lib",
+    "baseUrl": "../",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true
+  },
+  "references": [
+    {
+      "path": "../../core"
+    },
+    {
+      "path": "../../utils"
+    },
+    {
+      "path": "../../validator-ajv8"
+    }
+  ]
+}

package/src/types/DaisyProps.ts

@@ -0,0 +1,5 @@
+export interface DaisyProps {
+  theme?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}

package/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css?inline' {
+  const content: string;
+  export default content;
+}

package/src/utils.ts

@@ -0,0 +1,18 @@
+import { UiSchema } from '@rjsf/utils';
+
+import { DaisyProps } from './types/DaisyProps';
+
+export interface DaisyUiSchema extends Omit<UiSchema, 'ui:options'> {
+  'ui:options'?: DaisyUiOptions;
+}
+
+type DaisyUiOptions = UiSchema['ui:options'] & { daisy?: DaisyProps };
+
+interface GetDaisyProps {
+  uiSchema?: DaisyUiSchema;
+}
+
+export function getDaisy({ uiSchema = {} }: GetDaisyProps): DaisyProps {
+  const daisyProps = (uiSchema['ui:options'] && uiSchema['ui:options'].daisy) || {};
+  return daisyProps;
+}

package/src/widgets/AltDateTimeWidget/AltDateTimeWidget.tsx

@@ -0,0 +1,14 @@
+import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+
+/** The `AltDateTimeWidget` is an alternative widget for rendering datetime properties.
+ * It uses the AltDateWidget for rendering, with the `time` prop set to true by default.
+ */
+function AltDateTimeWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  time = true,
+  ...props
+}: WidgetProps<T, S, F>) {
+  const { AltDateWidget } = props.registry.widgets;
+  return <AltDateWidget time={time} {...props} />;
+}
+
+export default AltDateTimeWidget;

package/src/widgets/AltDateTimeWidget/index.ts

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

package/src/widgets/AltDateWidget/AltDateWidget.tsx

@@ -0,0 +1,328 @@
+import { MouseEvent, useCallback, useEffect, useReducer, useState } from 'react';
+import {
+  ariaDescribedByIds,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  WidgetProps,
+  TranslatableString,
+  parseDateString,
+  toDateString,
+  dateRangeOptions,
+  DateObject as RJSFDateObject,
+  Registry,
+} from '@rjsf/utils';
+
+/** Interface for date object with optional string fields for each date/time component */
+interface DateObject {
+  year?: string;
+  month?: string;
+  day?: string;
+  hour?: string;
+  minute?: string;
+  second?: string;
+}
+
+/** Determines if the date object has all required fields to form a valid date
+ *
+ * @param state - The date object to check
+ * @param time - Whether to check time fields as well
+ * @returns True if all required fields are present
+ */
+function readyForChange(state: DateObject, time = false) {
+  return state.year && state.month && state.day && (!time || (state.hour && state.minute && state.second));
+}
+
+/** Supported date element display formats */
+type DateElementFormat = 'YMD' | 'MDY' | 'DMY';
+
+/** Gets configuration for date elements based on format and ranges
+ *
+ * @param state - The current date object state
+ * @param time - Whether to include time elements
+ * @param yearsRange - Optional range of years to display
+ * @param format - Format for ordering date elements (year, month, day)
+ * @returns Array of element properties for rendering
+ */
+function getDateElementProps(
+  state: DateObject,
+  time: boolean,
+  yearsRange?: [number, number],
+  format: DateElementFormat = 'YMD',
+) {
+  const rangeOptions = yearsRange ?? [1900, new Date().getFullYear() + 2];
+  // Define the order based on the format
+  const formats: Record<DateElementFormat, Array<keyof DateObject>> = {
+    YMD: ['year', 'month', 'day'],
+    MDY: ['month', 'day', 'year'],
+    DMY: ['day', 'month', 'year'],
+  };
+
+  // Get the elements in the specified order
+  const dateElements = formats[format].map((key) => ({
+    type: key,
+    value: state[key],
+    range:
+      key === 'year'
+        ? (rangeOptions as [number, number])
+        : key === 'month'
+          ? ([1, 12] as [number, number])
+          : key === 'day'
+            ? ([1, 31] as [number, number])
+            : ([0, 59] as [number, number]),
+  }));
+
+  // Add time elements if needed
+  if (time) {
+    dateElements.push(
+      { type: 'hour', value: state.hour, range: [0, 23] as [number, number] },
+      { type: 'minute', value: state.minute, range: [0, 59] as [number, number] },
+      { type: 'second', value: state.second, range: [0, 59] as [number, number] },
+    );
+  }
+
+  return dateElements;
+}
+
+/** Props for the DateElement component */
+interface DateElementProps<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any> {
+  /** Type of date element (year, month, day, etc.) */
+  type: string;
+  /** Min/max range for the element values */
+  range: [number, number];
+  /** Current value */
+  value?: string;
+  /** Function to call when value is selected */
+  select: (property: keyof DateObject, value: any) => void;
+  /** Base ID for the form element */
+  rootId: string;
+  /** Name attribute for the form element */
+  name: string;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Whether the input is readonly */
+  readonly?: boolean;
+  /** Whether the input should autofocus */
+  autofocus?: boolean;
+  /** Registry containing widgets and templates */
+  registry: Registry<T, S, F>;
+  /** Function called when input loses focus */
+  onBlur: (id: string, value: string) => void;
+  /** Function called when input gains focus */
+  onFocus: (id: string, value: string) => void;
+}
+
+/** Component for rendering individual date/time elements (year, month, day, etc.)
+ *
+ * Renders a select input for each date component with appropriate options.
+ *
+ * @param props - The props for the component
+ */
+function DateElement<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
+  type,
+  range,
+  value,
+  select,
+  rootId,
+  name,
+  disabled,
+  readonly,
+  autofocus,
+  registry,
+  onBlur,
+  onFocus,
+}: DateElementProps<T, S, F>) {
+  const id = `${rootId}_${type}`;
+  const { SelectWidget } = registry.widgets as Registry<T, S, F>['widgets'];
+
+  // Memoize the onChange handler
+  const handleChange = useCallback(
+    (value: any) => {
+      select(type as keyof DateObject, value);
+    },
+    [select, type],
+  );
+
+  return (
+    <SelectWidget
+      schema={{ type: 'integer' } as S}
+      id={id}
+      name={name}
+      className='select select-bordered select-sm w-full'
+      options={{ enumOptions: dateRangeOptions<S>(range[0], range[1]) }}
+      placeholder={type}
+      value={value}
+      disabled={disabled}
+      readonly={readonly}
+      autofocus={autofocus}
+      onChange={handleChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      registry={registry}
+      label=''
+      aria-describedby={ariaDescribedByIds<T>(rootId)}
+      required={false}
+    />
+  );
+}
+
+/** Converts our DateObject to the expected format for toDateString
+ *
+ * @param dateObj - The internal DateObject
+ * @returns A properly formatted object for the utils toDateString function
+ */
+function convertToRJSFDateObject(dateObj: DateObject): RJSFDateObject {
+  return {
+    year: dateObj.year ? parseInt(dateObj.year) : 0,
+    month: dateObj.month ? parseInt(dateObj.month) : 0,
+    day: dateObj.day ? parseInt(dateObj.day) : 0,
+    hour: dateObj.hour ? parseInt(dateObj.hour) : 0,
+    minute: dateObj.minute ? parseInt(dateObj.minute) : 0,
+    second: dateObj.second ? parseInt(dateObj.second) : 0,
+  };
+}
+
+/** The `AltDateWidget` component provides an alternative date/time input
+ * with individual fields for year, month, day, and optionally time components.
+ *
+ * Features:
+ * - Supports different date formats (YMD, MDY, DMY)
+ * - Optional time selection (hours, minutes, seconds)
+ * - "Set to now" and "Clear" buttons
+ * - Configurable year ranges
+ * - Accessible controls with proper labeling
+ * - DaisyUI styling for all elements
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function AltDateWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>({
+  time = false,
+  disabled = false,
+  readonly = false,
+  autofocus = false,
+  options = {},
+  id,
+  name,
+  registry,
+  onBlur,
+  onFocus,
+  onChange,
+  value,
+}: WidgetProps<T, S, F>) {
+  const { translateString } = registry;
+  const [lastValue, setLastValue] = useState(value);
+
+  // Use a type-safe version of parseDateString result
+  const initialState = parseDateString(value, time) as unknown as DateObject;
+
+  // Create a reducer for date objects
+  const dateReducer = (state: DateObject, action: Partial<DateObject>): DateObject => {
+    return { ...state, ...action };
+  };
+
+  const [state, setState] = useReducer(dateReducer, initialState);
+
+  // Handle changes in props or state
+  useEffect(() => {
+    const rjsfDateObj = convertToRJSFDateObject(state);
+    const stateValue = toDateString(rjsfDateObj, time);
+    if (readyForChange(state, time) && stateValue !== value) {
+      // Valid date changed via the selects
+      onChange(stateValue);
+    } else if (lastValue !== value) {
+      // New value from props
+      setLastValue(value);
+      setState(parseDateString(value, time) as unknown as DateObject);
+    }
+  }, [time, value, onChange, state, lastValue]);
+
+  // Handle individual field changes
+  const handleChange = useCallback((property: keyof DateObject, value: string) => {
+    setState({ [property]: value });
+  }, []);
+
+  // Set current date
+  const handleSetNow = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      const nextState = parseDateString(new Date().toJSON(), time) as unknown as DateObject;
+      const rjsfDateObj = convertToRJSFDateObject(nextState);
+      onChange(toDateString(rjsfDateObj, time));
+    },
+    [disabled, readonly, time, onChange],
+  );
+
+  // Clear the date
+  const handleClear = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      if (disabled || readonly) {
+        return;
+      }
+      onChange(undefined);
+    },
+    [disabled, readonly, onChange],
+  );
+
+  return (
+    <div className='space-y-3'>
+      <div className='grid grid-cols-3 gap-2'>
+        {getDateElementProps(
+          state,
+          time,
+          options.yearsRange as [number, number] | undefined,
+          options.format as DateElementFormat | undefined,
+        ).map((elemProps, i) => (
+          <div key={i} className='form-control'>
+            <label className='label'>
+              <span className='label-text capitalize'>{elemProps.type}</span>
+            </label>
+            <DateElement
+              rootId={id}
+              name={name}
+              select={handleChange}
+              type={elemProps.type}
+              range={elemProps.range}
+              value={elemProps.value}
+              disabled={disabled}
+              readonly={readonly}
+              registry={registry}
+              onBlur={onBlur}
+              onFocus={onFocus}
+              autofocus={autofocus && i === 0}
+            />
+          </div>
+        ))}
+      </div>
+      <div className='flex justify-start space-x-2'>
+        {(options.hideNowButton !== undefined ? !options.hideNowButton : true) && (
+          <button
+            type='button'
+            className='btn btn-sm btn-primary'
+            onClick={handleSetNow}
+            disabled={disabled || readonly}
+          >
+            {translateString(TranslatableString.NowLabel)}
+          </button>
+        )}
+        {(options.hideClearButton !== undefined ? !options.hideClearButton : true) && (
+          <button
+            type='button'
+            className='btn btn-sm btn-secondary'
+            onClick={handleClear}
+            disabled={disabled || readonly}
+          >
+            {translateString(TranslatableString.ClearLabel)}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/widgets/AltDateWidget/index.ts

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

package/src/widgets/CheckboxWidget/CheckboxWidget.tsx

@@ -0,0 +1,108 @@
+import { useCallback } from 'react';
+import { WidgetProps, StrictRJSFSchema, RJSFSchema, FormContextType, getTemplate, descriptionId } from '@rjsf/utils';
+
+/** The `CheckboxWidget` component renders a single checkbox input with DaisyUI styling.
+ *
+ * Features:
+ * - Simple boolean input with DaisyUI checkbox styling
+ * - Handles required, disabled, and readonly states
+ * - No label rendering (handled by the parent FieldTemplate)
+ * - Proper onChange handling for boolean values
+ * - Manages focus and blur events for accessibility
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+export default function CheckboxWidget<
+  T = any,
+  S extends StrictRJSFSchema = RJSFSchema,
+  F extends FormContextType = any,
+>(props: WidgetProps<T, S, F>) {
+  const {
+    id,
+    value,
+    required,
+    disabled,
+    hideLabel,
+    label,
+    readonly,
+    registry,
+    options,
+    schema,
+    uiSchema,
+    onChange,
+    onFocus,
+    onBlur,
+  } = props;
+  const DescriptionFieldTemplate = getTemplate<'DescriptionFieldTemplate', T, S, F>(
+    'DescriptionFieldTemplate',
+    registry,
+    options,
+  );
+  const description = options.description || schema.description;
+
+  /** Handle focus events
+   */
+  const handleFocus = useCallback(() => {
+    if (onFocus) {
+      onFocus(id, value);
+    }
+  }, [onFocus, id, value]);
+
+  /** Handle blur events
+   */
+  const handleBlur = useCallback(() => {
+    if (onBlur) {
+      onBlur(id, value);
+    }
+  }, [onBlur, id, value]);
+
+  /** Handle change events
+   *
+   * @param event - The change event
+   */
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      onChange(event.target.checked);
+    },
+    [onChange],
+  );
+
+  const input = (
+    <input
+      type='checkbox'
+      id={id}
+      checked={value}
+      required={required}
+      disabled={disabled || readonly}
+      onChange={handleChange}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+      className='checkbox'
+    />
+  );
+
+  return (
+    <div className='form-control'>
+      {!hideLabel && description && (
+        <DescriptionFieldTemplate
+          id={descriptionId<T>(id)}
+          description={description}
+          schema={schema}
+          uiSchema={uiSchema}
+          registry={registry}
+        />
+      )}
+      {hideLabel || !label ? (
+        input
+      ) : (
+        <label className='label cursor-pointer justify-start'>
+          <div className='mr-2'>{input}</div>
+          <span className='label-text'>
+            {label}
+            {required && <span className='text-error ml-1'>*</span>}
+          </span>
+        </label>
+      )}
+    </div>
+  );
+}

package/src/widgets/CheckboxWidget/index.ts

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