uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Table/Table.stories.tsx

@@ -0,0 +1,337 @@
+import { useEffect, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Table from './Table';
+import Badge from '../Badge/Badge';
+import Icon from '../Icon/Icon';
+import type { SortPattern } from './Table.types';
+
+const meta = {
+  title: 'Components/Work in progress/Table',
+  component: Table,
+  parameters: {
+    layout: 'padded',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  name: 'Simple table',
+  render: (args) => {
+    // These would probably be records from a database API response..
+    const exampleData = [
+      {
+        name: 'Alexander Graham Bell',
+        born: 1847,
+        occupation: 'Inventor',
+      },
+      {
+        name: 'Francis Crick',
+        born: 1916,
+        occupation: 'Molecular Biologist',
+      },
+      {
+        name: 'Jeremy Bentham',
+        born: 1748,
+        occupation: 'Philosopher',
+      },
+      {
+        name: 'John Langbourne',
+        born: 1810,
+        occupation: 'Cat',
+      },
+    ];
+
+    const [data, setData] = useState(exampleData);
+
+    const [sortingPattern, setSortingPattern] = useState<SortPattern>({
+      accessor: null,
+      order: null,
+    });
+
+    useEffect(() => {
+      // We would expect to sort data on the backend in practice,
+      // but sorting on the frontend is also an option.
+      const sortedData = sortData(
+        exampleData,
+        sortingPattern?.accessor as keyof (typeof exampleData)[0],
+        sortingPattern?.order
+      );
+      setData(sortedData);
+    }, [sortingPattern]);
+
+    const handleSortChange = (
+      accessor: string,
+      order: 'asc' | 'desc' | null,
+      _event: React.UIEvent
+    ) => {
+      setSortingPattern({ accessor, order });
+      console.log(`Sorting changed: ${accessor} - ${order}`);
+    };
+
+    // Function that can handle alphanumberical sorting for any given accessor
+    // ('accessor' is the column's data name)
+    const sortData = (
+      data: typeof exampleData,
+      accessor: keyof (typeof exampleData)[0] | null,
+      order: 'asc' | 'desc' | null
+    ) => {
+      if (!accessor || order === null) return data;
+      return [...data].sort((a, b) => {
+        if (a[accessor] < b[accessor]) return order === 'asc' ? -1 : 1;
+        if (a[accessor] > b[accessor]) return order === 'asc' ? 1 : -1;
+        return 0;
+      });
+    };
+
+    return (
+      <Table {...args}>
+        <Table.Head>
+          <Table.HeadCell
+            accessor='name'
+            sort={
+              sortingPattern?.accessor === 'name' ? sortingPattern.order : null
+            }
+            onSortChange={handleSortChange}
+          >
+            Name
+          </Table.HeadCell>
+          <Table.HeadCell
+            accessor='born'
+            sort={
+              sortingPattern?.accessor === 'born' ? sortingPattern.order : null
+            }
+            onSortChange={handleSortChange}
+          >
+            Birth year
+          </Table.HeadCell>
+          <Table.HeadCell
+            accessor='occupation'
+            sort={
+              sortingPattern?.accessor === 'occupation'
+                ? sortingPattern.order
+                : null
+            }
+            onSortChange={handleSortChange}
+          >
+            Occupation
+          </Table.HeadCell>
+        </Table.Head>
+        <Table.Body>
+          {data.map((record, index) => (
+            <Table.Row key={index}>
+              <Table.Cell>{record.name}</Table.Cell>
+              <Table.Cell variant='numeric'>
+                <time dateTime={record.born.toString()}>{record.born}</time>
+              </Table.Cell>
+              <Table.Cell>{record.occupation}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    );
+  },
+};
+
+export const CellVariants: Story = {
+  name: 'Cell variants',
+  render: (args) => {
+    const [selectedRows, setSelectedRows] = useState([false, false, false]);
+    const selectRow = (index: number) => (checked: boolean) => {
+      const newSelectedRows = [...selectedRows];
+      newSelectedRows[index] = checked;
+      setSelectedRows(newSelectedRows);
+    };
+    const handleButtonClick = (event: React.UIEvent, row: number) => {
+      console.log(`Button clicked for row: ${row}`, event);
+      alert(`Button clicked for row: ${row}`);
+    };
+
+    return (
+      <Table {...args}>
+        <Table.Head>
+          <Table.HeadCell showSortIcon={false}>Default (text)</Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>Text emphasised</Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>Numeric</Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>
+            Numeric emphasised
+          </Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>Checkbox</Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>Badge</Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>Icon</Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>Icon & text</Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>Button</Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>Link</Table.HeadCell>
+        </Table.Head>
+        <Table.Body>
+          <Table.Row selected={selectedRows[0]}>
+            <Table.Cell>Row 1</Table.Cell>
+            <Table.Cell>
+              <strong>Row 1</strong>
+            </Table.Cell>
+            <Table.Cell variant='numeric'>12345</Table.Cell>
+            <Table.Cell variant='numeric'>
+              <strong>12345</strong>
+            </Table.Cell>
+            <Table.Cell
+              variant='checkbox'
+              checked={selectedRows[0]}
+              onCheck={selectRow(0)}
+            />
+            <Table.Cell>
+              <Badge>Row 1</Badge>
+            </Table.Cell>
+            <Table.Cell icon={<Icon.File />}></Table.Cell>
+            <Table.Cell icon={<Icon.Compass size={20} />}>Row 1</Table.Cell>
+            <Table.Cell
+              variant='button'
+              onButtonClick={(event) => handleButtonClick(event, 1)}
+            >
+              Row 1
+            </Table.Cell>
+            <Table.Cell>
+              <a
+                href='https://www.ucl.ac.uk'
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                Visit us
+              </a>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row selected={selectedRows[1]}>
+            <Table.Cell>Row 2</Table.Cell>
+            <Table.Cell>
+              <strong>Row 2</strong>
+            </Table.Cell>
+            <Table.Cell variant='numeric'>67890</Table.Cell>
+            <Table.Cell variant='numeric'>
+              <strong>67890</strong>
+            </Table.Cell>
+            <Table.Cell
+              variant='checkbox'
+              checked={selectedRows[1]}
+              onCheck={selectRow(1)}
+            />
+            <Table.Cell>
+              <Badge>Row 2</Badge>
+            </Table.Cell>
+            <Table.Cell icon={<Icon.Anchor />}></Table.Cell>
+            <Table.Cell icon={<Icon.Folder size={20} />}>Row 2</Table.Cell>
+            <Table.Cell
+              variant='button'
+              onButtonClick={(event) => handleButtonClick(event, 2)}
+            >
+              Row 2
+            </Table.Cell>
+            <Table.Cell>
+              <a
+                href='https://www.ucl.ac.uk'
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                Visit us
+              </a>
+            </Table.Cell>
+          </Table.Row>
+          <Table.Row selected={selectedRows[2]}>
+            <Table.Cell>Row 3</Table.Cell>
+            <Table.Cell>
+              <strong>Row 3</strong>
+            </Table.Cell>
+            <Table.Cell variant='numeric'>11223</Table.Cell>
+            <Table.Cell variant='numeric'>
+              <strong>11223</strong>
+            </Table.Cell>
+            <Table.Cell
+              variant='checkbox'
+              checked={selectedRows[2]}
+              onCheck={selectRow(2)}
+            />
+            <Table.Cell>
+              <Badge>Row 3</Badge>
+            </Table.Cell>
+            <Table.Cell icon={<Icon.Aperture />}></Table.Cell>
+            <Table.Cell icon={<Icon.PenTool size={20} />}>Row 3</Table.Cell>
+            <Table.Cell
+              variant='button'
+              onButtonClick={(event) => handleButtonClick(event, 3)}
+            >
+              Row 3
+            </Table.Cell>
+            <Table.Cell>
+              <a
+                href='https://www.ucl.ac.uk'
+                target='_blank'
+                rel='noopener noreferrer'
+              >
+                Visit us
+              </a>
+            </Table.Cell>
+          </Table.Row>
+        </Table.Body>
+      </Table>
+    );
+  },
+};
+
+export const WithHeaderCellCheckbox: Story = {
+  name: 'With header cell checkbox',
+  render: (args) => {
+    const data = [
+      { course: 'Computer Science BSc', code: 'G400' },
+      { course: 'Art and Technology BA', code: 'W102' },
+      { course: 'Robotics and Artificial Intelligence MEng', code: 'H700' },
+      { course: 'Urban Studies BSc', code: 'K440' },
+    ];
+
+    const [selectedRows, setSelectedRows] = useState([
+      false,
+      false,
+      false,
+      false,
+    ]);
+
+    const handleAllRowsSelect = (checked: boolean) => {
+      const newSelectedRows = selectedRows.map(() => checked);
+      setSelectedRows(newSelectedRows);
+      console.log('All rows selected:', checked);
+    };
+
+    return (
+      <Table {...args}>
+        <Table.Head>
+          <Table.HeadCell
+            variant='checkbox'
+            checked={selectedRows.every(Boolean)}
+            onCheck={handleAllRowsSelect}
+          />
+          <Table.HeadCell showSortIcon={false}>Course</Table.HeadCell>
+          <Table.HeadCell showSortIcon={false}>Code</Table.HeadCell>
+        </Table.Head>
+        <Table.Body>
+          {data.map((record, index) => (
+            <Table.Row
+              key={index}
+              selected={selectedRows[index]}
+            >
+              <Table.Cell
+                variant='checkbox'
+                checked={selectedRows[index]}
+                onCheck={(checked) => {
+                  const newSelectedRows = [...selectedRows];
+                  newSelectedRows[index] = checked;
+                  setSelectedRows(newSelectedRows);
+                }}
+              />
+              <Table.Cell>{record.course}</Table.Cell>
+              <Table.Cell>{record.code}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+    );
+  },
+};

package/lib/components/Table/Table.tsx

@@ -1,68 +1,43 @@
-import {
-  memo,
-  TableHTMLAttributes,
-  forwardRef,
-} from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme } from '../..';
-
-export const NAME = 'ucl-uikit-table';
-
-export interface TableProps
-  extends TableHTMLAttributes<HTMLTableElement> {
-  testId?: string;
-}
-
-export type Ref = HTMLTableElement;
-
-const Table = forwardRef<Ref, TableProps>(
-  (
-    { testId = NAME, className, children, ...props },
-    ref
-  ) => {
-    const [theme] = useTheme();
-
-    const baseStyle = css`
-      border-collapse: collapse;
-      font-family: ${theme.font.family.primary};
-      color: ${theme.color.text.primary};
-      text-align: left;
-
-      th,
-      td {
-        padding: ${theme.padding.p8};
-        border-bottom: 1px solid
-          ${theme.color.neutral.grey20};
-      }
-
-      thead {
-        th {
-          padding-bottom: ${theme.padding.p2};
-          font-weight: 400;
-          color: ${theme.color.text.secondary};
-        }
-      }
-
-      tbody {
-        th {
-          font-weight: 700;
-        }
-      }
-    `;
-
-    const style = cx(NAME, baseStyle, className);
-
-    return (
-      <table
-        ref={ref}
-        className={style}
-        data-testid={testId}
-        {...props}
-      >
-        {children}
-      </table>
-    );
-  }
-);
-
-export default memo(Table);
+import { Head, HeadCell, Body, Row, Cell } from './subcomponents';
+import { useTheme } from '../../theme';
+import type { TableProps } from './Table.types';
+
+const NAME = 'ucl-uikit-table';
+
+const Table = ({
+  testId = NAME,
+  className,
+  children,
+  ref,
+  ...props
+}: TableProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f14};
+    border-collapse: collapse;
+  `;
+
+  const style = cx(baseStyle, className, NAME);
+
+  return (
+    <table
+      className={style}
+      data-testid={testId}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </table>
+  );
+};
+
+Table.Head = Head;
+Table.HeadCell = HeadCell;
+Table.Body = Body;
+Table.Row = Row;
+Table.Cell = Cell;
+
+export default Table;

package/lib/components/Table/Table.types.ts

@@ -0,0 +1,14 @@
+export type ColumnVariant = 'default' | 'numeric' | 'checkbox' | 'button';
+
+export type SortOrder = 'asc' | 'desc' | null;
+
+export type SortPattern = {
+  accessor: string | null;
+  order: SortOrder;
+};
+
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+  testId?: string;
+  className?: string;
+  ref?: React.Ref<HTMLTableElement>;
+}

package/lib/components/Table/__tests__/Table.test.tsx

@@ -0,0 +1,121 @@
+import { createRef } from 'react';
+import { describe, expect, test } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import Table from '../Table';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+
+describe('Table', () => {
+  // Snapshot tests
+
+  test('Snapshot: basic table', () => {
+    const renderResult = render(
+      <ThemeContextProvider>
+        <Table>
+          <Table.Head>
+            <Table.HeadCell>Header Cell 1</Table.HeadCell>
+            <Table.HeadCell>Header Cell 2</Table.HeadCell>
+            <Table.HeadCell>Header Cell 3</Table.HeadCell>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Test Cell 1</Table.Cell>
+              <Table.Cell>Test Cell 2</Table.Cell>
+              <Table.Cell>Test Cell 3</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+    expect(renderResult.container.firstChild).toMatchSnapshot();
+  });
+
+  // Unit tests
+
+  test('Can be found via default test ID', () => {
+    const defaultTestId = 'ucl-uikit-table';
+    render(
+      <ThemeContextProvider>
+        <Table>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Test Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(defaultTestId)).toBeInTheDocument();
+  });
+
+  test('Can be found via custom test ID', () => {
+    const customTestId = 'custom-table-test-id';
+    render(
+      <ThemeContextProvider>
+        <Table testId={customTestId}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Test Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+    expect(screen.getByTestId(customTestId)).toBeInTheDocument();
+  });
+
+  test('Can find all subcomponents from Table via testId', () => {
+    const testId = 'table-with-subcomponents';
+    render(
+      <ThemeContextProvider>
+        <Table testId={testId}>
+          <Table.Head>
+            <Table.HeadCell>Header Cell</Table.HeadCell>
+          </Table.Head>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Body Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+    const table = screen.getByTestId(testId);
+    expect(table).toBeInTheDocument();
+    // <Table.Head>
+    expect(
+      within(table).getByTestId('ucl-uikit-table__head')
+    ).toBeInTheDocument();
+    // <Table.HeadCell>
+    expect(
+      within(table).getByTestId('ucl-uikit-table__head-cell')
+    ).toBeInTheDocument();
+    // <Table.Body>
+    expect(
+      within(table).getByTestId('ucl-uikit-table__body')
+    ).toBeInTheDocument();
+    // <Table.Row>
+    expect(
+      within(table).getByTestId('ucl-uikit-table__row')
+    ).toBeInTheDocument();
+    // <Table.Cell>
+    expect(
+      within(table).getByTestId('ucl-uikit-table__cell')
+    ).toBeInTheDocument();
+  });
+
+  test('Can get Table from ref prop', () => {
+    const ref = createRef<HTMLTableElement>();
+    render(
+      <ThemeContextProvider>
+        <Table ref={ref}>
+          <Table.Body>
+            <Table.Row>
+              <Table.Cell>Test Cell</Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table>
+      </ThemeContextProvider>
+    );
+    expect(ref.current).toBeInstanceOf(HTMLTableElement);
+  });
+});