@presencenet/create-pnet-stack 0.2.3 → 0.4.0

package/bin/create-pnet-stack.js

@@ -14,6 +14,7 @@ import { createInterface } from "node:readline/promises";
 import { fileURLToPath } from "node:url";
 
 const templates = ["web", "mobile", "electron", "tauri"];
+const packageManagers = ["npm", "pnpm", "yarn", "bun"];
 const templateNames = {
   web: "TanStack Start",
   mobile: "React Native (Expo)",
@@ -32,16 +33,32 @@ async function main() {
   const args = process.argv.slice(2);
   if (args.includes("--help") || args.includes("-h")) {
     stdout.write(
-      "Usage: npx @presencenet/create-pnet-stack [project-name] [--template web|mobile|electron|tauri]\n",
+      "Usage: npx @presencenet/create-pnet-stack [project-name] [--template web|mobile|electron|tauri] [--package-manager npm|pnpm|yarn|bun]\n",
     );
     return;
   }
-  let projectName = args.find((arg) => !arg.startsWith("--"));
-  let template = args
-    .find((arg) => arg.startsWith("--template="))
-    ?.split("=")[1];
-  if (!template && args.includes("--template"))
-    template = args[args.indexOf("--template") + 1];
+  let projectName;
+  let template;
+  let packageManager;
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (arg === "--template") {
+      if (!args[i + 1] || args[i + 1].startsWith("--"))
+        throw new Error("--template requires a value.");
+      template = args[++i];
+    } else if (arg.startsWith("--template=")) template = arg.slice(11);
+    else if (arg === "--package-manager") {
+      if (!args[i + 1] || args[i + 1].startsWith("--"))
+        throw new Error("--package-manager requires a value.");
+      packageManager = args[++i];
+    } else if (arg.startsWith("--package-manager=")) {
+      packageManager = arg.slice(18);
+      if (!packageManager)
+        throw new Error("--package-manager requires a value.");
+    } else if (!arg.startsWith("--") && !projectName) projectName = arg;
+  }
+  if (packageManager && !packageManagers.includes(packageManager))
+    throw new Error("Choose npm, pnpm, yarn, or bun.");
 
   if (!projectName || !templates.includes(template)) {
     stdout.write(
@@ -71,8 +88,30 @@ async function main() {
           );
       }
     }
+    if (!packageManagers.includes(packageManager)) {
+      stdout.write(`\n${dim("Choose a package manager")}\n`);
+      packageManagers.forEach((item, i) => {
+        stdout.write(
+          `  ${dim(`${i + 1}`)}  ${item}${item === "bun" ? dim("  recommended") : ""}\n`,
+        );
+      });
+      while (!packageManagers.includes(packageManager)) {
+        const answer =
+          (
+            await rl.question(
+              `\n${dim("Package manager")} ${dim("[4]")} ${dim("›")} `,
+            )
+          ).trim() || "4";
+        packageManager = packageManagers[Number(answer) - 1] ?? answer;
+        if (!packageManagers.includes(packageManager))
+          stdout.write(`${paint("31", "×")} Choose npm, pnpm, yarn, or bun.\n`);
+      }
+    }
     rl.close();
   }
+  if (!packageManager) packageManager = "bun";
+  if (!packageManagers.includes(packageManager))
+    throw new Error("Choose npm, pnpm, yarn, or bun.");
 
   if (!projectName || !/^[a-z0-9][a-z0-9-]*$/.test(projectName))
     throw new Error(
@@ -97,15 +136,33 @@ async function main() {
   await replaceTokens(target, {
     "{{projectName}}": projectName,
     "{{projectNameRust}}": rustName,
+    "bun run": `${packageManager} run`,
     '"root": false': '"root": true',
   });
+  // Turborepo needs the root packageManager field to resolve the workspace.
+  const packageJsonPath = join(target, "package.json");
+  const packageJson = JSON.parse(await readFile(packageJsonPath, "utf8"));
+  const packageManagerVersion = getVersion(packageManager, target);
+  if (packageManagerVersion)
+    packageJson.packageManager = `${packageManager}@${packageManagerVersion}`;
+  await writeFile(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
+  // pnpm ignores package.json workspaces.
+  if (packageManager === "pnpm")
+    await writeFile(
+      join(target, "pnpm-workspace.yaml"),
+      `packages:\n${packageJson.workspaces.map((glob) => `  - "${glob}"\n`).join("")}`,
+    );
   execFileSync("git", ["init"], { cwd: target, stdio: "ignore" });
   stdout.write(
     `\n${green("✓")} Created ${paint("1", projectName)} ${dim(`(${templateNames[template]})`)}\n`,
   );
+  if (!packageManagerVersion)
+    stdout.write(
+      `${paint("33", "!")} ${packageManager} not found; add a "packageManager" field to package.json before running Turborepo\n`,
+    );
   stdout.write(`${green("✓")} Initialized Git repository\n`);
   stdout.write(
-    `\n${dim("Next steps")}\n  ${cyan(`cd ${projectName}`)}\n  ${cyan("bun install")}\n  ${cyan("bun run dev")}\n`,
+    `\n${dim("Next steps")}\n  ${cyan(`cd ${projectName}`)}\n  ${cyan(packageManager === "npm" ? "npm install" : `${packageManager} install`)}\n  ${cyan(`${packageManager} run dev`)}\n`,
   );
   if (template === "tauri")
     stdout.write(
@@ -113,6 +170,20 @@ async function main() {
     );
 }
 
+function getVersion(command, cwd) {
+  try {
+    const output = execFileSync(command, ["--version"], {
+      cwd,
+      encoding: "utf8",
+      shell: process.platform === "win32",
+      stdio: ["ignore", "pipe", "ignore"],
+    });
+    return output.trim().match(/^\d+\.\d+\.\d+\S*$/)?.[0];
+  } catch {
+    return undefined;
+  }
+}
+
 async function replaceTokens(directory, replacements) {
   for (const entry of await readdir(directory, { withFileTypes: true })) {
     const path = join(directory, entry.name);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@presencenet/create-pnet-stack",
-  "version": "0.2.3",
+  "version": "0.4.0",
   "description": "Create a Bun and Turborepo app with pnet-stack",
   "type": "module",
   "bin": {

package/templates/electron/apps/app/components.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/renderer/src/style.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/templates/electron/apps/app/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@{{projectName}}/app",
+  "version": "0.0.0",
   "private": true,
   "type": "module",
   "main": "out/main/index.js",
@@ -10,6 +11,10 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.3.4",
+    "class-variance-authority": "^0.7.1",
+    "cn": "^0.5.2",
+    "lucide-react": "^1.70.0",
+    "radix-ui": "^1.8.1",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "tailwindcss": "^4.3.4"
@@ -21,6 +26,8 @@
     "@vitejs/plugin-react": "^6.2.1",
     "electron": "^45.2.2",
     "electron-vite": "^6.0.0",
+    "shadcn": "^4.23.0",
+    "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3",
     "vite": "^8.3.5"
   }

package/templates/electron/apps/app/src/preload/index.ts

@@ -1,3 +1,5 @@
 import { contextBridge } from "electron";
 
-contextBridge.exposeInMainWorld("appInfo", { name: "{{projectName}}" });
+contextBridge.exposeInMainWorld("appInfo", {
+  name: "{{projectName}}",
+});

package/templates/electron/apps/app/src/renderer/index.html

@@ -1,2 +1,2 @@
 <!doctype html>
-<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>{{projectName}}</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>
+<html lang="en" class="dark"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>{{projectName}}</title></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>

package/templates/electron/apps/app/src/renderer/src/components/ui/button.tsx

@@ -0,0 +1,63 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "cn";
+import { Slot } from "radix-ui";
+import type * as React from "react";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 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:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  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 };

package/templates/electron/apps/app/src/renderer/src/components/ui/card.tsx

@@ -0,0 +1,91 @@
+import { cn } from "cn";
+import type * as React from "react";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

package/templates/electron/apps/app/src/renderer/src/lib/utils.ts

@@ -0,0 +1 @@
+export { cn } from "cn";

package/templates/electron/apps/app/src/renderer/src/main.tsx

@@ -1,17 +1,40 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import "./style.css";
 
+const app = {
+  name: "{{projectName}}",
+};
+
 function App() {
   return (
-    <main className="flex min-h-screen flex-col justify-center px-12">
-      <p className="text-sm font-bold uppercase tracking-widest text-cyan-300">
-        Presence-Net starter
-      </p>
-      <h1 className="mt-3 text-5xl font-bold">{"{{projectName}}"}</h1>
-      <p className="mt-5 text-lg text-slate-300">
-        Electron, React, Tailwind, and a Bun-powered Turborepo workspace.
-      </p>
+    <main className="flex min-h-screen items-center justify-center p-8">
+      <Card className="w-full max-w-xl">
+        <CardHeader>
+          <CardDescription>Presence-Net starter</CardDescription>
+          <CardTitle className="text-4xl tracking-tight">{app.name}</CardTitle>
+        </CardHeader>
+        <CardContent className="text-muted-foreground">
+          Electron, React, Tailwind, shadcn/ui, and a Bun-powered Turborepo
+          workspace.
+        </CardContent>
+        <CardFooter>
+          <Button asChild>
+            <a href="https://ui.shadcn.com/docs/components">
+              Browse components
+            </a>
+          </Button>
+        </CardFooter>
+      </Card>
     </main>
   );
 }

package/templates/electron/apps/app/src/renderer/src/style.css

@@ -1,8 +1,124 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
 
 :root {
-  color-scheme: dark;
-  font-family: system-ui, sans-serif;
-  background: #020617;
-  color: white;
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+@theme inline {
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

package/templates/electron/apps/app/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["node", "vite/client"],
+    "paths": {
+      "@/*": ["./src/renderer/src/*"]
+    }
+  },
+  "include": ["src", "electron.vite.config.ts"]
+}

package/templates/electron/biome.json

@@ -1,7 +1,30 @@
 {
   "root": false,
   "$schema": "https://biomejs.dev/schemas/2.6.5/schema.json",
-  "formatter": { "enabled": true, "indentStyle": "space", "indentWidth": 2 },
-  "linter": { "enabled": true, "rules": { "preset": "recommended" } },
-  "javascript": { "formatter": { "quoteStyle": "double" } }
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "preset": "recommended"
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  }
 }

package/templates/electron/gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+out
 .turbo
 .env*
 !.env.example

package/templates/electron/package.json

@@ -1,7 +1,6 @@
 {
   "name": "{{projectName}}",
   "private": true,
-  "packageManager": "bun@1.3.14",
   "workspaces": [
     "apps/*",
     "packages/*"

package/templates/mobile/apps/app/app/_layout.tsx

@@ -1,17 +1,18 @@
 import "../global.css";
+import { PortalHost } from "@rn-primitives/portal";
 import { Stack } from "expo-router";
+import { ThemeProvider } from "expo-router/react-navigation";
 import { StatusBar } from "expo-status-bar";
+import { useColorScheme } from "nativewind";
+import { NAV_THEME } from "@/lib/theme";
 
 export default function Layout() {
+  const { colorScheme = "light" } = useColorScheme();
   return (
-    <>
-      <StatusBar style="light" />
-      <Stack
-        screenOptions={{
-          contentStyle: { backgroundColor: "#020617" },
-          headerShown: false,
-        }}
-      />
-    </>
+    <ThemeProvider value={NAV_THEME[colorScheme]}>
+      <StatusBar style={colorScheme === "dark" ? "light" : "dark"} />
+      <Stack screenOptions={{ headerShown: false }} />
+      <PortalHost />
+    </ThemeProvider>
   );
 }