import type { Meta, StoryObj } from "openstory/solid"; import { For } from "solid-js"; import "react-grab"; interface MetricCardData { id: string; label: string; value: string; trend: string; trendDirection: "up" | "down"; } interface RowData { id: string; name: string; email: string; status: "active" | "invited" | "disabled"; role: string; lastActive: string; } const METRIC_CARDS: ReadonlyArray = [ { id: "mrr", label: "Monthly Recurring Revenue", value: "$42,180", trend: "+12.4%", trendDirection: "up", }, { id: "users", label: "Active Users", value: "3,847", trend: "+8.1%", trendDirection: "up", }, { id: "churn", label: "Churn Rate", value: "2.3%", trend: "-0.4pp", trendDirection: "down", }, { id: "nps", label: "NPS", value: "62", trend: "+3", trendDirection: "up", }, ]; const TABLE_ROWS: ReadonlyArray = [ { id: "1", name: "Alex Johnson", email: "alex@acme.co", status: "active", role: "Admin", lastActive: "2 min ago", }, { id: "2", name: "Jordan Kim", email: "jordan@acme.co", status: "active", role: "Editor", lastActive: "14 min ago", }, { id: "3", name: "Sam Rivera", email: "sam@acme.co", status: "invited", role: "Viewer", lastActive: "—", }, { id: "4", name: "Riley Chen", email: "riley@acme.co", status: "active", role: "Editor", lastActive: "1 hr ago", }, { id: "5", name: "Taylor Brooks", email: "taylor@acme.co", status: "disabled", role: "Viewer", lastActive: "3 days ago", }, ]; const BARS: ReadonlyArray = [32, 48, 24, 68, 52, 74, 40, 82, 60, 44, 90, 56]; const statusStyles: Record = { active: { background: "#e6f6ea", color: "#1b7a3a" }, invited: { background: "#fff4d6", color: "#8a6200" }, disabled: { background: "#f1f1f1", color: "#6b6b6b" }, }; const SidebarLink = (props: { label: string; active?: boolean; component: string }) => ( {props.label} ); const MetricCard = (props: { card: MetricCardData }) => (

{props.card.label}

{props.card.value}

{props.card.trend}

); const BarChart = () => (

Signups (last 12 weeks)

Weekly

{(height, index) => (

)}

); const UsersTable = () => (

Team members

{(row) => ( )}

Name	Role	Status	Last active
{row.name} {row.email}	{row.role}	{row.status}	{row.lastActive}

); const Dashboard = () => (

Overview

{(card) => }

); const meta: Meta = { title: "Playground/Composite Dashboard", parameters: { layout: "fullscreen", docs: { description: { component: "Realistic dense dashboard DOM for ad-hoc hover/grab exercise. Replaces the gym dashboard. Press Alt (default activation) and hover around to test overlay behavior across sidebar, nav, metric cards, chart bars, and table rows.", }, }, }, render: () => , }; export default meta; type Story = StoryObj; export const Default: Story = {};