juo 0.0.1-alpha.3 → 0.0.1-alpha.4

package/README.md

@@ -20,7 +20,7 @@ $ npm install -g juo
 $ juo COMMAND
 running command...
 $ juo (--version)
-juo/0.0.1-alpha.3 darwin-arm64 node-v22.13.1
+juo/0.0.1-alpha.4 darwin-arm64 node-v22.13.1
 $ juo --help [COMMAND]
 USAGE
   $ juo COMMAND
@@ -31,9 +31,49 @@ USAGE
 # Commands
 
 <!-- commands -->
+* [`juo create`](#juo-create)
+* [`juo generate`](#juo-generate)
 * [`juo help [COMMAND]`](#juo-help-command)
 * [`juo publish`](#juo-publish)
 
+## `juo create`
+
+Generate a new Juo project
+
+```
+USAGE
+  $ juo create [-q] [-v]
+
+FLAGS
+  -q, --quickstart
+  -v, --verbose
+
+DESCRIPTION
+  Generate a new Juo project
+```
+
+## `juo generate`
+
+Generate blocks for your project
+
+```
+USAGE
+  $ juo generate [-n <value>] [--type block] [-t] [-v]
+
+FLAGS
+  -n, --name=<value>   The name of the component
+  -t, --[no-]tailwind
+  -v, --[no-]verbose
+      --type=<option>  [default: block] The type of the component
+                       <options: block>
+
+DESCRIPTION
+  Generate blocks for your project
+
+EXAMPLES
+  $ juo generate
+```
+
 ## `juo help [COMMAND]`
 
 Display help for juo.
@@ -43,7 +83,7 @@ USAGE
   $ juo help [COMMAND...] [-n]
 
 ARGUMENTS
-  COMMAND...  Command to show help for.
+  [COMMAND...]  Command to show help for.
 
 FLAGS
   -n, --nested-commands  Include all nested commands in the output.

package/bin/dev.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env -S node --loader ts-node/esm --disable-warning=ExperimentalWarning
+#!/usr/bin/env -S npx tsx
 
 import {execute} from '@oclif/core'
 

package/dist/analytics-B2gwRg5Q.js

@@ -0,0 +1,69 @@
+import debug from "debug";
+
+//#region src/utils/config.ts
+const MIXPANEL_TOKEN = "919dd811a5e2137983cc8fc304b8584b";
+const MIXPANEL_API_URL = "https://api-eu.mixpanel.com";
+const CUSTOMERIO_BETA_FORM_URL = "https://track-cio.juo.io/api/v1/forms/3c02106b-9746-4ebe-a116-553e47494eb4/submit";
+const CUSTOMERIO_SITE_ID = "60da89062ce61084fc27";
+const CUSTOMERIO_API_KEY = "1d54688e66cddda9ea72";
+
+//#endregion
+//#region src/utils/analytics.ts
+const log = debug("juo:analytics");
+let userId = null;
+function getUserId() {
+	if (!userId) userId = `cli_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`;
+	return userId;
+}
+async function sendToMixpanel(event) {
+	if (!MIXPANEL_TOKEN) return;
+	try {
+		const data = {
+			event: event.event,
+			properties: {
+				...event.properties,
+				token: MIXPANEL_TOKEN,
+				distinct_id: getUserId(),
+				time: Math.floor(Date.now() / 1e3)
+			}
+		};
+		const encodedData = Buffer.from(JSON.stringify(data)).toString("base64");
+		await fetch(`${MIXPANEL_API_URL}/track?data=${encodedData}`, {
+			method: "GET",
+			headers: { "Content-Type": "application/json" }
+		}).catch((error) => {
+			log("Failed to send analytics event to Mixpanel: %O", error);
+		});
+	} catch (error) {
+		log("Error sending analytics event: %O", error);
+	}
+}
+function trackEvent(eventName, properties = {}) {
+	sendToMixpanel({
+		event: eventName,
+		properties
+	}).catch((error) => {
+		log("Failed to track event %s: %O", eventName, error);
+	});
+}
+function trackCommandStarted(commandName, flags = {}) {
+	trackEvent("cli.command.started", {
+		command: commandName,
+		...flags
+	});
+}
+function trackCommandCompleted(commandName, success = true) {
+	trackEvent("cli.command.completed", {
+		command: commandName,
+		success
+	});
+}
+function trackBetaSignup(email, commandContext) {
+	trackEvent("cli.beta.signup", {
+		email,
+		command: commandContext
+	});
+}
+
+//#endregion
+export { CUSTOMERIO_BETA_FORM_URL as a, CUSTOMERIO_API_KEY as i, trackCommandCompleted as n, CUSTOMERIO_SITE_ID as o, trackCommandStarted as r, trackBetaSignup as t };

package/dist/commands/create.d.ts

@@ -0,0 +1,15 @@
+import { Command } from "@oclif/core";
+import * as _oclif_core_interfaces1 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>;
+    verbose: _oclif_core_interfaces1.BooleanFlag<boolean>;
+  };
+  run(): Promise<void>;
+  private getProjectConfig;
+}
+//#endregion
+export { Create as default };

package/dist/commands/create.js

@@ -0,0 +1,465 @@
+import { n as BaseTemplateGenerator, t as Generate } from "../generate-D7J6nPBd.js";
+import { Command, Flags } from "@oclif/core";
+import { isCancel, outro, select, spinner, text } from "@clack/prompts";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+import { definePackageJSON, defineTSConfig, sortPackage, writePackageJSON, writeTSConfig } from "pkg-types";
+import { execSync, spawn } from "node:child_process";
+import { readdir, rm, stat, unlink } from "node:fs/promises";
+
+//#region src/utils/packageGenerator.ts
+const FRAMEWORK_CONFIGS = {
+	react: {
+		dependencies: {
+			"@juo/orion-core": "^0.4.0-rc.1",
+			"@mantine/core": "7.5.3",
+			"@mantine/hooks": "7.5.3",
+			react: "^18.2.0",
+			"react-dom": "^18.2.0"
+		},
+		devDependencies: {
+			"@storybook/react-vite": "^10.0.7",
+			"@types/react": "^18.2.55",
+			"@types/react-dom": "^18.2.19",
+			"@vitejs/plugin-react": "^5.1.1",
+			"vite-plugin-svgr": "^4.5.0"
+		}
+	},
+	preact: {
+		dependencies: { preact: "^10.26.8" },
+		devDependencies: {
+			"@storybook/react-vite": "^10.0.7",
+			"json-schema-to-ts": "^3.1.1",
+			"@preact/preset-vite": "^2.10.2",
+			"vite-plugin-svgr": "^4.5.0"
+		}
+	}
+};
+var PackageGenerator = class {
+	static async generate(destDir, options) {
+		if (!existsSync(destDir)) mkdirSync(destDir, { recursive: true });
+		const packageJsonPath = path.join(destDir, "package.json");
+		const packageJson = this.buildPackageJson(options);
+		try {
+			await writePackageJSON(packageJsonPath, packageJson);
+		} catch (error) {
+			throw new Error(`Failed to write package.json to ${packageJsonPath}: ${error instanceof Error ? error.message : String(error)}`);
+		}
+	}
+	static sort(packageJson) {
+		return sortPackage(packageJson);
+	}
+	static readPackageManagerVersion(packageManager) {
+		try {
+			return execSync(`${packageManager} --version`, {
+				encoding: "utf-8",
+				stdio: [
+					"pipe",
+					"pipe",
+					"ignore"
+				]
+			}).trim();
+		} catch (error) {
+			console.warn(`Failed to read ${packageManager} version, using fallback`);
+			return "latest";
+		}
+	}
+	static buildPackageJson(options) {
+		const pmVersion = this.readPackageManagerVersion(options.packageManager);
+		const baseConfig = definePackageJSON({
+			name: options.name,
+			private: true,
+			version: "0.0.0",
+			type: "module",
+			scripts: {
+				dev: "vite build -w & vite preview --port 5174",
+				build: "tsc && vite build",
+				preview: "vite preview",
+				storybook: "storybook dev -p 6006",
+				"build-storybook": "storybook build"
+			},
+			engines: {
+				node: ">=20.0.0",
+				pnpm: ">=7.0.0"
+			},
+			packageManager: `${options.packageManager}@${pmVersion}`,
+			devDependencies: {
+				"@testing-library/dom": "^10.4.0",
+				"@types/node": "^22.15.29",
+				"json-schema-to-ts": "^3.1.1",
+				postcss: "^8.5.3",
+				"postcss-prefix-selector": "^2.1.1",
+				prettier: "^3.5.3",
+				...options.tailwind ? {
+					tailwindcss: "^4.1.17",
+					"@tailwindcss/vite": "^4.1.17"
+				} : {},
+				storybook: "^10.0.7",
+				typebox: "^1.0.51",
+				typescript: "~5.7.2",
+				vite: "^6.3.1"
+			}
+		});
+		if (options.framework === "react") {
+			baseConfig.devDependencies = {
+				...baseConfig.devDependencies,
+				...FRAMEWORK_CONFIGS.react.devDependencies
+			};
+			baseConfig.dependencies = {
+				...baseConfig.dependencies,
+				...FRAMEWORK_CONFIGS.react.dependencies
+			};
+		} else if (options.framework === "preact") {
+			baseConfig.dependencies = {
+				...baseConfig.dependencies,
+				...FRAMEWORK_CONFIGS.preact.dependencies
+			};
+			baseConfig.devDependencies = {
+				...baseConfig.devDependencies,
+				...FRAMEWORK_CONFIGS.preact.devDependencies
+			};
+		}
+		return this.sort(baseConfig);
+	}
+};
+
+//#endregion
+//#region src/utils/storybookGenerator.ts
+const COMMAND_CONFIG = {
+	npm: "npx",
+	yarn: "yarn dlx",
+	pnpm: "pnpx"
+};
+var StorybookGenerator = class extends BaseTemplateGenerator {
+	async generate(destDir, options) {
+		const args = [
+			"storybook@latest",
+			"init",
+			"--skip-install",
+			"--package-manager",
+			options.packageManager,
+			"--builder",
+			"vite",
+			"--type",
+			"react",
+			"--no-dev",
+			"--features",
+			"docs",
+			"--disable-telemetry",
+			"--yes"
+		];
+		const command = COMMAND_CONFIG[options.packageManager];
+		if (!options.verbose) options.logger?.("Initializing Storybook...");
+		return new Promise((resolve, reject) => {
+			const child = spawn(command, args, {
+				cwd: destDir,
+				stdio: options.verbose ? "inherit" : [
+					"ignore",
+					"ignore",
+					"ignore"
+				],
+				shell: true
+			});
+			child.on("close", async (code) => {
+				if (code === 0) try {
+					await this.postGenerate(destDir);
+					resolve();
+				} catch (error) {
+					reject(error);
+				}
+				else reject(/* @__PURE__ */ new Error(`Storybook init failed with exit code ${code}`));
+			});
+			child.on("error", (error) => {
+				reject(/* @__PURE__ */ new Error(`Error initializing storybook: ${error.message}`));
+			});
+		});
+	}
+	async cleanUp(destDir) {
+		try {
+			const items = await readdir(destDir);
+			const itemsToSkip = ["assets", "Configure.mdx"];
+			for (const item of items) {
+				const itemPath = path.join(destDir, item);
+				const stats = await stat(itemPath);
+				if (itemsToSkip.includes(item)) continue;
+				if (stats.isDirectory()) await rm(itemPath, {
+					recursive: true,
+					force: true
+				});
+				else await unlink(itemPath);
+			}
+		} catch (error) {
+			throw new Error(`Error cleaning up storybook: ${error}`);
+		}
+	}
+	async appendPreviewHead(destDir) {
+		const storybookDir = path.join(destDir, ".storybook");
+		this.renderTemplate(".storybook", storybookDir, {});
+	}
+	async postGenerate(destDir) {
+		const storiesDir = path.join(destDir, "stories");
+		try {
+			if (!existsSync(storiesDir)) mkdirSync(storiesDir, { recursive: true });
+			await this.cleanUp(storiesDir);
+			await this.appendPreviewHead(destDir);
+		} catch (error) {
+			throw new Error(`Error post-generating storybook: ${error}`);
+		}
+	}
+	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, "utf-8");
+			if (!existingContent.includes("import \"../src/styles.css\"")) writeFileSync(targetPath, importStatement + existingContent);
+		} catch (error) {
+			throw new Error(`Error appending styles to preview: ${error}`);
+		}
+	}
+};
+
+//#endregion
+//#region src/utils/tsconfigGenerator.ts
+const baseTSConfig = {
+	compilerOptions: {
+		target: "ES2022",
+		module: "ESNext",
+		moduleResolution: "bundler",
+		jsx: "react-jsx",
+		strict: true,
+		esModuleInterop: true,
+		allowSyntheticDefaultImports: true,
+		skipLibCheck: true,
+		resolveJsonModule: true,
+		allowImportingTsExtensions: true,
+		isolatedModules: true,
+		noEmit: true,
+		forceConsistentCasingInFileNames: true,
+		types: ["vitest/globals", "node"]
+	},
+	include: [
+		"src/**/*",
+		"vitest.config.ts",
+		"vitest.shims.d.ts",
+		"vite-env.d.ts"
+	],
+	exclude: ["node_modules", "dist"]
+};
+const preactTSConfig = {
+	...baseTSConfig,
+	compilerOptions: {
+		...baseTSConfig.compilerOptions,
+		paths: {
+			react: ["./node_modules/preact/compat/"],
+			"react-dom": ["./node_modules/preact/compat/"]
+		},
+		jsxImportSource: "preact"
+	}
+};
+const configs = {
+	react: {
+		...baseTSConfig,
+		compilerOptions: { ...baseTSConfig.compilerOptions }
+	},
+	preact: preactTSConfig
+};
+var TsconfigGenerator = class {
+	static async generate(destDir, options) {
+		try {
+			const tsconfigPath = path.join(destDir, "tsconfig.json");
+			if (!existsSync(tsconfigPath)) mkdirSync(path.dirname(tsconfigPath), { recursive: true });
+			await writeTSConfig(tsconfigPath, defineTSConfig(configs[options.framework] ?? baseTSConfig));
+		} catch (error) {
+			throw new Error(`Error generating TypeScript configuration: ${error}`);
+		}
+	}
+};
+
+//#endregion
+//#region src/utils/tailwindGenerator.ts
+var TailwindGenerator = class extends BaseTemplateGenerator {
+	async generate(destDir, options) {
+		this.renderTemplate("tailwind", destDir, { framework: options.framework });
+		await this.appendStorybookPreview(destDir);
+	}
+	async appendStorybookPreview(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/tailwind.css\";\n";
+		const previewJsExists = existsSync(previewJsPath);
+		const previewTsExists = existsSync(previewTsPath);
+		let targetPath;
+		if (previewTsExists) targetPath = previewTsPath;
+		else if (previewJsExists) targetPath = previewJsPath;
+		else {
+			targetPath = previewTsPath;
+			try {
+				mkdirSync(storybookDir, { recursive: true });
+				writeFileSync(targetPath, importStatement);
+				return;
+			} catch (error) {
+				throw new Error(`Error appending Storybook preview: ${error}`);
+			}
+		}
+		try {
+			const existingContent = readFileSync(targetPath, "utf-8");
+			if (!existingContent.includes("import \"../src/tailwind.css\"")) writeFileSync(targetPath, importStatement + existingContent);
+		} catch (error) {
+			throw new Error(`Error appending Storybook preview: ${error}`);
+		}
+	}
+};
+
+//#endregion
+//#region src/utils/configFilesGenerator.ts
+var ConfigFilesGenerator = class extends BaseTemplateGenerator {
+	async generate(destDir, options) {
+		this.renderTemplate("configFiles", destDir, { framework: options.framework });
+	}
+};
+
+//#endregion
+//#region src/commands/create.ts
+var Create = class Create extends Command {
+	static description = "Generate a new Juo project";
+	static flags = {
+		quickstart: Flags.boolean({ char: "q" }),
+		verbose: Flags.boolean({ char: "v" })
+	};
+	async run() {
+		const { flags } = await this.parse(Create);
+		const { packageName, packageManager, framework, tailwind } = await this.getProjectConfig(flags.quickstart);
+		const storybookGenerator = new StorybookGenerator();
+		const projectDir = path.resolve("./", packageName);
+		const packageJsonSpinner = spinner();
+		packageJsonSpinner.start();
+		packageJsonSpinner.message("Generating package.json file");
+		await PackageGenerator.generate(projectDir, {
+			name: packageName,
+			packageManager,
+			framework,
+			tailwind
+		});
+		packageJsonSpinner.stop("Generated package.json");
+		await new ConfigFilesGenerator().generate(projectDir, { framework });
+		const storybookSpinner = spinner();
+		storybookSpinner.start();
+		storybookSpinner.message("Generating Storybook configuration");
+		await storybookGenerator.generate(projectDir, {
+			packageManager,
+			framework,
+			logger: (msg) => storybookSpinner.message(msg),
+			verbose: flags.verbose
+		});
+		storybookSpinner.stop("Generated Storybook configuration");
+		const tsconfigSpinner = spinner();
+		tsconfigSpinner.start();
+		tsconfigSpinner.message("Generating TypeScript configuration");
+		await TsconfigGenerator.generate(projectDir, { framework });
+		tsconfigSpinner.stop("Generated TypeScript configuration");
+		if (tailwind) {
+			const tailwindSpinner = spinner();
+			tailwindSpinner.start();
+			tailwindSpinner.message("Generating Tailwind CSS configuration");
+			await new TailwindGenerator().generate(projectDir, { framework });
+			tailwindSpinner.stop("Generated Tailwind CSS configuration");
+		} else await storybookGenerator.appendStylesToPreview(projectDir);
+		const originalCwd = process.cwd();
+		try {
+			process.chdir(projectDir);
+			await new Generate([
+				"--name",
+				"Starter Block",
+				"--no-verbose"
+			], this.config).run();
+		} finally {
+			process.chdir(originalCwd);
+		}
+		outro(`Run \`cd ${packageName}\` to start developing your project.`);
+		process.exit(0);
+	}
+	async getProjectConfig(quickstart) {
+		if (quickstart) return {
+			packageName: "juo-theme",
+			packageManager: "npm",
+			framework: "react",
+			tailwind: true
+		};
+		const packageName = await text({
+			message: "What is the name of the package?",
+			placeholder: "juo-theme",
+			initialValue: "juo-theme",
+			validate(value) {
+				if (value.length === 0) return `Value is required!`;
+				if (!/^[a-z0-9-]+$/.test(value)) return `Invalid package name`;
+			}
+		});
+		if (isCancel(packageName)) process.exit(0);
+		const packageManager = await select({
+			message: "What package manager to use?",
+			options: [
+				{
+					value: "npm",
+					label: "npm"
+				},
+				{
+					value: "pnpm",
+					label: "pnpm"
+				},
+				{
+					value: "yarn",
+					label: "yarn"
+				}
+			],
+			initialValue: "npm"
+		});
+		if (isCancel(packageManager)) process.exit(0);
+		const framework = await select({
+			message: "What framework to use?",
+			options: [{
+				value: "react",
+				label: "React"
+			}, {
+				value: "preact",
+				label: "Preact"
+			}],
+			initialValue: "react"
+		});
+		if (isCancel(framework)) process.exit(0);
+		const tailwind = await select({
+			message: "Do you want to use Tailwind CSS?",
+			options: [{
+				value: true,
+				label: "Yes"
+			}, {
+				value: false,
+				label: "No"
+			}],
+			initialValue: true
+		});
+		if (isCancel(tailwind)) process.exit(0);
+		return {
+			packageName,
+			packageManager,
+			framework,
+			tailwind
+		};
+	}
+};
+
+//#endregion
+export { Create as default };

package/dist/commands/generate.d.ts

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

package/dist/commands/generate.js

@@ -0,0 +1,3 @@
+import { t as Generate } from "../generate-D7J6nPBd.js";
+
+export { Generate as default };

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

@@ -1,14 +1,42 @@
-import { BaseCommand } from '../../base-command.js';
-export default class Publish extends BaseCommand<typeof Publish> {
-    static args: {};
-    static description: string;
-    static examples: string[];
-    static flags: {
-        theme: import("@oclif/core/interfaces").OptionFlag<string, import("@oclif/core/interfaces").CustomOptions>;
-    };
-    getAllFiles(dirPath: string, basePath: string): string[];
-    run(): Promise<void>;
-    private getAwsConnectionInfo;
-    private uploadFile;
-    private uploadFiles;
+import { Command, Interfaces } from "@oclif/core";
+import * as _oclif_core_interfaces0 from "@oclif/core/interfaces";
+
+//#region src/base-command.d.ts
+interface OrionConfig {
+  JUO_API_KEY: string;
+  JUO_API_URL: string;
 }
+type Flags$1<T extends typeof Command> = Interfaces.InferredFlags<(typeof BaseCommand)['baseFlags'] & T['flags']>;
+type Args<T extends typeof Command> = Interfaces.InferredArgs<T['args']>;
+declare abstract class BaseCommand<T extends typeof Command> extends Command {
+  static baseFlags: {
+    reconfigure: Interfaces.BooleanFlag<boolean>;
+  };
+  protected args: Args<T>;
+  protected flags: Flags$1<T>;
+  protected get configFileName(): string;
+  protected get configFilePath(): string;
+  protected configExists(): boolean;
+  protected ensureConfig(reconfigure?: boolean): Promise<OrionConfig>;
+  init(): Promise<void>;
+  protected loadConfig(): Partial<OrionConfig>;
+  protected saveConfig(config: Partial<OrionConfig>): void;
+  protected validateConfig(config: Partial<OrionConfig>): config is OrionConfig;
+}
+//#endregion
+//#region src/commands/publish/index.d.ts
+declare class Publish extends BaseCommand<typeof Publish> {
+  static args: {};
+  static description: string;
+  static examples: string[];
+  static flags: {
+    theme: _oclif_core_interfaces0.OptionFlag<string, _oclif_core_interfaces0.CustomOptions>;
+  };
+  getAllFiles(dirPath: string, basePath: string): string[];
+  run(): Promise<void>;
+  private getAwsConnectionInfo;
+  private uploadFile;
+  private uploadFiles;
+}
+//#endregion
+export { Publish as default };