From 9ff003bec107a4934daf2a3cee73c40ec72e6999 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 3 Feb 2020 16:31:48 +0300
Subject: feat: migrate SmartList to Typescript

---
 src/index.tsx | 85 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/index.tsx

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..19c118e
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import { makeStyles, Button, Typography } from '@material-ui/core';
+
+import {
+  BenzinThemeProvider,
+  Header,
+  Window,
+  ContentSection,
+  SmartList,
+} from './lib';
+
+import icon from './assets/icon.png';
+import icon2 from './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 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"/>
+
+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="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>
+            <Button variant="contained" color="secondary">
+              Charge me up!
+            </Button>
+            <Button variant="contained" color="primary">
+              Learn more
+            </Button>
+          </ContentSection>
+        </div>
+      </Window>
+      <Window type="secondary" name="SmartList test window">
+        <SmartList
+          itemSize={270}
+          itemCount={100}
+          renderItem={renderItem}
+        />
+      </Window>
+    </BenzinThemeProvider>
+  );
+};
+
+
+ReactDOM.render(<App />, document.getElementById('root'));
+
-- 
cgit v1.2.3


From 9fcfb5d784c38c1c3ddda33184b0d8f1be4db3e0 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Mon, 3 Feb 2020 17:40:45 +0300
Subject: feat!: remove icons, simplify lib preview

---
 src/index.tsx | 32 ++++++++++++++------------------
 1 file changed, 14 insertions(+), 18 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index 19c118e..4e1f35f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,12 +11,7 @@ import {
   SmartList,
 } from './lib';
 
-import icon from './assets/icon.png';
-import icon2 from './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';
+import icon from './assets/icon.svg';
 
 
 const useStyles = makeStyles(theme => ({
@@ -25,11 +20,13 @@ const useStyles = makeStyles(theme => ({
   }
 }));
 
+
+const Icon = <img src={icon} width="32px" height="37px" alt="logo"/>
+
 const headerContents = {
-  home: <HomeIcon />,
-  'getting started': <PlayCircleFilledWhiteIcon />,
-  explore: <ExploreIcon />,
-  contribute: <GitHubIcon />,
+  home: null,
+  page: null,
+  'another page': null,
 };
 
 const renderItem = ({ index, style }: any) => {
@@ -38,9 +35,6 @@ const renderItem = ({ index, style }: any) => {
   );
 };
 
-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');
@@ -49,7 +43,7 @@ const App = () => {
     <BenzinThemeProvider>
       <Header
         logo={{
-          icon: Icon1,
+          icon: Icon,
           title: 'BENZIN',
         }}
         contents={headerContents}
@@ -58,13 +52,15 @@ const App = () => {
       />
       <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>
+          <ContentSection sectionName="Library preview">
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
             <Button variant="contained" color="secondary">
-              Charge me up!
+              secondary
             </Button>
             <Button variant="contained" color="primary">
-              Learn more
+              primary
             </Button>
           </ContentSection>
         </div>
-- 
cgit v1.2.3


From d50ac5ba261d1da6f367bd0e9e02da11f9de5921 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Thu, 6 Feb 2020 19:46:51 +0300
Subject: fix: get rid of all ESlint warnings

---
 src/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index 4e1f35f..7af6098 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,6 +13,11 @@ import {
 
 import icon from './assets/icon.svg';
 
+interface RenderPropTypes {
+  index: number;
+  style: React.CSSProperties;
+}
+
 
 const useStyles = makeStyles(theme => ({
   window: {
@@ -29,13 +34,13 @@ const headerContents = {
   'another page': null,
 };
 
-const renderItem = ({ index, style }: any) => {
+const renderItem: React.FC<RenderPropTypes> = ({ index, style}) => {
   return (
       <Typography variant="h3" style={style} component="div"> {index} </Typography>
   );
 };
 
-const App = () => {
+const App: React.FC = () => {
   const classes = useStyles();
   const [page, setPage] = useState('home');
 
-- 
cgit v1.2.3


From f206fb42b6fb8bd7945df5240de2f86cbd9fc1b5 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Fri, 7 Feb 2020 03:24:17 +0300
Subject: feat: improve library preview

---
 src/index.tsx | 49 +++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 41 insertions(+), 8 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index 7af6098..0d05155 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
-import { makeStyles, Button, Typography } from '@material-ui/core';
+import { makeStyles, Button, Link } from '@material-ui/core';
 
 import {
   BenzinThemeProvider,
@@ -34,16 +34,36 @@ const headerContents = {
   'another page': null,
 };
 
-const renderItem: React.FC<RenderPropTypes> = ({ index, style}) => {
-  return (
-      <Typography variant="h3" style={style} component="div"> {index} </Typography>
-  );
-};
 
 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 variant="contained" color="primary">
+                  primary
+                </Button>
+              )
+              :
+              (
+                <Button variant="contained" color="secondary">
+                  secondary
+                </Button>
+              )
+            }
+          </ContentSection>
+        </div>
+    );
+  };
+
   return (
     <BenzinThemeProvider>
       <Header
@@ -59,7 +79,7 @@ const App: React.FC = () => {
         <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.
+              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 variant="contained" color="secondary">
               secondary
@@ -68,9 +88,22 @@ const App: React.FC = () => {
               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 test window">
+      <Window type="secondary" name="SmartList preview window">
         <SmartList
           itemSize={270}
           itemCount={100}
-- 
cgit v1.2.3


From 4af6a41a8bfc9d5f8b90d3aa8bc96a804607dba0 Mon Sep 17 00:00:00 2001
From: Eug-VS <eug-vs@keemail.me>
Date: Sat, 8 Feb 2020 15:36:32 +0300
Subject: feat: add Button component

---
 src/index.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

(limited to 'src/index.tsx')

diff --git a/src/index.tsx b/src/index.tsx
index 0d05155..9d32585 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
 
-import { makeStyles, Button, Link } from '@material-ui/core';
+import { makeStyles, Link } from '@material-ui/core';
 
 import {
   BenzinThemeProvider,
@@ -9,6 +9,7 @@ import {
   Window,
   ContentSection,
   SmartList,
+  Button,
 } from './lib';
 
 import icon from './assets/icon.svg';
@@ -48,13 +49,13 @@ const App: React.FC = () => {
             </p>
             {(index % 2 === 0)?
               (
-                <Button variant="contained" color="primary">
+                <Button color="primary">
                   primary
                 </Button>
               )
               :
               (
-                <Button variant="contained" color="secondary">
+                <Button color="secondary">
                   secondary
                 </Button>
               )
@@ -81,10 +82,10 @@ const App: React.FC = () => {
             <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 variant="contained" color="secondary">
+            <Button color="secondary">
               secondary
             </Button>
-            <Button variant="contained" color="primary">
+            <Button color="primary">
               primary
             </Button>
           </ContentSection>
-- 
cgit v1.2.3

