Adding react template

config/config.go

@@ -1,10 +1,11 @@
 package config
 
 import (
-	"github.com/k0kubun/pp"
-	"gopkg.in/yaml.v2"
 	"io/ioutil"
 	"log"
+
+	"github.com/k0kubun/pp"
+	"gopkg.in/yaml.v2"
 )
 
 type Maintainers struct {
@@ -54,6 +55,7 @@ type Commit0Config struct {
 	Maintainers  []Maintainers `yaml:"maintainers"`
 	Network      Network       `yaml:"network"`
 	Services     []Service     `yaml:"services"`
+	React        React         `yaml:react`
 }
 
 func LoadConfig(filePath string) *Commit0Config {

config/react.go

@@ -0,0 +1,24 @@
+package config
+
+type reactApp struct {
+	Name string
+}
+
+type reactHeader struct {
+	Enabled bool
+}
+
+type reactSidenav struct {
+	Enabled bool
+}
+
+type reactAccount struct {
+	Enabled  bool
+	Required bool
+}
+type React struct {
+	App     reactApp
+	Account reactAccount
+	Header  reactHeader
+	Sidenav reactSidenav
+}

templates/commit0/commit0.tmpl

@@ -1,10 +1,10 @@
 organization: mycompany
 name: {{.}}
-description: 
+description:
 git-repo: github.com/yourrepo
-docker-repo: 
-maintainers: 
-# - name: bob 
+docker-repo:
+maintainers:
+# - name: bob
 #   email: bob@test.com
 
 network:
@@ -18,5 +18,15 @@ network:
     enabled: true
     port: 8090
 
+react:
+  app:
+    name: {{.}}
+  header:
+    enabled: true
+  account:
+    enabled: true
+    required: false
+  sidenav:
+    enabled: true
 
 services:

templates/react/.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+/package-lock.json
 
 # testing
 /coverage

templates/react/jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  }
+}

templates/react/package.json

@@ -1,11 +1,17 @@
 {
-  "name": "{{ .Name }}",
+  "name": "commit0",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.5.1",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
-    "react-scripts": "3.2.0"
+    "react-redux": "^7.1.1",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.2.0",
+    "redux": "^4.0.4"
   },
   "scripts": {
     "start": "react-scripts start",

templates/react/package.json.tmpl

@@ -0,0 +1,37 @@
+{
+  "name": "{{ .React.App.Name }}",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@material-ui/core": "^4.5.1",
+    "@material-ui/icons": "^4.5.1",
+    "react": "^16.10.2",
+    "react-dom": "^16.10.2",
+    "react-redux": "^7.1.1",
+    "react-router": "^5.1.2",
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.2.0",
+    "redux": "^4.0.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

templates/react/src/App.js

@@ -1,26 +1,23 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import Layout from 'components/layout';
 
-function App() {
+export default function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Layout>
+      <Router>
+        <Switch>
+          <Route path="/a">
+            <span>a</span>
+          </Route>
+          <Route path="/b">
+            <span>b</span>
+          </Route>
+          <Route path="/">
+            <span>c</span>
+          </Route>
+        </Switch>
+      </Router>
+    </Layout>
   );
 }
-
-export default App;

templates/react/src/components/layout/header/account.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import IconButton from '@material-ui/core/IconButton';
+import AccountCircle from '@material-ui/icons/AccountCircle';
+import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@material-ui/core/Menu';
+
+export default function MenuAppBar() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleMenu = event => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const anchorOriginProps = {
+    vertical: 'top',
+    horizontal: 'right',
+  };
+  const transformOriginProps = {
+    vertical: 'top',
+    horizontal: 'right',
+  };
+  return (
+    <div>
+      <IconButton
+        aria-label="account of current user"
+        aria-controls="menu-appbar"
+        aria-haspopup="true"
+        onClick={handleMenu}
+        color="inherit"
+      >
+        <AccountCircle />
+      </IconButton>
+      <Menu
+        id="menu-appbar"
+        anchorEl={anchorEl}
+        anchorOrigin={anchorOriginProps}
+        keepMounted
+        transformOrigin={transformOriginProps}
+        open={open}
+        onClose={handleClose}
+      >
+        <MenuItem onClick={handleClose}>Profile</MenuItem>
+        <MenuItem onClick={handleClose}>My account</MenuItem>
+      </Menu>
+    </div>
+  );
+}

templates/react/src/components/layout/header/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+import config from 'config';
+import Sidenav from 'components/layout/header/sidenav';
+import Account from 'components/layout/header/account';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+export default function MenuAppBar() {
+  const classes = useStyles();
+  return (
+    <div className={classes.root}>
+      <AppBar position="static">
+        <Toolbar>
+          { config && config.sidenav && config.sidenav.enabled && <Sidenav />}
+          <Typography variant="h6" className={classes.title}>
+            { config && config.app && config.app.name }
+          </Typography>
+          { config && config.account && config.account.enabled && <Account />}
+        </Toolbar>
+      </AppBar>
+    </div>
+  );
+}

templates/react/src/components/layout/header/sidenav.js

@@ -0,0 +1,26 @@
+import React, { Fragment } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import MenuIcon from '@material-ui/icons/Menu';
+
+const useStyles = makeStyles(theme => ({
+  menuButton: {
+    marginRight: theme.spacing(2),
+  },
+}));
+
+export default function Sidenav() {
+  const classes = useStyles();
+  return (
+    <Fragment>
+      <IconButton
+        edge="start"
+        className={classes.menuButton}
+        color="inherit"
+        aria-label="open drawer"
+      >
+        <MenuIcon />
+      </IconButton>
+    </Fragment>
+  );
+}

templates/react/src/components/layout/index.js

@@ -0,0 +1,15 @@
+import React, { Fragment } from 'react';
+import Container from '@material-ui/core/Container';
+import Header from 'components/layout/header';
+import config from 'config';
+
+export default function App({children}) {
+  return (
+    <Fragment>
+      { config && config.header && config.header.enabled && <Header />}
+      <Container maxWidth={false}>
+        {children}
+      </Container>
+    </Fragment>
+  );
+}

templates/react/src/config/index.js

@@ -0,0 +1,15 @@
+export default {
+  app: {
+    name: 'Commit0',
+  },
+  account: {
+    enabled: true,
+    required: true,
+  },
+  header: {
+    enabled: true,
+  },
+  sidenav: {
+    enabled: true,
+  }
+}

templates/react/src/config/index.js.tmpl

@@ -0,0 +1,15 @@
+export default {
+  app: {
+    name: '{{ .React.App.Name }}',
+  },
+  account: {
+    enabled: {{ .React.Account.Enabled }},
+    required: {{ .React.Account.Required }},
+  },
+  header: {
+    enabled: {{ .React.Header.Enabled }},
+  },
+  sidenav: {
+    enabled: {{ .React.Sidenav.Enabled }},
+  }
+}