@indico-data/design-system 2.50.0 → 2.51.1

package/src/components/tanstackTable/docs/pinnedColumns/PinnedColumn.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TanstackTable } from '../../TanstakTable';
+import { people, Person } from '../../mock-data/mock-data';
+import { columns } from '../../mock-data/table-configuration';
+import { ColumnDef } from '@tanstack/react-table';
+
+const meta: Meta = {
+  title: 'Layout/Tanstack Table/Pinned Columns',
+  component: TanstackTable,
+  args: {
+    data: people as (Person & { id: string })[],
+    columns: columns as ColumnDef<Person & { id: string }>[],
+    defaultPinnedColumns: ['select'],
+    onClickRow: null,
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '100%', height: '500px', overflow: 'hidden' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TanstackTable<Person>>;
+
+export const PinnedColumns: Story = {
+  args: {
+    defaultPinnedColumns: ['select', 'firstName', 'lastName'],
+    actionBarClassName: 'tanstack-table__action-bar-test',
+  },
+  render: (args) => (
+    <div style={{ width: '700px', height: '500px', overflow: 'hidden' }}>
+      <TanstackTable<Person> {...args} />
+    </div>
+  ),
+};

package/src/components/tanstackTable/docs/withRowClick/WithRowClick.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TableStories from './WithRowClick.stories';
+
+<Meta title="Layout/Tanstack Table/With Row Click" name="TanstackTable" />
+
+<Canvas of={TableStories.WithRowClick} />
+
+# Tanstack Table With Row Click
+
+When a row is clicked, the component first checks if an onClickRow callback is provided. If it exists, it performs two actions:
+
+Toggle Row Behavior:
+The toggleRow function is called with the row's ID. This function checks if the row's ID is already in the isClickedRow state array. If it is, the ID is removed; if not, it's added. This toggles the row's "clicked" state, which is then used to conditionally apply the is-clicked CSS class for visual feedback.
+
+Row Click Callback:
+After toggling the row's state, the onClickRow function is invoked with the clicked row as its argument, allowing you to perform additional custom actions when a row is clicked.
+
+Here's a simplified flow of the behavior:
+
+```tsx
+onClick={() => {
+  if (!!onClickRow) {
+    toggleRow(row.id); // Toggle the row's clicked state
+    onClickRow(row);   // Execute additional actions for the clicked row
+  }
+}}
+```
+
+This design makes it easy to both track and visually indicate which rows have been interacted with, while also providing a hook for further custom behavior via the onClickRow callback.
+
+The 'is-selected' class is added when the row is selected (via row.getIsSelected()), resulting in a specific background for selected rows. The 'show-hover' class is applied if the onClickRow function is provided, enabling a distinct hover effect that indicates interactivity. Finally, the 'is-clicked' class is added when the row has been clicked (i.e., its ID is included in isClickedRow), which changes the background to visually differentiate clicked rows from both hovered and selected ones.
+
+```tsx
+<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);
+    }
+    }}
+>
+```

package/src/components/tanstackTable/docs/withRowClick/WithRowClick.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { TanstackTable } from '../../TanstakTable';
+import { people, Person } from '../../mock-data/mock-data';
+import { columns } from '../../mock-data/table-configuration';
+import { ColumnDef, Row } from '@tanstack/react-table';
+
+const meta: Meta = {
+  title: 'Layout/Tanstack Table/With Row Click',
+  component: TanstackTable,
+  args: {
+    data: people as (Person & { id: string })[],
+    columns: columns as ColumnDef<Person & { id: string }>[],
+    defaultPinnedColumns: ['select'],
+    onClickRow: (row: Row<Person>) => {
+      console.log(row);
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: '100%', height: '500px', overflow: 'hidden' }}>
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof TanstackTable<Person>>;
+
+export const WithRowClick: Story = {};

package/src/components/tanstackTable/helpers.ts

@@ -0,0 +1,45 @@
+import { Column } from '@tanstack/react-table';
+import { CSSProperties } from 'react';
+
+// Sets style attributes for pinned columns
+const getCommonPinningStyles = <T>(column: Column<T>): CSSProperties => {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  return {
+    boxShadow: isLastLeftPinnedColumn ? '-4px 0 4px -4px gray inset' : undefined,
+    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+    position: isPinned ? 'sticky' : 'initial',
+    zIndex: isPinned ? 1 : 0,
+  };
+};
+
+export const getThStyles = <T>(column: Column<T>) => {
+  const styles = { ...getCommonPinningStyles(column) };
+
+  if (column.columnDef.meta?.styles?.definedColumnSize) {
+    styles.width = column.getSize();
+    styles.maxWidth = column.getSize();
+  }
+
+  return styles;
+};
+
+export const getTdStyles = <T>(
+  column: Column<T>,
+  textAlign?: 'left' | 'center' | 'right',
+  hasDefinedColumnSize?: boolean,
+  width?: number,
+) => {
+  const styles: CSSProperties = { ...getCommonPinningStyles(column) };
+
+  if (textAlign) {
+    styles.textAlign = textAlign;
+  }
+
+  if (hasDefinedColumnSize) {
+    styles.width = width;
+    styles.maxWidth = width;
+  }
+
+  return styles;
+};

package/src/components/tanstackTable/index.ts

@@ -0,0 +1,2 @@
+export type { ColumnDef } from '@tanstack/react-table';
+export { TanstackTable } from './TanstakTable';

package/src/components/tanstackTable/mock-data/mock-data.ts

@@ -0,0 +1,256 @@
+export type Person = {
+  firstName: string;
+  lastName: string;
+  age: number;
+  visits: number;
+  progress: number;
+  status: 'relationship' | 'complicated' | 'single';
+  subRows?: Person[];
+  id: string;
+  country: string;
+  city: string;
+  civility: string;
+};
+
+export const people: Person[] = [
+  {
+    firstName: 'John',
+    lastName: 'Doe',
+    age: 28,
+    visits: 10,
+    progress: 75,
+    status: 'single',
+    id: '1',
+    country: 'USA',
+    city: 'New York',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Jane',
+    lastName: 'Smith',
+    age: 32,
+    visits: 15,
+    progress: 50,
+    status: 'relationship',
+    id: '2',
+    country: 'USA',
+    city: 'Los Angeles',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Alice',
+    lastName: 'Johnson',
+    age: 24,
+    visits: 5,
+    progress: 90,
+    status: 'single',
+    id: '3',
+    country: 'Canada',
+    city: 'Toronto',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Bob',
+    lastName: 'Brown',
+    age: 40,
+    visits: 20,
+    progress: 30,
+    status: 'complicated',
+    id: '4',
+    country: 'UK',
+    city: 'London',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Charlie',
+    lastName: 'Davis',
+    age: 35,
+    visits: 8,
+    progress: 60,
+    status: 'relationship',
+    id: '5',
+    country: 'Australia',
+    city: 'Sydney',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Emily',
+    lastName: 'Wilson',
+    age: 27,
+    visits: 12,
+    progress: 80,
+    status: 'single',
+    id: '6',
+    country: 'USA',
+    city: 'Chicago',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'David',
+    lastName: 'Martinez',
+    age: 45,
+    visits: 25,
+    progress: 40,
+    status: 'complicated',
+    id: '7',
+    country: 'Mexico',
+    city: 'Mexico City',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Sophia',
+    lastName: 'Garcia',
+    age: 30,
+    visits: 18,
+    progress: 70,
+    status: 'relationship',
+    id: '8',
+    country: 'Spain',
+    city: 'Madrid',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Liam',
+    lastName: 'Rodriguez',
+    age: 22,
+    visits: 7,
+    progress: 85,
+    status: 'single',
+    id: '9',
+    country: 'USA',
+    city: 'Boston',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Olivia',
+    lastName: 'Lee',
+    age: 29,
+    visits: 11,
+    progress: 65,
+    status: 'complicated',
+    id: '10',
+    country: 'Canada',
+    city: 'Vancouver',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Noah',
+    lastName: 'Walker',
+    age: 33,
+    visits: 9,
+    progress: 55,
+    status: 'relationship',
+    id: '11',
+    country: 'USA',
+    city: 'San Francisco',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Ava',
+    lastName: 'Hall',
+    age: 26,
+    visits: 14,
+    progress: 95,
+    status: 'single',
+    id: '12',
+    country: 'UK',
+    city: 'Manchester',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Ethan',
+    lastName: 'Allen',
+    age: 38,
+    visits: 21,
+    progress: 45,
+    status: 'complicated',
+    id: '13',
+    country: 'USA',
+    city: 'Houston',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Mia',
+    lastName: 'Young',
+    age: 31,
+    visits: 16,
+    progress: 50,
+    status: 'relationship',
+    id: '14',
+    country: 'Australia',
+    city: 'Melbourne',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'William',
+    lastName: 'Hernandez',
+    age: 42,
+    visits: 19,
+    progress: 35,
+    status: 'complicated',
+    id: '15',
+    country: 'USA',
+    city: 'Phoenix',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Isabella',
+    lastName: 'King',
+    age: 23,
+    visits: 6,
+    progress: 88,
+    status: 'single',
+    id: '16',
+    country: 'Canada',
+    city: 'Ottawa',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'James',
+    lastName: 'Wright',
+    age: 37,
+    visits: 17,
+    progress: 60,
+    status: 'relationship',
+    id: '17',
+    country: 'UK',
+    city: 'Birmingham',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Amelia',
+    lastName: 'Lopez',
+    age: 34,
+    visits: 13,
+    progress: 72,
+    status: 'complicated',
+    id: '18',
+    country: 'Spain',
+    city: 'Barcelona',
+    civility: 'Ms.',
+  },
+  {
+    firstName: 'Benjamin',
+    lastName: 'Hill',
+    age: 29,
+    visits: 10,
+    progress: 80,
+    status: 'relationship',
+    id: '19',
+    country: 'USA',
+    city: 'Seattle',
+    civility: 'Mr.',
+  },
+  {
+    firstName: 'Charlotte',
+    lastName: 'Scott',
+    age: 28,
+    visits: 8,
+    progress: 65,
+    status: 'single',
+    id: '20',
+    country: 'USA',
+    city: 'Austin',
+    civility: 'Ms.',
+  },
+];

package/src/components/tanstackTable/mock-data/table-configuration.tsx

@@ -0,0 +1,222 @@
+import { ColumnDef } from '@tanstack/react-table';
+import { Person } from './mock-data';
+import { Checkbox } from '@/components/forms/checkbox/Checkbox';
+import { Button } from '@/components/button';
+import styled from 'styled-components';
+
+const PinHeaderColumns = ({
+  content,
+  onPinClick,
+  isPinned,
+}: {
+  content: string;
+  onPinClick: () => void;
+  isPinned: boolean;
+}) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      {onPinClick ? (
+        <Button
+          data-testid={`sticky-header-pin-button`}
+          variant="link"
+          size="sm"
+          iconLeft="pin"
+          onClick={onPinClick}
+          ariaLabel={isPinned ? 'Unpin column' : 'Pin column'}
+          className={`tanstack-table__column--${isPinned ? 'is-pinned' : 'is-not-pinned'} pa-0`}
+        />
+      ) : null}
+      <span>{content}</span>{' '}
+    </div>
+  );
+};
+
+const CheckboxContainer = styled.div`
+  padding: 14px;
+`;
+
+export const columns = [
+  {
+    id: 'select',
+    size: 48,
+    meta: {
+      styles: {
+        definedColumnSize: true,
+        header: {
+          hasNoPadding: true,
+        },
+        cell: {
+          hasNoPadding: true,
+        },
+      },
+    },
+    header: ({ table }) => (
+      <CheckboxContainer>
+        <Checkbox
+          data-testid="select-all-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"
+        />
+      </CheckboxContainer>
+    ),
+    cell: (
+      { row }, // todo - look at
+    ) => (
+      <CheckboxContainer>
+        <Checkbox
+          name="select"
+          id={row.id}
+          label=""
+          aria-label={`checkbox-${row.id}`}
+          isChecked={row.getIsSelected()}
+          isDisabled={!row.getCanSelect()}
+          onChange={row.getToggleSelectedHandler()}
+        />
+      </CheckboxContainer>
+    ),
+  },
+  {
+    id: 'firstName',
+    accessorKey: 'firstName',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="First Name"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    cell: (info) => info.getValue(),
+    footer: (props) => props.column.id,
+  },
+  {
+    accessorFn: (row) => row.lastName,
+    id: 'lastName',
+    cell: (info) => info.getValue(),
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Last Name"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+
+  {
+    id: 'age',
+    accessorKey: 'age',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Age"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    meta: {
+      styles: {
+        cell: {
+          textAlign: 'right',
+        },
+      },
+    },
+    footer: (props) => props.column.id,
+  },
+
+  {
+    id: 'visits',
+    accessorKey: 'visits',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Visits"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    meta: {
+      styles: {
+        cell: {
+          textAlign: 'right',
+        },
+      },
+    },
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'status',
+    accessorKey: 'status',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Status"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'progress',
+    accessorKey: 'progress',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Profile Progress"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    meta: {
+      styles: {
+        cell: {
+          textAlign: 'center',
+        },
+      },
+    },
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'country',
+    accessorKey: 'country',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Country"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'city',
+    accessorKey: 'city',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="City"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+  {
+    id: 'civility',
+    accessorKey: 'civility',
+    header: ({ header }) => (
+      <PinHeaderColumns
+        content="Civility"
+        onPinClick={() => header.column.pin(header.column.getIsPinned() ? false : 'left')}
+        isPinned={header.column.getIsPinned() === 'left' ? true : false}
+      />
+    ),
+    footer: (props) => props.column.id,
+  },
+] as ColumnDef<Person>[];

package/src/components/tanstackTable/styles/_variables.scss

@@ -0,0 +1,35 @@
+// Light Theme Specific Variables
+
+:root [data-theme='light'] {
+  --pf-tanstack-table-background-color: var(--pf-white-color);
+  --pf-tanstack-table-font-color: var(--pf-gray-color);
+  --pf-tanstack-table-border-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-stripe-color: var(--pf-gray-color-100);
+  --pf-tanstack-table-hover-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
+  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
+  --pf-tanstack-table-clicked-color: var(--pf-secondary-color-100);
+  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-200);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
+    0 8px 16px rgba(0, 0, 0, 0.2);
+  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'],
+:root {
+  --pf-tanstack-table-background-color: var(--pf-primary-color-800);
+  --pf-tanstack-table-font-color: var(--pf-white-color);
+  --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
+  --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
+  --pf-tanstack-table-hover-color: var(--pf-primary-color-600);
+  --pf-tanstack-table-disabled-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-disabled-button-color: var(--pf-primary-color-100);
+  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
+  --pf-tanstack-table-clicked-color: var(--pf-primary-color);
+  --pf-tanstack-table-highlighted-color: var(--pf-primary-color);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4),
+    0 8px 16px rgba(0, 0, 0, 0.3);
+  --pf-tanstack-table-font-size: var(--pf-font-size-body2);
+  --pf-tanstack-table-pagination-background-color: var(--pf-primary-color-700);
+}