juo 0.3.0-alpha.1 → 0.3.0-alpha.3

package/README.md

@@ -20,7 +20,7 @@ $ npm install -g juo
 $ juo COMMAND
 running command...
 $ juo (--version)
-juo/0.3.0-alpha.1 linux-x64 node-v22.21.0
+juo/0.3.0-alpha.3 linux-x64 node-v22.21.0
 $ juo --help [COMMAND]
 USAGE
   $ juo COMMAND

package/bin/dev.js

@@ -11,6 +11,7 @@ import {fileURLToPath} from 'node:url'
 const readVersion = (relPath) =>
   JSON.parse(readFileSync(fileURLToPath(new URL(relPath, import.meta.url)), 'utf8')).version
 
+process.env.BLOCKS_DEVTOOLS_VERSION = readVersion('../../devtools/overlay/package.json')
 process.env.BLOCKS_EDITOR_VERSION = readVersion('../../editor/package.json')
 process.env.BLOCKS_EXTENSIONS_VERSION = readVersion('../../extensions/package.json')
 // `__CUSTOMER_UI_VERSION__` / `__BLOCKS_VERSION__` are bare globals in

package/dist/commands/blocks/dev.d.ts

@@ -1,12 +1,12 @@
 import { t as BaseCommand } from "../../base-command-BQVnm_gK.js";
-import * as _oclif_core_interfaces0 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces10 from "@oclif/core/interfaces";
 
 //#region src/commands/blocks/dev.d.ts
 declare class Dev extends BaseCommand<typeof Dev> {
   static description: string;
   static examples: string[];
   static flags: {
-    port: _oclif_core_interfaces0.OptionFlag<number, _oclif_core_interfaces0.CustomOptions>;
+    port: _oclif_core_interfaces10.OptionFlag<number, _oclif_core_interfaces10.CustomOptions>;
   };
   run(): Promise<void>;
   private resolvePackageJsonPath;

package/dist/commands/create.d.ts

@@ -1,13 +1,13 @@
 import { Command } from "@oclif/core";
-import * as _oclif_core_interfaces1 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces0 from "@oclif/core/interfaces";
 
 //#region src/commands/create.d.ts
 declare class Create extends Command {
   static description: string;
   static flags: {
-    quickstart: _oclif_core_interfaces1.BooleanFlag<boolean>;
-    storybook: _oclif_core_interfaces1.BooleanFlag<boolean>;
-    verbose: _oclif_core_interfaces1.BooleanFlag<boolean>;
+    quickstart: _oclif_core_interfaces0.BooleanFlag<boolean>;
+    storybook: _oclif_core_interfaces0.BooleanFlag<boolean>;
+    verbose: _oclif_core_interfaces0.BooleanFlag<boolean>;
   };
   run(): Promise<void>;
   private getProjectConfig;

package/dist/commands/create.js

@@ -1,5 +1,5 @@
 import { r as BaseTemplateGenerator } from "../juoTemplateGenerator-RkinYN2l.js";
-import { t as PackageGenerator } from "../packageGenerator-D81lWXTA.js";
+import { t as PackageGenerator } from "../packageGenerator-CE68rONC.js";
 import { t as Generate } from "../generate-BiHo2p9_.js";
 import { Command, Flags } from "@oclif/core";
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
@@ -7,7 +7,7 @@ import path from "node:path";
 import { spawn } from "node:child_process";
 import { defineTSConfig, writeTSConfig } from "pkg-types";
 import { confirm, isCancel, outro, select, spinner, text } from "@clack/prompts";
-import { readdir, rm, stat, unlink } from "node:fs/promises";
+import { rm } from "node:fs/promises";
 
 //#region src/utils/configFilesGenerator.ts
 var ConfigFilesGenerator = class extends BaseTemplateGenerator {
@@ -21,8 +21,9 @@ var ConfigFilesGenerator = class extends BaseTemplateGenerator {
 var DevHarnessGenerator = class extends BaseTemplateGenerator {
 	generate(destDir, options) {
 		this.renderTemplate("dev", destDir, {
-			editorVersion: "0.25.0-alpha.2",
-			extensionsVersion: "1.12.0-alpha.1",
+			devtoolsVersion: "0.1.0-alpha.3",
+			editorVersion: "0.25.0-alpha.4",
+			extensionsVersion: "1.12.0-alpha.3",
 			tailwind: options.tailwind
 		});
 	}
@@ -37,24 +38,8 @@ const COMMAND_CONFIG = {
 };
 var StorybookGenerator = class extends BaseTemplateGenerator {
 	async appendStylesToPreview(destDir) {
-		const storybookDir = path.join(destDir, ".storybook");
-		const previewJsPath = path.join(storybookDir, "preview.js");
-		const previewTsPath = path.join(storybookDir, "preview.ts");
-		const importStatement = "import \"../src/styles.css\";\n";
 		try {
-			const previewJsExists = existsSync(previewJsPath);
-			const previewTsExists = existsSync(previewTsPath);
-			let targetPath;
-			if (previewTsExists) targetPath = previewTsPath;
-			else if (previewJsExists) targetPath = previewJsPath;
-			else {
-				targetPath = previewTsPath;
-				mkdirSync(storybookDir, { recursive: true });
-				writeFileSync(targetPath, importStatement);
-				return;
-			}
-			const existingContent = readFileSync(targetPath, "utf8");
-			if (!existingContent.includes("import \"../src/styles.css\"")) writeFileSync(targetPath, importStatement + existingContent);
+			this.prependImportToPreview(destDir, "import \"../src/styles.css\";");
 		} catch (error) {
 			throw new Error(`Error appending styles to preview: ${error}`);
 		}
@@ -106,33 +91,94 @@ var StorybookGenerator = class extends BaseTemplateGenerator {
 		const storybookDir = path.join(destDir, ".storybook");
 		this.renderTemplate(".storybook", storybookDir, {});
 	}
-	async cleanUp(destDir) {
-		try {
-			const items = await readdir(destDir);
-			const itemsToSkip = new Set(["assets", "Configure.mdx"]);
-			for (const item of items) {
-				const itemPath = path.join(destDir, item);
-				const stats = await stat(itemPath);
-				if (itemsToSkip.has(item)) continue;
-				await (stats.isDirectory() ? rm(itemPath, {
-					force: true,
-					recursive: true
-				}) : unlink(itemPath));
-			}
-		} catch (error) {
-			throw new Error(`Error cleaning up storybook: ${error}`);
+	/**
+	* Prepends an import to the Storybook preview file (preview.ts/preview.js),
+	* creating it if Storybook init didn't. No-ops when the import is already
+	* present so repeated runs stay idempotent.
+	*/
+	prependImportToPreview(destDir, importStatement) {
+		const storybookDir = path.join(destDir, ".storybook");
+		const previewTsPath = path.join(storybookDir, "preview.ts");
+		const previewJsPath = path.join(storybookDir, "preview.js");
+		const line = `${importStatement}\n`;
+		let targetPath;
+		if (existsSync(previewTsPath)) targetPath = previewTsPath;
+		else if (existsSync(previewJsPath)) targetPath = previewJsPath;
+		else {
+			mkdirSync(storybookDir, { recursive: true });
+			writeFileSync(previewTsPath, line);
+			return;
 		}
+		const existingContent = readFileSync(targetPath, "utf8");
+		if (!existingContent.includes(importStatement)) writeFileSync(targetPath, line + existingContent);
+	}
+	/**
+	* The starter block renders `@juo/customer-ui` web components (`<juo-card>`,
+	* `<juo-text>`, `<juo-button>`). The dev harness registers them via the
+	* generated `register.ts`, but the Storybook preview has no such entry, so
+	* import the side-effecting bundle here to define the custom elements.
+	*/
+	registerWebComponents(destDir) {
+		this.prependImportToPreview(destDir, "import \"@juo/customer-ui/web-components\";");
+	}
+	injectViteFinal(content, isTs) {
+		const viteFinal = [
+			"  viteFinal: async (config) => {",
+			"    // Storybook loads the project vite.config, which registers the dev-harness",
+			"    // `juo()` plugin. That plugin injects the Blocks editor/devtools embed into",
+			"    // every served HTML page, so strip it from the preview pipeline here.",
+			"    config.plugins = (config.plugins ?? []).filter(",
+			`      (plugin) => !(plugin && typeof plugin === "object" && ${isTs ? "(plugin as { name?: string }).name === \"juo-editor\"" : "plugin.name === \"juo-editor\""}),`,
+			"    );",
+			"    return config;",
+			"  },"
+		].join("\n");
+		for (const pattern of [
+			/(const config\s*:\s*StorybookConfig\s*=\s*\{)/,
+			/(defineMain\(\{)/,
+			/(export default \{)/
+		]) if (pattern.test(content)) return content.replace(pattern, `$1\n${viteFinal}`);
+		return content;
+	}
+	/**
+	* Rewrites the Storybook init `main.ts`/`main.js` so it (1) discovers stories
+	* from the top-level `stories/` dir the CLI emits block stories into, and
+	* (2) strips the dev-harness `juo()` plugin from the preview's vite pipeline.
+	*/
+	async patchMainConfig(destDir) {
+		const storybookDir = path.join(destDir, ".storybook");
+		const tsPath = path.join(storybookDir, "main.ts");
+		const jsPath = path.join(storybookDir, "main.js");
+		const mainPath = existsSync(tsPath) ? tsPath : existsSync(jsPath) ? jsPath : null;
+		if (!mainPath) return;
+		let content = readFileSync(mainPath, "utf8");
+		content = content.replaceAll("../src/**", "../stories/**");
+		if (!content.includes("viteFinal")) content = this.injectViteFinal(content, mainPath.endsWith(".ts"));
+		writeFileSync(mainPath, content);
 	}
 	async postGenerate(destDir) {
-		const storiesDir = path.join(destDir, "stories");
 		try {
-			if (!existsSync(storiesDir)) mkdirSync(storiesDir, { recursive: true });
-			await this.cleanUp(storiesDir);
+			await this.removeExampleStories(destDir);
 			await this.appendPreviewHead(destDir);
+			await this.patchMainConfig(destDir);
+			this.registerWebComponents(destDir);
 		} catch (error) {
 			throw new Error(`Error post-generating storybook: ${error}`);
 		}
 	}
+	/**
+	* Storybook init scaffolds example stories (Button/Header/Page) into
+	* `src/stories`. The CLI emits real block stories into the top-level
+	* `stories/` dir afterwards, so drop the scaffolding to avoid shipping
+	* unrelated example stories.
+	*/
+	async removeExampleStories(destDir) {
+		const exampleDirs = [path.join(destDir, "src", "stories"), path.join(destDir, "stories")];
+		for (const dir of exampleDirs) if (existsSync(dir)) await rm(dir, {
+			force: true,
+			recursive: true
+		});
+	}
 };
 
 //#endregion

package/dist/commands/generate.d.ts

@@ -1,15 +1,15 @@
 import { Command } from "@oclif/core";
-import * as _oclif_core_interfaces6 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces4 from "@oclif/core/interfaces";
 
 //#region src/commands/generate.d.ts
 declare class Generate extends Command {
   static description: string;
   static examples: string[];
   static flags: {
-    name: _oclif_core_interfaces6.OptionFlag<string | undefined, _oclif_core_interfaces6.CustomOptions>;
-    tailwind: _oclif_core_interfaces6.BooleanFlag<boolean>;
-    type: _oclif_core_interfaces6.OptionFlag<string, _oclif_core_interfaces6.CustomOptions>;
-    verbose: _oclif_core_interfaces6.BooleanFlag<boolean>;
+    name: _oclif_core_interfaces4.OptionFlag<string | undefined, _oclif_core_interfaces4.CustomOptions>;
+    tailwind: _oclif_core_interfaces4.BooleanFlag<boolean>;
+    type: _oclif_core_interfaces4.OptionFlag<string, _oclif_core_interfaces4.CustomOptions>;
+    verbose: _oclif_core_interfaces4.BooleanFlag<boolean>;
   };
   static id: string;
   run(): Promise<void>;

package/dist/commands/publish/index.d.ts

@@ -1,5 +1,5 @@
 import { t as BaseCommand } from "../../base-command-BQVnm_gK.js";
-import * as _oclif_core_interfaces4 from "@oclif/core/interfaces";
+import * as _oclif_core_interfaces2 from "@oclif/core/interfaces";
 
 //#region src/commands/publish/index.d.ts
 declare class Publish extends BaseCommand<typeof Publish> {
@@ -7,7 +7,7 @@ declare class Publish extends BaseCommand<typeof Publish> {
   static description: string;
   static examples: string[];
   static flags: {
-    theme: _oclif_core_interfaces4.OptionFlag<string, _oclif_core_interfaces4.CustomOptions>;
+    theme: _oclif_core_interfaces2.OptionFlag<string, _oclif_core_interfaces2.CustomOptions>;
   };
   getAllFiles(dirPath: string, basePath: string): string[];
   run(): Promise<void>;

package/dist/lib/index.d.ts

@@ -7,6 +7,7 @@ interface TemplateScope {
     slug: string;
     tailwind?: boolean;
   };
+  devtoolsVersion?: string;
   editorVersion?: string;
   extensionsVersion?: string;
   tailwind?: boolean;

package/dist/lib/index.js

@@ -1,4 +1,4 @@
 import { n as StoryGenerator, r as BaseTemplateGenerator, t as JuoTemplateGenerator } from "../juoTemplateGenerator-RkinYN2l.js";
-import { t as PackageGenerator } from "../packageGenerator-D81lWXTA.js";
+import { t as PackageGenerator } from "../packageGenerator-CE68rONC.js";
 
 export { BaseTemplateGenerator, JuoTemplateGenerator, PackageGenerator, StoryGenerator };

package/dist/{packageGenerator-D81lWXTA.js → packageGenerator-CE68rONC.js}

@@ -80,15 +80,16 @@ var PackageGenerator = class {
 		});
 		const frameworkConfig = FRAMEWORK_CONFIGS[options.framework];
 		baseConfig.dependencies = {
-			"@juo/blocks": "^1.12.0-alpha.2",
-			"@juo/customer-ui": "^0.5.0-alpha.4",
+			"@juo/blocks": "^1.12.0-alpha.3",
+			"@juo/customer-ui": "^0.5.0-alpha.6",
 			...baseConfig.dependencies,
 			...frameworkConfig.dependencies
 		};
 		baseConfig.devDependencies = {
 			...baseConfig.devDependencies,
 			...frameworkConfig.devDependencies,
-			...options.storybook ? frameworkConfig.storybookDevDependencies : {}
+			...options.storybook ? frameworkConfig.storybookDevDependencies : {},
+			"lit-html": "3.3.0"
 		};
 		return this.sort(baseConfig);
 	}

package/oclif.manifest.json

@@ -179,5 +179,5 @@
       ]
     }
   },
-  "version": "0.3.0-alpha.1"
+  "version": "0.3.0-alpha.3"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "juo",
   "description": "A CLI tool for the Juo platform",
-  "version": "0.3.0-alpha.1",
+  "version": "0.3.0-alpha.3",
   "author": "Juo (https://juo.io)",
   "bin": {
     "juo": "./bin/run.js"

package/templates/.storybook/preview-head.html.liquid

@@ -1,10 +1,8 @@
-<link
-  rel="stylesheet"
-  href="https://cdn.jsdelivr.net/npm/inter-ui@3.19.3/inter.min.css"
-/>
+<link rel="preconnect" href="https://rsms.me/" />
+<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
 <style>
   html {
-    font-family: "Inter var", sans-serif !important;
+    font-family: InterVariable, Inter, sans-serif !important;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }

package/templates/block/preact/index.ts.liquid

@@ -1,7 +1,22 @@
 import { defineBlock } from "@juo/blocks";
 import { createPreactRenderer } from "@juo/blocks/preact";
-import { {{ block.clsName }} } from "./{{block.clsName}}.tsx";
-import type { FromSchema, JSONSchema } from "json-schema-to-ts";
+import type { ExtendedJSONSchema, FromSchema } from "json-schema-to-ts";
+import { {{ block.clsName }} } from "./{{ block.clsName }}.tsx";
+
+// Default copy for this block, keyed by translation key. Shipped through the
+// block's `locales` loader so the editor's translation panel can override each
+// string per theme/locale. The keys here are the namespace for this block.
+const enTranslations = {
+  title: "{{ block.framework | capitalize }} + TypeScript",
+  subtitle: "Starter Block",
+};
+
+// Allow the juo-specific schema keywords used below. `format: "color"` is a
+// standard JSON Schema keyword and needs no extension.
+type ExtendedSchema = ExtendedJSONSchema<{
+  "x-juo-control-type": string;
+  "x-juo-option-labels": Record<string, string>;
+}>;
 
 const schema = {
   type: "object",
@@ -9,31 +24,71 @@ const schema = {
     props: {
       type: "object",
       properties: {
-        title: { type: "string" },
-        subtitle: { type: "string" },
-        initialCount: { type: "number" },
+        // `x-juo-control-type: "inline-text"` -> edited directly on the canvas
+        // via <juo-text>; the edit is stored as a translation override.
+        title: {
+          type: "string",
+          "x-juo-control-type": "inline-text",
+          description: "Heading — edit inline on the canvas.",
+        },
+        subtitle: {
+          type: "string",
+          "x-juo-control-type": "inline-text",
+          description: "Supporting text — edit inline on the canvas.",
+        },
+        // `enum` -> Select control. `x-juo-option-labels` gives each option a
+        // friendly label in the editor.
+        buttonVariant: {
+          enum: ["solid", "outline", "ghost"],
+          title: "Button style",
+          "x-juo-option-labels": {
+            solid: "Solid",
+            outline: "Outline",
+            ghost: "Ghost",
+          },
+        },
+        // `format: "color"` -> Color control
+        accentColor: {
+          type: "string",
+          format: "color",
+          title: "Accent color",
+          description:
+            "Color for the icons. Leave empty to use the default neutral color.",
+        },
+        // `x-juo-control-type: "stepper"` -> Stepper control
+        initialCount: {
+          type: "number",
+          title: "Initial count",
+          "x-juo-control-type": "stepper",
+        },
       },
-      required: ["title", "subtitle", "initialCount"],
+      required: ["title", "subtitle", "buttonVariant", "initialCount"],
       additionalProperties: false,
     },
   },
   required: ["props"],
   additionalProperties: false,
-} as const satisfies JSONSchema;
+} as const satisfies ExtendedSchema;
 
 type Schema = FromSchema<typeof schema>;
 export type Props = Schema["props"];
 
-export const {{ block.clsName }}Block = defineBlock("{{ block.name }}", {
+export const {{ block.clsName }}Block = defineBlock<Schema>("{{ block.name }}", {
   group: "theme",
   schema,
   initialValue: () => ({
     props: {
-      title: "{{ block.framework | capitalize }} + TypeScript",
-      subtitle: "Starter Block",
+      title: enTranslations.title,
+      subtitle: enTranslations.subtitle,
+      buttonVariant: "solid",
+      accentColor: "",
       initialCount: 0,
     },
     slots: {},
   }),
   renderer: createPreactRenderer({{ block.clsName }}),
+  locales: {
+    supported: ["en"],
+    load: async () => enTranslations,
+  },
 });