create-m5kdev 0.21.3 → 0.21.4

package/templates/minimal-app/apps/webapp/src/modules/posts/PostsRoute.tsx.tpl

@@ -1,15 +1,3 @@
-import {
-  POST_FILTER_VALUES,
-  POSTS_PAGE_SIZE,
-} from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.constants";
-import type {
-  PostCreateInputSchema,
-  PostPublishInputSchema,
-  PostSoftDeleteInputSchema,
-  PostsListInputSchema,
-  PostsListOutputSchema,
-  PostUpdateInputSchema,
-} from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
 import {
   Button,
   Card,
@@ -23,6 +11,18 @@ import {
   TextArea,
 } from "@heroui/react";
 import { useDialog } from "@m5kdev/web-ui/components/DialogProvider";
+import {
+  POST_FILTER_VALUES,
+  POSTS_PAGE_SIZE,
+} from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.constants";
+import type {
+  PostCreateInputSchema,
+  PostPublishInputSchema,
+  PostSoftDeleteInputSchema,
+  PostsListInputSchema,
+  PostsListOutputSchema,
+  PostUpdateInputSchema,
+} from "{{PACKAGE_SCOPE}}/shared/modules/posts/posts.schema";
 import { type UseQueryOptions, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   ArrowLeftIcon,
@@ -78,7 +78,7 @@ function getReadingTime(content: string): string {
 }
 
 export function PostsRoute() {
-  const { t } = useTranslation("blog-app");
+  const { t } = useTranslation("blog{{PACKAGE_SCOPE}}");
   const trpc = useTRPC();
   const queryClient = useQueryClient();
   const showDialog = useDialog();
@@ -235,7 +235,7 @@ export function PostsRoute() {
     showDialog({
       title: t("posts.deleteDialog.title"),
       description: t("posts.deleteDialog.body"),
-      color: "danger",
+      intent: "danger",
       cancelable: true,
       confirmLabel: t("posts.deleteDialog.confirm"),
       cancelLabel: t("posts.deleteDialog.cancel"),
@@ -268,11 +268,7 @@ export function PostsRoute() {
           </h2>
           <p className="mt-4 max-w-2xl text-sm leading-7 text-muted-ink">{t("posts.hero.body")}</p>
           <div className="mt-6 flex flex-wrap gap-3">
-            <Button
-              className="rounded-full"
-              variant="primary"
-              onPress={openCreate}
-            >
+            <Button className="rounded-full" variant="primary" onPress={openCreate}>
               <span className="inline-flex items-center gap-2">
                 <PlusIcon className="h-4 w-4" />
                 {t("posts.hero.new")}
@@ -337,17 +333,25 @@ export function PostsRoute() {
                 </Select.Trigger>
                 <Select.Popover>
                   <ListBox>
-                    <ListBox.Item className="text-sm" id="all" textValue={t("posts.filters.all")}>
+                    <ListBox.Item
+                      className="text-sm"
+                      id={`${statusFieldId}-all`}
+                      textValue={t("posts.filters.all")}
+                    >
                       {t("posts.filters.all")}
                       <ListBox.ItemIndicator />
                     </ListBox.Item>
-                    <ListBox.Item className="text-sm" id="draft" textValue={t("posts.filters.draft")}>
+                    <ListBox.Item
+                      className="text-sm"
+                      id={`${statusFieldId}-draft`}
+                      textValue={t("posts.filters.draft")}
+                    >
                       {t("posts.filters.draft")}
                       <ListBox.ItemIndicator />
                     </ListBox.Item>
                     <ListBox.Item
                       className="text-sm"
-                      id="published"
+                      id={`${statusFieldId}-published`}
                       textValue={t("posts.filters.published")}
                     >
                       {t("posts.filters.published")}
@@ -395,6 +399,7 @@ export function PostsRoute() {
                 deleteMutation.isPending && deleteMutation.variables?.id === row.id;
 
               return (
+                // biome-ignore lint/a11y/useSemanticElements: post row card with nested action buttons
                 <Card
                   key={row.id}
                   role="button"
@@ -621,103 +626,100 @@ export function PostsRoute() {
         }}
       >
         <Modal.Backdrop>
-        <Modal.Container scroll="inside" size="lg" className="max-w-5xl">
-          <Modal.Dialog>
-            <form
-              className="contents"
-              onSubmit={onSubmit}
-            >
-              <Modal.Header className="flex flex-col gap-2 px-6 pt-6">
-                <p className="text-[0.68rem] font-semibold uppercase tracking-[0.28em] text-amber-700/80">
-                  {editorState.id ? t("posts.editor.editEyebrow") : t("posts.editor.newEyebrow")}
-                </p>
-                <Modal.Heading className="font-editorial text-4xl leading-none text-ink">
-                  {editorState.id ? t("posts.editor.editTitle") : t("posts.editor.newTitle")}
-                </Modal.Heading>
-              </Modal.Header>
-              <Modal.Body className="grid gap-4 px-6 pb-2">
-                <div className="grid gap-2">
-                  <Label className="text-sm font-medium" htmlFor={editorTitleId}>
-                    {t("posts.editor.fields.title")}
-                  </Label>
-                  <Input
-                    id={editorTitleId}
-                    className="rounded-lg"
-                    variant="secondary"
-                    value={editorState.title}
-                    onChange={(event) =>
-                      setEditorState((state) => ({ ...state, title: event.target.value }))
-                    }
-                    isRequired
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label className="text-sm font-medium" htmlFor={editorSlugId}>
-                    {t("posts.editor.fields.slug")}
-                  </Label>
-                  <Input
-                    id={editorSlugId}
-                    className="rounded-lg"
-                    variant="secondary"
-                    value={editorState.slug}
-                    onChange={(event) =>
-                      setEditorState((state) => ({ ...state, slug: event.target.value }))
-                    }
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label className="text-sm font-medium" htmlFor={editorExcerptId}>
-                    {t("posts.editor.fields.excerpt")}
-                  </Label>
-                  <TextArea
-                    id={editorExcerptId}
-                    className="rounded-lg min-h-[5.5rem]"
-                    variant="secondary"
-                    rows={3}
-                    value={editorState.excerpt}
-                    onChange={(event) =>
-                      setEditorState((state) => ({ ...state, excerpt: event.target.value }))
-                    }
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label className="text-sm font-medium" htmlFor={editorContentId}>
-                    {t("posts.editor.fields.content")}
-                  </Label>
-                  <TextArea
-                    id={editorContentId}
-                    className="rounded-lg min-h-[12rem]"
-                    variant="secondary"
-                    rows={10}
-                    value={editorState.content}
-                    onChange={(event) =>
-                      setEditorState((state) => ({ ...state, content: event.target.value }))
-                    }
-                    isRequired
-                  />
-                </div>
-              </Modal.Body>
-              <Modal.Footer className="px-6 pb-6">
-                <Button
-                  className="rounded-full"
-                  variant="tertiary"
-                  type="button"
-                  onPress={() => setIsEditorOpen(false)}
-                >
-                  {t("posts.editor.cancel")}
-                </Button>
-                <Button
-                  className="rounded-full"
-                  variant="primary"
-                  type="submit"
-                  isPending={createMutation.isPending || updateMutation.isPending}
-                >
-                  {editorState.id ? t("posts.editor.save") : t("posts.editor.create")}
-                </Button>
-              </Modal.Footer>
-            </form>
-          </Modal.Dialog>
-        </Modal.Container>
+          <Modal.Container scroll="inside" size="lg" className="max-w-5xl">
+            <Modal.Dialog>
+              <form className="contents" onSubmit={onSubmit}>
+                <Modal.Header className="flex flex-col gap-2 px-6 pt-6">
+                  <p className="text-[0.68rem] font-semibold uppercase tracking-[0.28em] text-amber-700/80">
+                    {editorState.id ? t("posts.editor.editEyebrow") : t("posts.editor.newEyebrow")}
+                  </p>
+                  <Modal.Heading className="font-editorial text-4xl leading-none text-ink">
+                    {editorState.id ? t("posts.editor.editTitle") : t("posts.editor.newTitle")}
+                  </Modal.Heading>
+                </Modal.Header>
+                <Modal.Body className="grid gap-4 px-6 pb-2">
+                  <div className="grid gap-2">
+                    <Label className="text-sm font-medium" htmlFor={editorTitleId}>
+                      {t("posts.editor.fields.title")}
+                    </Label>
+                    <Input
+                      id={editorTitleId}
+                      className="rounded-lg"
+                      variant="secondary"
+                      value={editorState.title}
+                      onChange={(event) =>
+                        setEditorState((state) => ({ ...state, title: event.target.value }))
+                      }
+                      required
+                    />
+                  </div>
+                  <div className="grid gap-2">
+                    <Label className="text-sm font-medium" htmlFor={editorSlugId}>
+                      {t("posts.editor.fields.slug")}
+                    </Label>
+                    <Input
+                      id={editorSlugId}
+                      className="rounded-lg"
+                      variant="secondary"
+                      value={editorState.slug}
+                      onChange={(event) =>
+                        setEditorState((state) => ({ ...state, slug: event.target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="grid gap-2">
+                    <Label className="text-sm font-medium" htmlFor={editorExcerptId}>
+                      {t("posts.editor.fields.excerpt")}
+                    </Label>
+                    <TextArea
+                      id={editorExcerptId}
+                      className="rounded-lg min-h-[5.5rem]"
+                      variant="secondary"
+                      rows={3}
+                      value={editorState.excerpt}
+                      onChange={(event) =>
+                        setEditorState((state) => ({ ...state, excerpt: event.target.value }))
+                      }
+                    />
+                  </div>
+                  <div className="grid gap-2">
+                    <Label className="text-sm font-medium" htmlFor={editorContentId}>
+                      {t("posts.editor.fields.content")}
+                    </Label>
+                    <TextArea
+                      id={editorContentId}
+                      className="rounded-lg min-h-[12rem]"
+                      variant="secondary"
+                      rows={10}
+                      value={editorState.content}
+                      onChange={(event) =>
+                        setEditorState((state) => ({ ...state, content: event.target.value }))
+                      }
+                      required
+                    />
+                  </div>
+                </Modal.Body>
+                <Modal.Footer className="px-6 pb-6">
+                  <Button
+                    className="rounded-full"
+                    variant="tertiary"
+                    type="button"
+                    onPress={() => setIsEditorOpen(false)}
+                  >
+                    {t("posts.editor.cancel")}
+                  </Button>
+                  <Button
+                    className="rounded-full"
+                    variant="primary"
+                    type="submit"
+                    isPending={createMutation.isPending || updateMutation.isPending}
+                  >
+                    {editorState.id ? t("posts.editor.save") : t("posts.editor.create")}
+                  </Button>
+                </Modal.Footer>
+              </form>
+            </Modal.Dialog>
+          </Modal.Container>
         </Modal.Backdrop>
       </Modal>
     </div>

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

@@ -1,4 +1,6 @@
+import { useAppTRPC } from "@m5kdev/frontend/modules/app/hooks/useAppTrpc";
 import type { AppRouter } from "{{PACKAGE_SCOPE}}/server/types";
-import { createTRPCContext } from "@trpc/tanstack-react-query";
-
-export const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<AppRouter>();
+import type { TRPCOptionsProxy } from "@trpc/tanstack-react-query";
+export function useTRPC(): TRPCOptionsProxy<AppRouter> {
+  return useAppTRPC<AppRouter>();
+}

package/templates/minimal-app/apps/webapp/translations/en/blog-app.json.tpl

@@ -12,7 +12,13 @@
       "auth": "Better Auth"
     },
     "navigation": {
-      "posts": "Posts"
+      "posts": "Posts",
+      "members": "Members",
+      "childOrgs": "Child orgs",
+      "orgPreferences": "Org preferences",
+      "profile": "Profile",
+      "invites": "Invites",
+      "admin": "Admin"
     },
     "push": {
       "eyebrow": "Browser push",
@@ -117,5 +123,11 @@
       "deleted": "Post archived.",
       "validation": "Title and content are required."
     }
+  },
+  "auth": {
+    "header": {
+      "eyebrow": "Framework Starter",
+      "tagline": "A minimal m5kdev starter with auth, tRPC, and one polished posts module."
+    }
   }
 }

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

@@ -2,6 +2,7 @@
   "extends": "@m5kdev/config/tsconfig.vite.json",
   "compilerOptions": {
     "baseUrl": ".",
+    "ignoreDeprecations": "6.0",
     "rootDir": ".",
     "outDir": "dist",
     "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",

package/templates/minimal-app/pnpm-workspace.yaml.tpl

@@ -3,18 +3,17 @@ packages:
 
 catalog:
   '@biomejs/biome': 2.2.0
-  '@heroui/react': 3.0.2
-  '@heroui/styles': 3.0.2
+  '@heroui/react': 3.0.3
+  '@heroui/styles': 3.0.3
   '@libsql/client': 0.17.0
-  '@m5kdev/backend': 0.3.3
-  '@m5kdev/commons': 0.3.3
-  '@m5kdev/config': 0.3.3
-  '@m5kdev/frontend': 0.3.3
-  '@m5kdev/web-ui': 0.3.3
+  '@m5kdev/backend': 0.21.3
+  '@m5kdev/commons': 0.21.3
+  '@m5kdev/config': 0.21.3
+  '@m5kdev/frontend': 0.21.3
+  '@m5kdev/web-ui': 0.21.3
   '@react-email/components': 1.0.1
   '@tailwindcss/vite': 4.1.11
   '@tanstack/react-query': 5.83.0
-  '@tanstack/react-query-devtools': 5.83.0
   '@trpc/client': 11.4.3
   '@trpc/server': 11.4.3
   '@trpc/tanstack-react-query': 11.4.3
@@ -32,6 +31,7 @@ catalog:
   drizzle-orm: 0.44.3
   express: 4.21.2
   i18next: 25.3.2
+  ioredis: 5.7.0
   lucide-react: 0.488.0
   neverthrow: 8.2.0
   nuqs: 2.4.3

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

@@ -1,33 +0,0 @@
-import { defineBackendModules } from "@m5kdev/backend/app";
-import { AuthModule } from "@m5kdev/backend/modules/auth/auth.module";
-import { EmailModule } from "@m5kdev/backend/modules/email/email.module";
-import { NotificationModule } from "@m5kdev/backend/modules/notification/notification.module";
-import { WorkflowModule } from "@m5kdev/backend/modules/workflow/workflow.module";
-import { templates } from "{{PACKAGE_SCOPE}}/email";
-import { PostsModule } from "./modules/posts/posts.module";
-
-export const emailBackendModule = new EmailModule(templates as never);
-
-export const authBackendModule = new AuthModule();
-
-export const workflowBackendModule = new WorkflowModule({
-  queues: {
-    fast: { concurrency: 5 },
-  },
-  defaultQueue: "fast",
-  defaults: {
-    timeout: 60_000,
-    jobOptions: { removeOnComplete: { age: 3600 } },
-  },
-});
-
-export const notificationBackendModule = new NotificationModule();
-export const postsBackendModule = new PostsModule();
-
-export const backendModules = defineBackendModules([
-  emailBackendModule,
-  authBackendModule,
-  workflowBackendModule,
-  notificationBackendModule,
-  postsBackendModule,
-] as const);

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

@@ -1,6 +0,0 @@
-import { builtBackendApp } from "./app";
-
-export const authRepository = builtBackendApp.modules.auth.repositories.auth;
-export const workflowRepository = builtBackendApp.modules.workflow.repositories.workflow;
-export const notificationRepository = builtBackendApp.modules.notification.repositories.notification;
-export const postsRepository = builtBackendApp.modules.posts.repositories.posts;

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

@@ -1,19 +0,0 @@
-import { defineBackendModule, defineBackendModules } from "@m5kdev/backend/app";
-import {
-  authBackendModule,
-  notificationBackendModule,
-  postsBackendModule,
-  workflowBackendModule,
-} from "./modules";
-
-export const emailSchemaModule = defineBackendModule({
-  id: "email",
-});
-
-export const backendSchemaModules = defineBackendModules([
-  emailSchemaModule,
-  authBackendModule,
-  workflowBackendModule,
-  notificationBackendModule,
-  postsBackendModule,
-] as const);

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

@@ -1,7 +0,0 @@
-import { builtBackendApp, emailService } from "./app";
-
-export { emailService };
-
-export const authService = builtBackendApp.modules.auth.services.auth;
-export const postsService = builtBackendApp.modules.posts.services.posts;
-export const notificationService = builtBackendApp.modules.notification.services.notification;

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

@@ -1,6 +0,0 @@
-export {
-  appRouter,
-  type AppRouter,
-  type RouterInputs,
-  type RouterOutputs,
-} from "./app";

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

@@ -1,4 +0,0 @@
-import { builtBackendApp } from "./app";
-
-export const workflowService = builtBackendApp.modules.workflow.services.workflow;
-export const workflowRegistry = builtBackendApp.workflow!.registry;

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

@@ -1,61 +0,0 @@
-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>
-  );
-}