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

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

@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "react";
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: "text" | "card" | "list" | "circle";
+    width?: string;
+    height?: string;
+    lines?: number;
+}
+/**
+ * Skeleton Component
+ *
+ * A skeleton loader component for displaying loading states.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Skeleton variant="card" />
+ * <Skeleton variant="text" lines={3} />
+ * ```
+ */
+export default function Skeleton({ variant, width, height, lines, className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import type { StoryObj } from "@storybook/react";
+import Skeleton from "./Skeleton";
+declare const meta: {
+    title: string;
+    component: typeof Skeleton;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Text: Story;
+export declare const TextMultipleLines: Story;
+export declare const Card: Story;
+export declare const List: Story;
+export declare const Circle: Story;
+export declare const CustomSize: Story;

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

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

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

@@ -0,0 +1,21 @@
+import type { HTMLAttributes, ReactNode } from "react";
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+    content: string;
+    children: ReactNode;
+    position?: "top" | "bottom" | "left" | "right";
+    delay?: number;
+}
+/**
+ * Tooltip Component
+ *
+ * A tooltip component for displaying additional information on hover.
+ * Follows Atomic Design principles as an Atom component.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ * ```
+ */
+export default function Tooltip({ content, children, position, delay, className, ...props }: TooltipProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,23 @@
+import type { StoryObj } from "@storybook/react";
+import Tooltip from "./Tooltip";
+declare const meta: {
+    title: string;
+    component: typeof Tooltip;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        position: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Top: Story;
+export declare const Bottom: Story;
+export declare const Left: Story;
+export declare const Right: Story;

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

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

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

@@ -9,3 +9,7 @@ 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";
+export { default as Tooltip } from "./Tooltip/Tooltip";
+export type { TooltipProps } from "./Tooltip/Tooltip";
+export { default as Skeleton } from "./Skeleton/Skeleton";
+export type { SkeletonProps } from "./Skeleton/Skeleton";

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

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, ReactNode } 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, variant, className, ...props }: DropdownProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,25 @@
+import type { StoryObj } from "@storybook/react";
+import Dropdown from "./Dropdown";
+declare const meta: {
+    title: string;
+    component: typeof Dropdown;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        align: {
+            control: "select";
+            options: string[];
+        };
+        variant: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDisabledItem: Story;
+export declare const AlignedLeft: Story;

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

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

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

@@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from "react";
+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, className, ...props }: EmptyStateProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+import type { StoryObj } from "@storybook/react";
+import EmptyState from "./EmptyState";
+declare const meta: {
+    title: string;
+    component: typeof EmptyState;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        variant: {
+            control: "select";
+            options: string[];
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithAction: Story;
+export declare const WithIllustration: Story;

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

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

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

@@ -4,3 +4,7 @@ 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";
+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";

package/package.json

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

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

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Skeleton from "./Skeleton";
+
+const meta = {
+  title: "Atoms/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["text", "card", "list", "circle"],
+    },
+  },
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Text: Story = {
+  args: {
+    variant: "text",
+  },
+};
+
+export const TextMultipleLines: Story = {
+  args: {
+    variant: "text",
+    lines: 3,
+  },
+};
+
+export const Card: Story = {
+  args: {
+    variant: "card",
+  },
+};
+
+export const List: Story = {
+  args: {
+    variant: "list",
+  },
+};
+
+export const Circle: Story = {
+  args: {
+    variant: "circle",
+    width: "48px",
+    height: "48px",
+  },
+};
+
+export const CustomSize: Story = {
+  args: {
+    variant: "text",
+    width: "200px",
+    height: "20px",
+  },
+};

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

@@ -0,0 +1,40 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import Skeleton from "./Skeleton";
+
+describe("Skeleton", () => {
+  it("renders with default variant", () => {
+    const { container } = render(<Skeleton />);
+    const skeleton = container.firstChild as HTMLElement;
+    expect(skeleton).toHaveClass("h-4");
+  });
+
+  it("renders with card variant", () => {
+    const { container } = render(<Skeleton variant="card" />);
+    const skeleton = container.firstChild as HTMLElement;
+    expect(skeleton).toHaveClass("h-32");
+  });
+
+  it("renders multiple lines for text variant", () => {
+    const { container } = render(<Skeleton variant="text" lines={3} />);
+    const lines = container.querySelectorAll(".animate-pulse");
+    expect(lines.length).toBe(3);
+  });
+
+  it("applies custom width and height", () => {
+    const { container } = render(
+      <Skeleton width="100px" height="50px" />
+    );
+    const skeleton = container.firstChild as HTMLElement;
+    expect(skeleton.style.width).toBe("100px");
+    expect(skeleton.style.height).toBe("50px");
+  });
+
+  it("applies custom className", () => {
+    const { container } = render(
+      <Skeleton className="custom-class" />
+    );
+    const skeleton = container.firstChild as HTMLElement;
+    expect(skeleton).toHaveClass("custom-class");
+  });
+});

package/src/ui/atoms/Skeleton/Skeleton.tsx

@@ -0,0 +1,70 @@
+import type { HTMLAttributes } from "react";
+
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: "text" | "card" | "list" | "circle";
+  width?: string;
+  height?: string;
+  lines?: number;
+}
+
+/**
+ * Skeleton Component
+ * 
+ * A skeleton loader component for displaying loading states.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Skeleton variant="card" />
+ * <Skeleton variant="text" lines={3} />
+ * ```
+ */
+export default function Skeleton({
+  variant = "text",
+  width,
+  height,
+  lines = 1,
+  className = "",
+  ...props
+}: SkeletonProps) {
+  const baseClasses = [
+    "animate-pulse",
+    "bg-gray-200",
+    "rounded",
+  ];
+
+  const variantClasses: Record<NonNullable<SkeletonProps["variant"]>, string> = {
+    text: "h-4",
+    card: "h-32",
+    list: "h-12",
+    circle: "rounded-full",
+  };
+
+  const classes = [
+    ...baseClasses,
+    variantClasses[variant],
+    className,
+  ].filter(Boolean).join(" ");
+
+  const style: React.CSSProperties = {};
+  if (width) style.width = width;
+  if (height) style.height = height;
+
+  if (variant === "text" && lines > 1) {
+    return (
+      <div className="space-y-2" {...props}>
+        {Array.from({ length: lines }).map((_, index) => (
+          <div
+            key={index}
+            className={classes}
+            style={index === lines - 1 ? { width: "75%" } : style}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return (
+    <div className={classes} style={style} {...props} />
+  );
+}

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Tooltip from "./Tooltip";
+import Button from "../Button/Button";
+
+const meta = {
+  title: "Atoms/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    position: {
+      control: "select",
+      options: ["top", "bottom", "left", "right"],
+    },
+  },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: "This is a tooltip",
+    children: <Button>Hover me</Button>,
+  },
+};
+
+export const Top: Story = {
+  args: {
+    content: "Tooltip on top",
+    children: <Button>Hover me</Button>,
+    position: "top",
+  },
+};
+
+export const Bottom: Story = {
+  args: {
+    content: "Tooltip on bottom",
+    children: <Button>Hover me</Button>,
+    position: "bottom",
+  },
+};
+
+export const Left: Story = {
+  args: {
+    content: "Tooltip on left",
+    children: <Button>Hover me</Button>,
+    position: "left",
+  },
+};
+
+export const Right: Story = {
+  args: {
+    content: "Tooltip on right",
+    children: <Button>Hover me</Button>,
+    position: "right",
+  },
+};

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

@@ -0,0 +1,53 @@
+import { describe, it, expect } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { fireEvent } from "@testing-library/react";
+import Tooltip from "./Tooltip";
+import Button from "../Button/Button";
+
+describe("Tooltip", () => {
+  it("renders children", () => {
+    render(
+      <Tooltip content="Tooltip content">
+        <Button>Button</Button>
+      </Tooltip>
+    );
+    
+    expect(screen.getByText("Button")).toBeInTheDocument();
+  });
+
+  it("shows tooltip on hover", async () => {
+    render(
+      <Tooltip content="Tooltip content" delay={0}>
+        <Button>Button</Button>
+      </Tooltip>
+    );
+    
+    const button = screen.getByText("Button");
+    fireEvent.mouseEnter(button);
+    
+    await waitFor(() => {
+      expect(screen.getByText("Tooltip content")).toBeInTheDocument();
+    });
+  });
+
+  it("hides tooltip on mouse leave", async () => {
+    render(
+      <Tooltip content="Tooltip content" delay={0}>
+        <Button>Button</Button>
+      </Tooltip>
+    );
+    
+    const button = screen.getByText("Button");
+    fireEvent.mouseEnter(button);
+    
+    await waitFor(() => {
+      expect(screen.getByText("Tooltip content")).toBeInTheDocument();
+    });
+    
+    fireEvent.mouseLeave(button);
+    
+    await waitFor(() => {
+      expect(screen.queryByText("Tooltip content")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/ui/atoms/Tooltip/Tooltip.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import type { HTMLAttributes, ReactNode } from "react";
+import { useState } from "react";
+
+export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
+  content: string;
+  children: ReactNode;
+  position?: "top" | "bottom" | "left" | "right";
+  delay?: number;
+}
+
+/**
+ * Tooltip Component
+ * 
+ * A tooltip component for displaying additional information on hover.
+ * Follows Atomic Design principles as an Atom component.
+ * 
+ * @example
+ * ```tsx
+ * <Tooltip content="This is a tooltip">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ * ```
+ */
+export default function Tooltip({
+  content,
+  children,
+  position = "top",
+  delay = 200,
+  className = "",
+  ...props
+}: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [timeoutId, setTimeoutId] = useState<number | null>(null);
+
+  const handleMouseEnter = () => {
+    const id = setTimeout(() => {
+      setIsVisible(true);
+    }, delay);
+    setTimeoutId(id);
+  };
+
+  const handleMouseLeave = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      setTimeoutId(null);
+    }
+    setIsVisible(false);
+  };
+
+  const positionClasses: Record<NonNullable<TooltipProps["position"]>, string> = {
+    top: "bottom-full left-1/2 transform -translate-x-1/2 mb-2",
+    bottom: "top-full left-1/2 transform -translate-x-1/2 mt-2",
+    left: "right-full top-1/2 transform -translate-y-1/2 mr-2",
+    right: "left-full top-1/2 transform -translate-y-1/2 ml-2",
+  };
+
+  const arrowClasses: Record<NonNullable<TooltipProps["position"]>, string> = {
+    top: "top-full left-1/2 transform -translate-x-1/2 border-t-gray-900",
+    bottom: "bottom-full left-1/2 transform -translate-x-1/2 border-b-gray-900",
+    left: "left-full top-1/2 transform -translate-y-1/2 border-l-gray-900",
+    right: "right-full top-1/2 transform -translate-y-1/2 border-r-gray-900",
+  };
+
+  return (
+    <div
+      className={`relative inline-block ${className}`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      {...props}
+    >
+      {children}
+      {isVisible && (
+        <div
+          className={`absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg whitespace-nowrap ${positionClasses[position]}`}
+          role="tooltip"
+        >
+          {content}
+          <div
+            className={`absolute w-0 h-0 border-4 border-transparent ${arrowClasses[position]}`}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/atoms/index.ts

@@ -19,3 +19,9 @@ export { default as Label } from "./Label/Label";
 export { default as ErrorMessage } from "./ErrorMessage/ErrorMessage";
 
 export { default as NavLink } from "./NavLink/NavLink";
+
+export { default as Tooltip } from "./Tooltip/Tooltip";
+export type { TooltipProps } from "./Tooltip/Tooltip";
+
+export { default as Skeleton } from "./Skeleton/Skeleton";
+export type { SkeletonProps } from "./Skeleton/Skeleton";

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",
+  },
+};