uix-ui 0.1.1 → 0.3.0

package/README.md

@@ -19,4 +19,22 @@ import { Button } from "@/components/ui/button";
 Dark mode: `<html data-theme="dark">`. Options: `--overwrite` (add), `--no-install` (print the install command
 instead of running it), `--registry <url|folder>` (init).
 
+UIX Pro (marketing blocks, nine visual styles, 210 more themes): set your key, then add them by name.
+
+```bash
+export UIX_LICENSE=<your key>
+npx uix-ui@latest add hero pricing-card skins
+npx uix-ui@latest theme acid-prompt
+```
+
+Your own design system, made at [uixdesign.pagestro.com/generate](https://uixdesign.pagestro.com/generate) and saved to
+your account: pull its theme, tokens (DTCG, in `src/styles/tokens`) and any components, then sync when it changes.
+The API key is on your account page. `uix.json` remembers the system and the version you have.
+
+```bash
+export UIX_API_KEY=uixm_…
+npx uix-ui@latest pull <id> button card    # the id is in your Studio link: /s/<id>
+npx uix-ui@latest sync                     # pulls again only if you saved a newer version
+```
+
 Docs, live components and all 42 themes: https://uixdesign.pagestro.com/ui · Source: https://github.com/mdrakibshekh/uix-ui · MIT

package/bin/uix-ui.mjs

@@ -5,17 +5,23 @@ import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { dirname, join, relative, resolve, sep } from 'node:path';
 import { spawnSync } from 'node:child_process';
 
-const DEFAULT_REGISTRY = 'https://uixdesign.pagestro.com/ui/r';
+const SITE = 'https://uixdesign.pagestro.com';
+const DEFAULT_REGISTRY = `${SITE}/ui/r`;
 const HELP = `uix-ui: UIX components and themes for React + Tailwind v4
 
   npx uix-ui init [--preset <id>] [--registry <url|folder>]   set up the theme, utils and components.json
   npx uix-ui add <component...>                               copy components into your app
   npx uix-ui theme <preset>                                   switch to another UIX preset (uix = default)
   npx uix-ui list                                             components and themes in the registry
+  npx uix-ui pull <id> [component...]                         your saved design system (uixdesign.pagestro.com/s/<id>):
+                                                              its theme, tokens and components; remembered in uix.json
+  npx uix-ui sync                                             pull again if the system changed since the last pull
 
   --overwrite     replace files that already exist (add)
   --no-install    don't run the package manager, just print the command
-  Pro items: set UIX_LICENSE=<your key> and add @uix-pro/<name>.`;
+  pull, sync: set UIX_API_KEY (or --key) to the API key from your account page (uixdesign.pagestro.com/account).
+  UIX Pro: set UIX_LICENSE=<your key>, then add Pro items by name (hero, pricing-card, skins…) or switch to a
+  Pro theme (npx uix-ui theme acid-prompt). \`list\` shows them all.`;
 
 const cwd = process.cwd();
 const argv = process.argv.slice(2);
@@ -26,7 +32,7 @@ const flag = (n, bool = false) => {
   argv.splice(i, takes ? 2 : 1);
   return takes ? v : true;
 };
-const opts = { preset: flag('preset'), registry: flag('registry'), overwrite: flag('overwrite', true), noInstall: flag('no-install', true) };
+const opts = { preset: flag('preset'), registry: flag('registry'), overwrite: flag('overwrite', true), noInstall: flag('no-install', true), key: flag('key'), site: flag('site') };
 const [cmd, ...names] = argv;
 
 const say = (s) => console.log(s);
@@ -54,28 +60,57 @@ function source(cfg, name) {
   return { ns, item, url: url.replace('{name}', item), headers: Object.fromEntries(Object.entries(headers).map(([k, v]) => [k, env(v)])) };
 }
 
+const PRICING = 'https://uixdesign.pagestro.com/pricing';
+let pin = '';   // pull: `?v=<version>`, so the site answers with that version, not a copy cached a few seconds ago
+const missing = (src) => Object.assign(new Error(`"${src.item}" is not in the registry (${src.url}).`), { missing: true });
+
 async function load(src) {
   if (!/^https?:/.test(src.url)) {
-    if (!existsSync(src.url)) die(`"${src.item}" is not in the registry (${src.url}).`);
+    if (!existsSync(src.url)) throw missing(src);
     return JSON.parse(readFileSync(src.url, 'utf8'));
   }
-  const res = await fetch(src.url, { headers: src.headers });
-  if (res.status === 401 || res.status === 403) die(`"${src.item}" is a UIX Pro item. Set UIX_LICENSE to your key (https://uixdesign.pagestro.com/pricing).`);
+  const res = await fetch(src.url + pin, { headers: src.headers });
+  if (res.status === 401) die(process.env.UIX_LICENSE ? `UIX_LICENSE is set, but that key wasn't found. Check it in your UIX account (${PRICING}).` : `${src.item.startsWith('theme-') ? `The "${src.item.slice(6)}" theme` : `"${src.item}"`} is part of UIX Pro. Set UIX_LICENSE to your key (${PRICING}).`);
+  if (res.status === 403) die(`"${src.item}" needs an active UIX Pro licence; this key's plan has ended (${PRICING}).`);
+  if (res.status === 404) throw missing(src);
   if (!res.ok) die(`"${src.item}" could not be loaded (${res.status} from ${src.url}).`);
   return res.json();
 }
 
+/** The Pro index (names only, no key needed), or null when there is no Pro registry. */
+let proIndex;
+async function loadProIndex(cfg) {
+  if (proIndex !== undefined) return proIndex;
+  if (!cfg.registries?.['@uix-pro']) return (proIndex = null);
+  const ps = source(cfg, '@uix-pro/x');
+  return (proIndex = await load({ ...ps, item: 'registry.json', url: ps.url.replace(/\/x\.json$/, '/registry.json'), headers: {} }).catch(() => null));
+}
+
+/** A bare name that the free registry doesn't have is looked up in Pro (`hero` → `@uix-pro/hero`). */
+async function loadAny(cfg, src) {
+  try { return { src, it: await load(src) }; } catch (e) {
+    if (!e.missing || src.ns !== '@uix') throw e;
+    const index = await loadProIndex(cfg);
+    if (!index?.items.some(i => i.name === src.item)) throw Object.assign(new Error(`"${src.item.replace(/^theme-/, '')}" is not a uix-ui component or theme. See the list: npx uix-ui list`), { missing: true });
+    const pro = source(cfg, `@uix-pro/${src.item}`);
+    return { src: pro, it: await load(pro) };
+  }
+}
+
 /** Loads the items and everything they depend on, dependencies first. */
 async function resolveAll(cfg, list) {
   const seen = new Map();
   const visit = async (name) => {
-    const src = source(cfg, name);
+    let src = source(cfg, name);
     const key = `${src.ns}/${src.item}`;
     if (seen.has(key)) return;
     seen.set(key, null);
-    const it = await load(src);
-    for (const d of it.registryDependencies ?? []) await visit(d.startsWith('@') ? d : `${src.ns}/${d}`);
-    seen.delete(key); seen.set(key, it);
+    const bare = !name.startsWith('@');
+    const got = bare ? await loadAny(cfg, src) : { src, it: await load(src) };
+    const it = got.it;
+    if (got.src !== src) { seen.delete(key); src = got.src; seen.set(`${src.ns}/${src.item}`, null); }
+    for (const d of it.registryDependencies ?? []) await visit(d.startsWith('@') ? d : `${src.ns}/${/^https?:/.test(d) ? d.split('/').pop().replace(/\.json$/, '') : d}`);
+    seen.delete(`${src.ns}/${src.item}`); seen.set(`${src.ns}/${src.item}`, it);
   };
   for (const n of list) await visit(n);
   return [...seen.values()];
@@ -102,6 +137,20 @@ function place(cfg, items, overwrite) {
     write(file, code);
     say(`  wrote   ${shown}`);
   }
+  for (const it of items) for (const f of it.files) if (/\.css$/.test(f.path) && !/(^|\/)uix\.css$/.test(f.path)) importCss(cfg, target(cfg, f));
+}
+
+/** Adds `@import "<file>";` to the app's main CSS, after the theme import (visual styles, backdrops). */
+function importCss(cfg, file) {
+  const cssFile = join(cwd, cfg.tailwind?.css ?? 'src/index.css');
+  if (!existsSync(cssFile)) return;
+  let src = readFileSync(cssFile, 'utf8');
+  const imp = `@import "${rel(cssFile, file)}";`;
+  if (src.includes(imp)) return;
+  const last = [...src.matchAll(/@import [^;\n]+;?/g)].pop();   // after the theme and any earlier style sheets
+  src = last ? src.slice(0, last.index + last[0].length) + `\n${imp}` + src.slice(last.index + last[0].length) : `${imp}\n${src}`;
+  write(cssFile, src);
+  say(`  updated ${relative(cwd, cssFile)}`);
 }
 
 function install(items) {
@@ -156,7 +205,8 @@ async function init() {
   cfg.registries = {
     ...cfg.registries,
     '@uix': `${registry}/{name}.json`,
-    '@uix-pro': { url: `${registry.replace(/\/r$/, '/r/pro')}/{name}.json`, headers: { Authorization: 'Bearer ${UIX_LICENSE}' } },
+    // a saved system's registry (/r/<id>) already has the owner's Pro items
+    ...(/\/r$/.test(registry) && { '@uix-pro': { url: `${registry.replace(/\/r$/, '/r/pro')}/{name}.json`, headers: { Authorization: 'Bearer ${UIX_LICENSE}' } } }),
   };
   write(join(cwd, 'components.json'), JSON.stringify(cfg, null, 2) + '\n');
   say('  wrote   components.json');
@@ -173,12 +223,42 @@ async function init() {
   const items = await resolveAll(cfg, ['utils']);
   place(cfg, items, false);
   install(items);
-  say(`\nDone. Next: npx uix-ui add button card input\nDark mode: <html data-theme="dark">. Other presets: npx uix-ui theme <preset>.`);
+  return cfg;
+}
+
+/** Your saved system, through the account API (the key proves it's yours): { id, name, version, … }. */
+async function system(site, id) {
+  const key = opts.key ?? process.env.UIX_API_KEY;
+  if (!key) die(`set UIX_API_KEY (or --key) to the API key from ${site}/account.`);
+  const res = await fetch(`${site}/api/me/systems/${id}`, { headers: { Authorization: `Bearer ${key}` } }).catch(e => die(`could not reach ${site} (${e.cause?.code ?? e.message}).`));
+  if (res.status === 401) die(`that API key wasn't accepted. Make a new one at ${site}/account.`);
+  if (res.status === 404) die(`there's no design system "${id}" in your account (${site}/account#systems).`);
+  if (!res.ok) die(`could not load "${id}" (${res.status} from ${site}).`);
+  return (await res.json()).system;
+}
+
+/** pull: the system's theme, its DTCG tokens and any named components; sync: the same, only when the version moved. */
+async function pull(id, names) {
+  const saved = existsSync(join(cwd, 'uix.json')) ? readJson('uix.json') : {};
+  id ??= saved.system;
+  if (!id) die(cmd === 'sync' ? 'nothing to sync yet. Run `npx uix-ui pull <id>` first (the id is in your Studio link, /s/<id>).' : 'name the design system, e.g. `npx uix-ui pull k3x9d0a2bq` (the id is in your Studio link, /s/<id>).');
+  const site = (opts.site ?? saved.site ?? SITE).replace(/\/$/, '');
+  const sys = await system(site, id);
+  if (cmd === 'sync' && sys.version === saved.version && id === saved.system) return say(`Up to date: "${sys.name}", version ${sys.version}.`);
+  pin = `?v=${sys.version}`;
+  opts.registry = `${site}/r/${id}`;
+  const cfg = await init();
+  const tokens = await load({ item: 'tokens', url: `${site}/s/${id}.json`, headers: {} });
+  for (const [name, t] of Object.entries(tokens)) { write(join(srcRoot, 'styles', name), JSON.stringify(t, null, 2) + '\n'); say(`  wrote   ${relative(cwd, join(srcRoot, 'styles', name))}`); }
+  if (names.length) { const items = await resolveAll(cfg, names); place(cfg, items, !!opts.overwrite); install(items); }
+  write(join(cwd, 'uix.json'), JSON.stringify({ system: id, name: sys.name, version: sys.version, site: site === SITE ? undefined : site }, null, 2) + '\n');
+  say(`\n"${sys.name}", version ${sys.version}${saved.version && saved.system === id ? ` (was ${saved.version})` : ''}. Later changes: npx uix-ui sync`);
 }
 
 async function main() {
   if (!cmd || cmd === 'help' || cmd === '--help' || cmd === '-h') return say(HELP);
-  if (cmd === 'init') return init();
+  if (cmd === 'init') return init().then(() => say(`\nDone. Next: npx uix-ui add button card input\nDark mode: <html data-theme="dark">. Other presets: npx uix-ui theme <preset>.`));
+  if (cmd === 'pull' || cmd === 'sync') return pull(cmd === 'pull' ? names[0] : undefined, names.slice(1));
   const cfg = config();
   if (cmd === 'add') {
     if (!names.length) die('name at least one component, e.g. `npx uix-ui add button`.');
@@ -189,10 +269,15 @@ async function main() {
   if (cmd === 'theme') return applyTheme(cfg, names[0] ?? opts.preset);
   if (cmd === 'list') {
     const src = source(cfg, 'x');
-    const index = await load({ ...src, item: 'registry.json', url: src.url.replace(/\/r\/x\.json$/, '/registry.json') });
+    const index = await load({ ...src, item: 'registry.json', url: src.url.replace(/\/r\/x\.json$/, '/registry.json').replace(/\/x\.json$/, '/registry.json') });
     const comps = index.items.filter(i => i.type === 'registry:ui' && i.name !== 'icons').map(i => i.name);
     const themes = index.items.filter(i => i.name.startsWith('theme')).map(i => i.name === 'theme' ? 'uix' : i.name.slice(6));
-    return say(`Components (${comps.length}): ${comps.join(', ')}\n\nThemes (${themes.length}): ${themes.join(', ')}`);
+    say(`Components (${comps.length}): ${comps.join(', ')}\n\nThemes (${themes.length}): ${themes.join(', ')}`);
+    const pro = await loadProIndex(cfg);
+    if (!pro) return;
+    const blocks = pro.items.filter(i => !i.name.startsWith('theme-')).map(i => i.name);
+    const proThemes = pro.items.filter(i => i.name.startsWith('theme-')).map(i => i.name.slice(6));
+    return say(`\nUIX Pro, with UIX_LICENSE (${PRICING}):\n  Blocks and styles (${blocks.length}): ${blocks.join(', ')}\n  Themes (${proThemes.length}): ${proThemes.join(', ')}`);
   }
   die(`unknown command "${cmd}".\n\n${HELP}`);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uix-ui",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Add UIX components and themes to your React + Tailwind app: npx uix-ui init.",
   "license": "MIT",
   "type": "module",