From cc6c8e9109f1807ce48b061fa497535ab9f674e8 Mon Sep 17 00:00:00 2001 From: Eug-VS 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