Nextjs app (#225)

.github/workflows/build_and_test.yml

@@ -37,8 +37,8 @@ jobs:
       - uses: ./.github/workflows/composites/install/
       - run: pnpm build
         env:
-          # We can only build for development in CI,
-          # since production settings and builds are handled externally (e.g. by Vercel).
-          # This CI job is only for sanity testing the build process in the CI.
-          NODE_ENV: development
+          NODE_ENV: production
+          # No additional application specific environment variables should be provided here or in the CI.
+          # Application environment variables should be provided by the external deployment build system.
+          # (Providing no environment variables here also ensures that all apps support being built with zero config)
       - run: pnpm typecheck

.gitignore

@@ -20,6 +20,8 @@ test-results
 **/undefined/**
 .docusaurus
 .cache-loader
+.next
+*.tsbuildinfo
 
 # misc
 .DS_Store

apps/dashboard/src/App.tsx

@@ -22,6 +22,7 @@ import {
   ThemeInjector,
 } from "./ThemeProvider";
 import { router } from "./router";
+import "@yas/style/fonts.css";
 
 const rootRef = { current: document.documentElement };
 

apps/dashboard/src/env.ts

@@ -3,8 +3,10 @@ import { z, mode, truthy } from "@yas/validate";
 const schema = z.object({
   CI: truthy.default(false),
   mode: mode.default("development"),
-  trpcServerUrl: z.string(),
-  graphqlServerUrl: z.string(),
+  trpcServerUrl: z.string().default("http://localhost/trpc-server-url-missing"),
+  graphqlServerUrl: z
+    .string()
+    .default("http://localhost/graphql-server-url-missing"),
   showErrorDetails: truthy.default(false),
   useErrorBoundary: truthy.default(true),
 });

apps/docs/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "yas-env docusaurus start --no-open --port 3000",
+    "dev": "yas-env docusaurus start --no-open --port 3001",
     "build": "yas-env tsc --noEmit && docusaurus build --out-dir dist"
   },
   "dependencies": {

apps/docs/src/Providers.tsx

@@ -1,6 +1,7 @@
 import { ModalStore, ModalContext, ModalOutlet } from "@yas/ui";
 import type { ReactNode } from "react";
 import { useMemo } from "react";
+import "@yas/style/fonts.css";
 
 export function Providers({ children }: { children?: ReactNode }) {
   const modalStore = useMemo(() => new ModalStore(), []);

apps/storefront/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/storefront/next.config.mjs

@@ -0,0 +1,3 @@
+import nextConfig from "@yas/build/nextjs.mjs";
+
+export default nextConfig;

apps/storefront/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@yas/storefront",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build --no-lint",
+    "preview": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "next": "14.2.4",
+    "@yas/style": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@yas/tsconfig": "workspace:*",
+    "@yas/build": "workspace:*"
+  }
+}

apps/storefront/src/app/globals.css.ts

@@ -0,0 +1,116 @@
+import { globalStyle } from "@yas/style";
+
+globalStyle(":root", {
+  vars: {
+    "--max-width": "1100px",
+    "--border-radius": "12px",
+    "--font-mono": `ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+      "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+      "Fira Mono", "Droid Sans Mono", "Courier New", monospace`,
+
+    "--foreground-rgb": "0, 0, 0",
+    "--background-start-rgb": "214, 219, 220",
+    "--background-end-rgb": "255, 255, 255",
+
+    "--primary-glow": `conic-gradient(
+      from 180deg at 50% 50%,
+      #16abff33 0deg,
+      #0885ff33 55deg,
+      #54d6ff33 120deg,
+      #0071ff33 160deg,
+      transparent 360deg
+    )`,
+    "--secondary-glow": `radial-gradient(
+      rgba(255, 255, 255, 1),
+      rgba(255, 255, 255, 0)
+    )`,
+
+    "--tile-start-rgb": "239, 245, 249",
+    "--tile-end-rgb": "228, 232, 233",
+    "--tile-border": `conic-gradient(
+      #00000080,
+      #00000040,
+      #00000030,
+      #00000020,
+      #00000010,
+      #00000010,
+      #00000080
+    )`,
+
+    "--callout-rgb": "238, 240, 241",
+    "--callout-border-rgb": "172, 175, 176",
+    "--card-rgb": "180, 185, 188",
+    "--card-border-rgb": "131, 134, 135",
+  },
+
+  "@media": {
+    "(prefers-color-scheme: dark)": {
+      vars: {
+        "--foreground-rgb": "255, 255, 255",
+        "--background-start-rgb": "0, 0, 0",
+        "--background-end-rgb": "0, 0, 0",
+
+        "--primary-glow":
+          "radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0))",
+        "--secondary-glow": `linear-gradient(
+        to bottom right,
+        rgba(1, 65, 255, 0),
+        rgba(1, 65, 255, 0),
+        rgba(1, 65, 255, 0.3)
+      )`,
+
+        "--tile-start-rgb": "2, 13, 46",
+        "--tile-end-rgb": "2, 5, 19",
+        "--tile-border": `conic-gradient(
+        #ffffff80,
+        #ffffff40,
+        #ffffff30,
+        #ffffff20,
+        #ffffff10,
+        #ffffff10,
+        #ffffff80
+      )`,
+
+        "--callout-rgb": "20, 20, 20",
+        "--callout-border-rgb": "108, 108, 108",
+        "--card-rgb": "100, 100, 100",
+        "--card-border-rgb": "200, 200, 200",
+      },
+    },
+  },
+});
+
+globalStyle("*", {
+  boxSizing: "border-box",
+  padding: 0,
+  margin: 0,
+});
+
+globalStyle("html, body", {
+  maxWidth: "100vw",
+  overflowX: "hidden",
+});
+
+globalStyle("body", {
+  color: "rgb(var(--foreground-rgb))",
+  background: `linear-gradient(
+    to bottom,
+    transparent,
+    rgb(var(--background-end-rgb))
+  )
+  rgb(var(--background-start-rgb))
+  `,
+});
+
+globalStyle("a", {
+  color: "inherit",
+  textDecoration: "none",
+});
+
+globalStyle("html", {
+  "@media": {
+    "(prefers-color-scheme: dark)": {
+      colorScheme: "dark",
+    },
+  },
+});

apps/storefront/src/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

apps/storefront/src/app/page.css.ts

@@ -0,0 +1,125 @@
+import { globalStyle, style } from "@yas/style";
+
+export const main = style({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "space-between",
+  alignItems: "center",
+  padding: "6rem",
+  minHeight: "100vh",
+});
+
+export const description = style({
+  display: "inherit",
+  justifyContent: "inherit",
+  alignItems: "inherit",
+  fontSize: "0.85rem",
+  maxWidth: "var(--max-width)",
+  width: "100%",
+  zIndex: 2,
+  fontFamily: "var(--font-mono)",
+});
+
+globalStyle(`${description} a`, {
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  gap: "0.5rem",
+});
+
+globalStyle(`${description} p`, {
+  position: "relative",
+  margin: "0",
+  padding: "1rem",
+  backgroundColor: "rgba(var(--callout-rgb), 0.5)",
+  border: "1px solid rgba(var(--callout-border-rgb), 0.3)",
+  borderRadius: "var(--border-radius)",
+});
+
+export const code = style({
+  fontWeight: 700,
+  fontFamily: "var(--font-mono)",
+});
+
+export const grid = style({
+  display: "grid",
+  gridTemplateColumns: "repeat(4, minmax(25%, auto))",
+  maxWidth: "100%",
+  width: "var(--max-width)",
+});
+
+export const card = style({
+  padding: "1rem 1.2rem",
+  borderRadius: "var(--border-radius)",
+  background: "rgba(var(--card-rgb), 0)",
+  border: "1px solid rgba(var(--card-border-rgb), 0)",
+  transition: "background 200ms, border 200ms",
+});
+
+globalStyle(`${card} span`, {
+  display: "inline-block",
+  transition: "transform 200ms",
+});
+
+globalStyle(`${card} h2`, {
+  fontWeight: 600,
+  marginBottom: "0.7rem",
+});
+
+globalStyle(`${card} p`, {
+  margin: "0",
+  opacity: "0.6",
+  fontSize: "0.9rem",
+  lineHeight: "1.5",
+  maxWidth: "30ch",
+});
+
+const shared = {
+  content: "",
+  left: "50%",
+  position: "absolute",
+  filter: "blur(45px)",
+  transform: "translateZ(0)",
+} as const;
+
+export const center = style({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  position: "relative",
+  padding: "4rem 0",
+  selectors: {
+    "&:before": {
+      ...shared,
+      background: "var(--secondary-glow)",
+      borderRadius: "50%",
+      width: "480px",
+      height: "360px",
+      marginLeft: "-400px",
+    },
+    "&:after": {
+      ...shared,
+      background: "var(--primary-glow)",
+      width: "240px",
+      height: "180px",
+      zIndex: -1,
+    },
+  },
+});
+
+export const logo = style({
+  position: "relative",
+  "@media": {
+    "(prefers-color-scheme: dark)": {
+      filter: "invert(1) drop-shadow(0 0 0.3rem #ffffff70)",
+    },
+  },
+});
+
+export const vercelLogo = style({
+  "@media": {
+    "(prefers-color-scheme: dark)": {
+      filter: "invert(1)",
+    },
+  },
+});