@getvitops/cli 0.1.0

package/README.md

@@ -0,0 +1,80 @@
+# @getvitops/cli
+
+CLI for the Vitops design-system generator. Turn a `design-system.json` into Bricks, CSS, or
+Tailwind v4 output.
+
+```sh
+# scaffold a starter config (stamps a $schema for editor autocomplete)
+npx vitops init
+
+# validate it against the schema
+npx vitops validate design-system.json
+
+# generate output (comma-separate formats)
+npx vitops generate --input design-system.json --format tailwind --out src/styles
+npx vitops generate --format bricks,css --out dist
+```
+
+## Commands
+
+| command                                            | does                                          |
+| -------------------------------------------------- | --------------------------------------------- |
+| `vitops init [--out design-system.json] [--force]` | write a starter config with `$schema`         |
+| `vitops validate <file>`                           | schema-check (non-zero exit on error)         |
+| `vitops generate -i <file> -f <formats> -o <dir>`  | generate `bricks` / `css` / `tailwind` output |
+
+## Using the output
+
+**Tailwind / Astro (EmDash).** Generate into your styles dir and import it (Tailwind v4):
+
+```sh
+vitops generate --input design-system.json --format tailwind --out src/styles
+```
+
+```css
+@import './styles/tailwind.css';
+```
+
+(Or use [`@getvitops/vite`](https://www.npmjs.com/package/@getvitops/vite) to generate on
+build/dev automatically.)
+
+**WordPress / Bricks.** `--format bricks` writes a full, deployable theme payload: the CSS
+bundle, the Bricks color/variable import JSON, the JS bundles, the custom `bricks/` elements,
+and the `docs/` reference. Generate it into your Bricks **child theme's `dist/` directory**:
+
+```sh
+vitops generate --input design-system.json --format bricks --out wp-content/themes/bricks-child/dist
+```
+
+Then wire it up **once** — add this to the child theme's `functions.php` so the deployed loader
+registers the elements and enqueues the CSS/JS:
+
+```php
+// Load the Vitops design system (elements + enqueued assets), if deployed.
+$vitops = get_stylesheet_directory() . '/dist/bricks/load.php';
+if ( file_exists( $vitops ) ) {
+    require_once $vitops;
+}
+```
+
+`dist/bricks/load.php` registers every element under a "Vitops" builder category, enqueues
+`styles.min.css` + the JS bundles (versioned by mtime for cache-busting), and serves the
+`docs/` bundle at `<theme>/dist/docs/`. Import `dist/bricks-colors-*.json` and
+`dist/bricks-variables.json` into Bricks' Color + Variables managers.
+
+### Shipping the output
+
+The CLI only writes files — how they reach WordPress is up to you:
+
+- **Local dev (WPLocal etc.):** point `--out` straight at the site's theme `dist/`, or symlink
+  that `dist/` to your build output once so every regenerate is picked up automatically.
+- **Remote:** rsync the generated directory to the theme over SSH —
+
+  ```sh
+  rsync -avz --delete dist/ user@host:wp-content/themes/bricks-child/dist/
+  ```
+
+- **CI:** run `vitops generate --format bricks` in your pipeline and deploy the artifact the
+  same way you deploy the rest of the theme.
+
+Powered by [`@getvitops/generator`](https://www.npmjs.com/package/@getvitops/generator).

package/dist/cli.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/cli.mjs

@@ -0,0 +1,189 @@
+#!/usr/bin/env node
+import { parseArgs } from "node:util";
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { SCHEMA_URL, defaultConfig, generate, validate } from "@getvitops/generator";
+import { generateFavicons } from "@getvitops/utils";
+
+//#region src/cli.ts
+/**
+* `vitops` — CLI for the Vitops design-system generator.
+*
+*   vitops generate  --input <json> --format <bricks|css|tailwind[,…]> --out <dir>
+*   vitops init      [--out design-system.json] [--force]
+*   vitops validate  <design-system.json>
+*   vitops favicon   --input <svg|png> --out <dir> [--low-res <svg|png>]
+*
+* Thin wrapper over @getvitops/generator (generation) and @getvitops/utils (favicons).
+* Every client brings their own consumer-editable design-system.json.
+*/
+const FORMATS = new Set([
+	"bricks",
+	"css",
+	"tailwind"
+]);
+const HELP = `vitops — generate design-system outputs from a design-system.json
+
+Usage:
+  vitops generate [options]     Generate platform output from a config
+  vitops init [options]         Scaffold a starter design-system.json
+  vitops validate <file>        Validate a config against the schema
+  vitops favicon [options]      Generate a favicon set from a source image
+
+Generate options:
+  -i, --input <path>    Config file (default: ./design-system.json)
+  -f, --format <list>   bricks | css | tailwind (comma-separated; default: bricks)
+  -o, --out <dir>       Output directory (default: ./dist)
+
+Init options:
+  -o, --out <path>      Where to write (default: ./design-system.json)
+      --force           Overwrite an existing file
+
+Favicon options:
+  -i, --input <path>    Source SVG or PNG (required)
+  -o, --out <dir>       Output directory (default: ./public)
+      --low-res <path>  Optional simplified source for the 16px icon
+
+Common:
+  -h, --help            Show this help
+`;
+function fail(msg) {
+	console.error(`✖ ${msg}`);
+	process.exit(1);
+}
+async function cmdGenerate(argv) {
+	const { values } = parseArgs({
+		args: argv,
+		options: {
+			input: {
+				type: "string",
+				short: "i",
+				default: "design-system.json"
+			},
+			format: {
+				type: "string",
+				short: "f",
+				default: "bricks"
+			},
+			out: {
+				type: "string",
+				short: "o",
+				default: "dist"
+			}
+		},
+		allowPositionals: false
+	});
+	const input = resolve(values.input);
+	if (!existsSync(input)) fail(`config not found: ${input}`);
+	const formats = values.format.split(",").map((f) => f.trim()).filter(Boolean);
+	for (const f of formats) if (!FORMATS.has(f)) fail(`unknown format "${f}" (expected: bricks | css | tailwind)`);
+	for (const format of formats) try {
+		const res = await generate({
+			input,
+			format,
+			outDir: values.out
+		});
+		console.log(`✓ ${format} → ${res.outDir} (${res.written.length} paths)`);
+	} catch (err) {
+		fail(err.message);
+	}
+}
+function cmdInit(argv) {
+	const { values } = parseArgs({
+		args: argv,
+		options: {
+			out: {
+				type: "string",
+				short: "o",
+				default: "design-system.json"
+			},
+			force: {
+				type: "boolean",
+				default: false
+			}
+		},
+		allowPositionals: false
+	});
+	const out = resolve(values.out);
+	if (existsSync(out) && !values.force) fail(`${out} already exists (use --force to overwrite)`);
+	writeFileSync(out, JSON.stringify(defaultConfig(), null, 2) + "\n");
+	console.log(`✓ wrote ${out}`);
+	console.log(`  Edit it, then: vitops generate --input ${values.out} --format tailwind --out src/styles`);
+	console.log(`  Editors read the "$schema" (${SCHEMA_URL}) for autocomplete + validation.`);
+}
+function cmdValidate(argv) {
+	const { values, positionals } = parseArgs({
+		args: argv,
+		options: { input: {
+			type: "string",
+			short: "i"
+		} },
+		allowPositionals: true
+	});
+	const path = resolve(positionals[0] ?? values.input ?? "design-system.json");
+	if (!existsSync(path)) fail(`config not found: ${path}`);
+	let raw;
+	try {
+		raw = JSON.parse(readFileSync(path, "utf8"));
+	} catch (err) {
+		fail(`could not parse JSON: ${err.message}`);
+	}
+	const result = validate(raw);
+	if (result.ok) {
+		console.log(`✓ ${path} is valid`);
+		return;
+	}
+	console.error(`✖ ${path} is invalid:`);
+	for (const e of result.errors) console.error(`  • ${e.path.join(".") || "(root)"}: ${e.message}`);
+	process.exit(1);
+}
+async function cmdFavicon(argv) {
+	const { values } = parseArgs({
+		args: argv,
+		options: {
+			input: {
+				type: "string",
+				short: "i"
+			},
+			out: {
+				type: "string",
+				short: "o",
+				default: "public"
+			},
+			"low-res": { type: "string" }
+		},
+		allowPositionals: false
+	});
+	if (!values.input) fail("favicon: --input <svg|png> is required");
+	const source = resolve(values.input);
+	if (!existsSync(source)) fail(`source not found: ${source}`);
+	try {
+		const written = await generateFavicons({
+			source,
+			outputDir: values.out,
+			...values["low-res"] ? { lowResSource: resolve(values["low-res"]) } : {}
+		});
+		console.log(`✓ favicons → ${values.out} (${written.length} files)`);
+	} catch (err) {
+		fail(err.message);
+	}
+}
+async function main() {
+	const [command, ...rest] = process.argv.slice(2);
+	if (!command || command === "-h" || command === "--help" || command === "help") {
+		console.log(HELP);
+		return;
+	}
+	switch (command) {
+		case "generate": return cmdGenerate(rest);
+		case "init": return cmdInit(rest);
+		case "validate": return cmdValidate(rest);
+		case "favicon": return cmdFavicon(rest);
+		default: fail(`unknown command "${command}" (expected: generate | init | validate). Try: vitops --help`);
+	}
+}
+main().catch((err) => fail(err.message));
+
+//#endregion
+export {  };
+//# sourceMappingURL=cli.mjs.map

package/dist/cli.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli.mjs","names":[],"sources":["../src/cli.ts"],"sourcesContent":["#!/usr/bin/env node\n/**\n * `vitops` — CLI for the Vitops design-system generator.\n *\n *   vitops generate  --input <json> --format <bricks|css|tailwind[,…]> --out <dir>\n *   vitops init      [--out design-system.json] [--force]\n *   vitops validate  <design-system.json>\n *   vitops favicon   --input <svg|png> --out <dir> [--low-res <svg|png>]\n *\n * Thin wrapper over @getvitops/generator (generation) and @getvitops/utils (favicons).\n * Every client brings their own consumer-editable design-system.json.\n */\nimport { parseArgs } from 'node:util';\nimport { writeFileSync, existsSync, readFileSync } from 'node:fs';\nimport { resolve } from 'node:path';\nimport { generate, validate, defaultConfig, SCHEMA_URL, type Format } from '@getvitops/generator';\nimport { generateFavicons } from '@getvitops/utils';\n\nconst FORMATS = new Set<Format>(['bricks', 'css', 'tailwind']);\n\nconst HELP = `vitops — generate design-system outputs from a design-system.json\n\nUsage:\n  vitops generate [options]     Generate platform output from a config\n  vitops init [options]         Scaffold a starter design-system.json\n  vitops validate <file>        Validate a config against the schema\n  vitops favicon [options]      Generate a favicon set from a source image\n\nGenerate options:\n  -i, --input <path>    Config file (default: ./design-system.json)\n  -f, --format <list>   bricks | css | tailwind (comma-separated; default: bricks)\n  -o, --out <dir>       Output directory (default: ./dist)\n\nInit options:\n  -o, --out <path>      Where to write (default: ./design-system.json)\n      --force           Overwrite an existing file\n\nFavicon options:\n  -i, --input <path>    Source SVG or PNG (required)\n  -o, --out <dir>       Output directory (default: ./public)\n      --low-res <path>  Optional simplified source for the 16px icon\n\nCommon:\n  -h, --help            Show this help\n`;\n\nfunction fail(msg: string): never {\n  console.error(`✖ ${msg}`);\n  process.exit(1);\n}\n\nasync function cmdGenerate(argv: string[]) {\n  const { values } = parseArgs({\n    args: argv,\n    options: {\n      input: { type: 'string', short: 'i', default: 'design-system.json' },\n      format: { type: 'string', short: 'f', default: 'bricks' },\n      out: { type: 'string', short: 'o', default: 'dist' },\n    },\n    allowPositionals: false,\n  });\n  const input = resolve(values.input as string);\n  if (!existsSync(input)) fail(`config not found: ${input}`);\n  const formats = (values.format as string)\n    .split(',')\n    .map((f) => f.trim())\n    .filter(Boolean);\n  for (const f of formats)\n    if (!FORMATS.has(f as Format))\n      fail(`unknown format \"${f}\" (expected: bricks | css | tailwind)`);\n\n  for (const format of formats as Format[]) {\n    try {\n      const res = await generate({ input, format, outDir: values.out as string });\n      console.log(`✓ ${format} → ${res.outDir} (${res.written.length} paths)`);\n    } catch (err) {\n      fail((err as Error).message);\n    }\n  }\n}\n\nfunction cmdInit(argv: string[]) {\n  const { values } = parseArgs({\n    args: argv,\n    options: {\n      out: { type: 'string', short: 'o', default: 'design-system.json' },\n      force: { type: 'boolean', default: false },\n    },\n    allowPositionals: false,\n  });\n  const out = resolve(values.out as string);\n  if (existsSync(out) && !values.force) fail(`${out} already exists (use --force to overwrite)`);\n  writeFileSync(out, JSON.stringify(defaultConfig(), null, 2) + '\\n');\n  console.log(`✓ wrote ${out}`);\n  console.log(\n    `  Edit it, then: vitops generate --input ${values.out} --format tailwind --out src/styles`,\n  );\n  console.log(`  Editors read the \"$schema\" (${SCHEMA_URL}) for autocomplete + validation.`);\n}\n\nfunction cmdValidate(argv: string[]) {\n  const { values, positionals } = parseArgs({\n    args: argv,\n    options: { input: { type: 'string', short: 'i' } },\n    allowPositionals: true,\n  });\n  const path = resolve((positionals[0] ?? values.input ?? 'design-system.json') as string);\n  if (!existsSync(path)) fail(`config not found: ${path}`);\n  let raw: unknown;\n  try {\n    raw = JSON.parse(readFileSync(path, 'utf8'));\n  } catch (err) {\n    fail(`could not parse JSON: ${(err as Error).message}`);\n  }\n  const result = validate(raw);\n  if (result.ok) {\n    console.log(`✓ ${path} is valid`);\n    return;\n  }\n  console.error(`✖ ${path} is invalid:`);\n  for (const e of result.errors) console.error(`  • ${e.path.join('.') || '(root)'}: ${e.message}`);\n  process.exit(1);\n}\n\nasync function cmdFavicon(argv: string[]) {\n  const { values } = parseArgs({\n    args: argv,\n    options: {\n      input: { type: 'string', short: 'i' },\n      out: { type: 'string', short: 'o', default: 'public' },\n      'low-res': { type: 'string' },\n    },\n    allowPositionals: false,\n  });\n  if (!values.input) fail('favicon: --input <svg|png> is required');\n  const source = resolve(values.input as string);\n  if (!existsSync(source)) fail(`source not found: ${source}`);\n  try {\n    const written = await generateFavicons({\n      source,\n      outputDir: values.out as string,\n      ...(values['low-res'] ? { lowResSource: resolve(values['low-res'] as string) } : {}),\n    });\n    console.log(`✓ favicons → ${values.out} (${written.length} files)`);\n  } catch (err) {\n    fail((err as Error).message);\n  }\n}\n\nasync function main() {\n  const [command, ...rest] = process.argv.slice(2);\n  if (!command || command === '-h' || command === '--help' || command === 'help') {\n    console.log(HELP);\n    return;\n  }\n  switch (command) {\n    case 'generate':\n      return cmdGenerate(rest);\n    case 'init':\n      return cmdInit(rest);\n    case 'validate':\n      return cmdValidate(rest);\n    case 'favicon':\n      return cmdFavicon(rest);\n    default:\n      fail(\n        `unknown command \"${command}\" (expected: generate | init | validate). Try: vitops --help`,\n      );\n  }\n}\n\nmain().catch((err) => fail((err as Error).message));\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@getvitops/cli",
+  "version": "0.1.0",
+  "description": "CLI for the Vitops design-system generator: generate, init, and validate a design-system.json.",
+  "license": "MIT",
+  "bin": {
+    "vitops": "./dist/cli.mjs"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/cli.d.mts",
+      "import": "./dist/cli.mjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@getvitops/generator": "0.1.0",
+    "@getvitops/utils": "0.1.0"
+  }
+}