166 lines
3.7 KiB
JavaScript
166 lines
3.7 KiB
JavaScript
import { existsSync, writeFileSync } from "node:fs";
|
|
import { join } from "node:path";
|
|
|
|
const root = join(import.meta.dirname, "..", "packages", "ui", "components");
|
|
|
|
const typography = {
|
|
DisplayHeading: "display",
|
|
PageHeading: "heading",
|
|
SectionHeading: "heading",
|
|
SubsectionHeading: "heading",
|
|
EyebrowText: "small",
|
|
BodyText: "body",
|
|
LeadText: "lead",
|
|
SmallText: "small",
|
|
MutedText: "small",
|
|
InlineCode: "small",
|
|
CodeText: "body",
|
|
QuoteText: "lead",
|
|
MetricText: "display",
|
|
PriceText: "display",
|
|
};
|
|
|
|
const layouts = {
|
|
NarrowContainer: "wire-container wire-container--narrow",
|
|
WideContainer: "wire-container wire-container--wide",
|
|
FullBleed: "wire-full-bleed",
|
|
Flex: "wire-flex",
|
|
AutoGrid: "wire-auto-grid",
|
|
SplitLayout: "wire-split-layout",
|
|
SidebarLayout: "wire-sidebar-layout",
|
|
StickyLayout: "wire-sticky-layout",
|
|
AspectRatio: "wire-aspect-ratio",
|
|
Panel: "wire-panel",
|
|
Surface: "wire-surface",
|
|
Well: "wire-well",
|
|
InsetPanel: "wire-inset-panel",
|
|
ScrollArea: "wire-scroll-area",
|
|
Sticky: "wire-sticky",
|
|
};
|
|
|
|
const buttons = {
|
|
PrimaryButton: "primary",
|
|
SecondaryButton: "default",
|
|
TertiaryButton: "ghost",
|
|
GhostButton: "ghost",
|
|
DangerButton: "danger",
|
|
LinkButton: "ghost",
|
|
CopyButton: "default",
|
|
ShareButton: "default",
|
|
DownloadButton: "default",
|
|
BackButton: "ghost",
|
|
CloseButton: "ghost",
|
|
};
|
|
|
|
const cards = [
|
|
"ClickableCard",
|
|
"GlassCard",
|
|
"OutlinedCard",
|
|
"ElevatedCard",
|
|
"InfoCard",
|
|
"WarningCard",
|
|
"SuccessCard",
|
|
"ErrorCard",
|
|
"UserCard",
|
|
"ContactCard",
|
|
"CampaignCard",
|
|
"ChannelCard",
|
|
"TemplateCard",
|
|
"AssetCard",
|
|
"IntegrationCard",
|
|
"ConnectionCard",
|
|
"WorkspaceCard",
|
|
"ProjectCard",
|
|
"NotificationCard",
|
|
];
|
|
|
|
const badges = [
|
|
"ProductStatusBadge",
|
|
"PreviewBadge",
|
|
"VerifiedBadge",
|
|
"NewBadge",
|
|
"BetaBadge",
|
|
"ComingSoonBadge",
|
|
"Chip",
|
|
"Pill",
|
|
"Counter",
|
|
"NotificationDot",
|
|
"OnlineIndicator",
|
|
"HealthIndicator",
|
|
];
|
|
|
|
function add(name, source) {
|
|
const file = join(root, `${name}.wrn`);
|
|
if (!existsSync(file)) writeFileSync(file, `${source.trim()}\n`);
|
|
}
|
|
|
|
for (const [name, variant] of Object.entries(typography)) {
|
|
add(
|
|
name,
|
|
`component ${name} {
|
|
props {
|
|
text = ""
|
|
align = "start"
|
|
class = ""
|
|
}
|
|
view { <div class="wire-type wire-type--${variant} wire-text--{align} ${name === "MutedText" ? "wire-muted" : ""} {class}">{text}<slot /></div> }
|
|
}`,
|
|
);
|
|
}
|
|
|
|
for (const [name, baseClass] of Object.entries(layouts)) {
|
|
add(
|
|
name,
|
|
`component ${name} {
|
|
props {
|
|
class = ""
|
|
}
|
|
view { <div class="${baseClass} {class}"><slot /></div> }
|
|
}`,
|
|
);
|
|
}
|
|
|
|
for (const [name, variant] of Object.entries(buttons)) {
|
|
add(
|
|
name,
|
|
`component ${name} {
|
|
props {
|
|
label = "Action"
|
|
type = "button"
|
|
disabled = false
|
|
class = ""
|
|
}
|
|
view { <button type="{type}" disabled="{disabled}" class="wire-btn wire-btn--${variant} {class}">{label}<slot /></button> }
|
|
}`,
|
|
);
|
|
}
|
|
|
|
for (const name of cards) {
|
|
add(
|
|
name,
|
|
`component ${name} {
|
|
props {
|
|
title = ""
|
|
description = ""
|
|
href = ""
|
|
class = ""
|
|
}
|
|
view { <article class="wire-card wire-catalog-card wire-catalog-card--${name.replace(/Card$/, "").toLowerCase()} {class}"><h3 data-show="title">{title}</h3><p data-show="description">{description}</p><slot /><a data-show="href" href="{href}" class="wire-catalog-card__link"><span class="wire-visually-hidden">Open {title}</span></a></article> }
|
|
}`,
|
|
);
|
|
}
|
|
|
|
for (const name of badges) {
|
|
add(
|
|
name,
|
|
`component ${name} {
|
|
props {
|
|
label = "${name.replace(/Badge$|Indicator$|Dot$|Counter$/, "") || "Status"}"
|
|
variant = "default"
|
|
class = ""
|
|
}
|
|
view { <span class="wire-badge wire-badge--{variant} wire-catalog-badge wire-catalog-badge--${name.toLowerCase()} {class}">{label}<slot /></span> }
|
|
}`,
|
|
);
|
|
}
|