From caee577929870603eb0ef7f28c89c2c4207b8050 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 26 Jan 2020 15:50:08 +0300 Subject: feat: initialize npm module, add components --- .../components/ContentSection/ContentSection.js | 42 +++++++++++++ src/lib/components/Header/Header.js | 72 ++++++++++++++++++++++ src/lib/components/SmartList/SmartList.js | 28 +++++++++ src/lib/components/Window/Window.js | 55 +++++++++++++++++ .../Window/WindowSurface/WindowSurface.js | 33 ++++++++++ src/lib/index.js | 8 +++ 6 files changed, 238 insertions(+) create mode 100644 src/lib/components/ContentSection/ContentSection.js create mode 100644 src/lib/components/Header/Header.js create mode 100644 src/lib/components/SmartList/SmartList.js create mode 100644 src/lib/components/Window/Window.js create mode 100644 src/lib/components/Window/WindowSurface/WindowSurface.js create mode 100644 src/lib/index.js (limited to 'src') diff --git a/src/lib/components/ContentSection/ContentSection.js b/src/lib/components/ContentSection/ContentSection.js new file mode 100644 index 0000000..5108ce0 --- /dev/null +++ b/src/lib/components/ContentSection/ContentSection.js @@ -0,0 +1,42 @@ +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), + + '& a': { + color: theme.palette.secondary.light, + }, + '& .MuiButton-root': { + color: theme.palette.background.paper, + margin: theme.spacing(1, 2, 2, 0), + fontWeight: 'bold', + }, + }, +})); + +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 new file mode 100644 index 0000000..1595141 --- /dev/null +++ b/src/lib/components/Header/Header.js @@ -0,0 +1,72 @@ +import React from 'react'; + +import { + AppBar, + Tabs, + Tab, + Typography, + Toolbar, +} from '@material-ui/core'; + +import { makeStyles } from '@material-ui/core/styles'; +import TimerIcon from '@material-ui/icons/Timer'; +import AccountCircleIcon from '@material-ui/icons/AccountCircle'; +import AssignmentIcon from '@material-ui/icons/Assignment'; +import GitHubIcon from '@material-ui/icons/GitHub'; + + +const useStyles = makeStyles(theme => ({ + logo: { + color: theme.palette.secondary.main, + margin: theme.spacing(0, 3, 0, 3), + }, + tab: { + '& .MuiTab-wrapper': { + padding: theme.spacing(2), + flexDirection: 'row', + '& svg': { + marginRight: theme.spacing(1), + marginBottom: '0 !important', + } + } + } +})); + + +const Header = ({ page, setPage }) => { + const classes = useStyles(); + + const handleChange = (event, newPage) => { + setPage(newPage); + }; + + const icons = { + app: (), + profile: (), + scoreboard: (), + contribute: (), + }; + + return ( + + + + ChronoCube + + + { Object.keys(icons).map(item => ( + + ))} + + + + ); +}; + +export default Header; diff --git a/src/lib/components/SmartList/SmartList.js b/src/lib/components/SmartList/SmartList.js new file mode 100644 index 0000000..b462c47 --- /dev/null +++ b/src/lib/components/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/components/Window/Window.js b/src/lib/components/Window/Window.js new file mode 100644 index 0000000..0ba2454 --- /dev/null +++ b/src/lib/components/Window/Window.js @@ -0,0 +1,55 @@ +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.elevation, + }, +})); + + +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/WindowSurface/WindowSurface.js b/src/lib/components/Window/WindowSurface/WindowSurface.js new file mode 100644 index 0000000..26fea01 --- /dev/null +++ b/src/lib/components/Window/WindowSurface/WindowSurface.js @@ -0,0 +1,33 @@ +import React from 'react'; + +import { Paper, makeStyles } from '@material-ui/core'; + + +const useStyles = makeStyles(theme => ({ + surface: { + position: 'absolute', + display: 'flex', + flexDirection: 'column', + background: theme.palette.background.elevation, + overflowY: 'auto', + scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`, + } +})); + + +const WindowSurface = ({ size, position, children }) => { + const classes = useStyles(); + + return ( + + {children} + + ) +}; + + +export default WindowSurface; \ No newline at end of file diff --git a/src/lib/index.js b/src/lib/index.js new file mode 100644 index 0000000..e0179c3 --- /dev/null +++ b/src/lib/index.js @@ -0,0 +1,8 @@ +import Window from './components/Window/Window'; +import Header from './components/Header/Header'; +import ContentSection from './components/ContentSection/ContentSection'; +import SmartList from './components/SmartList/SmartList'; + + + +export defaut { Window, Header, ContentSection, SmartList }; -- cgit v1.2.3 From 3487efe54ee0a70cf4873cb714a9e5e35b63e77e Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 26 Jan 2020 16:06:51 +0300 Subject: feat: install material-ui, add theme --- src/lib/index.js | 3 +-- src/lib/theme.js | 24 ++++++++++++++++++++++++ 2 files changed, 25 insertions(+), 2 deletions(-) create mode 100644 src/lib/theme.js (limited to 'src') diff --git a/src/lib/index.js b/src/lib/index.js index e0179c3..220703f 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -4,5 +4,4 @@ import ContentSection from './components/ContentSection/ContentSection'; import SmartList from './components/SmartList/SmartList'; - -export defaut { Window, Header, ContentSection, SmartList }; +export default { Window, Header, ContentSection, SmartList }; diff --git a/src/lib/theme.js b/src/lib/theme.js new file mode 100644 index 0000000..3c671e6 --- /dev/null +++ b/src/lib/theme.js @@ -0,0 +1,24 @@ +import { createMuiTheme } from '@material-ui/core/styles' + +const theme = createMuiTheme({ + palette: { + type: 'dark', + primary: { + main: '#0a0909', + }, + secondary: { + main: '#ff7315', + }, + background: { + default: '#232020', + paper: '#0f0e0e', + elevation: 'rgba(255, 255, 255, 0.04)', + }, + text: { + primary: '#f4f4f4', + secondary: '#6f6666', + } + }, +}); + +export default theme; -- cgit v1.2.3 From a526d3c85a40834257c5b78d6f31a983e42c5b97 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 26 Jan 2020 16:20:17 +0300 Subject: feat: prepare for publish --- src/lib/index.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) (limited to 'src') diff --git a/src/lib/index.js b/src/lib/index.js index 220703f..a983a23 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -1,7 +1,5 @@ -import Window from './components/Window/Window'; -import Header from './components/Header/Header'; -import ContentSection from './components/ContentSection/ContentSection'; -import SmartList from './components/SmartList/SmartList'; - - -export default { Window, Header, ContentSection, SmartList }; +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 theme } from './theme'; -- cgit v1.2.3 From a82bd36a02e2396817d64c466f001dcd84734bf1 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Sun, 26 Jan 2020 23:00:46 +0300 Subject: feat: update theme --- src/lib/theme.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) (limited to 'src') diff --git a/src/lib/theme.js b/src/lib/theme.js index 3c671e6..96ab00e 100644 --- a/src/lib/theme.js +++ b/src/lib/theme.js @@ -4,19 +4,21 @@ const theme = createMuiTheme({ palette: { type: 'dark', primary: { - main: '#0a0909', + main: '#ffa726', }, secondary: { - main: '#ff7315', + main: '#9c27b0', }, background: { - default: '#232020', - paper: '#0f0e0e', - elevation: 'rgba(255, 255, 255, 0.04)', + default: '#121212', + paper: '#1e1e1e', + elevation1: '#1e1e1e', + elevation2: '#232323', + elevation3: '#252525', }, text: { primary: '#f4f4f4', - secondary: '#6f6666', + secondary: 'rgba(255, 255, 255, 0.6)', } }, }); -- cgit v1.2.3 From 8a75fef7a7b68f82b745f7d73cbafdfb1f444825 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 27 Jan 2020 12:19:48 +0300 Subject: feat: update components --- src/lib/components/ContentSection/ContentSection.js | 5 ----- src/lib/components/Header/Header.js | 8 ++++++-- src/lib/components/Window/Window.js | 2 +- src/lib/components/Window/WindowSurface/WindowSurface.js | 11 +++++++---- 4 files changed, 14 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/lib/components/ContentSection/ContentSection.js b/src/lib/components/ContentSection/ContentSection.js index 5108ce0..461a9c2 100644 --- a/src/lib/components/ContentSection/ContentSection.js +++ b/src/lib/components/ContentSection/ContentSection.js @@ -12,13 +12,8 @@ const useStyles = makeStyles(theme => ({ padding: theme.spacing(0, 2, 1, 2), marginBottom: theme.spacing(1), - '& a': { - color: theme.palette.secondary.light, - }, '& .MuiButton-root': { - color: theme.palette.background.paper, margin: theme.spacing(1, 2, 2, 0), - fontWeight: 'bold', }, }, })); diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js index 1595141..fddf8b3 100644 --- a/src/lib/components/Header/Header.js +++ b/src/lib/components/Header/Header.js @@ -16,9 +16,13 @@ import GitHubIcon from '@material-ui/icons/GitHub'; const useStyles = makeStyles(theme => ({ + root: { + background: theme.palette.background.elevation2, + color: theme.palette.text.primary, + }, logo: { - color: theme.palette.secondary.main, margin: theme.spacing(0, 3, 0, 3), + color: theme.palette.primary.main, }, tab: { '& .MuiTab-wrapper': { @@ -48,7 +52,7 @@ const Header = ({ page, setPage }) => { }; return ( - + ChronoCube diff --git a/src/lib/components/Window/Window.js b/src/lib/components/Window/Window.js index 0ba2454..027213f 100644 --- a/src/lib/components/Window/Window.js +++ b/src/lib/components/Window/Window.js @@ -8,7 +8,7 @@ import WindowSurface from './WindowSurface/WindowSurface'; const useStyles = makeStyles(theme => ({ header: { padding: theme.spacing(1, 0, 1, 2), - background: theme.palette.background.elevation, + background: theme.palette.background.elevation2, }, })); diff --git a/src/lib/components/Window/WindowSurface/WindowSurface.js b/src/lib/components/Window/WindowSurface/WindowSurface.js index 26fea01..7859bf6 100644 --- a/src/lib/components/Window/WindowSurface/WindowSurface.js +++ b/src/lib/components/Window/WindowSurface/WindowSurface.js @@ -8,9 +8,12 @@ const useStyles = makeStyles(theme => ({ position: 'absolute', display: 'flex', flexDirection: 'column', - background: theme.palette.background.elevation, overflowY: 'auto', - scrollbarColor: `${theme.palette.primary.dark} ${theme.palette.primary.light}`, + scrollbarColor: `${theme.palette.secondary.dark} ${theme.palette.secondary.light}`, + + '& a.MuiTypography-root': { + color: theme.palette.primary.light, + }, } })); @@ -20,7 +23,7 @@ const WindowSurface = ({ size, position, children }) => { return ( @@ -30,4 +33,4 @@ const WindowSurface = ({ size, position, children }) => { }; -export default WindowSurface; \ No newline at end of file +export default WindowSurface; -- cgit v1.2.3 From 72e9ea60b82f95f858aa341b5c0b63e277f6779f Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 27 Jan 2020 13:32:50 +0300 Subject: feat: export ThemeProvider instead of theme --- .../BenzinThemeProvider/BenzinThemeProvider.js | 37 ++++++++++++++++++++++ src/lib/index.js | 2 +- src/lib/theme.js | 26 --------------- 3 files changed, 38 insertions(+), 27 deletions(-) create mode 100644 src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js delete mode 100644 src/lib/theme.js (limited to 'src') diff --git a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js new file mode 100644 index 0000000..48eca72 --- /dev/null +++ b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles' + + +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/index.js b/src/lib/index.js index a983a23..0476c34 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -2,4 +2,4 @@ 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 theme } from './theme'; +export { default as BenzinThemeProvider } from './components/BenzinThemeProvider/BenzinThemeProvider'; diff --git a/src/lib/theme.js b/src/lib/theme.js deleted file mode 100644 index 96ab00e..0000000 --- a/src/lib/theme.js +++ /dev/null @@ -1,26 +0,0 @@ -import { createMuiTheme } from '@material-ui/core/styles' - -const theme = 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)', - } - }, -}); - -export default theme; -- cgit v1.2.3 From 92316d9e41c1285cddcc7407225bdbfa841c6de8 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 27 Jan 2020 13:38:31 +0300 Subject: feat: install Roboto font --- src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js index 48eca72..6218308 100644 --- a/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js +++ b/src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js @@ -1,5 +1,6 @@ import React from 'react'; -import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles' +import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles'; +import 'typeface-roboto'; const benzinTheme = createMuiTheme({ -- cgit v1.2.3 From 8f0a5024a2b062c7ddf8d73f909b39050a624888 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 27 Jan 2020 19:48:22 +0300 Subject: feat: make Header more abstract --- src/lib/components/Header/Header.js | 28 +++++++++------------------- 1 file changed, 9 insertions(+), 19 deletions(-) (limited to 'src') diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js index fddf8b3..a055fcb 100644 --- a/src/lib/components/Header/Header.js +++ b/src/lib/components/Header/Header.js @@ -9,20 +9,16 @@ import { } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; -import TimerIcon from '@material-ui/icons/Timer'; -import AccountCircleIcon from '@material-ui/icons/AccountCircle'; -import AssignmentIcon from '@material-ui/icons/Assignment'; -import GitHubIcon from '@material-ui/icons/GitHub'; 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, 3), - color: theme.palette.primary.main, + margin: theme.spacing(0, 3, 0, 1), }, tab: { '& .MuiTab-wrapper': { @@ -37,31 +33,25 @@ const useStyles = makeStyles(theme => ({ })); -const Header = ({ page, setPage }) => { +const Header = ({ logo, contents, page, setPage }) => { const classes = useStyles(); const handleChange = (event, newPage) => { setPage(newPage); }; - const icons = { - app: (), - profile: (), - scoreboard: (), - contribute: (), - }; - return ( - - ChronoCube - + {logo.icon} + + {logo.title} + - { Object.keys(icons).map(item => ( + {contents && Object.keys(contents).map(item => ( Date: Tue, 28 Jan 2020 00:07:44 +0300 Subject: feat: support library preview --- src/index.js | 75 +++++++++++++++++++++++++++++++++++++++++++++++ src/lib/assets/icon.png | Bin 0 -> 10550 bytes src/lib/assets/icon2.svg | 8 +++++ 3 files changed, 83 insertions(+) create mode 100644 src/index.js create mode 100644 src/lib/assets/icon.png create mode 100644 src/lib/assets/icon2.svg (limited to 'src') diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..295f17e --- /dev/null +++ b/src/index.js @@ -0,0 +1,75 @@ +import React, { useState } from 'react'; +import ReactDOM from 'react-dom'; + +import { CssBaseline, makeStyles, Button } from '@material-ui/core'; + +import { + BenzinThemeProvider, + Header, + Window, + ContentSection, +} from './lib'; + +import icon from './lib/assets/icon.png'; +import icon2 from './lib/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/lib/assets/icon.png b/src/lib/assets/icon.png new file mode 100644 index 0000000..4335637 Binary files /dev/null and b/src/lib/assets/icon.png differ diff --git a/src/lib/assets/icon2.svg b/src/lib/assets/icon2.svg new file mode 100644 index 0000000..9c4da7f --- /dev/null +++ b/src/lib/assets/icon2.svg @@ -0,0 +1,8 @@ + + + + + + + + -- cgit v1.2.3 From 386e4c97fd803aa54e96bf56711d4a6a8873489a Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Tue, 28 Jan 2020 11:36:22 +0300 Subject: feat: decrease font-size in Header --- src/index.js | 5 +---- src/lib/components/Header/Header.js | 9 +++++---- 2 files changed, 6 insertions(+), 8 deletions(-) (limited to 'src') diff --git a/src/index.js b/src/index.js index 295f17e..6fca3b6 100644 --- a/src/index.js +++ b/src/index.js @@ -18,9 +18,6 @@ import ExploreIcon from '@material-ui/icons/Explore'; import GitHubIcon from '@material-ui/icons/GitHub'; - - - const useStyles = makeStyles(theme => ({ window: { padding: theme.spacing(4), @@ -34,7 +31,7 @@ const headerContents = { contribute: , } -const Icon1 = logo +const Icon1 = logo const Icon2 = logo const App = () => { diff --git a/src/lib/components/Header/Header.js b/src/lib/components/Header/Header.js index a055fcb..3ade7b3 100644 --- a/src/lib/components/Header/Header.js +++ b/src/lib/components/Header/Header.js @@ -24,6 +24,7 @@ const useStyles = makeStyles(theme => ({ '& .MuiTab-wrapper': { padding: theme.spacing(2), flexDirection: 'row', + fontSize: '0.8125rem', '& svg': { marginRight: theme.spacing(1), marginBottom: '0 !important', @@ -43,10 +44,10 @@ const Header = ({ logo, contents, page, setPage }) => { return ( - {logo.icon} - - {logo.title} - + {logo.icon} + + {logo.title} + {contents && Object.keys(contents).map(item => ( Date: Tue, 28 Jan 2020 12:28:02 +0300 Subject: feat: add CssBaseline to BenzinThemeProvider --- src/index.js | 3 +-- src/lib/components/BenzinThemeProvider/BenzinThemeProvider.js | 2 ++ 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/index.js b/src/index.js index 6fca3b6..1aec963 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import ReactDOM from 'react-dom'; -import { CssBaseline, makeStyles, Button } from '@material-ui/core'; +import { makeStyles, Button } from '@material-ui/core'; import { BenzinThemeProvider, @@ -40,7 +40,6 @@ const App = () => { return ( -
( + {children} ); -- cgit v1.2.3