@fabio.caffarello/react-design-system 1.2.0 → 1.3.0

package/src/ui/molecules/Form/Form.stories.tsx

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Form from "./Form";
+import { Input, Label, Button, Textarea, Select, ErrorMessage } from "../../atoms";
+
+const meta: Meta<typeof Form> = {
+  title: "UI/Molecules/Form",
+  component: Form,
+  parameters: {
+    docs: {
+      description: {
+        component: "A wrapper component for forms with validation states, error/success messages, and layout.",
+      },
+    },
+  },
+  argTypes: {
+    loading: {
+      control: "boolean",
+      description: "Whether the form is in a loading state",
+    },
+    error: {
+      control: "text",
+      description: "Global error message to display",
+    },
+    success: {
+      control: "text",
+      description: "Success message to display",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof Form> = {
+  args: {
+    onSubmit: (e) => {
+      e.preventDefault();
+      alert("Form submitted!");
+    },
+  },
+  render: (args) => (
+    <Form {...args} className="max-w-md">
+      <div className="space-y-2">
+        <Label htmlFor="name" variant="required">
+          Name
+        </Label>
+        <Input id="name" name="name" placeholder="Enter your name" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="email" variant="required">
+          Email
+        </Label>
+        <Input id="email" name="email" type="email" placeholder="Enter your email" required />
+      </div>
+      <Button type="submit" variant="regular">
+        Submit
+      </Button>
+    </Form>
+  ),
+};
+
+export const WithError: StoryObj<typeof Form> = {
+  args: {
+    error: "Please fix the errors below and try again.",
+    onSubmit: (e) => {
+      e.preventDefault();
+    },
+  },
+  render: (args) => (
+    <Form {...args} className="max-w-md">
+      <div className="space-y-2">
+        <Label htmlFor="email" variant="required">
+          Email
+        </Label>
+        <Input
+          id="email"
+          name="email"
+          type="email"
+          aria-invalid="true"
+          aria-describedby="email-error"
+        />
+        <ErrorMessage message="Please enter a valid email address" id="email-error" />
+      </div>
+      <Button type="submit" variant="regular">
+        Submit
+      </Button>
+    </Form>
+  ),
+};
+
+export const WithSuccess: StoryObj<typeof Form> = {
+  args: {
+    success: "Form submitted successfully!",
+    onSubmit: (e) => {
+      e.preventDefault();
+    },
+  },
+  render: (args) => (
+    <Form {...args} className="max-w-md">
+      <div className="space-y-2">
+        <Label htmlFor="name" variant="required">
+          Name
+        </Label>
+        <Input id="name" name="name" />
+      </div>
+      <Button type="submit" variant="regular">
+        Submit
+      </Button>
+    </Form>
+  ),
+};
+
+export const Loading: StoryObj<typeof Form> = {
+  args: {
+    loading: true,
+    onSubmit: (e) => {
+      e.preventDefault();
+    },
+  },
+  render: (args) => (
+    <Form {...args} className="max-w-md">
+      <div className="space-y-2">
+        <Label htmlFor="name" variant="required">
+          Name
+        </Label>
+        <Input id="name" name="name" disabled />
+      </div>
+      <Button type="submit" variant="regular" disabled>
+        Submitting...
+      </Button>
+    </Form>
+  ),
+};
+
+export const CompleteForm: StoryObj<typeof Form> = {
+  args: {
+    onSubmit: (e) => {
+      e.preventDefault();
+      alert("Form submitted!");
+    },
+  },
+  render: (args) => (
+    <Form {...args} className="max-w-md space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="title" variant="required">
+          Title
+        </Label>
+        <Input id="title" name="title" placeholder="Enter title" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="description" variant="required">
+          Description
+        </Label>
+        <Textarea id="description" name="description" rows={4} placeholder="Enter description" required />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="status" variant="required">
+          Status
+        </Label>
+        <Select
+          id="status"
+          name="status"
+          options={[
+            { value: "DRAFT", label: "Draft" },
+            { value: "ACTIVE", label: "Active" },
+            { value: "COMPLETED", label: "Completed" },
+          ]}
+          placeholder="Select status"
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="priority" variant="optional">
+          Priority
+        </Label>
+        <Select
+          id="priority"
+          name="priority"
+          options={[
+            { value: "LOW", label: "Low" },
+            { value: "MEDIUM", label: "Medium" },
+            { value: "HIGH", label: "High" },
+          ]}
+          placeholder="Select priority"
+        />
+      </div>
+      <div className="flex gap-2">
+        <Button type="submit" variant="regular">
+          Submit
+        </Button>
+        <Button type="button" variant="secondary">
+          Cancel
+        </Button>
+      </div>
+    </Form>
+  ),
+};
+
+export default meta;

package/src/ui/molecules/Form/Form.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Form from "./Form";
+import { Input, Button } from "../../atoms";
+
+describe("Form", () => {
+  it("renders form with children", () => {
+    const { container } = render(
+      <Form>
+        <Input name="test" />
+      </Form>
+    );
+    const form = container.querySelector("form");
+    expect(form).toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
+  });
+
+  it("calls onSubmit when form is submitted", () => {
+    const handleSubmit = vi.fn((e) => {
+      e.preventDefault();
+    });
+    const { container } = render(
+      <Form onSubmit={handleSubmit}>
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+    const form = container.querySelector("form");
+    if (form) {
+      fireEvent.submit(form);
+    }
+    expect(handleSubmit).toHaveBeenCalledTimes(1);
+  });
+
+  it("displays error message when error prop is provided", () => {
+    render(
+      <Form error="Something went wrong">
+        <Input name="test" />
+      </Form>
+    );
+    expect(screen.getByText("Something went wrong")).toBeInTheDocument();
+    expect(screen.getByText("Something went wrong")).toHaveAttribute("role", "alert");
+  });
+
+  it("displays success message when success prop is provided", () => {
+    render(
+      <Form success="Form submitted successfully!">
+        <Input name="test" />
+      </Form>
+    );
+    expect(screen.getByText("Form submitted successfully!")).toBeInTheDocument();
+    expect(screen.getByText("Form submitted successfully!")).toHaveAttribute("role", "alert");
+  });
+
+  it("does not call onSubmit when loading", () => {
+    const handleSubmit = vi.fn();
+    const { container } = render(
+      <Form onSubmit={handleSubmit} loading={true}>
+        <Button type="submit">Submit</Button>
+      </Form>
+    );
+    const form = container.querySelector("form");
+    if (form) {
+      fireEvent.submit(form);
+    }
+    expect(handleSubmit).not.toHaveBeenCalled();
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(
+      <Form className="custom-class">
+        <Input name="test" />
+      </Form>
+    );
+    const form = container.querySelector("form");
+    expect(form).toHaveClass("custom-class");
+  });
+
+  it("has noValidate attribute", () => {
+    const { container } = render(
+      <Form>
+        <Input name="test" />
+      </Form>
+    );
+    const form = container.querySelector("form");
+    expect(form).toHaveAttribute("noValidate");
+  });
+});

package/src/ui/molecules/Form/Form.tsx

@@ -0,0 +1,76 @@
+import type { FormHTMLAttributes, ReactNode } from "react";
+
+interface Props extends FormHTMLAttributes<HTMLFormElement> {
+  children: ReactNode;
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+  loading?: boolean;
+  error?: string | null;
+  success?: string | null;
+}
+
+/**
+ * Form Component
+ * 
+ * A wrapper component for forms with validation states and layout.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <Form onSubmit={handleSubmit} loading={isSubmitting}>
+ *   <Input name="email" />
+ *   <Button type="submit">Submit</Button>
+ * </Form>
+ * ```
+ */
+export default function Form({
+  children,
+  onSubmit,
+  loading = false,
+  error = null,
+  success = null,
+  className = "",
+  ...props
+}: Props) {
+  const baseClasses = [
+    "space-y-4",
+  ];
+
+  const classes = [
+    ...baseClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (onSubmit && !loading) {
+      onSubmit(e);
+    }
+  };
+
+  return (
+    <form
+      className={classes}
+      onSubmit={handleSubmit}
+      noValidate
+      {...props}
+    >
+      {children}
+      {error && (
+        <div
+          role="alert"
+          className="p-3 text-sm text-red-800 bg-red-50 border border-red-200 rounded"
+        >
+          {error}
+        </div>
+      )}
+      {success && (
+        <div
+          role="alert"
+          className="p-3 text-sm text-green-800 bg-green-50 border border-green-200 rounded"
+        >
+          {success}
+        </div>
+      )}
+    </form>
+  );
+}

package/src/ui/molecules/Pagination/Pagination.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import Pagination from "./Pagination";
+
+const meta: Meta<typeof Pagination> = {
+  title: "UI/Molecules/Pagination",
+  component: Pagination,
+  parameters: {
+    docs: {
+      description: {
+        component: "A pagination component for navigating through pages of data. Supports page info and ellipsis for large page counts.",
+      },
+    },
+  },
+  argTypes: {
+    currentPage: {
+      control: "number",
+      description: "Current page number (1-based)",
+    },
+    totalPages: {
+      control: "number",
+      description: "Total number of pages",
+    },
+    showPageInfo: {
+      control: "boolean",
+      description: "Whether to show page information",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof Pagination> = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+        totalItems={100}
+        itemsPerPage={10}
+      />
+    );
+  },
+};
+
+export const FirstPage: StoryObj<typeof Pagination> = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const MiddlePage: StoryObj<typeof Pagination> = {
+  render: () => {
+    const [page, setPage] = useState(5);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+        totalItems={100}
+        itemsPerPage={10}
+      />
+    );
+  },
+};
+
+export const LastPage: StoryObj<typeof Pagination> = {
+  render: () => {
+    const [page, setPage] = useState(10);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+        totalItems={100}
+        itemsPerPage={10}
+      />
+    );
+  },
+};
+
+export const FewPages: StoryObj<typeof Pagination> = {
+  render: () => {
+    const [page, setPage] = useState(2);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={3}
+        onPageChange={setPage}
+      />
+    );
+  },
+};
+
+export const WithoutPageInfo: StoryObj<typeof Pagination> = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    return (
+      <Pagination
+        currentPage={page}
+        totalPages={10}
+        onPageChange={setPage}
+        showPageInfo={false}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/ui/molecules/Pagination/Pagination.test.tsx

@@ -0,0 +1,112 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Pagination from "./Pagination";
+
+describe("Pagination", () => {
+  it("renders pagination controls", () => {
+    const handlePageChange = vi.fn();
+    render(
+      <Pagination
+        currentPage={1}
+        totalPages={5}
+        onPageChange={handlePageChange}
+      />
+    );
+    expect(screen.getByText("Previous")).toBeInTheDocument();
+    expect(screen.getByText("Next")).toBeInTheDocument();
+  });
+
+  it("disables Previous button on first page", () => {
+    const handlePageChange = vi.fn();
+    render(
+      <Pagination
+        currentPage={1}
+        totalPages={5}
+        onPageChange={handlePageChange}
+      />
+    );
+    const prevButton = screen.getByText("Previous");
+    expect(prevButton).toBeDisabled();
+  });
+
+  it("disables Next button on last page", () => {
+    const handlePageChange = vi.fn();
+    render(
+      <Pagination
+        currentPage={5}
+        totalPages={5}
+        onPageChange={handlePageChange}
+      />
+    );
+    const nextButton = screen.getByText("Next");
+    expect(nextButton).toBeDisabled();
+  });
+
+  it("calls onPageChange when Next is clicked", () => {
+    const handlePageChange = vi.fn();
+    render(
+      <Pagination
+        currentPage={1}
+        totalPages={5}
+        onPageChange={handlePageChange}
+      />
+    );
+    const nextButton = screen.getByText("Next");
+    fireEvent.click(nextButton);
+    expect(handlePageChange).toHaveBeenCalledWith(2);
+  });
+
+  it("calls onPageChange when Previous is clicked", () => {
+    const handlePageChange = vi.fn();
+    render(
+      <Pagination
+        currentPage={2}
+        totalPages={5}
+        onPageChange={handlePageChange}
+      />
+    );
+    const prevButton = screen.getByText("Previous");
+    fireEvent.click(prevButton);
+    expect(handlePageChange).toHaveBeenCalledWith(1);
+  });
+
+  it("calls onPageChange when page number is clicked", () => {
+    const handlePageChange = vi.fn();
+    render(
+      <Pagination
+        currentPage={1}
+        totalPages={5}
+        onPageChange={handlePageChange}
+      />
+    );
+    const page3 = screen.getByLabelText("Go to page 3");
+    fireEvent.click(page3);
+    expect(handlePageChange).toHaveBeenCalledWith(3);
+  });
+
+  it("shows page info when provided", () => {
+    render(
+      <Pagination
+        currentPage={2}
+        totalPages={10}
+        onPageChange={() => {}}
+        totalItems={100}
+        itemsPerPage={10}
+      />
+    );
+    expect(screen.getByText(/Showing 11 to 20 of 100 results/)).toBeInTheDocument();
+  });
+
+  it("highlights current page", () => {
+    render(
+      <Pagination
+        currentPage={3}
+        totalPages={5}
+        onPageChange={() => {}}
+      />
+    );
+    const currentPageButton = screen.getByLabelText("Go to page 3");
+    expect(currentPageButton).toHaveAttribute("aria-current", "page");
+    expect(currentPageButton).toHaveClass("bg-indigo-600", "text-white");
+  });
+});