@usefragments/ui 1.0.2 → 1.2.0

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

@@ -1,238 +0,0 @@
-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

@@ -1,462 +0,0 @@
-.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;
-  }
-}