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

refactor: migrate legacy wire namespace to wrn
Quality / quality (ubuntu-latest) (push) Failing after 9m49s
Details
Quality / quality (windows-latest) (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
Clintchiz
2026-08-12 18:51:15 +05:30
parent ec23dd4c93
commit 2c960fc1dc
488 changed files with 27306 additions and 19063 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/components/PortalDashboard.wrn
+132 -132
View File
@@ -32,11 +32,11 @@ component PortalDashboard {
}
view {
<main class="wire-portal-dashboard wire-component--color-{color} wire-component--size-{size} {class}">
<header class="wire-portal-dashboard__hero">
<main class="wrn-portal-dashboard wrn-component--color-{color} wrn-component--size-{size} {class}">
<header class="wrn-portal-dashboard__hero">
<div>
{#if eyebrowKey}<span class="wire-portal-dashboard__eyebrow" data-t="{eyebrowKey}">{eyebrow}</span>{/if}
{#if !eyebrowKey}<span class="wire-portal-dashboard__eyebrow">{eyebrow}</span>{/if}
{#if eyebrowKey}<span class="wrn-portal-dashboard__eyebrow" data-t="{eyebrowKey}">{eyebrow}</span>{/if}
{#if !eyebrowKey}<span class="wrn-portal-dashboard__eyebrow">{eyebrow}</span>{/if}
<h1>
{#if titleKey}<span data-t="{titleKey}">{title}</span>{/if}
{#if !titleKey}<span>{title}</span>{/if}
@@ -45,22 +45,22 @@ component PortalDashboard {
{#if descriptionKey}<p data-t="{descriptionKey}">{description}</p>{/if}
{#if !descriptionKey && description}<p>{description}</p>{/if}
</div>
<div class="wire-portal-dashboard__hero-slot"><slot name="hero-action" /></div>
<div class="wrn-portal-dashboard__hero-slot"><slot name="hero-action" /></div>
</header>
<section class="wire-portal-dashboard__metrics" aria-label="Summary">
<section class="wrn-portal-dashboard__metrics" aria-label="Summary">
{#each metrics as item}
<article class="wire-portal-dashboard__metric">
<span class="wire-portal-dashboard__metric-icon {item.icon || 'icon-[lucide--activity]'}" aria-hidden="true"></span>
<article class="wrn-portal-dashboard__metric">
<span class="wrn-portal-dashboard__metric-icon {item.icon || 'icon-[lucide--activity]'}" aria-hidden="true"></span>
<div><small>{item.label}</small><strong>{item.value}</strong>{#if item.detail}<span>{item.detail}</span>{/if}</div>
</article>
{/each}
</section>
<div class="wire-portal-dashboard__grid">
<section class="wire-portal-dashboard__panel wire-portal-dashboard__panel--actions">
<div class="wire-portal-dashboard__panel-heading"><div><small>Shortcuts</small><h2>Quick actions</h2></div></div>
<div class="wire-portal-dashboard__actions">
<div class="wrn-portal-dashboard__grid">
<section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--actions">
<div class="wrn-portal-dashboard__panel-heading"><div><small>Shortcuts</small><h2>Quick actions</h2></div></div>
<div class="wrn-portal-dashboard__actions">
{#each actions as item, index}
<a href="{item.href || '#'}" @click="chooseAction(item, index)">
<span class="{item.icon || 'icon-[lucide--arrow-up-right]'}" aria-hidden="true"></span>
@@ -71,12 +71,12 @@ component PortalDashboard {
</div>
</section>
<section class="wire-portal-dashboard__panel">
<div class="wire-portal-dashboard__panel-heading"><div><small>Priority</small><h2>Tasks requiring attention</h2></div></div>
<div class="wire-portal-dashboard__list">
<section class="wrn-portal-dashboard__panel">
<div class="wrn-portal-dashboard__panel-heading"><div><small>Priority</small><h2>Tasks requiring attention</h2></div></div>
<div class="wrn-portal-dashboard__list">
{#each tasks as item, index}
<a href="{item.href || '#'}" @click="chooseNavigation(item, index)">
<span class="wire-portal-dashboard__status wire-portal-dashboard__status--{item.status || 'default'}"></span>
<span class="wrn-portal-dashboard__status wrn-portal-dashboard__status--{item.status || 'default'}"></span>
<span><strong>{item.label}</strong>{#if item.detail}<small>{item.detail}</small>{/if}</span>
{#if item.meta}<em>{item.meta}</em>{/if}
</a>
@@ -84,9 +84,9 @@ component PortalDashboard {
</div>
</section>
<section class="wire-portal-dashboard__panel wire-portal-dashboard__panel--updates">
<div class="wire-portal-dashboard__panel-heading"><div><small>Latest</small><h2>Recent updates</h2></div></div>
<div class="wire-portal-dashboard__timeline">
<section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--updates">
<div class="wrn-portal-dashboard__panel-heading"><div><small>Latest</small><h2>Recent updates</h2></div></div>
<div class="wrn-portal-dashboard__timeline">
{#each updates as item}
<article>
<span class="{item.icon || 'icon-[lucide--bell]'}" aria-hidden="true"></span>
@@ -100,163 +100,163 @@ component PortalDashboard {
}
style {
.wire-portal-dashboard__status--urgent {
background: var(--wire-color-danger);
.wrn-portal-dashboard__status--urgent {
background: var(--wrn-color-danger);
}
.wire-portal-dashboard__status--warning {
background: var(--wire-color-warning);
.wrn-portal-dashboard__status--warning {
background: var(--wrn-color-warning);
}
.wire-portal-dashboard__status--success {
background: var(--wire-color-success);
.wrn-portal-dashboard__status--success {
background: var(--wrn-color-success);
}
/* Reusable responsive portal dashboard */
.wire-portal-dashboard {
.wrn-portal-dashboard {
width: min(100%, 96rem);
margin-inline: auto;
color: var(--wire-color-text);
color: var(--wrn-color-text);
}
.wire-portal-dashboard__hero {
.wrn-portal-dashboard__hero {
display: flex;
padding: clamp(1.25rem, 3vw, 2rem);
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
border: 1px solid var(--wire-color-border);
border: 1px solid var(--wrn-color-border);
border-radius: 1rem;
background:
radial-gradient(
circle at 85% 0%,
color-mix(in srgb, var(--wire-color-primary) 20%, transparent),
color-mix(in srgb, var(--wrn-color-primary) 20%, transparent),
transparent 34%
),
var(--wire-color-surface);
box-shadow: var(--wire-shadow-sm);
var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-sm);
}
.wire-portal-dashboard__eyebrow,
.wire-portal-dashboard__panel-heading small {
color: var(--wire-color-primary);
.wrn-portal-dashboard__eyebrow,
.wrn-portal-dashboard__panel-heading small {
color: var(--wrn-color-primary);
font-size: 0.7rem;
font-weight: 650;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.wire-portal-dashboard__hero h1 {
.wrn-portal-dashboard__hero h1 {
margin: 0.35rem 0 0;
font-size: clamp(1.4rem, 3vw, 2.25rem);
font-weight: 650;
letter-spacing: -0.035em;
}
.wire-portal-dashboard__hero p {
.wrn-portal-dashboard__hero p {
max-width: 48rem;
margin: 0.5rem 0 0;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.875rem;
line-height: 1.6;
}
.wire-portal-dashboard__metrics {
.wrn-portal-dashboard__metrics {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 1rem;
gap: 1rem;
}
.wire-portal-dashboard__metric {
.wrn-portal-dashboard__metric {
display: flex;
min-width: 0;
padding: 1rem;
align-items: center;
gap: 0.85rem;
border: 1px solid var(--wire-color-border);
border: 1px solid var(--wrn-color-border);
border-radius: 0.85rem;
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-sm);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-sm);
}
.wire-portal-dashboard__metric-icon {
.wrn-portal-dashboard__metric-icon {
width: 2.25rem;
height: 2.25rem;
flex: none;
padding: 0.55rem;
border-radius: 0.7rem;
color: var(--wire-color-primary);
background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent);
color: var(--wrn-color-primary);
background: color-mix(in srgb, var(--wrn-color-primary) 12%, transparent);
}
.wire-portal-dashboard__metric div {
.wrn-portal-dashboard__metric div {
display: grid;
min-width: 0;
}
.wire-portal-dashboard__metric small,
.wire-portal-dashboard__metric span {
.wrn-portal-dashboard__metric small,
.wrn-portal-dashboard__metric span {
overflow: hidden;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.7rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.wire-portal-dashboard__metric strong {
.wrn-portal-dashboard__metric strong {
margin-block: 0.1rem;
font-size: 1.3rem;
font-weight: 650;
}
.wire-portal-dashboard__grid {
.wrn-portal-dashboard__grid {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr);
margin-top: 1rem;
gap: 1rem;
}
.wire-portal-dashboard__panel {
.wrn-portal-dashboard__panel {
min-width: 0;
padding: 1.1rem;
border: 1px solid var(--wire-color-border);
border: 1px solid var(--wrn-color-border);
border-radius: 0.9rem;
background: var(--wire-color-surface);
box-shadow: var(--wire-shadow-sm);
background: var(--wrn-color-surface);
box-shadow: var(--wrn-shadow-sm);
}
.wire-portal-dashboard__panel--actions {
.wrn-portal-dashboard__panel--actions {
grid-row: span 2;
}
.wire-portal-dashboard__panel-heading {
.wrn-portal-dashboard__panel-heading {
display: flex;
margin-bottom: 0.9rem;
align-items: center;
justify-content: space-between;
}
.wire-portal-dashboard__panel-heading h2 {
.wrn-portal-dashboard__panel-heading h2 {
margin: 0.2rem 0 0;
font-size: 1rem;
font-weight: 600;
}
.wire-portal-dashboard__actions {
.wrn-portal-dashboard__actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.65rem;
}
.wire-portal-dashboard__actions a,
.wire-portal-dashboard__list a {
.wrn-portal-dashboard__actions a,
.wrn-portal-dashboard__list a {
display: flex;
min-width: 0;
padding: 0.8rem;
align-items: center;
gap: 0.7rem;
border: 1px solid var(--wire-color-border);
border: 1px solid var(--wrn-color-border);
border-radius: 0.7rem;
color: inherit;
text-decoration: none;
@@ -266,187 +266,187 @@ component PortalDashboard {
transform 150ms ease;
}
.wire-portal-dashboard__actions a:hover,
.wire-portal-dashboard__list a:hover {
border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border));
background: var(--wire-color-surface-2);
.wrn-portal-dashboard__actions a:hover,
.wrn-portal-dashboard__list a:hover {
border-color: color-mix(in srgb, var(--wrn-color-primary) 45%, var(--wrn-color-border));
background: var(--wrn-color-surface-2);
transform: translateY(-1px);
}
.wire-portal-dashboard__actions a > span:first-child {
.wrn-portal-dashboard__actions a > span:first-child {
width: 1.15rem;
height: 1.15rem;
flex: none;
color: var(--wire-color-primary);
color: var(--wrn-color-primary);
}
.wire-portal-dashboard__actions a > span:nth-child(2),
.wire-portal-dashboard__list a > span:nth-child(2) {
.wrn-portal-dashboard__actions a > span:nth-child(2),
.wrn-portal-dashboard__list a > span:nth-child(2) {
display: grid;
min-width: 0;
flex: 1;
}
.wire-portal-dashboard__actions a > span:last-child {
.wrn-portal-dashboard__actions a > span:last-child {
width: 0.9rem;
height: 0.9rem;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
}
.wire-portal-dashboard__actions strong,
.wire-portal-dashboard__list strong,
.wire-portal-dashboard__timeline strong {
.wrn-portal-dashboard__actions strong,
.wrn-portal-dashboard__list strong,
.wrn-portal-dashboard__timeline strong {
font-size: 0.8rem;
font-weight: 550;
}
.wire-portal-dashboard__actions small,
.wire-portal-dashboard__list small,
.wire-portal-dashboard__timeline p,
.wire-portal-dashboard__timeline small {
.wrn-portal-dashboard__actions small,
.wrn-portal-dashboard__list small,
.wrn-portal-dashboard__timeline p,
.wrn-portal-dashboard__timeline small {
margin: 0.15rem 0 0;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
font-size: 0.7rem;
font-style: normal;
line-height: 1.45;
}
.wire-portal-dashboard__list {
.wrn-portal-dashboard__list {
display: grid;
gap: 0.5rem;
}
.wire-portal-dashboard__list a {
.wrn-portal-dashboard__list a {
border: 0;
border-bottom: 1px solid var(--wire-color-border);
border-bottom: 1px solid var(--wrn-color-border);
border-radius: 0;
}
.wire-portal-dashboard__status {
.wrn-portal-dashboard__status {
width: 0.55rem;
height: 0.55rem;
flex: none;
border-radius: 999px;
background: var(--wire-color-muted);
background: var(--wrn-color-muted);
}
.wire-portal-dashboard__list em {
color: var(--wire-color-muted);
.wrn-portal-dashboard__list em {
color: var(--wrn-color-muted);
font-size: 0.7rem;
font-style: normal;
}
.wire-portal-dashboard__timeline {
.wrn-portal-dashboard__timeline {
display: grid;
gap: 0.8rem;
}
.wire-portal-dashboard__timeline article {
.wrn-portal-dashboard__timeline article {
display: flex;
gap: 0.7rem;
}
.wire-portal-dashboard__timeline article > span {
.wrn-portal-dashboard__timeline article > span {
width: 1rem;
height: 1rem;
margin-top: 0.15rem;
flex: none;
color: var(--wire-color-primary);
color: var(--wrn-color-primary);
}
.wire-portal-dashboard__timeline p {
.wrn-portal-dashboard__timeline p {
margin-block: 0.15rem;
}
@media (max-width: 1100px) {
.wire-portal-dashboard__metrics {
.wrn-portal-dashboard__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wire-portal-dashboard__grid {
.wrn-portal-dashboard__grid {
grid-template-columns: 1fr;
}
.wire-portal-dashboard__panel--actions {
.wrn-portal-dashboard__panel--actions {
grid-row: auto;
}
}
@media (max-width: 640px) {
.wire-portal-dashboard__hero {
.wrn-portal-dashboard__hero {
align-items: flex-start;
flex-direction: column;
}
.wire-portal-dashboard__metrics,
.wire-portal-dashboard__actions {
.wrn-portal-dashboard__metrics,
.wrn-portal-dashboard__actions {
grid-template-columns: 1fr;
}
}
/* Shared component foundation. */
.wire-component {
--wire-component-color: var(--wire-color-primary);
--wire-component-scale: 1;
.wrn-component {
--wrn-component-color: var(--wrn-color-primary);
--wrn-component-scale: 1;
margin: 0;
color: var(--wire-color-text);
color: var(--wrn-color-text);
font-family: var(--wrn-font-sans, inherit);
}
.wire-component--color-primary {
--wire-component-color: var(--wire-color-primary);
.wrn-component--color-primary {
--wrn-component-color: var(--wrn-color-primary);
}
.wire-component--color-secondary {
--wire-component-color: var(--wire-color-secondary);
.wrn-component--color-secondary {
--wrn-component-color: var(--wrn-color-secondary);
}
.wire-component--color-success {
--wire-component-color: var(--wire-color-success);
.wrn-component--color-success {
--wrn-component-color: var(--wrn-color-success);
}
.wire-component--color-warning {
--wire-component-color: var(--wire-color-warning);
.wrn-component--color-warning {
--wrn-component-color: var(--wrn-color-warning);
}
.wire-component--color-danger {
--wire-component-color: var(--wire-color-danger);
.wrn-component--color-danger {
--wrn-component-color: var(--wrn-color-danger);
}
.wire-component--color-info {
--wire-component-color: var(--wire-color-info);
.wrn-component--color-info {
--wrn-component-color: var(--wrn-color-info);
}
.wire-component--size-xs {
--wire-component-scale: 0.78;
.wrn-component--size-xs {
--wrn-component-scale: 0.78;
}
.wire-component--size-sm {
--wire-component-scale: 0.88;
.wrn-component--size-sm {
--wrn-component-scale: 0.88;
}
.wire-component--size-default,
.wire-component--size-md {
--wire-component-scale: 1;
.wrn-component--size-default,
.wrn-component--size-md {
--wrn-component-scale: 1;
}
.wire-component--size-lg {
--wire-component-scale: 1.14;
.wrn-component--size-lg {
--wrn-component-scale: 1.14;
}
.wire-component--size-xl {
--wire-component-scale: 1.28;
.wrn-component--size-xl {
--wrn-component-scale: 1.28;
}
.wire-component:not(.wire-btn) {
font-size: calc(1em * var(--wire-component-scale));
.wrn-component:not(.wrn-btn) {
font-size: calc(1em * var(--wrn-component-scale));
}
.wire-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wire-component-color);
.wrn-component :is(a, button, input, select, textarea):focus-visible {
outline-color: var(--wrn-component-color);
}
.wire-component p {
.wrn-component p {
margin: 0;
color: var(--wire-color-muted);
color: var(--wrn-color-muted);
line-height: 1.6;
}
}