feat: migrate SmartList to Typescript

6 files changed, 82 insertions, 75 deletions

diff --git a/package-lock.json b/package-lock.json
index 5bac2cc..b4909da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,34 +1,9 @@
 {
   "name": "react-benzin",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@babel/cli": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/cli/-/cli-7.8.3.tgz",
-      "integrity": "sha512-K2UXPZCKMv7KwWy9Bl4sa6+jTNP7JyDiHKzoOiUUygaEDbC60vaargZDnO9oFMvlq8pIKOOyUUgeMYrsaN9djA==",
-      "dev": true,
-      "requires": {
-        "chokidar": "^2.1.8",
-        "commander": "^4.0.1",
-        "convert-source-map": "^1.1.0",
-        "fs-readdir-recursive": "^1.1.0",
-        "glob": "^7.0.0",
-        "lodash": "^4.17.13",
-        "make-dir": "^2.1.0",
-        "slash": "^2.0.0",
-        "source-map": "^0.5.0"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.0.tgz",
-          "integrity": "sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw==",
-          "dev": true
-        }
-      }
-    },
     "@babel/code-frame": {
       "version": "7.8.3",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tgz",
@@ -988,16 +963,6 @@
         "@babel/plugin-transform-react-jsx-source": "^7.8.3"
       }
     },
-    "@babel/preset-typescript": {
-      "version": "7.8.3",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.8.3.tgz",
-      "integrity": "sha512-qee5LgPGui9zQ0jR1TeU5/fP9L+ovoArklEqY12ek8P/wV5ZeM/VYSQYwICeoT6FfpJTekG9Ilay5PhwsOpMHA==",
-      "dev": true,
-      "requires": {
-        "@babel/helper-plugin-utils": "^7.8.3",
-        "@babel/plugin-transform-typescript": "^7.8.3"
-      }
-    },
     "@babel/runtime": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.7.4.tgz",
@@ -1635,6 +1600,22 @@
         "@types/react": "*"
       }
     },
+    "@types/react-virtualized-auto-sizer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz",
+      "integrity": "sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@types/react-window": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.1.tgz",
+      "integrity": "sha512-V3k1O5cbfZIRa0VVbQ81Ekq/7w42CK1SuiB9U1oPMTxv270D9qUn7rHb3sZoqMkIJFfB1NZxaH7NRDlk+ToDsg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -6155,12 +6136,6 @@
         "minipass": "^3.0.0"
       }
     },
-    "fs-readdir-recursive": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz",
-      "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==",
-      "dev": true
-    },
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
diff --git a/package.json b/package.json
index e663a8b..e6421f5 100644
--- a/package.json
+++ b/package.json
@@ -2,8 +2,8 @@
   "name": "react-benzin",
   "version": "2.0.0",
   "description": "A powerful React Material components library.",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "dist/index.tsx",
+  "module": "dist/index.tsx",
   "files": [
     "dist",
     "README.md"
@@ -29,6 +29,8 @@
     "@types/node": "^13.5.0",
     "@types/react": "^16.9.19",
     "@types/react-dom": "^16.9.5",
+    "@types/react-virtualized-auto-sizer": "^1.0.0",
+    "@types/react-window": "^1.8.1",
     "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.1.0",
     "typescript": "^3.7.5"
diff --git a/src/index.js b/src/index.tsx
index d0a96a1..19c118e 100644
--- a/src/index.js
+++ b/src/index.tsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
-import { makeStyles, Button } from '@material-ui/core';
+import { makeStyles, Button, Typography } from '@material-ui/core';
 
 import {
   BenzinThemeProvider,
   Header,
   Window,
   ContentSection,
+  SmartList,
 } from './lib';
 
 import icon from './assets/icon.png';
@@ -29,7 +30,13 @@ const headerContents = {
   'getting started': <PlayCircleFilledWhiteIcon />,
   explore: <ExploreIcon />,
   contribute: <GitHubIcon />,
-}
+};
+
+const renderItem = ({ index, style }: any) => {
+  return (
+      <Typography variant="h3" style={style} component="div"> {index} </Typography>
+  );
+};
 
 const Icon1 = <img src={icon} width="32px" height="37px" alt="logo"/>
 const Icon2 = <img src={icon2} height="32px" alt="logo"/>
@@ -49,7 +56,7 @@ const App = () => {
         page={page}
         setPage={setPage}
       />
-      <Window type="mono">
+      <Window type="primary">
         <div className={classes.window}>
           <ContentSection sectionName="Out of fuel? You've came to the right place!">
             <p> Here is some text about BENZIN library. </p>
@@ -62,6 +69,13 @@ const App = () => {
           </ContentSection>
         </div>
       </Window>
+      <Window type="secondary" name="SmartList test window">
+        <SmartList
+          itemSize={270}
+          itemCount={100}
+          renderItem={renderItem}
+        />
+      </Window>
     </BenzinThemeProvider>
   );
 };
diff --git a/src/lib/SmartList/SmartList.js b/src/lib/SmartList/SmartList.js
deleted file mode 100644
index b462c47..0000000
--- a/src/lib/SmartList/SmartList.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-
-import { FixedSizeList } from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
-
-
-const SmartList = ({ itemSize, itemCount, renderItem }) => {
-
-  return (
-    <div style={{ flex: '1 1 auto', overflow: 'hidden' }}>
-      <AutoSizer>
-        {({ width, height }) => (
-          <FixedSizeList
-            height={height}
-            width={width}
-            itemSize={itemSize}
-            itemCount={itemCount}
-          >
-            {renderItem}
-          </FixedSizeList>
-        )}
-      </AutoSizer>
-    </div>
-  );
-};
-
-
-export default SmartList;
diff --git a/src/lib/SmartList/SmartList.tsx b/src/lib/SmartList/SmartList.tsx
new file mode 100644
index 0000000..c889719
--- /dev/null
+++ b/src/lib/SmartList/SmartList.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
+
+
+interface RenderPropTypes {
+  index: number;
+  style: any;
+}
+
+interface PropTypes {
+  itemSize: number;
+  itemCount: number;
+  renderItem: React.FC<RenderPropTypes>;
+}
+
+interface Size {
+  height: number;
+  width: number;
+}
+
+
+const SmartList: React.FC<PropTypes> = ({ itemSize, itemCount, renderItem }) => {
+
+  const ResizedList: React.FC<Size> = ({ width, height}) => (
+    <FixedSizeList
+      height={height}
+      width={width}
+      itemSize={itemSize}
+      itemCount={itemCount}
+    >
+      {renderItem}
+    </FixedSizeList>
+  );
+
+  return (
+    <div style={{ flex: '1 1 auto', overflow: 'hidden' }}>
+      <AutoSizer children={ResizedList} />
+    </div>
+  );
+};
+
+
+export default SmartList;
diff --git a/src/lib/index.js b/src/lib/index.ts
index 67f9bb4..67f9bb4 100644
--- a/src/lib/index.js
+++ b/src/lib/index.ts