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

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

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Dropdown from "./Dropdown";
+import { Button } from "../../atoms";
+
+const meta = {
+  title: "Molecules/Dropdown",
+  component: Dropdown,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    align: {
+      control: "select",
+      options: ["left", "right"],
+    },
+    variant: {
+      control: "select",
+      options: ["default", "minimal"],
+    },
+  },
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    trigger: <Button>Actions</Button>,
+    items: [
+      { label: "Edit", onClick: () => console.log("Edit clicked") },
+      { label: "Duplicate", onClick: () => console.log("Duplicate clicked") },
+      { label: "Delete", onClick: () => console.log("Delete clicked"), variant: "danger" },
+    ],
+  },
+};
+
+export const WithDisabledItem: Story = {
+  args: {
+    trigger: <Button>Actions</Button>,
+    items: [
+      { label: "Edit", onClick: () => console.log("Edit clicked") },
+      { label: "Archive", onClick: () => console.log("Archive clicked"), disabled: true },
+      { label: "Delete", onClick: () => console.log("Delete clicked"), variant: "danger" },
+    ],
+  },
+};
+
+export const AlignedLeft: Story = {
+  args: {
+    trigger: <Button>Menu</Button>,
+    items: [
+      { label: "Option 1", onClick: () => console.log("Option 1") },
+      { label: "Option 2", onClick: () => console.log("Option 2") },
+    ],
+    align: "left",
+  },
+};

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

@@ -0,0 +1,73 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Dropdown from "./Dropdown";
+import { Button } from "../../atoms";
+
+describe("Dropdown", () => {
+  it("renders trigger", () => {
+    render(
+      <Dropdown
+        trigger={<Button>Actions</Button>}
+        items={[]}
+      />
+    );
+    
+    expect(screen.getByText("Actions")).toBeInTheDocument();
+  });
+
+  it("opens dropdown when trigger is clicked", () => {
+    render(
+      <Dropdown
+        trigger={<Button>Actions</Button>}
+        items={[
+          { label: "Edit", onClick: vi.fn() },
+        ]}
+      />
+    );
+    
+    const trigger = screen.getByText("Actions");
+    fireEvent.click(trigger);
+    
+    expect(screen.getByText("Edit")).toBeInTheDocument();
+  });
+
+  it("calls onClick when item is clicked", () => {
+    const handleClick = vi.fn();
+    render(
+      <Dropdown
+        trigger={<Button>Actions</Button>}
+        items={[
+          { label: "Edit", onClick: handleClick },
+        ]}
+      />
+    );
+    
+    const trigger = screen.getByText("Actions");
+    fireEvent.click(trigger);
+    
+    const item = screen.getByText("Edit");
+    fireEvent.click(item);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("closes dropdown when clicking outside", () => {
+    render(
+      <Dropdown
+        trigger={<Button>Actions</Button>}
+        items={[
+          { label: "Edit", onClick: vi.fn() },
+        ]}
+      />
+    );
+    
+    const trigger = screen.getByText("Actions");
+    fireEvent.click(trigger);
+    
+    expect(screen.getByText("Edit")).toBeInTheDocument();
+    
+    fireEvent.mouseDown(document.body);
+    
+    expect(screen.queryByText("Edit")).not.toBeInTheDocument();
+  });
+});

package/src/ui/molecules/Dropdown/Dropdown.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { useState, useRef, useEffect } from "react";
+
+export interface DropdownItem {
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
+  variant?: "default" | "danger";
+}
+
+export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+  trigger: ReactNode;
+  items: DropdownItem[];
+  align?: "left" | "right";
+  variant?: "default" | "minimal";
+}
+
+/**
+ * Dropdown Component
+ * 
+ * A dropdown menu component for displaying actions and options.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <Dropdown
+ *   trigger={<Button>Actions</Button>}
+ *   items={[
+ *     { label: "Edit", onClick: () => handleEdit() },
+ *     { label: "Delete", onClick: () => handleDelete(), variant: "danger" },
+ *   ]}
+ * />
+ * ```
+ */
+export default function Dropdown({
+  trigger,
+  items,
+  align = "right",
+  variant = "default",
+  className = "",
+  ...props
+}: DropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+
+  const handleItemClick = (item: DropdownItem) => {
+    if (!item.disabled) {
+      item.onClick();
+      setIsOpen(false);
+    }
+  };
+
+  const alignClasses = align === "right" ? "right-0" : "left-0";
+
+  return (
+    <div className={`relative inline-block ${className}`} ref={dropdownRef} {...props}>
+      <div onClick={() => setIsOpen(!isOpen)}>
+        {trigger}
+      </div>
+
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 z-10"
+            onClick={() => setIsOpen(false)}
+          />
+          <div
+            className={`absolute z-20 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 ${alignClasses}`}
+            role="menu"
+            aria-orientation="vertical"
+          >
+            <div className="py-1" role="none">
+              {items.map((item, index) => {
+                const itemClasses = [
+                  "block",
+                  "px-4",
+                  "py-2",
+                  "text-sm",
+                  "w-full",
+                  "text-left",
+                  item.disabled
+                    ? "text-gray-400 cursor-not-allowed"
+                    : item.variant === "danger"
+                    ? "text-red-700 hover:bg-red-50"
+                    : "text-gray-700 hover:bg-gray-100",
+                ].filter(Boolean).join(" ");
+
+                return (
+                  <button
+                    key={index}
+                    type="button"
+                    className={itemClasses}
+                    onClick={() => handleItemClick(item)}
+                    disabled={item.disabled}
+                    role="menuitem"
+                  >
+                    {item.label}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import EmptyState from "./EmptyState";
+
+const meta = {
+  title: "Molecules/EmptyState",
+  component: EmptyState,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "withAction", "withIllustration"],
+    },
+  },
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "No items found",
+    message: "There are no items to display at this time.",
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    title: "No epics yet",
+    message: "Get started by creating your first epic to organize your work.",
+    actionLabel: "Create Epic",
+    onAction: () => console.log("Action clicked"),
+    variant: "withAction",
+  },
+};
+
+export const WithIllustration: Story = {
+  args: {
+    title: "No stories found",
+    message: "This epic doesn't have any stories yet. Add a story to get started.",
+    actionLabel: "Add Story",
+    onAction: () => console.log("Action clicked"),
+    variant: "withIllustration",
+    illustration: (
+      <svg
+        className="mx-auto h-12 w-12 text-gray-400"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={2}
+          d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+        />
+      </svg>
+    ),
+  },
+};

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

@@ -0,0 +1,55 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import EmptyState from "./EmptyState";
+
+describe("EmptyState", () => {
+  it("renders title and message", () => {
+    render(<EmptyState title="No items" message="No items found" />);
+    
+    expect(screen.getByText("No items")).toBeInTheDocument();
+    expect(screen.getByText("No items found")).toBeInTheDocument();
+  });
+
+  it("renders action button when actionLabel and onAction are provided", () => {
+    const handleAction = vi.fn();
+    render(
+      <EmptyState
+        title="No items"
+        message="No items found"
+        actionLabel="Create Item"
+        onAction={handleAction}
+      />
+    );
+    
+    const button = screen.getByText("Create Item");
+    expect(button).toBeInTheDocument();
+    
+    button.click();
+    expect(handleAction).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders illustration when provided", () => {
+    const illustration = <div data-testid="illustration">Illustration</div>;
+    render(
+      <EmptyState
+        title="No items"
+        message="No items found"
+        illustration={illustration}
+      />
+    );
+    
+    expect(screen.getByTestId("illustration")).toBeInTheDocument();
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(
+      <EmptyState
+        title="No items"
+        message="No items found"
+        className="custom-class"
+      />
+    );
+    
+    expect(container.firstChild).toHaveClass("custom-class");
+  });
+});

package/src/ui/molecules/EmptyState/EmptyState.tsx

@@ -0,0 +1,81 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { Button } from "../../atoms";
+import { Text } from "../../atoms";
+
+export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  message: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  illustration?: ReactNode;
+  variant?: "default" | "withAction" | "withIllustration";
+}
+
+/**
+ * EmptyState Component
+ * 
+ * A component for displaying empty states when there's no content to show.
+ * Follows Atomic Design principles as a Molecule component.
+ * 
+ * @example
+ * ```tsx
+ * <EmptyState
+ *   title="No epics yet"
+ *   message="Get started by creating your first epic"
+ *   actionLabel="Create Epic"
+ *   onAction={() => router.push('/epics/new')}
+ * />
+ * ```
+ */
+export default function EmptyState({
+  title,
+  message,
+  actionLabel,
+  onAction,
+  illustration,
+  variant = "default",
+  className = "",
+  ...props
+}: EmptyStateProps) {
+  const baseClasses = [
+    "flex",
+    "flex-col",
+    "items-center",
+    "justify-center",
+    "text-center",
+    "py-12",
+    "px-4",
+  ];
+
+  const classes = [
+    ...baseClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  const showAction = variant === "withAction" || (actionLabel && onAction);
+  const showIllustration = variant === "withIllustration" || illustration;
+
+  return (
+    <div className={classes} {...props}>
+      {showIllustration && illustration && (
+        <div className="mb-4">
+          {illustration}
+        </div>
+      )}
+      
+      <Text as="h3" className="text-lg font-semibold text-gray-900 mb-2">
+        {title}
+      </Text>
+      
+      <Text as="p" className="text-sm text-gray-500 mb-6 max-w-sm">
+        {message}
+      </Text>
+      
+      {showAction && actionLabel && onAction && (
+        <Button variant="regular" onClick={onAction}>
+          {actionLabel}
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/ui/molecules/index.ts

@@ -8,3 +8,9 @@ export { default as Breadcrumb } from "./Breadcrumb/Breadcrumb";
 export type { BreadcrumbItem } from "./Breadcrumb/Breadcrumb";
 
 export { default as Pagination } from "./Pagination/Pagination";
+
+export { default as EmptyState } from "./EmptyState/EmptyState";
+export type { EmptyStateProps } from "./EmptyState/EmptyState";
+
+export { default as Dropdown } from "./Dropdown/Dropdown";
+export type { DropdownProps, DropdownItem } from "./Dropdown/Dropdown";