@usefragments/ui 1.0.2 → 1.2.0

package/src/components/Cloud/PullRequestsPrototypes.detail-panels.tsx

@@ -1,381 +0,0 @@
-import { Avatar } from "../Avatar";
-import { Badge } from "../Badge";
-import { Box } from "../Box";
-import { Button } from "../Button";
-import { Card } from "../Card";
-import { DataTable, type DataTableColumn } from "../DataTable";
-import { Select } from "../Select";
-import { Stack } from "../Stack";
-import { Text } from "../Text";
-import {
-  blockingFindings,
-  changedFiles,
-  introducedFindings,
-  prFindings,
-  prIdPagePullRequest as pr,
-  threadFindings,
-  type ChangedFile,
-  type PrFinding,
-} from "./PullRequestsPrototypes.id-data";
-import styles from "./DashboardLayoutPrototypes.module.scss";
-
-const legacyCount = prFindings.length - introducedFindings.length;
-
-function actionLabel(finding: PrFinding) {
-  if (finding.fix === "Deterministic") return "Create fix";
-  if (finding.severity === "Blocking") return "Request waiver";
-  return "Mark intentional";
-}
-
-// ============================================================================
-// Findings tab — the table-first workbench
-// ============================================================================
-
-const findingColumns: DataTableColumn<PrFinding>[] = [
-  {
-    id: "severity",
-    header: "Severity",
-    size: 104,
-    cell: (context) => {
-      const finding = context.row.original as PrFinding;
-      return (
-        <Badge variant={finding.variant} size="sm">
-          {finding.severity}
-        </Badge>
-      );
-    },
-  },
-  {
-    id: "finding",
-    header: "Finding",
-    minSize: 280,
-    cell: (context) => {
-      const finding = context.row.original as PrFinding;
-      return (
-        <Stack gap="none" className={styles.minWidthZero}>
-          <Text size="sm" weight="medium" truncate>
-            {finding.suggestion}
-          </Text>
-          <Text size="xs" color="tertiary" font="mono" truncate>
-            {finding.code} · {finding.file}:{finding.line}
-          </Text>
-        </Stack>
-      );
-    },
-  },
-  { accessorKey: "rule", header: "Rule", size: 150, truncate: true },
-  {
-    id: "occurrences",
-    header: "Sites",
-    size: 72,
-    align: "right",
-    cell: (context) => (
-      <Text size="xs" color="secondary" tabularNums>
-        ×{(context.row.original as PrFinding).occurrences}
-      </Text>
-    ),
-  },
-  {
-    id: "origin",
-    header: "Origin",
-    size: 104,
-    cell: (context) => {
-      const finding = context.row.original as PrFinding;
-      return (
-        <Text size="xs" color={finding.origin === "Introduced" ? "secondary" : "tertiary"}>
-          {finding.origin}
-        </Text>
-      );
-    },
-  },
-  {
-    id: "fix",
-    header: "Fix",
-    size: 116,
-    cell: (context) => (
-      <Text size="xs" color="tertiary">
-        {(context.row.original as PrFinding).fix}
-      </Text>
-    ),
-  },
-  {
-    id: "actions",
-    header: "",
-    size: 132,
-    align: "right",
-    cell: (context) => (
-      <Button variant="outlined" size="xs">
-        {actionLabel(context.row.original as PrFinding)}
-      </Button>
-    ),
-  },
-];
-
-export function FindingsPanel() {
-  return (
-    <Stack gap="sm">
-      <Box className={styles.prFindingsToolbar}>
-        <Select aria-label="Group findings" defaultValue="rule" size="sm">
-          <Select.Trigger />
-          <Select.Content>
-            <Select.Item value="rule">Group by rule</Select.Item>
-            <Select.Item value="area">Group by area</Select.Item>
-            <Select.Item value="severity">Group by severity</Select.Item>
-            <Select.Item value="file">Group by file</Select.Item>
-          </Select.Content>
-        </Select>
-        <Stack direction="row" gap="xs" align="center" wrap>
-          <Button variant="secondary" size="sm">
-            Create {pr.safeFixes} fixes
-          </Button>
-          <Button variant="ghost" size="sm">
-            Mark intentional
-          </Button>
-        </Stack>
-      </Box>
-      <Stack direction="row" gap="xs" wrap>
-        <Badge variant="dim" size="md" active>
-          All {prFindings.length}
-        </Badge>
-        <Badge variant="dim" size="md">
-          Blocking {blockingFindings.length}
-        </Badge>
-        <Badge variant="dim" size="md">
-          Safe fixes {pr.safeFixes}
-        </Badge>
-        <Badge variant="dim" size="md">
-          Introduced {introducedFindings.length}
-        </Badge>
-        <Badge variant="dim" size="md">
-          Legacy {legacyCount}
-        </Badge>
-      </Stack>
-      <DataTable
-        columns={findingColumns}
-        data={prFindings}
-        getRowId={(row) => row.id}
-        selectable
-        showCheckbox
-        density="condensed"
-        bordered
-        caption="Pull request findings"
-        captionHidden
-        wrapperClassName={styles.prTable}
-      />
-      <Text size="xs" color="tertiary">
-        {prFindings.length} findings · {introducedFindings.length} introduced gate this PR ·{" "}
-        {legacyCount} legacy shown for context
-      </Text>
-    </Stack>
-  );
-}
-
-// ============================================================================
-// Conversation tab — the human-readable timeline on canonical Avatar + Card
-// ============================================================================
-
-export function ConversationPanel() {
-  return (
-    <Stack gap="md" className={styles.prIdTimeline}>
-      <TimelineItem author={pr.author} meta="opened this pull request" avatarName={pr.author}>
-        <Stack gap="sm">
-          <Text size="sm">
-            Refreshes the public launch cards for the June campaign. The branch changes hero CTA
-            behavior, form danger states, and campaign-card spacing.
-          </Text>
-          <Box className={styles.prIdPrBodyTable}>
-            <SummaryRow label="Area" value="Marketing / public launch" />
-            <SummaryRow label="Designer" value="Growth design" />
-            <SummaryRow label="Fragments gate" value="Blocked by contract" />
-          </Box>
-        </Stack>
-      </TimelineItem>
-
-      <TimelineItem
-        author="fragments[bot]"
-        meta="summarized the governance report"
-        avatarName="Fragments bot"
-      >
-        <Stack gap="xs">
-          <Text size="sm" weight="semibold">
-            Fragments governance report
-          </Text>
-          <Text size="sm" color="secondary">
-            {blockingFindings.length} blocking and {pr.safeFixes} safe-fix findings on a public
-            marketing flow. Merge stays blocked until the blocking contract comments resolve — see
-            Impacted areas for the area rollup.
-          </Text>
-        </Stack>
-      </TimelineItem>
-
-      {threadFindings.map((finding) => (
-        <ReviewThread key={finding.id} finding={finding} />
-      ))}
-
-      <TimelineItem author="Noah Lee" meta="Growth design" avatarName="Noah Lee">
-        <Text size="sm" color="secondary">
-          I can approve the visual direction once the Button replacement and semantic danger token
-          land. The spacing rhythm can be an intentional campaign exception.
-        </Text>
-      </TimelineItem>
-    </Stack>
-  );
-}
-
-function TimelineItem({
-  author,
-  meta,
-  avatarName,
-  children,
-}: {
-  author: string;
-  meta: string;
-  avatarName: string;
-  children: React.ReactNode;
-}) {
-  return (
-    <Box className={styles.prIdTimelineItem}>
-      <Avatar name={avatarName} size="md" />
-      <Card variant="panel" padding="none">
-        <Card.Header divided>
-          <Stack
-            direction="row"
-            gap="sm"
-            align="baseline"
-            justify="between"
-            className={styles.full}
-          >
-            <Text size="sm" weight="semibold">
-              {author}
-            </Text>
-            <Text size="xs" color="tertiary">
-              {meta}
-            </Text>
-          </Stack>
-        </Card.Header>
-        <Card.Body padding="md">{children}</Card.Body>
-      </Card>
-    </Box>
-  );
-}
-
-function ReviewThread({ finding }: { finding: PrFinding }) {
-  return (
-    <Box className={styles.prIdTimelineItem}>
-      <Avatar name="Fragments bot" size="md" />
-      <Card variant="panel" padding="none">
-        <Card.Header divided>
-          <Stack direction="row" gap="sm" align="center" justify="between" className={styles.full}>
-            <Text size="xs" color="secondary" font="mono" truncate>
-              {finding.file}:{finding.line}
-            </Text>
-            <Badge variant={finding.variant} size="sm">
-              {finding.severity}
-            </Badge>
-          </Stack>
-        </Card.Header>
-        <Card.Body padding="md">
-          <Stack gap="sm">
-            <Text size="sm" color="secondary">
-              {finding.body}
-            </Text>
-            {finding.designerSignal ? (
-              <Text size="xs" color="tertiary">
-                Designer signal: {finding.designerSignal}
-              </Text>
-            ) : null}
-            <Stack direction="row" gap="sm" wrap>
-              {finding.fix === "Deterministic" ? (
-                <Button variant="outlined" size="xs">
-                  Create fix
-                </Button>
-              ) : null}
-              <Button variant="ghost" size="xs">
-                {finding.severity === "Blocking" ? "Request waiver" : "Mark intentional"}
-              </Button>
-            </Stack>
-          </Stack>
-        </Card.Body>
-      </Card>
-    </Box>
-  );
-}
-
-function SummaryRow({ label, value }: { label: string; value: string }) {
-  return (
-    <Box className={styles.prIdSummaryRow}>
-      <Text size="xs" color="tertiary">
-        {label}
-      </Text>
-      <Text size="xs" color="secondary">
-        {value}
-      </Text>
-    </Box>
-  );
-}
-
-// ============================================================================
-// Changed files tab
-// ============================================================================
-
-const changedFileColumns: DataTableColumn<ChangedFile>[] = [
-  {
-    accessorKey: "path",
-    header: "File",
-    minSize: 320,
-    truncate: true,
-    cell: (context) => (
-      <Text size="xs" font="mono" truncate>
-        {(context.row.original as ChangedFile).path}
-      </Text>
-    ),
-  },
-  { accessorKey: "area", header: "Area", size: 120, truncate: true },
-  {
-    id: "delta",
-    header: "Changes",
-    size: 120,
-    align: "right",
-    cell: (context) => {
-      const file = context.row.original as ChangedFile;
-      return (
-        <Text size="xs" color="secondary" tabularNums>
-          +{file.additions} -{file.deletions}
-        </Text>
-      );
-    },
-  },
-  {
-    id: "findings",
-    header: "Findings",
-    size: 96,
-    align: "right",
-    cell: (context) => {
-      const file = context.row.original as ChangedFile;
-      return file.findings > 0 ? (
-        <Badge variant="warning" size="sm">
-          {file.findings}
-        </Badge>
-      ) : (
-        <Text size="xs" color="tertiary">
-          0
-        </Text>
-      );
-    },
-  },
-];
-
-export function ChangedFilesPanel() {
-  return (
-    <DataTable
-      columns={changedFileColumns}
-      data={changedFiles}
-      getRowId={(row) => row.path}
-      density="condensed"
-      bordered
-      caption="Changed files"
-      captionHidden
-      wrapperClassName={styles.prTable}
-    />
-  );
-}

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

@@ -1,204 +0,0 @@
-import { CheckCircle, GithubLogo, Warning, Wrench, XCircle } from "@phosphor-icons/react";
-import { Alert } from "../Alert";
-import { Box } from "../Box";
-import { Button } from "../Button";
-import { Card } from "../Card";
-import { Stack } from "../Stack";
-import { Tabs } from "../Tabs";
-import { Text } from "../Text";
-import {
-  ChangedFilesPanel,
-  ConversationPanel,
-  FindingsPanel,
-} from "./PullRequestsPrototypes.detail-panels";
-import {
-  blockingFindings,
-  changedFiles,
-  githubChecks,
-  impactAreas,
-  prFindings,
-  prIdPagePullRequest as pr,
-  reviewers,
-  threadFindings,
-  type GithubCheck,
-} from "./PullRequestsPrototypes.id-data";
-import styles from "./DashboardLayoutPrototypes.module.scss";
-
-const coverageDelta = pr.coverageAfter - pr.coverageBefore;
-// PR opened + governance report + designer reply wrap the inline review threads.
-const conversationCount = threadFindings.length + 3;
-
-// Gate-aware decision actions live in the shell header so the page title is the
-// real PR title — no second header, no generic "Pull Request" h1 above it.
-export function PullRequestDecisionActions() {
-  return (
-    <Stack direction="row" align="center" gap="sm" wrap>
-      <Button variant="primary" size="sm">
-        <Wrench size={14} weight="fill" />
-        Create fix PR
-      </Button>
-      <Button variant="outlined" size="sm">
-        Request changes
-      </Button>
-      <Button
-        as="a"
-        href="https://github.com/fragments-sdk/fragments/pull/248"
-        target="_blank"
-        rel="noopener noreferrer"
-        variant="outlined"
-        size="sm"
-      >
-        <GithubLogo size={14} weight="fill" />
-        GitHub
-      </Button>
-    </Stack>
-  );
-}
-
-export function PullRequestDetail() {
-  return (
-    <Stack gap="md">
-      <GateBanner />
-      <Box className={styles.prIdGithubLayout}>
-        <Box className={styles.minWidthZero}>
-          <Tabs defaultValue="findings" variant="pills">
-            <Tabs.List>
-              <Tabs.Tab value="findings">Findings {prFindings.length}</Tabs.Tab>
-              <Tabs.Tab value="conversation">Conversation {conversationCount}</Tabs.Tab>
-              <Tabs.Tab value="files">Changed files {changedFiles.length}</Tabs.Tab>
-            </Tabs.List>
-            <Tabs.Panel value="findings" flush>
-              <FindingsPanel />
-            </Tabs.Panel>
-            <Tabs.Panel value="conversation" flush>
-              <ConversationPanel />
-            </Tabs.Panel>
-            <Tabs.Panel value="files" flush>
-              <ChangedFilesPanel />
-            </Tabs.Panel>
-          </Tabs>
-        </Box>
-        <DetailRail />
-      </Box>
-    </Stack>
-  );
-}
-
-function GateBanner() {
-  return (
-    <Alert severity="error">
-      <Alert.Icon />
-      <Alert.Body>
-        <Alert.Title>Merge blocked · fragments/contract-compliance</Alert.Title>
-        <Alert.Content>
-          {blockingFindings.length} blocking design-contract comments must be resolved before this
-          PR can merge. Marketing contract coverage fell {pr.coverageBefore}% to {pr.coverageAfter}%
-          ({coverageDelta} points), and {pr.safeFixes} of {prFindings.length} findings have
-          deterministic fixes.
-        </Alert.Content>
-      </Alert.Body>
-    </Alert>
-  );
-}
-
-// ============================================================================
-// Sidebar status rail — every status fact has exactly one home here
-// ============================================================================
-
-function DetailRail() {
-  return (
-    <aside className={styles.prDetailRail} aria-label="Pull request status">
-      <RailCard title="Merge gate">
-        <Stack gap="sm">
-          {githubChecks.map((check) => (
-            <CheckRow key={check.name} check={check} />
-          ))}
-        </Stack>
-      </RailCard>
-      <RailCard title="Coverage">
-        <Stack gap="xs">
-          <RailRow label="Marketing coverage" value={`${pr.coverageAfter}%`} />
-          <RailRow label="Coverage delta" value={`${coverageDelta} points`} variant="error" />
-          <RailRow label="Safe fixes" value={String(pr.safeFixes)} />
-        </Stack>
-      </RailCard>
-      <RailCard title="Impacted areas">
-        <Stack gap="xs">
-          {impactAreas.map((area) => (
-            <RailRow key={area.area} label={area.area} value={area.review} variant={area.variant} />
-          ))}
-        </Stack>
-      </RailCard>
-      <RailCard title="Reviewers">
-        <Stack gap="xs">
-          {reviewers.map((reviewer) => (
-            <RailRow
-              key={reviewer.name}
-              label={reviewer.name}
-              value={reviewer.status}
-              variant={reviewer.variant}
-            />
-          ))}
-        </Stack>
-      </RailCard>
-    </aside>
-  );
-}
-
-function RailCard({ title, children }: { title: string; children: React.ReactNode }) {
-  return (
-    <Card variant="panel" padding="none">
-      <Card.Header divided>
-        <Card.Title>{title}</Card.Title>
-      </Card.Header>
-      <Card.Body padding="md">{children}</Card.Body>
-    </Card>
-  );
-}
-
-function RailRow({
-  label,
-  value,
-  variant,
-}: {
-  label: string;
-  value: string;
-  variant?: GithubCheck["variant"];
-}) {
-  return (
-    <Box className={styles.prIdSidebarRow} data-variant={variant}>
-      <Text size="xs" color="tertiary">
-        {label}
-      </Text>
-      <Text size="xs" color="secondary">
-        {value}
-      </Text>
-    </Box>
-  );
-}
-
-function CheckRow({ check }: { check: GithubCheck }) {
-  const Icon =
-    check.state === "passed" ? CheckCircle : check.state === "failed" ? XCircle : Warning;
-
-  return (
-    <Box className={styles.prIdCheckSummary}>
-      <span className={styles.prIdCheckIcon} data-state={check.state} aria-hidden>
-        <Icon size={14} weight="fill" />
-      </span>
-      <Stack gap="none" className={styles.minWidthZero}>
-        <Stack direction="row" gap="sm" align="baseline" justify="between" className={styles.full}>
-          <Text size="xs" weight="medium" truncate>
-            {check.name}
-          </Text>
-          <Text size="2xs" color="tertiary">
-            {check.label}
-          </Text>
-        </Stack>
-        <Text size="xs" color="tertiary" truncate>
-          {check.summary}
-        </Text>
-      </Stack>
-    </Box>
-  );
-}