@sps-woodland/codemods 8.53.7 → 8.53.9

package/migrate-wrapper-imports.mjs

@@ -0,0 +1,269 @@
+#!/usr/bin/env node
+// -----------------------------------------------------------------------
+// TEMPORARY TOOLING — slated for removal once consuming apps have migrated
+// off the @sps-woodland/<name> wrapper packages (buttons, cards,
+// content-row, etc.) and those wrapper packages are deleted from the
+// monorepo. Do not build new features on top of this script; it exists
+// purely to make that one-time migration mechanical. Delete this file (and
+// its "bin" entry in package.json) once the wrapper packages are gone.
+// -----------------------------------------------------------------------
+//
+// AST-based find-and-replace (via jscodeshift): rewrite imports of
+// @sps-woodland/<wrapper> packages (thin re-export shims) to import
+// directly from the @sps-woodland/core subpath they wrap. Also rewrites
+// the matching CSS/SCSS/LESS "@sps-woodland/<wrapper>/style.css" (or
+// "/lib/style.css") @import paths, since those are just as real a wrapper
+// dependency as the JS imports and are otherwise invisible to a JS-only
+// codemod. Does NOT touch anything else: no @spscommerce/ds-react, no
+// imported-name changes, no JSX, no package.json/lockfile edits.
+//
+// This is intentionally NOT part of the main jscodeshift transform
+// pipeline (main.js / src/transform.ts) — that pipeline migrates
+// @spscommerce/ds-react -> the wrapper packages, a different step with a
+// different data table. This script is its own bin so it can be run (and
+// versioned/removed) independently of that pipeline.
+//
+// Usage (from a consuming app's repo root):
+//   pnpm dlx --package=@sps-woodland/codemods migrate-wrapper-imports [srcDir] [--write] [--verbose]
+//
+// Defaults to a dry run (prints what would change). Pass --write to
+// actually modify files on disk.
+
+import { readdir, readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import jscodeshiftModule from "jscodeshift";
+
+const jscodeshift = jscodeshiftModule.default ?? jscodeshiftModule;
+
+// --- Wrapper package -> @sps-woodland/core subpath mapping -----------------
+// Derived by reading each wrapper's own src/index.ts re-export statement in
+// this monorepo (packages/@sps-woodland/<name>/src/index.ts) — do not
+// assume the mapping is "same name", some are exceptions.
+//
+// jsSubpath: subpath used for the bare package import, e.g.
+//   from "@sps-woodland/cards" -> from "@sps-woodland/core/cards"
+// cssSubpath: subpath used when importing "<wrapperName>/style.css" — for
+//   every package this matches jsSubpath EXCEPT "buttons", whose CSS still
+//   lives under the plural "buttons" path even though the JS export is the
+//   singular "button".
+const WRAPPER_TO_CORE = {
+  "action-bar": { jsSubpath: "action-bar", cssSubpath: "action-bar" },
+  "add-to-list": { jsSubpath: "add-to-list", cssSubpath: "add-to-list" },
+  "buttons": { jsSubpath: "button", cssSubpath: "buttons" }, // exception: singular JS, plural CSS
+  "cards": { jsSubpath: "cards", cssSubpath: "cards" },
+  "column-manager": { jsSubpath: "column-manager", cssSubpath: "column-manager" },
+  "content-row": { jsSubpath: "content-row", cssSubpath: "content-row" },
+  "content-tiles": { jsSubpath: "content-tiles", cssSubpath: "content-tiles" },
+  "dropdowns": { jsSubpath: "dropdowns", cssSubpath: "dropdowns" },
+  "editable-table": { jsSubpath: "editable-table", cssSubpath: "editable-table" },
+  "feedback-block": { jsSubpath: "feedback-block", cssSubpath: "feedback-block" },
+  "file-upload": { jsSubpath: "file-upload", cssSubpath: "file-upload" },
+  "filter-tiles": { jsSubpath: "filter-tiles", cssSubpath: "filter-tiles" },
+  "focused-task": { jsSubpath: "focused-task", cssSubpath: "focused-task" },
+  "growler": { jsSubpath: "growler", cssSubpath: "growler" },
+  "key-value-set": { jsSubpath: "key-value-set", cssSubpath: "key-value-set" },
+  "list-bar": { jsSubpath: "list-bar", cssSubpath: "list-bar" },
+  "matrix": { jsSubpath: "matrix", cssSubpath: "matrix" },
+  "modal": { jsSubpath: "modal", cssSubpath: "modal" },
+  "page-title": { jsSubpath: "page-title", cssSubpath: "page-title" },
+  "photo": { jsSubpath: "photo", cssSubpath: "photo" },
+  "product-bar": { jsSubpath: "product-bar", cssSubpath: "product-bar" },
+  "product-bar-vertical": { jsSubpath: "product-bar-vertical", cssSubpath: "product-bar-vertical" },
+  "progress-indicators": { jsSubpath: "progress-indicators", cssSubpath: "progress-indicators" },
+  "rich-text-editor": { jsSubpath: "rich-text-editor", cssSubpath: "rich-text-editor" },
+  "side-nav": { jsSubpath: "side-nav", cssSubpath: "side-nav" },
+  "sorting-header": { jsSubpath: "sorting-header", cssSubpath: "sorting-header" },
+  "tabs": { jsSubpath: "tabs", cssSubpath: "tabs" },
+  "tags": { jsSubpath: "tags", cssSubpath: "tags" },
+  "zero-state": { jsSubpath: "zero-state", cssSubpath: "zero-state" },
+};
+// Explicitly NOT wrappers — leave untouched: @sps-woodland/core (the target
+// itself), @sps-woodland/tokens, @sps-woodland/illustrations,
+// @sps-woodland/codemods (these ship real, independent code, not re-exports).
+
+const SCOPE = "@sps-woodland";
+const JS_EXTENSIONS = new Set([".ts", ".tsx", ".js", ".jsx", ".mjs", ".cjs"]);
+const CSS_EXTENSIONS = new Set([".css", ".scss", ".sass", ".less"]);
+const SKIP_DIRS = new Set(["node_modules", ".git", "dist", "build", "lib", "coverage"]);
+
+function resolveNewSource(oldSource) {
+  if (!oldSource.startsWith(`${SCOPE}/`)) return null;
+  const rest = oldSource.slice(SCOPE.length + 1); // e.g. "cards" or "cards/style.css"
+  const slashIdx = rest.indexOf("/");
+  const name = slashIdx === -1 ? rest : rest.slice(0, slashIdx);
+  const subRest = slashIdx === -1 ? "" : rest.slice(slashIdx); // "" or "/style.css" or deeper
+
+  const mapping = WRAPPER_TO_CORE[name];
+  if (!mapping) return null; // not a known wrapper package — leave untouched
+
+  if (subRest === "") return `${SCOPE}/core/${mapping.jsSubpath}`;
+  if (subRest === "/style.css") return `${SCOPE}/core/${mapping.cssSubpath}/style.css`;
+  // Unknown deep subpath (rare) — map using the JS subpath and preserve
+  // whatever followed the package name, best-effort.
+  return `${SCOPE}/core/${mapping.jsSubpath}${subRest}`;
+}
+
+// Parses the file with jscodeshift (Babel/TSX parser) and rewrites only the
+// string-literal module specifier of matching nodes in place — imported
+// names, JSX, comments, and formatting elsewhere are left to recast to
+// reprint unchanged.
+function transformSource(source) {
+  const j = jscodeshift.withParser("tsx");
+  const root = j(source);
+  const changes = []; // { oldSource, newSource }
+  const unknown = new Set();
+
+  function maybeRewrite(literalNode, applyNewValue) {
+    const value = literalNode.value;
+    if (typeof value !== "string" || !value.startsWith(`${SCOPE}/`)) return;
+
+    const newSource = resolveNewSource(value);
+    if (newSource === null) {
+      unknown.add(value.slice(SCOPE.length + 1).split("/")[0]);
+      return;
+    }
+    if (newSource === value) return;
+
+    applyNewValue(newSource);
+    changes.push({ oldSource: value, newSource });
+  }
+
+  // Static: import ... from "@sps-woodland/<name>"
+  root.find(j.ImportDeclaration).forEach((p) => {
+    const node = p.node.source;
+    maybeRewrite(node, (newValue) => {
+      node.value = newValue;
+      delete node.raw;
+      if (node.extra) delete node.extra.raw;
+    });
+  });
+
+  // require("@sps-woodland/<name>") and dynamic import("@sps-woodland/<name>")
+  // — with the tsx parser both are CallExpressions; dynamic import's callee
+  // is a distinct "Import" node type rather than an Identifier.
+  root.find(j.CallExpression).forEach((p) => {
+    const { callee } = p.node;
+    const isRequire = callee.type === "Identifier" && callee.name === "require";
+    const isDynamicImport = callee.type === "Import";
+    if (!isRequire && !isDynamicImport) return;
+
+    const arg = p.node.arguments[0];
+    if (!arg || typeof arg.value !== "string") return;
+    maybeRewrite(arg, (newValue) => {
+      arg.value = newValue;
+      delete arg.raw;
+      if (arg.extra) delete arg.extra.raw;
+    });
+  });
+
+  return {
+    changes,
+    unknown,
+    output: changes.length > 0 ? root.toSource() : source,
+  };
+}
+
+// Matches: @import [url(] ("|') @sps-woodland/<name><rest> (matching quote)
+// Only the two CSS subpath forms wrapper packages actually ship
+// ("/style.css" and "/lib/style.css") are rewritten — anything else for a
+// known package is left alone and flagged, since guessing wrong here fails
+// silently (no compiler to catch a bad CSS path).
+const CSS_IMPORT_RE =
+  /(@import\s+(?:url\(\s*)?)(["'])@sps-woodland\/([a-z-]+)((?:\/[^"']*)?)\2/g;
+
+function transformCssSource(source) {
+  const changes = []; // { oldSource, newSource }
+  const unknown = new Set();
+
+  const output = source.replace(CSS_IMPORT_RE, (match, prefix, quote, name, rest) => {
+    const mapping = WRAPPER_TO_CORE[name];
+    if (!mapping) {
+      unknown.add(name);
+      return match;
+    }
+    if (rest !== "/style.css" && rest !== "/lib/style.css") {
+      unknown.add(`${name}${rest}`);
+      return match;
+    }
+
+    const oldSource = `${SCOPE}/${name}${rest}`;
+    const newSource = `${SCOPE}/core/${mapping.cssSubpath}/style.css`;
+    changes.push({ oldSource, newSource });
+    return `${prefix}${quote}${newSource}${quote}`;
+  });
+
+  return { changes, unknown, output };
+}
+
+async function* walk(dir) {
+  const entries = await readdir(dir, { withFileTypes: true });
+  for (const entry of entries) {
+    if (SKIP_DIRS.has(entry.name)) continue;
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      yield* walk(full);
+    } else if (JS_EXTENSIONS.has(path.extname(entry.name)) || CSS_EXTENSIONS.has(path.extname(entry.name))) {
+      yield full;
+    }
+  }
+}
+
+async function main() {
+  const args = process.argv.slice(2);
+  const write = args.includes("--write");
+  const verbose = args.includes("--verbose");
+  const srcDir = args.find((a) => !a.startsWith("--")) ?? "src";
+
+  let filesChanged = 0;
+  let totalReplacements = 0;
+  const unknownPackagesSeen = new Set();
+
+  for await (const file of walk(srcDir)) {
+    const original = await readFile(file, "utf8");
+    const isCss = CSS_EXTENSIONS.has(path.extname(file));
+    let result;
+    try {
+      result = isCss ? transformCssSource(original) : transformSource(original);
+    } catch (err) {
+      console.error(`skipped (parse error): ${file} — ${err.message}`);
+      continue;
+    }
+
+    for (const name of result.unknown) unknownPackagesSeen.add(name);
+
+    if (result.changes.length > 0) {
+      filesChanged += 1;
+      totalReplacements += result.changes.length;
+      console.log(
+        `${write ? "updated" : "would update"}: ${file} (${result.changes.length} import${result.changes.length === 1 ? "" : "s"})`,
+      );
+      if (verbose) {
+        for (const { oldSource, newSource } of result.changes) {
+          console.log(`  - "${oldSource}" -> "${newSource}"`);
+        }
+      }
+      if (write) {
+        await writeFile(file, result.output, "utf8");
+      }
+    }
+  }
+
+  console.log("");
+  console.log(`${filesChanged} file(s), ${totalReplacements} import(s) ${write ? "rewritten" : "would be rewritten"}.`);
+  if (unknownPackagesSeen.size > 0) {
+    console.log(
+      `Note: found @sps-woodland/${[...unknownPackagesSeen].join(", @sps-woodland/")} — ` +
+        `either not a wrapper package (e.g. core/tokens/illustrations, left untouched on purpose) ` +
+        `or a subpath this script doesn't recognize. Review manually, or add it to WRAPPER_TO_CORE ` +
+        `if it's a wrapper re-export this script should also handle.`,
+    );
+  }
+  if (!write) {
+    console.log("Dry run only — re-run with --write to apply.");
+  }
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sps-woodland/codemods",
   "description": "SPS Woodland Design System codemods",
-  "version": "8.53.7",
+  "version": "8.53.9",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/master/packages/@sps-woodland/codemods",
@@ -12,7 +12,10 @@
     "pub": "pnpm pack && npm publish"
   },
   "main": "./main.js",
-  "bin": "./main.js",
+  "bin": {
+    "codemods": "./main.js",
+    "migrate-wrapper-imports": "./migrate-wrapper-imports.mjs"
+  },
   "publishConfig": {
     "access": "public"
   },