feat(webapp-frontend): adds basic nextjs app

clean-room-demo/webapp/frontend/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+npm-debug.log

clean-room-demo/webapp/frontend/Dockerfile

@@ -0,0 +1,43 @@
+# Install dependencies only when needed
+FROM node:alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package*.json ./
+RUN npm install --production
+RUN npm install --save-dev typescript @types/react
+
+# Rebuild the source code only when needed
+FROM node:alpine AS builder
+WORKDIR /app
+COPY . .
+COPY --from=deps /app/node_modules ./node_modules
+RUN npx next telemetry disable
+RUN npm run build
+RUN npm run test --if-present
+
+FROM node:alpine AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/next.config.js ./
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next ./.next
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/package.json ./package.json
+
+RUN addgroup -g 1001 -S nodejs
+RUN adduser -S nextjs -u 1001
+RUN chown -R nextjs:nodejs /app/.next
+USER nextjs
+
+EXPOSE 3000
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry.
+RUN npx next telemetry disable
+ENTRYPOINT [ "npm", "run", "start" ]
+# CMD [ "node", "server.js" ]

clean-room-demo/webapp/frontend/components/BasicPage.tsx

@@ -0,0 +1,21 @@
+import HeaderTitle from "@/components/HeaderTitle";
+
+export default function BasicPage(props) {
+    return (
+        <div className="py-10">
+            <HeaderTitle title={props.title} icon={props.icon}>
+                {props.headerChildren}
+            </HeaderTitle>
+            <main>
+                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
+                    <div className="px-4 py-8 sm:px-0">
+                        {" "}
+                        <div className="flow-root">
+                            <ul className="-mb-8">{props.children}</ul>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+    );
+}

clean-room-demo/webapp/frontend/components/HeaderTitle.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function HeaderTitle(props) {
+    return (
+        <header>
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center">
+                <props.icon className="-ml-1 mr-1 h-5 w-5" aria-hidden="true" />
+                <h1 className="text-3xl font-bold leading-tight text-gray-900">
+                    {props.title}
+                </h1>
+                {props.children}
+            </div>
+        </header>
+    );
+}

clean-room-demo/webapp/frontend/components/Layout.tsx

@@ -0,0 +1,109 @@
+import { Disclosure } from "@headlessui/react";
+import { MenuIcon, XIcon } from "@heroicons/react/outline";
+import { useRouter } from "next/router";
+import classNames from "@/lib/classNames";
+
+const navigation = [
+  { name: "Login", href: "/login" },
+  { name: "About", href: "/" },
+];
+
+function isCurrentPage(href, pathname) {
+  if (href === "/") {
+    if (pathname === "/") {
+      return true;
+    } else {
+      return false;
+    }
+  }
+  return pathname.search(href) === 0;
+}
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  return (
+    <>
+      <Disclosure as="nav" className="bg-white shadow">
+        {({ open }) => (
+          <>
+            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+              <div className="flex justify-between h-16">
+                <div className="flex">
+                  <div className="-ml-2 mr-2 flex items-center md:hidden">
+                    {/* Mobile menu button */}
+                    <Disclosure.Button className="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-500">
+                      <span className="sr-only">Open main menu</span>
+                      {open ? (
+                        <XIcon className="block h-6 w-6" aria-hidden="true" />
+                      ) : (
+                        <MenuIcon
+                          className="block h-6 w-6"
+                          aria-hidden="true"
+                        />
+                      )}
+                    </Disclosure.Button>
+                  </div>
+                  <div className="flex-shrink-0 flex items-center">
+                    <img
+                      className="block lg:hidden h-8 w-auto"
+                      src="/oltiva-logo.png"
+                      alt="Oltiva"
+                    />
+                    <img
+                      className="hidden lg:block h-8 w-auto"
+                      src="/oltiva-logo.png"
+                      alt="Oltiva"
+                    />
+                  </div>
+                  <div className="hidden md:ml-6 md:flex md:space-x-8">
+                    {navigation.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className={classNames(
+                          isCurrentPage(item.href, router.pathname)
+                            ? "border-gray-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                            : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium"
+                        )}
+                        aria-current={
+                          isCurrentPage(item.href, router.pathname)
+                            ? "page"
+                            : undefined
+                        }
+                      >
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+            <Disclosure.Panel className="md:hidden">
+              <div className="pt-2 pb-3 space-y-1">
+                {navigation.map((item) => (
+                  <a
+                    key={item.name}
+                    href={item.href}
+                    className={classNames(
+                      isCurrentPage(item.href, router.pathname)
+                        ? "bg-gray-50 border-gray-500 text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
+                        : "border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium sm:pl-5 sm:pr-6"
+                    )}
+                    aria-current={
+                      isCurrentPage(item.href, router.pathname)
+                        ? "page"
+                        : undefined
+                    }
+                  >
+                    {item.name}
+                  </a>
+                ))}
+              </div>
+            </Disclosure.Panel>
+          </>
+        )}
+      </Disclosure>
+      <div className="mt-6 sm:mt-0 sm:py-12">{children}</div>
+    </>
+  );
+}

clean-room-demo/webapp/frontend/lib/classNames.ts

@@ -0,0 +1,3 @@
+export default function classNames(...classes) {
+    return classes.filter(Boolean).join(" ");
+}

clean-room-demo/webapp/frontend/lib/fetcher.ts

@@ -0,0 +1,3 @@
+export default function fetcher(url) {
+    return fetch(url).then(r => r.json());
+}

clean-room-demo/webapp/frontend/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.