@akanjs/cli 2.3.1-rc.3 → 2.3.1-rc.4

package/templates/appSample/page/task/_layout.tsx

@@ -0,0 +1,24 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "_layout.tsx",
+    content: `
+// ===== page/task/_layout.tsx =====
+// Convention: Akan.js file-based routing — _layout.tsx wraps every sub-page under /task/*.
+// The underscores mark it as a routing file; children = sub-page component from nested routes.
+// Rendered by Akan's router: URL → _layout.tsx → children (e.g., _index.tsx or [taskId]/_index.tsx).
+
+interface LayoutProps {
+  children: React.ReactNode;
+}
+export default function Layout({ children }: LayoutProps) {
+  return (
+    <div className="min-h-screen bg-base-200">
+      {children}
+    </div>
+  );
+}
+`,
+  };
+}

package/templates/appSample/page/task/new.tsx

@@ -0,0 +1,34 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "new.tsx",
+    content: `import { fetch, usePage } from "@apps/${dict.appName}/client";
+import { Load } from "akanjs/ui";
+import { cnst, Task } from "@apps/${dict.appName}/client";
+
+// ===== page/task/new.tsx =====
+// Convention: Server-side form page using Load.Edit from akanjs/ui.
+// async Page() — server-side component that pre-initializes form data before rendering.
+// Load.Edit with type="form" renders the Template inside a form wrapper with submit/cancel actions.
+// onCancel="back" navigates to the previous page; onSubmit specifies the redirect after success.
+// Template is reused — same Task.Template.General used for create, edit, and client-side modals.
+
+export default async function Page() {
+  const taskForm: Partial<cnst.Task> = { status: "todo" };
+
+  return (
+    <Load.Edit
+      slice={fetch.slice.task}
+      edit={taskForm}
+      type="form"
+      onCancel="back"
+      onSubmit="/task"
+    >
+      <Task.Template.General />
+    </Load.Edit>
+  );
+}
+`,
+  };
+}

package/templates/appSample/srvkit/AuthGuard.ts

@@ -0,0 +1,35 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "AuthGuard.ts",
+    content: `import type { Guard, SignalContext } from "akanjs/signal";
+
+// ===== AuthGuard.ts =====
+// Convention: srvkit/ folder — server-only helpers, cannot import from client code.
+// Implements the Guard interface from akanjs/signal.
+// Guards are applied at endpoint/slice declaration: { guards: { root: SignedIn } }.
+// Naming: PascalCase .ts, static name property matches the guard identifier.
+// Scanned by akan scan into srvkit/index.ts barrel automatically.
+
+export class SignedIn implements Guard {
+  static name = "SignedIn";
+
+  canPass(context: SignalContext): boolean {
+    const user = context.getHttpContext<{ user?: { id: string } }>().req.user;
+    return !!user;
+  }
+}
+
+// ---- Expandable additional fields: ----
+// Role-based guard: only allow users with a specific role
+// export class IsAdmin implements Guard {
+//   static name = "IsAdmin";
+//   canPass(context: SignalContext): boolean {
+//     const user = context.getHttpContext<{ user?: { role: string } }>().req.user;
+//     return user?.role === "admin";
+//   }
+// }
+`,
+  };
+}

package/templates/appSample/srvkit/SessionInternalArg.ts

@@ -0,0 +1,32 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "SessionInternalArg.ts",
+    content: `import type { InternalArg, SignalContext } from "akanjs/signal";
+
+// ===== SessionInternalArg.ts =====
+// Convention: srvkit/ folder — server-only helpers.
+// Implements the InternalArg interface from akanjs/signal.
+// InternalArg is an auto-injected argument for resolveField/endpoint .with() chains.
+// Appended to a query/mutation via: .with(CurrentUserId, { nullable: true }).exec(...)
+// Naming: PascalCase .ts, class name = arg identifier.
+// Scanned by akan scan into srvkit/index.ts barrel automatically.
+
+export class CurrentUserId implements InternalArg<string | null> {
+  getArg(context: SignalContext): string | null {
+    const user = context.getHttpContext<{ user?: { id: string } }>().req.user;
+    return user?.id ?? null;
+  }
+}
+
+// ---- Expandable additional fields: ----
+// Inject current session language/locale
+// export class CurrentLocale implements InternalArg<string> {
+//   getArg(context: SignalContext): string {
+//     return context.getHttpContext<{ locale?: string }>().req.locale ?? "en";
+//   }
+// }
+`,
+  };
+}

package/templates/appSample/ui/GlobalLoading.tsx

@@ -0,0 +1,30 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "GlobalLoading.tsx",
+    content: `"use client";
+
+import { clsx } from "akanjs/client";
+
+// ===== GlobalLoading.tsx =====
+// Convention: ui/ folder — reusable visual components. PascalCase .tsx, "use client" directive.
+// File name = exported component name.
+// Scanned by akan scan into ui/index.ts barrel automatically.
+
+interface GlobalLoadingProps {
+  className?: string;
+  message?: string;
+}
+
+export const GlobalLoading = ({ className, message = "Loading..." }: GlobalLoadingProps) => {
+  return (
+    <div className={clsx("flex flex-col items-center justify-center gap-4 py-32", className)}>
+      <span className="loading loading-spinner loading-lg text-primary" />
+      <span className="text-base-content/60 text-sm">{message}</span>
+    </div>
+  );
+};
+`,
+  };
+}

package/templates/appSample/ui/QuantityControl.tsx

@@ -0,0 +1,52 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "QuantityControl.tsx",
+    content: `"use client";
+
+import { clsx } from "akanjs/client";
+
+// ===== QuantityControl.tsx =====
+// Convention: ui/ folder — reusable visual components. PascalCase .tsx, "use client" directive.
+// File name = exported component name.
+// Scanned by akan scan into ui/index.ts barrel automatically.
+
+interface QuantityControlProps {
+  className?: string;
+  value: number;
+  onChange: (value: number) => void;
+  min?: number;
+  max?: number;
+}
+
+export const QuantityControl = ({
+  className,
+  value,
+  onChange,
+  min = 0,
+  max = 99,
+}: QuantityControlProps) => {
+  return (
+    <div className={clsx("inline-flex items-center gap-1", className)}>
+      <button
+        className="btn btn-circle btn-outline btn-xs"
+        disabled={value <= min}
+        onClick={() => onChange(Math.max(min, value - 1))}
+      >
+        −
+      </button>
+      <span className="w-8 text-center font-medium tabular-nums">{value}</span>
+      <button
+        className="btn btn-circle btn-outline btn-xs"
+        disabled={value >= max}
+        onClick={() => onChange(Math.min(max, value + 1))}
+      >
+        +
+      </button>
+    </div>
+  );
+};
+`,
+  };
+}

package/templates/appSample/webkit/useDebounce.ts

@@ -0,0 +1,41 @@
+import type { AppInfo, LibInfo } from "akanjs";
+
+export default function getContent(scanInfo: AppInfo | LibInfo | null, dict: { appName: string }) {
+  return {
+    filename: "useDebounce.ts",
+    content: `"use client";
+
+import { useEffect, useState } from "react";
+
+// ===== useDebounce.ts =====
+// Convention: webkit/ folder — browser-only hooks; "use client" directive required.
+// useEffect/useState are React client-side primitives that only work in the browser.
+// Naming: camelCase .ts, file name = primary export name.
+// Scanned by akan scan into webkit/index.ts barrel automatically.
+
+export function useDebounce<T>(value: T, delay = 300): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+
+  return debouncedValue;
+}
+
+// ---- Expandable additional fields: ----
+// useViewportWidth: detect browser window width
+// export function useViewportWidth() {
+//   const [width, setWidth] = useState(0);
+//   useEffect(() => {
+//     const handleResize = () => setWidth(window.innerWidth);
+//     handleResize();
+//     window.addEventListener("resize", handleResize);
+//     return () => window.removeEventListener("resize", handleResize);
+//   }, []);
+//   return width;
+// }
+`,
+  };
+}