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 ++++ 5 files changed, 120 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 (limited to 'src/lib') 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; +} + -- 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/lib') 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/lib') 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/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 +-- 17 files changed, 293 insertions(+), 301 deletions(-) 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/lib') 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/lib/SmartList/SmartList.js | 28 -------------------------- src/lib/SmartList/SmartList.tsx | 44 +++++++++++++++++++++++++++++++++++++++++ src/lib/index.js | 5 ----- src/lib/index.ts | 5 +++++ 4 files changed, 49 insertions(+), 33 deletions(-) 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/lib') 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 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/lib') 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/lib') 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/lib') 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/lib') 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/lib') 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/lib') 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/lib') 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/lib') 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/lib/Header/Header.tsx | 4 ++-- src/lib/SmartList/SmartList.tsx | 2 +- src/lib/Window/Window.tsx | 2 +- src/lib/Window/WindowSurface.tsx | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) (limited to 'src/lib') 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 4af6a41a8bfc9d5f8b90d3aa8bc96a804607dba0 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sat, 8 Feb 2020 15:36:32 +0300 Subject: feat: add Button component --- src/lib/Button/Button.tsx | 18 ++++++++++++++++++ src/lib/index.ts | 1 + 2 files changed, 19 insertions(+) create mode 100644 src/lib/Button/Button.tsx (limited to 'src/lib') 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