Merge pull request #37 from internxt/feat/table-component

[PB-3284]: feat/table component

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internxt/ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "description": "Library of Internxt components",
   "repository": {
     "type": "git",
@@ -17,7 +17,8 @@
     "/dist"
   ],
   "peerDependencies": {
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "@phosphor-icons/react": "^2.1.5"
   },
   "resolutions": {
     "jackspeak": "2.1.1"
@@ -81,8 +82,8 @@
     "format": "prettier --write --parser typescript '**/*.{ts,tsx}'",
     "lint": "eslint . --ext .ts,.tsx --ignore-path .gitignore --fix",
     "test": "vitest run",
-    "test-update": "vitest run -u",
-    "test-watch": "vitest",
+    "test:update": "vitest run -u",
+    "test:watch": "vitest",
     "test:ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "storybook:dev": "storybook dev -p 6006",

src/components/index.ts

@@ -22,3 +22,4 @@ export * from './skeletonLoader';
 export * from './switch';
 export * from './textArea';
 export * from './tooltip';
+export * from './table/Table';

src/components/table/Table.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+
+interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+interface TableCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  children: React.ReactNode;
+  className?: string;
+  isHeader?: boolean;
+}
+
+export const Table: React.FC<TableProps> = ({ children, className, ...props }) => (
+  <div className={className}>
+    <table className="w-full" {...props}>
+      {children}
+    </table>
+  </div>
+);
+
+export const TableHeader: React.FC<TableHeaderProps> = ({ children, className, ...props }) => (
+  <thead className={className} {...props}>
+    {children}
+  </thead>
+);
+
+export const TableBody: React.FC<TableBodyProps> = ({ children, className, ...props }) => (
+  <tbody className={className} {...props}>
+    {children}
+  </tbody>
+);
+
+export const TableRow: React.FC<TableRowProps> = ({ children, className, onClick, ...props }) => (
+  <tr onClick={onClick} className={className} {...props}>
+    {children}
+  </tr>
+);
+
+export const TableCell: React.FC<TableCellProps> = ({ children, className, isHeader = false, onClick, ...props }) => {
+  const Component = isHeader ? 'th' : 'td';
+  return (
+    <Component onClick={onClick} className={className} {...props}>
+      {children}
+    </Component>
+  );
+};

src/components/table/__test__/Table.test.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Table, TableHeader, TableBody, TableRow, TableCell } from '../Table';
+
+describe('Table Component Snapshots', () => {
+  it('renders the complete table structure', () => {
+    const { container } = render(
+      <Table className="custom-table-class">
+        <TableHeader className="custom-header-class">
+          <TableRow className="custom-row-class">
+            <TableCell isHeader className="custom-cell-class">
+              Header 1
+            </TableCell>
+            <TableCell isHeader>Header 2</TableCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody className="custom-body-class">
+          <TableRow>
+            <TableCell>Cell 1</TableCell>
+            <TableCell>Cell 2</TableCell>
+          </TableRow>
+          <TableRow className="another-row-class">
+            <TableCell className="another-cell-class">Cell 3</TableCell>
+            <TableCell>Cell 4</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders a table with minimal structure', () => {
+    const { container } = render(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableCell isHeader>Header</TableCell>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders a row with an onClick handler', () => {
+    const handleClick = () => {};
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow onClick={handleClick}>
+            <TableCell>Clickable Row Cell</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders a cell with custom props', () => {
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell className="custom-class" data-testid="test-cell">
+              Custom Cell
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders a header cell with isHeader set to true', () => {
+    const { container } = render(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableCell isHeader>Header Cell</TableCell>
+          </TableRow>
+        </TableHeader>
+      </Table>,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+});

src/components/table/__test__/__snapshots__/Table.test.tsx.snap

@@ -0,0 +1,136 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Table Component Snapshots > renders a cell with custom props 1`] = `
+<div>
+  <div>
+    <table
+      class="w-full"
+    >
+      <tbody>
+        <tr>
+          <td
+            class="custom-class"
+            data-testid="test-cell"
+          >
+            Custom Cell
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Table Component Snapshots > renders a header cell with isHeader set to true 1`] = `
+<div>
+  <div>
+    <table
+      class="w-full"
+    >
+      <thead>
+        <tr>
+          <th>
+            Header Cell
+          </th>
+        </tr>
+      </thead>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Table Component Snapshots > renders a row with an onClick handler 1`] = `
+<div>
+  <div>
+    <table
+      class="w-full"
+    >
+      <tbody>
+        <tr>
+          <td>
+            Clickable Row Cell
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Table Component Snapshots > renders a table with minimal structure 1`] = `
+<div>
+  <div>
+    <table
+      class="w-full"
+    >
+      <thead>
+        <tr>
+          <th>
+            Header
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>
+            Cell
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
+exports[`Table Component Snapshots > renders the complete table structure 1`] = `
+<div>
+  <div
+    class="custom-table-class"
+  >
+    <table
+      class="w-full"
+    >
+      <thead
+        class="custom-header-class"
+      >
+        <tr
+          class="custom-row-class"
+        >
+          <th
+            class="custom-cell-class"
+          >
+            Header 1
+          </th>
+          <th>
+            Header 2
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        class="custom-body-class"
+      >
+        <tr>
+          <td>
+            Cell 1
+          </td>
+          <td>
+            Cell 2
+          </td>
+        </tr>
+        <tr
+          class="another-row-class"
+        >
+          <td
+            class="another-cell-class"
+          >
+            Cell 3
+          </td>
+          <td>
+            Cell 4
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;