@mittwald/flow-codemods 1.1.0-next.10

package/dist/verify/align-to-combine.d.ts

@@ -0,0 +1,11 @@
+import type { Verifier } from "../checks/types.js";
+/**
+ * Shape "residual pattern + typecheck" (~14 of the 23 entries). Translated from
+ * the catalogue's own verify prose: "tsc --noEmit passes, and `rg '\bAlign\b'`
+ * finds no Flow import." The pattern half is decidable — `search` runs it, and
+ * `ok` reflects it fully — so there is no separate judgement call left for a
+ * person and `hints` stays empty. The typecheck half is not decidable here
+ * (this package wraps no subprocess), so it stays a `typecheckHint`.
+ */
+export declare const verifier: Verifier;
+//# sourceMappingURL=align-to-combine.d.ts.map

package/dist/verify/align-to-combine.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"align-to-combine.d.ts","sourceRoot":"","sources":["../../src/verify/align-to-combine.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,QActB,CAAC"}

package/dist/verify/align-to-combine.js

@@ -0,0 +1,22 @@
+/**
+ * Shape "residual pattern + typecheck" (~14 of the 23 entries). Translated from
+ * the catalogue's own verify prose: "tsc --noEmit passes, and `rg '\bAlign\b'`
+ * finds no Flow import." The pattern half is decidable — `search` runs it, and
+ * `ok` reflects it fully — so there is no separate judgement call left for a
+ * person and `hints` stays empty. The typecheck half is not decidable here
+ * (this package wraps no subprocess), so it stays a `typecheckHint`.
+ */
+export const verifier = {
+    verify: async (context) => {
+        // Unrestricted extensions, translated from `rg '\bAlign\b'` (no `-t ts`):
+        // the codemod also rewrites the CSS class name and component tokens, so a
+        // residual `Align` can show up outside a `.ts`/`.tsx` file too.
+        const findings = await context.search(/\bAlign\b/);
+        return {
+            ok: findings.length === 0,
+            findings,
+            hints: [],
+            typecheckHint: "Run `tsc --noEmit` too: `Align`/`AlignProps` still resolve (this rename is a deprecation, not a removal), so a missed usage does not fail to compile — the residual-usage search above is the real check for that, not the type check.",
+        };
+    },
+};

package/dist/verify/overlay-controller-add-on-close-return-type.d.ts

@@ -0,0 +1,14 @@
+import type { Verifier } from "../checks/types.js";
+/**
+ * Shape "a person must judge it" (~6 of the 23 entries). Translated from the
+ * catalogue's own verify prose, which says outright that no compiler check
+ * catches this: the return type widened from `() => void` to `() => unknown`,
+ * so every previous handler stays assignable and `tsc --noEmit` passes
+ * unchanged whether or not a handler now vetoes a close/open it never meant to.
+ * `ok: true` here means only "nothing this module can decide is wrong" — not
+ * that the review happened, which is why the review instruction stays in
+ * `hints` rather than moving to `typecheckHint` alongside the (here, negative)
+ * fact about the typechecker.
+ */
+export declare const verifier: Verifier;
+//# sourceMappingURL=overlay-controller-add-on-close-return-type.d.ts.map

package/dist/verify/overlay-controller-add-on-close-return-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-controller-add-on-close-return-type.d.ts","sourceRoot":"","sources":["../../src/verify/overlay-controller-add-on-close-return-type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;GAUG;AACH,eAAO,MAAM,QAAQ,EAAE,QAUtB,CAAC"}

package/dist/verify/overlay-controller-add-on-close-return-type.js

@@ -0,0 +1,21 @@
+/**
+ * Shape "a person must judge it" (~6 of the 23 entries). Translated from the
+ * catalogue's own verify prose, which says outright that no compiler check
+ * catches this: the return type widened from `() => void` to `() => unknown`,
+ * so every previous handler stays assignable and `tsc --noEmit` passes
+ * unchanged whether or not a handler now vetoes a close/open it never meant to.
+ * `ok: true` here means only "nothing this module can decide is wrong" — not
+ * that the review happened, which is why the review instruction stays in
+ * `hints` rather than moving to `typecheckHint` alongside the (here, negative)
+ * fact about the typechecker.
+ */
+export const verifier = {
+    verify: async () => ({
+        ok: true,
+        findings: [],
+        hints: [
+            "Review each handler by hand for one that can return `false` — `executeHandlers` now treats that as a veto and cancels the close/open, even for a handler that returned `false` incidentally with no intent to block anything.",
+        ],
+        typecheckHint: "`tsc --noEmit` passes before and after either way: `() => unknown` accepts every previous `addOnClose`/`addOnOpen` handler, so no compiler check catches this one — the review above is the real check.",
+    }),
+};

package/dist/verify/tooltip-trigger-delay-type.d.ts

@@ -0,0 +1,13 @@
+import type { Verifier } from "../checks/types.js";
+/**
+ * Shape "typecheck alone suffices" (~3 of the 23 entries). Translated from the
+ * catalogue's own verify prose: "tsc --noEmit passes — a numeric `delay` is a
+ * type error, so no separate `rg` check is needed." There is nothing for
+ * `search` to run here — a residual numeric literal is a type-level fact, not a
+ * decidable text pattern — so this always returns `ok: true` with no further
+ * judgement call, and leans entirely on `typecheckHint`. That is not "done":
+ * the compiler run itself is outside what this package executes (no
+ * subprocess), so it stays a person's job.
+ */
+export declare const verifier: Verifier;
+//# sourceMappingURL=tooltip-trigger-delay-type.d.ts.map

package/dist/verify/tooltip-trigger-delay-type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger-delay-type.d.ts","sourceRoot":"","sources":["../../src/verify/tooltip-trigger-delay-type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;GASG;AACH,eAAO,MAAM,QAAQ,EAAE,QAQtB,CAAC"}

package/dist/verify/tooltip-trigger-delay-type.js

@@ -0,0 +1,18 @@
+/**
+ * Shape "typecheck alone suffices" (~3 of the 23 entries). Translated from the
+ * catalogue's own verify prose: "tsc --noEmit passes — a numeric `delay` is a
+ * type error, so no separate `rg` check is needed." There is nothing for
+ * `search` to run here — a residual numeric literal is a type-level fact, not a
+ * decidable text pattern — so this always returns `ok: true` with no further
+ * judgement call, and leans entirely on `typecheckHint`. That is not "done":
+ * the compiler run itself is outside what this package executes (no
+ * subprocess), so it stays a person's job.
+ */
+export const verifier = {
+    verify: async () => ({
+        ok: true,
+        findings: [],
+        hints: [],
+        typecheckHint: 'Run `tsc --noEmit` — a numeric `delay` on `TooltipTrigger` is a type error under the new signature (only `"default"` and `"long"` are accepted), so a clean typecheck is sufficient on its own.',
+    }),
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mittwald/flow-codemods",
+  "version": "1.1.0-next.10",
+  "type": "module",
+  "description": "Codemods and an upgrade CLI for consumers of Flow, mittwald's design system",
+  "homepage": "https://flow.mittwald.de",
+  "repository": "https://github.com/mittwald/flow",
+  "bin": {
+    "flow-codemods": "dist/cli.js"
+  },
+  "files": [
+    "dist",
+    "src/migrations/**/transform.ts",
+    "src/tools/to-remote-package.ts"
+  ],
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "scripts": {
+    "build": "tsx dev/generateCli.ts && tsc -p tsconfig.build.json",
+    "test:compile": "tsc --noEmit",
+    "test:unit": "vitest run"
+  },
+  "dependencies": {
+    "@inquirer/prompts": "^7.9.0",
+    "jscodeshift": "^17.3.0",
+    "picocolors": "^1.1.1",
+    "registry-url": "^7.2.0",
+    "semver": "^7.8.5"
+  },
+  "devDependencies": {
+    "@types/jscodeshift": "^17.3.0",
+    "@types/node": "^25.9.3",
+    "@types/semver": "^7.7.3",
+    "prettier": "^3.9.6",
+    "tsx": "^4.23.12",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.11",
+    "yaml": "^2.8.1"
+  }
+}

package/src/migrations/accent-box-color-to-background-color/transform.ts

@@ -0,0 +1,218 @@
+import type { Transform } from "jscodeshift";
+
+/**
+ * Moves the background value of `AccentBox` from `color` to `backgroundColor`
+ * (alpha.786).
+ *
+ * `color` did not go away, it changed meaning: it used to set the background
+ * (`"blue" | "green" | "gradient" | "neutral"`) and now sets the content color
+ * (`"default" | "dark" | "light" | "dark-static" | "light-static"`). A blanket
+ * rename would therefore break every element that already uses the new meaning.
+ * The transform decides per value instead: a value from the new content-color
+ * union stays on `color`, every other literal moves to `backgroundColor`.
+ *
+ * The scope is deliberately narrow. Only JSX elements that resolve to
+ * `AccentBox` — imported (named or as a namespace) from
+ * `@mittwald/flow-react-components` or
+ * `@mittwald/flow-remote-react-components`, including their subpath entries —
+ * are touched.
+ *
+ * Two cases are left alone, because both are undecidable without knowing the
+ * value:
+ *
+ * - Values it cannot read (`color={expression}`), and expressions that mix both
+ *   meanings (`color={flag ? "blue" : "dark"}`). The same expression means the
+ *   background in old code and the content color in new code, and a mix has no
+ *   single correct answer. An expression whose every value position is a
+ *   literal on the same side of the split _is_ decidable and gets renamed:
+ *   `color={flag ? "blue" : "green"}`.
+ * - An element that already carries `backgroundColor`. Moving `color` there would
+ *   silently overwrite the explicit value.
+ *
+ * Both keep their `color` prop and need a look by hand.
+ */
+const accentBoxColorToBackgroundColorTransform: Transform = (
+  fileInfo,
+  { j },
+) => {
+  const flowPackages = [
+    "@mittwald/flow-react-components",
+    "@mittwald/flow-remote-react-components",
+  ];
+  const affectedComponents = new Set(["AccentBox"]);
+  /** Values `color` still accepts — everything else was a background color. */
+  const contentColors = new Set([
+    "default",
+    "dark",
+    "light",
+    "dark-static",
+    "light-static",
+  ]);
+
+  const isFlowImport = (source: string): boolean =>
+    flowPackages.some((pkg) => source === pkg || source.startsWith(`${pkg}/`));
+
+  /** The value of a string literal, or `undefined` for anything dynamic. */
+  const literalValue = (node: unknown): string | undefined => {
+    if (!node || typeof node !== "object" || !("type" in node)) {
+      return undefined;
+    }
+    const { type } = node as { type: string };
+    if (type !== "StringLiteral" && type !== "Literal") {
+      return undefined;
+    }
+    const { value } = node as { value?: unknown };
+    return typeof value === "string" ? value : undefined;
+  };
+
+  /**
+   * Every literal that could become this attribute's value, or `undefined` when
+   * any of those positions is something we cannot read. The positions are the
+   * expression itself, both ternary branches, and the operands of `??`/`||` —
+   * plus only the right operand of `&&`, since `&&` yields its left operand
+   * only when that operand is falsy and a non-empty string never is.
+   *
+   * A list, not a single value, because this transform decides per attribute,
+   * not per literal: `color={flag ? "blue" : "dark"}` mixes a background with a
+   * content colour, and no single rename is right for both.
+   */
+  const valueLiterals = (node: unknown): string[] | undefined => {
+    const literal = literalValue(node);
+    if (literal !== undefined) {
+      return [literal];
+    }
+    if (!node || typeof node !== "object" || !("type" in node)) {
+      return undefined;
+    }
+    const typed = node as {
+      type: string;
+      operator?: string;
+      consequent?: unknown;
+      alternate?: unknown;
+      left?: unknown;
+      right?: unknown;
+    };
+    if (typed.type === "ConditionalExpression") {
+      const consequent = valueLiterals(typed.consequent);
+      const alternate = valueLiterals(typed.alternate);
+      return consequent && alternate
+        ? [...consequent, ...alternate]
+        : undefined;
+    }
+    if (typed.type === "LogicalExpression") {
+      const right = valueLiterals(typed.right);
+      if (right === undefined) {
+        return undefined;
+      }
+      if (typed.operator === "&&") {
+        return right;
+      }
+      const left = valueLiterals(typed.left);
+      return left ? [...left, ...right] : undefined;
+    }
+    return undefined;
+  };
+
+  const root = j(fileInfo.source, { parser: "tsx" });
+
+  // Local JSX identifier -> canonical component name (resolves `as` aliases).
+  const localToComponent = new Map<string, string>();
+  // Local names of `import * as Flow` namespace imports from a Flow package.
+  const flowNamespaces = new Set<string>();
+
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => isFlowImport(String(path.node.source.value)))
+    .forEach((path) => {
+      for (const specifier of path.node.specifiers ?? []) {
+        if (
+          specifier.type === "ImportSpecifier" &&
+          specifier.imported.type === "Identifier" &&
+          affectedComponents.has(specifier.imported.name)
+        ) {
+          localToComponent.set(
+            String(specifier.local?.name ?? specifier.imported.name),
+            String(specifier.imported.name),
+          );
+        } else if (
+          specifier.type === "ImportNamespaceSpecifier" &&
+          specifier.local
+        ) {
+          flowNamespaces.add(String(specifier.local.name));
+        }
+      }
+    });
+
+  if (localToComponent.size === 0 && flowNamespaces.size === 0) {
+    return fileInfo.source;
+  }
+
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+
+    let isAffected = false;
+    if (name.type === "JSXIdentifier") {
+      isAffected = localToComponent.has(name.name);
+    } else if (
+      name.type === "JSXMemberExpression" &&
+      name.object.type === "JSXIdentifier" &&
+      name.property.type === "JSXIdentifier"
+    ) {
+      isAffected =
+        flowNamespaces.has(name.object.name) &&
+        affectedComponents.has(name.property.name);
+    }
+
+    if (!isAffected) {
+      return;
+    }
+
+    const attributes = path.node.attributes ?? [];
+
+    const isNamed = (attribute: unknown, key: string): boolean =>
+      !!attribute &&
+      typeof attribute === "object" &&
+      (attribute as { type?: string }).type === "JSXAttribute" &&
+      (attribute as { name?: { type?: string; name?: string } }).name?.type ===
+        "JSXIdentifier" &&
+      (attribute as { name?: { name?: string } }).name?.name === key;
+
+    // An explicit `backgroundColor` is the new API already — never overwrite it.
+    if (attributes.some((attribute) => isNamed(attribute, "backgroundColor"))) {
+      return;
+    }
+
+    for (const attribute of attributes) {
+      if (!isNamed(attribute, "color") || attribute.type !== "JSXAttribute") {
+        continue;
+      }
+
+      const value = attribute.value;
+
+      const literals =
+        value?.type === "JSXExpressionContainer"
+          ? valueLiterals(value.expression)
+          : valueLiterals(value);
+
+      if (literals === undefined || literals.length === 0) {
+        continue;
+      }
+
+      // All-or-nothing. Every value has to be a background colour for the
+      // rename to be right; all content colours means the element already uses
+      // the new meaning, and a mix has no single correct answer.
+      const backgrounds = literals.filter(
+        (literal) => !contentColors.has(literal),
+      );
+      if (backgrounds.length !== literals.length) {
+        continue;
+      }
+
+      attribute.name = j.jsxIdentifier("backgroundColor");
+    }
+  });
+
+  return root.toSource();
+};
+
+export default accentBoxColorToBackgroundColorTransform;

package/src/migrations/action-prop-to-on-action/transform.ts

@@ -0,0 +1,110 @@
+import type { Transform } from "jscodeshift";
+
+/**
+ * Renames the `action` prop to `onAction` on `Action`.
+ *
+ * The scope is deliberately narrow. Only JSX elements that resolve to `Action`
+ * — imported (named or as a namespace) from `@mittwald/flow-react-components`
+ * or `@mittwald/flow-remote-react-components`, including their subpath entries
+ * — are touched. `Action` is not one of the generated remote components, but
+ * the remote package re-exports the `flr-universal` surface, which carries it.
+ * Same-named components from other packages are left untouched, and so is the
+ * `action` attribute of a plain `<form>`.
+ *
+ * An element that already carries `onAction` keeps it and only loses the stale
+ * `action` prop, which mirrors what the runtime fallback does: an explicit
+ * `onAction` wins.
+ */
+const actionPropToOnActionTransform: Transform = (fileInfo, { j }) => {
+  const flowPackages = [
+    "@mittwald/flow-react-components",
+    "@mittwald/flow-remote-react-components",
+  ];
+  const affectedComponents = new Set(["Action"]);
+
+  const isFlowImport = (source: string): boolean =>
+    flowPackages.some((pkg) => source === pkg || source.startsWith(`${pkg}/`));
+
+  const root = j(fileInfo.source, { parser: "tsx" });
+
+  // Local JSX identifier -> canonical component name (resolves `as` aliases).
+  const localToComponent = new Map<string, string>();
+  // Local names of `import * as Flow` namespace imports from a Flow package.
+  const flowNamespaces = new Set<string>();
+
+  root
+    .find(j.ImportDeclaration)
+    .filter((path) => isFlowImport(String(path.node.source.value)))
+    .forEach((path) => {
+      for (const specifier of path.node.specifiers ?? []) {
+        if (
+          specifier.type === "ImportSpecifier" &&
+          specifier.imported.type === "Identifier" &&
+          affectedComponents.has(specifier.imported.name)
+        ) {
+          localToComponent.set(
+            String(specifier.local?.name ?? specifier.imported.name),
+            String(specifier.imported.name),
+          );
+        } else if (
+          specifier.type === "ImportNamespaceSpecifier" &&
+          specifier.local
+        ) {
+          flowNamespaces.add(String(specifier.local.name));
+        }
+      }
+    });
+
+  if (localToComponent.size === 0 && flowNamespaces.size === 0) {
+    return fileInfo.source;
+  }
+
+  root.find(j.JSXOpeningElement).forEach((path) => {
+    const name = path.node.name;
+
+    let isAffected = false;
+    if (name.type === "JSXIdentifier") {
+      isAffected = localToComponent.has(name.name);
+    } else if (
+      name.type === "JSXMemberExpression" &&
+      name.object.type === "JSXIdentifier" &&
+      name.property.type === "JSXIdentifier"
+    ) {
+      isAffected =
+        flowNamespaces.has(name.object.name) &&
+        affectedComponents.has(name.property.name);
+    }
+
+    if (!isAffected) {
+      return;
+    }
+
+    const attributes = path.node.attributes ?? [];
+
+    const isNamed = (attribute: (typeof attributes)[number], key: string) =>
+      attribute.type === "JSXAttribute" &&
+      attribute.name.type === "JSXIdentifier" &&
+      attribute.name.name === key;
+
+    const hasOnAction = attributes.some((attribute) =>
+      isNamed(attribute, "onAction"),
+    );
+
+    if (hasOnAction) {
+      path.node.attributes = attributes.filter(
+        (attribute) => !isNamed(attribute, "action"),
+      );
+      return;
+    }
+
+    for (const attribute of attributes) {
+      if (isNamed(attribute, "action") && attribute.type === "JSXAttribute") {
+        attribute.name.name = "onAction";
+      }
+    }
+  });
+
+  return root.toSource();
+};
+
+export default actionPropToOnActionTransform;