docs(ui): add launch state matrix story
This commit is contained in:
parent
4d172879f4
commit
d7d683a1fb
@ -303,3 +303,174 @@ export const LaunchReadyConsole: Story = {
|
||||
</main>
|
||||
),
|
||||
};
|
||||
|
||||
export const LaunchStateMatrix: Story = {
|
||||
render: () => (
|
||||
<main className="min-h-screen bg-[var(--bl-bg-canvas)] p-6 text-[var(--bl-text-primary)]">
|
||||
<div className="mx-auto grid max-w-6xl gap-6">
|
||||
<PageHeader
|
||||
eyebrow="Launch readiness"
|
||||
title="State matrix"
|
||||
description="Shared product states for checking loading, empty, warning, error, disabled, confirmation, and dense data behavior before a route ships."
|
||||
metadata={
|
||||
<>
|
||||
<Badge variant="info" dot>
|
||||
Reusable
|
||||
</Badge>
|
||||
<Badge variant="success" dot>
|
||||
Accessible states
|
||||
</Badge>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<Panel>
|
||||
<PanelHeader>
|
||||
<div>
|
||||
<PanelTitle>Loading</PanelTitle>
|
||||
<PanelDescription>Skeletons match the final rhythm and density.</PanelDescription>
|
||||
</div>
|
||||
<StatusBadge tone="info" dot>
|
||||
Fetching
|
||||
</StatusBadge>
|
||||
</PanelHeader>
|
||||
<PanelBody>
|
||||
<div className="grid gap-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Skeleton shape="circle" />
|
||||
<div className="grid flex-1 gap-2">
|
||||
<Skeleton shape="text" className="w-2/3" />
|
||||
<Skeleton shape="text" className="w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
<TableSkeleton rows={4} />
|
||||
</div>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
|
||||
<Panel>
|
||||
<PanelHeader>
|
||||
<div>
|
||||
<PanelTitle>Empty</PanelTitle>
|
||||
<PanelDescription>Empty states provide a clear next action.</PanelDescription>
|
||||
</div>
|
||||
</PanelHeader>
|
||||
<PanelBody>
|
||||
<EmptyState
|
||||
title="No setups need review"
|
||||
description="When work is complete, the surface should still feel intentional."
|
||||
icon={<ShieldCheck className="h-10 w-10" />}
|
||||
action={
|
||||
<Button size="sm" variant="secondary">
|
||||
Create setup
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
|
||||
<Panel>
|
||||
<PanelHeader>
|
||||
<div>
|
||||
<PanelTitle>Alert stack</PanelTitle>
|
||||
<PanelDescription>Warnings and errors use consistent semantics.</PanelDescription>
|
||||
</div>
|
||||
</PanelHeader>
|
||||
<PanelBody>
|
||||
<div className="grid gap-3">
|
||||
<AlertBanner tone="warning" title="Data freshness degraded">
|
||||
Market data is delayed. Show the user what changed and whether action is safe.
|
||||
</AlertBanner>
|
||||
<AlertBanner tone="error" title="Execution blocked">
|
||||
Destructive or risky actions require a clear reason and recovery path.
|
||||
</AlertBanner>
|
||||
</div>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
|
||||
<Panel>
|
||||
<PanelHeader>
|
||||
<div>
|
||||
<PanelTitle>Forms and disabled states</PanelTitle>
|
||||
<PanelDescription>Controls remain readable when unavailable.</PanelDescription>
|
||||
</div>
|
||||
<Badge variant="neutral">Read-only</Badge>
|
||||
</PanelHeader>
|
||||
<PanelBody>
|
||||
<FormSection
|
||||
title="Risk limits"
|
||||
description="Disabled controls explain state nearby."
|
||||
>
|
||||
<FieldGrid columns={2}>
|
||||
<Input label="Max daily loss" value="$250" readOnly />
|
||||
<Select
|
||||
label="Execution mode"
|
||||
value="paper"
|
||||
disabled
|
||||
options={[
|
||||
{ value: 'paper', label: 'Paper trading' },
|
||||
{ value: 'live', label: 'Live trading' },
|
||||
]}
|
||||
/>
|
||||
</FieldGrid>
|
||||
<AlertBanner tone="info">
|
||||
Live execution is locked until admin approval is complete.
|
||||
</AlertBanner>
|
||||
</FormSection>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
|
||||
<Panel className="lg:col-span-2">
|
||||
<PanelHeader>
|
||||
<div>
|
||||
<PanelTitle>Destructive confirmation context</PanelTitle>
|
||||
<PanelDescription>
|
||||
Danger actions should be visually distinct and isolated.
|
||||
</PanelDescription>
|
||||
</div>
|
||||
<Button variant="destructive" size="sm">
|
||||
<Trash2 className="h-4 w-4" aria-hidden="true" />
|
||||
Delete setup
|
||||
</Button>
|
||||
</PanelHeader>
|
||||
<PanelBody>
|
||||
<DataTable>
|
||||
<DataTableHeader>
|
||||
<DataTableRow>
|
||||
<DataTableHead>Resource</DataTableHead>
|
||||
<DataTableHead>State</DataTableHead>
|
||||
<DataTableHead>Owner</DataTableHead>
|
||||
<DataTableHead>Impact</DataTableHead>
|
||||
</DataTableRow>
|
||||
</DataTableHeader>
|
||||
<DataTableBody>
|
||||
<DataTableRow>
|
||||
<DataTableCell className="font-semibold">BTC managed setup</DataTableCell>
|
||||
<DataTableCell>
|
||||
<StatusBadge tone="warning" dot>
|
||||
Armed
|
||||
</StatusBadge>
|
||||
</DataTableCell>
|
||||
<DataTableCell>Trading operations</DataTableCell>
|
||||
<DataTableCell>Open automation will be cancelled</DataTableCell>
|
||||
</DataTableRow>
|
||||
<DataTableRow>
|
||||
<DataTableCell className="font-semibold">Audit trail</DataTableCell>
|
||||
<DataTableCell>
|
||||
<StatusBadge tone="success" dot>
|
||||
Retained
|
||||
</StatusBadge>
|
||||
</DataTableCell>
|
||||
<DataTableCell>Platform</DataTableCell>
|
||||
<DataTableCell>Historical events remain available</DataTableCell>
|
||||
</DataTableRow>
|
||||
</DataTableBody>
|
||||
</DataTable>
|
||||
</PanelBody>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
),
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user