create-m5kdev 0.21.2 → 0.21.4

package/templates/minimal-app/apps/server/src/modules/posts/posts.module.ts.tpl

@@ -1,5 +1,4 @@
 import { createBackendRouterMap } from "@m5kdev/backend/app";
-import type { AuthModule } from "@m5kdev/backend/modules/auth/auth.module";
 import {
   BaseModule,
   type ModuleRepositoriesContext,
@@ -12,7 +11,6 @@ import { PostsRepository } from "./posts.repository";
 import { PostsService } from "./posts.service";
 import { createPostsTRPC } from "./posts.trpc";
 
-type PostsModuleDeps = { auth: AuthModule };
 type PostsModuleTables = typeof postsTables;
 type PostsModuleRepositories = {
   posts: PostsRepository;
@@ -25,16 +23,16 @@ type PostsModuleRouters = {
 };
 
 export class PostsModule extends BaseModule<
-  PostsModuleDeps,
+  never,
   PostsModuleTables,
   PostsModuleRepositories,
   PostsModuleServices,
   PostsModuleRouters
 > {
   readonly id = "posts";
-  override readonly dependsOn = ["auth"] as const;
+  override readonly dbDependsOn = ["auth"] as const;
 
-  override repositories({ db }: ModuleRepositoriesContext<PostsModuleDeps, PostsModuleTables>) {
+  override repositories({ db }: ModuleRepositoriesContext<never, PostsModuleTables>) {
     return {
       posts: new PostsRepository({
         orm: db.orm,
@@ -44,17 +42,13 @@ export class PostsModule extends BaseModule<
     };
   }
 
-  override services({
-    repositories,
-  }: ModuleServicesContext<PostsModuleDeps, PostsModuleRepositories>) {
+  override services({ repositories }: ModuleServicesContext<never, PostsModuleRepositories>) {
     return {
       posts: new PostsService({ posts: repositories.posts }, {}, postsGrants),
     };
   }
 
-  override trpc({ trpc, services }: ModuleTRPCContext<PostsModuleDeps, PostsModuleServices>) {
+  override trpc({ trpc, services }: ModuleTRPCContext<never, PostsModuleServices>) {
     return createBackendRouterMap("posts", createPostsTRPC(trpc, services.posts));
   }
 }
-
-export const postsModule = new PostsModule();

package/templates/minimal-app/apps/server/src/modules/posts/posts.repository.ts.tpl

@@ -1,10 +1,10 @@
+import { BaseTableRepository } from "@m5kdev/backend/modules/base/base.repository";
+import type { ServerResultAsync } from "@m5kdev/backend/utils/types";
 import type {
   PostSchema,
   PostsListInputSchema,
   PostsListOutputSchema,
 } from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
-import { BaseTableRepository } from "@m5kdev/backend/modules/base/base.repository";
-import type { ServerResultAsync } from "@m5kdev/backend/utils/types";
 import { and, asc, count, desc, eq, isNull, like, ne, or } from "drizzle-orm";
 import type { LibSQLDatabase } from "drizzle-orm/libsql";
 import { err, ok } from "neverthrow";

package/templates/minimal-app/apps/server/src/modules/posts/posts.service.ts.tpl

@@ -1,3 +1,6 @@
+import { BasePermissionService } from "@m5kdev/backend/modules/base/base.service";
+import type { Context } from "@m5kdev/backend/utils/trpc";
+import type { ServerResultAsync } from "@m5kdev/backend/utils/types";
 import type {
   PostCreateInputSchema,
   PostCreateOutputSchema,
@@ -10,9 +13,6 @@ import type {
   PostUpdateInputSchema,
   PostUpdateOutputSchema,
 } from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
-import { BasePermissionService } from "@m5kdev/backend/modules/base/base.service";
-import type { ServerResultAsync } from "@m5kdev/backend/utils/types";
-import type { Context } from "@m5kdev/backend/utils/trpc";
 import { err, ok } from "neverthrow";
 import type { PostsRepository } from "./posts.repository";
 
@@ -114,7 +114,7 @@ export class PostsService extends BasePermissionService<
       return this.repository.posts.update({
         id: input.id,
         status: "published",
-        publishedAt: state.post.publishedAt ?? new Date(),
+        publishedAt: state.post?.publishedAt ?? new Date(),
       }) as ServerResultAsync<PostPublishOutputSchema>;
     });
 

package/templates/minimal-app/apps/server/src/modules/posts/posts.trpc.ts.tpl

@@ -1,3 +1,4 @@
+import { handleTRPCResult, type TRPCMethods } from "@m5kdev/backend/utils/trpc";
 import {
   postCreateInputSchema,
   postCreateOutputSchema,
@@ -10,7 +11,6 @@ import {
   postUpdateInputSchema,
   postUpdateOutputSchema,
 } from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
-import { handleTRPCResult, type TRPCMethods } from "@m5kdev/backend/utils/trpc";
 import type { PostsService } from "./posts.service";
 
 export function createPostsTRPC(

package/templates/minimal-app/apps/server/src/types.ts.tpl

@@ -1,3 +1 @@
-import type { AppRouter, RouterInputs, RouterOutputs } from "./trpc";
-
-export type { AppRouter, RouterInputs, RouterOutputs };
+export type { AppRouter } from "./app";

package/templates/minimal-app/apps/server/tsconfig.json.tpl

@@ -3,6 +3,7 @@
   "rootDir": ".",
   "compilerOptions": {
     "esModuleInterop": true,
+    "ignoreDeprecations": "6.0",
     "importHelpers": true,
     "jsx": "react-jsx",
     "noEmit": true,

package/templates/minimal-app/apps/shared/.env.example.tpl

@@ -5,6 +5,7 @@ BETTER_AUTH_SECRET=replace-me
 VITE_APP_NAME={{APP_NAME}}
 VITE_APP_URL=http://localhost:5173
 VITE_SERVER_URL=http://localhost:8080
+VITE_ENABLE_WAITLIST=false
 
 # Database
 DATABASE_URL=file:./local.db

package/templates/minimal-app/apps/shared/.env.tpl

@@ -5,6 +5,7 @@ BETTER_AUTH_SECRET={{BETTER_AUTH_SECRET}}
 VITE_APP_NAME={{APP_NAME}}
 VITE_APP_URL=http://localhost:5173
 VITE_SERVER_URL=http://localhost:8080
+VITE_ENABLE_WAITLIST=false
 
 # Database
 DATABASE_URL=file:./local.db

package/templates/minimal-app/apps/shared/src/modules/app/app.constants.ts.tpl

@@ -0,0 +1,2 @@
+export const APP_NAME = "{{APP_NAME}}";
+export const APP_SLUG = "{{APP_SLUG}}";

package/templates/minimal-app/apps/webapp/package.json.tpl

@@ -19,7 +19,6 @@
     "@m5kdev/frontend": "catalog:",
     "@m5kdev/web-ui": "catalog:",
     "@tanstack/react-query": "catalog:",
-    "@tanstack/react-query-devtools": "catalog:",
     "@trpc/client": "catalog:",
     "@trpc/tanstack-react-query": "catalog:",
     "better-auth": "catalog:",

package/templates/minimal-app/apps/webapp/public/push-sw.js

@@ -13,7 +13,7 @@ self.addEventListener("push", (event) => {
     self.registration.showNotification(payload.title, {
       body: payload.body,
       data: payload.data ?? {},
-    }),
+    })
   );
 });
 
@@ -29,6 +29,6 @@ self.addEventListener("notificationclick", (event) => {
         return self.clients.openWindow("/");
       }
       return undefined;
-    }),
+    })
   );
 });

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

@@ -1,23 +1,43 @@
-import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
-import { Button, Chip } from "@heroui/react";
+import { Chip } from "@heroui/react";
+import { buttonVariants } from "@heroui/styles";
 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 { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
 import {
   BookTextIcon,
+  Building2Icon,
   LogOutIcon,
   MoonStarIcon,
   NotebookTextIcon,
+  SettingsIcon,
+  ShieldCheckIcon,
   SunMediumIcon,
+  UserCogIcon,
+  UsersIcon,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { NavLink, Outlet } from "react-router";
 import { PushNotificationsPanel } from "./modules/notification/PushNotificationsPanel";
 
+const NAV_LINKS = [
+  { to: "/posts", labelKey: "layout.navigation.posts", icon: BookTextIcon },
+  { to: "/organization/members", labelKey: "layout.navigation.members", icon: UsersIcon },
+  { to: "/organization/manage", labelKey: "layout.navigation.childOrgs", icon: Building2Icon },
+  {
+    to: "/organization/preferences",
+    labelKey: "layout.navigation.orgPreferences",
+    icon: SettingsIcon,
+  },
+  { to: "/user/preferences", labelKey: "layout.navigation.profile", icon: UserCogIcon },
+  { to: "/user/invite", labelKey: "layout.navigation.invites", icon: UsersIcon },
+  { to: "/admin/users", labelKey: "layout.navigation.admin", icon: ShieldCheckIcon },
+] as const;
+
 export function Layout() {
   const { data: session } = useSession();
   const { theme, setTheme } = useTheme();
-  const { t } = useTranslation("blog-app");
+  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
 
   const userName = session?.user?.name || session?.user?.email || "Editor";
   const userEmail = session?.user?.email || "";
@@ -50,29 +70,28 @@ export function Layout() {
             </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>
+              <Chip className="bg-amber-100 text-amber-900">{t("layout.workspace.local")}</Chip>
+              <Chip className="bg-emerald-100 text-emerald-900">{t("layout.workspace.auth")}</Chip>
             </div>
           </div>
 
           <PushNotificationsPanel />
 
           <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_LINKS.map(({ to, labelKey, icon: Icon }) => (
+              <NavLink
+                key={to}
+                to={to}
+                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"
+                }
+              >
+                <Icon className="h-4 w-4" />
+                <span className="font-medium">{t(labelKey)}</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)]">
@@ -81,13 +100,11 @@ export function Layout() {
             </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")}
+            <div className="mt-4 flex flex-wrap items-center gap-2">
+              <button
+                type="button"
+                className={buttonVariants({ variant: "secondary", size: "sm" })}
+                onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
               >
                 {theme === "dark" ? (
                   <SunMediumIcon className="h-4 w-4" />
@@ -95,20 +112,18 @@ export function Layout() {
                   <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={() => {
+              </button>
+              <button
+                type="button"
+                className={buttonVariants({ variant: "danger", size: "sm" })}
+                onClick={() => {
                   authClient.signOut();
                   window.location.assign("/login");
                 }}
               >
                 <LogOutIcon className="h-4 w-4" />
                 {t("layout.account.signOut")}
-              </Button>
+              </button>
             </div>
           </div>
         </aside>
@@ -123,11 +138,7 @@ export function Layout() {
                 {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"
-            >
+            <Chip className="border border-emerald-300 bg-emerald-50 px-4 py-5 text-emerald-900">
               {t("layout.header.runtime")}
             </Chip>
           </header>

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

@@ -1,22 +1,32 @@
+import { AppConfigProvider } from "@m5kdev/frontend/modules/app/components/AppConfigProvider";
+import { AppTrpcQueryProvider } from "@m5kdev/frontend/modules/app/components/AppTrpcQueryProvider";
 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 { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
 import { Toaster } from "sonner";
-import { TrpcQueryProvider } from "@/components/TrpcQueryProvider";
 import { Router } from "./Router";
 
 export function Providers() {
   return (
-    <ThemeProvider defaultTheme="light" storageKey="m5kdev-theme">
-      <AuthProvider loader={<AppLoader />}>
-        <TrpcQueryProvider>
-          <DialogProvider>
-            <Router />
-          </DialogProvider>
-          <Toaster richColors closeButton />
-        </TrpcQueryProvider>
-      </AuthProvider>
-    </ThemeProvider>
+    <AppConfigProvider
+      config={{
+        appName: APP_NAME,
+        appUrl: import.meta.env.VITE_APP_URL,
+        serverUrl: import.meta.env.VITE_SERVER_URL,
+      }}
+    >
+      <ThemeProvider defaultTheme="light" storageKey="m5kdev-theme">
+        <AuthProvider loader={<AppLoader />}>
+          <AppTrpcQueryProvider>
+            <DialogProvider>
+              <Router />
+            </DialogProvider>
+            <Toaster richColors closeButton />
+          </AppTrpcQueryProvider>
+        </AuthProvider>
+      </ThemeProvider>
+    </AppConfigProvider>
   );
 }

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

@@ -1,52 +1,108 @@
-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 { AuthAdminRouter } from "@m5kdev/web-ui/modules/auth/components/AuthAdminRouter";
+import { AuthOrganizationAcceptInvitationRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationAcceptInvitationRoute";
+import { AuthOrganizationChildOrganizationsRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationChildOrganizationsRoute";
+import { AuthOrganizationMembersRoute } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationMembersRoute";
+import { AuthOrganizationPreferences } from "@m5kdev/web-ui/modules/auth/components/AuthOrganizationPreferences";
+import { AuthPublicRouter } from "@m5kdev/web-ui/modules/auth/components/AuthPublicRouter";
+import { AuthUserRouter } from "@m5kdev/web-ui/modules/auth/components/AuthUserRouter";
+import { APP_NAME } from "{{PACKAGE_SCOPE}}/shared/modules/app/app.constants";
 import type { ReactNode } from "react";
-import { Navigate, Route, Routes } from "react-router";
+import { useTranslation } from "react-i18next";
+import { Navigate, Outlet, Route, Routes } from "react-router";
+import { z } from "zod";
 import { PostsRoute } from "@/modules/posts/PostsRoute";
 import { Layout } from "./Layout";
 
-function ProtectedRoutes({ children }: { children: ReactNode }) {
+const preferenceSchema = z.object({
+  compactMode: z.boolean().optional(),
+  postsPerPage: z.number().min(1).max(20).optional(),
+});
+
+const preferenceControls = {
+  compactMode: {
+    label: "Compact mode",
+    element: "switch",
+  },
+  postsPerPage: {
+    label: "Posts per page",
+    element: "number",
+    min: 1,
+    max: 20,
+    step: 1,
+  },
+} as const;
+
+function ProtectedRoutes({ children }: { children?: ReactNode }) {
   const { data: session } = useSession();
 
   if (!session) {
     return <Navigate to="/login" replace />;
   }
 
-  return <>{children}</>;
+  return children ?? <Outlet />;
 }
 
 function AuthHeader() {
+  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
+
   return (
     <div className="text-center">
-      <p className="text-[0.68rem] font-semibold uppercase tracking-[0.32em] text-amber-700/80">
-        Editorial Workspace
+      <p className="text-[0.68rem] font-semibold uppercase tracking-[0.3em] text-default-500">
+        {t("auth.header.eyebrow")}
       </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>
+      <p className="mt-3 text-sm text-default-600">{t("auth.header.tagline")}</p>
     </div>
   );
 }
 
 export function Router() {
+  const isWaitlist = import.meta.env.VITE_ENABLE_WAITLIST === "true";
+
   return (
     <Routes>
-      {AuthRouter({
+      {AuthPublicRouter({
         header: <AuthHeader />,
+        waitlist: isWaitlist,
       })}
 
       <Route
-        path="/"
-        element={
-          <ProtectedRoutes>
-            <Layout />
-          </ProtectedRoutes>
-        }
-      >
-        <Route index element={<Navigate to="/posts" replace />} />
-        <Route path="posts" element={<PostsRoute />} />
+        path="/organization/accept-invitation"
+        element={<AuthOrganizationAcceptInvitationRoute />}
+      />
+
+      <Route element={<ProtectedRoutes />}>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Navigate to="/posts" replace />} />
+          <Route path="posts" element={<PostsRoute />} />
+          <Route
+            path="organization/members"
+            element={<AuthOrganizationMembersRoute managerRoles={["admin", "owner"]} />}
+          />
+          <Route
+            path="organization/manage"
+            element={<AuthOrganizationChildOrganizationsRoute managerRoles={["admin", "owner"]} />}
+          />
+          <Route
+            path="organization/preferences"
+            element={
+              <AuthOrganizationPreferences
+                schema={preferenceSchema}
+                controls={preferenceControls}
+                managerRoles={["admin", "owner"]}
+              />
+            }
+          />
+          {AuthUserRouter({
+            schema: preferenceSchema,
+            controls: preferenceControls,
+          })}
+          {AuthAdminRouter({
+            enableWaitlist: true,
+            enableAccountClaimActions: true,
+          })}
+        </Route>
       </Route>
     </Routes>
   );

package/templates/minimal-app/apps/webapp/src/modules/notification/PushNotificationsPanel.tsx.tpl

@@ -1,15 +1,15 @@
 import { Button, Chip } from "@heroui/react";
 import { useSession } from "@m5kdev/frontend/modules/auth/hooks/useSession";
-import { useWebPush } from "@m5kdev/web-ui/hooks/useWebPush";
+import { type UseWebPushOptions, useWebPush } from "@m5kdev/web-ui/hooks/useWebPush";
 import { BellIcon } from "lucide-react";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { useTRPC } from "../../utils/trpc";
+import { useTRPC } from "@/utils/trpc";
 
 export function PushNotificationsPanel() {
   const { data: session } = useSession();
   const trpc = useTRPC();
-  const { t } = useTranslation("blog-app");
+  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
 
   const messages = useMemo(
     () => ({
@@ -20,7 +20,7 @@ export function PushNotificationsPanel() {
       failed: t("layout.push.failed"),
       enabled: t("layout.push.enabled"),
     }),
-    [t],
+    [t]
   );
 
   const {
@@ -36,8 +36,10 @@ export function PushNotificationsPanel() {
   } = useWebPush({
     enabled: Boolean(session),
     messages,
-    vapidPublicKeyQuery: trpc.notification.vapidPublicKey.queryOptions(),
-    registerDeviceMutation: trpc.notification.registerDevice.mutationOptions(),
+    vapidPublicKeyQuery:
+      trpc.notification.vapidPublicKey.queryOptions() as unknown as UseWebPushOptions["vapidPublicKeyQuery"],
+    registerDeviceMutation:
+      trpc.notification.registerDevice.mutationOptions() as unknown as UseWebPushOptions["registerDeviceMutation"],
   });
 
   if (!session) {
@@ -71,19 +73,13 @@ export function PushNotificationsPanel() {
             <p className="mt-2 text-xs text-emerald-800/90">{t("layout.push.permissionGranted")}</p>
           ) : null}
           {feedback ? (
-            <Chip className="mt-3" color={flowStatus === "error" ? "danger" : "success"} variant="flat">
+            <Chip
+              className={`mt-3 ${flowStatus === "error" ? "bg-danger-100 text-danger-900" : "bg-success-100 text-success-900"}`}
+            >
               {feedback}
             </Chip>
           ) : null}
-          <Button
-            className="mt-3"
-            color="primary"
-            isDisabled={disabled}
-            radius="full"
-            size="sm"
-            variant="flat"
-            onPress={() => void subscribe()}
-          >
+          <Button className="mt-3" isDisabled={disabled} size="sm" onPress={() => void subscribe()}>
             {t("layout.push.cta")}
           </Button>
         </div>