@indico-data/design-system 2.2.0 → 2.3.0

package/lib/src/types.d.ts

@@ -6,7 +6,5 @@ export type PermafrostComponent = {
 };
 export type ButtonVariant = 'default' | 'primary' | 'destructive';
 export type ButtonSize = 'normal' | 'large';
-import { ListItem } from './legacy/components/Navigation/Drawer/types';
-export type { ListItem };
 import { IconName } from '../build/generated/iconTypes';
 export type { IconName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -39,12 +39,14 @@
     "@react-types/button": "^3.9.3",
     "@react-types/checkbox": "^3.8.1",
     "@react-types/radio": "^3.8.0",
+    "@testing-library/react": "^16.0.0",
     "classnames": "^2.5.1",
     "date-fns": "^3.6.0",
     "focus-trap-react": "^10.2.3",
     "html-webpack-plugin": "^5.6.0",
     "prop-types": "^15.8.1",
     "react-aria-components": "^1.2.1",
+    "react-data-table-component": "^7.6.2",
     "react-day-picker": "^8.10.1",
     "react-grid-system": "^8.2.0",
     "react-modal": "^3.16.1",
@@ -93,7 +95,7 @@
     "@storybook/theming": "^8.0.8",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/css-modules": "^1.0.5",
     "@types/jest": "^29.5.12",

package/src/components/index.ts

@@ -1,3 +1,4 @@
 export { Container, Col, Row } from './grid';
 export { Button } from './button';
 export { Icon } from './icons';
+export { Table } from './tables/table';

package/src/components/tables/table/LoadingComponent.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const LoadingComponent = () => {
+  return <div className="table-loading">Loading...</div>;
+};

package/src/components/tables/table/Table.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as TableStories from './Table.stories';
+
+<Meta title="Layout/Table" name="Table" />
+
+# Table
+
+This component facilitates the rapid creation of responsive and paginated tables. This component was created using the React [Data Table Component](https://react-data-table-component.netlify.app/?path=/docs/api-props--docs) library as a base. You can read more on additional props not listed in this documentation at [this link](https://react-data-table-component.netlify.app/?path=/docs/api-props--docs).
+
+<Canvas
+  of={TableStories.Default}
+/>
+
+
+<Controls of={TableStories.Default} />

package/src/components/tables/table/Table.scss

@@ -0,0 +1,79 @@
+@import 'variables.scss';
+
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  .table-loading {
+    color: var(--pf-table-font-color);
+  }
+  .table-wrapper {
+    background-color: var(--pf-table-background-color);
+    color: var(--pf-table-font-color);
+
+    .rdt_Table,
+    .rdt_TableRow,
+    .rdt_TableCol,
+    .rdt_TableCol_Sortable,
+    .rdt_TableCell,
+    .rdt_TableHeader,
+    .rdt_TableFooter,
+    .rdt_TableHead,
+    .rdt_TableHeadRow,
+    .rdt_TableBody,
+    .rdt_ExpanderRow,
+    .rdt_Pagination {
+      background-color: var(--pf-table-background-color);
+      color: var(--pf-table-font-color);
+    }
+    button {
+      svg {
+        fill: var(--pf-table-font-color);
+      }
+
+      &:disabled {
+        svg {
+          fill: var(--pf-gray-color-900);
+        }
+      }
+    }
+  }
+
+  .pf__table--striped {
+    .rdt_TableRow:nth-child(odd) {
+      .rdt_TableCell {
+        background-color: var(--pf-table-stripe-color);
+      }
+    }
+  }
+}
+
+:root [data-theme='light'] {
+  .table-wrapper {
+    .rdt_Table,
+    .rdt_TableRow,
+    .rdt_TableCol,
+    .rdt_TableCol_Sortable,
+    .rdt_TableCell,
+    .rdt_TableHeader,
+    .rdt_TableFooter,
+    .rdt_TableHead,
+    .rdt_TableHeadRow,
+    .rdt_TableBody,
+    .rdt_ExpanderRow,
+    .rdt_Pagination {
+      background-color: var(--pf-table-background-color);
+      color: var(--pf-table-font-color);
+    }
+    button {
+      svg {
+        fill: var(--pf-table-font-color);
+      }
+
+      &:disabled {
+        svg {
+          fill: var(--pf-gray-color-300);
+        }
+      }
+    }
+  }
+}

package/src/components/tables/table/Table.stories.tsx

@@ -0,0 +1,547 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Table } from './Table';
+import { sampleData } from './sampleData';
+import React from 'react';
+
+const meta: Meta = {
+  title: 'Layout/Table',
+  component: Table,
+  argTypes: {
+    columns: {
+      control: false,
+      description: 'The columns to display in the table',
+      table: {
+        category: 'Data',
+        type: { summary: 'array' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    data: {
+      control: false,
+      description:
+        'Its highly recommended that your data have a unique identifier (keyField). The default keyField is id. If you need to override this value then use the keyField proeprty below',
+      table: {
+        category: 'Data',
+        type: { summary: 'array' },
+        defaultValue: { summary: '[]' },
+      },
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Disables the Table section',
+      table: {
+        category: 'Styling',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'It sets the loading of the table',
+      table: {
+        category: 'Styling',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    direction: {
+      control: 'select',
+      options: ['auto', 'ltr', 'rtl'],
+      description:
+        'Accepts: ltr, rtl, or auto. When set to auto (default), RDT will attempt to detect direction by checking the HTML and DIV tags. For cases where you need to force rtl, or ltr just set this option manually (i.e. SSR).',
+      table: {
+        category: 'Accessibility',
+        defaultValue: { summary: 'auto' },
+      },
+    },
+
+    title: {
+      control: 'text',
+      description:
+        'The title displayed in the Table Header. If you do not provide the title property the Table Header will not be rendered',
+      table: {
+        category: 'Styling',
+        type: {
+          summary: 'string | React Component',
+        },
+        defaultValue: { summary: '' },
+      },
+    },
+    responsive: {
+      control: 'boolean',
+      description: 'Makes the table horizontally scrollable on smaller screen widths',
+      table: {
+        category: 'Accessibility',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    dense: {
+      control: 'boolean',
+      description:
+        'Compacts the row height. can be overridden via theming rows.denseHeight. Note: If any custom elements exceed the dense height then the row will only compact to the tallest element any of your cells',
+      table: {
+        category: 'Accessibility',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    noHeader: {
+      control: 'boolean',
+      description:
+        'Removes the table header. title, contextTitle and contextActions will be ignored',
+      table: {
+        category: 'Styling',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onSort: {
+      control: false,
+      description: 'Callback to access the sort state when a column is clicked. Returns',
+      table: {
+        category: 'Callbacks',
+        type: {
+          summary: '(selectedColumn, sortDirection, sortedRows) => {}',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    subHeader: {
+      control: 'boolean',
+      description: 'Show a sub header between the table and table header',
+      table: {
+        category: 'Styling',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    subHeaderComponent: {
+      control: false,
+      description: 'A component you want to render',
+      table: {
+        category: 'Components',
+        type: {
+          summary: 'React Component',
+        },
+        defaultValue: { summary: 'null' },
+      },
+    },
+    paginationPerPage: {
+      control: 'number',
+      description: 'The default rows per page to use when the table initially loads',
+      table: {
+        category: 'Add-Ons',
+        type: {
+          summary: 'number',
+        },
+        defaultValue: { summary: '10' },
+      },
+    },
+    noDataComponent: {
+      control: false,
+      description: 'A custom component to display when there are no records to display',
+      table: {
+        category: 'Components',
+        type: {
+          summary: 'string | React Component',
+        },
+        defaultValue: { summary: 'built-in' },
+      },
+    },
+    expandableRows: {
+      control: 'boolean',
+      description:
+        'Whether to make a row expandable, if true it requires an expandableRowsComponent. It is highly recommended your data set have a unique identifier defined as the keyField for row expansion to work properly.',
+      table: {
+        category: 'Add-Ons',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    clearSelectedRows: {
+      control: 'boolean',
+      description:
+        'Toggling this property clears the selectedRows. If you use redux or react state you need to make sure that you pass a toggled value or the component will not update',
+      table: {
+        category: 'Styling',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    pagination: {
+      control: 'boolean',
+      description:
+        'Enable pagination with defaults. by default the total record set will be sliced depending on the page, rows per page. if you wish to use server side pagination then use the paginationServer property',
+      table: {
+        category: 'Add-Ons',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    selectableRows: {
+      control: 'boolean',
+      description: 'Whether to show selectable checkboxes',
+      table: {
+        category: 'Add-Ons',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'true' },
+      },
+    },
+
+    striped: {
+      control: 'boolean',
+      description: 'Stripe/band color the odd rows',
+      table: {
+        category: 'Accessibility',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'true' },
+      },
+    },
+    // hidden props
+    onRowDoubleClicked: {
+      table: {
+        disable: true,
+      },
+    },
+    onRowMouseEnter: {
+      table: {
+        disable: true,
+      },
+    },
+    onRowMouseLeave: {
+      table: {
+        disable: true,
+      },
+    },
+    defaultSortFieldId: {
+      table: {
+        disable: true,
+      },
+    },
+    defaultSortAsc: {
+      table: {
+        disable: true,
+      },
+    },
+    sortIcon: {
+      table: {
+        disable: true,
+      },
+    },
+    sortServer: {
+      table: {
+        disable: true,
+      },
+    },
+    sortFunction: {
+      table: {
+        disable: true,
+      },
+    },
+    selectableRowsVisibleOnly: {
+      table: {
+        disable: true,
+      },
+    },
+    selectableRowsHighlight: {
+      table: {
+        disable: true,
+      },
+    },
+    selectableRowsSingle: {
+      table: {
+        disable: true,
+      },
+    },
+    selectableRowsNoSelectAll: {
+      table: {
+        disable: true,
+      },
+    },
+    selectableRowsComponent: {
+      table: {
+        disable: true,
+      },
+    },
+    selectableRowsComponentProps: {
+      table: {
+        disable: true,
+      },
+    },
+    selectableRowSelected: {
+      table: {
+        disable: true,
+      },
+    },
+    selectableRowDisabled: {
+      table: {
+        disable: true,
+      },
+    },
+    expandableIcon: {
+      table: {
+        disable: true,
+      },
+    },
+    expandableRowsComponent: {
+      table: {
+        disable: true,
+      },
+    },
+    expandableRowDisabled: {
+      table: {
+        disable: true,
+      },
+    },
+    expandableRowExpanded: {
+      table: {
+        disable: true,
+      },
+    },
+    expandableRowsComponentProps: {
+      table: {
+        disable: true,
+      },
+    },
+    expandOnRowClicked: {
+      table: {
+        disable: true,
+      },
+    },
+    expandOnRowDoubleClicked: {
+      table: {
+        disable: true,
+      },
+    },
+    expandableRowsHideExpander: {
+      table: {
+        disable: true,
+      },
+    },
+    expandableInheritConditionalStyles: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationServer: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationServerOptions: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationDefaultPage: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationComponent: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationComponentOptions: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationIconFirstPage: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationIconLastPage: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationIconNext: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationIconPrevious: {
+      table: {
+        disable: true,
+      },
+    },
+    fixedHeader: {
+      table: {
+        disable: true,
+      },
+    },
+    fixedHeaderScrollHeight: {
+      table: {
+        disable: true,
+      },
+    },
+    actions: {
+      table: {
+        disable: true,
+      },
+    },
+    onChangeRowsPerPage: {
+      table: {
+        disable: true,
+      },
+    },
+    onChangePage: {
+      table: {
+        disable: true,
+      },
+    },
+    onSelectedRowsChange: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationResetDefaultPage: {
+      table: {
+        disable: true,
+      },
+    },
+    onRowExpandToggled: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationTotalRows: {
+      table: {
+        disable: true,
+      },
+    },
+    persistTableHead: {
+      table: {
+        disable: true,
+      },
+    },
+    highlightOnHover: {
+      table: {
+        disable: true,
+      },
+    },
+    pointerOnHover: {
+      table: {
+        disable: true,
+      },
+    },
+    keyField: {
+      table: {
+        disable: true,
+      },
+    },
+    paginationRowsPerPageOptions: {
+      table: {
+        disable: true,
+      },
+    },
+    onRowClicked: {
+      table: {
+        disable: true,
+      },
+    },
+    subHeaderAlign: {
+      table: {
+        disable: true,
+      },
+    },
+    subHeaderWrap: {
+      table: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Table>;
+
+interface DataRow {
+  name: string;
+  class: string;
+  age: number;
+  weapon: string;
+  backstory: string;
+  favoriteMeal: string;
+}
+
+export const Default: Story = {
+  args: {
+    pagination: true,
+    selectableRows: true,
+    isDisabled: false,
+    isLoading: false,
+    direction: 'ltr',
+    striped: true,
+    subHeaderAlign: 'center',
+    subHeaderWrap: true,
+    paginationRowsPerPageOptions: [5, 10, 15, 20],
+    responsive: true,
+    title: 'Character List',
+    dense: true,
+    noHeader: false,
+    noDataComponent: null,
+    expandableRows: false,
+    clearSelectedRows: false,
+    onSort: false,
+    subHeader: false,
+    subHeaderComponent: null,
+    paginationPerPage: 10,
+    columns: [
+      {
+        name: 'Name',
+        selector: (row) => row.name,
+      },
+      {
+        name: 'Class',
+        selector: (row) => row.class,
+      },
+      {
+        name: 'Age',
+        selector: (row) => row.age,
+        sortable: true,
+      },
+      {
+        name: 'Weapon',
+        selector: (row) => row.weapon,
+      },
+      {
+        name: 'Backstory',
+        selector: (row) => row.backstory,
+      },
+      {
+        name: 'Favorite Meal',
+        selector: (row) => row.favoriteMeal,
+      },
+    ],
+    data: sampleData as DataRow[],
+  },
+  render: ({ ...args }) => <Table {...args} />,
+};