wip

table-library · Feb 5, 2022 · 462d37b · 462d37b
1 parent 9c5d5bb
commit 462d37b
Show file tree

Hide file tree

Showing 149 changed files with 3,894 additions and 1,861 deletions.
diff --git a/.babelrc b/.babelrc
@@ -8,6 +8,7 @@
       "module-resolver",
       {
         "alias": {
+          "@table-library/react-table-library/types": "./src/types",
           "@table-library/react-table-library/common": "./src/common",
           "@table-library/react-table-library/table": "./src/table",
           "@table-library/react-table-library/theme": "./src/theme",

diff --git a/.eslintrc b/.eslintrc
@@ -1,5 +1,13 @@
 {
-  "parser": "@babel/eslint-parser",
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
   "env": {
     "browser": true,
     "commonjs": true,
@@ -8,28 +16,41 @@
     "jest": true
   },
   "extends": [
-    "airbnb",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "airbnb-typescript",
     "prettier",
     "plugin:import/errors",
-    "plugin:import/warnings"
+    "plugin:import/warnings",
+    "plugin:import/typescript"
   ],
   "plugins": ["prettier", "react-hooks"],
   "settings": {
     "import/resolver": {
-      "babel-module": {}
+      "babel-module": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    },
+    "react": {
+      "version": "detect"
     }
   },
   "rules": {
     "prettier/prettier": ["error"],
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
+    "@typescript-eslint/default-param-last": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-non-null-assertion": 0,
+    "react/display-name": 0,
     "react/jsx-props-no-spreading": 0,
     "react/require-default-props": 0,
     "react/jsx-wrap-multilines": 0,
     "react/jsx-filename-extension": [
       1,
       {
-        "extensions": [".js", ".jsx"]
+        "extensions": [".ts", ".tsx"]
       }
     ],
     "jsx-a11y/heading-has-content": 0,

diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,4 @@ dist
 .orig
 
 .vscode/
+.eslintcache
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "printWidth": 70
-}
+  "printWidth": 100,
+  "trailingComma": "all"
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -34,7 +34,7 @@ export const parameters = {
           'Column Grouping (WIP)',
         ],
         'Composites',
-        ['Sort & Select (WIP)', 'Tree & Select', 'Tree & Sort'],
+        ['Sort & Select', 'Tree & Select', 'Tree & Sort'],
         'Misc',
         ['Cell', 'Row', 'Column'],
         'Product Themes',

diff --git a/.storybook/stories/Composites/sort-select.story.js b/.storybook/stories/Composites/sort-select.story.js
@@ -25,7 +25,7 @@ import {
 
 import { nodes } from '../data';
 
-storiesOf('Composites/Sort & Select (WIP)', module)
+storiesOf('Composites/Sort & Select', module)
   .addParameters({ component: Table })
   .add('base', () => {
     const data = { nodes };

diff --git a/.storybook/stories/Composites/tree-select.story.js b/.storybook/stories/Composites/tree-select.story.js
@@ -16,13 +16,13 @@ import {
 import {
   CellTree,
   useTree,
-  TREE_EXPAND_CLICK_TYPES,
+  TreeExpandClickTypes,
 } from '@table-library/react-table-library/tree';
 import {
   CellSelect,
   HeaderCellSelect,
   useRowSelect,
-  SELECT_CLICK_TYPES,
+  SelectClickTypes,
 } from '@table-library/react-table-library/select';
 
 import { nodes } from '../data';
@@ -94,9 +94,9 @@ storiesOf('Composites/Tree & Select', module)
         onChange: onTreeChange,
       },
       {
-        clickType: TREE_EXPAND_CLICK_TYPES.ButtonClick,
+        clickType: TreeExpandClickTypes.ButtonClick,
         treeYLevel: 1,
-      }
+      },
     );
 
     const select = useRowSelect(
@@ -105,8 +105,8 @@ storiesOf('Composites/Tree & Select', module)
         onChange: onSelectChange,
       },
       {
-        clickType: SELECT_CLICK_TYPES.ButtonClick,
-      }
+        clickType: SelectClickTypes.ButtonClick,
+      },
     );
 
     function onTreeChange(action, state) {
@@ -164,9 +164,9 @@ storiesOf('Composites/Tree & Select', module)
         onChange: onTreeChange,
       },
       {
-        clickType: TREE_EXPAND_CLICK_TYPES.ButtonClick,
+        clickType: TreeExpandClickTypes.ButtonClick,
         treeYLevel: 1,
-      }
+      },
     );
 
     const select = useRowSelect(
@@ -175,8 +175,8 @@ storiesOf('Composites/Tree & Select', module)
         onChange: onSelectChange,
       },
       {
-        clickType: SELECT_CLICK_TYPES.RowClick,
-      }
+        clickType: SelectClickTypes.RowClick,
+      },
     );
 
     function onTreeChange(action, state) {
@@ -234,9 +234,9 @@ storiesOf('Composites/Tree & Select', module)
         onChange: onTreeChange,
       },
       {
-        clickType: TREE_EXPAND_CLICK_TYPES.RowClick,
+        clickType: TreeExpandClickTypes.RowClick,
         treeYLevel: 1,
-      }
+      },
     );
 
     const select = useRowSelect(
@@ -245,8 +245,8 @@ storiesOf('Composites/Tree & Select', module)
         onChange: onSelectChange,
       },
       {
-        clickType: SELECT_CLICK_TYPES.ButtonClick,
-      }
+        clickType: SelectClickTypes.ButtonClick,
+      },
     );
 
     function onTreeChange(action, state) {
@@ -306,8 +306,8 @@ storiesOf('Composites/Tree & Select', module)
           onChange: onTreeChange,
         },
         {
-          clickType: TREE_EXPAND_CLICK_TYPES.ButtonClick,
-        }
+          clickType: TreeExpandClickTypes.ButtonClick,
+        },
       );
 
       const select = useRowSelect(data, {
@@ -357,7 +357,7 @@ storiesOf('Composites/Tree & Select', module)
           )}
         </Table>
       );
-    }
+    },
   )
   .add(
     'only checkbox: select on checkbox, expand tree on row click',
@@ -371,7 +371,7 @@ storiesOf('Composites/Tree & Select', module)
         },
         {
           treeYLevel: 1,
-        }
+        },
       );
 
       const select = useRowSelect(
@@ -380,8 +380,8 @@ storiesOf('Composites/Tree & Select', module)
           onChange: onSelectChange,
         },
         {
-          clickType: SELECT_CLICK_TYPES.ButtonClick,
-        }
+          clickType: SelectClickTypes.ButtonClick,
+        },
       );
 
       function onTreeChange(action, state) {
@@ -429,7 +429,7 @@ storiesOf('Composites/Tree & Select', module)
           )}
         </Table>
       );
-    }
+    },
   )
   .add('documentation', () => (
     <ul>

diff --git a/.storybook/stories/Features/expand.story.js b/.storybook/stories/Features/expand.story.js
@@ -18,15 +18,6 @@ import { nodes } from '../data';
 
 storiesOf('Features/Expand', module)
   .addParameters({ component: Table })
-  .add('documentation', () => (
-    <ul>
-      <li>
-        <a href="https://github.com/table-library/react-table-library/tree/master/.storybook/stories">
-          Story Code
-        </a>
-      </li>
-    </ul>
-  ))
   .add('base', () => {
     const data = { nodes };
 
@@ -167,4 +158,13 @@ storiesOf('Features/Expand', module)
         )}
       </Table>
     );
-  });
+  })
+  .add('documentation', () => (
+    <ul>
+      <li>
+        <a href="https://github.com/table-library/react-table-library/tree/master/.storybook/stories">
+          Story Code
+        </a>
+      </li>
+    </ul>
+  ));
diff --git a/.storybook/stories/Features/select.story.js b/.storybook/stories/Features/select.story.js
@@ -18,8 +18,8 @@ import {
 import {
   HeaderCellSelect,
   CellSelect,
-  SELECT_CLICK_TYPES,
-  SELECT_TYPES,
+  SelectClickTypes,
+  SelectTypes,
   useRowSelect,
   Checkbox,
 } from '@table-library/react-table-library/select';
@@ -133,8 +133,8 @@ storiesOf('Features/Select', module)
         onChange: onSelectChange,
       },
       {
-        clickType: SELECT_CLICK_TYPES.ButtonClick,
-      }
+        clickType: SelectClickTypes.ButtonClick,
+      },
     );
 
     function onSelectChange(action, state) {
@@ -189,9 +189,9 @@ storiesOf('Features/Select', module)
         onChange: onSelectChange,
       },
       {
-        rowSelect: SELECT_TYPES.SingleSelect,
-        buttonSelect: SELECT_TYPES.SingleSelect,
-      }
+        rowSelect: SelectTypes.SingleSelect,
+        buttonSelect: SelectTypes.SingleSelect,
+      },
     );
 
     function onSelectChange(action, state) {
@@ -245,9 +245,9 @@ storiesOf('Features/Select', module)
         onChange: onSelectChange,
       },
       {
-        rowSelect: SELECT_TYPES.MultiSelect,
-        buttonSelect: SELECT_TYPES.MultiSelect,
-      }
+        rowSelect: SelectTypes.MultiSelect,
+        buttonSelect: SelectTypes.MultiSelect,
+      },
     );
 
     function onSelectChange(action, state) {
@@ -402,7 +402,7 @@ storiesOf('Features/Select', module)
       },
       {
         isCarryForward: false,
-      }
+      },
     );
 
     function onSelectChange(action, state) {
@@ -457,7 +457,7 @@ storiesOf('Features/Select', module)
       },
       {
         isPartialToAll: true,
-      }
+      },
     );
 
     function onSelectChange(action, state) {