feat: add typescript compiler for build script (#53)

Use tsc instead of babel for generating the package for npm

package.json

@@ -27,15 +27,17 @@
     "typescript": "3.7.2"
   },
   "scripts": {
-    "prettier:check": "prettier --check 'src/**/*.{ts,tsx}'",
+    "build": "build-storybook -o build && npm run build:lib",
+    "build:lib": "tsc --jsx react --skipLibCheck",
+    "build:watch": "tsc -w --jsx react --skipLibCheck",
+    "build:babel": "BABEL_ENV=production babel src -d dist2 --extensions .ts,.tsx",
+    "build-storybook": "build-storybook -s public",
+    "eject": "react-scripts eject",
     "eslint": "eslint './src/**/*' --ext .ts,.tsx --fix",
+    "prettier:check": "prettier --check 'src/**/*.{ts,tsx}'",
     "start": "react-scripts start",
-    "build": "build-storybook -o build && npm run build-package",
-    "build-package": "BABEL_ENV=production babel src -d dist --extensions .ts,.tsx",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
     "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
+    "test": "react-scripts test"
   },
   "eslintConfig": {
     "extends": "react-app"

src/components/Icon.tsx

@@ -1,11 +1,7 @@
-import React from "react";
+import * as React from "react";
 import styled from "styled-components";
 import { icons } from "./shared/icons";
 
-interface MyType {
-  [key: string]: string;
-}
-
 interface IconProps {
   icon: string;
   block?: boolean;

src/components/Input.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Input } from "./Input";
 
 export default {

src/components/Input.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { StylesProvider, useTheme } from "@material-ui/core/styles";
 import { InputStyled } from "./Input.styles";
 

src/components/Post.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { Post } from "./Post";
 
 export default {

src/components/Post.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { StylesProvider, useTheme } from "@material-ui/core/styles";
 import CardContent from "@material-ui/core/CardContent";
 import Grid from "@material-ui/core/Grid";

src/components/RoundedButton.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { action } from "@storybook/addon-actions";
 import { RoundedButton } from "./RoundedButton";
 

src/components/RoundedButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { ColorProperty } from "csstype";
 
 export interface RoundedButtonProps {

src/components/SignInButton.stories.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import { SignInButton } from "./SignInButton";
 
 export default {

src/components/SignInButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import * as React from "react";
 import Grid from "@material-ui/core/Grid";
 import { StylesProvider } from "@material-ui/core/styles";
 import { TextGridItem, BaseButton } from "./SignIn.styles";

tsconfig.json

@@ -1,20 +1,29 @@
 {
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
     "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "module": "esnext",
+    "outDir": "dist",
+    "module": "commonjs",
+    "target": "es5",
+    "lib": ["es5", "es6", "es7", "es2017", "dom"],
+    "sourceMap": true,
+    "allowJs": false,
+    "jsx": "react",
     "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react"
+    "rootDirs": ["src", "stories"],
+    "baseUrl": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "declaration": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true
   },
-  "include": ["src"],
+  "include": ["src/**/*"],
+  "exclude": ["node_modules"],
   "files": ["custom.d.ts"]
 }