@krapwoo/ds-viewer 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@krapwoo/ds-viewer",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "license": "MIT",
   "type": "module",
   "description": "A browsable, always-current catalog for an Expo / React Native design system.",
@@ -29,6 +29,7 @@
     "starter-kit",
     "dist/cli",
     "dist/config",
+    "dist/native",
     "config/index.ts",
     "README.md",
     "LICENSE"
@@ -51,6 +52,7 @@
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
     "puppeteer": "^25.12.0"
   },
   "scripts": {
@@ -59,6 +61,8 @@
     "typecheck": "tsc -p tsconfig.json --noEmit",
     "kit:dev": "npm run build && cd kit-host && node node_modules/@krapwoo/ds-viewer/dist/cli/main.js dev",
     "check:catalog": "npm run build && node scripts/checkCatalogConsole.mjs kit-host",
+    "check:doctor": "npm run build && cd kit-host && node node_modules/@krapwoo/ds-viewer/dist/cli/main.js doctor --ci",
+    "check:types": "tsc --noEmit -p kit-host",
     "release": "node scripts/release.mjs"
   }
 }

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

@@ -1,30 +1,12 @@
 import React from 'react';
-import { defineCatalogPage, type ComparisonDef } from '@krapwoo/ds-viewer';
+import { defineCatalogPage, grid } from '@krapwoo/ds-viewer';
 import { Avatar } from './Avatar';
 import { DS_SEMANTIC } from '../../tokens';
 
-// Grid comparisons: each cell is a real instance with exactly the props its row and column name.
-// Never build these by multiplying `variants` with `states` — those are pre-rendered nodes and
-// cannot combine.
-function grid(
-  rowLabel: string,
-  columnLabel: string,
-  rows: { key: string; label: string }[],
-  columns: { key: string; label: string }[],
-  cell: (row: string, column: string) => React.ReactNode,
-  size?: ComparisonDef['size'],
-): ComparisonDef {
-  return {
-    rowLabel,
-    columnLabel,
-    rows,
-    columns,
-    cells: rows.flatMap((row) => columns.map((column) => ({ rowKey: row.key, columnKey: column.key, node: cell(row.key, column.key) }))),
-    size,
-  };
-}
-
 // Avatar: content Kind × Size (Avatar's `size` is continuous; 24 / 40 default / 64 is the sweep).
+// Neither axis names a real prop — "Kind" is which of 3 optional props is set, not one enum, and
+// `size` has no fixed option set — so both stay unbound. An unbound axis is fully valid; `doctor`
+// only ever reports how many examples are unbound as information, never as an error or a warning.
 const AVATAR_COMPARISON = grid(
   'Kind',
   'Size',

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

@@ -1,29 +1,8 @@
 import React from 'react';
-import { defineCatalogPage, type ComparisonDef } from '@krapwoo/ds-viewer';
+import { defineCatalogPage, grid } from '@krapwoo/ds-viewer';
 import { Badge } from './Badge';
 import type { BadgeVariant } from './Badge.types';
 
-// Grid comparisons: each cell is a real instance with exactly the props its row and column name.
-// Never build these by multiplying `variants` with `states` — those are pre-rendered nodes and
-// cannot combine.
-function grid(
-  rowLabel: string,
-  columnLabel: string,
-  rows: { key: string; label: string }[],
-  columns: { key: string; label: string }[],
-  cell: (row: string, column: string) => React.ReactNode,
-  size?: ComparisonDef['size'],
-): ComparisonDef {
-  return {
-    rowLabel,
-    columnLabel,
-    rows,
-    columns,
-    cells: rows.flatMap((row) => columns.map((column) => ({ rowKey: row.key, columnKey: column.key, node: cell(row.key, column.key) }))),
-    size,
-  };
-}
-
 // Badge: Tone × Icon layout. One icon per tone, matching the Variants examples.
 const BADGE_TONES: { key: BadgeVariant; label: string; text: string; icon: React.ComponentProps<typeof Badge>['leadingIcon'] }[] = [
   { key: 'neutral', label: 'Neutral', text: 'Local', icon: 'pin' },
@@ -32,10 +11,23 @@ const BADGE_TONES: { key: BadgeVariant; label: string; text: string; icon: React
   { key: 'warning', label: 'Warning', text: 'Delayed', icon: 'triangle-alert' },
   { key: 'negative', label: 'Negative', text: 'Suspended', icon: 'circle-slash' },
 ];
+// `rows` is bound to Badge's own `variant` prop (design §4) — written as its own literal array
+// (not `BADGE_TONES.map(...)`) so `doctor`'s static reader can check it without evaluating a
+// function call; `BADGE_TONES` above still drives the real rendering in `cell` below.
+const BADGE_ROWS = {
+  prop: 'variant',
+  items: [
+    { key: 'neutral', label: 'Neutral' },
+    { key: 'info', label: 'Info' },
+    { key: 'positive', label: 'Positive' },
+    { key: 'warning', label: 'Warning' },
+    { key: 'negative', label: 'Negative' },
+  ],
+} as const;
 const BADGE_COMPARISON = grid(
   'Tone',
   'Icon',
-  BADGE_TONES.map(({ key, label }) => ({ key, label })),
+  BADGE_ROWS,
   [
     { key: 'label-only', label: 'Label only' },
     { key: 'leading-icon', label: 'Leading icon' },

package/starter-kit/components/Banner/Banner.tsx

@@ -235,7 +235,7 @@ const styles = StyleSheet.create({
   },
   // Translucent pressed overlay — sits above the banner bg so the tinted bg shows through.
   pressOverlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     backgroundColor: DS_SEMANTIC.interaction.pressed,
     borderRadius: DS_RADIUS.medium,
   },

package/starter-kit/components/BottomSheet/BottomSheet.tsx

@@ -126,8 +126,8 @@ export function BottomSheet({ visible, onDismiss, header, children, footer, styl
 }
 
 const styles = StyleSheet.create({
-  overlay: { ...StyleSheet.absoluteFillObject, justifyContent: 'flex-end' },
-  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: DS_SEMANTIC.element.overlayBackdrop },
+  overlay: { ...StyleSheet.absoluteFill, justifyContent: 'flex-end' },
+  backdrop: { ...StyleSheet.absoluteFill, backgroundColor: DS_SEMANTIC.element.overlayBackdrop },
   sheet: {
     maxHeight: MAX_HEIGHT_PERCENT,
     backgroundColor: DS_SEMANTIC.surface.white,

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { defineCatalogPage, type ComparisonDef } from '@krapwoo/ds-viewer';
+import { defineCatalogPage, grid } from '@krapwoo/ds-viewer';
 import { Button } from './Button';
 import type { ButtonVariant } from './Button.types';
 import { DS_SEMANTIC } from '../../tokens';
@@ -16,38 +16,24 @@ const styles = StyleSheet.create({
   },
 });
 
-// Grid comparisons: each cell is a real instance with exactly the props its row and column name.
-// Never build these by multiplying `variants` with `states` — those are pre-rendered nodes and
-// cannot combine.
-function grid(
-  rowLabel: string,
-  columnLabel: string,
-  rows: { key: string; label: string }[],
-  columns: { key: string; label: string }[],
-  cell: (row: string, column: string) => React.ReactNode,
-  size?: ComparisonDef['size'],
-): ComparisonDef {
-  return {
-    rowLabel,
-    columnLabel,
-    rows,
-    columns,
-    cells: rows.flatMap((row) => columns.map((column) => ({ rowKey: row.key, columnKey: column.key, node: cell(row.key, column.key) }))),
-    size,
-  };
-}
-
 // Button: Variant × State. `white` keeps the dark backdrop its variant requires.
+// `rows` is bound to Button's own `variant` prop (design §4): each row key below is an actual
+// `ButtonVariant` option, so `doctor` can tell when one is renamed or removed. `columns` names no
+// single prop (disabled/loading are two separate booleans, not one "State" prop) and stays unbound
+// — unbound axes are just as valid, and `doctor` never flags one.
 const BUTTON_COMPARISON = grid(
   'Variant',
   'State',
-  [
-    { key: 'primary', label: 'Primary' },
-    { key: 'secondary', label: 'Secondary' },
-    { key: 'tertiary', label: 'Tertiary' },
-    { key: 'white', label: 'White' },
-    { key: 'ghost', label: 'Ghost' },
-  ],
+  {
+    prop: 'variant',
+    items: [
+      { key: 'primary', label: 'Primary' },
+      { key: 'secondary', label: 'Secondary' },
+      { key: 'tertiary', label: 'Tertiary' },
+      { key: 'white', label: 'White' },
+      { key: 'ghost', label: 'Ghost' },
+    ],
+  },
   [
     { key: 'default', label: 'Default' },
     { key: 'disabled', label: 'Disabled' },

package/starter-kit/components/Dialog/Dialog.tsx

@@ -65,12 +65,12 @@ export function Dialog({ visible, onDismiss, children, style }: DialogProps) {
 
 const styles = StyleSheet.create({
   overlay: {
-    ...StyleSheet.absoluteFillObject,
+    ...StyleSheet.absoluteFill,
     alignItems: 'center',
     justifyContent: 'center',
     padding: DS_SPACING[800],
   },
-  backdrop: { ...StyleSheet.absoluteFillObject, backgroundColor: DS_SEMANTIC.element.overlayBackdrop },
+  backdrop: { ...StyleSheet.absoluteFill, backgroundColor: DS_SEMANTIC.element.overlayBackdrop },
   card: {
     width: '100%',
     maxWidth: 400,

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

@@ -1,36 +1,22 @@
 import React from 'react';
-import { defineCatalogPage, type ComparisonDef } from '@krapwoo/ds-viewer';
+import { defineCatalogPage, grid } from '@krapwoo/ds-viewer';
 import { Pill } from './Pill';
 
-// Grid comparisons: each cell is a real instance with exactly the props its row and column name.
-// Never build these by multiplying `variants` with `states` — those are pre-rendered nodes and
-// cannot combine.
-function grid(
-  rowLabel: string,
-  columnLabel: string,
-  rows: { key: string; label: string }[],
-  columns: { key: string; label: string }[],
-  cell: (row: string, column: string) => React.ReactNode,
-  size?: ComparisonDef['size'],
-): ComparisonDef {
-  return {
-    rowLabel,
-    columnLabel,
-    rows,
-    columns,
-    cells: rows.flatMap((row) => columns.map((column) => ({ rowKey: row.key, columnKey: column.key, node: cell(row.key, column.key) }))),
-    size,
-  };
-}
-
 // Pill: Selection × State.
+// `rows` is bound to Pill's own `variant` prop (design §4); the second item's key is
+// `'not_selected'` (underscore), matching `PillVariant` exactly — not `'not-selected'`, which is
+// only this page's own label-ish spelling and would fail `doctor`'s "item key must be a real
+// option" check.
 const PILL_COMPARISON = grid(
   'Selection',
   'State',
-  [
-    { key: 'selected', label: 'Selected' },
-    { key: 'not-selected', label: 'Not selected' },
-  ],
+  {
+    prop: 'variant',
+    items: [
+      { key: 'selected', label: 'Selected' },
+      { key: 'not_selected', label: 'Not selected' },
+    ],
+  },
   [
     { key: 'icon-text', label: 'Icon + Text' },
     { key: 'icon-only', label: 'Icon-only' },