@fpkit/acss 0.5.5 → 0.5.6

package/src/components/dialog/dialog-modal.stories.tsx

@@ -0,0 +1,113 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect, userEvent, waitFor } from "@storybook/test";
+
+import DialogModal from "./dialog-modal";
+import WithInstructions from "#/decorators/instructions";
+const meta: Meta<typeof DialogModal> = {
+  title: "FP.REACT Components/Dialog/DialogModal",
+  component: DialogModal,
+  tags: ["autodocs", "experimental"],
+  parameters: {
+    actions: { argTypesRegex: "^on.*" },
+    docs: {
+      description: {
+        component:
+          "DialogModal is a modal dialog component that provides an accessible overlay for displaying content.",
+      },
+    },
+  },
+  args: {
+    children: "Dialog Content",
+    title: "Dialog Title",
+    isOpen: false,
+    onClose: () => {},
+  },
+} as Meta;
+
+export default meta;
+type Story = StoryObj<typeof DialogModal>;
+
+export const Default: Story = {
+  args: {
+    children:
+      "DialogModal is a modal dialog component that provides an accessible overlay for displaying content.",
+  },
+  decorators: [WithInstructions()],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("dialog")).toBeInTheDocument();
+  },
+} as Story;
+
+const instructions = (
+  <div>
+    <p>
+      In this example, the dialog is opened and closed using the Storybook
+      interactions.{" "}
+    </p>
+  </div>
+);
+
+export const ModalInteractions: Story = {
+  args: {
+    children: "This dialog can be opened and closed using the button",
+    dialogTitle: "Interactive Dialog",
+    btnLabel: "Open Dialog",
+  },
+  decorators: [WithInstructions(instructions)],
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+
+    // Find and click the open button
+    const openButton = canvas.getByRole("button", { name: /open dialog/i });
+
+    await step("Open Dialog", async () => {
+      await step("Open Dialog", async () => {
+        await userEvent.click(openButton, { delay: 1500 }); // Verify dialog is open
+        const dialog = canvas.getByRole("dialog");
+        expect(dialog).toBeVisible();
+      });
+    });
+
+    await step("Close Dialog", async () => {
+      const dialog = canvas.getByRole("dialog");
+
+      // Find and click close button
+      const closeButton = canvas.getByRole("button", {
+        name: /close dialog/i,
+      });
+      expect(closeButton).toHaveFocus();
+      await userEvent.click(closeButton, { delay: 1000 });
+      // Verify dialog is closed
+      expect(dialog).not.toBeVisible();
+    });
+
+    await step("Dialog focus order, close with cancel button", async () => {
+      await userEvent.click(openButton, { delay: 1000 });
+      const dialog = canvas.getByRole("dialog");
+      expect(dialog).toBeVisible();
+      expect(
+        canvas.getByRole("button", { name: /close dialog/i })
+      ).toHaveFocus();
+      const cancelButton = canvas.getByRole("button", { name: /cancel/i });
+      await userEvent.tab();
+      expect(cancelButton).toHaveFocus();
+      await userEvent.keyboard(" ", { delay: 1000 });
+      expect(dialog).not.toBeVisible();
+      expect(openButton).toHaveFocus();
+    });
+
+    await step("Close Dialog with Escape Key", async () => {
+      expect(openButton).toHaveFocus();
+      await userEvent.click(openButton, { delay: 1000 });
+      await userEvent.tab();
+      expect(openButton).not.toHaveFocus();
+
+      const dialog = canvas.getByRole("dialog");
+      await userEvent.keyboard(" "); // Close the dialog with the keyboard
+      await waitFor(() => {
+        expect(dialog).not.toBeVisible();
+      });
+    });
+  },
+} as Story;

package/src/components/dialog/dialog-modal.tsx

@@ -0,0 +1,111 @@
+// Dialog.tsx
+import React from "react";
+import Dialog from "./dialog";
+import Button from "#components/buttons/button.jsx";
+
+/**
+ * Additional props for the DialogModal component, extending the props of the Dialog component.
+ *
+ * @property {string} [className] - Optional className for the dialog content wrapper.
+ * @property {string} [btnLabel] - Label for the button that opens the dialog.
+ * @property {() => void} [btnOnClick] - Callback function to be called when the button is clicked.
+ * @property {"sm" | "md" | "lg"} [btnSize] - Size of the button that opens the dialog.
+ */
+interface DialogModalProps extends React.ComponentProps<typeof Dialog> {
+  /** Optional className for the dialog content wrapper */
+  className?: string;
+  btnLabel?: string;
+  btnOnClick?: () => void;
+  btnSize?: "sm" | "md" | "lg";
+  btnProps?: React.ComponentProps<typeof Button>;
+}
+
+/**
+ * A modal dialog component that provides an accessible overlay with an optional trigger button.
+ * Extends the base Dialog component with additional button control functionality.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {boolean} [props.isAlertDialog] - Whether this is an alert dialog requiring user action
+ * @param {() => void} [props.onClose] - Callback when dialog is closed
+ * @param {string} [props.dialogTitle] - Title displayed in dialog header
+ * @param {string} [props.dialogLabel] - Accessible label for the dialog
+ * @param {string} [props.btnLabel="Open Dialog"] - Text label for the trigger button
+ * @param {"sm" | "md" | "lg"} [props.btnSize="md"] - Size of the trigger button
+ * @param {() => void} [props.btnOnClick] - Callback when trigger button is clicked
+ * @param {React.ReactNode} props.children - Content to display inside the dialog
+ * @param {() => void} [props.onConfirm] - Callback when confirm button is clicked (for alert dialogs)
+ * @param {string} [props.confirmLabel="Confirm"] - Text for the confirm button
+ * @param {string} [props.cancelLabel="Cancel"] - Text for the cancel button
+ * @param {string} [props.className] - Additional CSS class for the dialog wrapper
+ * @param {React.ComponentProps<typeof Button>} [props.btnProps] - Additional props for the trigger button
+ * @returns {JSX.Element} A dialog component with a trigger button
+ *
+ * @example
+ * ```jsx
+ * <DialogModal
+ *   dialogTitle="Confirm Action"
+ *   btnLabel="Open Modal"
+ *   btnSize="lg"
+ *   onClose={() => console.log('Dialog closed')}
+ * >
+ *   <p>Dialog content goes here</p>
+ * </DialogModal>
+ * ```
+ */
+
+export const DialogModal: React.FC<DialogModalProps> = ({
+  isAlertDialog,
+  onClose,
+  dialogTitle,
+  dialogLabel,
+  btnLabel = "Open Dialog",
+  btnSize = "sm",
+  btnOnClick,
+  children,
+  onConfirm,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  className,
+  btnProps,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  const handleClose = () => {
+    setIsOpen(false);
+    onClose?.();
+  };
+  const handleButtonClick = () => {
+    setIsOpen(true);
+    btnOnClick?.();
+  };
+
+  const dialogBtnProps = {
+    type: "button" as "button" | "submit" | "reset",
+    onClick: handleButtonClick,
+    "data-btn": btnSize,
+    ...btnProps,
+  };
+
+  return (
+    <>
+      <Button {...dialogBtnProps}>{btnLabel}</Button>
+      <Dialog
+        showDialog={isOpen}
+        dialogTitle={dialogTitle}
+        onClose={handleClose}
+        title={dialogTitle}
+        dialogLabel={dialogLabel}
+        className={className}
+        isAlertDialog={isAlertDialog}
+        onConfirm={onConfirm}
+        confirmLabel={confirmLabel}
+        cancelLabel={cancelLabel}
+      >
+        {children}
+      </Dialog>
+    </>
+  );
+};
+export default DialogModal;
+DialogModal.displayName = "Dialog Modal";

package/src/components/dialog/dialog.scss

@@ -1,25 +1,27 @@
 :root {
-  --dialog-min-w: 320px;
-  --dialog-gap: 0.75rem;
+  --dialog-min-w: max(20rem, 80%);
+  --dialog-gap: 0.625rem;
   --dialog-border-color: lightgray;
-  --dialog-border-radius: 0.5rem;
-  --dialog-padding: 0.5rem;
+  --dialog-border-width: thin;
+  --dialog-border-style: solid;
+  --dialog-border-radius: var(--border-radius);
+  --dialog-padding: 1.5rem;
   --dialog-padding-inline: 1rem;
   --dialog-close-color: gray;
   --dialog-button-bg: transparent;
-  --dialog-button-border: transparent 1px solid;
+  --dialog-button-border: transparent thin solid;
   --dialog-button-hover-bg: whitesmoke;
   --dialog-display: flex;
   --dialog-flex-direction: column;
 }
 
 dialog {
-  min-width: var(--dialog-min-w);
+  width: var(--dialog-min-w);
+  min-width: var(--min-w);
   gap: var(--dialog-gap);
-  border-color: var(--dialog-border-color);
+  border: var(--dialog-border-color) var(--dialog-border-width) solid;
   border-radius: var(--dialog-border-radius);
   padding: var(--dialog-padding);
-  padding-inline: var(--dialog-padding-inline);
   padding-block-start: calc(var(--dialog-padding) - 0rem);
 
   &[open] {
@@ -27,6 +29,15 @@ dialog {
     flex-direction: var(--dialog-flex-direction);
     gap: var(--dialog-gap);
   }
+  section {
+    width: 100%;
+    display: flex;
+    justify-content: start;
+    gap: var(--dialog-gap);
+    flex-direction: var(--dialog-flex-direction);
+    margin-block-start: 0;
+    --sect-y: 0;
+  }
 }
 
 .dialog-header {
@@ -34,7 +45,7 @@ dialog {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  min-width: 320px;
+  min-width: 100%;
   h3 {
     margin-block-start: 0;
     margin-block-end: 0;
@@ -48,14 +59,18 @@ dialog {
     cursor: pointer;
     &:hover,
     &:focus {
-      border-color: currentColor;
+      border-color: var(--dialog-close-color);
       background-color: var(--dialog-button-hover-bg);
     }
   }
 }
 
-.alert-dialog-actions {
+.alert-dialog-actions,
+.dialog-footer {
   display: flex;
-  justify-content: flex-start;
-  gap: 0.5rem;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: var(--dialog-footer-justify, flex-end);
+  gap: var(--dialog-gap);
+  width: 100%;
 }

package/src/components/dialog/dialog.stories.tsx

@@ -1,14 +1,37 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta, StoryFn } from "@storybook/react";
+import { within, expect, userEvent } from "@storybook/test";
 
 import Dialog from "./dialog";
+import React from "react";
+
+const content =
+  "This is a dialog component used to display modal dialogs. It can be used to show important information or prompt the user for input.";
+
+const buttonDecorator = [
+  (Story: StoryFn) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    return (
+      <div>
+        <button onClick={() => setIsOpen(true)}>Open Dialog</button>
+        <Story
+          args={{
+            showDialog: isOpen,
+            onClose: () => setIsOpen(false),
+            dialogTitle: "Dialog Button",
+            children: content,
+          }}
+        />
+        <section>{content}</section>
+      </div>
+    );
+  },
+];
 
 const meta: Meta<typeof Dialog> = {
-  title: "FP.REACT Components/Dialog",
+  title: "FP.REACT Components/Dialog/Dialogs",
   component: Dialog,
   tags: ["alpha"],
   parameters: {
-    // actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
         component: "Dialog component for displaying modal dialogs.",
@@ -16,46 +39,78 @@ const meta: Meta<typeof Dialog> = {
     },
   },
   args: {
-    children: "Dialog Content",
+    children: content,
   },
   decorators: [
-    (Story) => (
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          width: "500px",
-          marginInline: "20px",
-          marginBlockStart: "5rem",
-        }}
-      >
-        <Story />
-      </div>
-    ),
+    (Story) => {
+      return (
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            width: "500px",
+            marginInline: "20px",
+            marginBlockStart: "5rem",
+          }}
+        >
+          <Story />
+        </div>
+      );
+    },
   ],
 } as Story;
 
 export default meta;
 type Story = StoryObj<typeof Dialog>;
 
-export const DialogComponent: Story = {
-  args: {},
+export const BasicDialog: Story = {
+  args: {
+    isAlertDialog: false,
+    showDialog: true,
+    dialogTitle: "Basic Dialog",
+  },
+} as Story;
+
+/**
+ * Show the dialog by default
+ * set the showDialog prop to true
+ */
+export const NonModalDialog: Story = {
+  args: {
+    showDialog: true,
+    isAlertDialog: true,
+    dialogTitle: "Non Modal Dialog",
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    expect(canvas.getByText(/dialog content/i)).toBeInTheDocument();
-    expect(canvas.getByRole("dialog")).toBeInTheDocument();
+    await expect(canvas.getByRole("alertdialog")).toBeInTheDocument();
   },
-};
+} as Story;
 
-export const NoDialogTitle: Story = {
+export const DialogWithButton: Story = {
+  decorators: buttonDecorator,
+} as Story;
+
+export const DialogInteractions: Story = {
   args: {
-    dialogTitle: "",
-    children:
-      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quod tenetur, alias vitae incidunt porro rem laboriosam deserunt, fugit eligendi eum eos ducimus inventore suscipit, quasi dignissimos dicta. Deleniti, error",
+    isAlertDialog: false,
+    showDialog: true,
+    dialogTitle: "Dialog Interactions",
   },
-  play: async ({ canvasElement }) => {
+  play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement);
-    expect(canvas.queryByRole("heading")).not.toBeInTheDocument();
+    const dialog = canvas.getByRole("dialog");
+    const closeButton = canvas.getByRole("button", { name: /close dialog/i });
+
+    await step("Modal is rendered", async () => {
+      await expect(dialog).toBeInTheDocument();
+      await expect(closeButton).toBeInTheDocument();
+    });
+
+    await step("Close modal", async () => {
+      await userEvent.click(closeButton, { delay: 1000 });
+      // await expect(dialog).not.toBeInTheDocument();
+    });
   },
 } as Story;

package/src/components/dialog/dialog.tsx

@@ -1,83 +1,128 @@
-import React from "react";
+import React, { useRef, useEffect, CSSProperties } from "react";
 import UI from "#components/ui";
-import DialogHeader from "./view/dialog-header";
+import DialogHeader from "#components/dialog/views/dialog-header";
+import DialogFooter from "#components/dialog/views/dialog-footer";
+import { useDialogClickHandler } from "#hooks/useDialogClickHandler.js";
 
-export type DialogProps = {
-  isOpen?: boolean;
-  onOpen?: () => void;
-  onClose?: () => void;
-  onCancel?: () => void;
-  dialogTitle?: string;
-  showDialogHeader?: boolean;
-  isAlertDialog?: boolean;
-  children: React.ReactNode;
-};
+/**
+ * Defines the props for the Dialog component.
+ *
+ * @property {boolean} [showDialog] - Determines whether the dialog should be shown.
+ * @property {boolean} [isAlertDialog] - Determines whether the dialog should be displayed as an alert dialog.
+ * @property {() => void} [onClose] - A callback function to be called when the dialog is closed.
+ * @property {string} dialogTitle - The title of the dialog.
+ * @property {string} [dialogLabel] - An optional label for the dialog.
+ * @property {React.ReactNode} children - The content to be displayed inside the dialog.
+ * @property {() => void | Promise<void>} [onConfirm] - A callback function to be called when the user confirms the dialog.
+ * @property {string} [confirmLabel] - The label for the confirm button.
+ * @property {string} [cancelLabel] - The label for the cancel button.
+ * @property {string} [className] - An optional CSS class name to be applied to the dialog.
+ * @property {CSSProperties} [styles] - Optional inline styles to be applied to the dialog.
+ */
+type DialogModalProps = React.ComponentProps<typeof UI> &
+  React.ComponentProps<"dialog"> & {
+    dialogTitle: string;
+    dialogLabel?: string;
+    children: React.ReactNode;
+    showDialog?: boolean;
+    isAlertDialog?: boolean;
+    onClose?: () => void;
+    onConfirm?: () => void | Promise<void>;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    className?: string;
+    hideFooter?: boolean;
+    styles?: CSSProperties;
+  };
 
-export const Dialog = ({
-  isOpen = true,
-  dialogTitle = "Dialog",
-  onOpen,
-  onClose,
-  onCancel,
-  showDialogHeader = true,
+/**
+ * Renders a dialog modal component with customizable content and behavior.
+ *
+ * @param showDialog - Determines whether the dialog should be shown.
+ * @param isAlertDialog - Determines whether the dialog should be displayed as an alert dialog.
+ * @param onClose - A callback function to be called when the dialog is closed.
+ * @param dialogTitle - The title of the dialog.
+ * @param dialogLabel - An optional label for the dialog.
+ * @param children - The content to be displayed inside the dialog.
+ * @param onConfirm - A callback function to be called when the user confirms the dialog.
+ * @param confirmLabel - The label for the confirm button.
+ * @param cancelLabel - The label for the cancel button.
+ * @param className - An optional CSS class name to be applied to the dialog.
+ * @param styles - Optional inline styles to be applied to the dialog.
+ */
+export const Dialog: React.FC<DialogModalProps> = ({
+  showDialog,
   isAlertDialog,
+  onClose,
+  dialogTitle,
+  dialogLabel,
   children,
-  ...props
-}: DialogProps): JSX.Element => {
-  const dialogRef = React.useRef<HTMLDialogElement>(null);
-  const [dialogOpen, setDialogOpen] = React.useState(isOpen);
+  onConfirm,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  className = "",
+  hideFooter,
+  styles,
+}) => {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const [isOpen, setIsOpen] = React.useState(showDialog);
 
-  React.useEffect(() => {
-    if (isOpen && onOpen) {
-      dialogRef.current?.showModal();
-      onOpen();
-    }
-    setDialogOpen(isOpen);
-  }, [isOpen]);
+  useEffect(() => {
+    setIsOpen(showDialog);
+  }, [showDialog]);
 
-  const handleCancelEvent = (e: React.SyntheticEvent<HTMLDialogElement>) => {
-    if (e.currentTarget === e.target) {
-      if (onCancel) {
-        onCancel();
-      }
-    }
-  };
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
 
-  const handleCloseEvent = (e: React.SyntheticEvent<HTMLDialogElement>) => {
-    if (e.currentTarget === e.target) {
-      if (onClose) {
-        onClose();
+    if (isOpen) {
+      if (isAlertDialog) {
+        dialog.show();
+      } else {
+        dialog.showModal();
       }
-      isOpen = false;
-      dialogRef.current?.close();
+    } else {
+      dialog.close();
     }
-  };
+  }, [isOpen, isAlertDialog]);
 
-  const closeDialog = () => {
-    if (onClose) {
-      onClose();
-    }
-    isOpen = false;
-    dialogRef.current?.close();
+  const handleClose = () => {
+    if (onClose) onClose();
+    setIsOpen(false);
   };
 
+  const handleClickOutside = useDialogClickHandler(dialogRef, handleClose);
+
   return (
     <UI
       as="dialog"
-      open={dialogOpen}
+      role={isAlertDialog ? "alertdialog" : "dialog"}
       ref={dialogRef}
-      role={isAlertDialog ? "alertdialog" : undefined}
-      onCancel={handleCancelEvent}
-      onClose={handleCloseEvent}
-      {...props}
+      onClose={handleClose}
+      onClick={handleClickOutside}
+      aria-modal={isOpen ? "true" : undefined}
+      className={`${"dialog-modal"} ${className}`}
+      aria-label={dialogLabel}
+      style={styles}
     >
-      {showDialogHeader && (
-        <DialogHeader dialogTitle={dialogTitle} onClose={closeDialog} />
-      )}
-      {children}
+      <DialogHeader dialogTitle={dialogTitle} onClick={handleClose} />
+
+      <UI
+        as="section"
+        className={`dialog-content ${className}`}
+        onClick={(e: React.MouseEvent) => e.stopPropagation()}
+      >
+        {children}
+        {!hideFooter && (
+          <DialogFooter
+            onClose={handleClose}
+            onConfirm={onConfirm}
+            confirmLabel={confirmLabel}
+            cancelLabel={cancelLabel}
+          />
+        )}
+      </UI>
     </UI>
   );
 };
-
 export default React.memo(Dialog);
-Dialog.displayName = "Dialog";

package/src/components/dialog/hooks/useClickOutside.ts

@@ -0,0 +1,33 @@
+// hooks/useClickOutside.ts
+import { RefObject } from "react";
+
+/**
+ * Hook that handles click outside detection for any HTML element
+ * @param ref Reference to the element to detect clicks outside of
+ * @param handler Function to call when a click outside is detected
+ * @returns Click event handler function
+ */
+const useClickOutside = (
+  ref: RefObject<HTMLElement>,
+  handler: () => void
+): ((e: React.MouseEvent<HTMLElement>) => void) => {
+  return (e: React.MouseEvent<HTMLElement>) => {
+    const dimensions = ref.current?.getBoundingClientRect();
+
+    if (!dimensions) {
+      return;
+    }
+
+    const isClickOutside =
+      e.clientY < dimensions.top ||
+      e.clientY > dimensions.bottom ||
+      e.clientX < dimensions.left ||
+      e.clientX > dimensions.right;
+
+    if (isClickOutside) {
+      handler();
+    }
+  };
+};
+
+export default useClickOutside;