chore(scripts): remove destructive UI catalog generator
This commit is contained in:
@@ -1,157 +0,0 @@
|
|||||||
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));
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user