feat: release design system engine, studio and component contracts

This commit is contained in:
Clintchiz committed 2026-10-19 13:09:03 +05:30
1 parent ff1065fb27
commit 3943b946d6
693 files changed
+175546 -3894

No files matched your search

+22 -22
View File
@@ -32,12 +32,12 @@ component PortalDashboard {
}
view {
<main class="wrn-portal-dashboard wrn-component--color-{color} wrn-component--size-{size} {class}">
<header class="wrn-portal-dashboard__hero">
<main class="wrn-portal-dashboard wrn-component--color-{color} wrn-component--size-{size} {class}" data-wrn-owner="PortalDashboard" data-wrn-part="root" data-wrn-component="PortalDashboard" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<header class="wrn-portal-dashboard__hero" data-wrn-owner="PortalDashboard" data-wrn-part="hero" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div>
{#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 eyebrowKey}<span class="wrn-portal-dashboard__eyebrow" data-t="{eyebrowKey}" data-wrn-owner="PortalDashboard" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{eyebrow}</span>{/if}
{#if !eyebrowKey}<span class="wrn-portal-dashboard__eyebrow" data-wrn-owner="PortalDashboard" data-wrn-part="eyebrow" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">{eyebrow}</span>{/if}
<h1 data-wrn-owner="PortalDashboard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#if titleKey}<span data-t="{titleKey}">{title}</span>{/if}
{#if !titleKey}<span>{title}</span>{/if}
{#if userName}, {userName}{/if}
@@ -45,24 +45,24 @@ component PortalDashboard {
{#if descriptionKey}<p data-t="{descriptionKey}">{description}</p>{/if}
{#if !descriptionKey && description}<p>{description}</p>{/if}
</div>
<div class="wrn-portal-dashboard__hero-slot"><slot name="hero-action" /></div>
<div class="wrn-portal-dashboard__hero-slot" data-wrn-owner="PortalDashboard" data-wrn-part="heroSlot" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><slot name="hero-action" /></div>
</header>
<section class="wrn-portal-dashboard__metrics" aria-label="Summary">
<section class="wrn-portal-dashboard__metrics" aria-label="Summary" data-wrn-owner="PortalDashboard" data-wrn-part="metrics" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each metrics as item}
<article class="wrn-portal-dashboard__metric">
<span class="wrn-portal-dashboard__metric-icon {item.icon || 'icon-[lucide--activity]'}" aria-hidden="true"></span>
<article class="wrn-portal-dashboard__metric" data-wrn-owner="PortalDashboard" data-wrn-part="metric" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-portal-dashboard__metric-icon {item.icon || 'icon-[lucide--activity]'}" aria-hidden="true" data-wrn-owner="PortalDashboard" data-wrn-part="metricIcon" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></span>
<div><small>{item.label}</small><strong>{item.value}</strong>{#if item.detail}<span>{item.detail}</span>{/if}</div>
</article>
{/each}
</section>
<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">
<div class="wrn-portal-dashboard__grid" data-wrn-owner="PortalDashboard" data-wrn-part="grid" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--actions" data-wrn-owner="PortalDashboard" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-portal-dashboard__panel-heading" data-wrn-owner="PortalDashboard" data-wrn-part="panelHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><div><small>Shortcuts</small><h2 data-wrn-owner="PortalDashboard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Quick actions</h2></div></div>
<div class="wrn-portal-dashboard__actions" data-wrn-owner="PortalDashboard" data-wrn-part="actions" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each actions as item, index}
<a href="{item.href || '#'}" @click="chooseAction(item, index)">
<a href="{item.href || '#'}" @click="chooseAction(item, index)" data-wrn-owner="PortalDashboard" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="{item.icon || 'icon-[lucide--arrow-up-right]'}" aria-hidden="true"></span>
<span><strong>{item.label}</strong>{#if item.description}<small>{item.description}</small>{/if}</span>
<span class="icon-[lucide--chevron-right]" aria-hidden="true"></span>
@@ -71,12 +71,12 @@ component PortalDashboard {
</div>
</section>
<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">
<section class="wrn-portal-dashboard__panel" data-wrn-owner="PortalDashboard" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-portal-dashboard__panel-heading" data-wrn-owner="PortalDashboard" data-wrn-part="panelHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><div><small>Priority</small><h2 data-wrn-owner="PortalDashboard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Tasks requiring attention</h2></div></div>
<div class="wrn-portal-dashboard__list" data-wrn-owner="PortalDashboard" data-wrn-part="list" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each tasks as item, index}
<a href="{item.href || '#'}" @click="chooseNavigation(item, index)">
<span class="wrn-portal-dashboard__status wrn-portal-dashboard__status--{item.status || 'default'}"></span>
<a href="{item.href || '#'}" @click="chooseNavigation(item, index)" data-wrn-owner="PortalDashboard" data-wrn-part="link" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<span class="wrn-portal-dashboard__status wrn-portal-dashboard__status--{item.status || 'default'}" data-wrn-owner="PortalDashboard" data-wrn-part="status" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"></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="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">
<section class="wrn-portal-dashboard__panel wrn-portal-dashboard__panel--updates" data-wrn-owner="PortalDashboard" data-wrn-part="panel" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
<div class="wrn-portal-dashboard__panel-heading" data-wrn-owner="PortalDashboard" data-wrn-part="panelHeading" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}"><div><small>Latest</small><h2 data-wrn-owner="PortalDashboard" data-wrn-part="title" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">Recent updates</h2></div></div>
<div class="wrn-portal-dashboard__timeline" data-wrn-owner="PortalDashboard" data-wrn-part="timeline" data-wrn-axis-size="{size}" data-wrn-axis-color="{color}">
{#each updates as item}
<article>
<span class="{item.icon || 'icon-[lucide--bell]'}" aria-hidden="true"></span>