@farm.js/create-app 0.1.0-beta.99 → 0.1.1-beta.1

package/dist/index.mjs

@@ -10,6 +10,174 @@ import { randomUUID } from "node:crypto";
 import { request } from "node:http";
 import { request as request$1 } from "node:https";
 import os from "node:os";
+function shadcnComponentTemplate(component) {
+	switch (component) {
+		case "badge": return `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { badgeVariants };
+`;
+		case "button": return `import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { buttonVariants };
+`;
+		case "card": return `import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  ),
+);
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-normal", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  ),
+);
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+`;
+		case "input": return `import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";
+`;
+		case "label": return `import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className)}
+      {...props}
+    />
+  ),
+);
+Label.displayName = "Label";
+`;
+	}
+}
+//#endregion
+//#region ../farm-cli/src/ui-registry.ts
+/** Value written into a generated `components.json` as `registries.farm.url`. */
+const UI_REGISTRY_URL_TEMPLATE = "https://farmjs.dev/r/{name}.json";
+//#endregion
 //#region ../farm-cli/src/ui-feature-registry.ts
 async function installUIFeature(input) {
 	const feature = input.definition.ui;
@@ -252,6 +420,16 @@ function unkeyApiKeysUIFeature() {
 		]
 	};
 }
+function sanityContentUIFeature() {
+	return {
+		name: "sanity-content",
+		description: "Sanity content list UI",
+		components: ["badge", "card"],
+		needsApiClient: false,
+		notes: ["Open \"/integrations/sanity\" to check the Sanity connection."],
+		files: () => [componentFile("sanity-content-console.tsx", sanityContentTemplate()), integrationPageFile("sanity", "SanityContentConsole")]
+	};
+}
 function billingUIFeature(input) {
 	return {
 		name: `${input.provider}-billing`,
@@ -554,7 +732,7 @@ function createComponentsJson() {
 			lib: "@/lib",
 			hooks: "@/hooks"
 		},
-		registries: { farm: { url: "https://farmjs.dev/r/{name}.json" } }
+		registries: { farm: { url: UI_REGISTRY_URL_TEMPLATE } }
 	};
 }
 function mergeComponentsJson(current, defaults) {
@@ -597,169 +775,6 @@ import type { AppIntegrations } from "./integrations";
 export const { api, apiClient } = createIntegrations<AppIntegrations>();
 `;
 }
-function shadcnComponentTemplate(component) {
-	switch (component) {
-		case "badge": return `import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
-
-export function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
-}
-
-export { badgeVariants };
-`;
-		case "button": return `import * as React from "react";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "@/lib/utils";
-
-const buttonVariants = cva(
-  "inline-flex h-9 items-center justify-center whitespace-nowrap rounded-md px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, ...props }, ref) => {
-    return (
-      <button
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";
-
-export { buttonVariants };
-`;
-		case "card": return `import * as React from "react";
-import { cn } from "@/lib/utils";
-
-export const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
-      {...props}
-    />
-  ),
-);
-Card.displayName = "Card";
-
-export const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
-  ),
-);
-CardHeader.displayName = "CardHeader";
-
-export const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
-  ({ className, ...props }, ref) => (
-    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-normal", className)} {...props} />
-  ),
-);
-CardTitle.displayName = "CardTitle";
-
-export const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
-  ),
-);
-CardDescription.displayName = "CardDescription";
-
-export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-  ),
-);
-CardContent.displayName = "CardContent";
-
-export const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  ({ className, ...props }, ref) => (
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
-  ),
-);
-CardFooter.displayName = "CardFooter";
-`;
-		case "input": return `import * as React from "react";
-import { cn } from "@/lib/utils";
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => (
-    <input
-      type={type}
-      className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  ),
-);
-Input.displayName = "Input";
-`;
-		case "label": return `import * as React from "react";
-import { cn } from "@/lib/utils";
-
-export const Label = React.forwardRef<HTMLLabelElement, React.LabelHTMLAttributes<HTMLLabelElement>>(
-  ({ className, ...props }, ref) => (
-    <label
-      ref={ref}
-      className={cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className)}
-      {...props}
-    />
-  ),
-);
-Label.displayName = "Label";
-`;
-	}
-}
 function billingPricingTemplate(input) {
 	return `"use client";
 
@@ -1659,6 +1674,40 @@ export function UnkeyApiKeysConsole() {
 }
 `;
 }
+function sanityContentTemplate() {
+	return `import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function SanityContentConsole() {
+  return (
+    <main className="min-h-screen bg-background px-6 py-12 text-foreground">
+      <section className="mx-auto flex w-full max-w-3xl flex-col gap-6">
+        <div className="space-y-3">
+          <Badge variant="secondary">Sanity</Badge>
+          <h1 className="text-3xl font-semibold tracking-normal">Content</h1>
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-xl">Connected to Sanity</CardTitle>
+            <CardDescription>
+              Query documents with createServerQuery and invalidate them from the Sanity webhook.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <code className="block overflow-x-auto rounded-md border bg-muted/30 p-3 text-xs">
+              cms.fetch(&apos;*[_type == &quot;post&quot;]{"{"} title {"}"}&apos;)
+            </code>
+            <p className="text-sm text-muted-foreground">
+              Point a Sanity webhook at /api/sanity/webhook to keep cached pages fresh.
+            </p>
+          </CardContent>
+        </Card>
+      </section>
+    </main>
+  );
+}
+`;
+}
 function unkeyProtectedRouteTemplate() {
 	return `export function GET() {
   return Response.json({
@@ -1829,7 +1878,7 @@ export const auth0Integration = auth0({
 		exportName: "clerkIntegration",
 		description: "Clerk auth provider and protected route middleware",
 		env: ["NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY", "CLERK_SECRET_KEY"],
-		dependencies: { "@clerk/react": "^6.1.0" },
+		dependencies: { "@clerk/react": "^6.4.3" },
 		ui: clerkAuthUIFeature(),
 		template: () => `import { clerk } from "@farm.js/clerk";
 
@@ -2201,6 +2250,43 @@ export const unkeyIntegration = unkey({
     console.log("[unkey]", event.phase, event.route?.path || "none");
   },
 });
+`
+	},
+	{
+		provider: "sanity",
+		aliases: ["cms", "sanity-cms"],
+		defaultKey: "cms",
+		packageName: "@farm.js/sanity",
+		fileName: "sanity",
+		exportName: "sanityIntegration",
+		description: "Sanity content with server queries, CDN images, and webhook cache invalidation",
+		env: [
+			"SANITY_PROJECT_ID",
+			"SANITY_DATASET",
+			"SANITY_API_READ_TOKEN",
+			"SANITY_WEBHOOK_SECRET"
+		],
+		dependencies: { "@sanity/client": "^8.4.0" },
+		ui: sanityContentUIFeature(),
+		template: () => `import { sanity } from "@farm.js/sanity";
+
+export const sanityIntegration = sanity({
+  projectId: process.env.SANITY_PROJECT_ID,
+  dataset: process.env.SANITY_DATASET,
+  token: process.env.SANITY_API_READ_TOKEN,
+  // The webhook fires before Sanity's CDN updates, so reads go through the API.
+  useCdn: false,
+  webhook: {
+    secret: process.env.SANITY_WEBHOOK_SECRET,
+    onChange(payload) {
+      console.log("[sanity]", payload._type, payload._id);
+      return undefined;
+    },
+  },
+  log(event) {
+    console.log("[sanity]", event.phase, event.route?.path || "none");
+  },
+});
 `
 	}
 ];
@@ -2540,6 +2626,7 @@ const FARM_TELEMETRY_TEMPLATES = [
 	"jobs-trigger",
 	"polar",
 	"resend",
+	"sanity",
 	"stripe",
 	"supabase",
 	"unkey",
@@ -3157,6 +3244,7 @@ async function createApp(projectName, options = {}) {
 	await fs.mkdir(projectPath, { recursive: true });
 	const integrationResult = await copyTemplate(template, projectPath, renderer);
 	await updatePackageJson(projectPath, projectName, packageManager);
+	await updatePackageManagerInstructions(projectPath, packageManager.name);
 	logger.success(`🚜 Created ${projectName}`);
 	if (!options.skipInstall) {
 		logger.info(`Installing dependencies with ${packageManager.name}...`);
@@ -3169,7 +3257,7 @@ async function createApp(projectName, options = {}) {
 	if (options.skipInstall) logger.info(`  ${packageManager.name} install`);
 	logger.info(`  ${getDevCommand(packageManager.name)}`);
 	logger.info("");
-	for (const instruction of templateDetails[template]?.instructions ?? []) logger.info(instruction);
+	for (const instruction of templateDetails[template]?.instructions ?? []) logger.info(rewritePackageManagerCommands(instruction, packageManager.name));
 	if (integrationResult) {
 		const details = templateDetails[template].integration;
 		logger.info(`Open ${details.route} for the ${details.label} starter.`);
@@ -3210,6 +3298,14 @@ async function copyTemplate(template, projectPath, renderer) {
 }
 async function applyRendererTemplate(projectPath, renderer, basePackageJson) {
 	const rendererTemplatePath = path.join(__dirname, "..", "templates", "_renderers", renderer);
+	await Promise.all([
+		fs.rm(path.join(projectPath, "docs.config.ts"), { force: true }),
+		fs.rm(path.join(projectPath, "docs.json"), { force: true }),
+		fs.rm(path.join(projectPath, "src", "app", "docs"), {
+			recursive: true,
+			force: true
+		})
+	]);
 	if (renderer === "vue" || renderer === "svelte") await Promise.all([
 		fs.rm(path.join(projectPath, "src", "app", "page.tsx"), { force: true }),
 		fs.rm(path.join(projectPath, "src", "app", "layout.tsx"), { force: true }),
@@ -3227,7 +3323,13 @@ function mergeRendererPackageJson(base, renderer) {
 		...base.devDependencies,
 		...renderer.devDependencies
 	};
-	for (const name of ["react", "react-dom"]) delete dependencies[name];
+	for (const name of [
+		"@farming-labs/docs",
+		"@farming-labs/farmjs",
+		"@farming-labs/theme",
+		"react",
+		"react-dom"
+	]) delete dependencies[name];
 	for (const name of ["@types/react", "@types/react-dom"]) delete devDependencies[name];
 	return {
 		...base,
@@ -3453,6 +3555,35 @@ function getDevCommand(packageManager) {
 	if (packageManager === "npm" || packageManager === "bun") return `${packageManager} run dev`;
 	return `${packageManager} dev`;
 }
+function getRunCommand(packageManager, script) {
+	if (packageManager === "npm" || packageManager === "bun") return `${packageManager} run ${script}`;
+	return `${packageManager} ${script}`;
+}
+function rewritePackageManagerCommands(content, packageManager) {
+	let output = content.replace(/\bpnpm install\b/g, `${packageManager} install`);
+	output = output.replace(/\bpnpm run (dev|auth:migrate|type-check|build|check|deploy|experiment)\b/g, (match, script) => packageManager === "pnpm" ? match : getRunCommand(packageManager, script));
+	return output.replace(/\bpnpm (dev|auth:migrate|type-check|build|check|deploy|experiment)\b/g, (_match, script) => getRunCommand(packageManager, script));
+}
+async function updatePackageManagerInstructions(projectPath, packageManager) {
+	await Promise.all([
+		"package.json",
+		"README.md",
+		"farm.config.ts",
+		"src/app/page.tsx",
+		"src/app/page.jsx",
+		"src/app/page.vue",
+		"src/app/page.svelte"
+	].map(async (file) => {
+		const entryPath = path.join(projectPath, file);
+		try {
+			const content = await fs.readFile(entryPath, "utf8");
+			const nextContent = rewritePackageManagerCommands(content, packageManager);
+			if (nextContent !== content) await fs.writeFile(entryPath, nextContent, "utf8");
+		} catch (error) {
+			if (error.code !== "ENOENT") throw error;
+		}
+	}));
+}
 //#endregion
 export { createApp, detectPackageManager, installDependencies };