@mindlogic-ai/logician-ui 4.0.0-alpha.9 → 5.0.0-alpha.0

package/codemods/5.0/__testfixtures__/token-renames.output.tsx

@@ -0,0 +1,88 @@
+import { Box, Link, Text } from '@mindlogic-ai/logician-ui';
+import NextLink from 'next/link';
+
+type Tokens = 'slate.800' | 'primary.light';
+
+const styles = {
+  bg: 'primary.wash',
+  hover: 'primary.wash',
+  pressed: 'primary.washActive',
+  border: 'border.strong',
+  title: 'fg.default',
+  fill: 'primary.main',
+  fillStrong: 'primary.hover',
+  secondaryText: 'secondary.fg',
+  danger: 'danger.solid',
+  successBg: 'success.bg',
+  warn: 'warning.solid',
+  selected: 'primary.selected',
+  shadow: '0 0 0 1px var(--chakra-colors-neutral-5)',
+  gradient:
+    'linear-gradient(90deg, var(--chakra-colors-primary-wash), var(--chakra-colors-danger-solid))',
+  gray: 'neutral.5',
+  grayVar: 'var(--chakra-colors-neutral-9)',
+  // CSS variables are kebab-case (Chakra dash-cases camelCase segments)
+  pressedVar: 'var(--chakra-colors-primary-wash-active)',
+  fillStrongVar: 'var(--chakra-colors-primary-hover)',
+  // Chakra token references with the `colors.` prefix
+  pathy: 'colors.border.strong',
+  ref: '{colors.success.solid}',
+  mix: 'color-mix(in oklab, {colors.warning.solid} 70%, black)',
+  grayRef: '{colors.neutral.5}',
+  // Longest token wins: primary.lighter (not primary.light + "er"), slate.1000 (not slate.100 + "0")
+  lighterNotLight: 'primary.washActive',
+  slate1000: 'neutral.10',
+  // Boundaries — must NOT change
+  digitSuffix: 'slate.8000',
+  wordSuffix: 'primary.light2',
+  dashSuffix: 'primary.light-x',
+  wordPrefix: 'xslate.800',
+  dashPrefix: 'my-primary.light',
+  varSuffix: 'var(--chakra-colors-slate-3000)',
+  notAToken: 'fg.default',
+  notColorsPrefix: 'foo.primary.light',
+  deepPath: 'theme.colors.primary.light',
+  longer: 'slate.100x',
+  // Raw primitives — reported, not renamed
+  blue: 'blue.500',
+  violet: 'violet.300',
+  greenVar: 'var(--chakra-colors-green-600)',
+  grayDark: 'grayDark.200',
+  grayDarkRef: '{colors.grayDark.200}',
+  grayDarkVar: 'var(--chakra-colors-gray-dark-200)',
+};
+
+const token = (path: string) => path;
+export const dangerRef = token('colors.danger.solid');
+
+const theme = { colors: { 'slate.800': '#616B85' } };
+
+export const Tokens = ({ active }: { active: boolean }) => (
+  <Box
+    bg="neutral.2"
+    color={'neutral.9'}
+    borderColor={active ? 'primary.main' : 'neutral.5'}
+    _hover={{ bg: 'primary.wash', color: 'primary.main' }}
+    css={{ outline: `2px solid var(--chakra-colors-neutral-7)` }}
+    sx={{
+      border: `1px solid ${active ? 'red' : 'blue'}`,
+      color: `slate.${1200}`,
+    }}
+  >
+    <Text color="primary.main">accent text → primary.main</Text>
+    <Link color="fg.link" href="/a">
+      link → fg.link
+    </Link>
+    <a color="fg.link" href="/b">
+      anchor → fg.link
+    </a>
+    <NextLink href="/c" color="primary.main">
+      other Link-named? no — NextLink is not Link/a
+    </NextLink>
+    <Text color="neutral.10" bg={`neutral.1`}>
+      {theme.colors['slate.800']}
+    </Text>
+  </Box>
+);
+
+export type { Tokens as T };

package/codemods/5.0/badge-variants.js

@@ -0,0 +1,91 @@
+/**
+ * logician-ui 5.0 codemod — badge-variants
+ *
+ * <Badge> from '@mindlogic-ai/logician-ui': 5.0 keeps status variants and makes
+ * the plain badge neutral (the default). 4.x `primary` (blue) and `secondary`
+ * (violet) have no colour of their own any more.
+ *
+ *   variant neutral | primary | secondary  → attribute removed (neutral default)
+ *   variant success | warning | danger | info → unchanged
+ *   variant={expr}                         → untouched, reported
+ *   any other static value                 → removed + TODO comment, reported
+ */
+'use strict';
+
+const {
+  findElements,
+  readAttr,
+  spreads,
+  removeAttrs,
+  addTodo,
+  textOf,
+  lineOf,
+  componentLabel,
+  createReporter,
+} = require('./lib/shared');
+
+const NAME = 'badge-variants';
+const DROP = new Set(['neutral', 'primary', 'secondary']);
+const KEEP = new Set(['success', 'warning', 'danger', 'info']);
+
+function transform(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const reporter =
+    (options && options.__reporter) || createReporter(api, file, NAME);
+  let changed = 0;
+
+  for (const p of findElements(j, root, 'Badge')) {
+    const opening = p.node;
+    const label = componentLabel(opening);
+    const v = readAttr(opening, 'variant');
+    const sp = spreads(opening);
+    if (sp.length && v.kind === 'absent') {
+      reporter.site({
+        line: lineOf(opening),
+        component: label,
+        prop: '{...spread}',
+        kind: 'spread',
+        note: 'may carry variant — check by hand',
+        source: sp.map((s) => textOf(j, file, s)).join(' '),
+      });
+    }
+    if (v.kind === 'dynamic') {
+      reporter.site({
+        line: lineOf(v.attr),
+        component: label,
+        prop: 'variant',
+        kind: 'dynamic',
+        note: 'not migrated; primary/secondary → neutral',
+        source: textOf(j, file, v.attr),
+      });
+      continue;
+    }
+    if (v.kind !== 'static' || KEEP.has(v.value)) continue;
+    const index = removeAttrs(opening, ['variant']);
+    changed += 1;
+    if (!DROP.has(v.value)) {
+      const anchor = opening.attributes[index] || opening.attributes[0];
+      addTodo(
+        j,
+        opening,
+        `Badge variant="${v.value}" is not a 5.0 variant; removed (neutral)`,
+        anchor
+      );
+      reporter.site({
+        line: lineOf(opening),
+        component: label,
+        prop: 'variant',
+        kind: 'todo',
+        note: `variant="${v.value}" removed`,
+        source: textOf(j, file, v.attr),
+      });
+    }
+  }
+  if (!changed) return undefined;
+  reporter.count('elements migrated', changed);
+  return root.toSource();
+}
+
+module.exports = transform;
+module.exports.parser = 'tsx';

package/codemods/5.0/button-variants.js

@@ -0,0 +1,233 @@
+/**
+ * logician-ui 5.0 codemod — button-variants
+ *
+ * <Button>/<IconButton> from '@mindlogic-ai/logician-ui': the 4.x
+ * `colorPalette × variant` grid becomes one role `variant` (+ `isDestructive`).
+ *
+ * The mapping is the runtime back-compat table in
+ * src/components/Button/Button.legacy.ts, so a call site renders the same
+ * whether or not the codemod ran. Combinations outside the migration table in
+ * MIGRATION-5.0.md (secondary/solid, warning/solid, success/outline, unknown
+ * variant names, …) are still converted so the code compiles, but get a
+ * `TODO(logician-ui 5.0)` comment and a report line.
+ *
+ * Dynamic `variant` / `colorPalette` / `colorScheme` values are not touched and
+ * are reported. Spreads (`{...props}`) are migrated around but reported, since
+ * the spread may carry the old props.
+ */
+'use strict';
+
+const {
+  findElements,
+  readAttr,
+  hasAttr,
+  spreads,
+  removeAttrs,
+  insertAttr,
+  stringAttr,
+  boolAttr,
+  addTodo,
+  textOf,
+  lineOf,
+  componentLabel,
+  createReporter,
+} = require('./lib/shared');
+
+const NAME = 'button-variants';
+
+const NEW_BUTTON = new Set([
+  'primary',
+  'action',
+  'secondary',
+  'subtle',
+  'ghost',
+  'danger',
+]);
+const NEW_ICON = new Set(['ghost', 'secondary', 'primary', 'danger', 'action']);
+
+/**
+ * The combinations the 5.0 migration table maps with confidence
+ * (palette "" = prop absent, variant "" = prop absent).
+ */
+const BUTTON_OK = {
+  solid: ['', 'primary', 'neutral', 'danger'],
+  outline: ['', 'neutral', 'primary', 'secondary', 'danger'],
+  ghost: ['', 'neutral', 'primary', 'danger'],
+  soft: ['', 'neutral', 'primary', 'secondary', 'danger'],
+  '': ['', 'neutral', 'primary', 'secondary', 'danger'],
+};
+const ICON_OK = {
+  solid: ['', 'neutral', 'primary', 'danger'],
+  outline: ['', 'neutral'],
+  ghost: ['', 'neutral', 'primary', 'warning', 'danger'],
+  soft: ['neutral', 'primary', 'danger'],
+  '': ['', 'neutral', 'primary', 'danger'],
+};
+
+/**
+ * Port of resolveLegacyButtonVariant (Button.legacy.ts).
+ * @returns {{ variant: string, isDestructive: boolean, confident: boolean }}
+ */
+const resolve = (kind, palette, variant) => {
+  const isDanger = palette === 'danger';
+  const v = variant || (kind === 'icon' ? 'ghost' : 'soft');
+  const okTable = kind === 'icon' ? ICON_OK : BUTTON_OK;
+  const confident = (okTable[variant || ''] || []).includes(palette || '');
+  const valid = kind === 'icon' ? NEW_ICON : NEW_BUTTON;
+
+  if (valid.has(v) && v !== 'ghost') {
+    const capable = v === 'secondary' || v === 'subtle' || v === 'ghost';
+    return { variant: v, isDestructive: isDanger && capable, confident };
+  }
+  switch (v) {
+    case 'solid':
+      return {
+        variant: isDanger ? 'danger' : 'primary',
+        isDestructive: false,
+        confident,
+      };
+    case 'outline':
+      return { variant: 'secondary', isDestructive: isDanger, confident };
+    case 'ghost':
+      return { variant: 'ghost', isDestructive: isDanger, confident };
+    case 'soft':
+      return {
+        variant: kind === 'icon' ? 'ghost' : 'subtle',
+        isDestructive: isDanger,
+        confident,
+      };
+    default:
+      // Unknown variant (Chakra's `link`/`plain`/`surface`, a typo): what the
+      // runtime renders — the component default — and leave it to a human.
+      return {
+        variant: kind === 'icon' ? 'ghost' : 'subtle',
+        isDestructive: isDanger,
+        confident: false,
+      };
+  }
+};
+
+function migrateElement(j, file, reporter, opening, kind) {
+  const label = componentLabel(opening);
+  const cp = readAttr(opening, 'colorPalette');
+  const cs = readAttr(opening, 'colorScheme');
+  const v = readAttr(opening, 'variant');
+  const line = lineOf(opening);
+
+  // Spreads may carry the old props; we migrate the static ones, a human checks.
+  const sp = spreads(opening);
+  if (sp.length) {
+    reporter.site({
+      line,
+      component: label,
+      prop: '{...spread}',
+      kind: 'spread',
+      note: 'may carry colorPalette/variant — check by hand',
+      source: sp.map((s) => textOf(j, file, s)).join(' '),
+    });
+  }
+
+  const dynamic = [
+    ['colorPalette', cp],
+    ['colorScheme', cs],
+    ['variant', v],
+  ].filter(([, a]) => a.kind === 'dynamic');
+  if (dynamic.length) {
+    for (const [prop, a] of dynamic) {
+      reporter.site({
+        line: lineOf(a.attr),
+        component: label,
+        prop,
+        kind: 'dynamic',
+        note: 'not migrated',
+        source: textOf(j, file, a.attr),
+      });
+    }
+    return false;
+  }
+
+  const paletteAttr = cp.kind === 'static' ? cp : cs;
+  const palette = paletteAttr.kind === 'static' ? paletteAttr.value : '';
+  const variant = v.kind === 'static' ? v.value : '';
+
+  // Already 5.0: a role variant and no colour axis.
+  const valid = kind === 'icon' ? NEW_ICON : NEW_BUTTON;
+  if (!palette && cp.kind === 'absent' && cs.kind === 'absent') {
+    if (variant && valid.has(variant)) return false;
+    // IconButton with nothing set is already the 5.0 default (ghost).
+    if (kind === 'icon' && !variant) return false;
+  }
+
+  const r = resolve(kind, palette, variant);
+  const index = removeAttrs(opening, [
+    'colorPalette',
+    'colorScheme',
+    'variant',
+  ]);
+
+  let anchor = null;
+  if (!(kind === 'icon' && r.variant === 'ghost')) {
+    // Before any spread when there was no attribute to replace, so a spread
+    // keeps the precedence it had over the (absent) old variant.
+    anchor = insertAttr(
+      opening,
+      stringAttr(j, 'variant', r.variant),
+      index < 0 ? 0 : index
+    );
+  }
+  if (r.isDestructive && !hasAttr(opening, 'isDestructive')) {
+    const at = anchor
+      ? opening.attributes.indexOf(anchor) + 1
+      : index < 0
+        ? 0
+        : index;
+    const d = insertAttr(opening, boolAttr(j, 'isDestructive'), at);
+    anchor = anchor || d;
+  }
+
+  if (!r.confident) {
+    const was = `colorPalette=${palette ? `"${palette}"` : '—'} variant=${
+      variant ? `"${variant}"` : '—'
+    }`;
+    const now = `variant="${r.variant}"${r.isDestructive ? ' isDestructive' : ''}`;
+    addTodo(
+      j,
+      opening,
+      `${was} has no exact 5.0 role; set to ${now} — pick one`,
+      anchor
+    );
+    reporter.site({
+      line,
+      component: label,
+      prop: 'colorPalette+variant',
+      kind: 'todo',
+      note: `${was} → ${now}`,
+      source: `<${label} ${was}>`,
+    });
+  }
+  return true;
+}
+
+function transform(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const reporter =
+    (options && options.__reporter) || createReporter(api, file, NAME);
+  let changed = 0;
+
+  for (const [exported, kind] of [
+    ['Button', 'button'],
+    ['IconButton', 'icon'],
+  ]) {
+    for (const p of findElements(j, root, exported)) {
+      if (migrateElement(j, file, reporter, p.node, kind)) changed += 1;
+    }
+  }
+  if (!changed) return undefined;
+  reporter.count('elements migrated', changed);
+  return root.toSource();
+}
+
+module.exports = transform;
+module.exports.parser = 'tsx';
+module.exports.resolve = resolve;

package/codemods/5.0/card-gradient.js

@@ -0,0 +1,72 @@
+/**
+ * logician-ui 5.0 codemod — card-gradient
+ *
+ * 5.0 removes `<Card variant="gradient">` (BAZE has no gradient surfaces). The
+ * attribute is removed (→ the default card), a TODO comment is left, and the
+ * site is reported so a designer can pick `wash`/`elevated` or a custom bg.
+ * A dynamic `variant={…}` on Card is reported too — it may evaluate to
+ * 'gradient'.
+ */
+'use strict';
+
+const {
+  findElements,
+  readAttr,
+  removeAttrs,
+  addTodo,
+  textOf,
+  lineOf,
+  componentLabel,
+  createReporter,
+} = require('./lib/shared');
+
+const NAME = 'card-gradient';
+
+function transform(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+  const reporter =
+    (options && options.__reporter) || createReporter(api, file, NAME);
+  let changed = 0;
+
+  for (const p of findElements(j, root, 'Card')) {
+    const opening = p.node;
+    const label = componentLabel(opening);
+    const v = readAttr(opening, 'variant');
+    if (v.kind === 'dynamic') {
+      reporter.site({
+        line: lineOf(v.attr),
+        component: label,
+        prop: 'variant',
+        kind: 'dynamic',
+        note: "may be 'gradient', removed in 5.0",
+        source: textOf(j, file, v.attr),
+      });
+      continue;
+    }
+    if (v.kind !== 'static' || v.value !== 'gradient') continue;
+    const index = removeAttrs(opening, ['variant']);
+    const anchor = opening.attributes[index] || opening.attributes[0];
+    addTodo(
+      j,
+      opening,
+      'Card variant="gradient" was removed; now the default card — choose wash/elevated or a bg',
+      anchor
+    );
+    reporter.site({
+      line: lineOf(opening),
+      component: label,
+      prop: 'variant',
+      kind: 'todo',
+      note: 'gradient removed',
+      source: textOf(j, file, v.attr),
+    });
+    changed += 1;
+  }
+  if (!changed) return undefined;
+  reporter.count('elements migrated', changed);
+  return root.toSource();
+}
+
+module.exports = transform;
+module.exports.parser = 'tsx';