initial setup

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+docker
+.git
+Dockerfile
+.dockerignore
+.gitignore
+README.md

.env.example

@@ -0,0 +1 @@
+ENV=

.eslintrc.json

@@ -0,0 +1,54 @@
+{
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+  ],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx"]
+    }
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint"],
+  "rules": {
+    "react/jsx-uses-react": "off",
+    "react/react-in-jsx-scope": "off",
+    "sort-imports": [
+      0,
+      {
+        "ignoreCase": true,
+        "allowSeparatedGroups": true,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": ["warn"],
+    "@typescript-eslint/no-inferrable-types": [0],
+    "indent": [
+      "error",
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "linebreak-style": ["warn", "unix"],
+    "quotes": ["error", "double", { "avoidEscape": true }],
+    "semi": ["error", "always"]
+  }
+}

.gitignore

@@ -0,0 +1,13 @@
+# dependencies
+/node_modules
+
+# production
+/build
+
+# misc
+.DS_Store
+env/local.env
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+omit=peer

Dockerfile

@@ -0,0 +1,9 @@
+# syntax=docker/dockerfile:1
+FROM node:16.14.0
+ENV NODE_ENV=production
+WORKDIR /DockerRegistryWebUI
+COPY ["package.json", "package-lock.json*", "./"]
+COPY . .
+ENV GENERATE_SOURCEMAP false
+RUN npm install
+CMD [ "npm", "run", "start-prod" ]

docker/docker-compose.yml

@@ -0,0 +1,8 @@
+#version: "3"
+#services:
+#  digital-walkaround:
+#    image: 
+#    container_name: 
+#    ports:
+#      - 3000:3000
+#    restart: unless-stopped

env/development.env

@@ -0,0 +1 @@
+ENV=dev

env/production.env

@@ -0,0 +1 @@
+ENV=prod

package.json

@@ -0,0 +1,79 @@
+{
+  "name": "frontend-boilerplate",
+  "version": "0.1.0",
+  "author": "Branden K Siegle <branden.siegle@outlook.com>",
+  "description": "Basic boilerplate for a Typescript React project",
+  "engines": {
+    "npm": ">=8",
+    "node": ">=16 <17"
+  },
+  "dependencies": {
+    "@mui/icons-material": "^5.4.2",
+    "@mui/material": "^5.4.3",
+    "axios": "^0.26.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^6.2.1",
+    "svgo": "^2.8.0",
+    "uuid": "^8.3.2"
+  },
+  "scripts": {
+    "start-prod": "BUILD_ENV=PROD GENERATE_SOURCEMAP=false webpack serve --config webpack.config.ts",
+    "start-local": "webpack serve --config webpack.config.ts",
+    "start-dev": "BUILD_ENV=DEV webpack serve --config webpack.config.ts",
+    "build-local": "BUILD_ENV=LOCAL webpack --config webpack.config.ts",
+    "build-dev": "BUILD_ENV=DEV webpack --config webpack.config.ts",
+    "build-prod": "BUILD_ENV=PROD webpack --config webpack.config.ts",
+    "lint": "eslint src",
+    "lint-fix": "eslint src --ext .tsx --fix",
+    "prepare": "husky install"
+  },
+  "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"
+    ]
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^5.5.0",
+    "@types/dotenv-webpack": "^7.0.3",
+    "@types/node": "^12.20.25",
+    "@types/react": "^17.0.21",
+    "@types/react-dom": "^17.0.9",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/webpack": "^5.28.0",
+    "@types/webpack-env": "^1.16.2",
+    "@typescript-eslint/eslint-plugin": "^5.3.1",
+    "@typescript-eslint/parser": "^5.3.1",
+    "copy-webpack-plugin": "^10.2.0",
+    "css-loader": "^5.1.2",
+    "dotenv-webpack": "^7.0.2",
+    "eslint": "^7.32.0",
+    "eslint-plugin-react": "^7.26.1",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.1",
+    "husky": "^7.0.0",
+    "image-webpack-loader": "^8.1.0",
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.18",
+    "ts-node": "^9.1.1",
+    "typescript": "^4.4.4",
+    "webpack": "^5.30.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.4.0"
+  },
+  "resolutions": {
+    "@types/webpack": "^5.28.0"
+  }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

src/App.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "./components/Home";
+import ProtectedRoute from "./ProtectedRoute";
+
+const App: React.FC = () => {
+  return (
+    <Router>
+      <Routes>
+        {/* <Route path="/login" element={<Login />} />
+        <Route element={<ProtectedRoute />}>
+          <Route path="/" element={<Home />} />
+        </Route> */}
+        <Route path="/" element={<Home />} />
+      </Routes>
+    </Router>
+  );
+};
+
+export default App;

src/ProtectedRoute.tsx

@@ -0,0 +1,23 @@
+import { useLocation, Outlet, Navigate } from "react-router-dom";
+import useAuth from "./hooks/useAuth";
+import { Box } from "@mui/material";
+import React from "react";
+
+const ProtectedRoute = () => {
+  const auth = useAuth();
+  const location = useLocation();
+
+  return auth?.isLoggedIn ? (
+    <>
+      <Box id="drawer-container" sx={{ display: "flex", height: "100%" }}>
+        <Box sx={{ flexGrow: 1 }}>
+          <Outlet />
+        </Box>
+      </Box>
+    </>
+  ) : (
+    <Navigate to="/login" state={{ from: location }} replace />
+  );
+};
+
+export default ProtectedRoute;

src/api/axios.tsx

@@ -0,0 +1,5 @@
+import axios from "axios";
+
+export default axios.create({
+  baseURL: "" + "/v2"
+});

src/components/Home.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Home: React.FC = () => {
+    return(
+        <>
+            <p>Temp</p>
+        </>
+    );
+};
+
+export default Home;

src/constants/env.ts

@@ -0,0 +1 @@
+export const ENV: string = process.env.ENV || "dev";

src/context/AuthProvider.tsx

@@ -0,0 +1,19 @@
+import { createContext, useState } from "react";
+
+interface loginInfo {
+  uuid: string;
+  isLoggedIn: boolean;
+}
+
+const AuthContext = createContext<loginInfo>({
+  uuid: "",
+  isLoggedIn: false,
+});
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const [auth] = useState<loginInfo>({ uuid: "", isLoggedIn: false });
+
+  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
+};
+
+export default AuthContext;

src/hooks/useAuth.tsx

@@ -0,0 +1,13 @@
+import { useContext } from "react";
+import AuthContext from "../context/AuthProvider";
+
+interface loginInfo {
+  uuid: string;
+  isLoggedIn: boolean;
+}
+
+const useAuth = () => {
+  return useContext<loginInfo>(AuthContext);
+};
+
+export default useAuth;

src/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Docker Registry Web UI</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

src/index.tsx

@@ -0,0 +1,15 @@
+import ReactDOM from "react-dom";
+import App from "./App";
+import "./style/style.css";
+import { AuthProvider } from "./context/AuthProvider";
+
+
+const Index: React.FC = () => {
+  return (
+    <AuthProvider>
+      <App />
+    </AuthProvider>
+  );
+};
+
+ReactDOM.render(<Index />, document.getElementById("root"));

src/style/base/_base-dir.sass

@@ -0,0 +1 @@
+@import "base"

src/style/base/_base.sass

@@ -0,0 +1,52 @@
+// .col-1
+//     width: 8.33% !important
+// .col-2
+//     width: 16.66% !important
+// .col-3
+//     width: 25% !important
+// .col-4
+//     width: 33.33% !important
+// .col-5
+//     width: 41.66% !important
+// .col-6
+//     width: 50% !important
+// .col-7
+//     width: 58.33% !important
+// .col-8
+//     width: 66.66% !important
+// .col-9
+//     width: 75% !important
+// .col-10
+//     width: 83.33% !important
+// .col-11
+//     width: 91.66% !important
+// .col-12
+//     width: 100% !important
+
+// [class*="col-"]
+//     flex: 0 0 auto
+
+// .row
+//     box-sizing: border-box
+//     display: flex
+//     max-width: 100%
+//     *
+//         width: 100%
+
+// .container-fluid
+//     width: 100%
+//     margin-right: auto
+//     margin-left: auto
+
+// label
+//     display: inline-block
+
+// html
+//     overflow-y: hidden
+
+.full-width
+    width: 100%
+
+a
+    text-decoration: none
+    

src/style/layouts/_layouts-dir.sass

@@ -0,0 +1,2 @@
+@import "header"
+@import "footer"

src/style/modules/_modules-dir.sass

@@ -0,0 +1 @@
+@import "sectionMain"

src/style/modules/_sectionMain.sass

@@ -0,0 +1 @@
+.sectionMain

src/style/style.css

@@ -0,0 +1,8 @@
+.full-width {
+  width: 100%;
+}
+
+a {
+  text-decoration: none;
+}
+/*# sourceMappingURL=style.css.map */

src/style/style.css.map

@@ -0,0 +1,17 @@
+{
+    "version": 3,
+    "mappings": "AG8CA,AAAA,WAAW,CAAC;EACR,KAAK,EAAE,IAAI;CAAG;;AAElB,AAAA,CAAC,CAAC;EACE,eAAe,EAAE,IAAI;CAAG",
+    "sources": [
+        "style.sass",
+        "_variables.sass",
+        "base/_base-dir.sass",
+        "base/_base.sass",
+        "layouts/_layouts-dir.sass",
+        "layouts/_header.sass",
+        "layouts/_footer.sass",
+        "modules/_modules-dir.sass",
+        "modules/_sectionMain.sass"
+    ],
+    "names": [],
+    "file": "style.css"
+}

src/style/style.sass

@@ -0,0 +1,4 @@
+@import "variables"
+@import "base/base-dir"
+@import "layouts/layouts-dir"
+@import "modules/modules-dir"

tsconfig.json

@@ -0,0 +1,71 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
+    "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ] /* Specify library files to be included in the compilation. */,
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react-jsx" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    "sourceMap": true /* Generates corresponding '.map' file. */,
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    // "noEmit": true,                        /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    "downlevelIteration": true /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */,
+    "isolatedModules": true /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */,
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */,
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+    /* Module Resolution Options */
+    "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "resolveJsonModule": true,
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    /* Advanced Options */
+    "skipLibCheck": true /* Skip type checking of declaration files. */,
+    "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */,
+    "types": ["node", "webpack-env"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "build"]
+}

webpack.config.ts

@@ -0,0 +1,146 @@
+import path from "path";
+import { Configuration as WebpackConfiguration } from "webpack";
+import { Configuration as WebpackDevServerConfiguration } from "webpack-dev-server";
+import Dotenv from "dotenv-webpack";
+import HtmlWebpackPlugin from "html-webpack-plugin";
+import CopyWebpackPlugin from "copy-webpack-plugin";
+
+interface Configuration extends WebpackConfiguration {
+  devServer?: WebpackDevServerConfiguration;
+}
+
+const BUILD_ENV: string = process.env.BUILD_ENV || "LOCAL";
+const LOCAL_PORT: string | number = process.env.LOCAL_PORT || 3000;
+const SERVE_LOCAL: boolean =
+  process.env.WEBPACK_SERVE !== undefined &&
+  process.env.WEBPACK_SERVE.toUpperCase() === "TRUE";
+
+/**
+ * Config for running local development server
+ */
+const getDevServerConfig = (): WebpackDevServerConfiguration => {
+  const devServerConfig: WebpackDevServerConfiguration = {
+    static: path.join(__dirname, "build"),
+    allowedHosts: ["all"],
+    compress: true,
+    port: LOCAL_PORT,
+    hot: true,
+    historyApiFallback: true,
+  };
+
+  console.log("Starting Development server with the following configuration:");
+  console.log(devServerConfig);
+
+  return devServerConfig;
+};
+
+console.info(`Building application for environment ${BUILD_ENV}`);
+
+const baseConfig: Configuration = {
+  entry: {
+    app: path.join(__dirname, "src", "index.tsx"),
+  },
+
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: "ts-loader",
+      },
+      {
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.m?js/,
+        resolve: {
+          fullySpecified: false,
+        },
+      },
+      {
+        test: /\.svg$/,
+        use: ["@svgr/webpack"],
+      },
+      {
+        test: /\.(png|jpe?g|gif|jp2|webp)$/,
+        loader: 'file-loader',
+        options: {
+          name: '[name].[ext]',
+        },
+      },
+    ],
+  },
+
+  output: {
+    publicPath: "/",
+    filename: "[name].js",
+    path: path.join(__dirname, "build/"),
+  },
+
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, "src", "index.html"),
+      chunks: ["app"],
+    }),
+    new CopyWebpackPlugin({
+      patterns: [{ from: "public" }],
+    }),
+  ],
+
+  resolve: {
+    extensions: [".tsx", ".ts", ".js", ".jsx"],
+  },
+
+  target: "web",
+
+  performance: {
+    maxEntrypointSize: 5242880,
+    maxAssetSize: 5242880
+  }
+};
+
+if (!baseConfig.plugins) throw new Error("No plugins array!");
+
+switch (BUILD_ENV) {
+  case "LOCAL":
+    baseConfig.devtool = "source-map";
+    baseConfig.mode = "development";
+    baseConfig.plugins.push(
+      new Dotenv({
+        safe: true,
+        allowEmptyValues: false,
+        path: "./env/local.env", // load this now instead of the ones in '.env'
+      })
+    );
+
+    if (SERVE_LOCAL) baseConfig.devServer = getDevServerConfig();
+
+    break;
+
+  case "DEV":
+    baseConfig.devtool = "source-map";
+    baseConfig.mode = "development";
+    baseConfig.plugins.push(
+      new Dotenv({
+        path: "./env/development.env", // load this now instead of the ones in '.env'
+      })
+    );
+
+    if (SERVE_LOCAL) baseConfig.devServer = getDevServerConfig();
+
+    break;
+
+  case "PROD":
+    baseConfig.plugins.push(
+      new Dotenv({
+        path: "./env/production.env", // load this now instead of the ones in '.env'
+      })
+    );
+
+    baseConfig.mode = "production";
+    if (SERVE_LOCAL) baseConfig.devServer = getDevServerConfig();
+
+    break;
+}
+
+export default baseConfig;