@usefragments/ui 1.0.0

package/src/components/Cloud/DashboardLayoutPrototypes.stories.tsx

@@ -0,0 +1,328 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { ReactNode } from "react";
+import { Box } from "../Box";
+import { Card } from "../Card";
+import { Grid } from "../Grid";
+import { Link } from "../Link";
+import { Progress } from "../Progress";
+import { Stack } from "../Stack";
+import { Tabs } from "../Tabs";
+import { Text } from "../Text";
+import {
+  ActionPanel,
+  ActivityPanel,
+  ActivityTable,
+  AreasTable,
+  CoverageHero,
+  FindingsToolbar,
+  MetricPanel,
+  PrototypeShell,
+  StatePanel,
+  areas,
+} from "./DashboardLayoutPrototypes.shared";
+import styles from "./DashboardLayoutPrototypes.module.scss";
+
+const meta = {
+  title: "Cloud/Prototypes/Dashboard",
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        component:
+          "Cloud dashboard layout prototypes for comparing governance-first product information architecture.",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+type AreaName = (typeof areas)[number]["area"];
+
+const driftSeries = {
+  Checkout: [4, 3, 5, 3, 2, 3, 2, 2],
+  Dashboard: [2, 4, 3, 5, 6, 4, 5, 4],
+  Marketing: [5, 7, 8, 11, 9, 13, 12, 11],
+  Admin: [3, 2, 2, 1, 2, 1, 1, 1],
+} satisfies Record<AreaName, number[]>;
+
+function buildAreaPath(values: number[]) {
+  const width = 240;
+  const height = 72;
+  const max = Math.max(...values, 1);
+  const points = values.map((value, index) => {
+    const x = (index / (values.length - 1)) * width;
+    const y = height - (value / max) * (height - 10) - 5;
+    return [x, y] as const;
+  });
+  const line = points.map(([x, y], index) => `${index === 0 ? "M" : "L"} ${x} ${y}`).join(" ");
+  const fill = `${line} L ${width} ${height} L 0 ${height} Z`;
+  return { line, fill };
+}
+
+function DashboardSection({ title, children }: { title: string; children: ReactNode }) {
+  return (
+    <Stack as="section" gap="sm">
+      <Stack direction="row" justify="between" align="center" gap="md" wrap>
+        <Text as="h2" size="sm" weight="semibold">
+          {title}
+        </Text>
+        <Text size="sm" weight="medium">
+          <Link href="#" variant="muted" underline="none">
+            View more
+          </Link>
+        </Text>
+      </Stack>
+      {children}
+    </Stack>
+  );
+}
+
+function AreaDriftCard({ area }: { area: (typeof areas)[number] }) {
+  const values = driftSeries[area.area];
+  const latest = values.at(-1) ?? 0;
+  const first = values[0] ?? latest;
+  const trendDelta = latest - first;
+  const trend = trendDelta > 0 ? "up" : trendDelta < 0 ? "down" : "flat";
+  const chart = buildAreaPath(values);
+  const gradientId = `drift-${area.area.toLowerCase()}`;
+
+  return (
+    <Card variant="panel" padding="none" className={styles.areaDriftCard}>
+      <Card.Body padding="none">
+        <Stack gap="none">
+          <Stack
+            direction="row"
+            justify="between"
+            align="start"
+            gap="md"
+            className={styles.areaDriftSummary}
+          >
+            <Stack gap="xs" className={styles.minWidthZero}>
+              <Text size="xs" color="tertiary">
+                {area.owner}
+              </Text>
+              <Text size="sm" weight="semibold" tabularNums>
+                {latest} open drift
+              </Text>
+            </Stack>
+            <Text
+              size="xs"
+              color="secondary"
+              className={styles.areaDelta}
+              data-trend={trend}
+              tabularNums
+            >
+              {trendDelta > 0 ? "+" : ""}
+              {trendDelta} trend
+            </Text>
+          </Stack>
+          <Box className={styles.chartWrap}>
+            <svg
+              className={styles.driftChart}
+              data-trend={trend}
+              viewBox="0 0 240 72"
+              preserveAspectRatio="none"
+              role="img"
+              aria-label={`${area.area} drift over time`}
+            >
+              <title>{area.area} drift over time</title>
+              <defs>
+                <linearGradient id={gradientId} x1="0" x2="0" y1="0" y2="1">
+                  <stop offset="0%" stopColor="currentColor" stopOpacity="0.34" />
+                  <stop offset="100%" stopColor="currentColor" stopOpacity="0.03" />
+                </linearGradient>
+              </defs>
+              <path d={chart.fill} fill={`url(#${gradientId})`} />
+              <path d={chart.line} fill="none" stroke="currentColor" strokeWidth="3" />
+            </svg>
+          </Box>
+        </Stack>
+      </Card.Body>
+    </Card>
+  );
+}
+
+function AreaDriftCards() {
+  return (
+    <Grid columns="auto" minChildWidth="240px" gap="md">
+      {areas.map((area) => (
+        <AreaDriftCard key={area.area} area={area} />
+      ))}
+    </Grid>
+  );
+}
+
+function BudgetPanel() {
+  return (
+    <Card variant="panel" padding="none">
+      <Card.Header divided>
+        <Card.Title>Area drift budgets</Card.Title>
+      </Card.Header>
+      <Card.Body padding="md">
+        <Stack gap="md">
+          {areas.map((area) => (
+            <Stack key={area.area} gap="xs">
+              <Stack direction="row" justify="between" align="center" gap="md">
+                <Text size="sm" weight="medium">
+                  {area.area}
+                </Text>
+                <Text size="xs" color="secondary">
+                  {area.drift} open
+                </Text>
+              </Stack>
+              <Progress
+                value={Math.min(area.drift * 8, 100)}
+                variant={area.variant === "error" ? "danger" : area.variant}
+                size="sm"
+                aria-label={`${area.area} drift budget`}
+              />
+            </Stack>
+          ))}
+        </Stack>
+      </Card.Body>
+    </Card>
+  );
+}
+
+function InventoryPanel() {
+  return (
+    <Card variant="panel" padding="none">
+      <Card.Header divided>
+        <Card.Title>Inventory health</Card.Title>
+      </Card.Header>
+      <Card.Body padding="md">
+        <Grid columns={{ base: 1, md: 2 }} gap="md">
+          <MetricPanel label="Tracked components" value="128" progress={88} />
+          <MetricPanel label="Tracked tokens" value="312" progress={94} />
+        </Grid>
+      </Card.Body>
+    </Card>
+  );
+}
+
+function TabbedFindings() {
+  return (
+    <Stack gap="sm" className={styles.minWidthZero}>
+      <Tabs defaultValue="findings" variant="pills">
+        <Tabs.List>
+          <Tabs.Tab value="findings">Findings</Tabs.Tab>
+          <Tabs.Tab value="prs">Pull requests</Tabs.Tab>
+          <Tabs.Tab value="agents">Agents</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value="findings" flush>
+          <AreasTable title="Governance findings by area" />
+        </Tabs.Panel>
+        <Tabs.Panel value="prs" flush>
+          <AreasTable title="Pull requests with drift" />
+        </Tabs.Panel>
+        <Tabs.Panel value="agents" flush>
+          <AreasTable title="AI-generated code compliance" />
+        </Tabs.Panel>
+      </Tabs>
+    </Stack>
+  );
+}
+
+export const Layout1ExecutiveOverview: Story = {
+  name: "Layout 1 · Executive overview",
+  render: () => (
+    <PrototypeShell title="Dashboard">
+      <Box className={styles.heroActionGrid}>
+        <CoverageHero className={styles.stretchCard} />
+        <ActionPanel className={styles.stretchCard} />
+      </Box>
+      <DashboardSection title="Codebase by area">
+        <AreaDriftCards />
+      </DashboardSection>
+      <DashboardSection title="Recent governance activity">
+        <ActivityTable />
+      </DashboardSection>
+    </PrototypeShell>
+  ),
+};
+
+export const Layout2OperationsCommandCenter: Story = {
+  name: "Layout 2 · Operations command center",
+  render: () => (
+    <PrototypeShell eyebrow="Layout 2" title="Operations command center">
+      <ActionPanel />
+      <Grid columns="auto" minChildWidth="220px" gap="md">
+        <MetricPanel label="Contract coverage" value="82%" progress={82} variant="success" />
+        <MetricPanel label="New drift" value="24" progress={48} variant="warning" />
+        <MetricPanel label="Blocked PRs" value="4" progress={16} variant="danger" />
+        <MetricPanel label="Exceptions" value="9" progress={36} variant="warning" />
+      </Grid>
+      <Box className={styles.twoColumn}>
+        <Stack gap="md" className={styles.minWidthZero}>
+          <FindingsToolbar />
+          <TabbedFindings />
+        </Stack>
+        <Stack gap="md">
+          <BudgetPanel />
+          <StatePanel />
+        </Stack>
+      </Box>
+    </PrototypeShell>
+  ),
+};
+
+export const Layout3AreaFirst: Story = {
+  name: "Layout 3 · Area first",
+  render: () => (
+    <PrototypeShell eyebrow="Layout 3" title="Area-first dashboard">
+      <Grid columns="auto" minChildWidth="220px" gap="md">
+        <MetricPanel label="Overall coverage" value="82%" progress={82} variant="success" />
+        <MetricPanel label="Worst area" value="68%" progress={68} variant="warning" />
+        <MetricPanel label="New drift" value="24" progress={48} variant="warning" />
+        <MetricPanel label="Owners needed" value="2" progress={20} variant="danger" />
+      </Grid>
+      <AreasTable title="Areas ranked by governance risk" />
+      <Box className={styles.twoColumn}>
+        <Card variant="panel" padding="none">
+          <Card.Header divided>
+            <Card.Title>Marketing area detail</Card.Title>
+          </Card.Header>
+          <Card.Body padding="md">
+            <Stack gap="md">
+              <Text size="sm" color="secondary">
+                Public surfaces have low coverage, rising exception debt, and repeated color
+                substitutions from generated code.
+              </Text>
+              <Progress value={68} variant="warning" aria-label="Marketing coverage" />
+            </Stack>
+          </Card.Body>
+        </Card>
+        <ActionPanel />
+      </Box>
+      <ActivityPanel />
+    </PrototypeShell>
+  ),
+};
+
+export const Layout4SplitGovernanceInventory: Story = {
+  name: "Layout 4 · Governance and inventory",
+  render: () => (
+    <PrototypeShell eyebrow="Layout 4" title="Governance and inventory">
+      <CoverageHero />
+      <Grid columns="auto" minChildWidth="220px" gap="md">
+        <MetricPanel label="Open findings" value="24" progress={48} variant="warning" />
+        <MetricPanel label="Blocked releases" value="1" progress={10} variant="danger" />
+        <MetricPanel label="Tracked components" value="128" progress={88} />
+        <MetricPanel label="Tracked tokens" value="312" progress={94} />
+      </Grid>
+      <Box className={styles.twoColumn}>
+        <Stack gap="md" className={styles.minWidthZero}>
+          <AreasTable title="Governance risk" />
+          <ActivityPanel />
+        </Stack>
+        <Stack gap="md">
+          <InventoryPanel />
+          <BudgetPanel />
+        </Stack>
+      </Box>
+    </PrototypeShell>
+  ),
+};

package/src/components/Cloud/PullRequestsPrototypes.content.tsx

@@ -0,0 +1,283 @@
+import { GithubLogo, MagnifyingGlass } from "@phosphor-icons/react";
+import { Badge } from "../Badge";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { DataTable, type DataTableColumn } from "../DataTable";
+import { Input } from "../Input";
+import { Pagination } from "../Pagination";
+import { Select } from "../Select";
+import { Stack } from "../Stack";
+import { Text } from "../Text";
+import type { StateVariant } from "./DashboardLayoutPrototypes.shared";
+import styles from "./DashboardLayoutPrototypes.module.scss";
+
+type GateState = "Blocked" | "Review" | "Ready";
+
+type PullRequest = {
+  number: number;
+  title: string;
+  author: string;
+  branch: string;
+  area: string;
+  coverageDelta: string;
+  findings: number;
+  blocking: number;
+  safeFixes: number;
+  comments: number;
+  updated: string;
+  gate: GateState;
+  variant: StateVariant;
+};
+
+const pullRequests: PullRequest[] = [
+  {
+    number: 248,
+    title: "Refresh marketing campaign cards",
+    author: "Maya Chen",
+    branch: "feat/launch-pages",
+    area: "Marketing",
+    coverageDelta: "-7%",
+    findings: 11,
+    blocking: 3,
+    safeFixes: 5,
+    comments: 8,
+    updated: "12m ago",
+    gate: "Blocked",
+    variant: "error",
+  },
+  {
+    number: 246,
+    title: "Checkout discount banner",
+    author: "Jon Bell",
+    branch: "feat/discount-banner",
+    area: "Checkout",
+    coverageDelta: "-1%",
+    findings: 2,
+    blocking: 0,
+    safeFixes: 2,
+    comments: 2,
+    updated: "24m ago",
+    gate: "Review",
+    variant: "warning",
+  },
+  {
+    number: 241,
+    title: "Settings billing cleanup",
+    author: "Priya Shah",
+    branch: "fix/billing-states",
+    area: "Admin",
+    coverageDelta: "+2%",
+    findings: 1,
+    blocking: 0,
+    safeFixes: 1,
+    comments: 1,
+    updated: "1h ago",
+    gate: "Ready",
+    variant: "success",
+  },
+  {
+    number: 239,
+    title: "Dashboard topology rollup",
+    author: "Alex Kim",
+    branch: "feat/topology-rollup",
+    area: "Dashboard",
+    coverageDelta: "+4%",
+    findings: 4,
+    blocking: 0,
+    safeFixes: 3,
+    comments: 3,
+    updated: "2h ago",
+    gate: "Review",
+    variant: "info",
+  },
+  {
+    number: 237,
+    title: "Refactor onboarding form states",
+    author: "Sam Reed",
+    branch: "chore/onboarding-fields",
+    area: "Dashboard",
+    coverageDelta: "0%",
+    findings: 0,
+    blocking: 0,
+    safeFixes: 0,
+    comments: 0,
+    updated: "3h ago",
+    gate: "Ready",
+    variant: "success",
+  },
+];
+
+const prColumns: DataTableColumn<PullRequest>[] = [
+  {
+    id: "pull-request",
+    header: "Pull request",
+    minSize: 320,
+    cell: (context) => {
+      const row = context.row.original as PullRequest;
+      return (
+        <Stack gap="none" className={styles.minWidthZero}>
+          <Text size="sm" weight="semibold" truncate>
+            {row.title}
+          </Text>
+          <Text size="xs" color="tertiary" truncate>
+            #{row.number} · {row.branch} · {row.author}
+          </Text>
+        </Stack>
+      );
+    },
+  },
+  { accessorKey: "area", header: "Area", size: 128, truncate: true },
+  { accessorKey: "coverageDelta", header: "Delta", size: 88, align: "right" },
+  { accessorKey: "findings", header: "Findings", size: 88, align: "right" },
+  { accessorKey: "comments", header: "Comments", size: 96, align: "right" },
+  {
+    accessorKey: "gate",
+    header: "Gate",
+    size: 104,
+    cell: (context) => {
+      const row = context.row.original as PullRequest;
+      return (
+        <Badge variant={row.variant} size="sm">
+          {row.gate}
+        </Badge>
+      );
+    },
+  },
+  { accessorKey: "updated", header: "Updated", size: 96, align: "right" },
+  {
+    id: "actions",
+    header: "Actions",
+    size: 96,
+    align: "right",
+    cell: (context) => {
+      const row = context.row.original as PullRequest;
+      return (
+        <Box className={styles.prRowActions}>
+          <Button
+            as="a"
+            href={`https://github.com/fragments-sdk/fragments/pull/${row.number}`}
+            target="_blank"
+            rel="noopener noreferrer"
+            variant="outlined"
+            size="xs"
+            icon
+            aria-label={`View pull request ${row.number} on GitHub`}
+          >
+            <GithubLogo size={14} weight="fill" />
+          </Button>
+          <Button
+            as="a"
+            href={`/pull-requests/${row.number}`}
+            variant="secondary"
+            size="xs"
+            aria-label={`Open pull request ${row.number} in Fragments`}
+          >
+            Open
+          </Button>
+        </Box>
+      );
+    },
+  },
+];
+
+export function PrototypeActions() {
+  return (
+    <Stack direction="row" align="center" gap="sm" wrap>
+      <Button variant="secondary" size="sm">
+        Learn more
+      </Button>
+    </Stack>
+  );
+}
+
+function PullRequestFilters() {
+  return (
+    <Stack gap="sm">
+      <Box className={styles.prToolbar}>
+        <Input
+          aria-label="Search pull requests"
+          placeholder="Search pull requests..."
+          size="sm"
+          startAdornment={<MagnifyingGlass size={16} />}
+          shortcut="⌘K"
+          withFieldWrapper={false}
+        />
+        <Select aria-label="Gate" defaultValue="open" size="sm">
+          <Select.Trigger />
+          <Select.Content>
+            <Select.Item value="open">Open PRs</Select.Item>
+            <Select.Item value="blocked">Blocked</Select.Item>
+            <Select.Item value="ready">Ready</Select.Item>
+          </Select.Content>
+        </Select>
+        <Select aria-label="Area" defaultValue="all" size="sm">
+          <Select.Trigger />
+          <Select.Content>
+            <Select.Item value="all">All areas</Select.Item>
+            <Select.Item value="marketing">Marketing</Select.Item>
+            <Select.Item value="checkout">Checkout</Select.Item>
+            <Select.Item value="dashboard">Dashboard</Select.Item>
+          </Select.Content>
+        </Select>
+        <Select aria-label="Review status" defaultValue="all" size="sm">
+          <Select.Trigger />
+          <Select.Content>
+            <Select.Item value="all">All reviews</Select.Item>
+            <Select.Item value="comments">Has comments</Select.Item>
+            <Select.Item value="safe-fixes">Safe fixes</Select.Item>
+          </Select.Content>
+        </Select>
+      </Box>
+      <Stack direction="row" gap="xs" wrap>
+        <Badge variant="dim" size="md" active>
+          Open
+        </Badge>
+        <Badge variant="dim" size="md">
+          Blocking
+        </Badge>
+        <Badge variant="dim" size="md">
+          Needs designer
+        </Badge>
+        <Badge variant="dim" size="md">
+          Safe fixes
+        </Badge>
+      </Stack>
+    </Stack>
+  );
+}
+
+function PullRequestTable({ density = "condensed" }: { density?: "condensed" | "regular" }) {
+  return (
+    <Stack gap="sm">
+      <DataTable
+        columns={prColumns}
+        data={pullRequests}
+        getRowId={(row) => String(row.number)}
+        density={density}
+        bordered
+        caption="Pull requests"
+        captionHidden
+        wrapperClassName={styles.prTable}
+      />
+      <Stack direction="row" justify="between" align="center" gap="md" wrap>
+        <Text size="xs" color="tertiary">
+          Showing 5 of 28 pull requests
+        </Text>
+        <Pagination totalPages={6} defaultPage={1} aria-label="Pull request pages">
+          <Pagination.Previous />
+          <Pagination.Items />
+          <Pagination.Next />
+        </Pagination>
+      </Stack>
+    </Stack>
+  );
+}
+
+export function PullRequestInbox({ density = "condensed" }: { density?: "condensed" | "regular" }) {
+  return (
+    <Stack gap="md">
+      <PullRequestFilters />
+      <PullRequestTable density={density} />
+    </Stack>
+  );
+}