release: complete UI component catalog 0.2.58
This commit is contained in:
@@ -0,0 +1,157 @@
|
||||
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}"><a data-show="href" href="{href}" class="wire-btn wire-btn--{variant}">{label}<slot /></a><button data-show="!href" type="{type}" disabled="{disabled}" class="wire-btn wire-btn--{variant}">{label}<slot /></button></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}"><img data-show="image" src="{image}" alt="{alt}" class="wire-catalog-card__image" /><span data-show="eyebrow" class="wire-eyebrow">{eyebrow}</span><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-btn wire-btn--ghost">{actionLabel}</a></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