From 9ff003bec107a4934daf2a3cee73c40ec72e6999 Mon Sep 17 00:00:00 2001 From: Eug-VS 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: , + 'getting started': , + explore: , + contribute: , +}; + +const renderItem = ({ index, style }: any) => { + return ( + {index} + ); +}; + +const Icon1 = logo +const Icon2 = logo + +const App = () => { + const classes = useStyles(); + const [page, setPage] = useState('home'); + + return ( + +
+ +
+ +

Here is some text about BENZIN library.

+ + + +
+ + + + + + ); +}; + + +ReactDOM.render(, document.getElementById('root')); + -- cgit v1.2.3 From 9fcfb5d784c38c1c3ddda33184b0d8f1be4db3e0 Mon Sep 17 00:00:00 2001 From: Eug-VS 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 = logo + const headerContents = { - home: , - 'getting started': , - explore: , - contribute: , + home: null, + page: null, + 'another page': null, }; const renderItem = ({ index, style }: any) => { @@ -38,9 +35,6 @@ const renderItem = ({ index, style }: any) => { ); }; -const Icon1 = logo -const Icon2 = logo - const App = () => { const classes = useStyles(); const [page, setPage] = useState('home'); @@ -49,7 +43,7 @@ const App = () => {
{ />
- -

Here is some text about BENZIN library.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. +

-- cgit v1.2.3 From d50ac5ba261d1da6f367bd0e9e02da11f9de5921 Mon Sep 17 00:00:00 2001 From: Eug-VS 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 = ({ index, style}) => { return ( {index} ); }; -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 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 = ({ index, style}) => { - return ( - {index} - ); -}; const App: React.FC = () => { const classes = useStyles(); const [page, setPage] = useState('home'); + const renderItem: React.FC = ({ index, style}) => { + return ( +
+ +

+ 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. +

+ {(index % 2 === 0)? + ( + + ) + : + ( + + ) + } + +
+ ); + }; + return (
{

- 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. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo.

+ +

+ 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. +

+

+ Link example +

+ + +

+ 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 nulla. Nullam rutrum. Nam vestibulum accumsan nisl. Pellentesque dapibus suscipit ligula. +

+
- + 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 = () => {

{(index % 2 === 0)? ( - ) : ( - ) @@ -81,10 +82,10 @@ const App: React.FC = () => {

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. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo.

- - -- cgit v1.2.3