@carefully-built/cli 0.1.0

package/README.md

@@ -0,0 +1,23 @@
+# @carefully-built/cli
+
+CLI for adding Carefully Built components to apps as editable source code.
+
+## Usage
+
+```bash
+bunx @carefully-built/cli list
+bunx @carefully-built/cli add button
+```
+
+Use `--overwrite` to replace existing files:
+
+```bash
+bunx @carefully-built/cli add button --overwrite
+```
+
+The first registry entry copies:
+
+- `components/ui/button.tsx`
+- `lib/utils.ts`
+
+Install the printed dependencies in the target app if they are not already present.

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+#!/usr/bin/env node
+//#region src/index.d.ts
+declare function runCli(argv?: string[]): Promise<void>;
+//#endregion
+export { runCli };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/index.ts"],"sourcesContent":[],"mappings":";;iBAWsB,MAAA,mBAAsC"}

package/dist/index.mjs

@@ -0,0 +1,121 @@
+#!/usr/bin/env node
+import { constants, readFileSync } from "node:fs";
+import { access, copyFile, mkdir } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+//#region src/registry.ts
+const registryRoot = join(join(dirname(fileURLToPath(import.meta.url)), ".."), "registry");
+const componentNames = ["button"];
+function listRegistryComponents() {
+	return [...componentNames];
+}
+function getRegistryComponent(componentName) {
+	if (!componentNames.includes(componentName)) return;
+	const manifestPath = join(registryRoot, "ui", componentName, "manifest.json");
+	const manifest = JSON.parse(readFileSync(manifestPath, "utf8"));
+	return {
+		...manifest,
+		files: manifest.files.map((file) => ({
+			...file,
+			source: join(registryRoot, "ui", componentName, file.source)
+		}))
+	};
+}
+
+//#endregion
+//#region src/add.ts
+async function addComponent({ componentName, cwd, overwrite }) {
+	const component = getRegistryComponent(componentName);
+	if (!component) throw new Error(`Unknown component "${componentName}"`);
+	const created = [];
+	const overwritten = [];
+	const skipped = [];
+	for (const file of component.files) {
+		const targetPath = join(cwd, file.target);
+		const exists = await fileExists(targetPath);
+		if (exists && !overwrite) {
+			skipped.push(file.target);
+			continue;
+		}
+		await mkdir(dirname(targetPath), { recursive: true });
+		await copyFile(file.source, targetPath);
+		if (exists) overwritten.push(file.target);
+		else created.push(file.target);
+	}
+	return {
+		componentName: component.name,
+		created,
+		overwritten,
+		skipped,
+		dependencies: component.dependencies,
+		peerDependencies: component.peerDependencies
+	};
+}
+async function fileExists(path) {
+	try {
+		await access(path, constants.F_OK);
+		return true;
+	} catch {
+		return false;
+	}
+}
+
+//#endregion
+//#region src/index.ts
+async function runCli(argv = process.argv.slice(2)) {
+	const args = parseArgs(argv);
+	if (args.help || !args.command) {
+		printHelp();
+		return;
+	}
+	if (args.command === "list") {
+		for (const componentName of listRegistryComponents()) console.log(componentName);
+		return;
+	}
+	if (args.command === "add") {
+		if (!args.componentName) throw new Error("Missing component name. Example: carefully-built add button");
+		printAddResult(await addComponent({
+			componentName: args.componentName,
+			cwd: process.cwd(),
+			overwrite: args.overwrite
+		}));
+		return;
+	}
+	throw new Error(`Unknown command "${args.command}"`);
+}
+function parseArgs(argv) {
+	return {
+		command: argv[0],
+		componentName: argv[1]?.startsWith("-") ? void 0 : argv[1],
+		overwrite: argv.includes("--overwrite"),
+		help: argv.includes("--help") || argv.includes("-h")
+	};
+}
+function printHelp() {
+	console.log(`carefully-built
+
+Usage:
+  carefully-built list
+  carefully-built add <component> [--overwrite]
+
+Components:
+  ${listRegistryComponents().join(", ")}
+`);
+}
+function printAddResult(result) {
+	for (const file of result.created) console.log(`created ${file}`);
+	for (const file of result.overwritten) console.log(`overwrote ${file}`);
+	for (const file of result.skipped) console.log(`skipped ${file}`);
+	if (result.dependencies.length > 0) console.log(`dependencies: ${result.dependencies.join(", ")}`);
+	if (result.peerDependencies.length > 0) console.log(`peer dependencies: ${result.peerDependencies.join(", ")}`);
+}
+runCli().catch((error) => {
+	const message = error instanceof Error ? error.message : String(error);
+	console.error(message);
+	process.exitCode = 1;
+});
+
+//#endregion
+export { runCli };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":["created: string[]","overwritten: string[]","skipped: string[]"],"sources":["../src/registry.ts","../src/add.ts","../src/index.ts"],"sourcesContent":["import { readFileSync } from \"node:fs\";\nimport { dirname, join } from \"node:path\";\nimport { fileURLToPath } from \"node:url\";\n\nexport interface RegistryFile {\n  readonly source: string;\n  readonly target: string;\n}\n\nexport interface RegistryComponent {\n  readonly name: string;\n  readonly description: string;\n  readonly dependencies: readonly string[];\n  readonly peerDependencies: readonly string[];\n  readonly files: readonly RegistryFile[];\n}\n\nconst packageRoot = join(dirname(fileURLToPath(import.meta.url)), \"..\");\nconst registryRoot = join(packageRoot, \"registry\");\nconst componentNames = [\"button\"] as const;\n\nexport function listRegistryComponents(): string[] {\n  return [...componentNames];\n}\n\nexport function getRegistryComponent(\n  componentName: string,\n): RegistryComponent | undefined {\n  if (!componentNames.includes(componentName as (typeof componentNames)[number])) {\n    return undefined;\n  }\n\n  const manifestPath = join(registryRoot, \"ui\", componentName, \"manifest.json\");\n  const manifest = JSON.parse(readFileSync(manifestPath, \"utf8\")) as Omit<\n    RegistryComponent,\n    \"files\"\n  > & {\n    files: readonly RegistryFile[];\n  };\n\n  return {\n    ...manifest,\n    files: manifest.files.map((file) => ({\n      ...file,\n      source: join(registryRoot, \"ui\", componentName, file.source),\n    })),\n  };\n}\n","import { constants } from \"node:fs\";\nimport { access, copyFile, mkdir } from \"node:fs/promises\";\nimport { dirname, join } from \"node:path\";\n\nimport { getRegistryComponent } from \"./registry\";\n\nexport interface AddComponentOptions {\n  readonly componentName: string;\n  readonly cwd: string;\n  readonly overwrite: boolean;\n}\n\nexport interface AddComponentResult {\n  readonly componentName: string;\n  readonly created: string[];\n  readonly overwritten: string[];\n  readonly skipped: string[];\n  readonly dependencies: readonly string[];\n  readonly peerDependencies: readonly string[];\n}\n\nexport async function addComponent({\n  componentName,\n  cwd,\n  overwrite,\n}: AddComponentOptions): Promise<AddComponentResult> {\n  const component = getRegistryComponent(componentName);\n\n  if (!component) {\n    throw new Error(`Unknown component \"${componentName}\"`);\n  }\n\n  const created: string[] = [];\n  const overwritten: string[] = [];\n  const skipped: string[] = [];\n\n  for (const file of component.files) {\n    const targetPath = join(cwd, file.target);\n    const exists = await fileExists(targetPath);\n\n    if (exists && !overwrite) {\n      skipped.push(file.target);\n      continue;\n    }\n\n    await mkdir(dirname(targetPath), { recursive: true });\n    await copyFile(file.source, targetPath);\n\n    if (exists) {\n      overwritten.push(file.target);\n    } else {\n      created.push(file.target);\n    }\n  }\n\n  return {\n    componentName: component.name,\n    created,\n    overwritten,\n    skipped,\n    dependencies: component.dependencies,\n    peerDependencies: component.peerDependencies,\n  };\n}\n\nasync function fileExists(path: string): Promise<boolean> {\n  try {\n    await access(path, constants.F_OK);\n    return true;\n  } catch {\n    return false;\n  }\n}\n","#!/usr/bin/env node\nimport { addComponent } from \"./add\";\nimport { listRegistryComponents } from \"./registry\";\n\ninterface ParsedArgs {\n  readonly command?: string;\n  readonly componentName?: string;\n  readonly overwrite: boolean;\n  readonly help: boolean;\n}\n\nexport async function runCli(argv = process.argv.slice(2)): Promise<void> {\n  const args = parseArgs(argv);\n\n  if (args.help || !args.command) {\n    printHelp();\n    return;\n  }\n\n  if (args.command === \"list\") {\n    for (const componentName of listRegistryComponents()) {\n      console.log(componentName);\n    }\n    return;\n  }\n\n  if (args.command === \"add\") {\n    if (!args.componentName) {\n      throw new Error(\"Missing component name. Example: carefully-built add button\");\n    }\n\n    const result = await addComponent({\n      componentName: args.componentName,\n      cwd: process.cwd(),\n      overwrite: args.overwrite,\n    });\n\n    printAddResult(result);\n    return;\n  }\n\n  throw new Error(`Unknown command \"${args.command}\"`);\n}\n\nfunction parseArgs(argv: readonly string[]): ParsedArgs {\n  return {\n    command: argv[0],\n    componentName: argv[1]?.startsWith(\"-\") ? undefined : argv[1],\n    overwrite: argv.includes(\"--overwrite\"),\n    help: argv.includes(\"--help\") || argv.includes(\"-h\"),\n  };\n}\n\nfunction printHelp(): void {\n  console.log(`carefully-built\n\nUsage:\n  carefully-built list\n  carefully-built add <component> [--overwrite]\n\nComponents:\n  ${listRegistryComponents().join(\", \")}\n`);\n}\n\nfunction printAddResult(result: Awaited<ReturnType<typeof addComponent>>): void {\n  for (const file of result.created) {\n    console.log(`created ${file}`);\n  }\n  for (const file of result.overwritten) {\n    console.log(`overwrote ${file}`);\n  }\n  for (const file of result.skipped) {\n    console.log(`skipped ${file}`);\n  }\n\n  if (result.dependencies.length > 0) {\n    console.log(`dependencies: ${result.dependencies.join(\", \")}`);\n  }\n  if (result.peerDependencies.length > 0) {\n    console.log(`peer dependencies: ${result.peerDependencies.join(\", \")}`);\n  }\n}\n\nrunCli().catch((error: unknown) => {\n  const message = error instanceof Error ? error.message : String(error);\n  console.error(message);\n  process.exitCode = 1;\n});\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@carefully-built/cli",
+  "version": "0.1.0",
+  "description": "CLI for adding Carefully Built components to apps.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Alessandro Dodi",
+  "homepage": "https://github.com/AlessandroDodi/carefully-built-saas-kit#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AlessandroDodi/carefully-built-saas-kit.git",
+    "directory": "packages/cli"
+  },
+  "bugs": {
+    "url": "https://github.com/AlessandroDodi/carefully-built-saas-kit/issues"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "cli",
+    "shadcn",
+    "saas"
+  ],
+  "bin": {
+    "carefully-built": "dist/index.mjs"
+  },
+  "files": [
+    "dist",
+    "registry",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsdown src/index.ts --format esm --dts",
+    "prepublishOnly": "bun run typecheck && bun run test && bun run build",
+    "test": "bun test",
+    "typecheck": "tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.5"
+  }
+}

package/registry/ui/button/button.tsx

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:brightness-90 [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonVariant =
+  | "default"
+  | "outline"
+  | "secondary"
+  | "ghost"
+  | "destructive"
+  | "link";
+type ButtonSize =
+  | "default"
+  | "xs"
+  | "sm"
+  | "lg"
+  | "icon"
+  | "icon-xs"
+  | "icon-sm"
+  | "icon-lg";
+
+interface ButtonProps extends React.ComponentProps<"button"> {
+  readonly asChild?: boolean;
+  readonly size?: ButtonSize;
+  readonly variant?: ButtonVariant;
+}
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: ButtonProps) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
+export type { ButtonProps, ButtonSize, ButtonVariant };

package/registry/ui/button/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/registry/ui/button/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "button",
+  "description": "Shared button primitive with Carefully Built variants and sizes.",
+  "dependencies": ["class-variance-authority", "clsx", "tailwind-merge"],
+  "peerDependencies": ["react", "radix-ui"],
+  "files": [
+    {
+      "source": "button.tsx",
+      "target": "components/ui/button.tsx"
+    },
+    {
+      "source": "cn.ts",
+      "target": "lib/utils.ts"
+    }
+  ]
+}