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

package/src/design-system/component-sections.ts

@@ -0,0 +1,107 @@
+import type { ComponentDef } from '../components';
+
+export type ComponentSectionConfig = {
+  key: string;
+  title: string;
+  description: string;
+};
+
+export const COMPONENT_SECTION_ORDER: ComponentSectionConfig[] = [
+  {
+    key: 'atoms',
+    title: 'Atoms',
+    description: 'Reusable primitives and controls.',
+  },
+  {
+    key: 'molecules',
+    title: 'Molecules',
+    description: 'Composed blocks built from atoms.',
+  },
+  {
+    key: 'organisms',
+    title: 'Organisms',
+    description: 'Feature and section-level compositions.',
+  },
+  {
+    key: 'utilities',
+    title: 'Utilities',
+    description: 'Utility and helper components.',
+  },
+  {
+    key: 'other',
+    title: 'Other',
+    description: 'Components that do not fit current atomic buckets.',
+  },
+];
+
+const COMPONENT_SECTION_BY_KEY: Record<string, ComponentSectionConfig> = COMPONENT_SECTION_ORDER.reduce(function(map, section) {
+  map[section.key] = section;
+  return map;
+}, {} as Record<string, ComponentSectionConfig>);
+
+export function getComponentSectionName(section: ComponentSectionConfig): string {
+  return 'Section / ' + section.title;
+}
+
+export function inferComponentSection(def: ComponentDef): ComponentSectionConfig {
+  const kind = String(def && def.kind ? def.kind : '').toLowerCase();
+  const type = String(def && def.type ? def.type : '').toLowerCase();
+  const usesCount = Number(def && typeof def.usesCount === 'number' ? def.usesCount : 0);
+  const usedByCount = Number(def && typeof def.usedByCount === 'number' ? def.usedByCount : 0);
+  const isLeaf = typeof def?.isLeaf === 'boolean' ? def.isLeaf : (usesCount === 0);
+  const hasStory = typeof def?.hasStory === 'boolean' ? def.hasStory : true;
+
+  if (kind === 'atom') return COMPONENT_SECTION_BY_KEY.atoms;
+  if (kind === 'molecule') return COMPONENT_SECTION_BY_KEY.molecules;
+  if (kind === 'organism') return COMPONENT_SECTION_BY_KEY.organisms;
+  if (kind === 'utility') return COMPONENT_SECTION_BY_KEY.utilities;
+  if (kind === 'other') return COMPONENT_SECTION_BY_KEY.other;
+
+  if (!hasStory && usedByCount === 0 && isLeaf) {
+    return COMPONENT_SECTION_BY_KEY.utilities;
+  }
+
+  if (type === 'cva' || type === 'state') {
+    return COMPONENT_SECTION_BY_KEY.atoms;
+  }
+
+  if (isLeaf && usedByCount > 0) {
+    return COMPONENT_SECTION_BY_KEY.atoms;
+  }
+
+  if (usesCount >= 2) {
+    return COMPONENT_SECTION_BY_KEY.organisms;
+  }
+
+  if (type === 'compound' || usesCount === 1 || usedByCount > 0) {
+    return COMPONENT_SECTION_BY_KEY.molecules;
+  }
+
+  if (isLeaf) {
+    return COMPONENT_SECTION_BY_KEY.atoms;
+  }
+
+  return COMPONENT_SECTION_BY_KEY.other;
+}
+
+export function groupComponentDefs(defs: ComponentDef[]): { section: ComponentSectionConfig; defs: ComponentDef[] }[] {
+  const grouped: Record<string, ComponentDef[]> = {};
+  for (let i = 0; i < defs.length; i++) {
+    const def = defs[i];
+    const section = inferComponentSection(def);
+    if (!grouped[section.key]) grouped[section.key] = [];
+    grouped[section.key].push(def);
+  }
+
+  const out: { section: ComponentSectionConfig; defs: ComponentDef[] }[] = [];
+  for (let i = 0; i < COMPONENT_SECTION_ORDER.length; i++) {
+    const section = COMPONENT_SECTION_ORDER[i];
+    const entries = grouped[section.key];
+    if (!entries || entries.length === 0) continue;
+    out.push({
+      section,
+      defs: entries.sort(function(a: ComponentDef, b: ComponentDef) { return a.name.localeCompare(b.name); }),
+    });
+  }
+  return out;
+}

package/src/design-system/cva-inference.ts

@@ -0,0 +1,187 @@
+import { COMPONENT_DEFS } from '../tokens';
+import { splitClassName } from '../tailwind';
+import { normalizeComponentDef } from './node-helpers';
+
+/**
+ * Reverse-engineering CVA component identity + variant props from a flat
+ * Tailwind class list. Used by ui-builder when an `asChild` Radix wrapper
+ * (e.g. `<Button asChild><Link/></Button>`) appears as anonymous "Comp"
+ * in the scanned JSX — we still want to render it as the original CVA
+ * symbol with its variants.
+ *
+ * `inferCvaDefFromClasses` finds the best-matching CVA def by base-class
+ * overlap. `buildCvaInstanceProps` then resolves the variant props that
+ * best explain the remaining classes, optionally preserving any leftover
+ * "extra" className the caller wants to keep.
+ */
+
+function toClassSet(classes: string[]): Set<string> {
+  const out = new Set<string>();
+  for (let i = 0; i < classes.length; i++) {
+    const token = String(classes[i] || '').trim();
+    if (!token) continue;
+    out.add(token);
+  }
+  return out;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getAllNormalizedDefs(): any[] {
+  const defs = (COMPONENT_DEFS && Array.isArray(COMPONENT_DEFS.components))
+    ? COMPONENT_DEFS.components
+    : [];
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const out: any[] = [];
+  for (let i = 0; i < defs.length; i++) {
+    const normalized = normalizeComponentDef(defs[i]);
+    if (normalized) out.push(normalized);
+  }
+  return out;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function inferCvaDefFromClasses(classes: string[]): any | null {
+  if (classes.length === 0) return null;
+  const classSet = toClassSet(classes);
+  const defs = getAllNormalizedDefs();
+
+  // Common asChild pattern from shadcn Button:
+  // <Button asChild><Link .../></Button> often appears as anonymous "Comp" in scanned JSX.
+  // Match stable button signature classes first to avoid generic score misses.
+  const hasButtonSignature =
+    classSet.has('inline-flex')
+    && classSet.has('items-center')
+    && classSet.has('justify-center')
+    && classSet.has('whitespace-nowrap')
+    && classSet.has('rounded-md')
+    && classSet.has('font-medium');
+  if (hasButtonSignature) {
+    for (let i = 0; i < defs.length; i++) {
+      const def = defs[i];
+      if (def && def.type === 'cva' && def.name === 'Button') {
+        return def;
+      }
+    }
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let best: any | null = null;
+  let bestScore = 0;
+  for (let i = 0; i < defs.length; i++) {
+    const def = defs[i];
+    if (!def || def.type !== 'cva') continue;
+    const baseClasses = Array.isArray(def.baseClasses) ? def.baseClasses : [];
+    if (baseClasses.length === 0) continue;
+    let matched = 0;
+    for (let j = 0; j < baseClasses.length; j++) {
+      if (classSet.has(baseClasses[j])) matched++;
+    }
+    const score = matched / baseClasses.length;
+    if (matched >= 4 && score > bestScore) {
+      best = def;
+      bestScore = score;
+    }
+  }
+  if (bestScore < 0.65) return null;
+  return best;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function inferCvaVariantPropsFromClasses(def: any, classes: string[]): Record<string, string> {
+  const out: Record<string, string> = {};
+  if (!def || def.type !== 'cva') return out;
+
+  const classSet = toClassSet(classes);
+  const variants = def.variants || {};
+  const variantClasses = def.variantClasses || {};
+  const defaultVariants = def.defaultVariants || {};
+  const variantKeys = Object.keys(variants);
+
+  for (let i = 0; i < variantKeys.length; i++) {
+    const key = variantKeys[i];
+    const values = Array.isArray(variants[key]) ? variants[key] : [];
+    if (values.length === 0) continue;
+    let bestValue: string | null = null;
+    let bestScore = -1;
+    for (let j = 0; j < values.length; j++) {
+      const value = String(values[j]);
+      const valueClasses = variantClasses && variantClasses[key] && Array.isArray(variantClasses[key][value])
+        ? variantClasses[key][value]
+        : [];
+      if (valueClasses.length === 0) continue;
+      let matched = 0;
+      for (let k = 0; k < valueClasses.length; k++) {
+        if (classSet.has(valueClasses[k])) matched++;
+      }
+      if (matched > bestScore) {
+        bestScore = matched;
+        bestValue = value;
+      }
+    }
+    if (bestValue) {
+      out[key] = bestValue;
+      continue;
+    }
+    const defaultValue = defaultVariants[key];
+    if (defaultValue != null) {
+      out[key] = String(defaultValue);
+    }
+  }
+  return out;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getKnownCvaClassSet(def: any, variants: Record<string, string>): Set<string> {
+  const known = new Set<string>();
+  const baseClasses = Array.isArray(def && def.baseClasses) ? def.baseClasses : [];
+  for (let i = 0; i < baseClasses.length; i++) {
+    known.add(baseClasses[i]);
+  }
+  const variantClasses = def && def.variantClasses ? def.variantClasses : {};
+  const variantKeys = Object.keys((def && def.variants) || {});
+  for (let i = 0; i < variantKeys.length; i++) {
+    const key = variantKeys[i];
+    const value = variants[key];
+    if (!value) continue;
+    const classesForValue = variantClasses && variantClasses[key] && Array.isArray(variantClasses[key][value])
+      ? variantClasses[key][value]
+      : [];
+    for (let j = 0; j < classesForValue.length; j++) {
+      known.add(classesForValue[j]);
+    }
+  }
+  return known;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function buildCvaInstanceProps(def: any, nodeProps: Record<string, any>, classes: string[], keepExtraClassName: boolean): Record<string, any> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const props: Record<string, any> = Object.assign({}, nodeProps || {});
+  const inferredVariants = inferCvaVariantPropsFromClasses(def, classes);
+  const variantKeys = Object.keys((def && def.variants) || {});
+  for (let i = 0; i < variantKeys.length; i++) {
+    const key = variantKeys[i];
+    const inferred = inferredVariants[key];
+    if (inferred != null) {
+      props[key] = inferred;
+    }
+  }
+  if (keepExtraClassName) {
+    const classTokens = splitClassName(props.className);
+    if (classTokens.length > 0) {
+      const known = getKnownCvaClassSet(def, inferredVariants);
+      const extra = classTokens.filter(token => !known.has(token));
+      if (extra.length > 0) {
+        props.className = extra.join(' ');
+      } else {
+        delete props.className;
+      }
+    } else {
+      delete props.className;
+    }
+  } else {
+    delete props.className;
+  }
+  delete props.ref;
+  return props;
+}