feat: replace to typescript (#258)

.env

@@ -0,0 +1 @@
+SASS_PATH=node_modules

.gitignore

@@ -1,3 +1,3 @@
-/dist/
+/build/
 /node_modules/
 /yarn-error.log

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Yamagishi Kazutoshi <[email protected]>
+Copyright (c) 2018-2019 Yamagishi Kazutoshi <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

netlify.toml

@@ -1,8 +1,8 @@
 [build]
   base    = "./"
   command = "NODE_ENV=production yarn build"
-  publish = "./dist/"
+  publish = "./build/"
 
   [build.environment]
     NODE_ENV     = "development"
-    NODE_VERSION = "8.11.3"
+    NODE_VERSION = "10.15.3"

package.json

@@ -1,70 +1,64 @@
 {
   "author": "Yamagishi Kazutoshi <[email protected]>",
+  "browserslist": [
+    "defaults"
+  ],
   "dependencies": {
+    "@material/elevation": "^1.0.0",
+    "@material/react-button": "^0.11.0",
+    "@material/react-chips": "^0.11.0",
+    "@material/react-layout-grid": "^0.11.0",
+    "@material/react-material-icon": "^0.11.0",
+    "@material/react-switch": "^0.11.0",
+    "@material/react-text-field": "^0.11.0",
+    "@material/react-top-app-bar": "^0.11.0",
+    "@material/react-typography": "^0.11.0",
     "classnames": "^2.2.6",
-    "immutable": "^4.0.0-rc.12",
+    "formik": "^1.5.1",
     "localforage": "^1.7.3",
     "prismjs": "^1.15.0",
-    "prop-types": "^15.7.2",
-    "react": "^16.8.4",
+    "react": "^16.8.5",
     "react-color": "^2.17.0",
-    "react-dom": "^16.8.4",
-    "react-helmet": "^5.2.0",
-    "react-redux": "^6.0.1",
-    "react-router-dom": "^4.3.1",
-    "react-toggle": "^4.0.2",
-    "redux": "^4.0.1",
-    "redux-devtools-extension": "^2.13.8",
-    "redux-form": "^8.1.0",
-    "redux-thunk": "^2.3.0",
-    "styled-components": "^4.1.3"
+    "react-dom": "^16.8.5",
+    "react-helmet": "^6.0.0-beta",
+    "react-router-dom": "^5.0.0"
   },
   "description": "Chat Styles is a generator of style sheet for the YouTube Live Chat.",
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/plugin-proposal-class-properties": "^7.3.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.2.0",
-    "@babel/plugin-transform-react-inline-elements": "^7.2.0",
-    "@babel/preset-flow": "^7.0.0",
-    "@babel/preset-react": "^7.0.0",
-    "babel-core": "^7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.5.0",
-    "babel-loader": "^8.0.5",
-    "copy-webpack-plugin": "^5.0.1",
-    "css-loader": "^2.1.1",
-    "eslint": "^5.15.1",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.12.4",
+    "@types/classnames": "^2.2.7",
+    "@types/jest": "^24.0.11",
+    "@types/lodash": "^4.14.123",
+    "@types/prismjs": "^1.9.1",
+    "@types/react": "^16.8.8",
+    "@types/react-color": "^2.17.0",
+    "@types/react-dom": "^16.8.3",
+    "@types/react-helmet": "^5.0.8",
+    "@types/react-router-dom": "^4.3.1",
     "extract-loader": "^3.1.0",
-    "file-loader": "^3.0.1",
-    "flow-bin": "~0.91.0",
     "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^24.5.0",
-    "raw-loader": "^1.0.0",
-    "style-loader": "^0.23.1",
-    "webpack": "^4.29.6",
-    "webpack-cli": "^3.2.3",
-    "webpack-serve": "^2.0.3",
-    "webpack-subresource-integrity": "^1.3.2",
-    "workbox-webpack-plugin": "^4.1.0"
+    "node-sass": "^4.11.0",
+    "prettier": "^1.16.4",
+    "react-scripts": "^2.1.8",
+    "typescript": "^3.3.4000"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app"
+    ]
   },
   "homepage": "https://chat-styles.app/",
   "license": "MIT",
   "name": "@ykzts/chat-styles",
+  "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/ykzts/chat-styles.git"
   },
   "scripts": {
-    "build": "webpack --devtool source-map",
-    "dev": "webpack-serve",
-    "check": "eslint --ext .js --ext .jsx . && flow check",
-    "test": "${npm_execpath} run check && jest"
+    "build": "react-scripts build",
+    "dev": "react-scripts start",
+    "format": "prettier --ignore-path .gitignore --write \"**/*.{html,js,json,md,scss,ts,tsx}\"",
+    "test": "react-scripts test"
   },
-  "version": "1.0.0"
+  "version": "2.0.0"
 }

prettier.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  semi: false,
+  singleQuote: true
+}

public/_headers

@@ -1,5 +1,5 @@
 /*
-  Content-Security-Policy: connect-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; default-src 'none'; font-src https://fonts.gstatic.com; frame-src 'self'; img-src 'self' data:; manifest-src 'self'; sandbox allow-same-origin allow-scripts; script-src 'self'; style-src 'unsafe-inline' https://fonts.googleapis.com; worker-src 'self'
+  Content-Security-Policy: connect-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; default-src 'none'; font-src https://fonts.gstatic.com; frame-src 'self'; img-src 'self' data:; manifest-src 'self'; sandbox allow-same-origin allow-scripts; script-src 'self' 'unsafe-inline' https://storage.googleapis.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; worker-src 'self'
   Referrer-Policy: same-origin
   Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
 
@@ -15,7 +15,7 @@
 
 /preview.*.html
   Cache-Control: immutable, max-age=31536000, public
-  Content-Security-Policy: default-src 'none'; font-src https://fonts.gstatic.com; img-src 'self' data:; style-src 'unsafe-inline' data: https://fonts.googleapis.com
+  Content-Security-Policy: default-src 'none'; font-src https://fonts.gstatic.com; img-src 'self' data:; script-src 'unsafe-inline' https://polyfill.io; style-src 'unsafe-inline' blob: https://fonts.googleapis.com
 
 /*.js
   Cache-Control: immutable, max-age=31536000, public

public/_redirects

@@ -0,0 +1 @@
+/* / 200

public/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="ja">
+  <head>
+    <meta charset="UTF-8" />
+    <meta content="width=device-width" name="viewport" />
+    <meta content="#ffc107" name="theme-color" />
+    <link href="%PUBLIC_URL%/manifest.json" rel="manifest" />
+    <link href="%PUBLIC_URL%/favicon.ico" rel="icon" />
+    <title>Chat Styles</title>
+    <meta content="Chat StylesはYouTube Liveのチャットの見た目を変更するCSSを生成するためのツールです。OBS StudioのブラウザソースのカスタムCSSとして使われることを前提としています。" name="description" />
+    <meta content="%PUBLIC_URL%/favicon-192x192.png" property="og:image" />
+    <meta content="192" property="og:image:height" />
+    <meta content="192" property="og:image:width" />
+    <meta content="" property="og:title" />
+    <meta content="website" property="og:type" />
+    <meta content="summary" name="twitter:card" />
+    <meta content="Chat StylesはYouTube Liveのチャットの見た目を変更するCSSを生成するためのツールです。OBS StudioのブラウザソースのカスタムCSSとして使われることを前提としています。" name="twitter:description" />
+    <meta content="%PUBLIC_URL%/favicon-192x192.png" name="twitter:image" />
+    <meta content="Chat Styles" name="twitter:title" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

src/App.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent, ReactElement, Suspense, lazy } from 'react'
+import { Route, Switch } from 'react-router-dom'
+import Layout from './components/templates/Layout'
+
+const App: FunctionComponent = (): ReactElement => (
+  <Layout title="Chat Styles">
+    <Suspense fallback={null}>
+      <Switch>
+        <Route
+          component={lazy(() => import('./pages/Generator'))}
+          exact
+          path="/"
+        />
+        <Route component={lazy(() => import('./pages/NoMatch'))} />
+      </Switch>
+    </Suspense>
+  </Layout>
+)
+
+export default App