From bf98ff90a7ad9fad79f75a2215108dcfdaa02ed2 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Tue, 28 Jan 2020 17:00:00 +0300 Subject: feat!: install Typescript, migrate Window to .tsx --- src/lib/components/Window/Window.js | 55 ------------------- src/lib/components/Window/Window.tsx | 63 ++++++++++++++++++++++ src/lib/components/Window/WindowSurface.tsx | 46 ++++++++++++++++ .../Window/WindowSurface/WindowSurface.js | 36 ------------- src/lib/components/Window/types.d.ts | 11 ++++ src/react-app-env.d.ts | 1 + 6 files changed, 121 insertions(+), 91 deletions(-) delete mode 100644 src/lib/components/Window/Window.js create mode 100644 src/lib/components/Window/Window.tsx create mode 100644 src/lib/components/Window/WindowSurface.tsx delete mode 100644 src/lib/components/Window/WindowSurface/WindowSurface.js create mode 100644 src/lib/components/Window/types.d.ts create mode 100644 src/react-app-env.d.ts (limited to 'src') diff --git a/src/lib/components/Window/Window.js b/src/lib/components/Window/Window.js deleted file mode 100644 index 027213f..0000000 --- a/src/lib/components/Window/Window.js +++ /dev/null @@ -1,55 +0,0 @@ -import React from 'react'; - -import { Typography, Divider, makeStyles } from '@material-ui/core'; - -import WindowSurface from './WindowSurface/WindowSurface'; - - -const useStyles = makeStyles(theme => ({ - header: { - padding: theme.spacing(1, 0, 1, 2), - background: theme.palette.background.elevation2, - }, -})); - - -const Window = ({ type, name, children }) => { - const classes = useStyles(); - - const size = { - height: '85vh', - }; - - const position = { - bottom: '3vh', - }; - - if (type === 'primary') { - size.width = '63vw'; - position.left = '2vw'; - } else if (type === 'secondary') { - size.width = '31vw'; - position.right = '2vw'; - } else if (type === 'mono') { - position.left = '2vw'; - position.right = '2vw'; - } - - return ( - - {name && -
- {name} - -
- } - {children} - - ); -}; - - -export default Window; diff --git a/src/lib/components/Window/Window.tsx b/src/lib/components/Window/Window.tsx new file mode 100644 index 0000000..4821cb3 --- /dev/null +++ b/src/lib/components/Window/Window.tsx @@ -0,0 +1,63 @@ +import React from 'react'; + +import { Typography, Divider, makeStyles } from '@material-ui/core'; + +import WindowSurface from './WindowSurface'; +import { SurfaceSize, SurfacePosition } from './types'; + + +interface PropTypes { + type: 'primary' | 'secondary' | 'mono'; + name?: string; + children?: any; +} + + +const useStyles = makeStyles((theme: any) => ({ + header: { + padding: theme.spacing(1, 0, 1, 2), + background: theme.palette.background.elevation2, + }, +})); + + +const Window = (props: PropTypes) => { + const classes = useStyles(); + const { type, name, children } = props; + + const size: SurfaceSize = { + height: '85vh', + }; + + const position: SurfacePosition = { + bottom: '3vh', + }; + + if (type === 'primary') { + size.width = '63vw'; + position.left = '2vw'; + } else if (type === 'secondary') { + size.width = '31vw'; + position.right = '2vw'; + } else if (type === 'mono') { + position.left = '2vw'; + position.right = '2vw'; + } + + return ( + + {name && +
+ {name} + +
+ } + {children} + + ); +}; + +export default Window; diff --git a/src/lib/components/Window/WindowSurface.tsx b/src/lib/components/Window/WindowSurface.tsx new file mode 100644 index 0000000..aaaa984 --- /dev/null +++ b/src/lib/components/Window/WindowSurface.tsx @@ -0,0 +1,46 @@ +import React from 'react'; + +import { Paper, makeStyles } from '@material-ui/core'; + +import { SurfaceSize, SurfacePosition } from './types'; + + +interface PropTypes { + size: SurfaceSize; + position: SurfacePosition; + children?: any; +} + + +const useStyles = makeStyles((theme: any) => ({ + surface: { + position: 'absolute', + display: 'flex', + flexDirection: 'column', + overflowY: 'auto', + scrollbarColor: `${theme.palette.secondary.dark} ${theme.palette.secondary.light}`, + + '& a.MuiTypography-root': { + color: theme.palette.primary.light, + }, + } +})); + + +const WindowSurface = (props: PropTypes) => { + const classes = useStyles(); + const { size, position, children } = props; + + return ( + + {children} + + ) +}; + + +export default WindowSurface; diff --git a/src/lib/components/Window/WindowSurface/WindowSurface.js b/src/lib/components/Window/WindowSurface/WindowSurface.js deleted file mode 100644 index 7859bf6..0000000 --- a/src/lib/components/Window/WindowSurface/WindowSurface.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; - -import { Paper, makeStyles } from '@material-ui/core'; - - -const useStyles = makeStyles(theme => ({ - surface: { - position: 'absolute', - display: 'flex', - flexDirection: 'column', - overflowY: 'auto', - scrollbarColor: `${theme.palette.secondary.dark} ${theme.palette.secondary.light}`, - - '& a.MuiTypography-root': { - color: theme.palette.primary.light, - }, - } -})); - - -const WindowSurface = ({ size, position, children }) => { - const classes = useStyles(); - - return ( - - {children} - - ) -}; - - -export default WindowSurface; diff --git a/src/lib/components/Window/types.d.ts b/src/lib/components/Window/types.d.ts new file mode 100644 index 0000000..9e18fe3 --- /dev/null +++ b/src/lib/components/Window/types.d.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/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 @@ +/// -- cgit v1.2.3 From f9ea123a86defb49c0519a1e8e4a74a26e9c9660 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Tue, 28 Jan 2020 21:51:27 +0300 Subject: feat: setup deploy-ready typescript config --- src/lib/components/Window/types.d.ts | 11 ----------- src/lib/components/Window/types.ts | 11 +++++++++++ 2 files changed, 11 insertions(+), 11 deletions(-) delete mode 100644 src/lib/components/Window/types.d.ts create mode 100644 src/lib/components/Window/types.ts (limited to 'src') diff --git a/src/lib/components/Window/types.d.ts b/src/lib/components/Window/types.d.ts deleted file mode 100644 index 9e18fe3..0000000 --- a/src/lib/components/Window/types.d.ts +++ /dev/null @@ -1,11 +0,0 @@ -export interface SurfaceSize { - height: string; - width?: string; -} - -export interface SurfacePosition { - bottom: string; - left?: string; - right?: string; -} - diff --git a/src/lib/components/Window/types.ts b/src/lib/components/Window/types.ts new file mode 100644 index 0000000..9e18fe3 --- /dev/null +++ b/src/lib/components/Window/types.ts @@ -0,0 +1,11 @@ +export interface SurfaceSize { + height: string; + width?: string; +} + +export interface SurfacePosition { + bottom: string; + left?: string; + right?: string; +} + -- cgit v1.2.3 From 5bcc9b41e59bf7215abf395ea899cdbc2d06db9a Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 3 Feb 2020 14:51:10 +0300 Subject: feat: use React.FC syntax This approach is better because it allows to use destructuring right in a function declaration without explicitly defining children propety in PropTypes --- src/lib/components/Window/Window.tsx | 4 +--- src/lib/components/Window/WindowSurface.tsx | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/lib/components/Window/Window.tsx b/src/lib/components/Window/Window.tsx index 4821cb3..ea8e264 100644 --- a/src/lib/components/Window/Window.tsx +++ b/src/lib/components/Window/Window.tsx @@ -9,7 +9,6 @@ import { SurfaceSize, SurfacePosition } from './types'; interface PropTypes { type: 'primary' | 'secondary' | 'mono'; name?: string; - children?: any; } @@ -21,9 +20,8 @@ const useStyles = makeStyles((theme: any) => ({ })); -const Window = (props: PropTypes) => { +const Window: React.FC = ({ type, name, children }) => { const classes = useStyles(); - const { type, name, children } = props; const size: SurfaceSize = { height: '85vh', diff --git a/src/lib/components/Window/WindowSurface.tsx b/src/lib/components/Window/WindowSurface.tsx index aaaa984..701a767 100644 --- a/src/lib/components/Window/WindowSurface.tsx +++ b/src/lib/components/Window/WindowSurface.tsx @@ -8,7 +8,6 @@ import { SurfaceSize, SurfacePosition } from './types'; interface PropTypes { size: SurfaceSize; position: SurfacePosition; - children?: any; } @@ -27,9 +26,8 @@ const useStyles = makeStyles((theme: any) => ({ })); -const WindowSurface = (props: PropTypes) => { +const WindowSurface: React.FC = ({ size, position, children }) => { const classes = useStyles(); - const { size, position, children } = props; return ( Date: Mon, 3 Feb 2020 16:37:43 +0300 Subject: feat: change src structure --- src/assets/icon.png | Bin 0 -> 10550 bytes src/assets/icon2.svg | 8 +++ src/index.js | 4 +- src/lib/BenzinThemeProvider/BenzinThemeProvider.js | 40 ++++++++++++ src/lib/ContentSection/ContentSection.js | 37 ++++++++++++ src/lib/Header/Header.js | 67 +++++++++++++++++++++ src/lib/SmartList/SmartList.js | 28 +++++++++ src/lib/Window/Window.tsx | 61 +++++++++++++++++++ src/lib/Window/WindowSurface.tsx | 44 ++++++++++++++ src/lib/Window/types.ts | 11 ++++ src/lib/assets/icon.png | Bin 10550 -> 0 bytes src/lib/assets/icon2.svg | 8 --- .../BenzinThemeProvider/BenzinThemeProvider.js | 40 ------------ .../components/ContentSection/ContentSection.js | 37 ------------ src/lib/components/Header/Header.js | 67 --------------------- src/lib/components/SmartList/SmartList.js | 28 --------- src/lib/components/Window/Window.tsx | 61 ------------------- src/lib/components/Window/WindowSurface.tsx | 44 -------------- src/lib/components/Window/types.ts | 11 ---- src/lib/index.js | 10 +-- 20 files changed, 303 insertions(+), 303 deletions(-) create mode 100644 src/assets/icon.png create mode 100644 src/assets/icon2.svg create mode 100644 src/lib/BenzinThemeProvider/BenzinThemeProvider.js create mode 100644 src/lib/ContentSection/ContentSection.js create mode 100644 src/lib/Header/Header.js create mode 100644 src/lib/SmartList/SmartList.js create mode 100644 src/lib/Window/Window.tsx create mode 100644 src/lib/Window/WindowSurface.tsx create mode 100644 src/lib/Window/types.ts delete mode 100644 src/lib/assets/icon.png delete mode 100644 src/lib/assets/icon2.svg delete mode 100644 src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js delete mode 100644 src/lib/components/ContentSection/ContentSection.js delete mode 100644 src/lib/components/Header/Header.js delete mode 100644 src/lib/components/SmartList/SmartList.js delete mode 100644 src/lib/components/Window/Window.tsx delete mode 100644 src/lib/components/Window/WindowSurface.tsx delete mode 100644 src/lib/components/Window/types.ts (limited to 'src') diff --git a/src/assets/icon.png b/src/assets/icon.png new file mode 100644 index 0000000..4335637 Binary files /dev/null and b/src/assets/icon.png differ diff --git a/src/assets/icon2.svg b/src/assets/icon2.svg new file mode 100644 index 0000000..9c4da7f --- /dev/null +++ b/src/assets/icon2.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/index.js b/src/index.js index 1aec963..d0a96a1 100644 --- a/src/index.js +++ b/src/index.js @@ -10,8 +10,8 @@ import { ContentSection, } from './lib'; -import icon from './lib/assets/icon.png'; -import icon2 from './lib/assets/icon2.svg'; +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'; diff --git a/src/lib/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/BenzinThemeProvider/BenzinThemeProvider.js new file mode 100644 index 0000000..8e52ed4 --- /dev/null +++ b/src/lib/BenzinThemeProvider/BenzinThemeProvider.js @@ -0,0 +1,40 @@ +import React from 'react'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import { CssBaseline } from '@material-ui/core'; +import 'typeface-roboto'; + + +const benzinTheme = createMuiTheme({ + palette: { + type: 'dark', + primary: { + main: '#ffa726', + }, + secondary: { + main: '#9c27b0', + }, + background: { + default: '#121212', + paper: '#1e1e1e', + elevation1: '#1e1e1e', + elevation2: '#232323', + elevation3: '#252525', + }, + text: { + primary: '#f4f4f4', + secondary: 'rgba(255, 255, 255, 0.6)', + } + }, +}); + + +const BenzinThemeProvider = ({ children }) => ( + + + {children} + +); + + +export default BenzinThemeProvider; + diff --git a/src/lib/ContentSection/ContentSection.js b/src/lib/ContentSection/ContentSection.js new file mode 100644 index 0000000..461a9c2 --- /dev/null +++ b/src/lib/ContentSection/ContentSection.js @@ -0,0 +1,37 @@ +import React from 'react'; + +import { + Typography, + Divider, + makeStyles +} from '@material-ui/core'; + + +const useStyles = makeStyles(theme => ({ + content: { + padding: theme.spacing(0, 2, 1, 2), + marginBottom: theme.spacing(1), + + '& .MuiButton-root': { + margin: theme.spacing(1, 2, 2, 0), + }, + }, +})); + +const ContentSection = ({ sectionName, children }) => { + const classes = useStyles(); + + return ( + <> + {sectionName} + + + {children} + + + ); + +}; + + +export default ContentSection; diff --git a/src/lib/Header/Header.js b/src/lib/Header/Header.js new file mode 100644 index 0000000..3ade7b3 --- /dev/null +++ b/src/lib/Header/Header.js @@ -0,0 +1,67 @@ +import React from 'react'; + +import { + AppBar, + Tabs, + Tab, + Typography, + Toolbar, +} from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; + + +const useStyles = makeStyles(theme => ({ + root: { + background: theme.palette.background.elevation2, + color: theme.palette.text.primary, + paddingLeft: theme.spacing(3), + }, + logo: { + margin: theme.spacing(0, 3, 0, 1), + }, + tab: { + '& .MuiTab-wrapper': { + padding: theme.spacing(2), + flexDirection: 'row', + fontSize: '0.8125rem', + '& svg': { + marginRight: theme.spacing(1), + marginBottom: '0 !important', + } + } + } +})); + + +const Header = ({ logo, contents, page, setPage }) => { + const classes = useStyles(); + + const handleChange = (event, newPage) => { + setPage(newPage); + }; + + return ( + + + {logo.icon} + + {logo.title} + + + {contents && Object.keys(contents).map(item => ( + + ))} + + + + ); +}; + +export default Header; diff --git a/src/lib/SmartList/SmartList.js b/src/lib/SmartList/SmartList.js new file mode 100644 index 0000000..b462c47 --- /dev/null +++ b/src/lib/SmartList/SmartList.js @@ -0,0 +1,28 @@ +import React from 'react'; + +import { FixedSizeList } from 'react-window'; +import AutoSizer from 'react-virtualized-auto-sizer'; + + +const SmartList = ({ itemSize, itemCount, renderItem }) => { + + return ( +
+ + {({ width, height }) => ( + + {renderItem} + + )} + +
+ ); +}; + + +export default SmartList; diff --git a/src/lib/Window/Window.tsx b/src/lib/Window/Window.tsx new file mode 100644 index 0000000..ea8e264 --- /dev/null +++ b/src/lib/Window/Window.tsx @@ -0,0 +1,61 @@ +import React from 'react'; + +import { Typography, Divider, makeStyles } from '@material-ui/core'; + +import WindowSurface from './WindowSurface'; +import { SurfaceSize, SurfacePosition } from './types'; + + +interface PropTypes { + type: 'primary' | 'secondary' | 'mono'; + name?: string; +} + + +const useStyles = makeStyles((theme: any) => ({ + header: { + padding: theme.spacing(1, 0, 1, 2), + background: theme.palette.background.elevation2, + }, +})); + + +const Window: React.FC = ({ type, name, children }) => { + const classes = useStyles(); + + const size: SurfaceSize = { + height: '85vh', + }; + + const position: SurfacePosition = { + bottom: '3vh', + }; + + if (type === 'primary') { + size.width = '63vw'; + position.left = '2vw'; + } else if (type === 'secondary') { + size.width = '31vw'; + position.right = '2vw'; + } else if (type === 'mono') { + position.left = '2vw'; + position.right = '2vw'; + } + + return ( + + {name && +
+ {name} + +
+ } + {children} + + ); +}; + +export default Window; diff --git a/src/lib/Window/WindowSurface.tsx b/src/lib/Window/WindowSurface.tsx new file mode 100644 index 0000000..701a767 --- /dev/null +++ b/src/lib/Window/WindowSurface.tsx @@ -0,0 +1,44 @@ +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: any) => ({ + surface: { + position: 'absolute', + display: 'flex', + flexDirection: 'column', + overflowY: 'auto', + scrollbarColor: `${theme.palette.secondary.dark} ${theme.palette.secondary.light}`, + + '& a.MuiTypography-root': { + color: theme.palette.primary.light, + }, + } +})); + + +const WindowSurface: React.FC = ({ size, position, children }) => { + const classes = useStyles(); + + return ( + + {children} + + ) +}; + + +export default WindowSurface; 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 Binary files a/src/lib/assets/icon.png and /dev/null differ 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 @@ - - - - - - - - diff --git a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js deleted file mode 100644 index 8e52ed4..0000000 --- a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; -import { CssBaseline } from '@material-ui/core'; -import 'typeface-roboto'; - - -const benzinTheme = createMuiTheme({ - palette: { - type: 'dark', - primary: { - main: '#ffa726', - }, - secondary: { - main: '#9c27b0', - }, - background: { - default: '#121212', - paper: '#1e1e1e', - elevation1: '#1e1e1e', - elevation2: '#232323', - elevation3: '#252525', - }, - text: { - primary: '#f4f4f4', - secondary: 'rgba(255, 255, 255, 0.6)', - } - }, -}); - - -const BenzinThemeProvider = ({ children }) => ( - - - {children} - -); - - -export default BenzinThemeProvider; - diff --git a/src/lib/components/ContentSection/ContentSection.js b/src/lib/components/ContentSection/ContentSection.js deleted file mode 100644 index 461a9c2..0000000 --- a/src/lib/components/ContentSection/ContentSection.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; - -import { - Typography, - Divider, - makeStyles -} from '@material-ui/core'; - - -const useStyles = makeStyles(theme => ({ - content: { - padding: theme.spacing(0, 2, 1, 2), - marginBottom: theme.spacing(1), - - '& .MuiButton-root': { - margin: theme.spacing(1, 2, 2, 0), - }, - }, -})); - -const ContentSection = ({ sectionName, children }) => { - const classes = useStyles(); - - return ( - <> - {sectionName} - - - {children} - - - ); - -}; - - -export default ContentSection; diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js deleted file mode 100644 index 3ade7b3..0000000 --- a/src/lib/components/Header/Header.js +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; - -import { - AppBar, - Tabs, - Tab, - Typography, - Toolbar, -} from '@material-ui/core'; - -import { makeStyles } from '@material-ui/core/styles'; - - -const useStyles = makeStyles(theme => ({ - root: { - background: theme.palette.background.elevation2, - color: theme.palette.text.primary, - paddingLeft: theme.spacing(3), - }, - logo: { - margin: theme.spacing(0, 3, 0, 1), - }, - tab: { - '& .MuiTab-wrapper': { - padding: theme.spacing(2), - flexDirection: 'row', - fontSize: '0.8125rem', - '& svg': { - marginRight: theme.spacing(1), - marginBottom: '0 !important', - } - } - } -})); - - -const Header = ({ logo, contents, page, setPage }) => { - const classes = useStyles(); - - const handleChange = (event, newPage) => { - setPage(newPage); - }; - - return ( - - - {logo.icon} - - {logo.title} - - - {contents && Object.keys(contents).map(item => ( - - ))} - - - - ); -}; - -export default Header; 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 ( -
- - {({ width, height }) => ( - - {renderItem} - - )} - -
- ); -}; - - -export default SmartList; diff --git a/src/lib/components/Window/Window.tsx b/src/lib/components/Window/Window.tsx deleted file mode 100644 index ea8e264..0000000 --- a/src/lib/components/Window/Window.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; - -import { Typography, Divider, makeStyles } from '@material-ui/core'; - -import WindowSurface from './WindowSurface'; -import { SurfaceSize, SurfacePosition } from './types'; - - -interface PropTypes { - type: 'primary' | 'secondary' | 'mono'; - name?: string; -} - - -const useStyles = makeStyles((theme: any) => ({ - header: { - padding: theme.spacing(1, 0, 1, 2), - background: theme.palette.background.elevation2, - }, -})); - - -const Window: React.FC = ({ type, name, children }) => { - const classes = useStyles(); - - const size: SurfaceSize = { - height: '85vh', - }; - - const position: SurfacePosition = { - bottom: '3vh', - }; - - if (type === 'primary') { - size.width = '63vw'; - position.left = '2vw'; - } else if (type === 'secondary') { - size.width = '31vw'; - position.right = '2vw'; - } else if (type === 'mono') { - position.left = '2vw'; - position.right = '2vw'; - } - - return ( - - {name && -
- {name} - -
- } - {children} - - ); -}; - -export default Window; diff --git a/src/lib/components/Window/WindowSurface.tsx b/src/lib/components/Window/WindowSurface.tsx deleted file mode 100644 index 701a767..0000000 --- a/src/lib/components/Window/WindowSurface.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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: any) => ({ - surface: { - position: 'absolute', - display: 'flex', - flexDirection: 'column', - overflowY: 'auto', - scrollbarColor: `${theme.palette.secondary.dark} ${theme.palette.secondary.light}`, - - '& a.MuiTypography-root': { - color: theme.palette.primary.light, - }, - } -})); - - -const WindowSurface: React.FC = ({ size, position, children }) => { - const classes = useStyles(); - - return ( - - {children} - - ) -}; - - -export default WindowSurface; diff --git a/src/lib/components/Window/types.ts b/src/lib/components/Window/types.ts deleted file mode 100644 index 9e18fe3..0000000 --- a/src/lib/components/Window/types.ts +++ /dev/null @@ -1,11 +0,0 @@ -export interface SurfaceSize { - height: string; - width?: string; -} - -export interface SurfacePosition { - bottom: string; - left?: string; - right?: string; -} - diff --git a/src/lib/index.js b/src/lib/index.js index 0476c34..67f9bb4 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1,5 +1,5 @@ -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'; +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'; -- cgit v1.2.3 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.js | 71 ---------------------------------- src/index.tsx | 85 +++++++++++++++++++++++++++++++++++++++++ src/lib/SmartList/SmartList.js | 28 -------------- src/lib/SmartList/SmartList.tsx | 44 +++++++++++++++++++++ src/lib/index.js | 5 --- src/lib/index.ts | 5 +++ 6 files changed, 134 insertions(+), 104 deletions(-) delete mode 100644 src/index.js create mode 100644 src/index.tsx delete mode 100644 src/lib/SmartList/SmartList.js create mode 100644 src/lib/SmartList/SmartList.tsx delete mode 100644 src/lib/index.js create mode 100644 src/lib/index.ts (limited to 'src') diff --git a/src/index.js b/src/index.js deleted file mode 100644 index d0a96a1..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 './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 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')); - 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')); + 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 ( -
- - {({ width, height }) => ( - - {renderItem} - - )} - -
- ); -}; - - -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; +} + +interface Size { + height: number; + width: number; +} + + +const SmartList: React.FC = ({ itemSize, itemCount, renderItem }) => { + + const ResizedList: React.FC = ({ width, height}) => ( + + {renderItem} + + ); + + return ( +
+ +
+ ); +}; + + +export default SmartList; diff --git a/src/lib/index.js b/src/lib/index.js deleted file mode 100644 index 67f9bb4..0000000 --- a/src/lib/index.js +++ /dev/null @@ -1,5 +0,0 @@ -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'; diff --git a/src/lib/index.ts b/src/lib/index.ts new file mode 100644 index 0000000..67f9bb4 --- /dev/null +++ b/src/lib/index.ts @@ -0,0 +1,5 @@ +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'; -- 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/assets/icon.png | Bin 10550 -> 0 bytes src/assets/icon.svg | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++ src/index.tsx | 32 +++++++--------- 3 files changed, 122 insertions(+), 18 deletions(-) delete mode 100644 src/assets/icon.png create mode 100644 src/assets/icon.svg (limited to 'src') diff --git a/src/assets/icon.png b/src/assets/icon.png deleted file mode 100644 index 4335637..0000000 Binary files a/src/assets/icon.png and /dev/null differ 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 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + 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 c8d6281c29bbaca18cf86c63143c939d27357631 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 3 Feb 2020 17:53:42 +0300 Subject: feat: migrate ContentSection to Typescript --- src/lib/ContentSection/ContentSection.js | 37 ---------------------------- src/lib/ContentSection/ContentSection.tsx | 41 +++++++++++++++++++++++++++++++ 2 files changed, 41 insertions(+), 37 deletions(-) delete mode 100644 src/lib/ContentSection/ContentSection.js create mode 100644 src/lib/ContentSection/ContentSection.tsx (limited to 'src') diff --git a/src/lib/ContentSection/ContentSection.js b/src/lib/ContentSection/ContentSection.js deleted file mode 100644 index 461a9c2..0000000 --- a/src/lib/ContentSection/ContentSection.js +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; - -import { - Typography, - Divider, - makeStyles -} from '@material-ui/core'; - - -const useStyles = makeStyles(theme => ({ - content: { - padding: theme.spacing(0, 2, 1, 2), - marginBottom: theme.spacing(1), - - '& .MuiButton-root': { - margin: theme.spacing(1, 2, 2, 0), - }, - }, -})); - -const ContentSection = ({ sectionName, children }) => { - const classes = useStyles(); - - return ( - <> - {sectionName} - - - {children} - - - ); - -}; - - -export default ContentSection; diff --git a/src/lib/ContentSection/ContentSection.tsx b/src/lib/ContentSection/ContentSection.tsx new file mode 100644 index 0000000..7ff47f9 --- /dev/null +++ b/src/lib/ContentSection/ContentSection.tsx @@ -0,0 +1,41 @@ +import React from 'react'; + +import { + Typography, + Divider, + makeStyles +} from '@material-ui/core'; + + +interface PropTypes { + sectionName: string; +} + +const useStyles = makeStyles(theme => ({ + content: { + padding: theme.spacing(0, 2, 1, 2), + marginBottom: theme.spacing(1), + + '& .MuiButton-root': { + margin: theme.spacing(1, 2, 2, 0), + }, + }, +})); + +const ContentSection: React.FC = ({ sectionName, children }) => { + const classes = useStyles(); + + return ( + <> + {sectionName} + + + {children} + + + ); + +}; + + +export default ContentSection; -- cgit v1.2.3 From cf10bd8925fe8cbffb91e2b282e16f086575bf32 Mon Sep 17 00:00:00 2001 From: asketonim Date: Mon, 3 Feb 2020 19:53:37 +0300 Subject: feat: migrate Header to TypeScript --- src/lib/Header/Header.js | 67 ---------------------------------------- src/lib/Header/Header.tsx | 79 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 79 insertions(+), 67 deletions(-) delete mode 100644 src/lib/Header/Header.js create mode 100644 src/lib/Header/Header.tsx (limited to 'src') diff --git a/src/lib/Header/Header.js b/src/lib/Header/Header.js deleted file mode 100644 index 3ade7b3..0000000 --- a/src/lib/Header/Header.js +++ /dev/null @@ -1,67 +0,0 @@ -import React from 'react'; - -import { - AppBar, - Tabs, - Tab, - Typography, - Toolbar, -} from '@material-ui/core'; - -import { makeStyles } from '@material-ui/core/styles'; - - -const useStyles = makeStyles(theme => ({ - root: { - background: theme.palette.background.elevation2, - color: theme.palette.text.primary, - paddingLeft: theme.spacing(3), - }, - logo: { - margin: theme.spacing(0, 3, 0, 1), - }, - tab: { - '& .MuiTab-wrapper': { - padding: theme.spacing(2), - flexDirection: 'row', - fontSize: '0.8125rem', - '& svg': { - marginRight: theme.spacing(1), - marginBottom: '0 !important', - } - } - } -})); - - -const Header = ({ logo, contents, page, setPage }) => { - const classes = useStyles(); - - const handleChange = (event, newPage) => { - setPage(newPage); - }; - - return ( - - - {logo.icon} - - {logo.title} - - - {contents && Object.keys(contents).map(item => ( - - ))} - - - - ); -}; - -export default Header; diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx new file mode 100644 index 0000000..85dac4b --- /dev/null +++ b/src/lib/Header/Header.tsx @@ -0,0 +1,79 @@ +import React from 'react'; + +import { + AppBar, + Tabs, + Tab, + Typography, + Toolbar, +} from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; + + +interface PropTypes { + logo: { + icon: React.ReactNode; + title: string; + }; + contents: any; + page: string; + setPage: any; +} + + + +const useStyles = makeStyles((theme: any) => ({ + root: { + background: theme.palette.background.elevation2, + color: theme.palette.text.primary, + paddingLeft: theme.spacing(3), + }, + logo: { + margin: theme.spacing(0, 3, 0, 1), + }, + tab: { + '& .MuiTab-wrapper': { + padding: theme.spacing(2), + flexDirection: 'row', + fontSize: '0.8125rem', + '& svg': { + marginRight: theme.spacing(1), + marginBottom: '0 !important', + } + } + } +})); + + +const Header: React.FC = ({ logo, contents, page, setPage }) => { + const classes = useStyles(); + + const handleChange = (event: any, newPage: string) => { + setPage(newPage); + }; + + return ( + + + {logo.icon} + + {logo.title} + + + {contents && Object.keys(contents).map(item => ( + + ))} + + + + ); +}; + +export default Header; -- cgit v1.2.3 From f0a70407aaf633eeb2612ca054af27204d8c0a9f Mon Sep 17 00:00:00 2001 From: asketonim Date: Mon, 3 Feb 2020 19:56:47 +0300 Subject: fix: add missing prop --- src/lib/Header/Header.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index 85dac4b..2b13e3f 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -16,13 +16,13 @@ interface PropTypes { icon: React.ReactNode; title: string; }; - contents: any; + contents: { + [key: string]: React.ReactNode; + }; page: string; setPage: any; } - - const useStyles = makeStyles((theme: any) => ({ root: { background: theme.palette.background.elevation2, -- cgit v1.2.3 From ddb2ba73406d6982e81bc779c155e6c687f98bb5 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 3 Feb 2020 20:19:57 +0300 Subject: feat: separate HeaderTab component @asketonim, feel free to correct these changes --- src/lib/Header/Header.tsx | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) (limited to 'src') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index 2b13e3f..cc73fd9 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -10,14 +10,13 @@ import { import { makeStyles } from '@material-ui/core/styles'; - interface PropTypes { logo: { icon: React.ReactNode; title: string; }; contents: { - [key: string]: React.ReactNode; + [key: string]: React.ReactNode | null; }; page: string; setPage: any; @@ -49,6 +48,19 @@ const useStyles = makeStyles((theme: any) => ({ const Header: React.FC = ({ logo, contents, page, setPage }) => { const classes = useStyles(); + const HeaderTab: React.FC<{ item: string }> = ({ item }) => { + const icon = contents[item]; + return ( + + ) + }; + const handleChange = (event: any, newPage: string) => { setPage(newPage); }; @@ -61,14 +73,8 @@ const Header: React.FC = ({ logo, contents, page, setPage }) => { {logo.title} - {contents && Object.keys(contents).map(item => ( - + {contents && Object.keys(contents).map((item: string) => ( + ))} -- cgit v1.2.3 From 78f5ec6998f96da4f99f169c10e6639dfa818207 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 3 Feb 2020 21:07:49 +0300 Subject: fix: correct icon type This partially reverts last commit --- src/lib/Header/Header.tsx | 22 ++++++++-------------- 1 file changed, 8 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index cc73fd9..e052f6c 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -10,6 +10,7 @@ import { import { makeStyles } from '@material-ui/core/styles'; + interface PropTypes { logo: { icon: React.ReactNode; @@ -48,19 +49,6 @@ const useStyles = makeStyles((theme: any) => ({ const Header: React.FC = ({ logo, contents, page, setPage }) => { const classes = useStyles(); - const HeaderTab: React.FC<{ item: string }> = ({ item }) => { - const icon = contents[item]; - return ( - - ) - }; - const handleChange = (event: any, newPage: string) => { setPage(newPage); }; @@ -74,7 +62,13 @@ const Header: React.FC = ({ logo, contents, page, setPage }) => { {contents && Object.keys(contents).map((item: string) => ( - + ))} -- cgit v1.2.3 From ea4472805d4d5a717f6b880200977805961dc546 Mon Sep 17 00:00:00 2001 From: asketonim Date: Mon, 3 Feb 2020 21:28:11 +0300 Subject: fix: correct handleChange prop types --- src/lib/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index e052f6c..4e75ada 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -49,7 +49,7 @@ const useStyles = makeStyles((theme: any) => ({ const Header: React.FC = ({ logo, contents, page, setPage }) => { const classes = useStyles(); - const handleChange = (event: any, newPage: string) => { + const handleChange = (event: React.ChangeEvent<{}>, newPage: string) => { setPage(newPage); }; -- cgit v1.2.3 From 94a00e852a0f99dbe9cef949375a79e175c7cc94 Mon Sep 17 00:00:00 2001 From: asketonim Date: Mon, 3 Feb 2020 22:00:48 +0300 Subject: fix: correct setPage type --- src/lib/Header/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index 4e75ada..7f3d35d 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -20,7 +20,7 @@ interface PropTypes { [key: string]: React.ReactNode | null; }; page: string; - setPage: any; + setPage: (newPage: string) => void; } const useStyles = makeStyles((theme: any) => ({ -- cgit v1.2.3 From 99da7e7ad0f836c018d974fddc7f934c5c81a5dc Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Thu, 6 Feb 2020 17:00:42 +0300 Subject: feat: migrate BenzinThemeProvider to Typescript --- src/lib/BenzinThemeProvider/BenzinThemeProvider.js | 40 ------------------ .../BenzinThemeProvider/BenzinThemeProvider.tsx | 49 ++++++++++++++++++++++ 2 files changed, 49 insertions(+), 40 deletions(-) delete mode 100644 src/lib/BenzinThemeProvider/BenzinThemeProvider.js create mode 100644 src/lib/BenzinThemeProvider/BenzinThemeProvider.tsx (limited to 'src') diff --git a/src/lib/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/BenzinThemeProvider/BenzinThemeProvider.js deleted file mode 100644 index 8e52ed4..0000000 --- a/src/lib/BenzinThemeProvider/BenzinThemeProvider.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; -import { CssBaseline } from '@material-ui/core'; -import 'typeface-roboto'; - - -const benzinTheme = createMuiTheme({ - palette: { - type: 'dark', - primary: { - main: '#ffa726', - }, - secondary: { - main: '#9c27b0', - }, - background: { - default: '#121212', - paper: '#1e1e1e', - elevation1: '#1e1e1e', - elevation2: '#232323', - elevation3: '#252525', - }, - text: { - primary: '#f4f4f4', - secondary: 'rgba(255, 255, 255, 0.6)', - } - }, -}); - - -const BenzinThemeProvider = ({ children }) => ( - - - {children} - -); - - -export default BenzinThemeProvider; - diff --git a/src/lib/BenzinThemeProvider/BenzinThemeProvider.tsx b/src/lib/BenzinThemeProvider/BenzinThemeProvider.tsx new file mode 100644 index 0000000..efb4f86 --- /dev/null +++ b/src/lib/BenzinThemeProvider/BenzinThemeProvider.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +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', + primary: { + main: '#ffa726', + }, + secondary: { + main: '#9c27b0', + }, + background: { + default: '#121212', + paper: '#1e1e1e', + elevation1: '#1e1e1e', + elevation2: '#232323', + elevation3: '#252525', + }, + text: { + primary: '#f4f4f4', + secondary: 'rgba(255, 255, 255, 0.6)', + } + }, +}); + + +const BenzinThemeProvider: React.FC = ({ children }) => ( + + + {children} + +); + + +export default BenzinThemeProvider; + -- 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 +++++++-- src/lib/Header/Header.tsx | 4 ++-- src/lib/SmartList/SmartList.tsx | 2 +- src/lib/Window/Window.tsx | 2 +- src/lib/Window/WindowSurface.tsx | 2 +- 5 files changed, 12 insertions(+), 7 deletions(-) (limited to 'src') 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'); diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx index 7f3d35d..233eacb 100644 --- a/src/lib/Header/Header.tsx +++ b/src/lib/Header/Header.tsx @@ -23,7 +23,7 @@ interface PropTypes { setPage: (newPage: string) => void; } -const useStyles = makeStyles((theme: any) => ({ +const useStyles = makeStyles(theme => ({ root: { background: theme.palette.background.elevation2, color: theme.palette.text.primary, @@ -49,7 +49,7 @@ const useStyles = makeStyles((theme: any) => ({ const Header: React.FC = ({ logo, contents, page, setPage }) => { const classes = useStyles(); - const handleChange = (event: React.ChangeEvent<{}>, newPage: string) => { + const handleChange = (event: React.ChangeEvent<{}>, newPage: string): void => { setPage(newPage); }; diff --git a/src/lib/SmartList/SmartList.tsx b/src/lib/SmartList/SmartList.tsx index c889719..22cd3b2 100644 --- a/src/lib/SmartList/SmartList.tsx +++ b/src/lib/SmartList/SmartList.tsx @@ -5,7 +5,7 @@ import AutoSizer from 'react-virtualized-auto-sizer'; interface RenderPropTypes { index: number; - style: any; + style: React.CSSProperties; } interface PropTypes { diff --git a/src/lib/Window/Window.tsx b/src/lib/Window/Window.tsx index ea8e264..6821593 100644 --- a/src/lib/Window/Window.tsx +++ b/src/lib/Window/Window.tsx @@ -12,7 +12,7 @@ interface PropTypes { } -const useStyles = makeStyles((theme: any) => ({ +const useStyles = makeStyles(theme => ({ header: { padding: theme.spacing(1, 0, 1, 2), background: theme.palette.background.elevation2, diff --git a/src/lib/Window/WindowSurface.tsx b/src/lib/Window/WindowSurface.tsx index 701a767..a65e398 100644 --- a/src/lib/Window/WindowSurface.tsx +++ b/src/lib/Window/WindowSurface.tsx @@ -11,7 +11,7 @@ interface PropTypes { } -const useStyles = makeStyles((theme: any) => ({ +const useStyles = makeStyles(theme => ({ surface: { position: 'absolute', display: 'flex', -- cgit v1.2.3 From 364940a8c9d1c0a49fc58669a50f76727ea138a9 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Thu, 6 Feb 2020 20:27:55 +0300 Subject: docs: add logo image --- src/assets/logo.png | Bin 0 -> 11200 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/assets/logo.png (limited to 'src') diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..64cd118 Binary files /dev/null and b/src/assets/logo.png differ -- cgit v1.2.3 From 1dbb0b039932f2b67a63264500a30da234d87eae Mon Sep 17 00:00:00 2001 From: Eugene Sokolov Date: Thu, 6 Feb 2020 22:05:14 +0300 Subject: docs: improve heading, remove logo.png --- src/assets/logo.png | Bin 11200 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 src/assets/logo.png (limited to 'src') diff --git a/src/assets/logo.png b/src/assets/logo.png deleted file mode 100644 index 64cd118..0000000 Binary files a/src/assets/logo.png and /dev/null differ -- 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') 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 ++++++----- src/lib/Button/Button.tsx | 18 ++++++++++++++++++ src/lib/index.ts | 1 + 3 files changed, 25 insertions(+), 5 deletions(-) create mode 100644 src/lib/Button/Button.tsx (limited to 'src') 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.

- - 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 = ({ color, children }) => ( + +); + + +export default Button; diff --git a/src/lib/index.ts b/src/lib/index.ts index 67f9bb4..a41dd39 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -3,3 +3,4 @@ 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'; -- cgit v1.2.3