@krapwoo/ds-viewer 0.4.7 → 0.4.8

package/starter-kit/components/TopNav/TopNav.catalog.tsx

@@ -11,7 +11,10 @@ const styles = StyleSheet.create({
 
 export default defineCatalogPage({
   component: 'TopNav',
-  group: 'Navigation',
+  group: 'Components',
+  composedOf: [
+    { component: 'Button', role: "The leading and trailing slots, typically small icon Buttons (back, close, an action).", relationship: 'slot' },
+  ],
   description: 'A screen\'s top bar — fixed-width leading/trailing slots flanking a centered title (or custom center content). Slots reserve their layout space even when empty, so the title stays centered no matter which sides are populated.',
   a11y: 'The title renders with accessibilityRole="header". Slot content (typically icon-only Buttons) carries its own accessibilityLabel.',
   // No `variant` prop exists on TopNav — its "Variants" column just shows the one default look,

package/starter-kit/components/UnderlineTabs/UnderlineTabs.catalog.tsx

@@ -20,9 +20,7 @@ function UnderlineTabsDemo() {
 
 export default defineCatalogPage({
   component: 'UnderlineTabs',
-  group: 'Selection',
-  // Phone width plus a small phone, where long labels truncate.
-  previewWidths: [402, 320],
+  group: 'Components',
   description: 'A quieter tab switcher — left-aligned labels over a hairline rule, with a sliding underline indicator. Same options/value/onChange API as SegmentedToggle.',
   whenToUse: "Quiet, secondary navigation within a screen that already has a clear primary focus. For a prominent, primary choice, use SegmentedToggle.",
   a11y: 'Each tab is a Pressable label; the underline is a visual indicator only, so selection is also conveyed by the active label weight.',

package/starter-kit/pages/ReportIssue.catalog.tsx

@@ -140,7 +140,24 @@ function ReportIssueDemo() {
 }
 
 export default defineCatalogPage({
-  group: 'Recipes',
+  group: 'Patterns',
+  composedOf: [
+    { component: 'BottomSheet', role: "Holds the whole report flow, opened from the Report an issue button.", relationship: 'built-in' },
+    { component: 'TopNav', role: "The sheet header with a Close button.", relationship: 'built-in' },
+    { component: 'ProgressDots', role: "The step indicator.", relationship: 'built-in' },
+    { component: 'Banner', role: "The Delays reported near 14 St service alert.", relationship: 'built-in' },
+    { component: 'PillRow', role: "The issue-type and line pickers.", relationship: 'built-in' },
+    { component: 'TextArea', role: "Free-text details.", relationship: 'built-in' },
+    { component: 'Checkbox', role: "Marks the report urgent.", relationship: 'built-in' },
+    { component: 'Radio', role: "Chooses between sharing publicly and reporting anonymously.", relationship: 'built-in' },
+    { component: 'Switch', role: "Notify me when resolved.", relationship: 'built-in' },
+    { component: 'SkeletonGroup', role: "Groups the loading lines for Recent reports near you into one loading region.", relationship: 'built-in' },
+    { component: 'Shimmer', role: "The loading lines themselves.", relationship: 'built-in' },
+    { component: 'Dock', role: "The sheet footer holding Submit report.", relationship: 'built-in' },
+    { component: 'Dialog', role: "Confirms discarding the report on close.", relationship: 'built-in' },
+    { component: 'ButtonGroup', role: "The dialog's Keep editing and Discard buttons.", relationship: 'built-in' },
+    { component: 'Button', role: "Report an issue, Close, Submit report, and the dialog's actions.", relationship: 'built-in' },
+  ],
   description: 'A composed real screen — a "report an issue" flow opened from a BottomSheet, combining a step indicator, a service-alert banner, a Pill-based issue-type and line picker (a data choice, not a view switch, so Pill rather than SegmentedToggle), free-text and toggle inputs, and a loading skeleton for recent reports. Dismissing with unsaved changes opens a confirmation Dialog.',
   tokenGallery: true,
   fullWidthLabel: 'Preview',

package/starter-kit/pages/SavedTrips.catalog.tsx

@@ -27,10 +27,11 @@ const styles = StyleSheet.create({
   // fixed TopNav header and Dock footer around a scrollable middle, the same fixed-header/
   // scrollable-body/fixed-footer shape a real screen would use.
   savedTripsScreen: { flex: 1, alignSelf: 'stretch' },
-  // A fixed cap (not `flex: 1`) — sidesteps a web-only flexbox quirk where a `flex: 1` ScrollView
-  // nested inside PhoneFrame's own fixed height doesn't actually shrink to the space left after
-  // TopNav/Dock, and grows PhoneFrame itself past its intended 480px instead of scrolling.
-  savedTripsScroll: { maxHeight: 320 },
+  // Takes the space between the TopNav and the Dock and scrolls (`minHeight: 0` lets a flex child
+  // shrink below its content on the web).
+  savedTripsScroll: { flex: 1, minHeight: 0 },
+  // The muted area between TopNav and Dock takes the remaining height, so the list scrolls there.
+  savedTripsBody: { flex: 1, minHeight: 0 },
   savedTripsScrollContent: { padding: DS_SPACING[800], gap: DS_SPACING[600] },
   // Shared by SavedTrips' small inline rows — the "Updating arrival times…" loading row and each
   // list row's trailing badge+button cluster (identical layout, one key).
@@ -127,7 +128,7 @@ function SavedTripsDemo() {
             </Tooltip>
           }
         />
-        <Surface tone="muted">
+        <Surface tone="muted" style={styles.savedTripsBody}>
           <ScrollView style={styles.savedTripsScroll} contentContainerStyle={styles.savedTripsScrollContent}>
             <SearchField value={query} onChangeText={setQuery} placeholder="Search stations" />
             <SegmentedToggle
@@ -239,7 +240,27 @@ function SavedTripsDemo() {
 }
 
 export default defineCatalogPage({
-  group: 'Recipes',
+  group: 'Patterns',
+  composedOf: [
+    { component: 'TopNav', role: "The screen header, titled Saved trips, with a Filters button.", relationship: 'built-in' },
+    { component: 'Tooltip', role: "The Filter by mode hint on the Filters button.", relationship: 'built-in' },
+    { component: 'Surface', role: "The muted background behind the search, toggles and list.", relationship: 'built-in' },
+    { component: 'SearchField', role: "Searches stations.", relationship: 'built-in' },
+    { component: 'SegmentedToggle', role: "Switches between List and Map views.", relationship: 'built-in' },
+    { component: 'UnderlineTabs', role: "The All, Nearby and Favorites tabs.", relationship: 'built-in' },
+    { component: 'PillRow', role: "Mode filter pills.", relationship: 'built-in' },
+    { component: 'Loading', role: "The small spinner beside Updating arrival times.", relationship: 'built-in' },
+    { component: 'Dropdown', role: "The Sort by picker.", relationship: 'built-in' },
+    { component: 'SectionHeader', role: "The Nearby stations heading.", relationship: 'built-in' },
+    { component: 'List', role: "Holds the saved-trip rows with dividers.", relationship: 'built-in' },
+    { component: 'ListItem', role: "Each saved trip row.", relationship: 'built-in' },
+    { component: 'Avatar', role: "Each row's mode icon.", relationship: 'built-in' },
+    { component: 'Badge', role: "Each row's status, e.g. delays.", relationship: 'built-in' },
+    { component: 'Button', role: "The Filters button, each row's remove button, and Plan a new trip.", relationship: 'built-in' },
+    { component: 'EmptyState', role: "Shown instead of the list on an empty tab (Favorites, or after removing every row).", relationship: 'built-in' },
+    { component: 'Toast', role: "Confirms a removed trip, with Undo.", relationship: 'built-in' },
+    { component: 'Dock', role: "The bottom bar holding Plan a new trip.", relationship: 'built-in' },
+  ],
   description: 'A composed real screen — a saved-trips list with a search bar, tab switcher, mode filter pills, a sort Dropdown, and a bottom action bar. Switch to the "Favorites" tab (or remove every row) to see the EmptyState alternative to the list; tap the header icon to see its Tooltip; tap a row\'s trailing × to see the Toast, which only appears after that real action and auto-dismisses (or Undo) — remove two rows back-to-back and each removal gets its own stacked toast on its own clock.',
   tokenGallery: true,
   fullWidthLabel: 'Preview',

package/starter-kit/pages/TripPlannerForm.catalog.tsx

@@ -40,7 +40,13 @@ function TripPlannerFormDemo() {
 }
 
 export default defineCatalogPage({
-  group: 'Recipes',
+  group: 'Patterns',
+  composedOf: [
+    { component: 'Card', role: "Frames the whole form.", relationship: 'built-in' },
+    { component: 'InputField', role: "The From and To fields.", relationship: 'built-in' },
+    { component: 'Divider', role: "Separates the fields from the actions.", relationship: 'built-in' },
+    { component: 'Button', role: "Add stop (tertiary) and Continue (primary, disabled until To is filled).", relationship: 'built-in' },
+  ],
   description: 'A composed real screen — not one component in isolation — showing how Card, InputField, Divider, and Button actually fit together: a From/To trip form with a secondary "Add stop" action and a primary "Continue" that\'s disabled until a destination is entered.',
   tokenGallery: true,
   fullWidthLabel: 'Preview',