@indico-data/design-system 2.3.2 → 2.4.1

package/lib/src/components/table/Table.d.ts

@@ -1,78 +1,10 @@
-import React from 'react';
-import { TableColumn } from 'react-data-table-component';
-type LocalDirection = 'auto' | 'ltr' | 'rtl';
-type LocalAlignment = 'left' | 'right' | 'center';
-interface TableProps {
-    columns: TableColumn<any>[];
-    data: Record<string, any>[];
-    responsive?: boolean;
-    direction?: LocalDirection;
-    subHeaderAlign?: LocalAlignment;
-    subHeaderWrap?: boolean;
-    pagination?: boolean;
-    selectableRows?: boolean;
-    keyField?: string;
-    title?: string | React.ReactNode;
-    striped?: boolean;
-    highlightOnHover?: boolean;
-    pointerOnHover?: boolean;
-    dense?: boolean;
-    persistTableHead?: boolean;
-    noDataComponent?: string | React.ReactNode;
+import { TableProps as RDTTableProps, Direction as RDTDirection, Alignment as RDTAlignment } from 'react-data-table-component';
+export type Direction = `${RDTDirection}`;
+export type Alignment = `${RDTAlignment}`;
+export type TableProps<T> = Omit<RDTTableProps<T>, 'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'> & {
     isDisabled?: boolean;
-    onRowClicked?: (row: Record<string, any>, event: React.MouseEvent) => void;
-    onRowDoubleClicked?: (row: Record<string, any>, event: React.MouseEvent) => void;
-    onRowMouseEnter?: (row: Record<string, any>, event: React.MouseEvent) => void;
-    onRowMouseLeave?: (row: Record<string, any>, event: React.MouseEvent) => void;
-    defaultSortFieldId?: string | number;
-    defaultSortAsc?: boolean;
-    sortIcon?: React.ReactNode;
-    sortServer?: boolean;
-    sortFunction?: any;
-    onSort?: any;
-    selectableRowsVisibleOnly?: boolean;
-    selectableRowsHighlight?: boolean;
-    selectableRowsSingle?: boolean;
-    selectableRowsNoSelectAll?: boolean;
-    selectableRowsComponent?: any;
-    selectableRowsComponentProps?: Record<string, any>;
-    clearSelectedRows?: boolean;
-    selectableRowSelected?: (row: Record<string, any>) => boolean;
-    selectableRowDisabled?: (row: Record<string, any>) => boolean;
-    onSelectedRowsChange?: any;
-    expandableRows?: boolean;
-    expandableIcon?: any;
-    expandableRowsComponent?: any;
-    expandableRowDisabled?: any;
-    expandableRowExpanded?: any;
-    expandableRowsComponentProps?: Record<string, any>;
-    expandOnRowClicked?: boolean;
-    expandOnRowDoubleClicked?: boolean;
-    expandableRowsHideExpander?: boolean;
-    expandableInheritConditionalStyles?: boolean;
-    onRowExpandToggled?: any;
-    paginationServer?: boolean;
-    paginationServerOptions?: Record<string, any>;
-    paginationDefaultPage?: number;
-    paginationResetDefaultPage?: boolean;
-    paginationTotalRows?: number;
-    paginationPerPage?: number;
-    paginationRowsPerPageOptions?: number[];
-    paginationComponent?: any;
-    paginationComponentOptions?: Record<string, any>;
-    paginationIconFirstPage?: any;
-    paginationIconLastPage?: any;
-    paginationIconNext?: any;
-    paginationIconPrevious?: any;
-    onChangePage?: any;
-    onChangeRowsPerPage?: any;
-    actions?: any;
-    noHeader?: boolean;
-    fixedHeader?: boolean;
-    fixedHeaderScrollHeight?: string;
-    subHeader?: boolean;
-    subHeaderComponent?: any;
     isLoading?: boolean;
-}
-export declare const Table: (props: TableProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+    direction: Direction;
+    subHeaderAlign: Alignment;
+};
+export declare const Table: <T>(props: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/lib/src/components/table/Table.stories.d.ts

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Table } from './Table';
+import { SampleDataRow } from './sampleData';
 declare const meta: Meta;
 export default meta;
-type Story = StoryObj<typeof Table>;
+type Story = StoryObj<typeof Table<SampleDataRow>>;
 export declare const Default: Story;

package/lib/src/components/table/sampleData.d.ts

@@ -1,8 +1,9 @@
-export declare const sampleData: {
+export interface SampleDataRow {
     name: string;
     class: string;
     age: number;
     weapon: string;
     backstory: string;
     favoriteMeal: string;
-}[];
+}
+export declare const sampleData: SampleDataRow[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.3.2",
+  "version": "2.4.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -22,7 +22,7 @@
     "all-releases": "npm view @indico-data/design-system versions",
     "latest-release": "npm dist-tags ls @indico-data/design-system",
     "generate-icons": "node scripts/generateIconTypes.js",
-    "postinstall": "yarn generate-icons"
+    "postinstall": "node scripts/generateIconTypes.js"
   },
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"

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

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { Table } from './Table';
-import { sampleData } from './sampleData';
-import React from 'react';
+import { SampleDataRow, sampleData } from './sampleData';
 
 const meta: Meta = {
   title: 'Layout/Table',
@@ -106,6 +105,17 @@ const meta: Meta = {
         defaultValue: { summary: 'false' },
       },
     },
+    noTableHead: {
+      control: 'boolean',
+      description: 'Hides the the sort columns and titles (TableHead)',
+      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',
@@ -481,16 +491,7 @@ const meta: Meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof Table>;
-
-interface DataRow {
-  name: string;
-  class: string;
-  age: number;
-  weapon: string;
-  backstory: string;
-  favoriteMeal: string;
-}
+type Story = StoryObj<typeof Table<SampleDataRow>>;
 
 export const Default: Story = {
   args: {
@@ -507,10 +508,10 @@ export const Default: Story = {
     title: 'Character List',
     dense: true,
     noHeader: false,
+    noTableHead: false,
     noDataComponent: null,
     expandableRows: false,
     clearSelectedRows: false,
-    onSort: false,
     subHeader: false,
     subHeaderComponent: null,
     paginationPerPage: 10,
@@ -541,7 +542,7 @@ export const Default: Story = {
         selector: (row) => row.favoriteMeal,
       },
     ],
-    data: sampleData as DataRow[],
+    data: sampleData,
   },
   render: ({ ...args }) => <Table {...args} />,
 };

package/src/components/table/Table.tsx

@@ -1,86 +1,25 @@
-import React from 'react';
-import DataTable, { TableColumn, Direction, Alignment } from 'react-data-table-component';
-import { LoadingComponent } from './LoadingComponent';
-
-type LocalDirection = 'auto' | 'ltr' | 'rtl';
-type LocalAlignment = 'left' | 'right' | 'center';
-interface TableProps {
-  columns: TableColumn<any>[];
-  data: Record<string, any>[];
-  responsive?: boolean;
-  direction?: LocalDirection;
-  subHeaderAlign?: LocalAlignment;
-  subHeaderWrap?: boolean;
-  pagination?: boolean;
-  selectableRows?: boolean;
-  keyField?: string;
-  title?: string | React.ReactNode;
-  striped?: boolean;
-  highlightOnHover?: boolean;
-  pointerOnHover?: boolean;
-  dense?: boolean;
-  persistTableHead?: boolean;
-  noDataComponent?: string | React.ReactNode;
-  isDisabled?: boolean;
-  onRowClicked?: (row: Record<string, any>, event: React.MouseEvent) => void;
-  onRowDoubleClicked?: (row: Record<string, any>, event: React.MouseEvent) => void;
-  onRowMouseEnter?: (row: Record<string, any>, event: React.MouseEvent) => void;
-  onRowMouseLeave?: (row: Record<string, any>, event: React.MouseEvent) => void;
-  defaultSortFieldId?: string | number;
-  defaultSortAsc?: boolean;
-  sortIcon?: React.ReactNode;
-  sortServer?: boolean;
-  sortFunction?: any;
-  onSort?: any;
-  selectableRowsVisibleOnly?: boolean;
-  selectableRowsHighlight?: boolean;
-  selectableRowsSingle?: boolean;
-  selectableRowsNoSelectAll?: boolean;
-  selectableRowsComponent?: any;
-  selectableRowsComponentProps?: Record<string, any>;
-  clearSelectedRows?: boolean;
-  selectableRowSelected?: (row: Record<string, any>) => boolean;
-  selectableRowDisabled?: (row: Record<string, any>) => boolean;
-  onSelectedRowsChange?: any;
-  expandableRows?: boolean;
-  expandableIcon?: any;
-  expandableRowsComponent?: any;
-  expandableRowDisabled?: any;
-  expandableRowExpanded?: any;
-  expandableRowsComponentProps?: Record<string, any>;
-  expandOnRowClicked?: boolean;
-  expandOnRowDoubleClicked?: boolean;
-  expandableRowsHideExpander?: boolean;
-  expandableInheritConditionalStyles?: boolean;
-  onRowExpandToggled?: any;
+import DataTable, {
+  TableProps as RDTTableProps,
+  Direction as RDTDirection,
+  Alignment as RDTAlignment,
+} from 'react-data-table-component';
 
-  paginationServer?: boolean;
-  paginationServerOptions?: Record<string, any>;
-  paginationDefaultPage?: number;
-  paginationResetDefaultPage?: boolean;
-  paginationTotalRows?: number;
-  paginationPerPage?: number;
-  paginationRowsPerPageOptions?: number[];
-  paginationComponent?: any;
-  paginationComponentOptions?: Record<string, any>;
-  paginationIconFirstPage?: any;
-  paginationIconLastPage?: any;
-  paginationIconNext?: any;
-  paginationIconPrevious?: any;
-  onChangePage?: any;
-  onChangeRowsPerPage?: any;
+import { LoadingComponent } from './LoadingComponent';
 
-  actions?: any;
-  noHeader?: boolean;
-  fixedHeader?: boolean;
-  fixedHeaderScrollHeight?: string;
-  subHeader?: boolean;
-  subHeaderComponent?: any;
+export type Direction = `${RDTDirection}`;
+export type Alignment = `${RDTAlignment}`;
 
+export type TableProps<T> = Omit<
+  RDTTableProps<T>,
+  'disabled' | 'progressPending' | 'direction' | 'subHeaderAlign'
+> & {
+  isDisabled?: boolean;
   isLoading?: boolean;
-}
+  direction: Direction;
+  subHeaderAlign: Alignment;
+};
 
-export const Table = (props: TableProps) => {
+export const Table = <T,>(props: TableProps<T>) => {
   const {
     responsive = true,
     direction = 'auto',
@@ -96,8 +35,8 @@ export const Table = (props: TableProps) => {
     <div className="table-wrapper">
       <DataTable
         responsive={responsive}
-        direction={direction as Direction}
-        subHeaderAlign={subHeaderAlign as Alignment}
+        direction={direction as RDTDirection}
+        subHeaderAlign={subHeaderAlign as RDTAlignment}
         keyField={keyField}
         striped={striped}
         className={`${striped ? 'pf__table--striped' : ''}`}

package/src/components/table/sampleData.ts

@@ -1,4 +1,13 @@
-export const sampleData = [
+export interface SampleDataRow {
+  name: string;
+  class: string;
+  age: number;
+  weapon: string;
+  backstory: string;
+  favoriteMeal: string;
+}
+
+export const sampleData: SampleDataRow[] = [
   {
     name: 'Thalion',
     class: 'Ranger',