uix-ui 0.2.0 → 0.3.0

package/README.md

@@ -27,4 +27,14 @@ 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,16 +5,21 @@ 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
+  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.`;
 
@@ -27,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);
@@ -56,6 +61,7 @@ function source(cfg, name) {
 }
 
 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) {
@@ -63,7 +69,7 @@ async function load(src) {
     if (!existsSync(src.url)) throw missing(src);
     return JSON.parse(readFileSync(src.url, 'utf8'));
   }
-  const res = await fetch(src.url, { headers: src.headers });
+  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);
@@ -103,7 +109,7 @@ async function resolveAll(cfg, list) {
     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}/${d}`);
+    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);
@@ -199,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');
@@ -216,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`.');
@@ -232,7 +269,7 @@ 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));
     say(`Components (${comps.length}): ${comps.join(', ')}\n\nThemes (${themes.length}): ${themes.join(', ')}`);

package/package.json

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