create-m5kdev 0.4.0

package/templates/minimal-app/apps/webapp/src/Layout.tsx.tpl

@@ -0,0 +1,139 @@
+import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import { Button, Chip } from "@heroui/react";
+import { authClient } from "@m5kdev/frontend/modules/auth/auth.lib";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { useTheme } from "@m5kdev/web-ui/components/theme-provider";
+import {
+  BookTextIcon,
+  LogOutIcon,
+  MoonStarIcon,
+  NotebookTextIcon,
+  SunMediumIcon,
+} from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { NavLink, Outlet } from "react-router";
+
+export function Layout() {
+  const { data: session } = useSession();
+  const { theme, setTheme } = useTheme();
+  const { t } = useTranslation("blog-app");
+
+  const userName = session?.user?.name || session?.user?.email || "Editor";
+  const userEmail = session?.user?.email || "";
+
+  return (
+    <div className="min-h-screen bg-canvas text-foreground">
+      <div className="mx-auto flex min-h-screen max-w-[1600px] flex-col gap-6 px-4 py-4 lg:flex-row lg:px-6">
+        <aside className="w-full rounded-[32px] border border-white/60 bg-white/70 p-5 shadow-[0_24px_60px_rgba(81,50,24,0.14)] backdrop-blur xl:w-[320px]">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <p className="text-[0.68rem] font-semibold uppercase tracking-[0.32em] text-amber-700/80">
+                {t("layout.brand.eyebrow")}
+              </p>
+              <h1 className="mt-3 font-editorial text-4xl leading-none text-ink">{APP_NAME}</h1>
+              <p className="mt-3 max-w-[22ch] text-sm leading-6 text-ink/70">
+                {t("layout.brand.tagline")}
+              </p>
+            </div>
+            <div className="rounded-full border border-amber-200 bg-amber-50/90 p-3 text-amber-700">
+              <NotebookTextIcon className="h-5 w-5" />
+            </div>
+          </div>
+
+          <div className="mt-8 rounded-[28px] border border-amber-200/70 bg-amber-50/85 p-4">
+            <p className="text-[0.68rem] font-semibold uppercase tracking-[0.28em] text-amber-700/80">
+              {t("layout.workspace.eyebrow")}
+            </p>
+            <p className="mt-3 font-editorial text-2xl leading-none text-ink">
+              {t("layout.workspace.title")}
+            </p>
+            <p className="mt-3 text-sm leading-6 text-ink/75">{t("layout.workspace.body")}</p>
+            <div className="mt-4 flex flex-wrap gap-2">
+              <Chip color="warning" variant="flat">
+                {t("layout.workspace.local")}
+              </Chip>
+              <Chip color="success" variant="flat">
+                {t("layout.workspace.auth")}
+              </Chip>
+            </div>
+          </div>
+
+          <nav className="mt-8 grid gap-2">
+            <NavLink
+              to="/posts"
+              className={({ isActive }) =>
+                isActive
+                  ? "group flex items-center gap-3 rounded-[22px] border border-emerald-300 bg-emerald-950 px-4 py-3 text-emerald-50"
+                  : "group flex items-center gap-3 rounded-[22px] border border-transparent bg-transparent px-4 py-3 text-ink/80 transition hover:border-amber-200 hover:bg-white/70"
+              }
+            >
+              <BookTextIcon className="h-4 w-4" />
+              <span className="font-medium">{t("layout.navigation.posts")}</span>
+            </NavLink>
+          </nav>
+
+          <div className="mt-8 rounded-[28px] border border-white/60 bg-stone-950 px-4 py-4 text-stone-100 shadow-[0_16px_32px_rgba(23,19,20,0.2)]">
+            <p className="text-xs uppercase tracking-[0.24em] text-stone-400">
+              {t("layout.account.eyebrow")}
+            </p>
+            <p className="mt-3 text-lg font-semibold">{userName}</p>
+            <p className="mt-1 text-sm text-stone-300">{userEmail}</p>
+            <div className="mt-4 flex items-center gap-2">
+              <Button
+                radius="full"
+                size="sm"
+                variant="flat"
+                className="bg-stone-800 text-stone-100"
+                onPress={() => setTheme(theme === "dark" ? "light" : "dark")}
+              >
+                {theme === "dark" ? (
+                  <SunMediumIcon className="h-4 w-4" />
+                ) : (
+                  <MoonStarIcon className="h-4 w-4" />
+                )}
+                {theme === "dark" ? t("layout.account.light") : t("layout.account.dark")}
+              </Button>
+              <Button
+                radius="full"
+                size="sm"
+                color="danger"
+                variant="flat"
+                onPress={() => {
+                  authClient.signOut();
+                  window.location.assign("/login");
+                }}
+              >
+                <LogOutIcon className="h-4 w-4" />
+                {t("layout.account.signOut")}
+              </Button>
+            </div>
+          </div>
+        </aside>
+
+        <main className="flex min-h-[calc(100vh-2rem)] flex-1 flex-col rounded-[32px] border border-white/60 bg-white/72 shadow-[0_24px_60px_rgba(81,50,24,0.14)] backdrop-blur">
+          <header className="flex flex-wrap items-center justify-between gap-4 border-b border-white/70 px-6 py-5">
+            <div>
+              <p className="text-[0.68rem] font-semibold uppercase tracking-[0.28em] text-emerald-800/70">
+                {t("layout.header.eyebrow")}
+              </p>
+              <h2 className="mt-2 font-editorial text-4xl leading-none text-ink">
+                {t("layout.header.title")}
+              </h2>
+            </div>
+            <Chip
+              radius="full"
+              className="border border-emerald-300 bg-emerald-50 px-4 py-5 text-emerald-900"
+              variant="bordered"
+            >
+              {t("layout.header.runtime")}
+            </Chip>
+          </header>
+
+          <div className="flex-1 px-4 py-4 sm:px-6 sm:py-6">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}

package/templates/minimal-app/apps/webapp/src/Providers.tsx.tpl

@@ -0,0 +1,28 @@
+import { HeroUIProvider } from "@heroui/react";
+import { AuthProvider } from "@m5kdev/frontend/modules/auth/components/AuthProvider";
+import { DialogProvider } from "@m5kdev/web-ui/components/DialogProvider";
+import { ThemeProvider } from "@m5kdev/web-ui/components/theme-provider";
+import { AppLoader } from "@m5kdev/web-ui/modules/app/components/AppLoader";
+import { useHref, useNavigate } from "react-router";
+import { Toaster } from "sonner";
+import { TrpcQueryProvider } from "@/components/TrpcQueryProvider";
+import { Router } from "./Router";
+
+export function Providers() {
+  const navigate = useNavigate();
+
+  return (
+    <HeroUIProvider navigate={navigate} useHref={useHref}>
+      <ThemeProvider defaultTheme="light" storageKey="m5kdev-theme">
+        <AuthProvider loader={<AppLoader />}>
+          <TrpcQueryProvider>
+            <DialogProvider>
+              <Router />
+            </DialogProvider>
+            <Toaster richColors closeButton />
+          </TrpcQueryProvider>
+        </AuthProvider>
+      </ThemeProvider>
+    </HeroUIProvider>
+  );
+}

package/templates/minimal-app/apps/webapp/src/Router.tsx.tpl

@@ -0,0 +1,53 @@
+import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
+import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
+import { AuthRouter } from "@m5kdev/web-ui/modules/auth/components/AuthRouter";
+import type { ReactNode } from "react";
+import { Navigate, Route, Routes } from "react-router";
+import { PostsRoute } from "@/modules/posts/PostsRoute";
+import { Layout } from "./Layout";
+
+function ProtectedRoutes({ children }: { children: ReactNode }) {
+  const { data: session } = useSession();
+
+  if (!session) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <>{children}</>;
+}
+
+function AuthHeader() {
+  return (
+    <div className="text-center">
+      <p className="text-[0.68rem] font-semibold uppercase tracking-[0.32em] text-amber-700/80">
+        Editorial Workspace
+      </p>
+      <h1 className="mt-3 font-editorial text-4xl text-ink">{APP_NAME}</h1>
+      <p className="mt-3 text-sm text-ink/70">
+        A minimal m5kdev starter with auth, tRPC, and one polished posts module.
+      </p>
+    </div>
+  );
+}
+
+export function Router() {
+  return (
+    <Routes>
+      {AuthRouter({
+        header: <AuthHeader />,
+      })}
+
+      <Route
+        path="/"
+        element={
+          <ProtectedRoutes>
+            <Layout />
+          </ProtectedRoutes>
+        }
+      >
+        <Route index element={<Navigate to="/posts" replace />} />
+        <Route path="posts" element={<PostsRoute />} />
+      </Route>
+    </Routes>
+  );
+}

package/templates/minimal-app/apps/webapp/src/components/TrpcQueryProvider.tsx.tpl

@@ -0,0 +1,61 @@
+import type { AppRouter } from "{{PACKAGE_SCOPE}}/server/types";
+import { transformer } from "@m5kdev/commons/utils/trpc";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { createTRPCClient, httpBatchLink } from "@trpc/client";
+import { type ReactNode, useState } from "react";
+import { TRPCProvider } from "@/utils/trpc";
+
+let browserQueryClient: QueryClient | undefined;
+
+function createQueryClient() {
+  return new QueryClient({
+    defaultOptions: {
+      queries: {
+        staleTime: 60 * 1000,
+      },
+    },
+  });
+}
+
+function getQueryClient() {
+  if (typeof window === "undefined") {
+    return createQueryClient();
+  }
+
+  if (!browserQueryClient) {
+    browserQueryClient = createQueryClient();
+  }
+
+  return browserQueryClient;
+}
+
+export function TrpcQueryProvider({ children }: { children: ReactNode }) {
+  const queryClient = getQueryClient();
+  const [trpcClient] = useState(() =>
+    createTRPCClient<AppRouter>({
+      links: [
+        httpBatchLink({
+          url: `${import.meta.env.VITE_SERVER_URL}/trpc`,
+          fetch(url, options) {
+            return fetch(url, {
+              ...options,
+              body: options?.body ? (options.body as BodyInit | null | undefined) : undefined,
+              credentials: "include",
+            });
+          },
+          transformer,
+        }),
+      ],
+    })
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+        {children}
+      </TRPCProvider>
+      <ReactQueryDevtools client={queryClient} />
+    </QueryClientProvider>
+  );
+}

package/templates/minimal-app/apps/webapp/src/hero.ts.tpl

@@ -0,0 +1,99 @@
+import { heroui } from "@heroui/react";
+
+export default heroui({
+  themes: {
+    light: {
+      colors: {
+        primary: {
+          "50": "#edf7f4",
+          "100": "#cfeadd",
+          "200": "#adddc5",
+          "300": "#88cfac",
+          "400": "#61c091",
+          "500": "#1f4f46",
+          "600": "#19433b",
+          "700": "#12362f",
+          "800": "#0c2923",
+          "900": "#051a16",
+          DEFAULT: "#1f4f46",
+          foreground: "#fff8ef",
+        },
+        secondary: {
+          "50": "#fff4e5",
+          "100": "#fce2bd",
+          "200": "#f8cf95",
+          "300": "#f4bc6d",
+          "400": "#efaa45",
+          "500": "#c7782d",
+          "600": "#a16024",
+          "700": "#7b491b",
+          "800": "#553112",
+          "900": "#301a09",
+          DEFAULT: "#c7782d",
+          foreground: "#fff9f2",
+        },
+        background: "#f4ede2",
+        foreground: "#171314",
+        content1: {
+          DEFAULT: "#fffaf1",
+          foreground: "#171314",
+        },
+        content2: {
+          DEFAULT: "#f4ede2",
+          foreground: "#171314",
+        },
+        focus: "#1f4f46",
+      },
+    },
+    dark: {
+      colors: {
+        primary: {
+          "50": "#e2f3ef",
+          "100": "#beded7",
+          "200": "#98c8bc",
+          "300": "#71b2a1",
+          "400": "#4b9c86",
+          "500": "#2d8470",
+          "600": "#236959",
+          "700": "#194e42",
+          "800": "#10332b",
+          "900": "#061815",
+          DEFAULT: "#71b2a1",
+          foreground: "#071613",
+        },
+        secondary: {
+          "50": "#fff4e5",
+          "100": "#f6dcb0",
+          "200": "#eec379",
+          "300": "#e6aa42",
+          "400": "#d88d27",
+          "500": "#b97221",
+          "600": "#935a1b",
+          "700": "#6d4214",
+          "800": "#472b0d",
+          "900": "#231406",
+          DEFAULT: "#e6aa42",
+          foreground: "#211306",
+        },
+        background: "#12100f",
+        foreground: "#f7f1e8",
+        content1: {
+          DEFAULT: "#1d1917",
+          foreground: "#f7f1e8",
+        },
+        content2: {
+          DEFAULT: "#26211f",
+          foreground: "#f7f1e8",
+        },
+        focus: "#71b2a1",
+      },
+    },
+  },
+  layout: {
+    radius: {
+      small: "18px",
+      medium: "24px",
+      large: "32px",
+    },
+  },
+});

package/templates/minimal-app/apps/webapp/src/index.css.tpl

@@ -0,0 +1,75 @@
+/* biome-ignore-all lint/suspicious/noUnknownAtRules: Tailwind v4 */
+
+@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@plugin './hero.ts';
+
+@source "./src/**/*.{ts,tsx}";
+@source "../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}";
+@source "../../node_modules/@m5kdev/web-ui/dist/src/**/*.{js,ts,jsx,tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --canvas: #f4ede2;
+  --ink: #171314;
+  --muted-ink: #6f635c;
+  --panel: #fffaf1;
+  --panel-strong: #f8efdf;
+  --line: rgba(124, 93, 55, 0.18);
+  --halo: rgba(231, 182, 100, 0.28);
+}
+
+.dark {
+  --canvas: #12100f;
+  --ink: #f7f1e8;
+  --muted-ink: #b9aba0;
+  --panel: #1d1917;
+  --panel-strong: #26211f;
+  --line: rgba(255, 240, 219, 0.12);
+  --halo: rgba(77, 162, 143, 0.22);
+}
+
+@theme inline {
+  --color-canvas: var(--canvas);
+  --color-ink: var(--ink);
+  --color-muted-ink: var(--muted-ink);
+  --color-panel: var(--panel);
+  --color-panel-strong: var(--panel-strong);
+  --color-line: var(--line);
+  --color-halo: var(--halo);
+}
+
+@layer base {
+  * {
+    @apply border-line;
+  }
+
+  html,
+  body,
+  #root {
+    min-height: 100%;
+  }
+
+  body {
+    @apply bg-canvas text-ink;
+    background-image:
+      radial-gradient(circle at top left, rgba(246, 189, 96, 0.16), transparent 28%),
+      radial-gradient(circle at 80% 10%, rgba(31, 79, 70, 0.14), transparent 22%),
+      linear-gradient(180deg, rgba(255, 250, 241, 0.36), rgba(244, 237, 226, 0.1));
+    font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
+  }
+
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
+  }
+}
+
+.font-editorial {
+  font-family: "Cormorant Garamond", Georgia, serif;
+}

package/templates/minimal-app/apps/webapp/src/main.tsx.tpl

@@ -0,0 +1,26 @@
+import type { PostHogConfig } from "posthog-js";
+import { PostHogProvider } from "posthog-js/react";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./index.css";
+import "./utils/i18n";
+
+const options = {
+  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
+  defaults: "2025-05-24",
+} satisfies Partial<PostHogConfig>;
+
+const rootElement = document.getElementById("root");
+
+if (!rootElement) {
+  throw new Error("Root element #root not found.");
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <PostHogProvider apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY ?? "demo"} options={options}>
+      <App />
+    </PostHogProvider>
+  </StrictMode>
+);