mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Support boilerplate for TypeScript projects

Browse source 
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.
This commit is contained in:
William Carroll 2020-03-23 22:12:18 +00:00
parent 1cc1ce5ccf
commit 9fdf4d00fa
16 changed files with 5906 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

52
boilerplate/typescript/src/App.tsx Normal file
View file

@ -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;

3
boilerplate/typescript/src/index.css Normal file
View file

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

11
boilerplate/typescript/src/index.html Normal file
View file

@ -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>

12
boilerplate/typescript/src/index.tsx Normal file
View file

@ -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")
);

3
boilerplate/typescript/src/math.ts Normal file
View file

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

26
boilerplate/typescript/src/store.ts Normal file
View file

@ -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 });