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: "wrn-container wrn-container--narrow",
|
|
WideContainer: "wrn-container wrn-container--wide",
|
|
FullBleed: "wrn-full-bleed",
|
|
Flex: "wrn-flex",
|
|
AutoGrid: "wrn-auto-grid",
|
|
SplitLayout: "wrn-split-layout",
|
|
SidebarLayout: "wrn-sidebar-layout",
|
|
StickyLayout: "wrn-sticky-layout",
|
|
AspectRatio: "wrn-aspect-ratio",
|
|
Panel: "wrn-panel",
|
|
Surface: "wrn-surface",
|
|
Well: "wrn-well",
|
|
InsetPanel: "wrn-inset-panel",
|
|
ScrollArea: "wrn-scroll-area",
|
|
Sticky: "wrn-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="wrn-type wrn-type--${variant} wrn-text--{align} ${name === "MutedText" ? "wrn-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="wrn-btn wrn-btn--${variant} {class}">{label}<slot /></button> }
|
|
}`,
|
|
);
|
|
}
|
|
|
|
for (const name of cards) {
|
|
add(
|
|
name,
|
|
`component ${name} {
|
|
props {
|
|
title = ""
|
|
description = ""
|
|
href = ""
|
|
class = ""
|
|
}
|
|
view { <article class="wrn-card wrn-catalog-card wrn-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="wrn-catalog-card__link"><span class="wrn-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="wrn-badge wrn-badge--{variant} wrn-catalog-badge wrn-catalog-badge--${name.toLowerCase()} {class}">{label}<slot /></span> }
|
|
}`,
|
|
);
|
|
}
|