Add nextjs frontend

.github/workflows/build.yml

@@ -6,16 +6,20 @@ env:
   REGISTRY: ghcr.io
 
 jobs:
-  build-teloalapi:
+  build:
     runs-on: ubuntu-latest
 
     # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
     permissions:
       contents: read
       packages: write
 
+    strategy:
+      matrix:
+        project: [teloalapi, teloal-frontend]
+
     env:
-      PROJECT_NAME: teloalapi
+      PROJECT_NAME: ${{ matrix.project }}
 
     steps:
       - name: Checkout repository

.gitignore

@@ -40,3 +40,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# Next.js
+.next

Dockerfile

@@ -1,3 +1,13 @@
+#############################
+#  ____                     #
+# |  _ \                    #
+# | |_) |  __ _  ___   ___  #
+# |  _ <  / _` |/ __| / _ \ #
+# | |_) || (_| |\__ \|  __/ #
+# |____/  \__,_||___/ \___| #
+#                           #
+#                           #
+#############################
 FROM node:18-slim as build
 
 RUN mkdir -p /build
@@ -14,6 +24,16 @@ COPY . .
 
 RUN npx nx run-many -t build
 
+#####################################################
+#  _______     _                _                _  #
+# |__   __|   | |              | |              (_) #
+#    | |  ___ | |  ___    __ _ | |  __ _  _ __   _  #
+#    | | / _ \| | / _ \  / _` || | / _` || '_ \ | | #
+#    | ||  __/| || (_) || (_| || || (_| || |_) || | #
+#    |_| \___||_| \___/  \__,_||_| \__,_|| .__/ |_| #
+#                                        | |        #
+#                                        |_|        #
+#####################################################
 FROM node:18-alpine as teloalapi
 
 # Set to a non-root built-in user `node`
@@ -43,3 +63,36 @@ ENV HOST=0.0.0.0 PORT=3000
 
 EXPOSE ${PORT}
 CMD [ "node", "src/main.js" ]
+
+#########################################################################
+#  _______     _                _           __                     _    #
+# |__   __|   | |              | |         / _|                   | |   #
+#    | |  ___ | |  ___    __ _ | | ______ | |_  _ __  ___   _ __  | |_  #
+#    | | / _ \| | / _ \  / _` || ||______||  _|| '__|/ _ \ | '_ \ | __| #
+#    | ||  __/| || (_) || (_| || |        | |  | |  | (_) || | | || |_  #
+#    |_| \___||_| \___/  \__,_||_|        |_|  |_|   \___/ |_| |_| \__| #
+#                                                                       #
+#                                                                       #
+#########################################################################
+FROM node:18-alpine as teloal-frontend
+
+# Set to a non-root built-in user `node`
+USER node
+
+ENV NODE_ENV=production
+
+# Create app directory (with user `node`)
+RUN mkdir -p /home/node/app/
+
+WORKDIR /home/node/app
+
+COPY --from=build --chown=node /build/dist/apps/teloal-frontend/ .
+
+RUN npm i --no-package-lock
+
+COPY --from=build --chown=node /build/dist/libs/helpers/ /home/node/app/node_modules/@teloal/helpers/
+
+ENV HOST=0.0.0.0 PORT=3001
+
+EXPOSE ${PORT}
+CMD [ "npm", "start" ]

apps/teloal-frontend/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["../../.eslintrc.js"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/teloal-frontend/app/emotion-root-style-registry.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { CacheProvider } from "@emotion/react";
+import createCache from "@emotion/cache";
+import { useServerInsertedHTML } from "next/navigation";
+import { ReactNode, useState } from "react";
+
+export default function EmotionRootStyleRegistry({ children }: { children: ReactNode }) {
+  const [{ cache, flush }] = useState(() => {
+    const cached = createCache({ key: "emotion-cache" });
+    cached.compat = true;
+    const prevInsert = cached.insert;
+    let inserted: Array<string> = [];
+
+    cached.insert = (...args) => {
+      const serialized = args[1];
+
+      if (cached.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+
+      return prevInsert(...args);
+    };
+
+    const flusher = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+
+    return { cache: cached, flush: flusher };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+
+    if (names.length === 0) {
+      return null;
+    }
+
+    let styles = "";
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+
+    return (
+      <style
+        data-emotion={`${cache.key} ${names.join(" ")}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>;
+}

apps/teloal-frontend/app/layout.tsx

@@ -0,0 +1,122 @@
+import CssBaseline from "@mui/material/CssBaseline";
+import EmotionRootStyleRegistry from "./emotion-root-style-registry";
+import Link from "next/link";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import HomeIcon from "@mui/icons-material/Home";
+import StarIcon from "@mui/icons-material/Star";
+import SupportIcon from "@mui/icons-material/Support";
+import { ThemeProvider } from "@mui/material";
+import theme from "./theme";
+
+import "@fontsource/roboto/300.css";
+import "@fontsource/roboto/400.css";
+import "@fontsource/roboto/500.css";
+import "@fontsource/roboto/700.css";
+
+const DRAWER_WIDTH = 240;
+
+const LINKS = [
+  { text: "Home", href: "/", icon: HomeIcon },
+  { text: "Starred", href: "/starred", icon: StarIcon },
+];
+
+const PLACEHOLDER_LINKS = [{ text: "Support", icon: SupportIcon }];
+
+export const metadata = {
+  title: "Teloal",
+  description: "Tools for Adventure Land",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <EmotionRootStyleRegistry>
+          <ThemeProvider theme={theme}>
+            <CssBaseline enableColorScheme />
+            <AppBar position="fixed" sx={{ zIndex: 2000 }}>
+              <Toolbar sx={{ backgroundColor: "background.paper" }}>
+                {/* <IconButton
+                  size="large"
+                  edge="start"
+                  color="inherit"
+                  aria-label="menu"
+                  sx={{ mr: 2 }}
+                >
+                  <MenuIcon />
+                </IconButton> */}
+                <Typography variant="h6" color="primary">
+                  TeloAL
+                </Typography>
+              </Toolbar>
+            </AppBar>
+            <Drawer
+              sx={{
+                width: DRAWER_WIDTH,
+                flexShrink: 0,
+                "& .MuiDrawer-paper": {
+                  width: DRAWER_WIDTH,
+                  boxSizing: "border-box",
+                  top: ["48px", "56px", "64px"],
+                  height: "auto",
+                  bottom: 0,
+                },
+              }}
+              variant="permanent"
+              anchor="left"
+            >
+              <Divider />
+              <List>
+                {LINKS.map(({ text, href, icon: Icon }) => (
+                  <ListItem key={href} disablePadding>
+                    <ListItemButton component={Link} href={href}>
+                      <ListItemIcon>
+                        <Icon />
+                      </ListItemIcon>
+                      <ListItemText primary={text} />
+                    </ListItemButton>
+                  </ListItem>
+                ))}
+              </List>
+              <Divider sx={{ mt: "auto" }} />
+              <List>
+                {PLACEHOLDER_LINKS.map(({ text, icon: Icon }) => (
+                  <ListItem key={text} disablePadding>
+                    <ListItemButton>
+                      <ListItemIcon>
+                        <Icon />
+                      </ListItemIcon>
+                      <ListItemText primary={text} />
+                    </ListItemButton>
+                  </ListItem>
+                ))}
+              </List>
+            </Drawer>
+            <Box
+              component="main"
+              sx={{
+                flexGrow: 1,
+                bgcolor: "background.default",
+                ml: `${DRAWER_WIDTH}px`,
+                mt: ["48px", "56px", "64px"],
+                p: 3,
+              }}
+            >
+              {children}
+            </Box>
+          </ThemeProvider>
+        </EmotionRootStyleRegistry>
+      </body>
+    </html>
+  );
+}

apps/teloal-frontend/app/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+import { Container } from "@mui/material";
+
+export default async function Index() {
+  return <Container>Hello</Container>;
+}

apps/teloal-frontend/app/theme.ts

@@ -0,0 +1,63 @@
+"use client";
+
+import { createTheme } from "@mui/material/styles";
+import darkScrollbar from "@mui/material/darkScrollbar";
+import type {} from "@mui/lab/themeAugmentation";
+
+export default createTheme({
+  palette: {
+    mode: "dark",
+    primary: {
+      main: "#6299ce",
+    },
+    secondary: {
+      main: "#42a282",
+    },
+    background: {
+      paper: "#202020",
+      default: "#141414",
+    },
+  },
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        html: {
+          height: "100vh",
+          width: "100vw",
+          margin: 0,
+        },
+        body: {
+          ...darkScrollbar(),
+          overflowY: "hidden",
+          height: "100%",
+        },
+        "#root": {
+          height: "100%",
+          width: "100%",
+        },
+      },
+    },
+    MuiListItemButton: {
+      defaultProps: {
+        disableTouchRipple: true,
+        dense: true,
+      },
+      styleOverrides: {
+        root: {
+          "&:active": {
+            backgroundColor: "rgba(255, 255, 255, 0.15)",
+          },
+        },
+      },
+    },
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: "white",
+          color: "rgba(0, 0, 0, 0.87)",
+          fontSize: 14,
+        },
+      },
+    },
+  },
+});

apps/teloal-frontend/index.d.ts

@@ -0,0 +1,6 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+declare module "*.svg" {
+  const content: any;
+  export const ReactComponent: any;
+  export default content;
+}

apps/teloal-frontend/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: "teloal-frontend",
+  preset: "../../jest.preset.js",
+  transform: {
+    "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "@nx/react/plugins/jest",
+    "^.+\\.[tj]sx?$": ["babel-jest", { presets: ["@nx/next/babel"] }],
+  },
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  coverageDirectory: "../../coverage/apps/teloal-frontend",
+};

apps/teloal-frontend/next-env.d.ts

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