@indico-data/design-system 2.50.0 → 2.51.0

package/src/components/tanstackTable/__tests__/__mocks__/test-mock-data.tsx

@@ -0,0 +1,83 @@
+import { Checkbox } from "@/components/forms/checkbox";
+import { ColumnDef } from "@tanstack/react-table";
+
+export interface TestData {
+  id: string;
+  name: string;
+  age: number;
+}
+
+export const columns: ColumnDef<TestData>[] = [
+  {
+    id: 'select',
+    size: 48,
+    meta: {
+      styles: {
+        definedColumnSize: true,
+        header: {
+          hasNoPadding: true,
+        },
+        cell: {
+          hasNoPadding: true,
+        },
+      },
+    },
+    header: ({ table }) => (
+      <div className="p-3">
+        <Checkbox
+          name="select-all"
+          id="select-all"
+          label=""
+          isChecked={table.getIsAllPageRowsSelected()}
+          onChange={() => {
+            table
+              .getRowModel()
+              .rows.forEach((row) =>
+                row.toggleSelected(!table.getRowModel().rows[0].getIsSelected()),
+              );
+          }}
+          isDisabled={false}
+          aria-label="select-rows-header"
+        />
+      </div>
+    ),
+    cell: ({ row }) => (
+      <div className="p-3">
+        <Checkbox
+          name="select"
+          id={row.id}
+          label=""
+          data-testid={`checkbox-${row.id}`}
+          aria-label={`checkbox-${row.id}`}
+          isChecked={row.getIsSelected()}
+          isDisabled={!row.getCanSelect()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      </div>
+    ),
+  },
+  {
+    id: 'firstName',
+    accessorKey: 'firstName',
+    header: () => 'First Name',
+    cell: (info) => info.getValue(),
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'name',
+    accessorKey: 'name',
+    header: 'Name',
+    cell: ({ getValue }) => getValue(),
+  },
+  {
+    id: 'age',
+    accessorKey: 'age',
+    header: 'Age',
+    cell: ({ getValue }) => getValue(),
+  },
+];
+
+export const data: TestData[] = [
+  { id: '1', name: 'Alice', age: 30 },
+  { id: '2', name: 'Bob', age: 25 },
+];

package/src/components/tanstackTable/components/ActionBar/ActionBar.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as ActionBarStories from './ActionBar.stories';
+
+<Meta title="Layout/Tanstack Table/Action Bar" name="ActionBar" />
+
+# Table
+
+<Canvas of={ActionBarStories.Default} />
+
+<Controls of={ActionBarStories.Default} />

package/src/components/tanstackTable/components/ActionBar/ActionBar.scss

@@ -0,0 +1,30 @@
+.tanstack-table__action-bar {
+  position: fixed;
+  bottom: 170px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 90;
+
+  &__container {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-size-2);
+  }
+
+  &__text-container {
+    padding: var(--pf-padding-2);
+
+    span {
+      font-size: var(--pf-font-size-base);
+      font-weight: var(--pf-font-weight-medium);
+      line-height: var(--pf-line-height-lg);
+      color: var(--pf-white-color);
+    }
+  }
+
+  &__button-container {
+    display: flex;
+    align-items: center;
+    gap: var(--pf-size-4);
+  }
+}

package/src/components/tanstackTable/components/ActionBar/ActionBar.stories.tsx

@@ -0,0 +1,98 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ActionBar } from './ActionBar';
+import { Table } from '@tanstack/react-table';
+import { Button } from '@/components/button';
+
+type DummyRow = {
+  id: string;
+  isSelected: boolean;
+  getIsSelected: () => boolean;
+  toggleSelected: (value: boolean) => void;
+};
+
+const createDummyRow = (id: string, isSelected = false): DummyRow => ({
+  id,
+  isSelected,
+  getIsSelected() {
+    return this.isSelected;
+  },
+  toggleSelected(value: boolean) {
+    this.isSelected = value;
+  },
+});
+
+const dummyTable = {
+  getRowModel: () => ({
+    rows: [createDummyRow('1', true), createDummyRow('2', false), createDummyRow('3', true)],
+  }),
+} as unknown as Table<{ id: string }>;
+
+const meta: Meta = {
+  title: 'Layout/Tanstack Table/Action Bar',
+  component: ActionBar,
+  args: {
+    className: 'tanstack-table__action-bar-docs',
+    table: dummyTable,
+  },
+  argTypes: {
+    table: {
+      description: 'Table instance.',
+      control: false,
+      table: {
+        category: 'Props',
+        type: { summary: 'Table<any>' },
+      },
+    },
+    className: {
+      description: 'class name for styling.',
+      control: false,
+      table: {
+        category: 'Props',
+        type: { summary: 'string' },
+      },
+    },
+    children: {
+      description: 'React node to display in the action bar.',
+      control: false,
+      table: {
+        category: 'Props',
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    TableActions: {
+      description: 'Component for table actions with selected items.',
+      control: false,
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ComponentType<{ selectedItems: Row<any>[]; unselectRows: () => void }>',
+        },
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '100%', height: '500px', overflow: 'hidden' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ActionBar<{ id: string }>>;
+
+export const Default: Story = {};
+
+export const WithCustomTableActions: Story = {
+  args: {
+    TableActions: () => <Button ariaLabel="Clear">Clear</Button>,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    children: <p>test</p>,
+  },
+};

package/src/components/tanstackTable/components/ActionBar/ActionBar.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Row, Table } from '@tanstack/react-table';
+import { Card } from '@/components/card';
+import classNames from 'classnames';
+
+type Props<T extends object> = {
+  table: Table<T & { id: string }>;
+  TableActions?: React.ComponentType<{
+    selectedItems: Row<T & { id: string }>[];
+    unselectRows: () => void;
+  }>;
+  className?: string;
+  children?: React.ReactNode;
+};
+
+export function ActionBar<T extends object>({
+  table,
+  TableActions,
+  className,
+  children,
+}: Props<T>) {
+  const selectedItems = table.getRowModel().rows.filter((row) => row.getIsSelected());
+
+  const unselectRows = () => {
+    table.getRowModel().rows.forEach((row) => {
+      row.toggleSelected(false);
+    });
+  };
+
+  const getSelectedItemsText = () => {
+    if (selectedItems.length === 1) return '1 item selected';
+    return `${selectedItems.length} items selected`;
+  };
+
+  return (
+    <Card className={classNames('tanstack-table__action-bar', className)}>
+      {children ?? (
+        <div className="tanstack-table__action-bar__container">
+          <div className="tanstack-table__action-bar__text-container">
+            <span>{getSelectedItemsText()}</span>
+          </div>
+          {TableActions && (
+            <div className="tanstack-table__action-bar__button-container">
+              <TableActions selectedItems={selectedItems} unselectRows={unselectRows} />
+            </div>
+          )}
+        </div>
+      )}
+    </Card>
+  );
+}

package/src/components/tanstackTable/components/ActionBar/__tests__/ActionBar.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ActionBar } from '../ActionBar';
+import type { Table } from '@tanstack/react-table';
+
+type DummyRow = {
+  getIsSelected: () => boolean;
+  toggleSelected: (value: boolean) => void;
+};
+
+const createDummyTable = (rows: DummyRow[]): Table<any> =>
+  ({
+    getRowModel: () => ({ rows }),
+  }) as Table<any>;
+
+describe('ActionBar', () => {
+  it('renders correct text for one selected row', () => {
+    const dummyRows: DummyRow[] = [
+      { getIsSelected: () => true, toggleSelected: jest.fn() },
+      { getIsSelected: () => false, toggleSelected: jest.fn() },
+    ];
+    const dummyTable = createDummyTable(dummyRows);
+
+    render(<ActionBar table={dummyTable} />);
+    expect(screen.getByText('1 item selected')).toBeDefined();
+  });
+
+  it('renders correct text for multiple selected rows', () => {
+    const dummyRows: DummyRow[] = [
+      { getIsSelected: () => true, toggleSelected: jest.fn() },
+      { getIsSelected: () => true, toggleSelected: jest.fn() },
+    ];
+    const dummyTable = createDummyTable(dummyRows);
+
+    render(<ActionBar table={dummyTable} />);
+    expect(screen.getByText('2 items selected')).toBeDefined();
+  });
+
+  it('renders correct when use a children prop', () => {
+    const dummyRows: DummyRow[] = [
+      { getIsSelected: () => true, toggleSelected: jest.fn() },
+      { getIsSelected: () => true, toggleSelected: jest.fn() },
+    ];
+    const dummyTable = createDummyTable(dummyRows);
+
+    render(
+      <ActionBar table={dummyTable}>
+        <div>
+          <p>Hello</p>
+        </div>
+      </ActionBar>,
+    );
+    expect(screen.getByText('Hello')).toBeDefined();
+  });
+
+  it('renders TableActions component when provided and calls unselectRows', () => {
+    const toggleRow1 = jest.fn();
+    const toggleRow2 = jest.fn();
+    const dummyRows: DummyRow[] = [
+      { getIsSelected: () => true, toggleSelected: toggleRow1 },
+      { getIsSelected: () => true, toggleSelected: toggleRow2 },
+    ];
+    const dummyTable = createDummyTable(dummyRows);
+
+    // Dummy TableActions component which calls unselectRows on button click
+    const DummyTableActions: React.FC<{
+      selectedItems: DummyRow[];
+      unselectRows: () => void;
+    }> = ({ selectedItems, unselectRows }) => (
+      <button onClick={unselectRows} data-testid="dummy-actions">
+        Clear Selection ({selectedItems.length})
+      </button>
+    );
+
+    render(<ActionBar table={dummyTable} TableActions={DummyTableActions as any} />);
+    const button = screen.getByTestId('dummy-actions');
+    expect(button).toBeDefined();
+    expect(button.textContent).toContain('2');
+
+    // Simulate click on the TableActions button
+    fireEvent.click(button);
+
+    // Verify unselectRows toggles all selected rows to false
+    expect(toggleRow1).toHaveBeenCalledWith(false);
+    expect(toggleRow2).toHaveBeenCalledWith(false);
+  });
+});

package/src/components/tanstackTable/components/ActionBar/index.ts

@@ -0,0 +1 @@
+export { ActionBar } from './ActionBar';

package/src/components/tanstackTable/components/NoResults/NoResults.scss

@@ -0,0 +1,24 @@
+.tanstack-table__no-results {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  position: sticky;
+  left: 0;
+  margin: var(--pf-margin-8) auto;
+
+  &__text {
+    font-size: var(--pf-line-height-md);
+    font-weight: var(--pf-font-weight-medium);
+    color: var(--pf-primary-color-50);
+
+    span {
+      color: var(--pf-white-color);
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}

package/src/components/tanstackTable/components/NoResults/NoResults.tsx

@@ -0,0 +1,22 @@
+import { Button } from '@/components/button/Button';
+
+type Props = {
+  clearFilters?: () => void;
+  hasFilters?: boolean;
+  message: string;
+};
+
+export function NoResults({ clearFilters, hasFilters, message }: Props) {
+  return (
+    <div className="tanstack-table__no-results" data-testid="tanstack-table-no-results">
+      <p className="tanstack-table__no-results__text">{message}</p>
+      {hasFilters && (
+        <p className="tanstack-table__no-results__text">
+          <Button ariaLabel="Reset filters" variant="link" onClick={clearFilters}>
+            Reset filters
+          </Button>
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/tanstackTable/components/NoResults/__tests__/NoResult.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { NoResults } from '../NoResults';
+
+describe('NoResults Component', () => {
+  it('renders the message without filters applied', () => {
+    render(<NoResults message="No results found." />);
+    expect(screen.getByText('No results found.')).toBeInTheDocument();
+    expect(screen.queryByText('Reset filters')).not.toBeInTheDocument();
+  });
+
+  it('renders the clear filters option when filters are applied', () => {
+    render(<NoResults message="No results found." hasFilters />);
+    expect(screen.getByText('No results found.')).toBeInTheDocument();
+    const clearFiltersElement = screen.getByText('Reset filters');
+    expect(clearFiltersElement).toBeInTheDocument();
+  });
+
+  it('calls clearFilters when "Click here" is clicked', () => {
+    const mockClearFilters = jest.fn();
+    render(<NoResults message="No results found." hasFilters clearFilters={mockClearFilters} />);
+    const clearFiltersElement = screen.getByText('Reset filters');
+    fireEvent.click(clearFiltersElement);
+    expect(mockClearFilters).toHaveBeenCalled();
+  });
+});

package/src/components/tanstackTable/components/NoResults/index.ts

@@ -0,0 +1 @@
+export { NoResults } from './NoResults';

package/src/components/tanstackTable/components/TableBody/TableBody.tsx

@@ -0,0 +1,87 @@
+import { flexRender, Table } from '@tanstack/react-table';
+import { Row } from '@tanstack/react-table';
+import classNames from 'classnames';
+import { getTdStyles } from '../../helpers';
+import { CirclePulse } from '@/legacy/components/loading-indicators/CirclePulse';
+import { Dispatch, SetStateAction } from 'react';
+
+export type Props<T> = {
+  table: Table<T>;
+  onClickRow?: ((row: Row<T>) => void) | null;
+  isLoading: boolean;
+  columnsLength: number;
+  isClickedRow: string[];
+  setIsClickedRow: Dispatch<SetStateAction<string[]>>;
+};
+
+export const TableBody = <T,>({
+  table,
+  onClickRow,
+  isLoading,
+  columnsLength,
+  isClickedRow,
+  setIsClickedRow,
+}: Props<T>) => {
+  const toggleRow = (id: string) => {
+    if (isClickedRow.includes(id)) {
+      setIsClickedRow((state) => state.filter((item) => item !== id));
+    } else {
+      setIsClickedRow((state) => [...state, id]);
+    }
+  };
+
+  return (
+    <>
+      {table.getRowModel().rows.map((row) => (
+        <tr
+          className={classNames('tanstack-table__tbody__tr', {
+            'is-selected': row.getIsSelected(),
+            'show-hover': !!onClickRow,
+            'is-clicked': isClickedRow.includes(row.id),
+          })}
+          key={row.id}
+          onClick={() => {
+            if (!!onClickRow) {
+              toggleRow(row.id);
+              onClickRow(row);
+            }
+          }}
+        >
+          {row.getVisibleCells().map((cell) => {
+            const { columnDef } = cell.column;
+            return (
+              <td
+                className={classNames('tanstack-table__tbody__td', {
+                  'pa-0': !!columnDef.meta?.styles?.cell?.hasNoPadding,
+                })}
+                key={cell.id}
+                style={{
+                  ...getTdStyles(
+                    cell.column,
+                    columnDef.meta?.styles?.cell?.textAlign,
+                    columnDef.meta?.styles?.definedColumnSize,
+                    cell.column.getSize(),
+                  ),
+                }}
+              >
+                {flexRender(columnDef.cell, cell.getContext())}
+              </td>
+            );
+          })}
+        </tr>
+      ))}
+      {isLoading && (
+        <tr className="tanstack-table__tbody__tr">
+          <td
+            className={classNames('tanstack-table__centered-row', {
+              'is-Loading': isLoading,
+            })}
+            colSpan={columnsLength}
+          >
+            <CirclePulse data-testid="loading-indicator" />
+          </td>
+        </tr>
+      )}
+    </>
+  );
+};

package/src/components/tanstackTable/components/TableBody/index.ts

@@ -0,0 +1 @@
+export { TableBody } from './TableBody';

package/src/components/tanstackTable/components/TableHeader/TableHeader.tsx

@@ -0,0 +1,49 @@
+import { forwardRef } from 'react';
+import { Column, flexRender, Header, Table } from '@tanstack/react-table';
+import classNames from 'classnames';
+import { getThStyles } from '../../helpers';
+
+interface Props {
+  table: Table<any>;
+}
+
+export const TableHeader = forwardRef(({ table }: Props, ref: any) => {
+  const getStyles = (column: Column<any>, header: Header<any, any>) => {
+    return {
+      ...getThStyles(column),
+      ...(header.column.columnDef.meta?.styles?.header?.textAlign
+        ? { textAlign: header.column.columnDef.meta?.styles?.header?.textAlign }
+        : {}),
+    };
+  };
+
+  return (
+    <>
+      {table.getHeaderGroups().map((headerGroup) => (
+        <tr key={headerGroup.id}>
+          {headerGroup.headers.map((header) => {
+            const { column } = header;
+
+            return (
+              <th
+                className={classNames('tanstack-table__thead__th', {
+                  'pa-0': !!header.column.columnDef.meta?.styles?.header?.hasNoPadding,
+                })}
+                key={header.id}
+                ref={(el: any) => {
+                  if (el) ref.current[column.id] = el;
+                }}
+                colSpan={header.colSpan}
+                style={{
+                  ...getStyles(column, header),
+                }}
+              >
+                {flexRender(header.column.columnDef.header, header.getContext())}
+              </th>
+            );
+          })}
+        </tr>
+      ))}
+    </>
+  );
+});

package/src/components/tanstackTable/components/TableHeader/index.ts

@@ -0,0 +1 @@
+export { TableHeader } from './TableHeader';

package/src/components/tanstackTable/components/TablePagination/TablePagination.tsx

@@ -0,0 +1,45 @@
+import { Pagination as PaginationComponent } from '../../../pagination';
+import { Row, Col } from '../../../grid';
+
+interface TablePaginationProps {
+  rowsPerPage: number;
+  rowCount: number;
+  onChangePage: (page: number, perPage: number) => void;
+  currentPage: number;
+  totalEntriesText?: string;
+}
+
+export const TablePagination = ({
+  rowsPerPage,
+  rowCount,
+  onChangePage,
+  currentPage,
+  totalEntriesText,
+}: TablePaginationProps) => {
+  const totalPages = Math.ceil(rowCount / rowsPerPage);
+
+  return (
+    <div className="table__pagination" data-testid="tanstack-table-pagination">
+      <Row align="center" justify="between">
+        <Col xs="content">
+          {totalEntriesText && (
+            <span
+              data-testid="table-pagination-total-entries"
+              className="table__pagination-total-entries"
+            >
+              {totalEntriesText}
+            </span>
+          )}
+        </Col>
+        <Col xs="content">
+          <PaginationComponent
+            data-testid="table-pagination-component"
+            totalPages={totalPages}
+            currentPage={currentPage}
+            onChange={(page) => onChangePage(page, rowsPerPage)}
+          />
+        </Col>
+      </Row>
+    </div>
+  );
+};

package/src/components/tanstackTable/components/TablePagination/__tests__/TablePagination.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { TablePagination } from '../TablePagination';
+
+describe('TablePagination', () => {
+  it('renders total entries text', () => {
+    render(
+      <TablePagination
+        rowsPerPage={10}
+        rowCount={100}
+        onChangePage={() => {}}
+        currentPage={1}
+        totalEntriesText="100 entries"
+      />,
+    );
+    expect(screen.getByTestId('table-pagination-total-entries')).toBeInTheDocument();
+    expect(screen.getByTestId('tanstack-table-pagination')).toBeInTheDocument();
+  });
+});

package/src/components/tanstackTable/components/TablePagination/index.ts

@@ -0,0 +1 @@
+export * from './TablePagination';