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

Release 3.0.0

17 files changed, 359 insertions, 116 deletions

diff --git a/src/assets/icon.svg b/src/assets/icon.svg
new file mode 100644
index 0000000..be5b465
--- /dev/null
+++ b/src/assets/icon.svg
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="128"
+   height="148"
+   viewBox="0 0 33.866666 39.158334"
+   version="1.1"
+   id="svg838"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="icon.svg">
+  <defs
+     id="defs832" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="6.1279585"
+     inkscape:cy="-8.3014472"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1850"
+     inkscape:window-height="1016"
+     inkscape:window-x="70"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     units="px" />
+  <metadata
+     id="metadata835">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-257.84165)">
+    <g
+       id="g1434"
+       transform="matrix(0.37628092,0,0,0.37628092,22.053442,178.70523)">
+      <path
+         inkscape:export-filename="/home/eug-vs/Documents/Projects/react-benzin/src/assets/icon.svg.png"
+         transform="rotate(-150,58.946792,68.460286)"
+         inkscape:export-ydpi="36.122967"
+         inkscape:export-xdpi="36.122967"
+         inkscape:transform-center-y="3.4957186"
+         inkscape:transform-center-x="0.20210213"
+         d="M 0.45641909,-93.617205 -23.89006,-135.78654 l 24.34647889,-42.16934 48.69295911,0 24.346479,42.16934 -24.346479,42.169334 z"
+         inkscape:randomized="0"
+         inkscape:rounded="0"
+         inkscape:flatsided="true"
+         sodipodi:arg2="2.6179939"
+         sodipodi:arg1="2.0943951"
+         sodipodi:r2="24.346479"
+         sodipodi:r1="48.692959"
+         sodipodi:cy="-135.78654"
+         sodipodi:cx="24.802898"
+         sodipodi:sides="6"
+         id="path4554"
+         style="fill:none;fill-opacity:1;stroke:#ffa726;stroke-width:5.66499996;stroke-miterlimit:3.5;stroke-dasharray:none;stroke-opacity:1"
+         sodipodi:type="star" />
+      <g
+         inkscape:export-filename="/home/eug-vs/Documents/Projects/react-benzin/src/assets/icon.svg.png"
+         inkscape:export-ydpi="36.122967"
+         inkscape:export-xdpi="36.122967"
+         transform="translate(-45.866168,397.4575)"
+         id="g4921">
+        <circle
+           style="fill:#ffa726;fill-opacity:1;stroke:#000000;stroke-width:0.25526616;stroke-opacity:0"
+           id="circle4912"
+           cx="13.032428"
+           cy="-135.63423"
+           r="14.182178" />
+        <circle
+           r="14.182178"
+           cy="-152.1581"
+           cx="41.652004"
+           id="circle4914"
+           style="fill:#ffa726;fill-opacity:1;stroke:#000000;stroke-width:0.25526616;stroke-opacity:0" />
+        <circle
+           style="fill:#ffa726;fill-opacity:1;stroke:#000000;stroke-width:0.25526616;stroke-opacity:0"
+           id="circle4916"
+           cx="41.652004"
+           cy="-119.11036"
+           r="14.182178" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/lib/assets/icon2.svg b/src/assets/icon2.svg
index 9c4da7f..9c4da7f 100644
--- a/src/lib/assets/icon2.svg
+++ b/src/assets/icon2.svg
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 1aec963..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-
-import { makeStyles, Button } from '@material-ui/core';
-
-import {
-  BenzinThemeProvider,
-  Header,
-  Window,
-  ContentSection,
-} from './lib';
-
-import icon from './lib/assets/icon.png';
-import icon2 from './lib/assets/icon2.svg';
-import HomeIcon from '@material-ui/icons/Home';
-import PlayCircleFilledWhiteIcon from '@material-ui/icons/PlayCircleFilledWhite';
-import ExploreIcon from '@material-ui/icons/Explore';
-import GitHubIcon from '@material-ui/icons/GitHub';
-
-
-const useStyles = makeStyles(theme => ({
-  window: {
-    padding: theme.spacing(4),
-  }
-}));
-
-const headerContents = {
-  home: <HomeIcon />,
-  'getting started': <PlayCircleFilledWhiteIcon />,
-  explore: <ExploreIcon />,
-  contribute: <GitHubIcon />,
-}
-
-const Icon1 = <img src={icon} width="32px" height="37px" alt="logo"/>
-const Icon2 = <img src={icon2} height="32px" alt="logo"/>
-
-const App = () => {
-  const classes = useStyles();
-  const [page, setPage] = useState('home');
-
-  return (
-    <BenzinThemeProvider>
-      <Header
-        logo={{
-          icon: Icon1,
-          title: 'BENZIN',
-        }}
-        contents={headerContents}
-        page={page}
-        setPage={setPage}
-      />
-      <Window type="mono">
-        <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>
-            <Button variant="contained" color="secondary">
-              Charge me up!
-            </Button>
-            <Button variant="contained" color="primary">
-              Learn more
-            </Button>
-          </ContentSection>
-        </div>
-      </Window>
-    </BenzinThemeProvider>
-  );
-};
-
-
-ReactDOM.render(<App />, document.getElementById('root'));
-
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..9d32585
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import { makeStyles, Link } from '@material-ui/core';
+
+import {
+  BenzinThemeProvider,
+  Header,
+  Window,
+  ContentSection,
+  SmartList,
+  Button,
+} from './lib';
+
+import icon from './assets/icon.svg';
+
+interface RenderPropTypes {
+  index: number;
+  style: React.CSSProperties;
+}
+
+
+const useStyles = makeStyles(theme => ({
+  window: {
+    padding: theme.spacing(4),
+  }
+}));
+
+
+const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
+
+const headerContents = {
+  home: null,
+  page: null,
+  'another page': null,
+};
+
+
+const App: React.FC = () => {
+  const classes = useStyles();
+  const [page, setPage] = useState('home');
+
+  const renderItem: React.FC<RenderPropTypes> = ({ index, style}) => {
+    return (
+        <div style={style} className={classes.window}>
+          <ContentSection sectionName={`Item ${index+1}`}>
+            <p>
+              Fusce commodo.  Vestibulum convallis, lorem a tempus semper, dui dui euismod elit, vitae placerat urna tortor vitae lacus.  Nullam libero mauris, consequat quis, varius et, dictum id, arcu.  Mauris mollis tincidunt felis.
+            </p>
+            {(index % 2 === 0)?
+              (
+                <Button color="primary">
+                  primary
+                </Button>
+              )
+              :
+              (
+                <Button color="secondary">
+                  secondary
+                </Button>
+              )
+            }
+          </ContentSection>
+        </div>
+    );
+  };
+
+  return (
+    <BenzinThemeProvider>
+      <Header
+        logo={{
+          icon: Icon,
+          title: 'BENZIN',
+        }}
+        contents={headerContents}
+        page={page}
+        setPage={setPage}
+      />
+      <Window type="primary">
+        <div className={classes.window}>
+          <ContentSection sectionName="Library preview">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dapibus suscipit ligula.  Donec posuere augue in quam.  Etiam vel tortor sodales tellus ultricies commodo.  Suspendisse potenti.  Aenean in sem ac leo mollis blandit.  Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi.  <Link href="#">Phasellus lacus.</Link> Etiam laoreet quam sed arcu.  Phasellus at dui in ligula mollis ultricies.  Integer placerat tristique nisl.  Praesent augue.  Fusce commodo.
+            </p>
+            <Button color="secondary">
+              secondary
+            </Button>
+            <Button color="primary">
+              primary
+            </Button>
+          </ContentSection>
+          <ContentSection sectionName="Content section">
+            <p>
+              Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio.  Nunc porta vulputate tellus.  Nunc rutrum turpis sed pede.  Sed bibendum.  Aliquam posuere.
+            </p>
+            <p>
+              <Link href="#">Link example</Link>
+            </p>
+          </ContentSection>
+          <ContentSection sectionName="Content section">
+            <p>
+              Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Donec hendrerit tempor tellus.  Donec pretium posuere tellus.  Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus.  Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.  Nulla posuere.  Donec vitae dolor.  Nullam tristique diam non turpis.  Cras placerat accumsan <Link href="#">nulla</Link>.  Nullam rutrum.  Nam vestibulum accumsan nisl.  Pellentesque dapibus suscipit ligula.
+            </p>
+          </ContentSection>
+        </div>
+      </Window>
+      <Window type="secondary" name="SmartList preview window">
+        <SmartList
+          itemSize={270}
+          itemCount={100}
+          renderItem={renderItem}
+        />
+      </Window>
+    </BenzinThemeProvider>
+  );
+};
+
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
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/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';
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />