@fpkit/acss 0.5.4 → 0.5.5

package/src/components/dialog/dialog.scss

@@ -0,0 +1,61 @@
+:root {
+  --dialog-min-w: 320px;
+  --dialog-gap: 0.75rem;
+  --dialog-border-color: lightgray;
+  --dialog-border-radius: 0.5rem;
+  --dialog-padding: 0.5rem;
+  --dialog-padding-inline: 1rem;
+  --dialog-close-color: gray;
+  --dialog-button-bg: transparent;
+  --dialog-button-border: transparent 1px solid;
+  --dialog-button-hover-bg: whitesmoke;
+  --dialog-display: flex;
+  --dialog-flex-direction: column;
+}
+
+dialog {
+  min-width: var(--dialog-min-w);
+  gap: var(--dialog-gap);
+  border-color: var(--dialog-border-color);
+  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] {
+    display: var(--dialog-display);
+    flex-direction: var(--dialog-flex-direction);
+    gap: var(--dialog-gap);
+  }
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: 320px;
+  h3 {
+    margin-block-start: 0;
+    margin-block-end: 0;
+  }
+  .dialog-close {
+    margin-block-end: 0;
+  }
+  button[type="button"] {
+    background-color: var(--dialog-button-bg);
+    border: var(--dialog-button-border);
+    cursor: pointer;
+    &:hover,
+    &:focus {
+      border-color: currentColor;
+      background-color: var(--dialog-button-hover-bg);
+    }
+  }
+}
+
+.alert-dialog-actions {
+  display: flex;
+  justify-content: flex-start;
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,61 @@
+import { StoryObj, Meta } from "@storybook/react";
+import { within, expect } from "@storybook/test";
+
+import Dialog from "./dialog";
+
+const meta: Meta<typeof Dialog> = {
+  title: "FP.REACT Components/Dialog",
+  component: Dialog,
+  tags: ["alpha"],
+  parameters: {
+    // actions: { argTypesRegex: "^on.*" },
+    docs: {
+      description: {
+        component: "Dialog component for displaying modal dialogs.",
+      },
+    },
+  },
+  args: {
+    children: "Dialog Content",
+  },
+  decorators: [
+    (Story) => (
+      <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: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/dialog content/i)).toBeInTheDocument();
+    expect(canvas.getByRole("dialog")).toBeInTheDocument();
+  },
+};
+
+export const NoDialogTitle: 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",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.queryByRole("heading")).not.toBeInTheDocument();
+  },
+} as Story;

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import UI from "#components/ui";
+import DialogHeader from "./view/dialog-header";
+
+export type DialogProps = {
+  isOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onCancel?: () => void;
+  dialogTitle?: string;
+  showDialogHeader?: boolean;
+  isAlertDialog?: boolean;
+  children: React.ReactNode;
+};
+
+export const Dialog = ({
+  isOpen = true,
+  dialogTitle = "Dialog",
+  onOpen,
+  onClose,
+  onCancel,
+  showDialogHeader = true,
+  isAlertDialog,
+  children,
+  ...props
+}: DialogProps): JSX.Element => {
+  const dialogRef = React.useRef<HTMLDialogElement>(null);
+  const [dialogOpen, setDialogOpen] = React.useState(isOpen);
+
+  React.useEffect(() => {
+    if (isOpen && onOpen) {
+      dialogRef.current?.showModal();
+      onOpen();
+    }
+    setDialogOpen(isOpen);
+  }, [isOpen]);
+
+  const handleCancelEvent = (e: React.SyntheticEvent<HTMLDialogElement>) => {
+    if (e.currentTarget === e.target) {
+      if (onCancel) {
+        onCancel();
+      }
+    }
+  };
+
+  const handleCloseEvent = (e: React.SyntheticEvent<HTMLDialogElement>) => {
+    if (e.currentTarget === e.target) {
+      if (onClose) {
+        onClose();
+      }
+      isOpen = false;
+      dialogRef.current?.close();
+    }
+  };
+
+  const closeDialog = () => {
+    if (onClose) {
+      onClose();
+    }
+    isOpen = false;
+    dialogRef.current?.close();
+  };
+
+  return (
+    <UI
+      as="dialog"
+      open={dialogOpen}
+      ref={dialogRef}
+      role={isAlertDialog ? "alertdialog" : undefined}
+      onCancel={handleCancelEvent}
+      onClose={handleCloseEvent}
+      {...props}
+    >
+      {showDialogHeader && (
+        <DialogHeader dialogTitle={dialogTitle} onClose={closeDialog} />
+      )}
+      {children}
+    </UI>
+  );
+};
+
+export default React.memo(Dialog);
+Dialog.displayName = "Dialog";

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

@@ -0,0 +1,43 @@
+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 Views/Dialog ",
+  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: () => console.log("Close clicked"),
+  },
+} as Story;
+ 

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

@@ -0,0 +1,32 @@
+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;
+  onClose: () => void;
+};
+
+const DialogHeader = ({
+  dialogTitle,
+  onClose,
+}: DialogHeaderProps): JSX.Element => {
+  return (
+    <UI as="div" classes="dialog-header">
+      {dialogTitle && <Heading type="h3">{dialogTitle}</Heading>}
+      <Button
+        type="button"
+        onClick={onClose}
+        classes="transparent"
+        data-btn="icon pill"
+      >
+        <Icon.Remove size={16} />
+      </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;