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

package/src/ui/organisms/Table/Table.stories.tsx

@@ -0,0 +1,137 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import Table from "./Table";
+import { Badge } from "../../atoms";
+
+interface SampleData {
+  id: string;
+  name: string;
+  status: string;
+  priority: string;
+  createdAt: string;
+}
+
+const sampleData: SampleData[] = [
+  { id: '1', name: 'Epic 1', status: 'ACTIVE', priority: 'HIGH', createdAt: '2024-01-01' },
+  { id: '2', name: 'Epic 2', status: 'DRAFT', priority: 'MEDIUM', createdAt: '2024-01-02' },
+  { id: '3', name: 'Epic 3', status: 'COMPLETED', priority: 'LOW', createdAt: '2024-01-03' },
+];
+
+const meta: Meta<typeof Table> = {
+  title: "UI/Organisms/Table",
+  component: Table,
+  parameters: {
+    docs: {
+      description: {
+        component: "A table component with sorting, loading states, and responsive design. Supports custom cell rendering.",
+      },
+    },
+  },
+  argTypes: {
+    loading: {
+      control: "boolean",
+      description: "Whether the table is in a loading state",
+    },
+  },
+};
+
+export const Default: StoryObj<typeof Table> = {
+  args: {
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'status', label: 'Status' },
+      { key: 'priority', label: 'Priority' },
+      { key: 'createdAt', label: 'Created At' },
+    ],
+    data: sampleData,
+  },
+};
+
+export const WithSorting: StoryObj<typeof Table> = {
+  render: () => {
+    const [sortColumn, setSortColumn] = useState<string>('');
+    const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc');
+    const [data, setData] = useState(sampleData);
+
+    const handleSort = (columnKey: string, direction: 'asc' | 'desc') => {
+      setSortColumn(columnKey);
+      setSortDirection(direction);
+      
+      const sorted = [...data].sort((a, b) => {
+        const aVal = (a as any)[columnKey];
+        const bVal = (b as any)[columnKey];
+        const comparison = aVal.localeCompare(bVal);
+        return direction === 'asc' ? comparison : -comparison;
+      });
+      
+      setData(sorted);
+    };
+
+    return (
+      <Table
+        columns={[
+          { key: 'name', label: 'Name', sortable: true },
+          { key: 'status', label: 'Status', sortable: true },
+          { key: 'priority', label: 'Priority', sortable: true },
+          { key: 'createdAt', label: 'Created At', sortable: true },
+        ]}
+        data={data}
+        onSort={handleSort}
+        sortColumn={sortColumn}
+        sortDirection={sortDirection}
+      />
+    );
+  },
+};
+
+export const WithCustomRendering: StoryObj<typeof Table> = {
+  args: {
+    columns: [
+      { key: 'name', label: 'Name' },
+      {
+        key: 'status',
+        label: 'Status',
+        render: (value) => (
+          <Badge variant={value === 'ACTIVE' ? 'success' : value === 'COMPLETED' ? 'info' : 'neutral'}>
+            {value}
+          </Badge>
+        ),
+      },
+      {
+        key: 'priority',
+        label: 'Priority',
+        render: (value) => (
+          <Badge variant={value === 'HIGH' ? 'error' : value === 'MEDIUM' ? 'warning' : 'info'}>
+            {value}
+          </Badge>
+        ),
+      },
+      { key: 'createdAt', label: 'Created At' },
+    ],
+    data: sampleData,
+  },
+};
+
+export const Loading: StoryObj<typeof Table> = {
+  args: {
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'status', label: 'Status' },
+    ],
+    data: [],
+    loading: true,
+  },
+};
+
+export const Empty: StoryObj<typeof Table> = {
+  args: {
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'status', label: 'Status' },
+    ],
+    data: [],
+    emptyMessage: "No epics found. Create your first epic to get started.",
+  },
+};
+
+export default meta;

package/src/ui/organisms/Table/Table.test.tsx

@@ -0,0 +1,109 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import Table from "./Table";
+
+const sampleData = [
+  { id: '1', name: 'Item 1', status: 'ACTIVE' },
+  { id: '2', name: 'Item 2', status: 'INACTIVE' },
+];
+
+describe("Table", () => {
+  it("renders table with data", () => {
+    render(
+      <Table
+        columns={[
+          { key: 'name', label: 'Name' },
+          { key: 'status', label: 'Status' },
+        ]}
+        data={sampleData}
+      />
+    );
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+  });
+
+  it("renders column headers", () => {
+    render(
+      <Table
+        columns={[
+          { key: 'name', label: 'Name' },
+          { key: 'status', label: 'Status' },
+        ]}
+        data={sampleData}
+      />
+    );
+    expect(screen.getByText("Name")).toBeInTheDocument();
+    expect(screen.getByText("Status")).toBeInTheDocument();
+  });
+
+  it("shows loading state", () => {
+    render(
+      <Table
+        columns={[{ key: 'name', label: 'Name' }]}
+        data={[]}
+        loading={true}
+      />
+    );
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("shows empty message when no data", () => {
+    render(
+      <Table
+        columns={[{ key: 'name', label: 'Name' }]}
+        data={[]}
+        emptyMessage="No items found"
+      />
+    );
+    expect(screen.getByText("No items found")).toBeInTheDocument();
+  });
+
+  it("calls onSort when sortable column header is clicked", () => {
+    const handleSort = vi.fn();
+    render(
+      <Table
+        columns={[
+          { key: 'name', label: 'Name', sortable: true },
+          { key: 'status', label: 'Status' },
+        ]}
+        data={sampleData}
+        onSort={handleSort}
+      />
+    );
+    const nameHeader = screen.getByText("Name");
+    fireEvent.click(nameHeader);
+    expect(handleSort).toHaveBeenCalledWith('name', 'asc');
+  });
+
+  it("uses custom render function", () => {
+    render(
+      <Table
+        columns={[
+          {
+            key: 'name',
+            label: 'Name',
+            render: (value) => <strong>{value}</strong>,
+          },
+        ]}
+        data={sampleData}
+      />
+    );
+    const strong = screen.getByText("Item 1");
+    expect(strong.tagName).toBe("STRONG");
+  });
+
+  it("shows sort indicator when sorted", () => {
+    render(
+      <Table
+        columns={[
+          { key: 'name', label: 'Name', sortable: true },
+        ]}
+        data={sampleData}
+        onSort={() => {}}
+        sortColumn="name"
+        sortDirection="asc"
+      />
+    );
+    expect(screen.getByText("↑")).toBeInTheDocument();
+  });
+});

package/src/ui/organisms/Table/Table.tsx

@@ -0,0 +1,128 @@
+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 = false,
+  onSort,
+  sortColumn,
+  sortDirection,
+  emptyMessage = "No data available",
+  className = "",
+  ...props
+}: Props<T>) {
+  const handleSort = (columnKey: string) => {
+    if (!onSort || !columns.find(col => col.key === columnKey)?.sortable) {
+      return;
+    }
+
+    const newDirection =
+      sortColumn === columnKey && sortDirection === 'asc' ? 'desc' : 'asc';
+    onSort(columnKey, newDirection);
+  };
+
+  const baseClasses = [
+    "min-w-full",
+    "divide-y",
+    "divide-gray-200",
+  ];
+
+  const classes = [
+    ...baseClasses,
+    className,
+  ].filter(Boolean).join(" ");
+
+  return (
+    <div className="overflow-x-auto">
+      <table className={classes} {...props}>
+        <thead className="bg-gray-50">
+          <tr>
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                scope="col"
+                className={`px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${
+                  column.sortable && onSort
+                    ? 'cursor-pointer hover:bg-gray-100 select-none'
+                    : ''
+                }`}
+                onClick={() => column.sortable && handleSort(column.key)}
+              >
+                <div className="flex items-center gap-2">
+                  <span>{column.label}</span>
+                  {column.sortable && sortColumn === column.key && (
+                    <span className="text-gray-400">
+                      {sortDirection === 'asc' ? '↑' : '↓'}
+                    </span>
+                  )}
+                </div>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="bg-white divide-y divide-gray-200">
+          {loading ? (
+            <tr>
+              <td colSpan={columns.length} className="px-6 py-4 text-center text-gray-500">
+                Loading...
+              </td>
+            </tr>
+          ) : data.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length} className="px-6 py-4 text-center text-gray-500">
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            data.map((row, rowIndex) => (
+              <tr key={rowIndex} className="hover:bg-gray-50">
+                {columns.map((column) => {
+                  const value = (row as any)[column.key];
+                  return (
+                    <td key={column.key} className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                      {column.render ? column.render(value, row) : value}
+                    </td>
+                  );
+                })}
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/ui/organisms/index.ts

@@ -1 +1,6 @@
 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";