From bfa9f7b9158faa3a453eaabf5be3c96b6c8a18b1 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 10 Oct 2020 13:39:08 +0300 Subject: refactor: remove demo components from lib --- src/demo/Button/Button.tsx | 18 +++++++++ src/demo/Header/Header.tsx | 81 +++++++++++++++++++++++++++++++++++++++ src/demo/SmartList/SmartList.tsx | 43 +++++++++++++++++++++ src/demo/Window/Window.tsx | 62 ++++++++++++++++++++++++++++++ src/demo/Window/WindowSurface.tsx | 44 +++++++++++++++++++++ src/demo/Window/types.ts | 11 ++++++ src/index.tsx | 7 +--- src/lib/Button/Button.tsx | 18 --------- src/lib/Header/Header.tsx | 81 --------------------------------------- src/lib/SmartList/SmartList.tsx | 43 --------------------- src/lib/Window/Window.tsx | 62 ------------------------------ src/lib/Window/WindowSurface.tsx | 44 --------------------- src/lib/Window/types.ts | 11 ------ src/lib/index.ts | 4 -- 14 files changed, 261 insertions(+), 268 deletions(-) create mode 100644 src/demo/Button/Button.tsx create mode 100644 src/demo/Header/Header.tsx create mode 100644 src/demo/SmartList/SmartList.tsx create mode 100644 src/demo/Window/Window.tsx create mode 100644 src/demo/Window/WindowSurface.tsx create mode 100644 src/demo/Window/types.ts delete mode 100644 src/lib/Button/Button.tsx delete mode 100644 src/lib/Header/Header.tsx delete mode 100644 src/lib/SmartList/SmartList.tsx delete mode 100644 src/lib/Window/Window.tsx delete mode 100644 src/lib/Window/WindowSurface.tsx delete mode 100644 src/lib/Window/types.ts diff --git a/src/demo/Button/Button.tsx b/src/demo/Button/Button.tsx new file mode 100644 index 0000000..6bc0f98 --- /dev/null +++ b/src/demo/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/demo/Header/Header.tsx b/src/demo/Header/Header.tsx new file mode 100644 index 0000000..58be989 --- /dev/null +++ b/src/demo/Header/Header.tsx @@ -0,0 +1,81 @@ +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: { + [key: string]: React.ReactNode | null; + }; + page: string; + setPage: (newPage: string) => void; +} + +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: React.FC = ({ + logo, contents, page, setPage, +}) => { + const classes = useStyles(); + + const handleChange = (event: React.ChangeEvent<{}>, newPage: string): void => { + setPage(newPage); + }; + + return ( + + + {logo.icon} + + {logo.title} + + + {contents && Object.keys(contents).map((item: string) => ( + + ))} + + + + ); +}; + +export default Header; diff --git a/src/demo/SmartList/SmartList.tsx b/src/demo/SmartList/SmartList.tsx new file mode 100644 index 0000000..c86c127 --- /dev/null +++ b/src/demo/SmartList/SmartList.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { FixedSizeList } from 'react-window'; +import AutoSizer from 'react-virtualized-auto-sizer'; + + +interface RenderPropTypes { + index: number; + style: React.CSSProperties; +} + +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/demo/Window/Window.tsx b/src/demo/Window/Window.tsx new file mode 100644 index 0000000..beaa672 --- /dev/null +++ b/src/demo/Window/Window.tsx @@ -0,0 +1,62 @@ +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 => ({ + 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/demo/Window/WindowSurface.tsx b/src/demo/Window/WindowSurface.tsx new file mode 100644 index 0000000..1900901 --- /dev/null +++ b/src/demo/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 => ({ + 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/demo/Window/types.ts b/src/demo/Window/types.ts new file mode 100644 index 0000000..9e18fe3 --- /dev/null +++ b/src/demo/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/index.tsx b/src/index.tsx index 4dd760b..404ac16 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,21 +1,19 @@ import React, { useState, useRef } from 'react'; import ReactDOM from 'react-dom'; - import { makeStyles, TextField, Button, Link, } from '@material-ui/core'; - import { Benzin, - Header, - Window, Markdown, ContentSection, } from './lib'; +import Header from './demo/Header/Header'; +import Window from './demo/Window/Window'; import icon from './assets/icon.svg'; interface RenderPropTypes { @@ -23,7 +21,6 @@ interface RenderPropTypes { style: React.CSSProperties; } - const useStyles = makeStyles(theme => ({ window: { padding: theme.spacing(4), diff --git a/src/lib/Button/Button.tsx b/src/lib/Button/Button.tsx deleted file mode 100644 index 6bc0f98..0000000 --- a/src/lib/Button/Button.tsx +++ /dev/null @@ -1,18 +0,0 @@ -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/Header/Header.tsx b/src/lib/Header/Header.tsx deleted file mode 100644 index 58be989..0000000 --- a/src/lib/Header/Header.tsx +++ /dev/null @@ -1,81 +0,0 @@ -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: { - [key: string]: React.ReactNode | null; - }; - page: string; - setPage: (newPage: string) => void; -} - -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: React.FC = ({ - logo, contents, page, setPage, -}) => { - const classes = useStyles(); - - const handleChange = (event: React.ChangeEvent<{}>, newPage: string): void => { - setPage(newPage); - }; - - return ( - - - {logo.icon} - - {logo.title} - - - {contents && Object.keys(contents).map((item: string) => ( - - ))} - - - - ); -}; - -export default Header; diff --git a/src/lib/SmartList/SmartList.tsx b/src/lib/SmartList/SmartList.tsx deleted file mode 100644 index c86c127..0000000 --- a/src/lib/SmartList/SmartList.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from 'react'; -import { FixedSizeList } from 'react-window'; -import AutoSizer from 'react-virtualized-auto-sizer'; - - -interface RenderPropTypes { - index: number; - style: React.CSSProperties; -} - -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/Window/Window.tsx b/src/lib/Window/Window.tsx deleted file mode 100644 index beaa672..0000000 --- a/src/lib/Window/Window.tsx +++ /dev/null @@ -1,62 +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 => ({ - 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 deleted file mode 100644 index 1900901..0000000 --- a/src/lib/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 => ({ - 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 deleted file mode 100644 index 9e18fe3..0000000 --- a/src/lib/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.ts b/src/lib/index.ts index 0f31104..545e6f8 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -1,7 +1,3 @@ -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 Benzin } from './Benzin/Benzin'; -export { default as Button } from './Button/Button'; export { default as Markdown } from './Markdown/Markdown'; -- cgit v1.2.3