TRI-29692 Update front-end libraries

web/frontend/.dockerignore

@@ -1,3 +1,4 @@
-build
-node_modules
-package-lock.json
+/node_modules
+dist
+.vscode
+.vitest

web/frontend/.eslintrc

@@ -0,0 +1,44 @@
+{
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "jest": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "plugin:tailwindcss/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 11,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "tailwindcss"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "tailwindcss/classnames-order": "warn",
+    "tailwindcss/no-custom-classname": "warn",
+    "tailwindcss/no-contradicting-classname": "error"
+  },
+  "ignorePatterns": [
+    "src/interface/**/*"
+  ]
+}

web/frontend/.gitignore

@@ -0,0 +1,37 @@
+dist
+dist-ssr
+*.local
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

web/frontend/.vitest/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest'

web/frontend/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
+}

web/frontend/Dockerfile

@@ -1,23 +1,34 @@
-# build environment
-FROM node:16 as build
+ARG APP_DIR="/home/dockeruser"
 
-WORKDIR /app
+FROM node:20-slim AS run-dev
+ARG APP_DIR
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
 
-COPY package.json /app/package.json
+RUN useradd -m dockeruser
+WORKDIR ${APP_DIR}
+USER dockeruser
 
-ENV NODE_PATH=/node_modules
-ENV PATH=$PATH:/node_modules/.bin
-RUN npm install
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store \
+    --mount=type=bind,source=package.json,target=package.json \
+    --mount=type=bind,source=pnpm-lock.yaml,target=pnpm-lock.yaml \
+    pnpm install --frozen-lockfile
 
+COPY --chown=dockeruser:dockeruser . .
 
-COPY public /app/public
-COPY src /app/src
+CMD ["pnpm", "run", "dev"]
 
-RUN npm run build
+FROM run-dev AS build-prod
+RUN pnpm run build
+
+FROM scratch AS export-prod
+ARG APP_DIR
+COPY --from=build-prod ${APP_DIR}/dist /
 
 # production environment
 FROM nginx:latest
-COPY --from=build /app/build /usr/share/nginx/html
+COPY --from=build-prod ${APP_DIR}/dist /usr/share/nginx/html
 COPY nginx/default.conf.template /etc/nginx/templates/default.conf.template
 
 CMD ["nginx", "-g", "daemon off;"]

web/frontend/LICENSE

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2023 Toyota Research Institute
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

web/frontend/README.md

@@ -1,64 +1,103 @@
-# Getting Started with TRI Web App
+# DNA Example Web App UI
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+<!-- TOC -->
+- [DNA Example Web App UI](#dna-example-web-app-ui)
+  - [What is inside?](#what-is-inside)
+  - [Getting Started](#getting-started)
+    - [Install](#install)
+    - [Local Run](#local-run)
+    - [Lint](#lint)
+    - [Typecheck](#typecheck)
+    - [Build](#build)
+    - [Test](#test)
+  - [User Management with AWS Cognito](#user-management-with-aws-cognito)
+  - [License](#license)
+<!-- TOC -->
 
-## Available Scripts
+This is a boilerplate build with Vite, React 18, TypeScript, Vitest, Testing
+Library, TailwindCSS 3, Eslint and Prettier.
 
-In the project directory, you can run:
+## What is inside?
 
-### `npm start`
+This project uses many tools like:
 
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- [Vite](https://vitejs.dev)
+- [ReactJS](https://reactjs.org)
+- [TypeScript](https://www.typescriptlang.org)
+- [Vitest](https://vitest.dev)
+- [Testing Library](https://testing-library.com)
+- [Tailwindcss](https://tailwindcss.com)
+- [Eslint](https://eslint.org)
+- [Prettier](https://prettier.io)
+- [React Router](https://reactrouter.com)
+- [TanStack Query](https://tanstack.com/query/latest/docs/react/overview)
 
-The page will reload if you make edits.\
-You will also see any lint errors in the console.
+## Getting Started
 
-### `npm test`
+### Install
 
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+Install dependencies.
 
-### `npm run build`
+```bash
+pnpm install
+```
 
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
+### Local Run
 
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+Serve with hot reload at <http://localhost:3000>.
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+```bash
+pnpm run dev
+```
 
-### `npm run deploy-s3`
+Or with Docker
 
-Edit the package.json and the line about deploy-s3 to deploy the build as a static website using an S3 bucket\
+```bash
+docker compose build && docker compose watch
+```
 
+### Lint
 
-## TRI Web App Additions
+```bash
+pnpm run lint
+```
 
-Here are the additions added on top of Create React App.
+### Typecheck
 
-### Prettier Code Formatting
-[Prettier](https://prettier.io/) is an opinionated code formatter. This runs on git commits.
-To manually trigger prettier formatting, run `npm run format`
+```bash
+pnpm run typecheck
+```
 
-### Airbnb Typescript Style Guide
-[Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) is implemented. All code is checked before a git commit.
+### Build
 
-### Emotion Styling
-[Emotion](https://emotion.sh/docs/introduction) can be used to style components.
+```bash
+pnpm run build
+```
 
-### Lakefront Components
-[Lakefront](https://github.com/ToyotaResearchInstitute/lakefront) has a collection of ready-made styled components (buttons, input, etc).
+Or with Docker
 
-### React Router
-You can use [React Router](https://reactrouter.com/web/guides/quick-start) for setting up multiple pages.
+```bash
+docker build -t export-prod -o dist .
+```
 
-### React Query
-[React Query](https://react-query.tanstack.com/) can be used for fetching data from rest endpoints.
+### Test
 
-## Learn More
+```bash
+pnpm run test
+```
 
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+View and interact with your tests via UI.
 
-To learn React, check out the [React documentation](https://reactjs.org/).
+```bash
+pnpm run test:ui
+```
+
+## User Management with AWS Cognito
+
+The app supports AWS Cognito login using Cognito's hosted UI. To enable
+Cognito, supply the details in the [config.js](public/config.js) to connect to
+the desired Cognito user pool and set the flag `AMPLIFY_ENABLED` to true.
+
+## License
+
+This project is licensed under the MIT License.

web/frontend/docker-compose.yml

@@ -0,0 +1,16 @@
+services:
+  ui:
+    build:
+      dockerfile: Dockerfile
+      target: run-dev
+    ports:
+      - 3000:3000
+    develop:
+      watch:
+        - action: sync
+          path: ./
+          target: /home/dockeruser/
+        - action: rebuild
+          path: package.json
+        - action: rebuild
+          path: Dockerfile

web/frontend/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Synthesis Analyzer</title>
+    <script>
+      window.global = window;
+      window.process = {
+        env: { DEBUG: undefined },
+      }
+      var exports = {};
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="/config.js"></script>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>