Refactor template page and CLI command components for improved clarity and functionality. Update installation command to use dynamic CLI versioning and streamline template content display. Enhance error handling in tests for better resilience against undefined values.

Author: eluce2

.changeset/quick-ends-drop.md

@@ -0,0 +1,5 @@
+---
+"@proofkit/typegen": patch
+---
+
+Add type import to the `InferZodPortals` import

apps/docs/src/app/docs/templates/[...slug]/page.tsx

@@ -1,7 +1,5 @@
 import { getAllTemplates, getTemplateByName } from "@/lib/templates";
 import { notFound } from "next/navigation";
-import Link from "next/link";
-import { ArrowLeft, Package, ExternalLink } from "lucide-react";
 import type { Metadata } from "next";
 import { CliCommand } from "@/components/CliCommand";
 import { getCategoryConfig } from "../category-config";
@@ -86,32 +84,7 @@ export default async function TemplatePage({ params }: TemplatePageProps) {
       {/* Installation command */}
       <div className="not-prose mb-8">
         <h2 className="text-lg font-semibold mb-4">Installation</h2>
-        <CliCommand
-          command={`add ${template.name}`}
-          exec
-          execPackage="proofkit@latest"
-        />
-      </div>
-
-      {/* Template content */}
-      <div className="prose prose-neutral dark:prose-invert max-w-none">
-        {/* Placeholder content - you can expand this later */}
-        <div className="border border-border rounded-lg p-6">
-          <h2 className="text-xl font-semibold mb-4">About this template</h2>
-          <p className="text-muted-foreground mb-4">
-            This template provides{" "}
-            {template.description?.toLowerCase() ||
-              "functionality for your ProofKit application"}
-            .
-          </p>
-
-          <div className="bg-blue-50 dark:bg-blue-950/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
-            <p className="text-sm text-blue-800 dark:text-blue-200">
-              <strong>Coming soon:</strong> Detailed documentation, code
-              examples, and usage guides will be available here.
-            </p>
-          </div>
-        </div>
+        <CliCommand command={`add ${template.name}`} exec />
       </div>
     </div>
   );

apps/docs/src/components/CliCommand.tsx

@@ -1,5 +1,7 @@
+"use client";
 import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+import { cliVersion } from "@/lib/constants";
 
 const MANAGERS = [
   {
@@ -31,7 +33,7 @@ const MANAGERS = [
 export function CliCommand({
   command,
   exec,
-  execPackage = "@proofkit/cli",
+  execPackage = `@proofkit/cli@${cliVersion}`,
 }: {
   command: string;
   exec?: boolean;

apps/docs/src/components/InitCommand.tsx

@@ -1,10 +1,11 @@
 import { DynamicCodeBlock } from "fumadocs-ui/components/dynamic-codeblock";
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+import { cliVersion } from "@/lib/constants";
 
 const MANAGERS = [
-  { key: "pnpm", label: "pnpm", command: "pnpm create proofkit@latest" },
-  { key: "npm", label: "npm", command: "npx create-proofkit@latest" },
-  { key: "yarn", label: "yarn", command: "yarn create proofkit@latest" },
+  { key: "pnpm", label: "pnpm", command: `pnpm create proofkit@${cliVersion}` },
+  { key: "npm", label: "npm", command: `npx create-proofkit@${cliVersion}` },
+  { key: "yarn", label: "yarn", command: `yarn create proofkit@${cliVersion}` },
 ];
 
 export function InitCommand() {

apps/docs/src/lib/constants.ts

@@ -0,0 +1,2 @@
+// which version of the CLI to use in the docs
+export const cliVersion: "latest" | "beta" = "beta";

packages/fmdapi/tests/client-methods.test.ts

@@ -19,17 +19,17 @@ describe("sort methods", () => {
       sort: { fieldName: "recordId", sortOrder: "descend" },
     });
     expect(resp.data.length).toBe(3);
-    const firstRecord = parseInt(resp.data[0].fieldData.recordId as string);
-    const secondRecord = parseInt(resp.data[1].fieldData.recordId as string);
+    const firstRecord = parseInt(resp.data[0]?.fieldData.recordId as string);
+    const secondRecord = parseInt(resp.data[1]?.fieldData.recordId as string);
     expect(firstRecord).toBeGreaterThan(secondRecord);
   });
   test("should sort ascending by default", async () => {
     const resp = await layoutClient.list({
       sort: { fieldName: "recordId" },
     });
 
-    const firstRecord = parseInt(resp.data[0].fieldData.recordId as string);
-    const secondRecord = parseInt(resp.data[1].fieldData.recordId as string);
+    const firstRecord = parseInt(resp.data[0]?.fieldData.recordId as string);
+    const secondRecord = parseInt(resp.data[1]?.fieldData.recordId as string);
     expect(secondRecord).toBeGreaterThan(firstRecord);
   });
 });
@@ -48,6 +48,7 @@ describe("find methods", () => {
     const resp = await client.find({
       query: { anything: "anything" },
     });
+
     expect(Array.isArray(resp.data)).toBe(true);
   });
   test("successful findFirst with multiple return", async () => {
@@ -75,18 +76,18 @@ describe("portal methods", () => {
     const result = await layoutClient.list({
       limit: 1,
     });
-    expect(result.data[0].portalData.test.length).toBe(50); // default portal limit is 50
+    expect(result.data[0]?.portalData?.test?.length).toBe(50); // default portal limit is 50
 
     const { data } = await layoutClient.list({
       limit: 1,
       portalRanges: { test: { limit: 1, offset: 2 } },
     });
     expect(data.length).toBe(1);
 
-    const portalData = data[0].portalData;
-    const testPortal = portalData.test;
-    expect(testPortal.length).toBe(1);
-    expect(testPortal[0]["related::related_field"]).toContain("2"); // we should get the 2nd record
+    const portalData = data[0]?.portalData;
+    const testPortal = portalData?.test;
+    expect(testPortal?.length).toBe(1);
+    expect(testPortal?.[0]?.["related::related_field"]).toContain("2"); // we should get the 2nd record
   });
   it("should update portal data", async () => {
     await layoutClient.update({
@@ -106,13 +107,13 @@ describe("portal methods", () => {
     });
 
     expect(
-      "long_and_strange.portalName#forTesting" in data[0].portalData,
+      "long_and_strange.portalName#forTesting" in (data?.[0]?.portalData ?? {}),
     ).toBeTruthy();
 
     const portalData =
-      data[0].portalData["long_and_strange.portalName#forTesting"];
+      data[0]?.portalData["long_and_strange.portalName#forTesting"];
 
-    expect(portalData.length).toBeGreaterThan(50);
+    expect(portalData?.length).toBeGreaterThan(50);
   });
 });
 

packages/fmdapi/tests/tsconfig.json

@@ -3,7 +3,8 @@
   "compilerOptions": {
     "noEmit": true,
     "types": ["vitest", "node"],
-    "isolatedModules": true
+    "isolatedModules": true,
+    "rootDir": "../"
   },
   "include": ["./**/*.ts"],
   "exclude": ["../dist", "../schema"]

packages/typegen/src/buildSchema.ts

@@ -35,6 +35,7 @@ export function buildSchema(
       schemaFile.addImportDeclaration({
         moduleSpecifier: "@proofkit/fmdapi",
         namedImports: ["InferZodPortals"],
+        isTypeOnly: true,
       });
     }
   }
@@ -349,6 +350,7 @@ export function buildOverrideFile(
     overrideFile.addImportDeclaration({
       moduleSpecifier: "@proofkit/fmdapi",
       namedImports: ["InferZodPortals"],
+      isTypeOnly: true,
     });
   }
 

packages/typegen/tests/__snapshots__/strict-numbers.snap.ts

@@ -4,7 +4,7 @@
  * DO NOT EDIT THIS FILE DIRECTLY. Changes may be overritten
  */
 import { z } from "zod/v4";
-import { InferZodPortals } from "@proofkit/fmdapi";
+import type { InferZodPortals } from "@proofkit/fmdapi";
 
 // @generated
 // prettier-ignore

packages/typegen/tests/__snapshots__/zod-layout-client.snap.ts

@@ -4,7 +4,7 @@
  * DO NOT EDIT THIS FILE DIRECTLY. Changes may be overritten
  */
 import { z } from "zod";
-import { InferZodPortals } from "@proofkit/fmdapi";
+import type { InferZodPortals } from "@proofkit/fmdapi";
 
 // @generated
 // prettier-ignore