feat/full-type-safe (#107)

* wip

* wip

* wip

* feat(table): fully typesafe

Author: rwieruch

.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
         with:
           node-version: '16.x'
       - run: yarn install
-      - run: yarn run check
+      - run: yarn run valid
       - run: yarn run library:build
       - run: yarn run semantic-release
         env:

.storybook/stories/Types/compact-table.story.mdx

@@ -5,49 +5,52 @@ import { Meta } from '@storybook/addon-docs';
 # Compact Table
 
 ```javascript
+import * as React from 'react';
+
 import { TableNode, TableProps, RowProps } from '@table-library/react-table-library/types/table';
 import { RowHeight } from '@table-library/react-table-library/types/virtualized';
 import { ColumnSortProps } from '@table-library/react-table-library/types/sort';
 import { ColumnSelectProps } from '@table-library/react-table-library/types/select';
 import { ColumnTreeProps } from '@table-library/react-table-library/types/tree';
 import { ColumnResizeProps } from '@table-library/react-table-library/types/resize';
 
-export type Column = {
-  label: string,
-  renderCell: (node: TableNode) => React.ReactNode,
-  resize?: ColumnResizeProps,
-  sort?: ColumnSortProps,
-  select?: ColumnSelectProps,
-  tree?: ColumnTreeProps,
-  pinLeft?: boolean,
-  pinRight?: boolean,
-  hide?: boolean,
-  cellProps?: Record<string, any>,
+export type Column<T extends TableNode> = {
+  label: string;
+  renderCell: (node: T) => React.ReactNode;
+  footer?: string;
+  resize?: ColumnResizeProps;
+  sort?: ColumnSortProps;
+  select?: ColumnSelectProps;
+  tree?: ColumnTreeProps<T>;
+  pinLeft?: boolean;
+  pinRight?: boolean;
+  hide?: boolean;
+  cellProps?: Record<string, any>;
 };
 
 export type VirtualizedOptions = {
-  rowHeight: RowHeight,
-  itemCount?: number,
+  rowHeight: RowHeight;
+  itemCount?: number;
 };
 
 export type TableOptions = {
-  renderBeforeTable?: () => React.ReactNode,
-  renderAfterTable?: () => React.ReactNode,
+  renderBeforeTable?: () => React.ReactNode;
+  renderAfterTable?: () => React.ReactNode;
 };
 
-export type RowOptions = {
-  renderBeforeRow?: (node: TableNode) => React.ReactNode,
-  renderAfterRow?: (node: TableNode) => React.ReactNode,
+export type RowOptions<T extends TableNode> = {
+  renderBeforeRow?: (node: T, index: number) => React.ReactNode;
+  renderAfterRow?: (node: T, index: number) => React.ReactNode;
 };
 
-export type RowPropsAsObject = Omit<RowProps, 'item' | 'children'>;
+export type RowPropsAsObject<T extends TableNode> = Omit<RowProps<T>, 'item' | 'children'>;
 
-export type CompactTableProps = TableProps & {
-  columns: Column[],
-  tableOptions?: TableOptions,
-  rowProps?: RowPropsAsObject,
-  rowOptions?: RowOptions,
-  virtualizedOptions?: VirtualizedOptions,
+export type CompactTableProps<T extends TableNode> = TableProps<T> & {
+  columns: Column<T>[];
+  tableOptions?: TableOptions;
+  rowProps?: RowPropsAsObject<T>;
+  rowOptions?: RowOptions<T>;
+  virtualizedOptions?: VirtualizedOptions;
 };
 ```
 

.storybook/stories/Types/composed-table.story.mdx

@@ -5,76 +5,68 @@ import { Meta } from '@storybook/addon-docs';
 # Composed Table
 
 ```javascript
-import * as React from 'react';
-
-import { Nullish } from '@table-library/react-table-library/types/common';
-import { Theme } from '@table-library/react-table-library/types/theme';
-import { Layout } from '@table-library/react-table-library/types/layout';
-import { ColumnResizeProps } from '@table-library/react-table-library/types/resize';
-import { Select } from '@table-library/react-table-library/types/select';
-import { Tree } from '@table-library/react-table-library/types/tree';
-import { Sort } from '@table-library/react-table-library/types/sort';
-import { Pagination } from '@table-library/react-table-library/types/pagination';
-
 export type RestProps = Record<string, any>;
 
-export type OnClick = (node: TableNode, event: React.SyntheticEvent | React.KeyboardEvent) => void;
+export type Event = React.SyntheticEvent | React.KeyboardEvent;
+
+export type OnClick<T extends TableNode> = (node: T, event: Event) => void;
 
 export type CellProps = {
-  className?: string,
-  pinLeft?: boolean,
-  pinRight?: boolean,
-  stiff?: boolean,
-  gridColumnStart?: number,
-  gridColumnEnd?: number,
-  onClick?: (event: React.SyntheticEvent) => void,
-  children?: React.ReactNode,
+  className?: string;
+  pinLeft?: boolean;
+  pinRight?: boolean;
+  stiff?: boolean;
+  gridColumnStart?: number;
+  gridColumnEnd?: number;
+  onClick?: (event: React.SyntheticEvent) => void;
+  children?: React.ReactNode;
 } & RestProps;
 
 export type HeaderCellProps = {
-  index?: number,
-  className?: string,
-  hide?: boolean,
-  pinLeft?: boolean,
-  pinRight?: boolean,
-  stiff?: boolean,
-  isFooter?: boolean,
-  gridColumnStart?: number,
-  gridColumnEnd?: number,
-  resize?: ColumnResizeProps,
-  children?: React.ReactNode,
+  index?: number;
+  className?: string;
+  hide?: boolean;
+  pinLeft?: boolean;
+  pinRight?: boolean;
+  stiff?: boolean;
+  isFooter?: boolean;
+  gridColumnStart?: number;
+  gridColumnEnd?: number;
+  resize?: ColumnResizeProps;
+  children?: React.ReactNode;
 } & RestProps;
 
-export type RowProps = {
-  item: TableNode,
-  className?: string,
-  disabled?: boolean,
-  onClick?: OnClick,
-  onDoubleClick?: OnClick,
-  children: React.ReactNode,
+export type RowProps<T extends TableNode> = {
+  item: T;
+  className?: string;
+  disabled?: boolean;
+  onClick?: OnClick<T>;
+  onDoubleClick?: OnClick<T>;
+  children: React.ReactNode;
 } & RestProps;
 
 export type BodyProps = {
-  children: React.ReactNode,
+  children: React.ReactNode;
 } & RestProps;
 
 export type HeaderRowProps = {
-  className?: string,
-  children: React.ReactNode,
+  isFooter?: boolean;
+  className?: string;
+  children: React.ReactNode;
 } & RestProps;
 
 export type HeaderProps = {
-  children: React.ReactNode,
+  children: React.ReactNode;
 } & RestProps;
 
-export type TableProps = {
-  data: Data;
+export type TableProps<T extends TableNode> = {
+  data: Data<T>;
   theme?: Theme;
   layout?: Layout;
-  sort?: Sort;
-  pagination?: Pagination;
-  select?: Select;
-  tree?: Tree;
+  sort?: Sort<T>;
+  pagination?: Pagination<T>;
+  select?: Select<T>;
+  tree?: Tree<T>;
   onInit?: OnInitFunction;
   children?: (nodes: ExtendedNode<TableNode>[]) => React.ReactNode;
 } & RestProps;

.storybook/stories/Types/data.story.mdx

@@ -7,10 +7,12 @@ import { Meta } from '@storybook/addon-docs';
 Either table component needs to receive the following `Data` type as `data` prop:
 
 ```javascript
+export type Identifier = string | number;
+
 export type TableNode = {
-  id: string,
-  nodes?: TableNode[] | Nullish,
-  [prop: string]: any,
+  id: Identifier;
+  nodes?: TableNode[] | Nullish;
+  [prop: string]: any;
 };
 
 export type ExtendedNode<T extends TableNode> = T & {
@@ -20,9 +22,9 @@ export type ExtendedNode<T extends TableNode> = T & {
   ancestors?: ExtendedNode<T>[];
 };
 
-export type Data = {
-  pageInfo?: any,
-  nodes: TableNode[],
+export type Data<T extends TableNode> = {
+  pageInfo?: any;
+  nodes: T[];
 };
 ```
 

.storybook/stories/Types/layout.story.mdx

@@ -6,12 +6,12 @@ import { Meta } from '@storybook/addon-docs';
 
 ```javascript
 export type Layout = {
-  custom?: boolean,
-  horizontalScroll?: boolean,
-  fixedHeader?: boolean,
-  isDiv?: boolean,
-  resizedLayout?: string,
-  onLayoutChange?: (grid: string) => void,
+  custom?: boolean;
+  horizontalScroll?: boolean;
+  fixedHeader?: boolean;
+  isDiv?: boolean;
+  resizedLayout?: string;
+  onLayoutChange?: (grid: string) => void;
 };
 ```
 

.storybook/stories/Types/pagination.story.mdx

@@ -9,23 +9,23 @@ import { State, Modifier } from '@table-library/react-table-library/types/common
 import { TableNode } from '@table-library/react-table-library/types/table';
 
 export type PaginationOptions = {
-  isServer?: boolean,
+  isServer?: boolean;
 };
 
 export type PaginationOptionsSound = {
-  isServer: boolean,
+  isServer: boolean;
 };
 
 export type PaginationFunctions = {
-  onSetPage: (page: number) => void,
-  onSetSize: (size: number) => void,
+  onSetPage: (page: number) => void;
+  onSetSize: (size: number) => void;
 };
 
-export type Pagination = {
-  state: State,
-  fns: PaginationFunctions,
-  options: PaginationOptionsSound,
-  modifier: Modifier,
+export type Pagination<T extends TableNode> = {
+  state: State;
+  fns: PaginationFunctions;
+  options: PaginationOptionsSound;
+  modifier: Modifier<T>;
 };
 
 export type Pages = Record<string, TableNode[]>;

.storybook/stories/Types/resize.story.mdx

@@ -6,9 +6,9 @@ import { Meta } from '@storybook/addon-docs';
 
 ```javascript
 type ColumnResizePropsObject = {
-  minWidth?: number,
-  resizerWidth?: number,
-  resizerHighlight?: string,
+  minWidth?: number;
+  resizerWidth?: number;
+  resizerHighlight?: string;
 };
 
 export type ColumnResizeProps = ColumnResizePropsObject | boolean;

.storybook/stories/Types/select.story.mdx

@@ -36,8 +36,8 @@ export type SelectOptionsSound = {
   isPartialToAll: boolean;
 };
 
-export type CellSelectProps = {
-  item: TableNode;
+export type CellSelectProps<T extends TableNode> = {
+  item: T;
 };
 
 type ColumnSelectPropsObject = {
@@ -47,14 +47,14 @@ type ColumnSelectPropsObject = {
 
 export type ColumnSelectProps = ColumnSelectPropsObject | boolean;
 
-export type Select = {
+export type Select<T extends TableNode> = {
   state: State;
-  fns: IdReducerFunctions;
+  fns: IdReducerFunctions<T>;
   options: SelectOptionsSound;
-  _getRowProps: GetRowProps;
+  _getRowProps: GetRowProps<T>;
   components: {
     HeaderCellSelect: React.FunctionComponent<Record<string, any>>;
-    CellSelect: React.FunctionComponent<CellSelectProps>;
+    CellSelect: React.FunctionComponent<CellSelectProps<T>>;
   };
 };
 ```

.storybook/stories/Types/sort.story.mdx

@@ -76,11 +76,11 @@ export type HeaderCellSortProps = {
   children?: React.ReactNode;
 } & Record<string, any>;
 
-export type Sort = {
+export type Sort<T extends TableNode> = {
   state: State;
   fns: SortFunctions;
   options: SortOptionsSound;
-  modifier: Modifier;
+  modifier: Modifier<T>;
   components: {
     HeaderCellSort: React.FunctionComponent<HeaderCellSortProps>;
   };

.storybook/stories/Types/theme.story.mdx

@@ -6,17 +6,18 @@ import { Meta } from '@storybook/addon-docs';
 
 ```javascript
 export type Theme = {
-  Table?: string,
-  Header?: string,
-  Footer?: string,
-  Body?: string,
-  BaseRow?: string,
-  HeaderRow?: string,
-  FooterRow?: string,
-  Row?: string,
-  BaseCell?: string,
-  HeaderCell?: string,
-  Cell?: string,
+  Table?: string;
+  Header?: string;
+  Footer?: string;
+  Body?: string;
+  BaseRow?: string;
+  HeaderRow?: string;
+  FooterRow?: string;
+  Row?: string;
+  BaseCell?: string;
+  HeaderCell?: string;
+  FooterCell?: string;
+  Cell?: string;
 };
 ```