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"]
 }