Support boilerplate for TypeScript projects

I would like to support boilerplate code for ReasonML, TypeScript,
ClojureScript, and Elm projects before I specialize in any of these
frameworks. All of my projects should use TailwindCSS.

All of this boilerplate should offer:
- Same command to start developing
- Same API to build and deploy
- TailwindCSS support
- Basic boilerplate for components, state, and routes

This TypeScript boilerplate is not complete, but I would like to commit the
progress in case I do not return to this for awhile.

boilerplate/README.md

@@ -0,0 +1,21 @@
+# Boilerplate
+
+Storing some boilerplate code to help me reduce the time it takes me to develop
+and deploy applications.
+
+## Usage
+
+Let's say that you would like to create a game for
+`sandbox.wpcarro.dev/game`. We will create a new TypeScript project with the
+following:
+
+```shell
+$ cp ~/briefcase/boilerplate/typescript ~/briefcase/website/sandbox/game
+```
+
+This initializes the project. To start developing, run:
+
+```shell
+$ nix-shell
+$ yarn run dev
+```

boilerplate/typescript/.gitignore

@@ -0,0 +1,2 @@
+.cache
+dist

boilerplate/typescript/README.md

@@ -0,0 +1,26 @@
+# Frontend Boilerplate
+
+While many times I prefer using alt-languages like ReasonML, ClojureScript, or
+Elm, sometimes I prefer to write an application using TypeScript. This directory
+contains the necessary starter code to create these applications.
+
+- React: Maps application state to UI
+- React-Router: Stateful routing for SPAs
+- Redux: Application state management
+- TypeScript: Type-safety
+- TailwindCSS: Styling library using utility classes
+- Prettier: Source code formatting
+- Jest: Test runner
+
+## Developing
+
+```shell
+$ nix-shell
+$ yarn run dev
+```
+
+## Building
+
+```shell
+$ nix-build
+```

boilerplate/typescript/default.nix

@@ -0,0 +1,19 @@
+let
+  pkgs = import <nixpkgs> {};
+in pkgs.stdenv.mkDerivation {
+  name = "ideal-website";
+  srcs = ./.;
+  buildInputs = with pkgs; [
+    nodejs
+    # Exposes lscpu for parcel.js
+    utillinux
+  ];
+  # parcel.js needs number of CPUs
+  PARCEL_WORKERS = "1";
+  buildPhase = ''
+    npx parcel build index.html
+  '';
+  installPhase = ''
+    mv dist $out
+  '';
+}

boilerplate/typescript/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "tailwindcss",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "dev": "npx parcel src/index.html & npx tsc --watch --noEmit"
+  },
+  "devDependencies": {
+    "parcel-bundler": "^1.12.4",
+    "tailwindcss": "^1.2.0",
+    "typescript": "^3.8.3"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.2.5",
+    "@types/react-dom": "^16.9.5",
+    "@types/react-redux": "^7.1.7",
+    "@types/react-router-dom": "^5.1.3",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.1.2"
+  }
+}

boilerplate/typescript/postcss.config.js

@@ -0,0 +1,7 @@
+const tailwindcss = require('tailwindcss')
+
+module.exports = {
+  plugins: [
+    tailwindcss('./tailwind.config.js')
+  ]
+}

boilerplate/typescript/shell.nix

@@ -0,0 +1,8 @@
+let
+  pkgs = import <nixpkgs> {};
+in pkgs.mkShell {
+  buildInputs = with pkgs; [
+    nodejs
+    yarn
+  ];
+}

boilerplate/typescript/src/App.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect } from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { actions, useTypedSelector } from "./store";
+import { Link } from "react-router-dom";
+
+const App: React.FC = () => {
+  const dispatch = useDispatch();
+  const { isLoading } = useTypedSelector(state => ({
+    isLoading: state.isLoading,
+  }));
+
+  return (
+    <Router>
+      <nav className="bg-blue-400">
+        <ul className="container mx-auto justify-between flex py-6 text-white">
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/about">About</Link>
+          </li>
+          <li>
+            <Link to="/contact">Contact</Link>
+          </li>
+        </ul>
+      </nav>
+      <Switch>
+        <Route exact path="/">
+          <div className="container mx-auto">
+            <h1>Welcome to the home page. Loading: {isLoading ? "true" : "false"}</h1>
+            <button
+              className="bg-gray-300 py-4 px-6"
+              onClick={() => dispatch(actions.toggleIsLoading())}>isLoading</button>
+          </div>
+        </Route>
+        <Route exact path="/about">
+          <div className="container mx-auto">
+            <h1>Here is the about page.</h1>
+          </div>
+        </Route>
+        <Route exact path="/contact">
+          <div className="container mx-auto">
+            <h1>Here is the contact page.</h1>
+          </div>
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+export default App;

boilerplate/typescript/src/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

boilerplate/typescript/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="./index.css">
+  </head>
+  <body>
+    <div id="mount"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>

boilerplate/typescript/src/index.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import { Provider } from "react-redux";
+import store from "./store";
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App />
+  </Provider>,
+  document.getElementById("mount")
+);

boilerplate/typescript/src/math.ts

@@ -0,0 +1,3 @@
+export const add = (x: number, y: number): number => {
+  return x + y;
+}

boilerplate/typescript/src/store.ts

@@ -0,0 +1,26 @@
+import { createSlice, configureStore, PayloadAction } from "@reduxjs/toolkit";
+import { useSelector, TypedUseSelectorHook } from "react-redux";
+
+export interface State {
+  isLoading: boolean;
+}
+
+const initialState: State = {
+  isLoading: true,
+};
+
+export const { actions, reducer } = createSlice({
+  name: "application",
+  initialState,
+  reducers: {
+    toggleIsLoading: state => ({ ...state, isLoading: !state.isLoading }),
+  }
+});
+
+/**
+ * Defining and consuming this allows us to avoid annotating State in all of our
+ * selectors.
+ */
+export const useTypedSelector: TypedUseSelectorHook<State> = useSelector;
+
+export default configureStore({ reducer });

boilerplate/typescript/tailwind.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}

boilerplate/typescript/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": [
+    "src/**/*"
+  ]
+}