feat/full-type-safe

.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:

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@table-library/react-table-library",
- "version": "0.0.0-development",
+ "version": "4.0.30.beta.1",
  "description": "react-table-library",
  "type": "module",
  "main": "main.js",
@@ -111,11 +111,11 @@
  "storybook:dev": "start-storybook .storybook --no-manager-cache .storybook/static -p 9001",
  "storybook:build": "build-storybook .storybook --no-manager-cache .storybook/static -o dist",
  "library:build": "rollup -c && npm run copypackage && npm run copyreadme",
- "check": "npm run test && npm run prettier:check && npm run lint:check && tsc",
+ "valid": "npm run test && npm run prettier:check && npm run lint:check && tsc",
  "copypackage": "cp -rf package.json lib",
  "copyreadme": "cp -rf README.md lib",
- "dist": "npm run check && npm run library:build && cd lib && npm publish",
- "dist:beta": "npm run check && npm run library:build && cd lib && npm publish --tag beta",
+ "dist": "npm run valid && npm run library:build && cd lib && npm publish",
+ "dist:beta": "npm run valid && npm run library:build && cd lib && npm publish --tag beta",
  "prepublishOnly": "echo \"Warning: Don't run 'npm publish' in root. Use 'npm run dist' instead.\" && exit 0",
  "semantic-release": "semantic-release"
  },

src/common/context/Feature.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
 
-import { SelectContext } from '@table-library/react-table-library/common/context/Select';
-import { TreeContext } from '@table-library/react-table-library/common/context/Tree';
-import { SortContext } from '@table-library/react-table-library/common/context/Sort';
-import { PaginationContext } from '@table-library/react-table-library/common/context/Pagination';
+import { TableNode } from '@table-library/react-table-library/types/table';
+import { useSelectContext } from '@table-library/react-table-library/common/context/Select';
+import { useTreeContext } from '@table-library/react-table-library/common/context/Tree';
+import { useSortContext } from '@table-library/react-table-library/common/context/Sort';
+import { usePaginationContext } from '@table-library/react-table-library/common/context/Pagination';
 
-export const useFeatures = () => {
- const select = React.useContext(SelectContext);
- const tree = React.useContext(TreeContext);
- const sort = React.useContext(SortContext);
- const pagination = React.useContext(PaginationContext);
+export const useFeatures = <T extends TableNode>() => {
+ const select = useSelectContext<T>();
+ const tree = useTreeContext<T>();
+ const sort = useSortContext<T>();
+ const pagination = usePaginationContext<T>();
 
  // if changed, adjust applyModifiers usages
  return {

src/common/context/Pagination.tsx

@@ -1,8 +1,21 @@
 import * as React from 'react';
 
 import { Nullish } from '@table-library/react-table-library/types/common';
+import { TableNode } from '@table-library/react-table-library/types/table';
 import { Pagination } from '@table-library/react-table-library/types/pagination';
 
-const PaginationContext = React.createContext<Pagination | Nullish>(null);
+let PaginationContext: any = null;
 
-export { PaginationContext };
+const createPaginationContext = <T extends TableNode>() => {
+ // singleton check
+ if (PaginationContext) return PaginationContext;
+
+ PaginationContext = React.createContext<Pagination<T> | Nullish>(null);
+ return PaginationContext;
+};
+
+const usePaginationContext = <T extends TableNode>(): Pagination<T> => {
+ return React.useContext(PaginationContext);
+};
+
+export { createPaginationContext, usePaginationContext };

src/common/context/Select.tsx

@@ -1,8 +1,21 @@
 import * as React from 'react';
 
 import { Nullish } from '@table-library/react-table-library/types/common';
+import { TableNode } from '@table-library/react-table-library/types/table';
 import { Select } from '@table-library/react-table-library/types/select';
 
-const SelectContext = React.createContext<Select | Nullish>(null);
+let SelectContext: any = null;
 
-export { SelectContext };
+const createSelectContext = <T extends TableNode>() => {
+ // singleton check
+ if (SelectContext) return SelectContext;
+
+ SelectContext = React.createContext<Select<T> | Nullish>(null);
+ return SelectContext;
+};
+
+const useSelectContext = <T extends TableNode>(): Select<T> => {
+ return React.useContext(SelectContext);
+};
+
+export { createSelectContext, useSelectContext };

src/common/context/Sort.tsx

@@ -1,8 +1,21 @@
 import * as React from 'react';
 
 import { Nullish } from '@table-library/react-table-library/types/common';
+import { TableNode } from '@table-library/react-table-library/types/table';
 import { Sort } from '@table-library/react-table-library/types/sort';
 
-const SortContext = React.createContext<Sort | Nullish>(null);
+let SortContext: any = null;
 
-export { SortContext };
+const createSortContext = <T extends TableNode>() => {
+ // singleton check
+ if (SortContext) return SortContext;
+
+ SortContext = React.createContext<Sort<T> | Nullish>(null);
+ return SortContext;
+};
+
+const useSortContext = <T extends TableNode>(): Sort<T> => {
+ return React.useContext(SortContext);
+};
+
+export { createSortContext, useSortContext };

src/common/context/Table.tsx

@@ -1,7 +1,19 @@
 import * as React from 'react';
 
-import { Data } from '@table-library/react-table-library/types/table';
+import { TableNode, Data } from '@table-library/react-table-library/types/table';
 
-const TableContext = React.createContext<Data | null>(null);
+let TableContext: any = null;
 
-export { TableContext };
+const createTableContext = <T extends TableNode>() => {
+ // singleton check
+ if (TableContext) return TableContext;
+
+ TableContext = React.createContext<Data<T> | null>(null);
+ return TableContext;
+};
+
+const useTableContext = <T extends TableNode>(): Data<T> => {
+ return React.useContext(TableContext);
+};
+
+export { createTableContext, useTableContext };

src/common/context/Tree.tsx

@@ -1,8 +1,21 @@
 import * as React from 'react';
 
 import { Nullish } from '@table-library/react-table-library/types/common';
+import { TableNode } from '@table-library/react-table-library/types/table';
 import { Tree } from '@table-library/react-table-library/types/tree';
 
-const TreeContext = React.createContext<Tree | Nullish>(null);
+let TreeContext: any = null;
 
-export { TreeContext };
+const createTreeContext = <T extends TableNode>() => {
+ // singleton check
+ if (TreeContext) return TreeContext;
+
+ TreeContext = React.createContext<Tree<T> | Nullish>(null);
+ return TreeContext;
+};
+
+const useTreeContext = <T extends TableNode>(): Tree<T> => {
+ return React.useContext(TreeContext);
+};
+
+export { createTreeContext, useTreeContext };

src/common/util/modifiers.ts

@@ -1,9 +1,9 @@
 import { TableNode, Features, ExtendedNode } from '@table-library/react-table-library/types/table';
 
 export const applyModifiers =
- ({ sort, pagination, tree }: Features) =>
- (nodes: TableNode[]) => {
- let modifiedNodes: ExtendedNode<TableNode>[] = [...nodes];
+ <T extends TableNode>({ sort, pagination, tree }: Features<T>) =>
+ (nodes: T[]) => {
+ let modifiedNodes: ExtendedNode<T>[] = [...nodes];
 
  modifiedNodes = sort ? sort.modifier(modifiedNodes) : modifiedNodes;
 

src/common/util/tree/fromTreeToList.ts

@@ -14,19 +14,19 @@ export const fromTreeToList = <T extends TableNode>(nodes: T[] | Nullish): T[] =
  return acc;
  }, []);
 
-export const fromTreeToListExtended = (
- data: Data,
- nodes: TableNode[],
+export const fromTreeToListExtended = <T extends TableNode>(
+ data: Data<T>,
+ nodes: T[],
  treeIds: string[],
  treeXLevel = 0,
  treeYLevel = 0,
- parentNode: ExtendedNode<TableNode> | Nullish,
-): ExtendedNode<TableNode>[] =>
- (nodes || []).reduce((acc: ExtendedNode<TableNode>[], value: TableNode) => {
+ parentNode: ExtendedNode<T> | Nullish,
+): ExtendedNode<T>[] =>
+ (nodes || []).reduce((acc: ExtendedNode<T>[], value: T) => {
  let listNode;
 
  if (value.nodes) {
- listNode = { ...value, nodes: value.nodes.map((node: TableNode) => node.id) };
+ listNode = { ...value, nodes: (value.nodes as T[]).map((node: T) => node.id) };
  } else {
  listNode = value;
  }
@@ -35,23 +35,23 @@ export const fromTreeToListExtended = (
  treeXLevel,
  treeYLevel,
  // TODO: data needs to be explicitly typed here for this edge case of root
- parentNode: (parentNode || data) as ExtendedNode<TableNode>,
+ parentNode: (parentNode || data) as ExtendedNode<T>,
  ancestors: (parentNode
  ? [parentNode, ...(parentNode?.ancestors ?? [])]
- : [parentNode || data]) as ExtendedNode<TableNode>[],
+ : [parentNode || data]) as ExtendedNode<T>[],
  };
 
  listNode = {
  ...listNode,
  ...extendedNode,
- } as ExtendedNode<TableNode>;
+ } as ExtendedNode<T>;
 
  acc = acc.concat(listNode); // eslint-disable-line no-param-reassign
 
  if (hasLeaves(value) && treeIds.includes(value.id)) {
  // eslint-disable-next-line no-param-reassign
  acc = acc.concat(
- fromTreeToListExtended(data, value.nodes!, treeIds, treeXLevel + 1, treeYLevel, {
+ fromTreeToListExtended(data, value.nodes! as T[], treeIds, treeXLevel + 1, treeYLevel, {
  ...value,
  ...extendedNode,
  }),

src/common/util/useIdReducer/index.ts

@@ -148,12 +148,12 @@ const getRecursiveIds = (id: string, nodes: TableNode[]) => {
  return [node, ...fromTreeToList(node?.nodes)].map((item) => item!.id);
 };
 
-const useIdReducer = (
- data: Data,
+const useIdReducer = <T extends TableNode>(
+ data: Data<T>,
  controlledState: State,
  onChange: MiddlewareFunction,
  context: any,
-): [State, IdReducerFunctions] => {
+): [State, IdReducerFunctions<T>] => {
  const [state, dispatchWithMiddleware] = useReducerWithMiddleware(
  reducer,
  controlledState,

src/compact/CompactFooter.tsx

@@ -1,16 +1,21 @@
 import * as React from 'react';
 
-import { Footer, FooterRow, FooterCell } from '@table-library/react-table-library/table/index';
+import {
+ Footer,
+ FooterRow,
+ FooterCell,
+ TableNode,
+} from '@table-library/react-table-library/table/index';
 
 import { Column } from '@table-library/react-table-library/types/compact';
 
-type FooterProps = { columns: Column[] };
+type FooterProps<T extends TableNode> = { columns: Column<T>[] };
 
-export const CompactFooter: React.FC<FooterProps> = ({ columns }: FooterProps) => {
+export const CompactFooter = <T extends TableNode>({ columns }: FooterProps<T>) => {
  return (
  <Footer>
  <FooterRow>
- {columns.map((column: Column, index: number) => (
+ {columns.map((column: Column<T>, index: number) => (
  <FooterCell key={index}>{column.footer}</FooterCell>
  ))}
  </FooterRow>

src/compact/CompactHeader.tsx

@@ -1,26 +1,31 @@
 import * as React from 'react';
 
-import { Header, HeaderRow, HeaderCell } from '@table-library/react-table-library/table/index';
+import {
+ Header,
+ HeaderRow,
+ HeaderCell,
+ TableNode,
+} from '@table-library/react-table-library/table/index';
 
 import { CompactTableProps, Column } from '@table-library/react-table-library/types/compact';
 
-const countPriorCheckboxes = (columns: Column[], column: Column) => {
+const countPriorCheckboxes = <T extends TableNode>(columns: Column<T>[], column: Column<T>) => {
  const index = columns.indexOf(column);
  const priorColumns = index > -1 ? columns.slice(0, index + 1) : [];
- const priorCheckboxes = priorColumns.filter((priorColumn: Column) => priorColumn.select);
+ const priorCheckboxes = priorColumns.filter((priorColumn: Column<T>) => priorColumn.select);
  return priorCheckboxes.length;
 };
 
-export const CompactHeader: React.FC<CompactTableProps> = ({
+export const CompactHeader = <T extends TableNode>({
  columns,
  ...tableProps
-}: CompactTableProps) => {
+}: CompactTableProps<T>) => {
  const { sort, select } = tableProps;
 
  return (
  <Header>
  <HeaderRow>
- {columns.map((column: Column, index: number) => {
+ {columns.map((column: Column<T>, index: number) => {
  // select feature
 
  let checkbox = null;
@@ -34,7 +39,7 @@ export const CompactHeader: React.FC<CompactTableProps> = ({
  }
 
  const sharedProps = {
- index: index + countPriorCheckboxes(columns, column),
+ index: index + countPriorCheckboxes<T>(columns, column),
  resize: column.resize,
  pinLeft: column.pinLeft,
  pinRight: column.pinRight,

src/compact/CompactRow.tsx

@@ -5,7 +5,7 @@ import { Row, Cell } from '@table-library/react-table-library/table/index';
 import { TableNode } from '@table-library/react-table-library/types/table';
 import { CompactTableProps, Column } from '@table-library/react-table-library/types/compact';
 
-const evaluateProps = (props: Record<string, any>, item: TableNode) =>
+const evaluateProps = <T extends TableNode>(props: Record<string, any>, item: T) =>
  Object.keys(props).reduce((acc: Record<string, any>, key: string) => {
  if (typeof props[key] === 'function') {
  acc[key] = props[key](item);
@@ -16,31 +16,31 @@ const evaluateProps = (props: Record<string, any>, item: TableNode) =>
  return acc;
  }, {});
 
-type CompactRowProps = { item: TableNode; index: number } & CompactTableProps;
+type CompactRowProps<T extends TableNode> = { item: T; index: number } & CompactTableProps<T>;
 
-export const CompactRow: React.FC<CompactRowProps> = ({
+export const CompactRow = <T extends TableNode>({
  index,
  item,
  columns,
  rowProps,
  rowOptions,
  ...tableProps
-}: CompactRowProps) => {
+}: CompactRowProps<T>) => {
  const { tree, select } = tableProps;
 
  return (
  <React.Fragment>
  {rowOptions?.renderBeforeRow && rowOptions.renderBeforeRow(item, index)}
 
  <Row item={item} {...rowProps}>
- {columns.map((column: Column, jindex: number) => {
+ {columns.map((column: Column<T>, jindex: number) => {
  const sharedProps = {
  pinLeft: column.pinLeft,
  pinRight: column.pinRight,
  hide: column.hide,
  };
 
- const evaluatedCellProps = evaluateProps(column?.cellProps || {}, item);
+ const evaluatedCellProps = evaluateProps<T>(column?.cellProps || {}, item);
 
  let cell = null;
  if (tree && column.tree) {