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 From 59787b22e6f27a8c1714a195d1124752de4531a6 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 10 Oct 2020 13:40:16 +0300 Subject: feat!: remove SmartList component --- src/demo/SmartList/SmartList.tsx | 43 ---------------------------------------- 1 file changed, 43 deletions(-) delete mode 100644 src/demo/SmartList/SmartList.tsx diff --git a/src/demo/SmartList/SmartList.tsx b/src/demo/SmartList/SmartList.tsx deleted file mode 100644 index c86c127..0000000 --- a/src/demo/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; -- cgit v1.2.3 From 24fee35727031e40ebb73ade0597b8378b609cbc Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 10 Oct 2020 13:45:10 +0300 Subject: chose: uninstall react-virtualized --- package-lock.json | 37 ------------------------------------- package.json | 4 ---- 2 files changed, 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index f24f00a..f560291 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1774,24 +1774,6 @@ "@types/react": "*" } }, - "@types/react-virtualized-auto-sizer": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.0.tgz", - "integrity": "sha512-NMErdIdSnm2j/7IqMteRiRvRulpjoELnXWUwdbucYCz84xG9PHcoOrr7QfXwB/ku7wd6egiKFrzt/+QK4Imeeg==", - "dev": true, - "requires": { - "@types/react": "*" - } - }, - "@types/react-window": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/@types/react-window/-/react-window-1.8.1.tgz", - "integrity": "sha512-V3k1O5cbfZIRa0VVbQ81Ekq/7w42CK1SuiB9U1oPMTxv270D9qUn7rHb3sZoqMkIJFfB1NZxaH7NRDlk+ToDsg==", - "dev": true, - "requires": { - "@types/react": "*" - } - }, "@types/stack-utils": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", @@ -9307,11 +9289,6 @@ "p-is-promise": "^2.0.0" } }, - "memoize-one": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz", - "integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==" - }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -12375,20 +12352,6 @@ "prop-types": "^15.6.2" } }, - "react-virtualized-auto-sizer": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz", - "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==" - }, - "react-window": { - "version": "1.8.5", - "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.5.tgz", - "integrity": "sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==", - "requires": { - "@babel/runtime": "^7.0.0", - "memoize-one": ">=3.1.1 <6" - } - }, "read-pkg": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", diff --git a/package.json b/package.json index 76dd8d1..79faca8 100644 --- a/package.json +++ b/package.json @@ -24,16 +24,12 @@ "emojilib": "^2.4.0", "react": "^16.12.0", "react-dom": "^16.12.0", - "react-virtualized-auto-sizer": "^1.0.2", - "react-window": "^1.8.5", "typeface-roboto": "0.0.75" }, "devDependencies": { "@types/node": "^13.5.0", "@types/react": "^16.9.19", "@types/react-dom": "^16.9.5", - "@types/react-virtualized-auto-sizer": "^1.0.0", - "@types/react-window": "^1.8.1", "@typescript-eslint/eslint-plugin": "^2.28.0", "@typescript-eslint/parser": "^2.19.0", "eslint": "^6.8.0", -- cgit v1.2.3 From 13443517910133ecd9a23b52b3619523dc3c1c8f Mon Sep 17 00:00:00 2001 From: Eugene Sokolov Date: Sat, 10 Oct 2020 14:04:01 +0300 Subject: docs: update README.md --- README.md | 39 +++++++++++++++------------------------ 1 file changed, 15 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index 902f6f2..f2473c4 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,16 @@

BENZIN

-[React](https://reactjs.org/) Material components library. It supplies you with cool pre-defined style, while assuring that your project will follow all [Material Design guidelines](https://material.io/). - -[![](https://img.shields.io/npm/v/react-benzin?logo=npm)](https://github.com/eug-vs/react-benzin/releases) -[![](https://img.shields.io/circleci/build/github/eug-vs/react-benzin?logo=circleci)](https://github.com/eug-vs/react-benzin/commits/develop) -[![](https://img.shields.io/david/eug-vs/react-benzin)](https://github.com/eug-vs/react-benzin/network/dependencies) -[![](https://img.shields.io/github/languages/code-size/eug-vs/react-benzin)](https://github.com/eug-vs/react-benzin/releases) -[![](https://img.shields.io/npm/l/react-benzin)](https://github.com/eug-vs/react-benzin/blob/develop/LICENSE.md) - +

+ React Material library for content-display featuring Markdown rendering. +

+

+ + + + + +

# Getting started ## Installation @@ -16,26 +18,15 @@ You can easily add **BENZIN** to your project with `npm`: ```bash $ npm install react-benzin ``` -**BENZIN** works best in kick-starting new projects and allows you to focus on the functionality, while all the beauty will be maintained by our library. - -**TIP:** *Create-React-App with Typescript* is your GO-TO in most of the cases. [Learn more.](https://create-react-app.dev/docs/adding-typescript/) +**TIP:** **BENZIN** is designed to work in Material-UI environment, so it's best to use them together: +```bash +$ npm @material-ui/core +``` -![Preview screenshot](https://user-images.githubusercontent.com/51545008/73991116-46b04f00-495c-11ea-9733-865bcc6c8807.png) +![Preview screenshot](https://user-images.githubusercontent.com/51545008/95653266-209d0900-0b00-11eb-9a0a-f3aa81c878e5.png) You can find a minimal usage example [here](src/index.tsx). -## Functionality -**BENZIN** provides you with a bunch of cool components that greatly integrate with each other. - -[Explore](src/lib) `src/lib/` folder to see what's available. Documentation is yet to come, but for now you can enjoy type definitons. - -[Chrono-Cube](https://github.com/eug-vs/chrono-cube/) will also be a great example of usage, since it's the actual project which inspired us to create **BENZIN**. - - -# Explore NPM package online -https://www.npmjs.com/package/react-benzin - - # Development ## Running live demo To run a live example, clone a repo and execute following commands: -- cgit v1.2.3 From 0e6cffbb2748bcebe6c53026099a0e610230a650 Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 10 Oct 2020 14:06:21 +0300 Subject: fix: resolve eslint error --- src/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 404ac16..5ba33a0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -99,7 +99,8 @@ const LivePreviewPage: React.FC = ({ setLivePreviewData }) => {

Start typing and see your text rendered on the left window! - You can find the list of all Markdown features {' '} + You can find the list of all Markdown features + {' '} here -- cgit v1.2.3 From 36c0a6b3e7ac72e4e787d5def6b0cc03eae7db6c Mon Sep 17 00:00:00 2001 From: eug-vs Date: Sat, 10 Oct 2020 14:10:49 +0300 Subject: fix: remove redundant code --- src/lib/ContentSection/ContentSection.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/lib/ContentSection/ContentSection.tsx b/src/lib/ContentSection/ContentSection.tsx index 28b1ad5..3432bd5 100644 --- a/src/lib/ContentSection/ContentSection.tsx +++ b/src/lib/ContentSection/ContentSection.tsx @@ -16,10 +16,6 @@ const useStyles = makeStyles(theme => ({ content: { padding: theme.spacing(2, 2, 1, 3), marginBottom: theme.spacing(1), - - '& .MuiButton-root': { - margin: theme.spacing(1, 2, 2, 0), - }, }, })); -- cgit v1.2.3