inkbridge 0.1.0-beta.2 → 0.1.0-beta.21

package/src/design-system/story-frames.ts

@@ -0,0 +1,400 @@
+import { splitClassName, parseUtilityClass, applyTailwindStylesToFrame } from '../tailwind';
+import { parseLength } from '../tailwind';
+import { parseColor } from '../tokens';
+import { createIcon } from '../effects';
+import { createTextNode } from '../text';
+import { enforceFixedBoxSizingAfterLayout } from '../layout';
+import { createCompoundComponent } from '../components';
+import { isTruthyStateProp } from './state-utils';
+import { normalizeComponentName, findFirstMatchingInstance } from './story-tree-search';
+import { getThemeContext } from './theme-context';
+import { setGeneratedFallbackReason } from './generated-node';
+import type { StoryBuilderContext, StoryRenderContext } from './story-builder-context';
+
+/**
+ * Frame builders that render a single story instance into a Figma frame.
+ *
+ * - `createStateStoryFrame` produces the per-state visual for state-typed
+ *   components (Input, Checkbox, Switch); also used by ensureStateComponentSet
+ *   when assembling state component sets.
+ * - `createSimpleStoryFrame` is the fallback path for simple components
+ *   when no symbol-instance match is available.
+ * - `buildNonCvaSymbolSourceNode` chooses the right frame builder for a
+ *   given non-CVA def (simple / state / compound) — used by
+ *   ensureNonCvaComponentMaster (still in story-builder, phase 7).
+ *
+ * The state-class addActive helper and the translate-x / state-active
+ * helpers all support the state-frame variant logic.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function addActiveDataVariantClasses(classes: string[], props: Record<string, any>): string[] {
+  const checked = isTruthyStateProp(props.checked) || isTruthyStateProp(props.defaultChecked) || isTruthyStateProp(props['aria-checked']);
+  const disabled = isTruthyStateProp(props.disabled) || isTruthyStateProp(props['aria-disabled']);
+  const out = classes.slice();
+
+  function pushIfMissing(token: string): void {
+    if (!token) return;
+    if (out.indexOf(token) !== -1) return;
+    out.push(token);
+  }
+
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    if (checked && cls.startsWith('data-[checked]:')) {
+      pushIfMissing(cls.substring('data-[checked]:'.length));
+    }
+    if (checked && cls.startsWith('group-data-[checked]:')) {
+      pushIfMissing(cls.substring('group-data-[checked]:'.length));
+    }
+    if (disabled && cls.startsWith('data-[disabled]:')) {
+      pushIfMissing(cls.substring('data-[disabled]:'.length));
+    }
+    if (disabled && cls.startsWith('group-data-[disabled]:')) {
+      pushIfMissing(cls.substring('group-data-[disabled]:'.length));
+    }
+  }
+
+  return out;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function normalizeStateValue(value: any): string {
+  if (value == null) return '';
+  return String(value).trim().toLowerCase();
+}
+
+function isStateActiveFromProps(
+  stateName: string,
+  trigger: string | undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  props: Record<string, any>,
+  explicitState: string,
+  checked: boolean,
+  disabled: boolean
+): boolean {
+  const normalizedName = normalizeStateValue(stateName);
+  const normalizedTrigger = normalizeStateValue(trigger);
+
+  if (normalizedName && explicitState === normalizedName) return true;
+
+  if (normalizedName === 'checked') return checked;
+  if (normalizedName === 'disabled') return disabled;
+  if (normalizedName === 'error') return isTruthyStateProp(props['aria-invalid']);
+  if (normalizedName === 'open') {
+    return explicitState === 'open' || normalizeStateValue(props['data-state']) === 'open';
+  }
+  if (normalizedName === 'focus') return explicitState === 'focus' || explicitState === 'focus-visible';
+  if (normalizedName === 'active') return explicitState === 'active';
+  if (normalizedName === 'hover') return explicitState === 'hover';
+
+  if (!normalizedTrigger) return false;
+  if (normalizedTrigger.indexOf('checked') !== -1) return checked;
+  if (normalizedTrigger.indexOf('disabled') !== -1) return disabled;
+  if (normalizedTrigger.indexOf('invalid') !== -1) return isTruthyStateProp(props['aria-invalid']);
+  if (normalizedTrigger.indexOf('state=open') !== -1) {
+    return explicitState === 'open' || normalizeStateValue(props['data-state']) === 'open';
+  }
+  if (normalizedTrigger.indexOf('focus') !== -1) return explicitState === 'focus' || explicitState === 'focus-visible';
+  if (normalizedTrigger.indexOf('active') !== -1) return explicitState === 'active';
+  if (normalizedTrigger.indexOf('hover') !== -1) return explicitState === 'hover';
+  return false;
+}
+
+function parseTranslateDistanceToken(token: string): number | null {
+  const normalized = String(token || '').trim();
+  if (!normalized) return null;
+  if (normalized === 'px') return 1;
+  if (normalized === '0') return 0;
+  if (normalized.startsWith('[') && normalized.endsWith(']')) {
+    const arbitrary = normalized.slice(1, -1).trim();
+    if (!arbitrary) return null;
+    const parsed = parseLength(arbitrary);
+    if (parsed != null) return parsed;
+    const num = parseFloat(arbitrary);
+    if (!Number.isNaN(num)) return num;
+    return null;
+  }
+  const spaced = parseFloat(normalized);
+  if (!Number.isNaN(spaced)) return spaced * 4;
+  return null;
+}
+
+function parseTranslateXValue(utility: string): number | null {
+  if (!utility) return null;
+  let sign = 1;
+  let candidate = utility;
+  if (candidate.startsWith('-')) {
+    sign = -1;
+    candidate = candidate.slice(1);
+  }
+  if (!candidate.startsWith('translate-x-')) return null;
+  const token = candidate.slice('translate-x-'.length);
+  const distance = parseTranslateDistanceToken(token);
+  if (distance == null) return null;
+  return sign * distance;
+}
+
+function getTranslateXProfile(classes: string[]): { hasTranslateX: boolean; baseOffset: number; activeOffset: number } {
+  let hasTranslateX = false;
+  let activeOffset = 0;
+  let baseOffset: number | null = null;
+  for (let i = 0; i < classes.length; i++) {
+    const cls = classes[i];
+    const atom = parseUtilityClass(cls);
+    const value = parseTranslateXValue(atom.utility || '');
+    if (value == null) continue;
+    hasTranslateX = true;
+    activeOffset = value;
+    if (baseOffset == null && atom.variants.length === 0) {
+      baseOffset = value;
+    }
+  }
+  return {
+    hasTranslateX,
+    baseOffset: baseOffset ?? 0,
+    activeOffset,
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function findStorySlotClasses(story: any, slotName: string): string[] {
+  const tree = story && story.jsxTree;
+  if (!tree) return [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const elements: any[] = [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function walk(node: any): void {
+    if (!node || node.type !== 'element') return;
+    elements.push(node);
+    const children = Array.isArray(node.children) ? node.children : [];
+    for (let i = 0; i < children.length; i++) walk(children[i]);
+  }
+  walk(tree);
+  const target = String(slotName || '').toLowerCase();
+  for (let i = 0; i < elements.length; i++) {
+    const el = elements[i];
+    const dataSlot = el && el.props ? String(el.props['data-slot'] || '').toLowerCase() : '';
+    if (!dataSlot || dataSlot !== target) continue;
+    return splitClassName(el.props && el.props.className);
+  }
+  return [];
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createStateStoryFrame(def: any, instance: any, theme: string, ctx: StoryBuilderContext, fallbackReason?: string, story?: any): any {
+  const themeContext = getThemeContext(theme);
+  const colorGroup = themeContext.colorGroup;
+  const radiusGroup = themeContext.radiusGroup;
+  const props = instance.props || {};
+  const normalizedName = normalizeComponentName(def && def.name ? def.name : '');
+  const isSwitchControl = normalizedName === 'switch';
+
+  let classes = def.baseClasses ? def.baseClasses.slice() : [];
+  classes = classes.concat(splitClassName(props.className));
+  classes = addActiveDataVariantClasses(classes, props);
+
+  const comp = figma.createFrame();
+  comp.name = def.name;
+  comp.primaryAxisSizingMode = 'AUTO';
+  comp.counterAxisSizingMode = 'AUTO';
+  comp.primaryAxisAlignItems = 'CENTER';
+  comp.counterAxisAlignItems = 'CENTER';
+  comp.itemSpacing = 8;
+  comp.fills = [];
+  comp.strokes = [];
+  ctx.applyClipBehavior(comp, classes);
+
+  applyTailwindStylesToFrame(comp, classes, colorGroup, radiusGroup, theme);
+
+  const explicitState = normalizeStateValue(props.state || props['data-state']);
+  const isChecked = isTruthyStateProp(props.checked) || isTruthyStateProp(props.defaultChecked) || isTruthyStateProp(props['aria-checked']);
+  const isDisabled = isTruthyStateProp(props.disabled) || isTruthyStateProp(props['aria-disabled']);
+  if (def && def.states) {
+    const stateKeys = Object.keys(def.states);
+    for (let i = 0; i < stateKeys.length; i++) {
+      const key = stateKeys[i];
+      if (key === 'default') continue;
+      const stateDef = def.states[key];
+      const trigger = stateDef && stateDef.trigger ? String(stateDef.trigger) : '';
+      if (!isStateActiveFromProps(key, trigger, props, explicitState, isChecked, isDisabled)) continue;
+      applyTailwindStylesToFrame(comp, stateDef && stateDef.classes ? stateDef.classes : [], colorGroup, radiusGroup, theme);
+    }
+  }
+
+  if (isSwitchControl) {
+    let thumbClasses = findStorySlotClasses(story, 'switch-thumb');
+    if (thumbClasses.length === 0) {
+      thumbClasses = splitClassName('pointer-events-none block size-5 rounded-full bg-background shadow-sm transition-transform duration-200 translate-x-0.5 group-data-[checked]:translate-x-[1.25rem]');
+    }
+    thumbClasses = addActiveDataVariantClasses(thumbClasses, props);
+    const translateProfile = getTranslateXProfile(thumbClasses);
+    const thumb = figma.createFrame();
+    thumb.name = def.name + ' Thumb';
+    thumb.layoutMode = 'VERTICAL';
+    thumb.primaryAxisSizingMode = 'AUTO';
+    thumb.counterAxisSizingMode = 'AUTO';
+    thumb.fills = [];
+    thumb.strokes = [];
+    ctx.applyClipBehavior(thumb, thumbClasses);
+    applyTailwindStylesToFrame(thumb, thumbClasses, colorGroup, radiusGroup, theme);
+    if (translateProfile.hasTranslateX) {
+      const inset = Math.max(0, Math.round(Math.abs(translateProfile.baseOffset)));
+      comp.itemSpacing = 0;
+      comp.primaryAxisAlignItems = translateProfile.activeOffset > translateProfile.baseOffset ? 'MAX' : 'MIN';
+      if (inset > 0) {
+        comp.paddingLeft = inset;
+        comp.paddingRight = inset;
+      }
+    }
+    comp.appendChild(thumb);
+  } else if (isChecked) {
+    const indicatorColor = colorGroup['primary-foreground']
+      ? parseColor(colorGroup['primary-foreground'])
+      : { r: 1, g: 1, b: 1 };
+    const checkIcon = createIcon('check', indicatorColor);
+    if (checkIcon) {
+      // Match the scanner's `<Check className="size-3" />` — 12px square.
+      try { checkIcon.resize(12, 12); } catch { /* ignore */ }
+      comp.appendChild(checkIcon);
+    } else {
+      comp.appendChild(createTextNode('✓', { fontSize: 10, bold: true, fill: indicatorColor }));
+    }
+  }
+
+  const hasCheckedState = !!(def && def.states && def.states.checked);
+  const labelFromChildren = instance && instance.children != null ? String(instance.children).trim() : '';
+  const label = (labelFromChildren !== '' ? labelFromChildren : '') || props.placeholder || props.defaultValue;
+  const labelText = label != null ? String(label).trim() : '';
+  const isSyntheticNameLabel = normalizeComponentName(labelText) === normalizeComponentName(def && def.name ? def.name : '');
+  const suppressInlineLabel = hasCheckedState && labelFromChildren !== '';
+  const isTextarea = normalizedName === 'textarea';
+  if (!suppressInlineLabel && labelText !== '' && !isSyntheticNameLabel) {
+    const textColor = colorGroup['muted-foreground'] ? parseColor(colorGroup['muted-foreground']) : { r: 0.4, g: 0.4, b: 0.4 };
+    const text = createTextNode(labelText, { fontSize: 14, fill: textColor });
+    // Textarea is multi-line: wrap text to the frame's content width and
+    // grow the frame vertically. Without this a multi-line `defaultValue`
+    // overflows the frame's right edge (state-instance label is rendered
+    // as a single line by default).
+    if (isTextarea) {
+      try {
+        comp.layoutMode = 'VERTICAL';
+        comp.counterAxisSizingMode = 'FIXED';
+        comp.primaryAxisSizingMode = 'AUTO';
+        comp.primaryAxisAlignItems = 'MIN';
+        comp.counterAxisAlignItems = 'MIN';
+      } catch { /* ignore */ }
+    }
+    comp.appendChild(text);
+    if (isTextarea) {
+      try {
+        const padX = (comp.paddingLeft || 0) + (comp.paddingRight || 0);
+        const contentWidth = Math.max(1, comp.width - padX);
+        text.textAutoResize = 'HEIGHT';
+        text.resize(contentWidth, text.height);
+      } catch { /* ignore */ }
+    }
+  }
+  if (fallbackReason) {
+    setGeneratedFallbackReason(comp, fallbackReason);
+  }
+  enforceFixedBoxSizingAfterLayout(comp, classes);
+
+  return comp;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function createSimpleStoryFrame(def: any, instance: any, theme: string, ctx: StoryBuilderContext, fallbackReason?: string): any {
+  const themeContext = getThemeContext(theme);
+  const colorGroup = themeContext.colorGroup;
+  const radiusGroup = themeContext.radiusGroup;
+  const props = instance.props || {};
+
+  let classes = def.classes ? def.classes.slice() : [];
+  classes = classes.concat(splitClassName(props.className));
+
+  const frame = figma.createFrame();
+  frame.name = def.name;
+  frame.layoutMode = 'VERTICAL';
+  frame.itemSpacing = 0;
+  frame.primaryAxisSizingMode = 'AUTO';
+  frame.counterAxisSizingMode = 'AUTO';
+  frame.counterAxisAlignItems = 'MIN';
+  frame.fills = [];
+  ctx.applyClipBehavior(frame, classes);
+
+  applyTailwindStylesToFrame(frame, classes, colorGroup, radiusGroup, theme);
+
+  let renderedStructuredChildren = 0;
+  const jsxChildren = Array.isArray(props.__jsxChildren) ? props.__jsxChildren : [];
+  if (jsxChildren.length > 0) {
+    const maxWidth = Number.isFinite(frame.width)
+      ? Math.max(1, frame.width - (frame.paddingLeft || 0) - (frame.paddingRight || 0))
+      : undefined;
+    const renderContext: StoryRenderContext = {
+      maxWidth: maxWidth,
+      parentLayout: 'VERTICAL',
+      textAlign: undefined,
+    };
+    for (let i = 0; i < jsxChildren.length; i++) {
+      const childNode = ctx.renderJsxTree(
+        jsxChildren[i],
+        colorGroup,
+        radiusGroup,
+        theme,
+        0,
+        renderContext
+      );
+      if (!childNode) continue;
+      ctx.applyAbsoluteIfAllowed(childNode, frame, false);
+      frame.appendChild(childNode);
+      renderedStructuredChildren++;
+    }
+  }
+
+  if (renderedStructuredChildren === 0) {
+    const label = instance.children || props.children;
+    if (label) {
+      frame.appendChild(createTextNode(label, { fontSize: 12 }));
+    }
+  }
+  if (fallbackReason) {
+    setGeneratedFallbackReason(frame, fallbackReason);
+  }
+
+  return frame;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function buildNonCvaSymbolSourceNode(def: any, theme: string, ctx: StoryBuilderContext): any | null {
+  if (!def) return null;
+  if (def.type === 'simple') {
+    const frame = createSimpleStoryFrame(def, { props: {} }, theme, ctx);
+    return frame;
+  }
+  if (def.type === 'state') {
+    const sourceInstance = findFirstMatchingInstance(def);
+    const frame = createStateStoryFrame(def, {
+      props: Object.assign({}, (sourceInstance && sourceInstance.props) || {}),
+      children: sourceInstance && sourceInstance.children ? sourceInstance.children : undefined,
+    }, theme, ctx);
+    return frame;
+  }
+  if (def.type === 'compound') {
+    const scratch = figma.createFrame();
+    scratch.name = '__scratch';
+    scratch.layoutMode = 'VERTICAL';
+    scratch.primaryAxisSizingMode = 'AUTO';
+    scratch.counterAxisSizingMode = 'AUTO';
+    scratch.fills = [];
+    const frame = createCompoundComponent(scratch, def, theme);
+    if (!frame) {
+      scratch.remove();
+      return null;
+    }
+    const clone = frame.clone();
+    scratch.remove();
+    return clone;
+  }
+  return null;
+}