@indico-data/design-system 2.50.0 → 2.51.1

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;
+  box-shadow: 3px 1px 15px 0 rgba(0, 0, 0, 0.85);
+  &__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,43 @@
+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);
+    });
+  };
+
+  return (
+    <Card className={classNames('tanstack-table__action-bar', className)}>
+      {children ?? (
+        <div className="tanstack-table__action-bar__container">
+          {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,65 @@
+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 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,77 @@
+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>;
+  onRowClick?: ((row: T & { id: string }) => void) | null | undefined;
+  isLoading: boolean;
+  columnsLength: number;
+  activeRows: string[];
+};
+
+export const TableBody = <T,>({
+  table,
+  onRowClick,
+  isLoading,
+  columnsLength,
+  activeRows,
+}: Props<T>) => {
+  return (
+    <>
+      {table.getRowModel().rows.map((row) => (
+        <tr
+          className={classNames('tanstack-table__tbody__tr', {
+            'is-selected': row.getIsSelected(),
+            'show-hover': !!onRowClick,
+            'is-clicked': activeRows.includes(row.id), // Checkbox Is clicked
+          })}
+          key={row.id}
+        >
+          {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(),
+                  ),
+                }}
+                onClick={() => {
+                  // if the cell is not preventRowSelection, then we can click the row
+                  if (!columnDef.meta?.styles?.cell?.preventRowSelection) {
+                    onRowClick?.(row as any);
+                  }
+                }}
+              >
+                {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) => 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)}
+          />
+        </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';

package/src/components/tanstackTable/docs/pinnedColumns/PinnedColumn.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TableStories from './PinnedColumn.stories';
+
+<Meta title="Layout/Tanstack Table/Pinned Columns" name="Tanstack Table Pinned Column" />
+
+# Tanstack Table Pinned Columns
+
+<Canvas of={TableStories.PinnedColumns} />
+
+This component enables the rapid creation of responsive, paginated tables using the React TanStack Table library.
+It supports configuring pinned columns by extracting the necessary properties from your column creation object.
+For more details on all configuration options and features, please refer to the official [TanStack Table Pinning Documentation](https://tanstack.com/table/latest/docs/guide/column-pinning#pin-columns-by-default).
+
+To enable pinned columns, pass the following properties to your table.
+In your column definition, extract the pinning information from the header object and pass it to your component in this case PinHeaderColumns as shown:
+
+```tsx
+ header: ({ header }) => (
+      <PinHeaderColumns
+        content="First Name"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+
+```
+
+This code toggles the pinned state of the column: if the column is already pinned, clicking will unpin it; otherwise, it will pin the column to the left
+
+Additionally, the table component accepts a defaultPinnedColumns prop, which is an array of column IDs that will be pinned by default when the table is rendered. This ensures that important columns—such as selection checkboxes or key data fields—remain visible as users scroll through the table.
+
+```tsx
+<TanstackTable defaultPinnedColumns={['select', 'firstName', 'lastName']} />
+```