Use typescript

Author: Rigellute

www/.eslintrc

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  plugins: ["@typescript-eslint"],
+  extends: [
+    "prettier/@typescript-eslint",
+    "react-app",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+  ],
+  rules: {
+    "@typescript-eslint/explicit-function-return-type": "off",
+  },
+};

www/.eslintrc.js

@@ -18,11 +18,11 @@
     "react-helmet": "6.0.0"
   },
   "scripts": {
-    "analyze:lint": "eslint --ext .jsx --ext .js src",
-    "analyze:prettier": "prettier --list-different \"src/**/*.{css,js,jsx,json,md}\"",
+    "analyze:lint": "eslint src --ext .ts,.tsx",
+    "analyze:prettier": "prettier --list-different \"src/**/*.{css,js,jsx,ts,tsx,json,md}\"",
     "analyze": "npm run analyze:lint && npm run analyze:prettier",
     "fix:lint": "eslint --ext .jsx --ext .js src --fix",
-    "fix:prettier": "prettier --write \"src/**/*.{css,js,jsx,json,md}\"",
+    "fix:prettier": "prettier --write \"src/**/*.{css,js,jsx,ts,tsx,json,md}\"",
     "fix": "npm run fix:lint && npm run fix:prettier",
     "build": "gatsby build",
     "build-gh-pages": "gatsby build --prefix-paths",
@@ -31,20 +31,27 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "yarn type-check -- --watch",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
   },
   "devDependencies": {
     "@tailwindcss/custom-forms": "0.2.1",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
     "autoprefixer": "9.7.6",
     "babel-eslint": "10.1.0",
     "cssnano": "4.1.10",
-    "eslint": "6.8.0",
+    "eslint": "^7.0.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-loader": "3.0.4",
     "eslint-plugin-import": "2.20.2",
+    "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "7.19.0",
     "gatsby-plugin-eslint": "2.0.8",
     "prettier": "2.0.5",
-    "tailwindcss": "1.4.6"
+    "tailwindcss": "1.4.6",
+    "typescript": "^3.9.2"
   },
   "repository": {
     "type": "git",

www/package.json

@@ -19,6 +19,7 @@ function Header() {
         <Link to="/">
           <h1 className="flex items-center no-underline text-blue-600">
             <img
+              alt="icon"
               className="w-16 h-16 mr-2 "
               src={require("../images/code-bar-icon.png")}
             />

www/src/components/header.js renamed to www/src/components/header.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+
+export const Table = ({
+  headers,
+  items,
+}: {
+  headers: string[];
+  items: string[];
+}) => (
+  <div className="flex flex-col">
+    <div className="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
+      <div className="inline-block min-w-full overflow-hidden align-middle border-b border-gray-200 shadow sm:rounded-lg">
+        <table className="min-w-full">
+          <thead>
+            <tr>
+              {headers.map((header) => (
+                <th
+                  key={header}
+                  className="px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-500 uppercase border-b border-gray-200 bg-gray-50 leading-4"
+                >
+                  {header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="bg-white">
+            <tr>
+              {items.map((item) => (
+                <td
+                  key={item}
+                  className="px-6 py-4 text-sm font-medium text-gray-900 whitespace-no-wrap border-b border-gray-200 leading-5"
+                >
+                  {item}
+                </td>
+              ))}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+);

www/src/components/layout.js renamed to www/src/components/layout.tsx

@@ -1,15 +1,16 @@
 import React from "react";
+import { BarChart } from "react-chartkick";
+import "chart.js";
+import { colors } from "tailwindcss/defaultTheme";
 
+import { Table } from "../components/table";
 import Layout from "../components/layout";
 import SEO from "../components/seo";
 import lastUpdateAt from "../../data/last_updated_at.json";
 import countedStats from "../../data/counted_stats.json";
 import returningMembers from "../../data/returning_members.json";
 import studentCoachConversion from "../../data/student_to_coach_conversion.json";
 import attendedPerYear from "../../data/attended_per_year.json";
-import { BarChart } from "react-chartkick";
-import "chart.js";
-import { colors } from "tailwindcss/defaultTheme";
 
 const data = {
   ...countedStats,
@@ -82,6 +83,7 @@ function IndexPage() {
           stacked
           colors={[colors.blue["500"], colors.pink["600"]]}
         />
+        <Table headers={["", "Attendances", "Growth"]} />
       </section>
     </Layout>
   );

www/src/components/seo.js renamed to www/src/components/seo.tsx

@@ -1,7 +1,7 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
 // See https://tailwindcss.com/docs/configuration for details
 module.exports = {
-  purge: ["./src/**/*.js"],
+  purge: ["./src/**/*.js", "./src/**/*.tsx", "./src/**/*.ts"],
   theme: {
     extend: {
       fontFamily: {