@chris-c-brine/form-dialog 1.0.5 → 1.1.0

package/README.md

@@ -40,36 +40,82 @@ This package has the following peer dependencies that need to be installed in yo
 
 ## Login Form Usage Example
 
+```tsx
+// LoginPage.tsx
+import { type FC } from "react";
+import { Container, IconButton } from "@mui/material";
+import { useDialog } from "@chris-c-brine/form-dialog";
+import LoginForm from "./components/forms/LoginForm";
+import { Lock as LockIcon } from "@mui/icons-material";
+import { LoginDialog } from "./LoginDialog";
+
+const LoginPage: FC = () => {
+  const { dialogProps, openDialog } = useDialog();
+
+  return (
+    <Container
+      component="main"
+      maxWidth={"xs"}
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "85vh",
+        overflow: "hidden",
+        animation: "fadeIn 1s ease-in-out",
+        "@keyframes fadeIn": {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+      }}
+    >
+      <LoginForm>
+        <IconButton color="primary" onClick={openDialog} sx={{ py: 1 }}>
+          <LockIcon sx={{ fontSize: 50 }} />
+        </IconButton>
+      </LoginForm>
+      <LoginDialog dialogProps={dialogProps} />
+    </Container>
+  );
+};
+
+export default LoginPage;
+```
+```tsx
+// LoginPageConstants.ts
+import type { SubmitHandler } from "react-hook-form";
+
+export const defaultLoginFormValues = { username: "", password: "" };
+export type LoginFormValues = typeof defaultLoginFormValues;
+```
 ```tsx
 // LoginFormBase.tsx
-import {
-    TextFieldElement,
-    PasswordElement,
-    type PasswordElementProps,
-    useFormContext,
-} from "react-hook-form-mui";
+import { TextFieldElement, PasswordElement, type PasswordElementProps, useFormContext} from "react-hook-form-mui";
 import { memo, useEffect } from "react";
-import { useFormDialog,  AutoGrid, type AutoGridProps } from "@chris-c-brine/form-dialog";
+import { useFormDialog, AutoGrid, type AutoGridProps } from "@chris-c-brine/form-dialog";
 
-export type NameProp = {name?: string; };
-export type LoginFormProps = NameProp & Pick<AutoGridProps, "columnCount">;
+/**
+ * Login Form
+ */
+export type NameProp = {
+  name?: string;
+};
 
+export type LoginFormProps = NameProp & Pick<AutoGridProps, "columnCount">;
 const LoginFormBase = memo(function ({ name, columnCount = 1 }: LoginFormProps) {
-    const { disabled } = useFormDialog();
-
-    useEffect(() => formNameLog(name), [name]);
-
-    return (
-        <AutoGrid
-            columnCount={columnCount}
-            columnSpacing={2}
-            rowSpacing={1}
-            components={[
-                <UserName key={`${name}-username`} disabled={disabled} />,
-                <Password key={`${name}-password`} disabled={disabled} />,
-            ]}
-        />
-    );
+  const { disabled } = useFormDialog();
+
+  return (
+    <AutoGrid
+      columnCount={columnCount}
+      columnSpacing={2}
+      rowSpacing={1}
+      components={[
+        <UserName key={`${name}-username`} disabled={disabled} />,
+        <Password key={`${name}-password`} disabled={disabled} />,
+      ]}
+    />
+  );
 });
 
 LoginFormBase.displayName = "LoginForm";
@@ -80,37 +126,36 @@ export default LoginFormBase;
  * Inputs
  */
 const UserName = ({ disabled }: Pick<PasswordElementProps, "disabled">) => (
-    <TextFieldElement
-        name="username"
-        label="Username"
-        required
-        autoFocus
-        autoComplete="off"
-        fullWidth
-        margin={"dense"}
-        size={"medium"}
-        disabled={disabled}
-        slotProps={{
-            inputLabel: { shrink: true },
-        }}
-    />
+  <TextFieldElement
+    name="username"
+    label="Username"
+    required
+    autoFocus
+    autoComplete="off"
+    fullWidth
+    margin={"dense"}
+    size={"medium"}
+    disabled={disabled}
+    slotProps={{
+      inputLabel: { shrink: true },
+    }}
+  />
 );
-
 UserName.displayName = "UserName";
 
-const Password = function ({ disabled }: Pick<PasswordElementProps, "disabled">) {
+const Password = ({ disabled }: Pick<PasswordElementProps, "disabled">) => {
   const { setValue, getValues } = useFormContext();
   const password = getValues("password");
 
   useEffect(() => {
     if (disabled && password !== "") {
-      setValue("passwordDisabled", "");
+      setValue("disabledPassword", "");
     }
   }, [disabled, setValue, password]);
 
   return (
     <PasswordElement
-      name={"passwordDisabled"}
+      name={"password"}
       label={"Password"}
       fullWidth
       required
@@ -125,71 +170,29 @@ const Password = function ({ disabled }: Pick<PasswordElementProps, "disabled">)
     />
   );
 };
-Password.displayName = "Password";
-```
-```tsx
-// LoginDialog.tsx
-import { FormDialog, FormDialogActions, type FormDialogProps,  PersistForm } from "@chris-c-brine/form-dialog";
-import { useMemo, type FC } from "react";
-import { useForm } from "react-hook-form-mui";
-import LoginFormBase from "../forms/LoginFormBase";
-import {
-    defaultLoginFormValues,
-    type LoginForm,
-    type SubmitLogin,
-} from "@pages/LoginPage/LoginPageConstants";
-import { useDialog } from "@hooks";
-import { devLog } from "@utils";
-
-const formKey = "dialog-login-form";
-
-/* Basic Form Dialog Test */
-type LoginDialogProps = Pick<ReturnType<typeof useDialog>, "dialogProps"> &
-    Pick<FormDialogProps<LoginForm>, "onClose"> & {
-    handleSubmit: SubmitLogin;
-};
 
-const LoginDialog: FC<LoginDialogProps> = ({ dialogProps, handleSubmit }) => {
-    const formContext = useForm({ defaultValues: defaultLoginFormValues });
-    const loginForm = useMemo(() => <LoginFormBase name={formKey} columnCount={2} />, []);
-
-    return (
-        <FormDialog
-            {...dialogProps}
-            formProps={{ onSuccess: handleSubmit, formContext, onError: devLog("Form Errors") }}
-            title={"Basic Form Dialog Test"}
-            titleProps={{ variant: "h5", textAlign: "center" }}
-            actions={<FormDialogActions resetProps={{ formKey }} submitProps={{ maxAttempts: 3 }} />}
-        >
-            <PersistForm formName={formKey}>{loginForm}</PersistForm>
-        </FormDialog>
-    );
-};
-
-LoginDialog.displayName = "LoginDialog";
-
-export default LoginDialog;
+Password.displayName = "Password";
 ```
 ```tsx
 // LoginForm.tsx
 import { Lock as LockIcon } from "@mui/icons-material";
 import { Box, Typography, type TypographyProps } from "@mui/material";
-import { type SubmitLogin, defaultLoginFormValues } from "@pages/LoginPage/LoginPageConstants";
-import { devLog } from "@utils";
 import { merge } from "lodash";
-import type { FC, PropsWithChildren } from "react";
-import LoginFormBase from "./LoginFormBase";
+import { FC, PropsWithChildren, useCallback, useMemo } from "react";
 import { FormDialogActions, FormDialogProvider, PaperForm } from "@chris-c-brine/form-dialog";
+import { SubmitHandler, useForm } from "react-hook-form-mui";
+import { defaultLoginFormValues, LoginFormValues } from "./LoginPageConstants";
+import LoginFormBase from "./LoginFormBase";
+import { globalErrorAtom, useUser } from "@features";
+import { useSetAtom } from "jotai/index";
+import {  Person as PersonIcon } from "@mui/icons-material";
 
 const AltIcon = () => <LockIcon sx={{ mr: 1, fontSize: 20 }} />;
 
-interface LoginFormProps extends PropsWithChildren {
-  onSuccess: SubmitLogin;
-}
+export const LoginForm: FC<PropsWithChildren> = ({ children }) => {
 
-const LoginForm: FC<LoginFormProps> = ({ onSuccess, children }) => {
   return (
-    <LoginPaperForm onSuccess={onSuccess}>
+    <LoginPaperForm>
       <Box px={2}>
         {children}
         <SecureLoginText />
@@ -208,8 +211,6 @@ const LoginForm: FC<LoginFormProps> = ({ onSuccess, children }) => {
   );
 };
 
-export default LoginForm;
-
 const SecureLoginText: FC<TypographyProps> = (props) => {
   const typographyProps = merge(
     {
@@ -222,18 +223,38 @@ const SecureLoginText: FC<TypographyProps> = (props) => {
   return <Typography {...typographyProps}>Secure Login</Typography>;
 };
 
-type LoginPaperFormProps = PropsWithChildren & {
-  onSuccess?: SubmitLogin;
-};
+const LoginPaperForm: FC<PropsWithChildren> = ({ children }) => {
+  const formContext = useForm({defaultValues: defaultLoginFormValues});
+  const { setUser } = useUser();
+  const setError = useSetAtom(globalErrorAtom);
+  const reset = useMemo(() => formContext.reset, [formContext?.reset]);
+
+  const onSuccess: SubmitHandler<LoginFormValues> = useCallback(
+    (data, event) => {
+      event?.preventDefault(); // Stop default html form submit
+      event?.stopPropagation(); // STOP!!!!!
+
+      setUser({ name: data.username, isActive: true }); // Update User (and/or other business logic)
+      reset(); // reset form
+      setError({ // Signal Success!
+        message: <>Hello {data.username}!</>,
+        title: "Successful Login!",
+        severity: "success",
+        icon: <PersonIcon sx={{ fontSize: 35 }} />,
+      });
+    }, [setUser, setError, reset]);
 
-const LoginPaperForm: FC<LoginPaperFormProps> = ({ children, onSuccess }) => {
   return (
     <FormDialogProvider>
       <PaperForm
+        persistKey={'login-page-form'}
         formProps={{
-          defaultValues: defaultLoginFormValues,
+          formContext,
           onSuccess,
-          onError: devLog("Form Errors"),
+          onError: (errors, event) => {
+            event?.preventDefault();
+            console.log(errors)
+          },
         }}
         elevation={3}
         sx={{
@@ -247,79 +268,66 @@ const LoginPaperForm: FC<LoginPaperFormProps> = ({ children, onSuccess }) => {
     </FormDialogProvider>
   );
 };
-
 ```
 ```tsx
-// LoginPage.tsx
-import { useCallback, useEffect, useState, type FC, type PropsWithChildren } from "react";
-import { Container, IconButton } from "@mui/material";
-import { useUser } from "@features";
-import { useDialog } from "@chris-c-brine/form-dialog";
-import { useForm, type SubmitHandler } from "react-hook-form-mui";
-import { toast } from "react-toastify";
-import LoginDialog from "./components/dialogs/LoginDialog";
-import LoginForm from "./components/forms/LoginForm";
-import { Lock as LockIcon } from "@mui/icons-material";
+// LoginDialog.tsx
+import { useDialog, FormDialog, FormDialogActions } from "@chris-c-brine/form-dialog";
+import { memo, useCallback, useMemo } from "react";
+import LoginFormBase from "./LoginFormBase";
+import { defaultLoginFormValues, LoginFormValues } from "./LoginPageConstants";
+import { SubmitHandler, useForm } from "react-hook-form-mui";
+import { globalErrorAtom, useUser } from "@features";
+import { useSetAtom } from "jotai/index";
+import { Person as PersonIcon } from "@mui/icons-material";
 
-const defaultLoginFormValues = { username: "", password: "" };
-type SubmitLogin = SubmitHandler<typeof defaultLoginFormValues>;
-const LoginPage: FC = () => {
-  const { dialogProps, closeDialog, openDialog } = useDialog();
-  const { setUser } = useUser();
-  const [showDialog, setShowDialog] = useState(dialogProps.open);
+const formKey = "dialog-login-form";
 
-  useEffect(() => {
-    if (!showDialog && dialogProps.open) {
-      setShowDialog(true);
-    }
-  }, [dialogProps.open, showDialog]);
+export type LoginDialogProps = {
+  dialogProps: ReturnType<typeof useDialog>["dialogProps"];
+};
 
+export const LoginDialog = memo(function ({ dialogProps }: LoginDialogProps) {
+  const setError = useSetAtom(globalErrorAtom);
+  const { setUser } = useUser();
   const formContext = useForm({ defaultValues: defaultLoginFormValues });
-  const onSuccess: SubmitLogin = useCallback(
+
+  const reset = useMemo(() => formContext.reset, [formContext?.reset]);
+
+  const onSuccess: SubmitHandler<LoginFormValues> = useCallback(
     (data, event) => {
-      event?.preventDefault(); // Stop default form submit
-      formContext.reset(); // Reset form
+      event?.preventDefault();
+      event?.stopPropagation();
+
+      console.log(event);
       setUser({ name: data.username, isActive: true }); // Update User (and/or other business logic)
-      closeDialog(); // Close Dialog
-      toast.success("Error Dialog Test!"); // Signal success beyond just closing the dialog
+      reset(); // reset form
+      setError({
+        // Signal Success!
+        message: <>Hello {data.username}!</>,
+        title: "Successful Login!",
+        severity: "success",
+        icon: <PersonIcon sx={{ fontSize: 35 }} />,
+      });
+      dialogProps?.onClose();
     },
-    [formContext, setUser, closeDialog],
+    [setUser, setError, dialogProps, reset],
   );
 
   return (
-    <LoginFormContainer>
-      <LoginForm onSuccess={onSuccess}>
-        <IconButton color="primary" onClick={openDialog} sx={{ py: 1 }}>
-          <LockIcon sx={{ fontSize: 50 }} />
-        </IconButton>
-      </LoginForm>
-      {showDialog && (
-        <LoginDialog dialogProps={dialogProps} handleSubmit={onSuccess} onClose={undefined} />
-      )}
-    </LoginFormContainer>
+    <FormDialog
+      {...dialogProps}
+      persistKey={formKey}
+      formProps={{ onSuccess, formContext }}
+      title={"Basic Persist Form Dialog Test"}
+      titleProps={{ variant: "h5", textAlign: "center" }}
+      actions={<FormDialogActions resetProps={{ formKey }} submitProps={{ maxAttempts: 3 }} />}
+    >
+      <LoginFormBase columnCount={2} />
+    </FormDialog>
   );
-};
+});
+
+LoginDialog.displayName = "LoginDialog";
 
-export default LoginPage;
 
-const LoginFormContainer: FC<PropsWithChildren> = ({ children }) => (
-  <Container
-    component="main"
-    maxWidth={"xs"}
-    sx={{
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      height: "85vh",
-      overflow: "hidden",
-      animation: "fadeIn 1s ease-in-out",
-      "@keyframes fadeIn": {
-        from: { opacity: 0 },
-        to: { opacity: 1 },
-      },
-    }}
-  >
-    {children}
-  </Container>
-);
 ```

package/dist/components/buttons/FormResetButton.d.ts

@@ -31,10 +31,6 @@ export type FormResetButtonProps = Omit<ButtonProps, "onClick"> & {
  * - Form-wide disabled state from FormDialogContext
  *
  * @example
- * // Basic usage
- * <FormResetButton />
- *
- * @example
  * // With persistence integration
  * <FormResetButton formKey="user-profile-form" />
  *

package/dist/components/buttons/FormSubmitButton.d.ts

@@ -14,7 +14,7 @@ export type FormSubmitButtonProps = Omit<LoadingButtonProps, "onClick"> & {
     maxAttempts?: number;
 };
 /**
- * A submit button for forms with loading state, attempt tracking and form context awareness
+ * A "submit button" for forms with loading state, attempt tracking and form context awareness
  *
  * This component extends the LoadingButton with form-specific features:
  * - Automatically displays loading state during form submission
@@ -28,9 +28,6 @@ export type FormSubmitButtonProps = Omit<LoadingButtonProps, "onClick"> & {
  * - Explicit-disabled prop
  * - Form-wide disabled state from FormDialogContext
  *
- * @example
- * // Basic usage
- * <FormSubmitButton />
  *
  * @example
  * // With custom text and max attempts

package/dist/components/dialogs/BaseDialog.d.ts

@@ -1,7 +1,7 @@
 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"> & {
+export type BaseDialogProps = BlackoutDialogProps & {
     /**
      * Title content for the dialog
      * When provided, renders a DialogTitle component
@@ -9,17 +9,12 @@ export type BaseDialogProps = Omit<BlackoutDialogProps, "children" | "title" | "
     title?: ReactNode;
     /**
      * Props passed to the DialogTitle component
-     * Only applied when title is provided
+     * Only applied when the title is provided
      */
     titleProps?: DialogTitleProps;
-    /**
-     * Main content of the dialog
-     * When provided, renders a DialogContent component
-     */
-    children?: ReactNode;
     /**
      * Props passed to the DialogContent component
-     * Only applied when children is provided
+     * Only applied when children are provided
      */
     contentProps?: DialogContentProps;
     /**
@@ -29,7 +24,7 @@ export type BaseDialogProps = Omit<BlackoutDialogProps, "children" | "title" | "
     actions?: ReactNode;
     /**
      * Props passed to the DialogActions component
-     * Only applied when actions is provided
+     * Only applied when actions are provided
      */
     actionsProps?: DialogActionsProps;
     /**
@@ -57,27 +52,11 @@ export type BaseDialogProps = Omit<BlackoutDialogProps, "children" | "title" | "
  * consistent styling and behavior.
  *
  * @example
- * // Basic usage with all sections
- * <BaseDialog
- *   open={open}
- *   onClose={handleClose}
- *   title="Confirmation"
- *   actions={
- *     <>
- *       <Button onClick={handleCancel}>Cancel</Button>
- *       <Button onClick={handleConfirm}>Confirm</Button>
- *     </>
- *   }
- * >
- *   Are you sure you want to proceed?
- * </BaseDialog>
- *
- * @example
  * // Customized with section props
  * <BaseDialog
  *   open={isOpen}
  *   title="Advanced Settings"
- *   titleProps={{ sx: { bgcolor: 'primary.main', color: 'white' } }}
+ *   titleProps={{ sx: { backgroundColor: 'primary.main', color: 'white' } }}
  *   contentProps={{ sx: { p: 3 } }}
  *   actionsProps={{ sx: { justifyContent: 'space-between' } }}
  *   actions={<SettingsDialogActions />}

package/dist/components/dialogs/BlackoutDialog.d.ts

@@ -1,6 +1,6 @@
 import { type DialogProps } from "@mui/material";
-import { type FC, type PropsWithChildren } from "react";
-export type BlackoutDialogProps = DialogProps & Partial<PropsWithChildren> & {
+import { type FC } from "react";
+export type BlackoutDialogProps = Omit<DialogProps, "title"> & {
     /**
      * An optional unique string identifier
      * @default 'blackout-dialog'

package/dist/components/dialogs/FormDialog.d.ts

@@ -1,15 +1,10 @@
 import { type BaseDialogProps } from "./BaseDialog";
-import { type FieldValues, type FormContainerProps } from "react-hook-form-mui";
+import { CommonFormProps } from "../forms/PaperForm";
+import { type FieldValues } from "react-hook-form-mui";
 /**
  * Props for the FormDialog component
  */
-export type FormDialogProps<T extends FieldValues> = Omit<BaseDialogProps, "PaperComponent"> & {
-    /**
-     * Form methods from useForm hook
-     * Establish the form context for child components
-     */
-    formProps: FormContainerProps<T>;
-};
+export type FormDialogProps<T extends FieldValues> = Omit<BaseDialogProps, "PaperComponent"> & CommonFormProps<T>;
 /**
  * A dialog component specialized for forms with integrated context providers
  *
@@ -31,4 +26,7 @@ export type FormDialogProps<T extends FieldValues> = Omit<BaseDialogProps, "Pape
  * - useFormDialog() - Access dialog controls and state
  *
  */
-export declare const FormDialog: <T extends FieldValues>({ formProps, children, open, onClose, ...dialogProps }: FormDialogProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FormDialog: {
+    <T extends FieldValues>({ formProps, children, open, onClose, persistKey, ...dialogProps }: FormDialogProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/dialogs/FormDialogActions.d.ts

@@ -6,7 +6,7 @@ import { FormSubmitButtonProps } from "../buttons/FormSubmitButton";
 /**
  * Props for the FormDialogActions component
  */
-export type FormDialogActionsProps = PropsWithChildren & {
+export type FormDialogActionsProps = Partial<PropsWithChildren> & {
     /**
      * Props to customize the cancel button
      */
@@ -16,7 +16,7 @@ export type FormDialogActionsProps = PropsWithChildren & {
      */
     resetProps?: FormResetButtonProps;
     /**
-     * Props to customize the submit button
+     * Props to customize the "submit button"
      */
     submitProps?: FormSubmitButtonProps;
     /**

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

@@ -1,15 +1,23 @@
 import { type PaperProps } from "@mui/material";
 import { type FieldValues, type FormContainerProps } from "react-hook-form-mui";
-/**
- * Props for the PaperForm component
- */
-export type PaperFormProps<T extends FieldValues> = PaperProps & {
+export type CommonFormProps<T extends FieldValues> = {
     /**
      * Props to configure the form container
-     * Includes settings for form state, validation, and submission handling
+     * This includes settings for form state, validation, and submission handling
      */
     formProps: FormContainerProps<T>;
+    /**
+     * Optional key to use for form state persistence
+     * When provided, the form state will be persisted in
+     * session storage with a fallback to local storage (TODO: make configurable)
+     * and restored on form reload/mount.
+     */
+    persistKey?: string;
 };
+/**
+ * Props for the PaperForm component
+ */
+export type PaperFormProps<T extends FieldValues> = PaperProps & CommonFormProps<T>;
 /**
  * A component that combines a Material UI Paper with a form container
  *
@@ -56,4 +64,4 @@ export type PaperFormProps<T extends FieldValues> = PaperProps & {
  *
  * @template T - The type of form values being handled
  */
-export declare const PaperForm: <T extends FieldValues>({ children, formProps, ...paperProps }: PaperFormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const PaperForm: <T extends FieldValues>({ children, persistKey, formProps, ...paperProps }: PaperFormProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import type { FC, PropsWithChildren } from "react";
+import { type PropsWithChildren } from "react";
 /**
  * Props for the PersistForm component
  */
@@ -50,4 +50,4 @@ export interface PersistFormProps extends PropsWithChildren {
  *   </PersistForm>
  * </FormDialog>
  */
-export declare const PersistForm: FC<PersistFormProps>;
+export declare const PersistForm: import("react").NamedExoticComponent<PersistFormProps>;

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from "./forms/PersistForm";
 export * from "./buttons/FormCancelButton";
 export * from "./buttons/FormSubmitButton";
 export * from "./buttons/FormResetButton";
+export * from "./buttons/LoadingButton";
 export * from "./dialogs/FormDialogActions";
 export * from "./AutoGrid";
 export * from "./GridSpacer";

package/dist/hooks/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./useFormDialog";
 export * from "./useMaxAttempts";
-export * from "./usePersistedForm";
+export * from "./usePersistForm";
 export * from "./useOnMount";
 export * from "./useDialog";