diff options
-rw-r--r-- | package-lock.json | 9 | ||||
-rw-r--r-- | package.json | 3 | ||||
-rw-r--r-- | src/lib/components/Window/Window.tsx (renamed from src/lib/components/Window/Window.js) | 20 | ||||
-rw-r--r-- | src/lib/components/Window/WindowSurface.tsx (renamed from src/lib/components/Window/WindowSurface/WindowSurface.js) | 14 | ||||
-rw-r--r-- | src/lib/components/Window/types.d.ts | 11 | ||||
-rw-r--r-- | src/react-app-env.d.ts | 1 | ||||
-rw-r--r-- | tsconfig.json | 26 |
7 files changed, 76 insertions, 8 deletions
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.tsx index 027213f..4821cb3 100644 --- a/src/lib/components/Window/Window.js +++ b/src/lib/components/Window/Window.tsx @@ -2,10 +2,18 @@ import React from 'react'; import { Typography, Divider, makeStyles } from '@material-ui/core'; -import WindowSurface from './WindowSurface/WindowSurface'; +import WindowSurface from './WindowSurface'; +import { SurfaceSize, SurfacePosition } from './types'; -const useStyles = makeStyles(theme => ({ +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, @@ -13,14 +21,15 @@ const useStyles = makeStyles(theme => ({ })); -const Window = ({ type, name, children }) => { +const Window = (props: PropTypes) => { const classes = useStyles(); + const { type, name, children } = props; - const size = { + const size: SurfaceSize = { height: '85vh', }; - const position = { + const position: SurfacePosition = { bottom: '3vh', }; @@ -51,5 +60,4 @@ const Window = ({ type, name, children }) => { ); }; - export default Window; diff --git a/src/lib/components/Window/WindowSurface/WindowSurface.js b/src/lib/components/Window/WindowSurface.tsx index 7859bf6..aaaa984 100644 --- a/src/lib/components/Window/WindowSurface/WindowSurface.js +++ b/src/lib/components/Window/WindowSurface.tsx @@ -2,8 +2,17 @@ import React from 'react'; import { Paper, makeStyles } from '@material-ui/core'; +import { SurfaceSize, SurfacePosition } from './types'; -const useStyles = makeStyles(theme => ({ + +interface PropTypes { + size: SurfaceSize; + position: SurfacePosition; + children?: any; +} + + +const useStyles = makeStyles((theme: any) => ({ surface: { position: 'absolute', display: 'flex', @@ -18,8 +27,9 @@ const useStyles = makeStyles(theme => ({ })); -const WindowSurface = ({ size, position, children }) => { +const WindowSurface = (props: PropTypes) => { const classes = useStyles(); + const { size, position, children } = props; return ( <Paper 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 @@ +/// <reference types="react-scripts" /> 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" + ] +} |