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 --- package-lock.json | 9 ++++ package.json | 3 ++ 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 + tsconfig.json | 26 +++++++++ 9 files changed, 159 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 create mode 100644 tsconfig.json diff --git a/package-lock.json b/package-lock.json index 51f722e..81e67b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1617,6 +1617,15 @@ "csstype": "^2.2.0" } }, + "@types/react-dom": { + "version": "16.9.5", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.5.tgz", + "integrity": "sha512-BX6RQ8s9D+2/gDhxrj8OW+YD4R+8hj7FEM/OJHGNR0KipE1h1mSsf39YeyC81qafkq+N3rU3h3RFbLSwE5VqUg==", + "dev": true, + "requires": { + "@types/react": "*" + } + }, "@types/react-transition-group": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.2.3.tgz", diff --git a/package.json b/package.json index 6fb756f..2072865 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,9 @@ "@babel/cli": "^7.8.3", "@babel/core": "^7.8.3", "@babel/preset-react": "^7.8.3", + "@types/node": "^13.5.0", + "@types/react": "^16.9.19", + "@types/react-dom": "^16.9.5", "eslint": "^6.8.0", "eslint-config-react-app": "^5.1.0", "typescript": "^3.7.5" 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 && -
- {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 && +
+ {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 @@ +/// diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..f51313b --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": [ + "es6", + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react" + }, + "include": [ + "src" + ] +} -- 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 --- .babelrc | 2 ++ package-lock.json | 28 +++++++++++++++++++--------- package.json | 9 +++------ src/lib/components/Window/types.d.ts | 11 ----------- src/lib/components/Window/types.ts | 11 +++++++++++ ts-compile-config.json | 28 ++++++++++++++++++++++++++++ tsconfig.json | 1 - 7 files changed, 63 insertions(+), 27 deletions(-) delete mode 100644 src/lib/components/Window/types.d.ts create mode 100644 src/lib/components/Window/types.ts create mode 100644 ts-compile-config.json diff --git a/.babelrc b/.babelrc index 5fd231d..72c52d3 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,7 @@ { "presets": [ + ["@babel/preset-typescript"], ["react-app", { "absoluteRuntime": false }] ] } + diff --git a/package-lock.json b/package-lock.json index 81e67b5..5bac2cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-benzin", - "version": "1.0.0", + "version": "1.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -989,12 +989,13 @@ } }, "@babel/preset-typescript": { - "version": "7.7.4", - "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.7.4.tgz", - "integrity": "sha512-rqrjxfdiHPsnuPur0jKrIIGQCIgoTWMTjlbWE69G4QJ6TIOVnnRnIJhUxNTL/VwDmEAVX08Tq3B1nirer5341w==", + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.8.3.tgz", + "integrity": "sha512-qee5LgPGui9zQ0jR1TeU5/fP9L+ovoArklEqY12ek8P/wV5ZeM/VYSQYwICeoT6FfpJTekG9Ilay5PhwsOpMHA==", + "dev": true, "requires": { - "@babel/helper-plugin-utils": "^7.0.0", - "@babel/plugin-transform-typescript": "^7.7.4" + "@babel/helper-plugin-utils": "^7.8.3", + "@babel/plugin-transform-typescript": "^7.8.3" } }, "@babel/runtime": { @@ -2595,6 +2596,15 @@ "@babel/plugin-transform-react-jsx-source": "^7.7.4" } }, + "@babel/preset-typescript": { + "version": "7.7.4", + "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.7.4.tgz", + "integrity": "sha512-rqrjxfdiHPsnuPur0jKrIIGQCIgoTWMTjlbWE69G4QJ6TIOVnnRnIJhUxNTL/VwDmEAVX08Tq3B1nirer5341w==", + "requires": { + "@babel/helper-plugin-utils": "^7.0.0", + "@babel/plugin-transform-typescript": "^7.7.4" + } + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", @@ -8476,9 +8486,9 @@ "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==" }, "levenary": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/levenary/-/levenary-1.1.0.tgz", - "integrity": "sha512-VHcwhO0UTpUW7rLPN2/OiWJdgA1e9BqEDALhrgCe/F+uUJnep6CoUsTzMeP8Rh0NGr9uKquXxqe7lwLZo509nQ==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/levenary/-/levenary-1.1.1.tgz", + "integrity": "sha512-mkAdOIt79FD6irqjYSs4rdbnlT5vRonMEvBVPVb3XmevfS8kgRXwfes0dhPdEtzTWD/1eNE/Bm/G1iRt6DcnQQ==", "requires": { "leven": "^3.1.0" } diff --git a/package.json b/package.json index 2072865..e663a8b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-benzin", - "version": "1.0.1", + "version": "2.0.0", "description": "A powerful React Material components library.", "main": "dist/index.js", "module": "dist/index.js", @@ -11,8 +11,8 @@ "scripts": { "start": "react-scripts start", "test": "eslint .", - "build": "rm -rf dist && NODE_ENV=production babel src/lib --out-dir dist --copy-files", - "deploy": "npm test && npm run build && npm publish --public" + "build": "rm -rf dist && tsc --project ts-compile-config.json", + "deploy": "eslint src/lib && npm run build && npm publish --public" }, "license": "MIT", "dependencies": { @@ -26,9 +26,6 @@ "typeface-roboto": "0.0.75" }, "devDependencies": { - "@babel/cli": "^7.8.3", - "@babel/core": "^7.8.3", - "@babel/preset-react": "^7.8.3", "@types/node": "^13.5.0", "@types/react": "^16.9.19", "@types/react-dom": "^16.9.5", 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; +} + diff --git a/ts-compile-config.json b/ts-compile-config.json new file mode 100644 index 0000000..8f0256b --- /dev/null +++ b/ts-compile-config.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "outDir": "dist", + "target": "es5", + "lib": [ + "es6", + "dom", + "dom.iterable", + "esnext" + ], + "allowJs": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "react", + "skipLibCheck": true, + "declaration": true, + "listEmittedFiles": true + }, + "include": [ + "src/lib" + ] +} diff --git a/tsconfig.json b/tsconfig.json index f51313b..f2850b7 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,7 +2,6 @@ "compilerOptions": { "target": "es5", "lib": [ - "es6", "dom", "dom.iterable", "esnext" -- cgit v1.2.3 From f223bc71ea10d16fed68016ba708cd5f24fc6110 Mon Sep 17 00:00:00 2001 From: Eug-VS Date: Mon, 3 Feb 2020 14:32:31 +0300 Subject: feat: delete unused .babelrc --- .babelrc | 7 ------- 1 file changed, 7 deletions(-) delete mode 100644 .babelrc diff --git a/.babelrc b/.babelrc deleted file mode 100644 index 72c52d3..0000000 --- a/.babelrc +++ /dev/null @@ -1,7 +0,0 @@ -{ - "presets": [ - ["@babel/preset-typescript"], - ["react-app", { "absoluteRuntime": false }] - ] -} - -- 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(-) 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 (