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

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

@@ -0,0 +1,47 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Label from "./Label";
+
+describe("Label", () => {
+  it("renders with children", () => {
+    render(<Label htmlFor="test">Test Label</Label>);
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+  });
+
+  it("associates with input via htmlFor", () => {
+    render(
+      <>
+        <Label htmlFor="test-input">Test Label</Label>
+        <input id="test-input" />
+      </>
+    );
+    const label = screen.getByText("Test Label");
+    const input = screen.getByRole("textbox");
+    expect(label).toHaveAttribute("for", "test-input");
+    expect(input).toHaveAttribute("id", "test-input");
+  });
+
+  it("renders with default variant", () => {
+    const { container } = render(<Label htmlFor="test">Label</Label>);
+    const label = container.querySelector("label");
+    expect(label).toHaveClass("block", "text-sm", "font-medium", "text-gray-700");
+  });
+
+  it("renders with required variant", () => {
+    const { container } = render(<Label htmlFor="test" variant="required">Label</Label>);
+    const label = container.querySelector("label");
+    expect(label).toHaveClass("after:content-['*']", "after:ml-0.5", "after:text-red-500");
+  });
+
+  it("renders with optional variant", () => {
+    const { container } = render(<Label htmlFor="test" variant="optional">Label</Label>);
+    const label = container.querySelector("label");
+    expect(label).toHaveClass("after:content-['(optional)']", "after:ml-1", "after:text-gray-400");
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(<Label htmlFor="test" className="custom-class">Label</Label>);
+    const label = container.querySelector("label");
+    expect(label).toHaveClass("custom-class");
+  });
+});

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

@@ -0,0 +1,51 @@
+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 = "default",
+  className = "",
+  children,
+  ...props
+}: Props) {
+  const baseClasses = [
+    "block",
+    "text-sm",
+    "font-medium",
+    "text-gray-700",
+  ];
+
+  const variantClasses: Record<NonNullable<Props["variant"]>, string> = {
+    default: "",
+    required: "after:content-['*'] after:ml-0.5 after:text-red-500",
+    optional: "after:content-['(optional)'] after:ml-1 after:text-gray-400 after:font-normal",
+  };
+
+  const classes = [
+    ...baseClasses,
+    variantClasses[variant],
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <label className={classes} {...props}>
+      {children}
+    </label>
+  );
+}

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

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import NavLink from "./NavLink";
+
+const meta: Meta<typeof NavLink> = {
+  title: "UI/Atoms/NavLink",
+  component: NavLink,
+  parameters: {
+    docs: {
+      description: {
+        component: "A navigation link component with active and disabled states. Used in headers, sidebars, and breadcrumbs.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "active", "disabled"],
+      description: "Visual variant of the link",
+    },
+    href: {
+      control: "text",
+      description: "URL for the link",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof NavLink> = {
+  args: {
+    children: "Dashboard",
+    href: "/dashboard",
+  },
+};
+
+export const Active: StoryObj<typeof NavLink> = {
+  args: {
+    children: "Epics",
+    href: "/epics",
+    variant: "active",
+  },
+};
+
+export const Disabled: StoryObj<typeof NavLink> = {
+  args: {
+    children: "Coming Soon",
+    variant: "disabled",
+  },
+};
+
+export const NavigationBar: StoryObj<typeof NavLink> = {
+  render: () => (
+    <nav className="flex space-x-8">
+      <NavLink href="/" variant="active">
+        Dashboard
+      </NavLink>
+      <NavLink href="/epics">
+        Epics
+      </NavLink>
+      <NavLink href="/stories">
+        Stories
+      </NavLink>
+      <NavLink href="/tasks">
+        Tasks
+      </NavLink>
+      <NavLink variant="disabled">
+        Coming Soon
+      </NavLink>
+    </nav>
+  ),
+};
+
+export default meta;

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

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import NavLink from "./NavLink";
+
+describe("NavLink", () => {
+  it("renders as anchor with href", () => {
+    render(<NavLink href="/test">Test Link</NavLink>);
+    const link = screen.getByText("Test Link");
+    expect(link).toBeInTheDocument();
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveAttribute("href", "/test");
+  });
+
+  it("renders as span when disabled", () => {
+    render(<NavLink variant="disabled">Disabled Link</NavLink>);
+    const link = screen.getByText("Disabled Link");
+    expect(link.tagName).toBe("SPAN");
+    expect(link).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("applies default variant classes", () => {
+    const { container } = render(<NavLink href="/test">Link</NavLink>);
+    const link = container.querySelector("a");
+    expect(link).toHaveClass("border-transparent", "text-gray-500");
+  });
+
+  it("applies active variant classes", () => {
+    const { container } = render(<NavLink href="/test" variant="active">Link</NavLink>);
+    const link = container.querySelector("a");
+    expect(link).toHaveClass("border-indigo-500", "text-gray-900");
+  });
+
+  it("applies disabled variant classes", () => {
+    const { container } = render(<NavLink variant="disabled">Link</NavLink>);
+    const link = container.querySelector("span");
+    expect(link).toHaveClass("text-gray-300", "cursor-not-allowed");
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(<NavLink href="/test" className="custom-class">Link</NavLink>);
+    const link = container.querySelector("a");
+    expect(link).toHaveClass("custom-class");
+  });
+});

package/src/ui/atoms/NavLink/NavLink.tsx

@@ -0,0 +1,63 @@
+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 = "default",
+  className = "",
+  children,
+  ...props
+}: Props) {
+  const baseClasses = [
+    "inline-flex",
+    "items-center",
+    "px-1",
+    "pt-1",
+    "border-b-2",
+    "text-sm",
+    "font-medium",
+    "transition-colors",
+  ];
+
+  const variantClasses: Record<NonNullable<Props["variant"]>, string> = {
+    default: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+    active: "border-indigo-500 text-gray-900",
+    disabled: "border-transparent text-gray-300 cursor-not-allowed pointer-events-none",
+  };
+
+  const classes = [
+    ...baseClasses,
+    variantClasses[variant],
+    className,
+  ].filter(Boolean).join(" ");
+
+  if (variant === "disabled") {
+    return (
+      <span className={classes} aria-disabled="true">
+        {children}
+      </span>
+    );
+  }
+
+  return (
+    <a className={classes} {...props}>
+      {children}
+    </a>
+  );
+}

package/src/ui/atoms/index.ts

@@ -13,3 +13,9 @@ 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/src/ui/molecules/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Breadcrumb from "./Breadcrumb";
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: "UI/Molecules/Breadcrumb",
+  component: Breadcrumb,
+  parameters: {
+    docs: {
+      description: {
+        component: "A breadcrumb navigation component for hierarchical navigation. Accessible with proper ARIA labels.",
+      },
+    },
+  },
+  argTypes: {
+    items: {
+      control: "object",
+      description: "Array of breadcrumb items",
+    },
+    separator: {
+      control: "text",
+      description: "Separator between items",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof Breadcrumb> = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Epics", href: "/epics" },
+      { label: "Epic Details" },
+    ],
+  },
+};
+
+export const TwoLevels: StoryObj<typeof Breadcrumb> = {
+  args: {
+    items: [
+      { label: "Dashboard", href: "/" },
+      { label: "Epics" },
+    ],
+  },
+};
+
+export const ThreeLevels: StoryObj<typeof Breadcrumb> = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Epics", href: "/epics" },
+      { label: "User Authentication", href: "/epics/1" },
+      { label: "Edit" },
+    ],
+  },
+};
+
+export const CustomSeparator: StoryObj<typeof Breadcrumb> = {
+  args: {
+    items: [
+      { label: "Home", href: "/" },
+      { label: "Epics", href: "/epics" },
+      { label: "Details" },
+    ],
+    separator: "›",
+  },
+};
+
+export const SingleItem: StoryObj<typeof Breadcrumb> = {
+  args: {
+    items: [
+      { label: "Dashboard" },
+    ],
+  },
+};
+
+export default meta;

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

@@ -0,0 +1,89 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import Breadcrumb from "./Breadcrumb";
+
+describe("Breadcrumb", () => {
+  it("renders breadcrumb items", () => {
+    render(
+      <Breadcrumb
+        items={[
+          { label: "Home", href: "/" },
+          { label: "Epics" },
+        ]}
+      />
+    );
+    expect(screen.getByText("Home")).toBeInTheDocument();
+    expect(screen.getByText("Epics")).toBeInTheDocument();
+  });
+
+  it("has aria-label", () => {
+    const { container } = render(
+      <Breadcrumb items={[{ label: "Home" }]} />
+    );
+    const nav = container.querySelector("nav");
+    expect(nav).toHaveAttribute("aria-label", "Breadcrumb");
+  });
+
+  it("renders last item as current page", () => {
+    render(
+      <Breadcrumb
+        items={[
+          { label: "Home", href: "/" },
+          { label: "Current" },
+        ]}
+      />
+    );
+    const current = screen.getByText("Current");
+    expect(current).toHaveAttribute("aria-current", "page");
+  });
+
+  it("renders links for non-last items with href", () => {
+    render(
+      <Breadcrumb
+        items={[
+          { label: "Home", href: "/" },
+          { label: "Current" },
+        ]}
+      />
+    );
+    const link = screen.getByText("Home");
+    expect(link.tagName).toBe("A");
+    expect(link).toHaveAttribute("href", "/");
+  });
+
+  it("renders separator between items", () => {
+    const { container } = render(
+      <Breadcrumb
+        items={[
+          { label: "Home", href: "/" },
+          { label: "Epics", href: "/epics" },
+          { label: "Current" },
+        ]}
+      />
+    );
+    const separators = container.querySelectorAll('[aria-hidden="true"]');
+    expect(separators.length).toBe(2);
+  });
+
+  it("uses custom separator", () => {
+    const { container } = render(
+      <Breadcrumb
+        items={[
+          { label: "Home", href: "/" },
+          { label: "Current" },
+        ]}
+        separator="›"
+      />
+    );
+    const separator = container.querySelector('[aria-hidden="true"]');
+    expect(separator?.textContent).toBe("›");
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(
+      <Breadcrumb items={[{ label: "Home" }]} className="custom-class" />
+    );
+    const nav = container.querySelector("nav");
+    expect(nav).toHaveClass("custom-class");
+  });
+});

package/src/ui/molecules/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,79 @@
+import type { HTMLAttributes } from "react";
+import NavLink from "../../atoms/NavLink/NavLink";
+
+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) {
+  const baseClasses = [
+    "flex",
+    "items-center",
+    "space-x-2",
+    "text-sm",
+  ];
+
+  const classes = [
+    ...baseClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <nav aria-label="Breadcrumb" className={classes} {...(props as any)}>
+      <ol className="flex items-center space-x-2">
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1;
+          
+          return (
+            <li key={index} className="flex items-center">
+              {index > 0 && (
+                <span className="mx-2 text-gray-400" aria-hidden="true">
+                  {separator}
+                </span>
+              )}
+              {isLast ? (
+                <span className="text-gray-900 font-medium" aria-current="page">
+                  {item.label}
+                </span>
+              ) : item.href ? (
+                <NavLink href={item.href} variant="default">
+                  {item.label}
+                </NavLink>
+              ) : (
+                <span className="text-gray-500">{item.label}</span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}