@usefragments/ui 1.0.0

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

@@ -0,0 +1,238 @@
+import type { ReactNode } from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Gear, MagnifyingGlass } from "@phosphor-icons/react";
+import { Box } from "../Box";
+import { Button } from "../Button";
+import { Card } from "../Card";
+import { ColorPicker } from "../ColorPicker";
+import { Combobox } from "../Combobox";
+import { DatePicker } from "../DatePicker";
+import { Grid } from "../Grid";
+import { IconButton } from "../IconButton";
+import { Input } from "../Input";
+import { Select } from "../Select";
+import { Stack } from "../Stack";
+import { Tabs } from "../Tabs";
+import { Text } from "../Text";
+import { Textarea } from "../Textarea";
+import { ToggleGroup } from "../ToggleGroup";
+import styles from "./ControlSizing.module.scss";
+
+const meta = {
+  title: "Cloud/Control Sizing",
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        component:
+          "Cloud dogfood matrix for checking shared control heights across fields, buttons, pickers, tabs, and segmented controls.",
+      },
+    },
+  },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+type ControlSize = "sm" | "md" | "lg";
+
+const sizes = [
+  { size: "sm", expected: "32px" },
+  { size: "md", expected: "40px" },
+  { size: "lg", expected: "44px" },
+] as const satisfies Array<{ size: ControlSize; expected: string }>;
+
+const selectOptions = [
+  { value: "all", label: "All statuses" },
+  { value: "healthy", label: "Healthy" },
+  { value: "blocked", label: "Blocked" },
+];
+
+function Sample({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <Stack gap="xs" className={styles.sample}>
+      <Text size="xs" color="tertiary" weight="medium">
+        {label}
+      </Text>
+      {children}
+    </Stack>
+  );
+}
+
+function SizeRow({ size, expected }: { size: ControlSize; expected: string }) {
+  return (
+    <Stack
+      direction={{ base: "column", md: "row" }}
+      gap="lg"
+      align="start"
+      className={styles.sizeRow}
+      data-size-row={size}
+    >
+      <Stack gap="xs" className={styles.sizeMeta}>
+        <Text size="xs" color="tertiary" weight="medium">
+          {size.toUpperCase()}
+        </Text>
+        <Text size="xs" color="secondary" font="mono">
+          {expected}
+        </Text>
+      </Stack>
+
+      <Grid
+        columns="auto"
+        minChildWidth="220px"
+        gap="md"
+        alignItems="start"
+        className={styles.samples}
+      >
+        <Sample label="Input">
+          <Input
+            withFieldWrapper={false}
+            size={size}
+            placeholder="Search"
+            startAdornment={<MagnifyingGlass size={14} />}
+            rootProps={{ "data-control-size": size }}
+          />
+        </Sample>
+
+        <Sample label="Button">
+          <Button
+            className={styles.control}
+            size={size}
+            variant="secondary"
+            data-control-size={size}
+          >
+            Create PR
+          </Button>
+        </Sample>
+
+        <Sample label="IconButton">
+          <IconButton
+            className={styles.compactControl}
+            size={size}
+            variant="outlined"
+            aria-label="Settings"
+            data-control-size={size}
+          >
+            <Gear />
+          </IconButton>
+        </Sample>
+
+        <Sample label="Select">
+          <Select
+            className={styles.control}
+            size={size}
+            placeholder="Status"
+            options={selectOptions}
+          />
+        </Sample>
+
+        <Sample label="Combobox">
+          <Combobox className={styles.control} size={size} placeholder="Repository">
+            <Combobox.Input data-control-size={size} />
+            <Combobox.Content>
+              <Combobox.Item value="ui">fragments-sdk/ui</Combobox.Item>
+              <Combobox.Item value="cloud">fragments/cloud</Combobox.Item>
+            </Combobox.Content>
+          </Combobox>
+        </Sample>
+
+        <Sample label="DatePicker">
+          <DatePicker className={styles.control} size={size} placeholder="Last scanned">
+            <DatePicker.Trigger data-control-size={size} />
+            <DatePicker.Content>
+              <DatePicker.Calendar />
+            </DatePicker.Content>
+          </DatePicker>
+        </Sample>
+
+        <Sample label="ColorPicker">
+          <ColorPicker className={styles.control} size={size} value="#635bff" showInput />
+        </Sample>
+
+        <Sample label="Textarea">
+          <Textarea
+            className={styles.control}
+            size={size}
+            rows={1}
+            resize="none"
+            placeholder="Finding note"
+          />
+        </Sample>
+      </Grid>
+    </Stack>
+  );
+}
+
+function SharedControls() {
+  return (
+    <Grid
+      columns="auto"
+      minChildWidth="220px"
+      gap="md"
+      alignItems="start"
+      className={styles.samples}
+    >
+      <Sample label="Tabs">
+        <Box className={styles.tabsSlot} data-control-size="sm">
+          <Tabs defaultValue="findings" variant="pills">
+            <Tabs.List>
+              <Tabs.Tab value="findings">Findings</Tabs.Tab>
+              <Tabs.Tab value="activity">Activity</Tabs.Tab>
+            </Tabs.List>
+            <Tabs.Panel value="findings" flush />
+            <Tabs.Panel value="activity" flush />
+          </Tabs>
+        </Box>
+      </Sample>
+
+      <Sample label="ToggleGroup">
+        <ToggleGroup defaultValue="all" size="sm" data-control-size="sm">
+          <ToggleGroup.Item value="all">All</ToggleGroup.Item>
+          <ToggleGroup.Item value="open">Open</ToggleGroup.Item>
+          <ToggleGroup.Item value="closed">Closed</ToggleGroup.Item>
+        </ToggleGroup>
+      </Sample>
+    </Grid>
+  );
+}
+
+export const ControlSizing: Story = {
+  render: () => (
+    <Box className={styles.frame} padding="lg">
+      <Stack gap="lg" className={styles.content}>
+        <Stack gap="xs">
+          <Text as="h1" size="xl" weight="semibold">
+            Control sizing
+          </Text>
+          <Text color="secondary">
+            Small controls share a 32px floor. Default and large controls align field and action
+            heights through the same density scale.
+          </Text>
+        </Stack>
+
+        <Card className={styles.section}>
+          <Card.Body>
+            <Stack gap="lg">
+              {sizes.map((item) => (
+                <SizeRow key={item.size} size={item.size} expected={item.expected} />
+              ))}
+            </Stack>
+          </Card.Body>
+        </Card>
+
+        <Card className={styles.section}>
+          <Card.Header>
+            <Card.Title>Shared 32px controls</Card.Title>
+            <Card.Description>
+              Components without a full size scale still use the shared small-control rhythm.
+            </Card.Description>
+          </Card.Header>
+          <Card.Body>
+            <SharedControls />
+          </Card.Body>
+        </Card>
+      </Stack>
+    </Box>
+  ),
+};

package/src/components/Cloud/DashboardLayoutPrototypes.module.scss

@@ -0,0 +1,462 @@
+.frame {
+  position: fixed;
+  inset: 0;
+  overflow: hidden;
+  color: var(--fui-text-primary);
+  background: var(--fui-app-canvas-bg);
+}
+
+.shell {
+  height: 100%;
+  min-height: 0;
+}
+
+.main {
+  overflow: auto;
+}
+
+.page {
+  width: 100%;
+  max-width: 1400px;
+  margin-inline: auto;
+  padding: clamp(var(--fui-space-4), 3vw, var(--fui-space-6));
+}
+
+.heading {
+  min-width: min(100%, 360px);
+}
+
+.brandMark {
+  display: grid;
+  width: var(--fui-target-size-min);
+  height: var(--fui-target-size-min);
+  flex: 0 0 auto;
+  place-items: center;
+  color: var(--fui-text-primary);
+  background: var(--fui-bg-elevated);
+  border: 1px solid var(--fui-border-strong);
+  border-radius: var(--fui-radius-md);
+}
+
+.truncate,
+.minWidthZero {
+  min-width: 0;
+}
+
+.full {
+  width: 100%;
+}
+
+.heroActionGrid {
+  display: grid;
+  grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
+  gap: var(--fui-space-4);
+  align-items: stretch;
+}
+
+.stretchCard {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.stretchBody {
+  flex: 1;
+  min-height: 0;
+}
+
+.actionPanelBody {
+  display: flex;
+  flex: 1;
+}
+
+.actionPanelContent {
+  width: 100%;
+}
+
+.actionButton {
+  align-self: flex-start;
+}
+
+.coverageBody {
+  position: relative;
+  height: 100%;
+  min-height: 132px;
+  overflow: hidden;
+}
+
+.coverageChartWrap {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  background:
+    linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--fui-bg-elevated) 82%, transparent),
+      transparent
+    ),
+    var(--fui-bg-subtle);
+  color: var(--fui-color-success-text);
+  opacity: 0.74;
+  pointer-events: none;
+}
+
+.coverageSummary {
+  position: relative;
+  z-index: 1;
+  padding: var(--fui-space-2);
+}
+
+.coverageDelta {
+  color: var(--fui-color-success-text);
+}
+
+.coverageTrendChart {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.twoColumn {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
+  gap: var(--fui-space-4);
+  align-items: start;
+}
+
+.areaDriftCard {
+  min-width: 0;
+  overflow: hidden;
+}
+
+.areaDriftSummary {
+  padding: var(--fui-space-2);
+}
+
+.areaDelta[data-trend="up"] {
+  color: var(--fui-color-danger-text);
+}
+
+.areaDelta[data-trend="down"] {
+  color: var(--fui-color-success-text);
+}
+
+.chartWrap {
+  overflow: hidden;
+  background:
+    linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--fui-bg-elevated) 64%, transparent),
+      transparent
+    ),
+    var(--fui-bg-subtle);
+  border-block-start: 1px solid var(--fui-border-subtle);
+}
+
+.driftChart {
+  display: block;
+  width: 100%;
+  height: 112px;
+  color: var(--fui-text-tertiary);
+}
+
+.toolbar {
+  display: grid;
+  grid-template-columns: minmax(260px, 1fr) minmax(160px, 200px);
+  gap: var(--fui-space-2);
+  align-items: center;
+}
+
+.prToolbar {
+  display: grid;
+  grid-template-columns:
+    minmax(260px, 1fr)
+    minmax(150px, 180px)
+    minmax(150px, 180px)
+    minmax(150px, 180px);
+  gap: var(--fui-space-2);
+  align-items: center;
+}
+
+.prDetailSummary {
+  min-width: 0;
+  padding-block-end: var(--fui-space-3);
+  border-block-end: 1px solid var(--fui-border-subtle);
+}
+
+.prTable {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.prRowActions {
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: var(--fui-space-1);
+  min-width: 0;
+}
+
+.prIdHeader {
+  min-width: 0;
+  padding-block-end: var(--fui-space-3);
+  border-block-end: 1px solid var(--fui-border-subtle);
+}
+
+.prIdTabs {
+  display: flex;
+  gap: var(--fui-space-3);
+  align-items: center;
+  overflow-x: auto;
+  border-block-end: 1px solid var(--fui-border-subtle);
+}
+
+.prIdTabs span {
+  display: inline-flex;
+  gap: var(--fui-space-1);
+  align-items: center;
+  min-height: var(--fui-target-size-min);
+  color: var(--fui-text-secondary);
+  border-block-end: 2px solid transparent;
+  white-space: nowrap;
+}
+
+.prIdTabs span[data-active="true"] {
+  color: var(--fui-text-primary);
+  border-block-end-color: var(--fui-color-info-text);
+}
+
+.prIdGithubLayout {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
+  gap: var(--fui-space-5);
+  align-items: start;
+}
+
+.prIdTimeline {
+  min-width: 0;
+}
+
+.prIdTimelineItem {
+  display: grid;
+  grid-template-columns: var(--fui-target-size-min) minmax(0, 1fr);
+  gap: var(--fui-space-3);
+  align-items: start;
+  min-width: 0;
+}
+
+.prIdAvatar {
+  display: grid;
+  width: var(--fui-target-size-min);
+  height: var(--fui-target-size-min);
+  place-items: center;
+  color: var(--fui-text-primary);
+  background: var(--fui-bg-elevated);
+  border: 1px solid var(--fui-border-strong);
+  border-radius: var(--fui-radius-full);
+  font-size: var(--fui-font-size-xs);
+  font-weight: var(--fui-font-weight-semibold);
+}
+
+.prIdAvatar[data-tone="designer"] {
+  color: var(--fui-color-info-text);
+  background: var(--fui-color-info-bg);
+  border-color: var(--fui-color-info-border);
+}
+
+.prIdCommentBox,
+.prIdReviewThread {
+  min-width: 0;
+}
+
+.prIdCommentBox {
+  overflow: hidden;
+  background: var(--fui-bg-elevated);
+  border: 1px solid var(--fui-border-subtle);
+  border-radius: var(--fui-radius-md);
+}
+
+.prIdCommentChrome,
+.prIdFileHeader {
+  display: flex;
+  gap: var(--fui-space-2);
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+  padding: var(--fui-space-2) var(--fui-space-3);
+  background: var(--fui-bg-subtle);
+  border-block-end: 1px solid var(--fui-border-subtle);
+}
+
+.prIdCommentBody {
+  min-width: 0;
+  padding: var(--fui-space-3);
+}
+
+.prIdPrBodyTable,
+.prIdReportTable {
+  overflow: hidden;
+  border: 1px solid var(--fui-border-subtle);
+  border-radius: var(--fui-radius-md);
+}
+
+.prIdSummaryRow,
+.prIdReportRow {
+  display: grid;
+  gap: var(--fui-space-2);
+  align-items: center;
+  padding: var(--fui-space-2) var(--fui-space-3);
+  border-block-end: 1px solid var(--fui-border-subtle);
+}
+
+.prIdSummaryRow {
+  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
+}
+
+.prIdReportRow {
+  grid-template-columns: minmax(100px, 1fr) minmax(92px, 120px) minmax(82px, 110px) auto;
+}
+
+.prIdSummaryRow:last-child,
+.prIdReportRow:last-child {
+  border-block-end: 0;
+}
+
+.prIdFileHeader {
+  border: 1px solid var(--fui-border-subtle);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+  border-start-start-radius: var(--fui-radius-md);
+  border-start-end-radius: var(--fui-radius-md);
+}
+
+.prIdReviewThread .prIdCommentBox {
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.prIdSidebar {
+  position: sticky;
+  top: var(--fui-space-4);
+  min-width: 0;
+  border-block-start: 1px solid var(--fui-border-subtle);
+}
+
+.prIdSidebarSection {
+  display: grid;
+  gap: var(--fui-space-2);
+  padding-block: var(--fui-space-3);
+  border-block-end: 1px solid var(--fui-border-subtle);
+}
+
+.prIdSidebarRow,
+.prIdCheckSummary {
+  min-width: 0;
+}
+
+.prIdSidebarRow {
+  display: flex;
+  gap: var(--fui-space-2);
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.prIdSidebarRow[data-variant="error"] :last-child {
+  color: var(--fui-color-danger-text);
+}
+
+.prIdSidebarRow[data-variant="warning"] :last-child {
+  color: var(--fui-color-warning-text);
+}
+
+.prIdSidebarRow[data-variant="success"] :last-child {
+  color: var(--fui-color-success-text);
+}
+
+.prIdCheckSummary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--fui-space-2);
+  align-items: start;
+}
+
+.prIdCheckIcon {
+  display: grid;
+  width: var(--fui-space-3);
+  height: var(--fui-space-3);
+  place-items: center;
+  margin-block-start: var(--fui-space-1);
+}
+
+.prIdCheckIcon[data-state="passed"] {
+  color: var(--fui-color-success-text);
+}
+
+.prIdCheckIcon[data-state="warning"] {
+  color: var(--fui-color-warning-text);
+}
+
+.prIdCheckIcon[data-state="failed"] {
+  color: var(--fui-color-danger-text);
+}
+
+.prDetailRail {
+  position: sticky;
+  top: var(--fui-space-4);
+  display: grid;
+  gap: var(--fui-space-4);
+  min-width: 0;
+}
+
+.prFindingsToolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--fui-space-2);
+  align-items: center;
+  justify-content: space-between;
+}
+
+@media (max-width: 1120px) {
+  .heroActionGrid {
+    grid-template-columns: 1fr;
+  }
+
+  .twoColumn {
+    grid-template-columns: 1fr;
+  }
+
+  .prIdGithubLayout {
+    grid-template-columns: 1fr;
+  }
+
+  .prIdSidebar,
+  .prDetailRail {
+    position: static;
+  }
+}
+
+@media (max-width: 760px) {
+  .page {
+    padding: var(--fui-space-3);
+  }
+
+  .toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .prToolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .prIdTimelineItem {
+    grid-template-columns: 1fr;
+  }
+
+  .prIdAvatar {
+    display: none;
+  }
+
+  .prIdReportRow {
+    grid-template-columns: 1fr;
+  }
+}