feat: Typescript porting

.gitignore

@@ -2,6 +2,7 @@
 .DS_Store
 *.DS_Store
 **.DS_Store
+build
 
 # npm
 node_modules
@@ -16,3 +17,4 @@ styles.css
 es/
 lib/
 coverage/
+website/_build/_doc/sampleDoc.json

package.json

@@ -16,14 +16,17 @@
     "url": "https://github.com/Autodesk/react-base-table.git"
   },
   "scripts": {
+    "prestart": "npm run build:typescript",
     "start": "cd website && npm start",
     "deploy": "cd website && npm run deploy",
-    "lint": "eslint ./src/**/*.js",
+    "lint": "tslint -t verbose --config tslint.json --project tsconfig.json",
     "clean": "rimraf lib es styles.css",
     "build:js": "cross-env NODE_ENV=production babel src -d lib --ignore '**/*.spec.js','__snapshots__' --copy-files --source-maps",
     "build:es": "cross-env BABEL_ENV=es NODE_ENV=production babel src -d es --ignore '**/*.spec.js','__snapshots__' --copy-files --source-maps",
     "build:css": "node-sass src/_BaseTable.scss ./styles.css --output-style expanded",
     "build": "npm run build:js && npm run build:es && npm run build:css",
+    "build:typescript": "tsc",
+    "postinstall": "npm run build:typescript",
     "format": "prettier --write 'src/**/*.{js,scss}'",
     "prebuild": "npm run clean",
     "precommit": "lint-staged",
@@ -38,17 +41,23 @@
     ],
     "packages/**/*.js": [
       "prettier --write",
-      "eslint -c .eslintrc",
+      "tslint -t verbose --config tslint.json --project tsconfig.json",
       "git add"
     ]
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
+    "@types/classnames": "^2.2.9",
+    "@types/memoize-one": "^4.1.1",
+    "@types/react": "^16.9.2",
+    "@types/react-test-renderer": "^16.9.0",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
+    "@types/react-window": "^1.8.1",
     "classnames": "^2.2.5",
     "memoize-one": "^5.0.0",
-    "prop-types": "^15.7.0",
     "react-virtualized-auto-sizer": "^1.0.2",
-    "react-window": "^1.8.2"
+    "react-window": "^1.8.2",
+    "typescript": "^3.5.3"
   },
   "peerDependencies": {
     "react": "^16.0.0",
@@ -62,11 +71,12 @@
     "@babel/plugin-transform-runtime": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
+    "@types/jest": "^24.0.18",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.4.2",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "cross-env": "^5.2.0",
+    "tslint": "^5.19.0",
     "eslint": "^5.6.0",
     "eslint-config-prettier": "^3.0.1",
     "eslint-config-react-app": "^3.0.8",
@@ -76,26 +86,28 @@
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.11.1",
     "husky": "^0.14.3",
-    "jest": "^23.5.0",
+    "jest": "^23.6.0",
     "lerna": "^3.2.1",
     "lint-staged": "^7.2.2",
     "node-sass": "^4.9.3",
     "prettier": "^1.14.2",
     "react": "^16.4.2",
     "react-dom": "^16.4.2",
     "react-test-renderer": "^16.4.2",
-    "rimraf": "^2.6.2"
+    "rimraf": "^2.6.2",
+    "ts-jest": "^24.0.2"
   },
   "jest": {
     "roots": [
       "<rootDir>/src"
     ],
-    "testRegex": ".*.spec\\.js$",
+    "testRegex": ".*.spec\\.tsx?$",
     "transform": {
-      "^.+\\.jsx?$": "babel-jest"
+      "^.+\\.tsx?$": "ts-jest"
     },
     "transformIgnorePatterns": [
       "<rootDir>/node_modules/"
-    ]
+    ],
+    "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"]
   }
 }

src/AutoResizer.js → src/AutoResizer.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
 /**
  * Decorator component that automatically adjusts the width and height of a single child
  */
-const AutoResizer = ({ className, width, height, children, onResize }) => {
+const AutoResizer: React.FunctionComponent<AutoResizerProps> = ({ className, width, height, children, onResize }) => {
   const disableWidth = typeof width === 'number';
   const disableHeight = typeof height === 'number';
 
@@ -19,7 +18,7 @@ const AutoResizer = ({ className, width, height, children, onResize }) => {
 
   return (
     <AutoSizer className={className} disableWidth={disableWidth} disableHeight={disableHeight} onResize={onResize}>
-      {size =>
+      {(size) =>
         children({
           width: disableWidth ? width : size.width,
           height: disableHeight ? height : size.height,
@@ -29,29 +28,33 @@ const AutoResizer = ({ className, width, height, children, onResize }) => {
   );
 };
 
-AutoResizer.propTypes = {
+interface ChildrenArgs {
+  width: number;
+  height: number;
+}
+export interface AutoResizerProps {
   /**
    * Class name for the component
    */
-  className: PropTypes.string,
+  className?: string;
   /**
    * the width of the component, will be the container's width if not set
    */
-  width: PropTypes.number,
+  width?: number;
   /**
    * the height of the component, will be the container's width if not set
    */
-  height: PropTypes.number,
+  height?: number;
   /**
    * A callback function to render the children component
    * The handler is of the shape of `({ width, height }) => node`
    */
-  children: PropTypes.func.isRequired,
+  children: (args: ChildrenArgs) => React.ReactNode;
   /**
    * A callback function when the size of the table container changed if the width and height are not set
    * The handler is of the shape of `({ width, height }) => *`
    */
-  onResize: PropTypes.func,
-};
+  onResize?: (args: ChildrenArgs) => void;
+}
 
 export default AutoResizer;

src/BaseTable.spec.js → src/BaseTable.spec.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 
-import BaseTable from './BaseTable';
+import BaseTable, { IBaseTableProps } from './BaseTable';
 
-const RENDERER = () => null;
+type TRenderer = () => null;
+const RENDERER: TRenderer = () => null;
 
 const columns = [
   {
@@ -33,16 +34,31 @@ const data = [
   },
 ];
 
-const Table = props => <BaseTable width={100} height={100} data={data} columns={columns} {...props} />;
+type DefaultPropsKeys = keyof typeof BaseTable.defaultProps;
+interface TableProps extends Partial<typeof BaseTable.defaultProps> {}
+interface MinusDefaultKeys extends Partial<Omit<IBaseTableProps<any>, DefaultPropsKeys>> {}
 
-describe('Table', function() {
+const Table: React.FunctionComponent<TableProps & MinusDefaultKeys> = ({
+  width,
+  height,
+  ...restProps
+}) => <BaseTable width={width} height={height} {...restProps} />;
+
+Table.defaultProps = {
+  width: 100,
+  height: 100,
+  data,
+  columns,
+};
+
+describe('Table', () => {
   test('renders correctly', () => {
     const tree = renderer.create(<Table />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   test('table can receive className', () => {
-    const tree = renderer.create(<Table className="custom-class" />).toJSON();
+    const tree = renderer.create(<Table className='custom-class' />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -55,9 +71,9 @@ describe('Table', function() {
     const tree = renderer
       .create(
         <Table>
-          <BaseTable.Column key="code" dataKey="code" width={30} />
-          <BaseTable.Column key="name" dataKey="name" width={30} />
-        </Table>
+          <BaseTable.Column key='code' dataKey='code' width={30} />
+          <BaseTable.Column key='name' dataKey='name' width={30} />
+        </Table>,
       )
       .toJSON();
     expect(tree).toMatchSnapshot();
@@ -69,7 +85,7 @@ describe('Table', function() {
   });
 
   test('table can specific a different rowKey', () => {
-    const tree = renderer.create(<Table rowKey="code" />).toJSON();
+    const tree = renderer.create(<Table rowKey='code' />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -129,27 +145,27 @@ describe('Table', function() {
   });
 
   test('table can receive headerClassName', () => {
-    const tree = renderer.create(<Table headerClassName="custom-class" />).toJSON();
+    const tree = renderer.create(<Table headerClassName='custom-class' />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   test('table can receive rowClassName', () => {
-    const tree = renderer.create(<Table rowClassName="custom-class" />).toJSON();
+    const tree = renderer.create(<Table rowClassName='custom-class' />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   test('table can receive expandColumnKey', () => {
-    const tree = renderer.create(<Table expandColumnKey="code" />).toJSON();
+    const tree = renderer.create(<Table expandColumnKey='code' />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   test('table can receive defaultExpandedRowKeys', () => {
-    const tree = renderer.create(<Table expandColumnKey="code" defaultExpandedRowKeys={['1']} />).toJSON();
+    const tree = renderer.create(<Table expandColumnKey='code' defaultExpandedRowKeys={['1']} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   test('table can receive expandedRowKeys', () => {
-    const tree = renderer.create(<Table expandColumnKey="code" expandedRowKeys={['1']} />).toJSON();
+    const tree = renderer.create(<Table expandColumnKey='code' expandedRowKeys={['1']} />).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });