@fpkit/acss 0.5.4 → 0.5.6

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

@@ -0,0 +1,42 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
+
+import DialogHeader from "./dialog-header";
+
+const meta: Meta<typeof DialogHeader> = {
+  title: "FP.REACT Components/Dialog/Views/DialogHeader",
+  component: DialogHeader,
+  parameters: {
+    layout: "centered",
+    actions: { argTypesRegex: "^on.*" },
+    docs: {
+      description: {
+        component:
+          "DialogHeader component - A header component for dialog/modal windows that displays a title and optional close button.",
+      },
+    },
+  },
+  args: {
+    children: "Dialog Header",
+  },
+} as Meta;
+
+export default meta;
+type Story = StoryObj<typeof DialogHeader>;
+
+export const Default: Story = {
+  args: {
+    dialogTitle: "Default Dialog ",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/default dialog/i)).toBeInTheDocument();
+  },
+} as Story;
+
+export const WithCloseButton: Story = {
+  args: {
+    dialogTitle: "Dialog Header with Close",
+    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/form/form.stories.tsx

@@ -1,28 +1,28 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-
-import Form from './form'
-import './form.scss'
+import Form from "./form";
+import "./form.scss";
 
 const meta: Meta<typeof Form> = {
-  title: 'FP.REACT Forms/Examples',
+  title: "FP.REACT Forms/Examples",
+  tags: ["beta"],
   component: Form,
   parameters: {
     docs: {
       description: {
-        component: 'Form description here...',
+        component: "Form description here...",
       },
     },
   },
   args: {
-    children: 'Link',
-    name: 'my-form',
+    children: "Link",
+    name: "my-form",
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Form>
+export default meta;
+type Story = StoryObj<typeof Form>;
 
 export const FormComponent: Story = {
   args: {
@@ -42,8 +42,8 @@ export const FormComponent: Story = {
     ),
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const form = canvas.getByRole('form')
-    await expect(form).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    const form = canvas.getByRole("form");
+    await expect(form).toBeInTheDocument();
   },
-} as Story
+} as Story;

package/src/components/form/input.stories.tsx

@@ -1,13 +1,13 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, userEvent, expect } from "@storybook/test";
 
-
-import Input from './inputs'
-import './form.scss'
+import Input from "./inputs";
+import "./form.scss";
 
 const meta: Meta<typeof Input> = {
-  title: 'FP.REACT  Forms/Inputs',
+  title: "FP.REACT  Forms/Inputs",
   component: Input,
+  tags: ["rc"],
   args: {},
   parameters: {
     docs: {
@@ -17,18 +17,18 @@ const meta: Meta<typeof Input> = {
       },
     },
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Input>
+export default meta;
+type Story = StoryObj<typeof Input>;
 
 export const InputComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByRole('textbox')).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("textbox")).toBeInTheDocument();
   },
-}
+};
 
 //required input story
 export const RequiredInput: Story = {
@@ -41,32 +41,32 @@ export const RequiredInput: Story = {
     },
   },
   args: {
-    type: 'text',
+    type: "text",
     required: true,
-    placeholder: 'This Field is required (placeholder)',
+    placeholder: "This Field is required (placeholder)",
   },
 
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const input = canvas.getByRole('textbox')
-    expect(input).toBeRequired()
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    expect(input).toBeRequired();
 
-    await userEvent.type(input, 'test')
-    expect(input).toBeValid()
+    await userEvent.type(input, "test");
+    expect(input).toBeValid();
 
-    await userEvent.clear(input)
+    await userEvent.clear(input);
 
-    userEvent.type(input, '\n')
-    expect(input).toBeInvalid()
+    userEvent.type(input, "\n");
+    expect(input).toBeInvalid();
   },
-} as Story
+} as Story;
 
 export const DefaultRequired: Story = {
   args: {
-    type: 'text',
+    type: "text",
     required: true,
   },
-} as Story
+} as Story;
 
 export const InputDisabled: Story = {
   parameters: {
@@ -78,78 +78,78 @@ export const InputDisabled: Story = {
     },
   },
   args: {
-    type: 'text',
+    type: "text",
     isDisabled: true,
   },
-} as Story
+} as Story;
 
 export const EmailInput: Story = {
   args: {
-    type: 'email',
+    type: "email",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const input = canvas.getByRole('textbox')
-    expect(input).toHaveAttribute('type', 'email')
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    expect(input).toHaveAttribute("type", "email");
 
-    await userEvent.type(input, 'test@example.com')
-    expect(input).toHaveValue('test@example.com')
+    await userEvent.type(input, "test@example.com");
+    expect(input).toHaveValue("test@example.com");
   },
-} as Story
+} as Story;
 
 export const PasswordInput: Story = {
   args: {
-    type: 'password',
+    type: "password",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const input = canvas.getByPlaceholderText(/password/i)
-    expect(input).toHaveAttribute('type', 'password')
+    const canvas = within(canvasElement);
+    const input = canvas.getByPlaceholderText(/password/i);
+    expect(input).toHaveAttribute("type", "password");
 
-    await userEvent.type(input, 'password')
-    expect(input).toHaveValue('password')
+    await userEvent.type(input, "password");
+    expect(input).toHaveValue("password");
   },
-} as Story
+} as Story;
 
 export const SearchInput: Story = {
   args: {
-    type: 'search',
+    type: "search",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const input = canvas.getByRole('searchbox')
-    expect(input).toHaveAttribute('type', 'search')
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("searchbox");
+    expect(input).toHaveAttribute("type", "search");
 
-    await userEvent.type(input, 'search term')
-    expect(input).toHaveValue('search term')
+    await userEvent.type(input, "search term");
+    expect(input).toHaveValue("search term");
   },
-} as Story
+} as Story;
 
 export const TelInput: Story = {
   args: {
-    type: 'tel',
+    type: "tel",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const input = canvas.getByRole('textbox')
-    expect(input).toHaveAttribute('type', 'tel')
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    expect(input).toHaveAttribute("type", "tel");
 
-    await userEvent.type(input, '1234567890')
-    expect(input).toHaveValue('1234567890')
+    await userEvent.type(input, "1234567890");
+    expect(input).toHaveValue("1234567890");
   },
-} as Story
+} as Story;
 
 // URL text input story
 export const UrlInput: Story = {
   args: {
-    type: 'url',
+    type: "url",
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const input = canvas.getByRole('textbox')
-    expect(input).toHaveAttribute('type', 'url')
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    expect(input).toHaveAttribute("type", "url");
 
-    await userEvent.type(input, 'https://example.com')
-    expect(input).toHaveValue('https://example.com')
+    await userEvent.type(input, "https://example.com");
+    expect(input).toHaveValue("https://example.com");
   },
-} as Story
+} as Story;

package/src/components/form/select.stories.tsx

@@ -1,21 +1,20 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-
-import Select from './select'
-import React from 'react'
+import Select from "./select";
+import React from "react";
 const meta: Meta<typeof Select> = {
-  title: 'FP.REACT Forms/Select',
+  title: "FP.REACT Forms/Select",
+  tags: ["rc"],
   component: Select,
   parameters: {
     docs: {
       description: {
-        component: 'Base select/Combobox component',
+        component: "Base select/Combobox component",
       },
     },
   },
   args: {
-    // @ts-ignore
     children: (
       <>
         <Select.Option selectValue="value" selectLabel="Option 1" />
@@ -24,15 +23,23 @@ const meta: Meta<typeof Select> = {
       </>
     ),
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Select>
+export default meta;
+type Story = StoryObj<typeof Select>;
 
 export const SelectComponent: Story = {
-  args: {},
+  args: {
+    children: (
+      <>
+        <Select.Option selectValue="value" selectLabel="Option 1" />
+        <Select.Option selectValue="value" selectLabel="Option 2" />
+        <Select.Option selectValue="value" selectLabel="Option 3" />
+      </>
+    ),
+  },
   play: async ({ canvasElement }) => {
-    // const canvas = within(canvasElement)
-    // expect(canvas.getByRole('combobox')).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByRole("combobox")).toBeInTheDocument();
   },
-}
+} as Story;

package/src/components/heading/heading.stories.tsx

@@ -1,75 +1,74 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, expect } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
-
-import Heading from './heading'
+import Heading from "./heading";
 
 const meta: Meta<typeof Heading> = {
-  title: 'FP.REACT Components/Heading',
+  title: "FP.REACT Components/Heading",
   component: Heading,
+  tags: ["version:1.0.0"],
   parameters: {
-    actions: { argTypesRegex: '^on.*' },
+    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
-        component: 'Heading description here...',
+        component: "Heading description here...",
       },
     },
   },
   args: {
-    // @ts-ignore
-    children: 'Default title',
+    children: "Default title",
   },
-} as Story
+} as Story;
 
-export default meta
-type Story = StoryObj<typeof Heading>
+export default meta;
+type Story = StoryObj<typeof Heading>;
 
 export const HeadingComponent: Story = {
   args: {},
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    expect(canvas.getByText(/default title/i)).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/default title/i)).toBeInTheDocument();
   },
-}
+};
 
 export const HeadingOne: Story = {
   args: {
-    type: 'h1',
-    children: 'Heading One',
+    type: "h1",
+    children: "Heading One",
   },
-} as Story
+} as Story;
 
 export const HeadingTwo: Story = {
   args: {
-    type: 'h2',
-    children: 'Heading Two',
+    type: "h2",
+    children: "Heading Two",
   },
-} as Story
+} as Story;
 
 export const HeadingThree: Story = {
   args: {
-    type: 'h3',
-    children: 'Heading Three',
+    type: "h3",
+    children: "Heading Three",
   },
-} as Story
+} as Story;
 
 export const HeadingFour: Story = {
   args: {
-    type: 'h4',
-    children: 'Heading Four',
+    type: "h4",
+    children: "Heading Four",
   },
-} as Story
+} as Story;
 
 export const HeadingFive: Story = {
   args: {
-    type: 'h5',
-    children: 'Heading Five',
+    type: "h5",
+    children: "Heading Five",
   },
-} as Story
+} as Story;
 
 export const HeadingSix: Story = {
   args: {
-    type: 'h6',
-    children: 'Heading Six',
+    type: "h6",
+    children: "Heading Six",
   },
-} as Story
+} as Story;

package/src/components/heading/heading.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import UI from '#components/ui'
-
+import { type } from 'os'
 
 export type TitleProps = {
   children: React.ReactNode

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";