Merge pull request #4 from eug-vs/developv3.0.0

Release 3.0.0

13 files changed, 130 insertions, 53 deletions

diff --git a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/BenzinThemeProvider/BenzinThemeProvider.tsx
index 8e52ed4..efb4f86 100644
--- a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js
+++ b/src/lib/BenzinThemeProvider/BenzinThemeProvider.tsx
@@ -4,6 +4,15 @@ import { CssBaseline } from '@material-ui/core';
 import 'typeface-roboto';
 
 
+declare module '@material-ui/core/styles/createPalette' {
+  interface TypeBackground {
+      elevation1: string;
+      elevation2: string;
+      elevation3: string;
+  }
+}
+
+
 const benzinTheme = createMuiTheme({
   palette: {
     type: 'dark',
@@ -28,7 +37,7 @@ const benzinTheme = createMuiTheme({
 });
 
 
-const BenzinThemeProvider = ({ children }) => (
+const BenzinThemeProvider: React.FC = ({ children }) => (
   <ThemeProvider theme={benzinTheme}>
     <CssBaseline />
     {children}
diff --git a/src/lib/Button/Button.tsx b/src/lib/Button/Button.tsx
new file mode 100644
index 0000000..6bc0f98
--- /dev/null
+++ b/src/lib/Button/Button.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Button as MaterialButton } from '@material-ui/core';
+
+
+interface PropTypes {
+  color: 'primary' | 'secondary';
+}
+
+const Button: React.FC<PropTypes> = ({ color, children }) => (
+  <MaterialButton
+    variant="contained"
+    color={color}
+    children={children}
+  />
+);
+
+
+export default Button;
diff --git a/src/lib/components/ContentSection/ContentSection.js b/src/lib/ContentSection/ContentSection.tsx
index 461a9c2..7ff47f9 100644
--- a/src/lib/components/ContentSection/ContentSection.js
+++ b/src/lib/ContentSection/ContentSection.tsx
@@ -7,6 +7,10 @@ import {
 } from '@material-ui/core';
 
 
+interface PropTypes {
+  sectionName: string;
+}
+
 const useStyles = makeStyles(theme => ({
   content: {
     padding: theme.spacing(0, 2, 1, 2),
@@ -18,7 +22,7 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-const ContentSection = ({ sectionName, children }) => {
+const ContentSection: React.FC<PropTypes> = ({ sectionName, children }) => {
   const classes = useStyles();
 
   return (
diff --git a/src/lib/components/Header/Header.js b/src/lib/Header/Header.tsx
index 3ade7b3..233eacb 100644
--- a/src/lib/components/Header/Header.js
+++ b/src/lib/Header/Header.tsx
@@ -11,6 +11,18 @@ import {
 import { makeStyles } from '@material-ui/core/styles';
 
 
+interface PropTypes {
+  logo: {
+    icon: React.ReactNode;
+    title: string;
+  };
+  contents: {
+    [key: string]: React.ReactNode | null;
+  };
+  page: string;
+  setPage: (newPage: string) => void;
+}
+
 const useStyles = makeStyles(theme => ({
   root: {
     background: theme.palette.background.elevation2,
@@ -34,10 +46,10 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const Header = ({ logo, contents, page, setPage }) => {
+const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => {
   const classes = useStyles();
 
-  const handleChange = (event, newPage) => {
+  const handleChange = (event: React.ChangeEvent<{}>, newPage: string): void => {
     setPage(newPage);
   };
 
@@ -49,10 +61,10 @@ const Header = ({ logo, contents, page, setPage }) => {
         {logo.title}
       </Typography>
       <Tabs onChange={handleChange} value={page}>
-        {contents && Object.keys(contents).map(item => (
+        {contents && Object.keys(contents).map((item: string) => (
           <Tab
             label={item}
-            icon={contents[item]}
+            icon={contents[item] as JSX.Element}
             value={item}
             className={classes.tab}
             key={item}
diff --git a/src/lib/SmartList/SmartList.tsx b/src/lib/SmartList/SmartList.tsx
new file mode 100644
index 0000000..22cd3b2
--- /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: React.CSSProperties;
+}
+
+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/components/Window/Window.js b/src/lib/Window/Window.tsx
index 027213f..6821593 100644
--- a/src/lib/components/Window/Window.js
+++ b/src/lib/Window/Window.tsx
@@ -2,7 +2,14 @@ import React from 'react';
 
 import { Typography, Divider, makeStyles } from '@material-ui/core';
 
-import WindowSurface from './WindowSurface/WindowSurface';
+import WindowSurface from './WindowSurface';
+import { SurfaceSize, SurfacePosition } from './types';
+
+
+interface PropTypes {
+  type: 'primary' | 'secondary' | 'mono';
+  name?: string;
+}
 
 
 const useStyles = makeStyles(theme => ({
@@ -13,14 +20,14 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const Window = ({ type, name, children }) => {
+const Window: React.FC<PropTypes> = ({ type, name, children }) => {
   const classes = useStyles();
 
-  const size = {
+  const size: SurfaceSize = {
     height: '85vh',
   };
 
-  const position = {
+  const position: SurfacePosition = {
     bottom: '3vh',
   };
 
@@ -51,5 +58,4 @@ const Window = ({ type, name, children }) => {
   );
 };
 
-
 export default Window;
diff --git a/src/lib/components/Window/WindowSurface/WindowSurface.js b/src/lib/Window/WindowSurface.tsx
index 7859bf6..a65e398 100644
--- a/src/lib/components/Window/WindowSurface/WindowSurface.js
+++ b/src/lib/Window/WindowSurface.tsx
@@ -2,6 +2,14 @@ import React from 'react';
 
 import { Paper, makeStyles } from '@material-ui/core';
 
+import { SurfaceSize, SurfacePosition } from './types';
+
+
+interface PropTypes {
+  size: SurfaceSize;
+  position: SurfacePosition;
+}
+
 
 const useStyles = makeStyles(theme => ({
   surface: {
@@ -18,7 +26,7 @@ const useStyles = makeStyles(theme => ({
 }));
 
 
-const WindowSurface = ({ size, position, children }) => {
+const WindowSurface: React.FC<PropTypes> = ({ size, position, children }) => {
   const classes = useStyles();
 
   return (
diff --git a/src/lib/Window/types.ts b/src/lib/Window/types.ts
new file mode 100644
index 0000000..9e18fe3
--- /dev/null
+++ b/src/lib/Window/types.ts
@@ -0,0 +1,11 @@
+export interface SurfaceSize {
+  height: string;
+  width?: string;
+}
+
+export interface SurfacePosition {
+  bottom: string;
+  left?: string;
+  right?: string;
+}
+
diff --git a/src/lib/assets/icon.png b/src/lib/assets/icon.png
deleted file mode 100644
index 4335637..0000000
--- a/src/lib/assets/icon.png
+++ /dev/null
diff --git a/src/lib/assets/icon2.svg b/src/lib/assets/icon2.svg
deleted file mode 100644
index 9c4da7f..0000000
--- a/src/lib/assets/icon2.svg
+++ /dev/null
@@ -1,8 +0,0 @@
-<svg width="35" height="46" viewBox="0 0 35 46" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 1H32C33.1046 1 34 1.89543 34 3V43C34 44.1046 33.1046 45 32 45H3C1.89543 45 1 44.1046 1 43V15C1 7.26801 7.26801 1 15 1Z" stroke="#FFA726" stroke-width="2"/>
-<rect x="20.5" y="5.5" width="9" height="1" rx="0.5" stroke="#FFA726"/>
-<rect x="1.21947" y="5.65685" width="6.27542" height="1.72458" transform="rotate(-45 1.21947 5.65685)" stroke="#FFA726" stroke-width="1.72458"/>
-<circle cx="24" cy="25" r="5" fill="#FFA726"/>
-<circle cx="14" cy="31" r="5" fill="#FFA726"/>
-<circle cx="14" cy="19" r="5" fill="#FFA726"/>
-</svg>
diff --git a/src/lib/components/SmartList/SmartList.js b/src/lib/components/SmartList/SmartList.js
deleted file mode 100644
index b462c47..0000000
--- a/src/lib/components/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/index.js b/src/lib/index.js
deleted file mode 100644
index 0476c34..0000000
--- a/src/lib/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as Window } from './components/Window/Window';
-export { default as Header } from './components/Header/Header';
-export { default as ContentSection } from './components/ContentSection/ContentSection';
-export { default as SmartList } from './components/SmartList/SmartList';
-export { default as BenzinThemeProvider } from './components/BenzinThemeProvider/BenzinThemeProvider';
diff --git a/src/lib/index.ts b/src/lib/index.ts
new file mode 100644
index 0000000..a41dd39
--- /dev/null
+++ b/src/lib/index.ts
@@ -0,0 +1,6 @@
+export { default as Window } from './Window/Window';
+export { default as Header } from './Header/Header';
+export { default as ContentSection } from './ContentSection/ContentSection';
+export { default as SmartList } from './SmartList/SmartList';
+export { default as BenzinThemeProvider } from './BenzinThemeProvider/BenzinThemeProvider';
+export { default as Button } from './Button/Button';