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

package/dist/ui/atoms/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "react";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    message: string;
+    id?: string;
+}
+/**
+ * ErrorMessage Component
+ *
+ * A component for displaying validation error messages.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <ErrorMessage message="This field is required" id="email-error" />
+ * ```
+ */
+export default function ErrorMessage({ message, id, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/ErrorMessage/ErrorMessage.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ErrorMessage from "./ErrorMessage";
+declare const meta: Meta<typeof ErrorMessage>;
+export declare const Default: StoryObj<typeof ErrorMessage>;
+export declare const WithInput: StoryObj<typeof ErrorMessage>;
+export declare const MultipleErrors: StoryObj<typeof ErrorMessage>;
+export default meta;

package/dist/ui/atoms/ErrorMessage/ErrorMessage.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/Label/Label.d.ts

@@ -0,0 +1,20 @@
+import type { LabelHTMLAttributes } from "react";
+interface Props extends LabelHTMLAttributes<HTMLLabelElement> {
+    variant?: "default" | "required" | "optional";
+    children: React.ReactNode;
+}
+/**
+ * Label Component
+ *
+ * A styled label component for form inputs.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Label htmlFor="email" variant="required">
+ *   Email Address
+ * </Label>
+ * ```
+ */
+export default function Label({ variant, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/Label/Label.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Label from "./Label";
+declare const meta: Meta<typeof Label>;
+export declare const Default: StoryObj<typeof Label>;
+export declare const Required: StoryObj<typeof Label>;
+export declare const Optional: StoryObj<typeof Label>;
+export declare const WithInput: StoryObj<typeof Label>;
+export default meta;

package/dist/ui/atoms/Label/Label.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/NavLink/NavLink.d.ts

@@ -0,0 +1,20 @@
+import type { AnchorHTMLAttributes } from "react";
+interface Props extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    variant?: "default" | "active" | "disabled";
+    children: React.ReactNode;
+}
+/**
+ * NavLink Component
+ *
+ * A navigation link component with active and disabled states.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <NavLink href="/dashboard" variant="active">
+ *   Dashboard
+ * </NavLink>
+ * ```
+ */
+export default function NavLink({ variant, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/atoms/NavLink/NavLink.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import NavLink from "./NavLink";
+declare const meta: Meta<typeof NavLink>;
+export declare const Default: StoryObj<typeof NavLink>;
+export declare const Active: StoryObj<typeof NavLink>;
+export declare const Disabled: StoryObj<typeof NavLink>;
+export declare const NavigationBar: StoryObj<typeof NavLink>;
+export default meta;

package/dist/ui/atoms/NavLink/NavLink.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/atoms/index.d.ts

@@ -6,3 +6,6 @@ export { default as BoxWrapper } from "./BoxWrapper/BoxWrapper";
 export { default as Badge } from "./Badge/Badge";
 export { default as Select } from "./Select/Select";
 export { default as Textarea } from "./Textarea/Textarea";
+export { default as Label } from "./Label/Label";
+export { default as ErrorMessage } from "./ErrorMessage/ErrorMessage";
+export { default as NavLink } from "./NavLink/NavLink";

package/dist/ui/molecules/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "react";
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface Props extends HTMLAttributes<HTMLElement> {
+    items: BreadcrumbItem[];
+    separator?: string;
+}
+/**
+ * Breadcrumb Component
+ *
+ * A breadcrumb navigation component for hierarchical navigation.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb
+ *   items={[
+ *     { label: "Home", href: "/" },
+ *     { label: "Epics", href: "/epics" },
+ *     { label: "Epic Details" }
+ *   ]}
+ * />
+ * ```
+ */
+export default function Breadcrumb({ items, separator, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/molecules/Breadcrumb/Breadcrumb.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Breadcrumb from "./Breadcrumb";
+declare const meta: Meta<typeof Breadcrumb>;
+export declare const Default: StoryObj<typeof Breadcrumb>;
+export declare const TwoLevels: StoryObj<typeof Breadcrumb>;
+export declare const ThreeLevels: StoryObj<typeof Breadcrumb>;
+export declare const CustomSeparator: StoryObj<typeof Breadcrumb>;
+export declare const SingleItem: StoryObj<typeof Breadcrumb>;
+export default meta;

package/dist/ui/molecules/Breadcrumb/Breadcrumb.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/molecules/Form/Form.d.ts

@@ -0,0 +1,24 @@
+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, error, success, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/molecules/Form/Form.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Form from "./Form";
+declare const meta: Meta<typeof Form>;
+export declare const Default: StoryObj<typeof Form>;
+export declare const WithError: StoryObj<typeof Form>;
+export declare const WithSuccess: StoryObj<typeof Form>;
+export declare const Loading: StoryObj<typeof Form>;
+export declare const CompleteForm: StoryObj<typeof Form>;
+export default meta;

package/dist/ui/molecules/Form/Form.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/molecules/Pagination/Pagination.d.ts

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "react";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    totalItems?: number;
+    itemsPerPage?: number;
+    showPageInfo?: boolean;
+}
+/**
+ * Pagination Component
+ *
+ * A pagination component for navigating through pages of data.
+ * Follows Atomic Design principles as a Molecule component.
+ *
+ * @example
+ * ```tsx
+ * <Pagination
+ *   currentPage={1}
+ *   totalPages={10}
+ *   onPageChange={(page) => setPage(page)}
+ *   totalItems={100}
+ *   itemsPerPage={10}
+ * />
+ * ```
+ */
+export default function Pagination({ currentPage, totalPages, onPageChange, totalItems, itemsPerPage, showPageInfo, className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/molecules/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Pagination from "./Pagination";
+declare const meta: Meta<typeof Pagination>;
+export declare const Default: StoryObj<typeof Pagination>;
+export declare const FirstPage: StoryObj<typeof Pagination>;
+export declare const MiddlePage: StoryObj<typeof Pagination>;
+export declare const LastPage: StoryObj<typeof Pagination>;
+export declare const FewPages: StoryObj<typeof Pagination>;
+export declare const WithoutPageInfo: StoryObj<typeof Pagination>;
+export default meta;

package/dist/ui/molecules/Pagination/Pagination.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/molecules/index.d.ts

@@ -1,2 +1,6 @@
 export { default as InputWithLabel } from "./InputWithLabel/InputWithLabel";
 export { default as Card } from "./Card/Card";
+export { default as Form } from "./Form/Form";
+export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb";
+export type { BreadcrumbItem } from "./Breadcrumb/Breadcrumb";
+export { default as Pagination } from "./Pagination/Pagination";

package/dist/ui/organisms/Modal/Modal.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLAttributes, ReactNode } from "react";
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: ReactNode;
+    variant?: "default" | "large" | "fullscreen";
+    showCloseButton?: boolean;
+    footer?: ReactNode;
+}
+/**
+ * Modal Component
+ *
+ * A modal/dialog component with overlay, portal rendering, and accessibility.
+ * Follows Atomic Design principles as an Organism component.
+ *
+ * @example
+ * ```tsx
+ * <Modal isOpen={isOpen} onClose={handleClose} title="Confirm Action">
+ *   <p>Are you sure?</p>
+ * </Modal>
+ * ```
+ */
+export default function Modal({ isOpen, onClose, title, children, variant, showCloseButton, footer, className, ...props }: Props): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/ui/organisms/Modal/Modal.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Modal from "./Modal";
+declare const meta: Meta<typeof Modal>;
+export declare const Default: StoryObj<typeof Modal>;
+export declare const WithFooter: StoryObj<typeof Modal>;
+export declare const Large: StoryObj<typeof Modal>;
+export declare const WithoutTitle: StoryObj<typeof Modal>;
+export declare const WithoutCloseButton: StoryObj<typeof Modal>;
+export default meta;

package/dist/ui/organisms/Modal/Modal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/organisms/Table/Table.d.ts

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface TableColumn<T = any> {
+    key: string;
+    label: string;
+    render?: (value: any, row: T) => ReactNode;
+    sortable?: boolean;
+}
+interface Props<T = any> extends HTMLAttributes<HTMLTableElement> {
+    columns: TableColumn<T>[];
+    data: T[];
+    loading?: boolean;
+    onSort?: (columnKey: string, direction: 'asc' | 'desc') => void;
+    sortColumn?: string;
+    sortDirection?: 'asc' | 'desc';
+    emptyMessage?: string;
+}
+/**
+ * Table Component
+ *
+ * A table component with sorting, loading states, and responsive design.
+ * Follows Atomic Design principles as an Organism component.
+ *
+ * @example
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'status', label: 'Status' }
+ *   ]}
+ *   data={items}
+ * />
+ * ```
+ */
+export default function Table<T = any>({ columns, data, loading, onSort, sortColumn, sortDirection, emptyMessage, className, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/ui/organisms/Table/Table.stories.d.ts

@@ -0,0 +1,9 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Table from "./Table";
+declare const meta: Meta<typeof Table>;
+export declare const Default: StoryObj<typeof Table>;
+export declare const WithSorting: StoryObj<typeof Table>;
+export declare const WithCustomRendering: StoryObj<typeof Table>;
+export declare const Loading: StoryObj<typeof Table>;
+export declare const Empty: StoryObj<typeof Table>;
+export default meta;

package/dist/ui/organisms/Table/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/organisms/index.d.ts

@@ -1 +1,4 @@
 export { default as LoginBox } from "./LoginBox/LoginBox";
+export { default as Modal } from "./Modal/Modal";
+export { default as Table } from "./Table/Table";
+export type { TableColumn } from "./Table/Table";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fabio.caffarello/react-design-system",
   "private": false,
-  "version": "1.2.1",
+  "version": "1.3.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/ui/atoms/ErrorMessage/ErrorMessage.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ErrorMessage from "./ErrorMessage";
+import { Input, Label } from "../../atoms";
+
+const meta: Meta<typeof ErrorMessage> = {
+  title: "UI/Atoms/ErrorMessage",
+  component: ErrorMessage,
+  parameters: {
+    docs: {
+      description: {
+        component: "A component for displaying validation error messages. Accessible with role='alert'.",
+      },
+    },
+  },
+  argTypes: {
+    message: {
+      control: "text",
+      description: "Error message to display",
+    },
+    id: {
+      control: "text",
+      description: "ID for accessibility (should match aria-describedby on input)",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof ErrorMessage> = {
+  args: {
+    message: "This field is required",
+  },
+};
+
+export const WithInput: StoryObj<typeof ErrorMessage> = {
+  render: () => (
+    <div className="space-y-2 max-w-md">
+      <Label htmlFor="email" variant="required">
+        Email Address
+      </Label>
+      <Input
+        id="email"
+        type="email"
+        placeholder="Enter email..."
+        aria-invalid="true"
+        aria-describedby="email-error"
+      />
+      <ErrorMessage message="Please enter a valid email address" id="email-error" />
+    </div>
+  ),
+};
+
+export const MultipleErrors: StoryObj<typeof ErrorMessage> = {
+  render: () => (
+    <div className="space-y-4 max-w-md">
+      <div className="space-y-2">
+        <Label htmlFor="name" variant="required">
+          Name
+        </Label>
+        <Input
+          id="name"
+          aria-invalid="true"
+          aria-describedby="name-error"
+        />
+        <ErrorMessage message="Name must be at least 3 characters" id="name-error" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="password" variant="required">
+          Password
+        </Label>
+        <Input
+          id="password"
+          type="password"
+          aria-invalid="true"
+          aria-describedby="password-error"
+        />
+        <ErrorMessage message="Password must be at least 8 characters" id="password-error" />
+      </div>
+    </div>
+  ),
+};
+
+export default meta;

package/src/ui/atoms/ErrorMessage/ErrorMessage.test.tsx

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import ErrorMessage from "./ErrorMessage";
+
+describe("ErrorMessage", () => {
+  it("renders error message", () => {
+    render(<ErrorMessage message="This field is required" />);
+    expect(screen.getByText("This field is required")).toBeInTheDocument();
+  });
+
+  it("has alert role", () => {
+    render(<ErrorMessage message="Error message" />);
+    const error = screen.getByRole("alert");
+    expect(error).toBeInTheDocument();
+  });
+
+  it("has aria-live attribute", () => {
+    const { container } = render(<ErrorMessage message="Error message" />);
+    const error = container.querySelector('[role="alert"]');
+    expect(error).toHaveAttribute("aria-live", "polite");
+  });
+
+  it("applies custom id", () => {
+    render(<ErrorMessage message="Error message" id="custom-error-id" />);
+    const error = screen.getByRole("alert");
+    expect(error).toHaveAttribute("id", "custom-error-id");
+  });
+
+  it("displays error icon", () => {
+    const { container } = render(<ErrorMessage message="Error message" />);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(<ErrorMessage message="Error" className="custom-class" />);
+    const error = container.querySelector('[role="alert"]');
+    expect(error).toHaveClass("custom-class");
+  });
+});

package/src/ui/atoms/ErrorMessage/ErrorMessage.tsx

@@ -0,0 +1,62 @@
+import type { HTMLAttributes } from "react";
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  message: string;
+  id?: string;
+}
+
+/**
+ * ErrorMessage Component
+ * 
+ * A component for displaying validation error messages.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <ErrorMessage message="This field is required" id="email-error" />
+ * ```
+ */
+export default function ErrorMessage({
+  message,
+  id,
+  className = "",
+  ...props
+}: Props) {
+  const baseClasses = [
+    "mt-1",
+    "text-sm",
+    "text-red-600",
+    "flex",
+    "items-center",
+    "gap-1",
+  ];
+
+  const classes = [
+    ...baseClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div
+      role="alert"
+      id={id}
+      className={classes}
+      aria-live="polite"
+      {...props}
+    >
+      <svg
+        className="h-4 w-4 flex-shrink-0"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        aria-hidden="true"
+      >
+        <path
+          fillRule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
+          clipRule="evenodd"
+        />
+      </svg>
+      <span>{message}</span>
+    </div>
+  );
+}

package/src/ui/atoms/Label/Label.stories.tsx

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Label from "./Label";
+import { Input } from "../../atoms";
+
+const meta: Meta<typeof Label> = {
+  title: "UI/Atoms/Label",
+  component: Label,
+  parameters: {
+    docs: {
+      description: {
+        component: "A styled label component for form inputs. Supports required and optional variants.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "required", "optional"],
+      description: "Visual variant of the label",
+    },
+    htmlFor: {
+      control: "text",
+      description: "ID of the associated input element",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof Label> = {
+  args: {
+    children: "Email Address",
+    htmlFor: "email",
+  },
+  render: (args) => (
+    <div className="space-y-2">
+      <Label {...args} />
+      <Input id="email" placeholder="Enter email..." />
+    </div>
+  ),
+};
+
+export const Required: StoryObj<typeof Label> = {
+  args: {
+    children: "Email Address",
+    htmlFor: "email-required",
+    variant: "required",
+  },
+  render: (args) => (
+    <div className="space-y-2">
+      <Label {...args} />
+      <Input id="email-required" placeholder="Enter email..." required />
+    </div>
+  ),
+};
+
+export const Optional: StoryObj<typeof Label> = {
+  args: {
+    children: "Middle Name",
+    htmlFor: "middle-name",
+    variant: "optional",
+  },
+  render: (args) => (
+    <div className="space-y-2">
+      <Label {...args} />
+      <Input id="middle-name" placeholder="Enter middle name..." />
+    </div>
+  ),
+};
+
+export const WithInput: StoryObj<typeof Label> = {
+  render: () => (
+    <div className="space-y-4 max-w-md">
+      <div className="space-y-2">
+        <Label htmlFor="name" variant="required">
+          Full Name
+        </Label>
+        <Input id="name" placeholder="Enter your name..." />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="email" variant="required">
+          Email
+        </Label>
+        <Input id="email" type="email" placeholder="Enter your email..." />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="phone" variant="optional">
+          Phone Number
+        </Label>
+        <Input id="phone" type="tel" placeholder="Enter your phone..." />
+      </div>
+    </div>
+  ),
+};
+
+export default meta;