@delightui/components 0.1.161 → 0.1.162-alpha.0

package/dist/esm/components/organisms/Form/Form.types.d.ts

@@ -1,138 +1,34 @@
-import React from 'react';
-import type { FormHTMLAttributes, Ref } from 'react';
+import type { ReactNode } from 'react';
+import type { FieldValues, UseFormProps } from 'react-hook-form';
+export type { FieldValue, FieldValidationFunction, AsyncFieldValidationFunction, } from '../../molecules/FormField/FormField.types';
 /**
- * Type representing the allowed values for form fields
+ * Form submission handler
  */
-export type FieldValue = string | number | Date | boolean | File | Array<string | number | Date | File>;
+export type FormSubmitHandler<TFormValues extends FieldValues = FieldValues> = (values: TFormValues) => void | Promise<void>;
 /**
- * Type representing the form values as a partial record of field names to field values
- * @example
- * ```typescript
- * const formState: FormState = {
- *   name: 'John Doe',
- *   age: 30,
- *   dob: new Date('1990-01-01')
- * };
- * ```
+ * Form component props
  */
-export type FormState<T extends FieldValue = FieldValue> = Partial<Record<string, T>>;
-/**
- * Type representing the form errors as a partial record of field names to error messages
- */
-export type FormErrors<T extends FormState = FormState> = Partial<Record<keyof T, string>>;
-/**
- * Type representing a validation function for a form field
- * It takes an error setter function and the field value (optional) and returns a boolean indicating if the value is valid
- * @example
- * ```typescript
- * const nameValidator: FieldValidationFunction = (setError, value) => {
- *   if (!value) {
- *     setError('Name is required');
- *     return false;
- *   }
- *   return true;
- * };
- * ```
- */
-export type FieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => boolean;
-/**
- * Type representing the required fields in a form
- * It's a partial record of field names to a boolean indicating if the field is required
- */
-export type RequiredFields<T extends FormState = FormState> = Partial<Record<keyof T, boolean>>;
-/**
- * Type representing the validation functions for each field in a form
- * It's a partial record of field names to validation functions (or undefined)
- * @example
- * ```typescript
- * const nameValidator: FieldValidationFunction = (setError, value) => {
- *   if (!value) {
- *     setError('Name is required');
- *     return false;
- *   }
- *   return true;
- * };
- * const fieldValidators: FieldValidators = {
- *   name: nameValidator,
- *   age: undefined,
- * };
- * ```
- */
-export type FieldValidators<T extends FormState = FormState> = Partial<Record<keyof T, FieldValidationFunction | undefined>>;
-/**
- * Type representing a function that handles form state changes
- * It takes the new form state and an error setter function and doesn't return anything
- * @example
- * ```typescript
- * const handleFormStateChange: FormStateChangeHandler = (state, setError) => {
- *   // Validate form state and set errors
- *   if (!state.name) {
- *     setError('name', 'Name is required');
- *   }
- * };
- * ```
- */
-export type FormStateChangeHandler<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => void;
-/**
- * Type representing a function that validates the entire form
- * It takes the form values and an error setter function and returns a boolean indicating if the form is valid
- * @example
- * ```typescript
- * const validateForm: FormValidator = (state, setError) => {
- *   let isValid = true;
- *   if (!state.name) {
- *     setError('name', 'Name is required');
- *     isValid = false;
- *   }
- *   if (!state.age || typeof state.age !== 'number') {
- *     setError('age', 'Age must be a number');
- *     isValid = false;
- *   }
- *   return isValid;
- * };
- * ```
- */
-export type FormValidator<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => boolean;
-/**
- * Type representing a function that handles form submission.
- * It takes updated form state and a function to set error messages for specific fields.
- *
- * @template T - The type of the form state, defaulting to `FormState`.
- *
- * @param {T} values - The updated form state values.
- * @param {(field: keyof T, errorMessage: string) => void} setError - A function to set error messages for specific fields.
- *
- * @example
- * ```typescript
- * const handleFormSubmit: FormSubmitHandler = (values, setError) => {
- *   // Submit form data
- *   console.log(values);
- * };
- * ```
- */
-export type FormSubmitHandler<T extends FormState = FormState> = (values: T, setError: (field: keyof T, errorMessage: string) => void) => void;
-export type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> & {
-    formRef?: Ref<HTMLFormElement>;
-};
-export type FormContextValues<T extends FormState = FormState> = {
-    formRef?: Ref<HTMLFormElement>;
-    formState?: T;
-    updateFieldValue: (name: string, value: FieldValue) => void;
-    formErrors: FormErrors<T>;
-    updateFieldError: (name: keyof T, errorMessage: string) => void;
-    onFormSubmit: React.FormEventHandler<HTMLFormElement>;
-    updateFieldValidators: (name: keyof T, validate?: FieldValidationFunction) => void;
-    updateRequiredFields: (name: keyof T, required?: boolean) => void;
-    resetForm: () => void;
-};
-export type FormProviderProps<T extends FormState = FormState> = {
-    formRef?: Ref<HTMLFormElement>;
-    children?: React.ReactNode;
-    formState?: T;
-    onFormStateChange?: FormStateChangeHandler<T>;
-    formValidator?: FormValidator<T>;
-    onSubmit?: FormSubmitHandler<T>;
-    validateOnChange?: boolean;
+export type FormProps<TFormValues extends FieldValues = FieldValues> = {
+    children: ReactNode;
+    /** Initial form values (uncontrolled mode) */
+    defaultValues?: UseFormProps<TFormValues>['defaultValues'];
+    /** Form submission handler */
+    onSubmit?: FormSubmitHandler<TFormValues>;
+    /** Enable autosave functionality */
     autosave?: boolean;
+    /** Autosave debounce delay in milliseconds */
     autosaveDelayMs?: number;
+    /** RHF validation mode */
+    mode?: UseFormProps<TFormValues>['mode'];
+    /** Additional RHF options */
+    formOptions?: Omit<UseFormProps<TFormValues>, 'defaultValues' | 'mode'>;
+    /** Form HTML attributes */
+    className?: string;
+    style?: React.CSSProperties;
+    formRef?: React.Ref<HTMLFormElement>;
 };
+/**
+ * @deprecated Use FormProps instead
+ * Legacy alias for backwards compatibility
+ */
+export type FormProviderProps<TFormValues extends FieldValues = FieldValues> = Omit<FormProps<TFormValues>, 'className' | 'style' | 'formRef'>;

package/dist/esm/components/organisms/Form/examples/DropzoneFormExample.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Placeholder for DropzoneFormExample
+ * This example needs to be updated to work with the new Form implementation
+ */
+declare const DropzoneFormExample: () => import("react/jsx-runtime").JSX.Element;
+export default DropzoneFormExample;

package/dist/esm/components/organisms/Form/examples/UpdatedFormExample.d.ts

@@ -0,0 +1,2 @@
+declare const UpdatedFormExample: () => import("react/jsx-runtime").JSX.Element;
+export default UpdatedFormExample;

package/dist/esm/components/organisms/Form/{UseFormExample.d.ts → examples/UseFormExample.d.ts}

@@ -1,5 +1,2 @@
-/**
- * Main example demonstrating the useForm hook
- */
 declare const UseFormExample: () => import("react/jsx-runtime").JSX.Element;
 export default UseFormExample;

package/dist/esm/components/organisms/Form/index.d.ts

@@ -1,5 +1,5 @@
-import type { FormProps, FormProviderProps, FormState } from './Form.types';
-declare const Form: <T extends FormState>(props: FormProviderProps<T> & FormProps) => import("react/jsx-runtime").JSX.Element;
+import Form from './Form';
 export default Form;
-export * from './Form.types';
-export { useForm, useFormTyped } from './useForm';
+export type { FormProps, FormSubmitHandler, FormProviderProps, } from './Form.types';
+export type { FieldValue } from './Form.types';
+export { useAutosave } from './useAutosave';

package/dist/esm/components/organisms/Form/useAutosave.d.ts

@@ -0,0 +1,10 @@
+import { type FieldValues } from 'react-hook-form';
+import type { FormSubmitHandler } from './Form.types';
+/**
+ * Hook to enable autosave functionality for forms
+ * Debounces changes and validates before submitting
+ *
+ * Note: Uses formState.isDirty to detect changes instead of watching all values
+ * for better performance
+ */
+export declare const useAutosave: <TFormValues extends FieldValues>(enabled: boolean, onSubmit: FormSubmitHandler<TFormValues> | undefined, delayMs?: number) => void;