@delightui/components 0.1.162-alpha.4 → 0.1.162

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

@@ -1,35 +1,65 @@
-import type { FormHTMLAttributes } from 'react';
-import type { FieldValues, UseFormProps } from 'react-hook-form';
-export type { FieldValue, FieldValidationFunction, AsyncFieldValidationFunction, } from '../../molecules/FormField/FormField.types';
+import React from 'react';
+import type { FormHTMLAttributes, Ref } from 'react';
 /**
- * Form submission handler
+ * Type representing the allowed values for form fields
  */
-export type FormSubmitHandler<TFormValues extends FieldValues = FieldValues> = (values: TFormValues) => void | Promise<void>;
+export type FieldValue = string | number | Date | boolean | File | Array<string | number | Date | File>;
 /**
- * @deprecated This type is deprecated and maintained for backwards compatibility only.
- * Use the new FormSubmitHandler signature without setError instead.
- *
- * 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 FieldValues.
- *
- * @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.
- *
+ * Type representing the form values as a partial record of field names to field values
  * @example
  * ```typescript
- * const handleFormSubmit: LegacyFormSubmitHandler = (values, setError) => {
- *   // Submit form data
- *   console.log(values);
+ * const formState: FormState = {
+ *   name: 'John Doe',
+ *   age: 30,
+ *   dob: new Date('1990-01-01')
  * };
  * ```
  */
-export type LegacyFormSubmitHandler<T extends FieldValues = FieldValues> = (values: T, setError: (field: keyof T, errorMessage: string) => void) => void | Promise<void>;
+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>>;
 /**
- * @deprecated This type is deprecated and maintained for backwards compatibility only.
- * Use React Hook Form's built-in validation or field-level validation instead.
- *
  * 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
@@ -42,11 +72,8 @@ export type LegacyFormSubmitHandler<T extends FieldValues = FieldValues> = (valu
  * };
  * ```
  */
-export type FormStateChangeHandler<T extends FieldValues = FieldValues> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => void;
+export type FormStateChangeHandler<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => void;
 /**
- * @deprecated This type is deprecated and maintained for backwards compatibility only.
- * Use React Hook Form's resolver or field-level validation instead.
- *
  * 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
@@ -65,45 +92,47 @@ export type FormStateChangeHandler<T extends FieldValues = FieldValues> = (state
  * };
  * ```
  */
-export type FormValidator<T extends FieldValues = FieldValues> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => boolean;
+export type FormValidator<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => boolean;
 /**
- * Form component props
+ * 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 FormProps<TFormValues extends FieldValues = FieldValues> = Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'ref'> & {
-    /** Initial form values (uncontrolled mode) */
-    defaultValues?: UseFormProps<TFormValues>['defaultValues'];
-    /** Form submission handler - receives typed form values (supports both new and legacy signatures) */
-    onSubmit?: FormSubmitHandler<TFormValues> | LegacyFormSubmitHandler<TFormValues>;
-    /** Enable autosave functionality */
+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;
     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'>;
-    /** Ref to the form element */
-    formRef?: React.Ref<HTMLFormElement>;
-    /**
-     * @deprecated Use defaultValues instead. This prop is maintained for backwards compatibility only.
-     * Alias for defaultValues - initial form values
-     */
-    formState?: UseFormProps<TFormValues>['defaultValues'];
-    /**
-     * @deprecated Use React Hook Form's useWatch hook or field-level validation instead.
-     * This prop is maintained for backwards compatibility only.
-     * Callback fired whenever form values change
-     */
-    onFormStateChange?: FormStateChangeHandler<TFormValues>;
-    /**
-     * @deprecated Use React Hook Form's resolver or field-level validation instead.
-     * This prop is maintained for backwards compatibility only.
-     * Custom validator function for the entire form
-     */
-    formValidator?: FormValidator<TFormValues>;
 };
-/**
- * @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/Form.utils.d.ts

@@ -0,0 +1,2 @@
+import { FieldValue, FormState } from "./Form.types";
+export declare const isEqualFormState: <T extends FieldValue>(state1: FormState<T>, state2: FormState<T>) => boolean;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { FormContextValues, FormProviderProps, FormState, FieldValue } from './Form.types';
+declare const FormContext: React.Context<FormContextValues<Partial<Record<string, FieldValue>>> | undefined>;
+export declare const FormProvider: <T extends FormState>(props: FormProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default FormContext;

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

@@ -0,0 +1,23 @@
+export type ProfileFormValues = {
+    name: string;
+    email: string;
+    address: string;
+    password: string;
+    termsAccepted: boolean;
+    gender: string;
+    interests: boolean;
+    skillLevel: number;
+    experienceRange: [number, number];
+    favoriteFramework: string[];
+    skills: string[];
+    birthdate: string | Date;
+    availableForWork: boolean;
+    wantsNewsletter: boolean;
+    promotionalEmails: boolean;
+    darkMode: boolean;
+    notifications: boolean;
+    preferredContactMethod: string;
+    acceptedGuidelines: boolean;
+};
+declare const ProfileForm: () => import("react/jsx-runtime").JSX.Element;
+export default ProfileForm;

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

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

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

@@ -0,0 +1,50 @@
+import type { FormContextValues, FormState } from './Form.types';
+/**
+ * Custom hook to access form context values.
+ * Provides direct access to all form state management functions and values.
+ *
+ * @throws {Error} If used outside of a Form component
+ * @returns {FormContextValues} Object containing form state and control functions
+ *
+ * @example
+ * ```tsx
+ * const MyCustomField = () => {
+ *   const {
+ *     formState,
+ *     formErrors,
+ *     updateFieldValue,
+ *     resetForm
+ *   } = useForm();
+ *
+ *   return (
+ *     <div>
+ *       <input
+ *         value={formState.myField || ''}
+ *         onChange={(e) => updateFieldValue('myField', e.target.value)}
+ *       />
+ *       {formErrors.myField && <span>{formErrors.myField}</span>}
+ *     </div>
+ *   );
+ * };
+ * ```
+ */
+export declare const useForm: <T extends FormState = Partial<Record<string, import("./Form.types").FieldValue>>>() => FormContextValues<T>;
+/**
+ * Type-safe version of useForm that returns properly typed form context
+ *
+ * @example
+ * ```tsx
+ * interface MyFormData {
+ *   name: string;
+ *   email: string;
+ *   age: number;
+ * }
+ *
+ * const MyComponent = () => {
+ *   const form = useFormTyped<MyFormData>();
+ *   // form.formState is now typed as MyFormData
+ *   // form.formErrors is now typed as FormErrors<MyFormData>
+ * };
+ * ```
+ */
+export declare const useFormTyped: <T extends FormState>() => FormContextValues<T>;