create-m5kdev 0.33.0 → 0.34.0

package/templates/minimal-app/apps/webapp/src/modules/files/FilesRoute.tsx.tpl

@@ -0,0 +1,88 @@
+import { Button, Card, Chip, EmptyState, Skeleton } from "@heroui/react";
+import { ImageIcon, UploadIcon } from "lucide-react";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { useFilesRoute } from "./hooks/useFilesRoute";
+
+export function FilesRoute() {
+  const { t } = useTranslation("{{APP_SLUG}}");
+  const files = useFilesRoute();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className="p-4 grid gap-6" data-testid="files-route">
+      <Card>
+        <Card.Header className="flex flex-col gap-1">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted">
+            {t("files.hero.eyebrow")}
+          </p>
+          <Card.Title>{t("files.hero.title")}</Card.Title>
+          <Card.Description>{t("files.hero.body")}</Card.Description>
+        </Card.Header>
+        <Card.Content className="grid gap-4">
+          <div className="flex flex-wrap items-center gap-3">
+            <input
+              ref={inputRef}
+              type="file"
+              accept="image/jpeg,image/png,image/webp"
+              className="sr-only"
+              data-testid="file-upload-input"
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                if (file) files.upload(file);
+                event.target.value = "";
+              }}
+            />
+            <Button
+              variant="primary"
+              isDisabled={files.isUploading}
+              data-testid="file-upload"
+              onPress={() => inputRef.current?.click()}
+            >
+              <span className="inline-flex items-center gap-2">
+                <UploadIcon className="h-4 w-4" />
+                {t("files.hero.upload")}
+              </span>
+            </Button>
+            <Chip variant="soft" color="default">
+              {files.isFetching ? t("files.hero.syncing") : t("files.hero.synced")}
+            </Chip>
+          </div>
+        </Card.Content>
+      </Card>
+
+      {files.isLoading ? (
+        <div className="grid gap-3">
+          <Skeleton className="h-24 rounded-xl" />
+          <Skeleton className="h-24 rounded-xl" />
+        </div>
+      ) : files.rows.length === 0 ? (
+        <EmptyState className="flex flex-col items-center gap-4 py-10 text-center">
+          <ImageIcon className="size-6 text-muted" />
+          <div className="grid gap-2">
+            <p className="text-lg font-semibold">{t("files.empty.title")}</p>
+            <p className="max-w-xl text-sm text-muted">{t("files.empty.body")}</p>
+          </div>
+        </EmptyState>
+      ) : (
+        <div className="grid gap-3">
+          {files.rows.map((row) => (
+            <Card key={row.id} data-testid="file-row">
+              <Card.Header className="flex flex-wrap items-start justify-between gap-3">
+                <div className="grid gap-1">
+                  <Card.Title>{row.originalName}</Card.Title>
+                  <Card.Description>{row.contentType}</Card.Description>
+                </div>
+                {row.memberId ? (
+                  <Chip size="sm" variant="soft" color="default">
+                    {t("files.row.organization")}
+                  </Chip>
+                ) : null}
+              </Card.Header>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/minimal-app/apps/webapp/src/modules/files/hooks/useFilesRoute.ts.tpl

@@ -0,0 +1,50 @@
+import { useFileUpload } from "@m5kdev/frontend/modules/file/hooks/useUpload";
+import type { AppRouter } from "{{PACKAGE_SCOPE}}/server/types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { inferRouterOutputs } from "@trpc/server";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useTRPC } from "@/utils/trpc";
+
+type FileListOutput = inferRouterOutputs<AppRouter>["file"]["list"];
+type FileRow = FileListOutput["rows"][number];
+
+interface FilesRouteState {
+  readonly rows: FileRow[];
+  readonly isLoading: boolean;
+  readonly isFetching: boolean;
+  readonly isUploading: boolean;
+  readonly upload: (file: File) => void;
+}
+
+export function useFilesRoute(): FilesRouteState {
+  const { t } = useTranslation("{{APP_SLUG}}");
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+  const fileUpload = useFileUpload();
+
+  const listQuery = useQuery(trpc.file.list.queryOptions({}));
+
+  const uploadMutation = useMutation({
+    mutationFn: async (file: File) => {
+      await fileUpload.upload("image", file);
+    },
+    onSuccess: async () => {
+      toast.success(t("files.toast.uploaded"));
+      await queryClient.invalidateQueries(trpc.file.list.queryFilter());
+    },
+    onError: (error) => {
+      toast.error(error instanceof Error ? error.message : t("files.toast.failed"));
+    },
+  });
+
+  return {
+    rows: listQuery.data?.rows ?? [],
+    isLoading: listQuery.isLoading,
+    isFetching: listQuery.isFetching,
+    isUploading: uploadMutation.isPending,
+    upload: (file: File) => {
+      void uploadMutation.mutateAsync(file).catch(() => undefined);
+    },
+  };
+}

package/templates/minimal-app/apps/webapp/src/modules/workflows/WorkflowsRoute.tsx.tpl

@@ -0,0 +1,97 @@
+import { Button, Card, Chip, EmptyState, Skeleton } from "@heroui/react";
+import type { WorkflowStatus } from "@m5kdev/commons/modules/workflow/workflow.constants";
+import { PlayIcon, WorkflowIcon } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { useWorkflowsRoute } from "./hooks/useWorkflowsRoute";
+
+function statusColor(status: WorkflowStatus): "success" | "danger" | "warning" | "default" {
+  if (status === "completed") return "success";
+  if (status === "failed") return "danger";
+  if (status === "running") return "warning";
+  return "default";
+}
+
+function formatTimestamp(value: Date | string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "short",
+  }).format(new Date(value));
+}
+
+export function WorkflowsRoute() {
+  const { t } = useTranslation("{{APP_SLUG}}");
+  const workflows = useWorkflowsRoute();
+
+  return (
+    <div className="p-4 grid gap-6" data-testid="workflows-route">
+      <Card>
+        <Card.Header className="flex flex-col gap-1">
+          <p className="text-xs font-medium uppercase tracking-wide text-muted">
+            {t("workflows.hero.eyebrow")}
+          </p>
+          <Card.Title>{t("workflows.hero.title")}</Card.Title>
+          <Card.Description>{t("workflows.hero.body")}</Card.Description>
+        </Card.Header>
+        <Card.Content className="grid gap-4">
+          <div className="flex flex-wrap items-center gap-3">
+            <Button
+              variant="primary"
+              isDisabled={workflows.isTriggering}
+              data-testid="workflow-trigger"
+              onPress={() => workflows.trigger()}
+            >
+              <span className="inline-flex items-center gap-2">
+                <PlayIcon className="h-4 w-4" />
+                {t("workflows.hero.run")}
+              </span>
+            </Button>
+            <Chip variant="soft" color="default">
+              {workflows.isFetching ? t("workflows.hero.syncing") : t("workflows.hero.synced")}
+            </Chip>
+          </div>
+        </Card.Content>
+      </Card>
+
+      {workflows.isLoading ? (
+        <div className="grid gap-3">
+          <Skeleton className="h-24 rounded-xl" />
+          <Skeleton className="h-24 rounded-xl" />
+        </div>
+      ) : workflows.rows.length === 0 ? (
+        <EmptyState className="flex flex-col items-center gap-4 py-10 text-center">
+          <WorkflowIcon className="size-6 text-muted" />
+          <div className="grid gap-2">
+            <p className="text-lg font-semibold">{t("workflows.empty.title")}</p>
+            <p className="max-w-xl text-sm text-muted">{t("workflows.empty.body")}</p>
+          </div>
+        </EmptyState>
+      ) : (
+        <div className="grid gap-3">
+          {workflows.rows.map((row) => (
+            <Card key={row.jobId} data-testid="workflow-run">
+              <Card.Header className="flex flex-wrap items-start justify-between gap-3">
+                <div className="grid gap-1">
+                  <Card.Title>{row.jobName}</Card.Title>
+                  <Card.Description>
+                    {t("workflows.columns.id")}: {row.jobId}
+                  </Card.Description>
+                </div>
+                <Chip
+                  size="sm"
+                  variant="soft"
+                  color={statusColor(row.status)}
+                  data-testid="workflow-run-status"
+                >
+                  {t(`workflows.status.${row.status}`)}
+                </Chip>
+              </Card.Header>
+              <Card.Footer className="text-sm text-muted">
+                {t("workflows.columns.updated")}: {formatTimestamp(row.updatedAt)}
+              </Card.Footer>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/minimal-app/apps/webapp/src/modules/workflows/hooks/useWorkflowsRoute.ts.tpl

@@ -0,0 +1,64 @@
+import type { WorkflowStatus } from "@m5kdev/commons/modules/workflow/workflow.constants";
+import type { AppRouter } from "{{PACKAGE_SCOPE}}/server/types";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { inferRouterOutputs } from "@trpc/server";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { useTRPC } from "@/utils/trpc";
+
+type WorkflowListOutput = inferRouterOutputs<AppRouter>["workflow"]["list"];
+type WorkflowRunRow = WorkflowListOutput[number];
+
+const OPEN_STATUSES: ReadonlySet<WorkflowStatus> = new Set(["queued", "running"]);
+
+interface WorkflowsRouteState {
+  readonly rows: WorkflowRunRow[];
+  readonly isLoading: boolean;
+  readonly isFetching: boolean;
+  readonly isTriggering: boolean;
+  readonly trigger: () => void;
+}
+
+export function useWorkflowsRoute(): WorkflowsRouteState {
+  const { t } = useTranslation("{{APP_SLUG}}");
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+
+  const listQuery = useQuery(
+    trpc.workflow.list.queryOptions(
+      {},
+      {
+        refetchInterval: (query) => {
+          const rows = query.state.data ?? [];
+          return rows.some((row) => OPEN_STATUSES.has(row.status)) ? 750 : false;
+        },
+      }
+    )
+  );
+
+  const invalidateList = async (): Promise<void> => {
+    await queryClient.invalidateQueries(trpc.workflow.list.queryFilter());
+  };
+
+  const runMutation = useMutation(
+    trpc.demoWorkflow.run.mutationOptions({
+      onSuccess: async () => {
+        toast.success(t("workflows.toast.triggered"));
+        await invalidateList();
+      },
+      onError: (error) => {
+        toast.error(error instanceof Error ? error.message : String(error));
+      },
+    })
+  );
+
+  return {
+    rows: listQuery.data ?? [],
+    isLoading: listQuery.isLoading,
+    isFetching: listQuery.isFetching,
+    isTriggering: runMutation.isPending,
+    trigger: () => {
+      void runMutation.mutateAsync().catch(() => undefined);
+    },
+  };
+}

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

@@ -1,13 +1,13 @@
-// @ts-expect-error-next-line: virtual module
-import resources from "virtual:i18next-loader";
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-
-i18n.use(initReactI18next).init({
-  fallbackLng: "en",
-  debug: import.meta.env.MODE === "development",
-  interpolation: {
-    escapeValue: false,
-  },
-  resources,
-});
+// @ts-expect-error-next-line: virtual module
+import resources from "virtual:i18next-loader";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+i18n.use(initReactI18next).init({
+  fallbackLng: "en",
+  debug: import.meta.env.MODE === "development",
+  interpolation: {
+    escapeValue: false,
+  },
+  resources,
+});

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

@@ -1,10 +1,10 @@
-import { useAppTRPC, useAppTRPCClient } from "@m5kdev/frontend/modules/app/hooks/useAppTrpc";
-import type { AppRouter } from "{{PACKAGE_SCOPE}}/server/types";
-
-export function useTRPC() {
-  return useAppTRPC<AppRouter>();
-}
-
-export function useTRPCClient() {
-  return useAppTRPCClient<AppRouter>();
-}
+import { useAppTRPC, useAppTRPCClient } from "@m5kdev/frontend/modules/app/hooks/useAppTrpc";
+import type { AppRouter } from "{{PACKAGE_SCOPE}}/server/types";
+
+export function useTRPC() {
+  return useAppTRPC<AppRouter>();
+}
+
+export function useTRPCClient() {
+  return useAppTRPCClient<AppRouter>();
+}

package/templates/minimal-app/apps/webapp/src/vite-env.d.ts.tpl

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

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

@@ -1,7 +1,7 @@
-{
-  "user.role.user": "User",
-  "user.role.admin": "Admin",
-  "organization.role.member": "Member",
-  "organization.role.admin": "Admin",
-  "organization.role.owner": "Owner"
-}
+{
+  "user.role.user": "User",
+  "user.role.admin": "Admin",
+  "organization.role.member": "Member",
+  "organization.role.admin": "Admin",
+  "organization.role.owner": "Owner"
+}