WorkRoot/WRNexusJS
2
0
Fork 0
Code Issues Pull Requests Actions 34 Packages Projects Releases Wiki Activity

refactor(ui): finish style-only component migration

Browse Source
This commit is contained in:
Clintchiz
2026-08-09 14:01:01 +05:30
parent 5c2c6a0a8f
commit 324928cfca
15 changed files with 197 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/DataMap.wrn
+15
View File
@@ -21,4 +21,19 @@ component DataMap {
<slot />
</section>
}
style {
.wire-next--data-map {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius);
color: var(--wire-color-text);
background: var(--wire-color-surface);
}
.wire-next--data-map > p { margin: 0; color: var(--wire-color-muted); }
.wire-next--data-map > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wire-next--data-map > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
}
}
packages/ui/components/DragAndDrop.wrn
+15
View File
@@ -25,4 +25,19 @@ component DragAndDrop {
<slot />
</section>
}
style {
.wire-next--drag-and-drop {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius);
color: var(--wire-color-text);
background: var(--wire-color-surface);
}
.wire-next--drag-and-drop > p { margin: 0; color: var(--wire-color-muted); }
.wire-next--drag-and-drop > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wire-next--drag-and-drop > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
}
}
packages/ui/components/FeatureIconCard.wrn
+31 -28
View File
@@ -21,45 +21,26 @@ component FeatureIconCard {
view {
<article
data-ui-component="FeatureIconCard"
class='group relative flex h-full flex-col rounded-3xl border border-[var(--wire-color-border)] bg-[var(--wire-color-surface-raised)] p-6 shadow-sm transition duration-200 {class}'
class:p-5='size === "sm"'
class:p-8='size === "lg"'
class:bg-[var(--wire-color-surface-soft)]='variant === "soft"'
class:bg-transparent='variant === "ghost"'
class:border-transparent='variant === "ghost"'
class:shadow-none='variant === "ghost"'
class:hover:-translate-y-1='hover === "lift"'
class:hover:shadow-xl='hover === "lift" || hover === "shadow"'
class:hover:border-[var(--wire-color-primary)]='hover === "lift" || hover === "border"'
class:items-center='align === "center"'
class:text-center='align === "center"'
data-size='{size}' data-variant='{variant}' data-hover='{hover}' data-align='{align}'
class='wire-feature-icon-card {class}'
>
<div
class="relative flex size-14 items-center justify-center rounded-2xl bg-[var(--wire-color-primary-soft)] text-[var(--wire-color-primary)] ring-1 ring-inset ring-[var(--wire-color-primary-muted)]"
class:size-12='iconSize === "sm"'
class:size-16='iconSize === "lg"'
class:bg-[var(--wire-color-primary)]='iconVariant === "solid" && color === "primary"'
class:text-[var(--wire-color-on-primary)]='iconVariant === "solid" && color === "primary"'
class:bg-[var(--wire-color-success-soft)]='color === "success" && iconVariant !== "solid"'
class:text-[var(--wire-color-success)]='color === "success" && iconVariant !== "solid"'
class:bg-[var(--wire-color-warning-soft)]='color === "warning" && iconVariant !== "solid"'
class:text-[var(--wire-color-warning-text)]='color === "warning" && iconVariant !== "solid"'
class:bg-[var(--wire-color-danger-soft)]='color === "danger" && iconVariant !== "solid"'
class:text-[var(--wire-color-danger)]='color === "danger" && iconVariant !== "solid"'
class="wire-feature-icon-card__icon"
data-size='{iconSize}' data-variant='{iconVariant}' data-color='{color}'
>
<span class='{icon + " size-7"}' aria-hidden="true"></span>
<span class='{icon + " wire-feature-icon-card__icon-glyph"}' aria-hidden="true"></span>
{#if badge}
<span class="absolute -right-2 -top-2 rounded-full bg-[var(--wire-color-surface-raised)] px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-[var(--wire-color-primary)] shadow-sm ring-1 ring-[var(--wire-color-border)]">
<span class="wire-feature-icon-card__badge">
{badge}
</span>
{/if}
</div>
<h3 class="mt-6 text-xl font-bold tracking-tight text-[var(--wire-color-text)]">{title}</h3>
<h3 class="wire-feature-icon-card__title">{title}</h3>
{#if description}
<p class="mt-3 flex-1 text-sm leading-6 text-[var(--wire-color-text-muted)]">{description}</p>
<p class="wire-feature-icon-card__description">{description}</p>
{/if}
<slot></slot>
@@ -70,11 +51,33 @@ component FeatureIconCard {
href='{href}'
color='{color}'
size="sm"
class="mt-6"
class="wire-feature-icon-card__action"
/>
{/if}
<slot name="footer"></slot>
</article>
}
style {
.wire-feature-icon-card { position: relative; display: flex; height: 100%; flex-direction: column; padding: 1.5rem; border: 1px solid var(--wire-color-border); border-radius: calc(var(--wire-radius) * 2); background: var(--wire-color-surface-raised); box-shadow: var(--wire-shadow-1); transition: transform var(--wire-motion-base), border-color var(--wire-motion-base), box-shadow var(--wire-motion-base); }
.wire-feature-icon-card[data-size="sm"] { padding: 1.25rem; } .wire-feature-icon-card[data-size="lg"] { padding: 2rem; }
.wire-feature-icon-card[data-variant="soft"] { background: var(--wire-color-surface-soft); }
.wire-feature-icon-card[data-variant="ghost"] { border-color: transparent; background: transparent; box-shadow: none; }
.wire-feature-icon-card[data-hover="lift"]:hover { transform: translateY(-0.25rem); }
.wire-feature-icon-card:is([data-hover="lift"], [data-hover="shadow"]):hover { box-shadow: var(--wire-shadow-3); }
.wire-feature-icon-card:is([data-hover="lift"], [data-hover="border"]):hover { border-color: var(--wire-color-primary); }
.wire-feature-icon-card[data-align="center"] { align-items: center; text-align: center; }
.wire-feature-icon-card__icon { position: relative; display: flex; width: 3.5rem; height: 3.5rem; align-items: center; justify-content: center; border: 1px solid var(--wire-color-primary-muted); border-radius: calc(var(--wire-radius) * 1.5); color: var(--wire-color-primary); background: var(--wire-color-primary-soft); }
.wire-feature-icon-card__icon[data-size="sm"] { width: 3rem; height: 3rem; } .wire-feature-icon-card__icon[data-size="lg"] { width: 4rem; height: 4rem; }
.wire-feature-icon-card__icon[data-variant="solid"] { color: var(--wire-color-on-primary); background: var(--wire-color-primary); }
.wire-feature-icon-card__icon[data-color="success"]:not([data-variant="solid"]) { color: var(--wire-color-success); background: var(--wire-color-success-soft); }
.wire-feature-icon-card__icon[data-color="warning"]:not([data-variant="solid"]) { color: var(--wire-color-warning-text); background: var(--wire-color-warning-soft); }
.wire-feature-icon-card__icon[data-color="danger"]:not([data-variant="solid"]) { color: var(--wire-color-danger); background: var(--wire-color-danger-soft); }
.wire-feature-icon-card__icon-glyph { width: 1.75rem; height: 1.75rem; }
.wire-feature-icon-card__badge { position: absolute; top: -0.5rem; right: -0.5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--wire-color-border); border-radius: 999px; color: var(--wire-color-primary); background: var(--wire-color-surface-raised); box-shadow: var(--wire-shadow-1); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase; }
.wire-feature-icon-card__title { margin-top: 1.5rem; color: var(--wire-color-text); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
.wire-feature-icon-card__description { flex: 1; margin-top: 0.75rem; color: var(--wire-color-text-muted); font-size: 0.875rem; line-height: 1.5rem; }
.wire-feature-icon-card__action { margin-top: 1.5rem; }
}
}
packages/ui/components/HeroActions.wrn
+21 -8
View File
@@ -17,13 +17,11 @@ component HeroActions {
data-ui-component="HeroActions"
role="group"
aria-label="Page actions"
class='flex flex-wrap items-center gap-3 {class}'
class:flex-col='orientation === "vertical" || stackOnMobile'
class:sm:flex-row='orientation === "horizontal" && stackOnMobile'
class:justify-center='align === "center"'
class:justify-end='align === "right"'
class:w-full='fullWidthMobile'
class:sm:w-auto='fullWidthMobile'
data-align='{align}'
data-orientation='{orientation}'
data-stack-mobile='{stackOnMobile ? "true" : "false"}'
data-full-mobile='{fullWidthMobile ? "true" : "false"}'
class='wire-hero-actions {class}'
>
{#each actions as action, index}
{#if action.label}
@@ -43,7 +41,7 @@ component HeroActions {
ariaLabel='{action.ariaLabel || action.label}'
fullWidth='{fullWidthMobile}'
controlClass='{action.controlClass || ""}'
class='{"sm:w-auto " + (action.class || "")}'
class='{"wire-hero-actions__action " + (action.class || "")}'
/>
{/if}
{/each}
@@ -51,4 +49,19 @@ component HeroActions {
<slot></slot>
</div>
}
style {
.wire-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.wire-hero-actions[data-align="center"] { justify-content: center; }
.wire-hero-actions[data-align="right"] { justify-content: flex-end; }
.wire-hero-actions[data-orientation="vertical"] { flex-direction: column; align-items: stretch; }
.wire-hero-actions[data-full-mobile="true"] { width: 100%; }
@media (max-width: 39.999rem) {
.wire-hero-actions[data-stack-mobile="true"] { flex-direction: column; align-items: stretch; }
}
@media (min-width: 40rem) {
.wire-hero-actions[data-full-mobile="true"] { width: auto; }
.wire-hero-actions__action { width: auto; }
}
}
}
packages/ui/components/LegendIndicator.wrn
+15
View File
@@ -21,4 +21,19 @@ component LegendIndicator {
<slot />
</section>
}
style {
.wire-next--legend-indicator {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius);
color: var(--wire-color-text);
background: var(--wire-color-surface);
}
.wire-next--legend-indicator > p { margin: 0; color: var(--wire-color-muted); }
.wire-next--legend-indicator > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wire-next--legend-indicator > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
}
}
packages/ui/components/ListGroup.wrn
+15
View File
@@ -21,4 +21,19 @@ component ListGroup {
<slot />
</section>
}
style {
.wire-next--list-group {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius);
color: var(--wire-color-text);
background: var(--wire-color-surface);
}
.wire-next--list-group > p { margin: 0; color: var(--wire-color-muted); }
.wire-next--list-group > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wire-next--list-group > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
}
}
packages/ui/components/MarketingSectionHeader.wrn
+5 -1
View File
@@ -23,7 +23,7 @@ component MarketingSectionHeader {
data-ui-component="MarketingSectionHeader"
data-size='{size}'
data-color='{color}'
class='{class}'
class='wire-marketing-section-header {class}'
>
<SectionHeader
id='{id}'
@@ -59,4 +59,8 @@ component MarketingSectionHeader {
</SectionHeader>
</div>
}
style {
.wire-marketing-section-header { width: 100%; min-width: 0; }
}
}
packages/ui/components/Rating.wrn
+15
View File
@@ -21,4 +21,19 @@ component Rating {
<slot />
</section>
}
style {
.wire-next--rating {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius);
color: var(--wire-color-text);
background: var(--wire-color-surface);
}
.wire-next--rating > p { margin: 0; color: var(--wire-color-muted); }
.wire-next--rating > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wire-next--rating > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
}
}
packages/ui/components/StyledIcon.wrn
+15
View File
@@ -16,4 +16,19 @@ component StyledIcon {
<slot />
</section>
}
style {
.wire-next--styled-icon {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius);
color: var(--wire-color-text);
background: var(--wire-color-surface);
}
.wire-next--styled-icon > p { margin: 0; color: var(--wire-color-muted); }
.wire-next--styled-icon > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wire-next--styled-icon > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
}
}
packages/ui/components/WysiwygEditor.wrn
+15
View File
@@ -23,4 +23,19 @@ component WysiwygEditor {
<slot />
</section>
}
style {
.wire-next--wysiwyg-editor {
display: grid;
gap: 0.75rem;
padding: 1rem;
border: 1px solid var(--wire-color-border);
border-radius: var(--wire-radius);
color: var(--wire-color-text);
background: var(--wire-color-surface);
}
.wire-next--wysiwyg-editor > p { margin: 0; color: var(--wire-color-muted); }
.wire-next--wysiwyg-editor > .wire-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wire-next--wysiwyg-editor > .wire-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wire-radius-sm); background: var(--wire-color-surface-2); }
}
}
packages/ui/components/input.wrn
+5
View File
@@ -92,4 +92,9 @@ size: string = "default"
<small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
}
style {
.wire-next--input { width: 100%; min-width: 0; }
.wire-next--input[data-invalid="true"] { --wire-component-color: var(--wire-color-danger); }
}
}
packages/ui/components/radio.wrn
+5
View File
@@ -56,4 +56,9 @@ size: string = "default"
{#if helperText}<small class="wire-next__field-help">{helperText}</small>{/if}<small class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
}
style {
.wire-next--radio-field { width: 100%; min-width: 0; }
.wire-next--radio-field[data-invalid="true"] { --wire-component-color: var(--wire-color-danger); }
}
}
packages/ui/components/textarea.wrn
+5
View File
@@ -53,4 +53,9 @@ size: string = "default"
<small id="{(id || name) + '-error'}" class="wire-next__field-error" data-error="{name}">{error}</small>
</div>
}
style {
.wire-next--textarea { width: 100%; min-width: 0; }
.wire-next--textarea[data-invalid="true"] { --wire-component-color: var(--wire-color-danger); }
}
}
packages/ui/test/ui.test.ts
+7
View File
@@ -30,6 +30,13 @@ test("global UI CSS stays below its migration ratchet", () => {
expect(gzipSync(new TextEncoder().encode(uiCss())).length).toBeLessThanOrEqual(12_672);
});
test("only the five scheduled component builds remain without local styles", () => {
const unstyled = uiComponentNames().filter(
(name) => !/^\s{2,4}style \{/m.test(readFileSync(uiComponentPath(name), "utf8")),
);
expect(unstyled.sort()).toEqual(["Chart", "Clipboard", "Confetti", "CopyMarkup", "TreeView"]);
});
test("generated component reference documents every bundled component and its props", () => {
const reference = JSON.parse(
readFileSync(join(uiComponentsDir(), "..", "component-reference.json"), "utf8"),