feat!: install Typescript, migrate Window to .tsx

4 files changed, 38 insertions, 8 deletions

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" />