Merge pull request #754 from kduprey/feature/add-admin-app

Feature/add admin app

apps/admin/.eslintignore

@@ -0,0 +1,3 @@
+*.cjs
+*.mjs
+*.js

apps/admin/.eslintrc.js

@@ -0,0 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  extends: ["@kduprey/eslint-config/next.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

apps/admin/.stylelintignore

@@ -0,0 +1,2 @@
+.next
+out

apps/admin/.stylelintrc.json

@@ -0,0 +1,28 @@
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "custom-property-pattern": null,
+    "selector-class-pattern": null,
+    "scss/no-duplicate-mixins": null,
+    "declaration-empty-line-before": null,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "alpha-value-notation": null,
+    "custom-property-empty-line-before": null,
+    "property-no-vendor-prefix": null,
+    "color-function-notation": null,
+    "length-zero-no-unit": null,
+    "selector-not-notation": null,
+    "no-descending-specificity": null,
+    "comment-empty-line-before": null,
+    "scss/at-mixin-pattern": null,
+    "scss/at-rule-no-unknown": null,
+    "value-keyword-case": null,
+    "media-feature-range-notation": null,
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
+  }
+}

apps/admin/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Vitaly Rtischev
+
+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.

apps/admin/README.md

@@ -0,0 +1,37 @@
+# Mantine Next.js template
+
+This is a template for [Next.js](https://nextjs.org/) app router + [Mantine](https://mantine.dev/).
+If you want to use pages router instead, see [next-pages-template](https://github.com/mantinedev/next-pages-template).
+
+## Features
+
+This template comes with the following features:
+
+- [PostCSS](https://postcss.org/) with [mantine-postcss-preset](https://mantine.dev/styles/postcss-preset)
+- [TypeScript](https://www.typescriptlang.org/)
+- [Storybook](https://storybook.js.org/)
+- [Jest](https://jestjs.io/) setup with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro)
+- ESLint setup with [eslint-config-mantine](https://github.com/mantinedev/eslint-config-mantine)
+
+## npm scripts
+
+### Build and dev scripts
+
+- `dev` – start dev server
+- `build` – bundle application for production
+- `analyze` – analyzes application bundle with [@next/bundle-analyzer](https://www.npmjs.com/package/@next/bundle-analyzer)
+
+### Testing scripts
+
+- `typecheck` – checks TypeScript types
+- `lint` – runs ESLint
+- `prettier:check` – checks files with Prettier
+- `jest` – runs jest tests
+- `jest:watch` – starts jest watch
+- `test` – runs `jest`, `prettier:check`, `lint` and `typecheck` scripts
+
+### Other scripts
+
+- `storybook` – starts storybook dev server
+- `storybook:build` – build production storybook bundle to `storybook-static`
+- `prettier:write` – formats all files with Prettier

apps/admin/barrelsby.config.json

@@ -0,0 +1,6 @@
+{
+  "baseurl": "./src",
+  "delete": true,
+  "directory": ["./src/components"],
+  "noHeader": true
+}

apps/admin/jest.config.cjs

@@ -0,0 +1,17 @@
+const nextJest = require("next/jest");
+
+const createJestConfig = nextJest({
+  dir: "./",
+});
+
+const customJestConfig = {
+  setupFilesAfterEnv: ["<rootDir>/jest.setup.cjs"],
+  moduleNameMapper: {
+    "^@/components/(.*)$": "<rootDir>/components/$1",
+    "^@/pages/(.*)$": "<rootDir>/pages/$1",
+  },
+  testEnvironment: "jest-environment-jsdom",
+  moduledirectories: ["node_modules", __dirname, "test-utils"],
+};
+
+module.exports = createJestConfig(customJestConfig);

apps/admin/jest.setup.cjs

@@ -0,0 +1,26 @@
+require('@testing-library/jest-dom');
+
+const { getComputedStyle } = window;
+window.getComputedStyle = (elt) => getComputedStyle(elt);
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    removeListener: jest.fn(),
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+window.ResizeObserver = ResizeObserver;

apps/admin/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.

apps/admin/next.config.mjs

@@ -0,0 +1,26 @@
+import bundleAnalyzer from "@next/bundle-analyzer";
+import { PrismaPlugin } from "@prisma/nextjs-monorepo-workaround-plugin";
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === "true",
+});
+
+export default withBundleAnalyzer({
+  webpack: (config, { isServer }) => {
+    if (isServer) {
+      config.plugins.push(new PrismaPlugin());
+    } else config.resolve.fallback.fs = false;
+    return config;
+  },
+  reactStrictMode: false,
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  experimental: {
+    optimizePackageImports: [
+      "@mantine/core",
+      "@mantine/hooks",
+      "@kduprey/ui",
+    ],
+  },
+});

apps/admin/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@kduprey/admin",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "analyze": "ANALYZE=true next build",
+    "build": "next build",
+    "dev": "next dev -p 3401",
+    "generate-barrels": "barrelsby -c barrelsby.config.json",
+    "jest": "jest",
+    "jest:watch": "jest --watch",
+    "lint": "next lint && npm run lint:stylelint",
+    "lint:stylelint": "stylelint '**/*.css' --cache",
+    "prettier:check": "prettier --check \"**/*.{ts,tsx}\"",
+    "prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
+    "start": "next start",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "test": "npm run prettier:check && npm run lint && npm run typecheck && npm run jest",
+    "typecheck": "tsc --noEmit"
+  },
+  "prettier": "@kduprey/eslint-config/prettier",
+  "dependencies": {
+    "@clerk/nextjs": "^5.2.1",
+    "@clerk/themes": "^2.1.10",
+    "@kduprey/config": "workspace:*",
+    "@kduprey/db": "workspace:*",
+    "@kduprey/ui": "workspace:*",
+    "@kduprey/utils": "workspace:*",
+    "@mantine/core": "7.11.1",
+    "@mantine/form": "^7.11.1",
+    "@mantine/hooks": "7.11.1",
+    "@mantine/notifications": "^7.11.1",
+    "@next/bundle-analyzer": "^14.2.4",
+    "@tabler/icons": "^3.8.0",
+    "@tabler/icons-react": "^3.8.0",
+    "clsx": "^2.1.1",
+    "mantine-datatable": "^7.11.1",
+    "next": "14.2.4",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.7",
+    "@kduprey/eslint-config": "workspace:*",
+    "@kduprey/tsconfig": "workspace:*",
+    "@prisma/nextjs-monorepo-workaround-plugin": "^5.16.1",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/nextjs": "^8.1.11",
+    "@storybook/preview-api": "^8.1.11",
+    "@storybook/react": "^8.1.11",
+    "@testing-library/dom": "^10.3.0",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.9",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "babel-loader": "^9.1.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "postcss": "^8.4.39",
+    "postcss-preset-mantine": "1.15.0",
+    "postcss-simple-vars": "^7.0.1",
+    "storybook": "^8.1.11",
+    "storybook-dark-mode": "^4.0.2",
+    "stylelint": "^16.6.1",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "ts-jest": "^29.1.5",
+    "typescript": "5.5.3"
+  }
+}

apps/admin/postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    'postcss-preset-mantine': {},
+    'postcss-simple-vars': {
+      variables: {
+        'mantine-breakpoint-xs': '36em',
+        'mantine-breakpoint-sm': '48em',
+        'mantine-breakpoint-md': '62em',
+        'mantine-breakpoint-lg': '75em',
+        'mantine-breakpoint-xl': '88em',
+      },
+    },
+  },
+};

apps/admin/src/app/dashboard/layout.tsx

@@ -0,0 +1,8 @@
+import { type PropsWithChildren } from "react";
+import { DashboardLayout } from "@/components";
+
+const Layout = ({ children }: PropsWithChildren) => (
+  <DashboardLayout>{children}</DashboardLayout>
+);
+
+export default Layout;

apps/admin/src/app/dashboard/page.tsx

@@ -0,0 +1,7 @@
+import { Title } from "@mantine/core";
+
+const Page = () => {
+  return <Title pb="xl">Dashboard</Title>;
+};
+
+export default Page;

apps/admin/src/app/global.css

@@ -0,0 +1,3 @@
+@import "https://use.typekit.net/vik6drq.css";
+/* 👇 Make sure the styles are applied in the correct order */
+@layer mantine, mantine-datatable;

apps/admin/src/app/layout.tsx

@@ -0,0 +1,46 @@
+import React, { type PropsWithChildren } from "react";
+import { ColorSchemeScript, MantineProvider } from "@mantine/core";
+import { ClerkProvider } from "@clerk/nextjs";
+import { dark } from "@clerk/themes";
+import "@mantine/core/styles.layer.css";
+import "mantine-datatable/styles.layer.css";
+import "./global.css";
+import { resolver, theme } from "../theme";
+
+export const metadata = {
+  description: "Haus of Web - Admin",
+  keywords: "Haus of Web, Kenton Duprey, developer, software engineer, NYC",
+  title: "Haus of Web - Admin",
+};
+
+const RootLayout = ({ children }: Readonly<PropsWithChildren>) => {
+  return (
+    <ClerkProvider
+      appearance={{
+        baseTheme: dark,
+      }}
+    >
+      <html lang="en">
+        <head>
+          <ColorSchemeScript defaultColorScheme="auto" />
+          <link href="/favicon.svg" rel="shortcut icon" />
+          <meta
+            content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
+            name="viewport"
+          />
+        </head>
+        <body>
+          <MantineProvider
+            cssVariablesResolver={resolver}
+            defaultColorScheme="auto"
+            theme={theme}
+          >
+            {children}
+          </MantineProvider>
+        </body>
+      </html>
+    </ClerkProvider>
+  );
+};
+
+export default RootLayout;

apps/admin/src/app/page.tsx

@@ -0,0 +1,12 @@
+import { auth } from "@clerk/nextjs/server";
+import { redirect } from "next/navigation";
+
+const HomePage = () => {
+  const { userId } = auth();
+
+  if (userId) redirect("/dashboard");
+
+  redirect("/sign-in");
+};
+
+export default HomePage;

apps/admin/src/app/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,14 @@
+import { SignIn } from "@clerk/nextjs";
+import { Center, Paper } from "@mantine/core";
+
+const Page = () => {
+  return (
+    <Paper bg="black" h="100vh">
+      <Center h="100%">
+        <SignIn path="/sign-in" />
+      </Center>
+    </Paper>
+  );
+};
+
+export default Page;