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