WRNexusJS/scripts/generate-ui-complete-catalog.mjs

import { existsSync, readFileSync, writeFileSync } from "node:fs";
import { join } from "node:path";

const root = join(import.meta.dirname, "..", "packages", "ui");
const componentsDir = join(root, "components");
const catalog = JSON.parse(readFileSync(join(root, "component-catalog.json"), "utf8"));

function add(name, source) {
  const file = join(componentsDir, `${name}.wrn`);
  const generated = existsSync(file) && readFileSync(file, "utf8").includes("props { ");
  if (!existsSync(file) || generated) writeFileSync(file, `${source.trim()}\n`, "utf8");
}

function action(name) {
  return `component ${name} {
  props {
    label = "Action"
    href = ""
    type = "button"
    variant = "primary"
    disabled = false
    class = ""
  }
  view { <span class="wire-catalog-action {class}">{#if href}<a href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a>{:else}<button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button>{/if}</span> }
}`;
}

function form(name) {
  if (name.endsWith("Form")) {
    return `component ${name} {
  props {
    title = ""
    description = ""
    action = ""
    method = "post"
    submitLabel = "Submit"
    loading = false
    disabled = false
    class = ""
  }
  view { <form action="{action}" method="{method}" class="wire-form wire-catalog-form {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><slot /><footer class="wire-dialog__actions"><button type="submit" disabled="{disabled || loading}" class="wire-btn wire-btn--primary">{loading ? 'Submitting…' : submitLabel}</button></footer></form> }
}`;
  }
  return `component ${name} {
  props {
    label = "${name.replace(/(Input|Field|Selector|Picker|Toggle|Group|Editor)$/, "")}" 
    name = ""
    value = ""
    placeholder = ""
    type = "text"
    required = false
    disabled = false
    readonly = false
    help = ""
    error = ""
    class = ""
  }
  view { <label class="wire-field wire-catalog-field {class}"><span class="wire-label">{label}<span data-show="required" class="wire-required"> *</span></span><input name="{name}" value="{value}" placeholder="{placeholder}" type="{type}" required="{required}" disabled="{disabled}" readonly="{readonly}" aria-invalid="{error ? 'true' : 'false'}" class="wire-input" /><span data-show="help && !error" class="wire-field-message wire-field-message--help">{help}</span><span data-show="error" role="alert" class="wire-field-message wire-field-message--error">{error}</span><slot /></label> }
}`;
}

function overlay(name) {
  return `component ${name} {
  props {
    title = ""
    description = ""
    open = false
    closeLabel = "Close"
    class = ""
  }
  view { <div data-show="open" class="wire-overlay wire-catalog-overlay {class}"><section role="dialog" aria-modal="true" aria-label="{title}" class="wire-dialog"><header><h2 data-show="title" class="wire-dialog__title">{title}</h2><p data-show="description" class="wire-dialog__description">{description}</p></header><slot /><button type="button" class="wire-btn wire-btn--ghost">{closeLabel}</button></section></div> }
}`;
}

function collection(name) {
  return `component ${name} {
  props {
    title = ""
    description = ""
    empty = false
    emptyText = "No items available."
    class = ""
  }
  view { <section class="wire-catalog-collection {class}"><header data-show="title || description"><h2 data-show="title">{title}</h2><p data-show="description">{description}</p></header><div data-show="!empty" role="list" class="wire-catalog-collection__items"><slot /></div><p data-show="empty" role="status" class="wire-muted">{emptyText}</p></section> }
}`;
}

function visualization(name) {
  return `component ${name} {
  props {
    title = ""
    value = ""
    description = ""
    summary = ""
    loading = false
    class = ""
  }
  view { <figure aria-label="{summary || title}" class="wire-card wire-catalog-visualization {class}"><figcaption><strong data-show="title">{title}</strong><span data-show="value" class="wire-metric__value">{value}</span><span data-show="description" class="wire-muted">{description}</span></figcaption><div data-show="loading" class="wire-skeleton wire-catalog-visualization__skeleton"></div><div data-show="!loading" class="wire-catalog-visualization__content"><slot /></div><p data-show="summary" class="wire-visually-hidden">{summary}</p></figure> }
}`;
}

function feedback(name) {
  return `component ${name} {
  props {
    label = "${name.replace(/(Badge|Indicator|Counter|State|Alert|Banner|Notice|Skeleton)$/, "")}" 
    title = ""
    description = ""
    value = ""
    variant = "default"
    class = ""
  }
  view { <aside role="status" class="wire-alert wire-alert--{variant} wire-catalog-feedback {class}"><strong data-show="title || label">{title || label}</strong><span data-show="value" class="wire-badge wire-badge--{variant}">{value}</span><p data-show="description">{description}</p><slot /></aside> }
}`;
}

function layout(name) {
  return `component ${name} {
  props {
    eyebrow = ""
    title = ""
    description = ""
    align = "start"
    class = ""
  }
  view { <section class="wire-catalog-section wire-text--{align} {class}"><header data-show="eyebrow || title || description"><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h2 data-show="title">{title}</h2><p data-show="description" class="wire-muted">{description}</p></header><slot /></section> }
}`;
}

function content(name) {
  return `component ${name} {
  props {
    eyebrow = ""
    title = ""
    description = ""
    href = ""
    actionLabel = "Learn more"
    image = ""
    alt = ""
    class = ""
  }
  view { <article class="wire-card wire-catalog-card {class}">{#if image}<img src="{image}" alt="{alt}" class="wire-catalog-card__image" />{/if}{#if eyebrow}<span class="wire-eyebrow">{eyebrow}</span>{/if}{#if title}<h3>{title}</h3>{/if}{#if description}<p>{description}</p>{/if}<slot />{#if href}<a href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a>{/if}</article> }
}`;
}

const factories = {
  actions: action,
  forms: form,
  overlays: overlay,
  data: collection,
  visualization,
  feedback,
  layout,
  content,
};
for (const entry of catalog.components) {
  add(entry.name, factories[entry.category](entry.name));
}