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 ++++
src/react-app-env.d.ts | 1 +
6 files changed, 121 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
create mode 100644 src/react-app-env.d.ts
(limited to 'src')
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 &&
-
- }
- {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 &&
+
+ }
+ {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;
+}
+
diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
new file mode 100644
index 0000000..6431bc5
--- /dev/null
+++ b/src/react-app-env.d.ts
@@ -0,0 +1 @@
+///
--
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')
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')
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/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 &&
+
+ }
+ {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 &&
-
- }
- {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/index.js | 71 ----------------------------------
src/index.tsx | 85 +++++++++++++++++++++++++++++++++++++++++
src/lib/SmartList/SmartList.js | 28 --------------
src/lib/SmartList/SmartList.tsx | 44 +++++++++++++++++++++
src/lib/index.js | 5 ---
src/lib/index.ts | 5 +++
6 files changed, 134 insertions(+), 104 deletions(-)
delete mode 100644 src/index.js
create mode 100644 src/index.tsx
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')
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index d0a96a1..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,71 +0,0 @@
-import React, { useState } from 'react';
-import ReactDOM from 'react-dom';
-
-import { makeStyles, Button } from '@material-ui/core';
-
-import {
- BenzinThemeProvider,
- Header,
- Window,
- ContentSection,
-} from './lib';
-
-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';
-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 =
-const Icon2 =
-
-const App = () => {
- const classes = useStyles();
- const [page, setPage] = useState('home');
-
- return (
-
-
-
-
-
- Here is some text about BENZIN library.
-
- Charge me up!
-
-
- Learn more
-
-
-
-
-
- );
-};
-
-
-ReactDOM.render( , document.getElementById('root'));
-
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..19c118e
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+
+import { makeStyles, Button, Typography } from '@material-ui/core';
+
+import {
+ BenzinThemeProvider,
+ Header,
+ Window,
+ ContentSection,
+ SmartList,
+} from './lib';
+
+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';
+import GitHubIcon from '@material-ui/icons/GitHub';
+
+
+const useStyles = makeStyles(theme => ({
+ window: {
+ padding: theme.spacing(4),
+ }
+}));
+
+const headerContents = {
+ home: ,
+ 'getting started': ,
+ explore: ,
+ contribute: ,
+};
+
+const renderItem = ({ index, style }: any) => {
+ return (
+ {index}
+ );
+};
+
+const Icon1 =
+const Icon2 =
+
+const App = () => {
+ const classes = useStyles();
+ const [page, setPage] = useState('home');
+
+ return (
+
+
+
+
+
+ Here is some text about BENZIN library.
+
+ Charge me up!
+
+
+ Learn more
+
+
+
+
+
+
+
+
+ );
+};
+
+
+ReactDOM.render( , document.getElementById('root'));
+
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 9fcfb5d784c38c1c3ddda33184b0d8f1be4db3e0 Mon Sep 17 00:00:00 2001
From: Eug-VS
Date: Mon, 3 Feb 2020 17:40:45 +0300
Subject: feat!: remove icons, simplify lib preview
---
src/assets/icon.png | Bin 10550 -> 0 bytes
src/assets/icon.svg | 108 ++++++++++++++++++++++++++++++++++++++++++++++++++++
src/index.tsx | 32 +++++++---------
3 files changed, 122 insertions(+), 18 deletions(-)
delete mode 100644 src/assets/icon.png
create mode 100644 src/assets/icon.svg
(limited to 'src')
diff --git a/src/assets/icon.png b/src/assets/icon.png
deleted file mode 100644
index 4335637..0000000
Binary files a/src/assets/icon.png and /dev/null differ
diff --git a/src/assets/icon.svg b/src/assets/icon.svg
new file mode 100644
index 0000000..be5b465
--- /dev/null
+++ b/src/assets/icon.svg
@@ -0,0 +1,108 @@
+
+
+
+
+
+
+
+
+
+ image/svg+xml
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/index.tsx b/src/index.tsx
index 19c118e..4e1f35f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -11,12 +11,7 @@ import {
SmartList,
} from './lib';
-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';
-import GitHubIcon from '@material-ui/icons/GitHub';
+import icon from './assets/icon.svg';
const useStyles = makeStyles(theme => ({
@@ -25,11 +20,13 @@ const useStyles = makeStyles(theme => ({
}
}));
+
+const Icon =
+
const headerContents = {
- home: ,
- 'getting started': ,
- explore: ,
- contribute: ,
+ home: null,
+ page: null,
+ 'another page': null,
};
const renderItem = ({ index, style }: any) => {
@@ -38,9 +35,6 @@ const renderItem = ({ index, style }: any) => {
);
};
-const Icon1 =
-const Icon2 =
-
const App = () => {
const classes = useStyles();
const [page, setPage] = useState('home');
@@ -49,7 +43,7 @@ const App = () => {
{
/>
-
- Here is some text about BENZIN library.
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
- Charge me up!
+ secondary
- Learn more
+ primary
--
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')
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')
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')
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')
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')
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')
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')
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')
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/index.tsx | 9 +++++++--
src/lib/Header/Header.tsx | 4 ++--
src/lib/SmartList/SmartList.tsx | 2 +-
src/lib/Window/Window.tsx | 2 +-
src/lib/Window/WindowSurface.tsx | 2 +-
5 files changed, 12 insertions(+), 7 deletions(-)
(limited to 'src')
diff --git a/src/index.tsx b/src/index.tsx
index 4e1f35f..7af6098 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,6 +13,11 @@ import {
import icon from './assets/icon.svg';
+interface RenderPropTypes {
+ index: number;
+ style: React.CSSProperties;
+}
+
const useStyles = makeStyles(theme => ({
window: {
@@ -29,13 +34,13 @@ const headerContents = {
'another page': null,
};
-const renderItem = ({ index, style }: any) => {
+const renderItem: React.FC = ({ index, style}) => {
return (
{index}
);
};
-const App = () => {
+const App: React.FC = () => {
const classes = useStyles();
const [page, setPage] = useState('home');
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 364940a8c9d1c0a49fc58669a50f76727ea138a9 Mon Sep 17 00:00:00 2001
From: Eug-VS
Date: Thu, 6 Feb 2020 20:27:55 +0300
Subject: docs: add logo image
---
src/assets/logo.png | Bin 0 -> 11200 bytes
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 src/assets/logo.png
(limited to 'src')
diff --git a/src/assets/logo.png b/src/assets/logo.png
new file mode 100644
index 0000000..64cd118
Binary files /dev/null and b/src/assets/logo.png differ
--
cgit v1.2.3
From 1dbb0b039932f2b67a63264500a30da234d87eae Mon Sep 17 00:00:00 2001
From: Eugene Sokolov
Date: Thu, 6 Feb 2020 22:05:14 +0300
Subject: docs: improve heading, remove logo.png
---
src/assets/logo.png | Bin 11200 -> 0 bytes
1 file changed, 0 insertions(+), 0 deletions(-)
delete mode 100644 src/assets/logo.png
(limited to 'src')
diff --git a/src/assets/logo.png b/src/assets/logo.png
deleted file mode 100644
index 64cd118..0000000
Binary files a/src/assets/logo.png and /dev/null differ
--
cgit v1.2.3
From f206fb42b6fb8bd7945df5240de2f86cbd9fc1b5 Mon Sep 17 00:00:00 2001
From: Eug-VS
Date: Fri, 7 Feb 2020 03:24:17 +0300
Subject: feat: improve library preview
---
src/index.tsx | 49 +++++++++++++++++++++++++++++++++++++++++--------
1 file changed, 41 insertions(+), 8 deletions(-)
(limited to 'src')
diff --git a/src/index.tsx b/src/index.tsx
index 7af6098..0d05155 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
-import { makeStyles, Button, Typography } from '@material-ui/core';
+import { makeStyles, Button, Link } from '@material-ui/core';
import {
BenzinThemeProvider,
@@ -34,16 +34,36 @@ const headerContents = {
'another page': null,
};
-const renderItem: React.FC = ({ index, style}) => {
- return (
- {index}
- );
-};
const App: React.FC = () => {
const classes = useStyles();
const [page, setPage] = useState('home');
+ const renderItem: React.FC = ({ index, style}) => {
+ return (
+
+
+
+ Fusce commodo. Vestibulum convallis, lorem a tempus semper, dui dui euismod elit, vitae placerat urna tortor vitae lacus. Nullam libero mauris, consequat quis, varius et, dictum id, arcu. Mauris mollis tincidunt felis.
+
+ {(index % 2 === 0)?
+ (
+
+ primary
+
+ )
+ :
+ (
+
+ secondary
+
+ )
+ }
+
+
+ );
+ };
+
return (
{
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo.
secondary
@@ -68,9 +88,22 @@ const App: React.FC = () => {
primary
+
+
+ Fusce suscipit, wisi nec facilisis facilisis, est dui fermentum leo, quis tempor ligula erat quis odio. Nunc porta vulputate tellus. Nunc rutrum turpis sed pede. Sed bibendum. Aliquam posuere.
+
+
+ Link example
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec hendrerit tempor tellus. Donec pretium posuere tellus. Proin quam nisl, tincidunt et, mattis eget, convallis nec, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla posuere. Donec vitae dolor. Nullam tristique diam non turpis. Cras placerat accumsan nulla. Nullam rutrum. Nam vestibulum accumsan nisl. Pellentesque dapibus suscipit ligula.
+
+
-
+
Date: Sat, 8 Feb 2020 15:36:32 +0300
Subject: feat: add Button component
---
src/index.tsx | 11 ++++++-----
src/lib/Button/Button.tsx | 18 ++++++++++++++++++
src/lib/index.ts | 1 +
3 files changed, 25 insertions(+), 5 deletions(-)
create mode 100644 src/lib/Button/Button.tsx
(limited to 'src')
diff --git a/src/index.tsx b/src/index.tsx
index 0d05155..9d32585 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
-import { makeStyles, Button, Link } from '@material-ui/core';
+import { makeStyles, Link } from '@material-ui/core';
import {
BenzinThemeProvider,
@@ -9,6 +9,7 @@ import {
Window,
ContentSection,
SmartList,
+ Button,
} from './lib';
import icon from './assets/icon.svg';
@@ -48,13 +49,13 @@ const App: React.FC = () => {
{(index % 2 === 0)?
(
-
+
primary
)
:
(
-
+
secondary
)
@@ -81,10 +82,10 @@ const App: React.FC = () => {
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dapibus suscipit ligula. Donec posuere augue in quam. Etiam vel tortor sodales tellus ultricies commodo. Suspendisse potenti. Aenean in sem ac leo mollis blandit. Donec neque quam, dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies. Integer placerat tristique nisl. Praesent augue. Fusce commodo.
-
+
secondary
-
+
primary
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