@fpkit/acss 0.5.5 → 0.5.6

package/src/components/dialog/views/README.mdx

@@ -0,0 +1,182 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="FP.REACT Views/DialogHeader/Readme" />
+
+# Dialog
+
+## Summary
+
+A reusable dialog/modal component that includes a header, content area, and
+footer. The component provides customizable title, confirm, and cancel
+functionality.
+
+## Features
+
+- Customizable title, confirm, and cancel functionality
+- Built-in close button with icon
+- Fully accessible
+- Memoized for performance optimization
+
+## Props
+
+The `Dialog` component accepts the following props:
+
+- `isOpen: boolean`: Controls the visibility of the dialog
+- `onClose: () => void`: Callback function triggered when the dialog is closed
+- `title: string`: The title text to display in the header
+- `children: React.ReactNode`: The content to display inside the dialog
+- `onConfirm?: () => void | Promise<void>`: Optional callback function triggered
+  when the confirm button is clicked
+- `confirmLabel?: string`: Optional label text for the confirm button
+- `cancelLabel?: string`: Optional label text for the cancel button
+- `className?: string`: Optional className for the dialog content wrapper
+
+## Technical Details
+
+- Uses React.memo for performance optimization
+- Integrates with the UI component system
+- Implements accessible heading structure using the Heading component
+- Uses Icon.Remove for the close button visual
+- Includes data attributes for styling customization
+
+## Usage Example
+
+### Basic Usage
+
+```tsx
+import { Dialog } from "./dialog";
+
+function BasicDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setIsOpen(true)}>Open Dialog</button>
+      <Dialog
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Dialog Title"
+        confirmLabel="Confirm"
+        cancelLabel="Cancel"
+      >
+        <div>Dialog content here...</div>
+      </Dialog>
+    </>
+  );
+}
+```
+
+# DialogHeader
+
+## Summary
+
+A reusable header component specifically designed for dialog/modal interfaces.
+The component provides a clean, accessible header with a title and close button
+functionality.
+
+## Features
+
+- Clean, minimal header design
+- Built-in close button with icon
+- Customizable title using the Heading component
+- Memoized for performance optimization
+- Fully accessible
+
+## Props
+
+The `DialogHeader` component accepts the following props:
+
+- `dialogTitle: string`: The title text to display in the header
+- `onClick: () => void`: Callback function triggered when the close button is
+  clicked
+
+## Technical Details
+
+- Uses React.memo for performance optimization
+- Integrates with the UI component system
+- Implements accessible heading structure using the Heading component
+- Uses Icon.Remove for the close button visual
+- Includes data attributes for styling customization
+
+## Usage Example
+
+### Basic Usage
+
+```tsx
+import { DialogHeader } from "./dialog-header";
+
+function BasicDialog() {
+  return (
+    <DialogHeader
+      dialogTitle="Settings"
+      onClose={() => console.log("Dialog closed")}
+    />
+  );
+}
+
+// Example within a Dialog component
+import { Dialog } from "./dialog";
+import { DialogHeader } from "./dialog-header";
+
+function SettingsDialog() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <Dialog isOpen={isOpen}>
+      <DialogHeader
+        dialogTitle="Application Settings"
+        onClose={() => setIsOpen(false)}
+      />
+      <div>Dialog content here...</div>
+    </Dialog>
+  );
+}
+```
+
+# DialogFooter
+
+## Summary
+
+A reusable footer component specifically designed for dialog/modal interfaces.
+The component provides customizable confirm and cancel buttons.
+
+## Features
+
+- Customizable confirm and cancel buttons
+- Optional confirm button handler
+- Fully accessible
+
+## Props
+
+The `DialogFooter` component accepts the following props:
+
+- `onClose: () => void`: Callback function triggered when the cancel button is
+  clicked
+- `onConfirm?: () => void | Promise<void>`: Optional callback function triggered
+  when the confirm button is clicked
+- `confirmLabel: string`: Label text for the confirm button
+- `cancelLabel: string`: Label text for the cancel button
+
+## Technical Details
+
+- Integrates with the UI component system
+- Includes data attributes for styling customization
+
+## Usage Example
+
+### Basic Usage
+
+```tsx
+import { DialogFooter } from "./dialog-footer";
+
+function BasicDialogFooter() {
+  return (
+    <DialogFooter
+      onClose={() => console.log("Dialog closed")}
+      onConfirm={() => console.log("Dialog confirmed")}
+      confirmLabel="Confirm"
+      cancelLabel="Cancel"
+    />
+  );
+}
+```

package/src/components/dialog/views/dialog-footer.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import UI from "#components/ui";
+import Button from "#components/buttons/button";
+
+type DialogFooterProps = {
+  onClose: () => void;
+  onConfirm?: () => void | Promise<void>;
+  confirmLabel: string;
+  cancelLabel: string;
+};
+
+const DialogFooter: React.FC<DialogFooterProps> = ({
+  onClose,
+  onConfirm,
+  confirmLabel,
+  cancelLabel,
+}) => {
+  return (
+    <UI as="section" className="dialog-footer">
+      {cancelLabel && (
+        <Button
+          type="button"
+          onClick={onClose}
+          className="dialog-button button-secondary"
+          data-btn="sm"
+        >
+          {cancelLabel}
+        </Button>
+      )}
+
+      {onConfirm && (
+        <Button
+          type="button"
+          onClick={onConfirm}
+          className="dialog-button button-primary"
+          data-btn="sm"
+        >
+          {confirmLabel}
+        </Button>
+      )}
+    </UI>
+  );
+};
+
+export default DialogFooter;

package/src/components/dialog/{view → views}/dialog-header.stories.tsx

@@ -1,10 +1,10 @@
 import { StoryObj, Meta } from "@storybook/react";
-import { within, expect  } from "@storybook/test";
+import { within, expect } from "@storybook/test";
 
 import DialogHeader from "./dialog-header";
 
 const meta: Meta<typeof DialogHeader> = {
-  title: "FP.REACT Views/Dialog ",
+  title: "FP.REACT Components/Dialog/Views/DialogHeader",
   component: DialogHeader,
   parameters: {
     layout: "centered",
@@ -37,7 +37,6 @@ export const Default: Story = {
 export const WithCloseButton: Story = {
   args: {
     dialogTitle: "Dialog Header with Close",
-    onClose: () => console.log("Close clicked"),
+    onClose: () => {},
   },
 } as Story;
- 

package/src/components/dialog/views/dialog-header.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import UI from "#components/ui";
+import Heading from "#components/heading/heading";
+import Button from "#components/buttons/button";
+import Icon from "#components/icons/icon";
+
+export type DialogHeaderProps = {
+  dialogTitle: string;
+  onClick: () => void;
+} & React.ComponentProps<typeof Heading>;
+
+/**
+ * DialogHeader component displays the header section of a dialog with a title and close button.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.dialogTitle - The title text to display in the dialog header
+ * @param {() => void} props.onClick - Callback function triggered when close button is clicked
+ * @param {string} [props.type='h3'] - Heading type/level to use for the title
+ * @returns {JSX.Element} A dialog header with title and close button
+ *
+ * @example
+ * ```jsx
+ * <DialogHeader
+ *   dialogTitle="Confirm Action"
+ *   onClick={() => setIsOpen(false)}
+ *   type="h2"
+ * />
+ * ```
+ */
+
+const DialogHeader = ({
+  dialogTitle,
+  onClick,
+  type = "h3",
+}: DialogHeaderProps): JSX.Element => {
+  const handleClose = () => {
+    onClick();
+  };
+  return (
+    <UI as="div" classes="dialog-header">
+      <Heading type={type} className="dialog-title">
+        {dialogTitle || "Dialog"}
+      </Heading>
+      <Button
+        type="button"
+        onClick={handleClose}
+        className="dialog-close"
+        aria-label="Close dialog"
+        data-btn="icon"
+      >
+        <Icon>
+          <Icon.Remove size={16} />
+        </Icon>
+      </Button>
+    </UI>
+  );
+};
+
+export default React.memo(DialogHeader);
+DialogHeader.displayName = "DialogHeader";

package/src/components/icons/components/add.tsx

@@ -1,12 +1,12 @@
-import * as React from 'react'
+import * as React from "react";
 
-import { IconProps } from '../types'
-import Svg from './svg'
+import { IconProps } from "../types";
+import Svg from "./svg";
 
 const defaultStyles = {
   ...Svg.styles,
-  fill: 'currentColor',
-}
+  fill: "currentColor",
+};
 
 /**
  * Add Icon component
@@ -16,14 +16,14 @@ const defaultStyles = {
  * @returns {JSX.Element} - Rendered component
  */
 export const Add = ({
-  fill = 'currentColor',
+  fill = "gray",
   size = 24,
-  role = 'img',
-  alt = 'Add icon',
+  role = "img",
+  alt = "Add icon",
   ...props
 }: Pick<
   IconProps,
-  'strokeColor' | 'fill' | 'styles' | 'size' | 'role' | 'alt'
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
 >): JSX.Element => {
   return (
     <Svg size={size} role={role} alt={alt} {...props}>
@@ -34,9 +34,9 @@ export const Add = ({
         />
       </g>
     </Svg>
-  )
-}
+  );
+};
 
-export default Add
-Add.styles = defaultStyles
-Add.displayName = 'Add'
+export default Add;
+Add.styles = defaultStyles;
+Add.displayName = "Add";

package/src/components/icons/components/alert-solid.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const AlertSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M23.707,6.736,17.263.293A1,1,0,0,0,16.556,0H7.444a1,1,0,0,0-.707.293L.293,6.736A1,1,0,0,0,0,7.443v9.114a1,1,0,0,0,.293.707l6.444,6.443A1,1,0,0,0,7.444,24h9.112a1,1,0,0,0,.707-.293l6.444-6.443A1,1,0,0,0,24,16.557V7.443A1,1,0,0,0,23.707,6.736ZM13.645,5,13,14H11l-.608-9ZM12,20a2,2,0,1,1,2-2A2,2,0,0,1,12,20Z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  );
+};
+
+export default AlertSolid;
+AlertSolid.displayName = "AlertSolid";

package/src/components/icons/components/alert-square-solid.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const AlertSquareSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M20,1H4c-1.654,0-3,1.346-3,3V20c0,1.654,1.346,3,3,3H20c1.654,0,3-1.346,3-3V4c0-1.654-1.346-3-3-3ZM11,7c0-.553,.448-1,1-1s1,.447,1,1v6c0,.553-.448,1-1,1s-1-.447-1-1V7Zm1,11.5c-.69,0-1.25-.56-1.25-1.25s.56-1.25,1.25-1.25,1.25,.56,1.25,1.25-.56,1.25-1.25,1.25Z"
+          fill={fill}
+        ></path>
+      </g>
+    </Svg>
+  );
+};
+
+export default AlertSquareSolid;
+AlertSquareSolid.displayName = "AlertSquareSolid";

package/src/components/icons/components/info-solid.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const InfoSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          fill={fill}
+          d="M8,17.06V20h8v-2.94c3.059-1.514,5-4.607,5-8.06c0-4.963-4.038-9-9-9S3,4.037,3,9 C3,12.452,4.941,15.546,8,17.06z M7,9c0-2.757,2.243-5,5-5h1v2h-1c-1.654,0-3,1.346-3,3v1H7V9z"
+        ></path>{" "}
+        <path
+          fill={fill}
+          d="M8,22v1c0,0.553,0.448,1,1,1h6c0.552,0,1-0.447,1-1v-1H8z"
+        ></path>
+      </g>
+    </Svg>
+  );
+};
+
+export default InfoSolid;
+InfoSolid.displayName = "InfoSolid";

package/src/components/icons/components/info.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const Info = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Info icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  );
+};
+
+export default Info;
+Info.displayName = "Info";

package/src/components/icons/components/question-solid.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const QuestionSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M12,0C5.383,0,0,5.383,0,12s5.383,12,12,12,12-5.383,12-12S18.617,0,12,0Zm0,19.5c-.69,0-1.25-.56-1.25-1.25s.56-1.25,1.25-1.25,1.25,.56,1.25,1.25-.56,1.25-1.25,1.25Zm2.688-7.198c-1.444,1.224-1.688,1.667-1.688,2.198,0,.553-.447,1-1,1s-1-.447-1-1c0-1.434,.807-2.379,2.395-3.724,.447-.38,1.844-1.72,1.024-3.046-.532-.861-2.517-.984-4.162-.256-.507,.223-1.096-.006-1.319-.511-.223-.505,.006-1.096,.511-1.319,2.33-1.03,5.463-.924,6.672,1.035,1.103,1.784,.554,3.938-1.433,5.622Z"
+          fill={fill}
+        ></path>
+      </g>
+    </Svg>
+  );
+};
+
+export default QuestionSolid;
+QuestionSolid.displayName = "QuestionSolid";

package/src/components/icons/components/success-solid.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const SuccessSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M12,0C5.373,0,0,5.373,0,12s5.373,12,12,12,12-5.373,12-12C23.981,5.381,18.619,.019,12,0Zm7.207,7.707l-9,9c-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-4-4c-.391-.391-.391-1.023,0-1.414s1.023-.391,1.414,0l3.293,3.293L17.793,6.293c.391-.391,1.023-.391,1.414,0s.391,1.023,0,1.414Z"
+          fill={fill}
+        ></path>
+      </g>
+    </Svg>
+  );
+};
+
+export default SuccessSolid;
+SuccessSolid.displayName = "SuccessSolid";

package/src/components/icons/components/warn-solid.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+
+import { IconProps } from "../types";
+import Svg from "./svg";
+
+/**
+ * Add Icon component
+ * @param {string} fill - Icon fill color (default: 'currentColor')
+ * @param {string} size - Icon size (default: '24')
+ * @param {IconProps} props - Other icon properties
+ * @returns {JSX.Element} - Rendered component
+ */
+export const WarnSolid = ({
+  fill = "currentColor",
+  size = 24,
+  role = "img",
+  alt = "Add icon",
+  ...props
+}: Pick<
+  IconProps,
+  "strokeColor" | "fill" | "styles" | "size" | "role" | "alt"
+>): JSX.Element => {
+  return (
+    <Svg size={size} role={role} alt={alt} {...props}>
+      <g fill={fill}>
+        <path
+          d="M23.641,18.485L14.732,1.643C13.931,.134,12.059-.44,10.55,.361c-.546,.29-.992,.736-1.282,1.282L.359,18.485c-.793,1.504-.217,3.367,1.288,4.16,.445,.235,.942,.357,1.445,.355H20.908c1.7,.005,3.083-1.369,3.088-3.07,.002-.504-.12-1-.355-1.445Zm-11.641,1.515c-.828,0-1.5-.672-1.5-1.5s.672-1.5,1.5-1.5,1.5,.672,1.5,1.5-.672,1.5-1.5,1.5Zm.53-5h-1.061c-.264,0-.483-.205-.499-.469l-.438-7c-.018-.288,.211-.531,.499-.531h1.936c.288,0,.517,.243,.499,.531l-.438,7c-.016,.264-.235,.469-.499,.469Z"
+          fill={fill}
+        />
+      </g>
+    </Svg>
+  );
+};
+
+export default WarnSolid;
+WarnSolid.displayName = "WarnSolid";

package/src/components/icons/icon.stories.tsx

@@ -207,3 +207,45 @@ export const StopSolid: Story = {
     children: <Icon.StopSolid />,
   },
 } as Story;
+
+export const Info: Story = {
+  args: {
+    children: <Icon.Info />,
+  },
+} as Story;
+
+export const Alert: Story = {
+  args: {
+    children: <Icon.AlertSolid />,
+  },
+} as Story;
+
+export const InfoSolid: Story = {
+  args: {
+    children: <Icon.InfoSolid />,
+  },
+} as Story;
+
+export const QuestionSolid: Story = {
+  args: {
+    children: <Icon.QuestionSolid />,
+  },
+} as Story;
+
+export const WarnSolid: Story = {
+  args: {
+    children: <Icon.WarnSolid />,
+  },
+} as Story;
+
+export const SuccessSolid: Story = {
+  args: {
+    children: <Icon.SuccessSolid />,
+  },
+} as Story;
+
+export const AlertSquareSolid: Story = {
+  args: {
+    children: <Icon.AlertSquareSolid />,
+  },
+} as Story;