Add kvittering-frontend (#1245)

dotkom · Mar 7, 2025 · 0594edc · 0594edc
1 parent 754338f
commit 0594edc
Show file tree

Hide file tree

Showing 36 changed files with 2,948 additions and 123 deletions.
diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
@@ -8,6 +8,64 @@ permissions:
   id-token: write   
   contents: read
 jobs:
+  deploy-kvittering-frontend:
+    name: Deploy monoweb/kvittering-frontend
+    runs-on: ubuntu-24.04
+    steps:
+      - uses: aws-actions/configure-aws-credentials@v4
+        with:
+          aws-region: eu-north-1
+          role-to-assume: arn:aws:iam::891459268445:role/MonowebProdKvitteringFrontendCIRole
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 1
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 9.15.7
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.0.0
+          cache: 'pnpm'
+      - name: Install dependencies
+        working-directory: apps/kvittering-frontend
+        run: pnpm install
+      - name: Build frontend
+        working-directory: apps/kvittering-frontend
+        run: pnpm build
+      - name: Deploy to S3
+        run: |
+          aws s3 sync apps/kvittering-frontend/dist "s3://kvittering.online.ntnu.no" \
+            --exclude "*" \
+            --include "*.html" \
+            --content-type "text/html" \
+            --region "eu-north-1"
+          
+          aws s3 sync apps/kvittering-frontend/dist "s3://kvittering.online.ntnu.no" \
+            --exclude "*" \
+            --include "*.css" \
+            --content-type "text/css" \
+            --region "eu-north-1"
+          
+          aws s3 sync apps/kvittering-frontend/dist "s3://kvittering.online.ntnu.no" \
+            --exclude "*" \
+            --include "*.js" \
+            --content-type "application/javascript" \
+            --region "eu-north-1"
+          
+          aws s3 sync apps/kvittering-frontend/dist "s3://kvittering.online.ntnu.no" \
+            --exclude "*" \
+            --include "*.svg" \
+            --content-type "image/svg+xml" \
+            --region "eu-north-1"
+          
+          aws s3 sync apps/kvittering-frontend/dist "s3://kvittering.online.ntnu.no" \
+            --exclude "*.html" \
+            --exclude "*.css" \
+            --exclude "*.js" \
+            --exclude "*.svg" \
+            --region "eu-north-1"
+      - name: Invalidate CloudFront cache
+        run: aws cloudfront create-invalidation --distribution-id E60JFQ13PM11R --paths '/*'
   deploy-kvittering-backend:
     name: Deploy monoweb/kvittering-backend
     runs-on: ubuntu-24.04

diff --git a/apps/kvittering-frontend/.env.local b/apps/kvittering-frontend/.env.local
@@ -0,0 +1 @@
+VITE_API_URL=http://localhost:5000
diff --git a/apps/kvittering-frontend/README.md b/apps/kvittering-frontend/README.md
@@ -0,0 +1,16 @@
+# React + Vite + TypeScript Template (react-vite-ui)
+
+A React + Vite template powered by shadcn/ui.
+
+- See root package.json for node + pnpm version
+- Run: `pnpm install` to install dependencies
+
+Vite uses .env.local when running with `pnpm dev` and .env.production when running with `pnpm build`.
+
+Create a .env.local file with:
+
+```
+VITE_API_URL=http://localhost:5000
+```
+
+- Run: `pnpm dev` to start the development server
diff --git a/apps/kvittering-frontend/biome.json b/apps/kvittering-frontend/biome.json
@@ -0,0 +1,6 @@
+{
+	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+	"linter": {
+		"ignore": ["dist"]
+	}
+}
diff --git a/apps/kvittering-frontend/components.json b/apps/kvittering-frontend/components.json
@@ -0,0 +1,21 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/styles/globals.css",
+		"baseColor": "zinc",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"iconLibrary": "lucide"
+}
diff --git a/apps/kvittering-frontend/index.html b/apps/kvittering-frontend/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Kvitteringsskjema</title>
+  <script defer data-domain="kvittering.online.ntnu.no" src="https://plausible.io/js/script.js"></script>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>
diff --git a/apps/kvittering-frontend/package.json b/apps/kvittering-frontend/package.json
@@ -0,0 +1,46 @@
+{
+	"name": "@dotkomonline/kvittering-frontend",
+	"private": true,
+	"version": "0.0.1",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"lint": "biome check --write --unsafe .",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@hookform/resolvers": "^4.0.0",
+		"@radix-ui/react-label": "^2.0.2",
+		"@radix-ui/react-radio-group": "^1.2.1",
+		"@radix-ui/react-select": "^2.1.2",
+		"@radix-ui/react-slot": "^1.1.2",
+		"@sentry/browser": "^9.4.0",
+		"@sentry/react": "^9.4.0",
+		"browser-image-compression": "^2.0.2",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.0.0",
+		"lucide-react": "^0.475.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-dropzone": "^14.3.8",
+		"react-hook-form": "^7.48.2",
+		"sonner": "^2.0.1",
+		"tailwindcss-animate": "^1.0.7",
+		"zod": "^3.22.4"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "1.9.3",
+		"@types/node": "^22.0.0",
+		"@types/react": "^18.3.11",
+		"@types/react-dom": "^18.3.0",
+		"@vitejs/plugin-react": "4.3.4",
+		"autoprefixer": "^10.4.16",
+		"globals": "^15.14.0",
+		"postcss": "^8.4.31",
+		"tailwind-merge": "^3.0.1",
+		"tailwindcss": "^3.3.5",
+		"typescript": "^5.8",
+		"vite": "6.2.0"
+	}
+}
diff --git a/apps/kvittering-frontend/postcss.config.js b/apps/kvittering-frontend/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
diff --git a/apps/kvittering-frontend/public/vite.svg b/apps/kvittering-frontend/public/vite.svg
diff --git a/apps/kvittering-frontend/src/App.tsx b/apps/kvittering-frontend/src/App.tsx
@@ -0,0 +1,17 @@
+import { Toaster } from "sonner";
+import { Header } from "./components/header";
+import ReceiptForm from "./components/receipt-form";
+
+function App() {
+	return (
+		<div>
+			<Header />
+			<main className="px-8 lg:px-0">
+				<ReceiptForm />
+			</main>
+			<Toaster position="top-center" expand={true} />
+		</div>
+	);
+}
+
+export default App;
diff --git a/apps/kvittering-frontend/src/assets/react.svg b/apps/kvittering-frontend/src/assets/react.svg
diff --git a/apps/kvittering-frontend/src/components/header.tsx b/apps/kvittering-frontend/src/components/header.tsx
@@ -0,0 +1,14 @@
+export const Header = () => {
+	return (
+		<header className="bg-[#0d5474] grid justify-center box-border w-full">
+			<img
+				src={"https://wiki.online.ntnu.no/attachments/681-Online_hvit.png"}
+				alt="Linjeforeningen Online"
+				className="w-[26rem] max-w-[100vw] box-border p-6"
+			/>
+			<h2 className="text-white text-center tracking-wider mb-4">
+				Kvitteringsskjema TEST
+			</h2>
+		</header>
+	);
+};