@chris-c-brine/form-dialog 1.3.1 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chris-c-brine/form-dialog",
-  "version": "1.3.1",
+  "version": "1.3.3",
   "description": "Easy MUI Form Dialogs with react-hook-form!",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,7 +10,8 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "rollup -c",
+    "clean": "node --eval \"require('fs').rmSync('./dist', {recursive: true, force: true})\"",
+    "build": "npm run clean && rollup -c",
     "prepare": "npm run build"
   },
   "keywords": [
@@ -40,6 +41,7 @@
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "prettier": "^3.9.6",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "react-hook-form": "^7.75.0",

package/dist/components/AutoGrid.d.ts

@@ -1,36 +0,0 @@
-import { type FC } from "react";
-import { AutoGridProps } from "../types";
-/**
- * A responsive grid component that automatically arranges children in equal columns
- *
- * AutoGrid simplifies the creation of grid layouts by automatically calculating
- * column sizes based on the provided `columnCount`. It's particularly useful
- * for form layouts where fields need to be arranged in a consistent grid pattern.
- *
- * @example
- * // Basic usage with 2 columns
- * <AutoGrid
- *   columnCount={2}
- *   components={[
- *     <TextFieldElement key="name" label="Name" />,
- *     <TextFieldElement key="email" label="Email" />
- *   ]}
- * />
- *
- * @example
- * // With spacing and custom props
- * <AutoGrid
- *   columnCount={3}
- *   rowSpacing={2}
- *   columnSpacing={3}
- *   components={[
- *     <TextFieldElement key="first" label="First Name" />,
- *     <TextFieldElement key="middle" label="Middle Name" />,
- *     <TextFieldElement key="last" label="Last Name" />
- *   ]}
- * />
- *
- * @note Be careful of transferring keys of children to the wrapper Grid.
- * If not done correctly, it will cause React to discard the old tree and remount children components.
- */
-export declare const AutoGrid: FC<AutoGridProps>;

package/dist/components/BaseDialog.d.ts

@@ -1,13 +0,0 @@
-import type { FC, ReactNode } from "react";
-import { type BlackoutDialogProps } from "./BlackoutDialog";
-import type { DialogContentProps, DialogTitleProps, DialogActionsProps } from "@mui/material";
-export type BaseDialogProps = Omit<BlackoutDialogProps, "children" | "title" | "content"> & {
-    title?: ReactNode;
-    titleProps?: DialogTitleProps;
-    children?: ReactNode;
-    contentProps?: DialogContentProps;
-    actions?: ReactNode;
-    actionsProps?: DialogActionsProps;
-    closeButton?: ReactNode;
-};
-export declare const BaseDialog: FC<BaseDialogProps>;

package/dist/components/BlackoutDialog.d.ts

@@ -1,23 +0,0 @@
-import { type DialogProps } from "@mui/material";
-import { type FC, type PropsWithChildren } from "react";
-export type BlackoutDialogProps = DialogProps & Partial<PropsWithChildren> & {
-    /**
-     * An optional unique string identifier
-     * @default 'blackout-dialog'
-     */
-    id?: string;
-    /**
-     * Whether the dialog is currently visible.
-     * @default false
-     */
-    open: boolean;
-    /**
-     * Whether to apply a black overlay behind the dialog.
-     * @default false
-     */
-    blackout?: boolean;
-};
-/**
- * A component for rendering a modal dialog with an optional blackout effect.
- */
-export declare const BlackoutDialog: FC<BlackoutDialogProps>;

package/dist/components/FormDialog.d.ts

@@ -1,11 +0,0 @@
-import { type BaseDialogProps } from "./BaseDialog";
-import { type FieldValues, type FormContainerProps } from "react-hook-form-mui";
-/**
- * Props for the FormDialog component. Inherits from BaseDialogProps and adds formProps.
- * @param formProps - Props for the FormContainer component from react-hook-form-mui.
- * @returns The FormDialog component.
- */
-export type FormDialogProps<T extends FieldValues> = Omit<BaseDialogProps, "PaperComponent"> & {
-    formProps: FormContainerProps<T>;
-};
-export declare const FormDialog: <T extends FieldValues>({ formProps, children, open, onClose, ...dialogProps }: FormDialogProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/FormDialogActions.d.ts

@@ -1,15 +0,0 @@
-import { GridProps } from "@mui/material";
-import type { FC, PropsWithChildren } from "react";
-import { type FormCancelButtonProps } from "./buttons/FormCancelButton";
-import { type FormResetButtonProps } from "./buttons/FormResetButton";
-import { FormSubmitButtonProps } from "./buttons/FormSubmitButton";
-export type FormDialogActionsProps = PropsWithChildren & {
-    cancelProps?: FormCancelButtonProps;
-    resetProps?: FormResetButtonProps;
-    submitProps?: FormSubmitButtonProps;
-    variant?: "icon" | "text" | "iconText";
-    removeCancelButton?: boolean;
-    removeResetButton?: boolean;
-    gridProps?: GridProps;
-};
-export declare const FormDialogActions: FC<FormDialogActionsProps>;

package/dist/components/PaperForm.d.ts

@@ -1,6 +0,0 @@
-import { type PaperProps } from "@mui/material";
-import { type FieldValues, type FormContainerProps } from "react-hook-form-mui";
-export type PaperFormProps<T extends FieldValues> = PaperProps & {
-    formProps: FormContainerProps<T>;
-};
-export declare const PaperForm: <T extends FieldValues>({ children, formProps, ...paperProps }: PaperFormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/PersistForm.d.ts

@@ -1,5 +0,0 @@
-import type { FC, PropsWithChildren } from "react";
-export interface PersistFormProps extends PropsWithChildren {
-    formName: string;
-}
-export declare const PersistForm: FC<PersistFormProps>;

package/dist/components/forms/PersistForm.d.ts

@@ -1,43 +0,0 @@
-import { PersistFormProps } from "../../types";
-/**
- * A component that enables form state persistence across sessions
- *
- * PersistForm is a lightweight wrapper that connects a form to persistent storage,
- * allowing form values to be preserved when navigating away and returning. It wraps
- * the usePersistedForm hook in a convenient component API.
- *
- * Key features:
- * - Persists form values during navigation or page reloads
- * - Automatically restores saved values when the form is rendered
- * - Only saves changed fields, not the entire form state
- * - Automatically clears storage when form values match defaults
- * - Works with any React Hook Form based forms
- *
- * Note: This component must be used inside a FormProvider from react-hook-form
- * and should be within a FormDialogProvider for full functionality.
- *
- * @example
- * // Basic usage
- * const MyForm = () => {
- *   const methods = useForm({ defaultValues: { name: '' } });
- *
- *   return (<FormProvider {...methods}>
- *     <PersistForm formName="user-profile">
- *       <TextFieldElement name="name" label="Name" />
- *       <FormSubmitButton>Save</FormSubmitButton>
- *     </PersistForm>
- *   </FormProvider>);
- * }
- *
- * @example
- * // Usage within a dialog
- * <FormDialog
- *   formProps={{ defaultValues: defaultValues }}
- *   title="Edit Profile"
- * >
- *   <PersistForm formName="edit-profile-dialog">
- *     <ProfileFormFields />
- *   </PersistForm>
- * </FormDialog>
- */
-export declare const PersistForm: import("react").NamedExoticComponent<PersistFormProps>;

package/dist/hooks/useMaxAttempts.d.ts

@@ -1,13 +0,0 @@
-import { UseMaxAttemptProps } from "../types";
-/**
- * Hook that monitors form submission attempts and disables the form when a limit is reached.
- *
- * It performs two main functions:
- * 1. Monitors `formState.submitCount` and calls `setDisabled(true)` from the dialog context
- *    once it reaches or exceeds the specified `maxAttempts`.
- * 2. When the dialog context enters a `disabled` state, it automatically resets form fields
- *    that have errors or are dirty to ensure a clean state for the user.
- *
- * @param props - UseMaxAttemptProps
- */
-export declare const useMaxAttempts: ({ maxAttempts }: UseMaxAttemptProps) => void;

package/dist/hooks/useOnMount.d.ts

@@ -1,6 +0,0 @@
-/**
- * Runs a provided callback function once on the first component mount.
- *
- * @param callback - The function to run on first mount.
- */
-export declare function useOnMount(callback: () => void): void;

package/dist/hooks/usePersistForm.d.ts

@@ -1,18 +0,0 @@
-import { FieldValues } from "react-hook-form-mui";
-import { PersistedFormProviderProps } from "../types";
-/**
- * Hook that enables form state persistence across sessions
- *
- * This hook connects a form to persistent storage (e.g., sessionStorage)
- * allowing form values to be preserved when navigating away and returning.
- * It works by watching form changes and syncing with a zustand store.
- *
- * Key features:
- * - Persists form values during navigation or page reloads
- * - Automatically restores saved values when form is rendered
- * - Debounced updates to avoid excessive storage operations
- * - Only saves changed fields, not the entire form state
- * - Automatically clears storage when form values match defaults
- *
- */
-export declare const usePersistForm: <T extends FieldValues>({ formName, formContext }: PersistedFormProviderProps<T>) => void;

package/dist/hooks/usePersistedForm.d.ts

@@ -1,41 +0,0 @@
-export interface PersistedFormProviderProps {
-    /**
-     * A unique key for the form
-     */
-    formName: string | undefined;
-}
-/**
- * Hook that enables form state persistence across sessions
- *
- * This hook connects a form to persistent storage (e.g., sessionStorage)
- * allowing form values to be preserved when navigating away and returning.
- * It works by watching form changes and syncing with a zustand store.
- *
- * Key features:
- * - Persists form values during navigation or page reloads
- * - Automatically restores saved values when form is rendered
- * - Debounced updates to avoid excessive storage operations
- * - Only saves changed fields, not the entire form state
- * - Automatically clears storage when form values match defaults
- *
- * @example
- * // In a form component:
- * const MyPersistedForm = () => {
- *   const formMethods = useForm({ defaultValues: { name: '' } });
- *   // Connect the form to persistence
- *   usePersistedForm({ formName: 'user-registration' });
- *
- *   return (<FormProvider {...formMethods}>
- *     <TextFieldElement name="name" label="Name" />
- *   </FormProvider>);
- * }
- *
- * @example
- * // For convenience, use with the PersistForm wrapper component:
- * <PersistForm formName="user-profile">
- *   <ProfileFormFields />
- * </PersistForm>
- *
- * @param props - Configuration options
- */
-export declare const usePersistedForm: ({ formName }: PersistedFormProviderProps) => void;

package/dist/state/createFormChangeStore.d.ts

@@ -1,20 +0,0 @@
-import type { FieldValues } from "react-hook-form";
-import { FormStore } from "../types";
-/**
- * Factory function to create a form store with a custom storage name.
- *
- * @param storeName - Unique name for sessionStorage/localStorage key.
- * @returns Zustand store with form data.
- */
-export declare const createFormChangeStore: (storeName: string) => import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormStore<FieldValues>>, "persist"> & {
-    persist: {
-        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<FormStore<FieldValues>, unknown>>) => void;
-        clearStorage: () => void;
-        rehydrate: () => Promise<void> | void;
-        hasHydrated: () => boolean;
-        onHydrate: (fn: (state: FormStore<FieldValues>) => void) => () => void;
-        onFinishHydration: (fn: (state: FormStore<FieldValues>) => void) => () => void;
-        getOptions: () => Partial<import("zustand/middleware").PersistOptions<FormStore<FieldValues>, unknown>>;
-    };
-}>;
-export default createFormChangeStore;

package/dist/utils/deepCompare.d.ts

@@ -1,16 +0,0 @@
-/**
- * Compares two objects for deep equality.
- *
- * This function uses lodash's `isEqualWith` function for deep comparison,
- * with additional logic for handling numbers and empty values.
- *
- * @param a The first object to compare.
- * @param b The second object to compare.
- * @param equalEmpty (default: false) Whether to consider empty values (null, undefined, empty arrays or objects) equal.
- * @returns True if the objects are deeply equal, false otherwise.
- */
-declare const deepCompare: {
-    <T>(a: T, b: T, equalEmpty?: boolean): boolean;
-    displayName: string;
-};
-export default deepCompare;

package/dist/utils/hasMaxAttempts.d.ts

@@ -1,5 +0,0 @@
-declare const hasMaxAttempts: {
-    (maxAttempts?: number): maxAttempts is number;
-    displayName: string;
-};
-export default hasMaxAttempts;

package/dist/utils/utils.types.d.ts

@@ -1,15 +0,0 @@
-/**
- * A utility type that simplifies complex nested types for better IDE display.
- * https://www.totaltypescript.com/concepts/the-prettify-helper
- *
- * WARNING: This utility strips TSDoc comments from the original type properties.
- * Always document the final exported type rather than properties within the type being prettified.
- *
- * @example
- * // Document the final type, not properties inside
- * /** Description of MyType *\/
- * export type MyType = Prettify<ComplexType>;
- */
-export type Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};