@calo-design/cli 0.4.3 → 0.4.4

package/bin/cli.js

@@ -408,6 +408,44 @@ export default function Index() {
 `);
 }
 
+// The component gallery's routes: a root layout (fonts + providers, no local imports so it's
+// portable) and the @calo/design-system showroom (bundled with the CLI) as the index route.
+// Always (re)written so a `calo-design update` + relaunch also ships the latest showroom.
+function writeGalleryApp(projectRoot) {
+  const srcDir = path.join(projectRoot, "src");
+  const appDir = path.join(srcDir, "app");
+  fs.mkdirSync(appDir, { recursive: true });
+  // Silences known non-actionable RNW-on-React-19 dev warnings (nested Pressables, deprecated
+  // style props) so the embedded gallery has a clean overlay. Imported first in _layout.
+  fs.cpSync(path.join(__dirname, "templates", "gallery-suppress.ts"), path.join(srcDir, "suppress-dev-warnings.ts"));
+  fs.writeFileSync(path.join(appDir, "_layout.tsx"), `import "../suppress-dev-warnings";
+import { Stack } from "expo-router";
+import { useFonts } from "expo-font";
+import { CaloBottomSheetProvider, CaloScreen, caloFonts, caloTokens } from "@calo/design-system";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+
+export default function Layout() {
+  const [loaded] = useFonts(caloFonts);
+  return (
+    <SafeAreaProvider>
+      {loaded ? (
+        <CaloBottomSheetProvider>
+          <Stack screenOptions={{ headerShown: false, contentStyle: { backgroundColor: caloTokens.color.canvas } }} />
+        </CaloBottomSheetProvider>
+      ) : (
+        <CaloScreen />
+      )}
+    </SafeAreaProvider>
+  );
+}
+`);
+  const showroom = fs.readFileSync(path.join(__dirname, "templates", "gallery-index.tsx"), "utf8");
+  fs.writeFileSync(path.join(appDir, "index.tsx"), showroom);
+  // The showroom require()s a few local images (../assets/... from src/app) — ship them too.
+  const assetsSrc = path.join(__dirname, "templates", "gallery-assets");
+  if (fs.existsSync(assetsSrc)) fs.cpSync(assetsSrc, path.join(projectRoot, "src", "assets"), { recursive: true });
+}
+
 function writeGitignore(projectRoot) {
   const gi = path.join(projectRoot, ".gitignore");
   const needed = ["node_modules/", ".expo/", "dist/", "*.log"];
@@ -602,6 +640,37 @@ async function cmdFeed() {
   for (const e of data.events) log(`${c.dim(e.ts)}  ${e.email}  ${c.b(e.action)}  ${e.target || ""}`);
 }
 
+// Serve the component gallery (the @calo/design-system showroom) locally, rendered LIVE from
+// the shared runtime — so `calo-design update` keeps it current (no rebuild/redeploy). Design
+// Kitchen auto-starts this; it also works standalone in a terminal. Runs Metro in the
+// foreground so whoever launched it owns the process lifecycle.
+async function cmdGallery() {
+  if (!runtimeExists()) {
+    throw new Error("The Calo runtime isn't set up on this machine yet — run `calo-design init` first, then retry.");
+  }
+  const dir = path.join(designchefHome(), "gallery");
+  fs.mkdirSync(dir, { recursive: true });
+  // Materialize / refresh a thin project linked to the shared runtime (same machinery as
+  // a linked prototype), then swap in the showroom routes.
+  writeThinConfigs(dir);
+  ensureBabelConfig(dir);
+  writeMetroConfig(dir);
+  writeGitignore(dir);
+  linkNodeModules(dir);
+  writeGalleryApp(dir);
+
+  let port = "8091";
+  const pj = args.find((a) => a.startsWith("--port="));
+  if (pj) port = pj.slice(7);
+  else { const pi = args.indexOf("--port"); if (pi >= 0) port = args[pi + 1] || port; }
+  if (!/^\d+$/.test(port)) port = "8091";
+
+  log(c.b(`\n[gallery] Serving the Calo component gallery on http://localhost:${port}`));
+  log(c.dim(`  Live from the shared runtime (${tilde(runtimeDir())}) — always the installed @calo/design-system.`));
+  log(c.dim("  First launch compiles the design system (~30–60s). Ctrl-C to stop."));
+  run("npx", ["expo", "start", "--web", "--port", port], { cwd: dir });
+}
+
 function help() {
   log(`${c.b("calo-design")} — one-line setup for Calo design tooling
 
@@ -617,6 +686,8 @@ function help() {
   ${c.dim("    push --slug x --title \"…\" --owner \"…\" --screenshot path  --dry-run  --direct")}
   ${c.dim("share")}                                     publish THIS web prototype (React/Vite/CRA/Next) to Cloudflare Pages → share link
   ${c.dim("    share --slug x --dir dist --build --project calo-prototypes  --dry-run")}
+  ${c.dim("gallery")}                                   serve the @calo/design-system component gallery locally (live from the runtime)
+  ${c.dim("    gallery --port 8091")}
 
   Login is required once before init; the session refreshes automatically.
   init always installs the skill and ensures the shared ds/flows runtime on your machine;
@@ -636,6 +707,7 @@ function help() {
     else if (cmd === "share") await cmdShare(args.slice(1));
     else if (cmd === "feed") await cmdFeed();
     else if (cmd === "whoami") await cmdWhoami();
+    else if (cmd === "gallery") await cmdGallery();
     else help();
   } catch (err) {
     // Diagnostics go to stderr so stdout stays pure for machine callers (The Pass parses