@pantheon-systems/pds-toolkit-react 2.0.0-alpha.59 → 2.0.0-alpha.60

package/codemods/v1-to-v2/css-token-renames.js

@@ -0,0 +1,186 @@
+#!/usr/bin/env node
+/**
+ * css-token-renames
+ *
+ * Find-and-replace script for PDS design token renames in CSS and SCSS files.
+ * Driven entirely by tokens.renames and tokens.patterns in the published
+ * @pantheon-systems/pds-design-tokens codemods mappings.
+ *
+ * Handles:
+ *   - Exact token renames: --pds-old-name → --pds-new-name
+ *   - Wildcard patterns:   --pds-badge-*-secondary → --pds-badge-*-muted
+ *   - CSS utility classes: pds-color-bg-default → pds-color-surface-default
+ *     (in CSS selectors; JSX className usage is handled by css-class-renames)
+ *
+ * Usage (from a consuming app, after installing @pantheon-systems/pds-toolkit-react):
+ *   node node_modules/@pantheon-systems/pds-toolkit-react/codemods/v1-to-v2/css-token-renames.js <path>
+ *   node node_modules/@pantheon-systems/pds-toolkit-react/codemods/v1-to-v2/css-token-renames.js src/apps/workspace/
+ *
+ * Usage (from a local checkout of this repo):
+ *   node codemods/v1-to-v2/css-token-renames.js <path>
+ *
+ * Options:
+ *   --dry             Preview changes without writing files
+ *   --only=<category> Restrict to a token category (e.g. animation, color, spacing)
+ *   --ext=css,scss    File extensions to scan (default: css,scss)
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { createRequire } from 'module';
+import { globSync } from 'glob';
+
+// JSON imports via createRequire — works in both CJS and ESM contexts
+const require = createRequire(import.meta.url);
+const mappings = require('@pantheon-systems/pds-design-tokens/codemods/v1-to-v2/mappings.json');
+
+// --- Argument parsing ---
+
+const args = process.argv.slice(2);
+const dry = args.includes('--dry');
+const onlyArg = args.find((a) => a.startsWith('--only='));
+const extArg = args.find((a) => a.startsWith('--ext='));
+const targetPaths = args.filter((a) => !a.startsWith('--'));
+
+const onlyCategory = onlyArg ? onlyArg.replace('--only=', '').trim() : null;
+const extensions = extArg
+	? extArg
+			.replace('--ext=', '')
+			.split(',')
+			.map((e) => e.trim())
+	: ['css', 'scss'];
+
+if (targetPaths.length === 0) {
+	console.error(
+		'Usage: node codemods/v1-to-v2/css-token-renames.js <path> [--dry] [--only=category] [--ext=css,scss]',
+	);
+	process.exit(1);
+}
+
+// --- Build rename and pattern lists ---
+
+function buildRenames() {
+	const exact = []; // { from, to }
+	const patterns = []; // { regex, replacement, from }
+
+	for (const entry of mappings.tokens.renames) {
+		if (!entry.from || !entry.to || entry.from === entry.to) continue;
+		if (onlyCategory && entry.category !== onlyCategory) continue;
+		exact.push({ from: entry.from, to: entry.to });
+	}
+
+	for (const entry of mappings.tokens.patterns) {
+		if (!entry.from || !entry.to || entry.from === entry.to) continue;
+		if (onlyCategory && entry.category !== onlyCategory) continue;
+
+		// Convert wildcard pattern to regex.
+		// Escape special regex chars except *, then replace * with a capture group.
+		const escaped = entry.from
+			.replace(/[.+?^${}()|[\]\\]/g, '\\$&')
+			.replace(/\*/g, '([\\w-]+)');
+		const regex = new RegExp(escaped, 'g');
+
+		// Build replacement — each * in `to` becomes $1, $2, etc.
+		let captureIndex = 0;
+		const replacement = entry.to.replace(/\*/g, () => `$${++captureIndex}`);
+
+		patterns.push({ regex, replacement, from: entry.from });
+	}
+
+	return { exact, patterns };
+}
+
+const { exact: EXACT_RENAMES, patterns: PATTERNS } = buildRenames();
+
+// --- File discovery ---
+
+function findFiles(targetPath) {
+	const extPattern =
+		extensions.length === 1 ? extensions[0] : `{${extensions.join(',')}}`;
+
+	if (fs.existsSync(targetPath) && fs.statSync(targetPath).isFile()) {
+		return [targetPath];
+	}
+
+	if (fs.existsSync(targetPath) && fs.statSync(targetPath).isDirectory()) {
+		return globSync(`**/*.${extPattern}`, {
+			cwd: targetPath,
+			absolute: true,
+			ignore: ['**/node_modules/**', '**/dist/**', '**/build/**'],
+		});
+	}
+
+	return globSync(targetPath, {
+		absolute: true,
+		ignore: ['**/node_modules/**', '**/dist/**', '**/build/**'],
+	});
+}
+
+// --- Apply renames to file content ---
+
+function applyRenames(content) {
+	let result = content;
+	let changed = false;
+	const appliedRenames = [];
+
+	// Exact renames
+	for (const { from, to } of EXACT_RENAMES) {
+		if (!result.includes(from)) continue;
+		const regex = new RegExp(from.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g');
+		const next = result.replace(regex, to);
+		if (next !== result) {
+			appliedRenames.push(`  ${from} → ${to}`);
+			result = next;
+			changed = true;
+		}
+	}
+
+	// Wildcard patterns
+	for (const { regex, replacement, from } of PATTERNS) {
+		regex.lastIndex = 0;
+		const next = result.replace(regex, replacement);
+		if (next !== result) {
+			appliedRenames.push(`  ${from} → ${replacement} (pattern)`);
+			result = next;
+			changed = true;
+		}
+	}
+
+	return { result, changed, appliedRenames };
+}
+
+// --- Main ---
+
+let totalFiles = 0;
+let changedFiles = 0;
+let totalRenames = 0;
+
+const allFiles = targetPaths.flatMap(findFiles);
+
+if (allFiles.length === 0) {
+	console.log('No CSS/SCSS files found matching the given path(s).');
+	process.exit(0);
+}
+
+for (const filePath of allFiles) {
+	const content = fs.readFileSync(filePath, 'utf8');
+	const { result, changed, appliedRenames } = applyRenames(content);
+
+	totalFiles++;
+	if (!changed) continue;
+
+	changedFiles++;
+	totalRenames += appliedRenames.length;
+
+	console.log(
+		`${dry ? '[dry] ' : ''}${path.relative(process.cwd(), filePath)}`,
+	);
+	appliedRenames.forEach((r) => console.log(r));
+
+	if (!dry) fs.writeFileSync(filePath, result, 'utf8');
+}
+
+console.log(
+	`\n${dry ? '[dry run] ' : ''}${changedFiles}/${totalFiles} files changed, ${totalRenames} renames applied.`,
+);
+if (dry && changedFiles > 0) console.log('Run without --dry to apply changes.');

package/codemods/v1-to-v2/mappings.json

@@ -696,13 +696,6 @@
 				"replacement": "Use variant=\"link\"",
 				"reason": "The 'inline' button variant has been renamed to 'link' to describe its appearance (a text link) rather than its placement, and is no longer treated as legacy."
 			},
-			{
-				"component": "MenuButton",
-				"prop": "variant",
-				"oldValue": "navbar",
-				"replacement": "Use variant=\"subtle\"",
-				"reason": "The navbar variant has been removed in v2. Use subtle instead. The expanded-state transparency and icon-color behavior previously specific to the navbar variant now applies to all subtle MenuButton triggers automatically."
-			},
 			{
 				"component": "IconButton",
 				"prop": "variant",
@@ -1350,6 +1343,91 @@
 				"old": "pds-overline-text--lg",
 				"new": "pds-overline-l",
 				"reason": "Overline text size variants replaced with standalone size-based classes."
+			},
+			{
+				"old": "pds-color-bg-default",
+				"new": "pds-color-surface-default",
+				"reason": "Background utility classes renamed to the surface naming convention. Mirrors the CSS custom property rename of the same name."
+			},
+			{
+				"old": "pds-color-bg-default-secondary",
+				"new": "pds-color-surface-default-secondary",
+				"reason": "Background utility classes renamed to the surface naming convention. Mirrors the CSS custom property rename of the same name."
+			},
+			{
+				"old": "pds-color-bg-reverse",
+				"new": "pds-color-surface-reverse",
+				"reason": "Background utility classes renamed to the surface naming convention. Mirrors the CSS custom property rename of the same name."
+			},
+			{
+				"old": "pds-color-bg-transparent",
+				"new": "pds-color-surface-transparent",
+				"reason": "Background utility classes renamed to the surface naming convention."
+			},
+			{
+				"old": "pds-color-bg-info",
+				"new": "pds-color-surface-info",
+				"reason": "Status background utility classes renamed to the surface naming convention."
+			},
+			{
+				"old": "pds-color-bg-success",
+				"new": "pds-color-surface-success",
+				"reason": "Status background utility classes renamed to the surface naming convention."
+			},
+			{
+				"old": "pds-color-bg-warning",
+				"new": "pds-color-surface-warning",
+				"reason": "Status background utility classes renamed to the surface naming convention."
+			},
+			{
+				"old": "pds-color-bg-critical",
+				"new": "pds-color-surface-critical",
+				"reason": "Status background utility classes renamed to the surface naming convention."
+			},
+			{
+				"old": "pds-color-bg-discovery",
+				"new": "pds-color-surface-discovery",
+				"reason": "Status background utility classes renamed to the surface naming convention."
+			},
+			{
+				"old": "pds-color-fg-default",
+				"new": "pds-color-foreground-default",
+				"reason": "Foreground utility classes renamed to the foreground naming convention. Mirrors the CSS custom property rename of the same name."
+			},
+			{
+				"old": "pds-color-fg-default-secondary",
+				"new": "pds-color-foreground-default-secondary",
+				"reason": "Foreground utility classes renamed to the foreground naming convention. Mirrors the CSS custom property rename of the same name."
+			},
+			{
+				"old": "pds-color-fg-reverse",
+				"new": "pds-color-foreground-reverse",
+				"reason": "Foreground utility classes renamed to the foreground naming convention. Mirrors the CSS custom property rename of the same name."
+			},
+			{
+				"old": "pds-color-fg-info",
+				"new": "pds-color-foreground-info",
+				"reason": "Status foreground utility classes renamed to the foreground naming convention."
+			},
+			{
+				"old": "pds-color-fg-success",
+				"new": "pds-color-foreground-success",
+				"reason": "Status foreground utility classes renamed to the foreground naming convention."
+			},
+			{
+				"old": "pds-color-fg-warning",
+				"new": "pds-color-foreground-warning",
+				"reason": "Status foreground utility classes renamed to the foreground naming convention."
+			},
+			{
+				"old": "pds-color-fg-critical",
+				"new": "pds-color-foreground-critical",
+				"reason": "Status foreground utility classes renamed to the foreground naming convention."
+			},
+			{
+				"old": "pds-color-fg-discovery",
+				"new": "pds-color-foreground-discovery",
+				"reason": "Status foreground utility classes renamed to the foreground naming convention."
 			}
 		],
 		"removals": [

package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.input.tsx

@@ -29,3 +29,27 @@ const J = () => <div className='pds-button--subtle' />;
 // Dynamic class — cannot transform, leave as-is
 const cls = 'pds-button--navbar';
 const K = () => <div className={cls} />;
+
+// Bare ternary — direct rename in one branch, safe removal in the other
+const L = ({ active }: { active: boolean }) => (
+	<div
+		className={active ? 'pds-button--navbar' : 'pds-typography--product'}
+	/>
+);
+
+// Bare logical expression — right-hand side is a flagged class
+const M = ({ isOpen }: { isOpen: boolean }) => (
+	<div className={isOpen && 'pds-color-bg-brand'} />
+);
+
+// Ternary nested inside a template literal interpolation
+const N = ({ isEmployee }: { isEmployee: boolean }) => (
+	<div
+		className={`chat-bubble ${
+			isEmployee ? 'pds-button--navbar' : 'pds-ts-9xl'
+		}`}
+	/>
+);
+
+// Non-className prop that still ends in "ClassName"
+const O = () => <Icon iconClassName='pds-button--navbar' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.output.tsx

@@ -29,3 +29,27 @@ const J = () => <div className='pds-button--subtle' />;
 // Dynamic class — cannot transform, leave as-is
 const cls = 'pds-button--navbar';
 const K = () => <div className={cls} />;
+
+// Bare ternary — direct rename in one branch, safe removal in the other
+const L = ({ active }: { active: boolean }) => (
+	<div
+		className={active ? "pds-button--subtle" : ""}
+	/>
+);
+
+// Bare logical expression — right-hand side is a flagged class
+const M = ({ isOpen }: { isOpen: boolean }) => (
+	<div className={isOpen && 'pds-color-bg-brand'} />
+);
+
+// Ternary nested inside a template literal interpolation
+const N = ({ isEmployee }: { isEmployee: boolean }) => (
+	<div
+		className={`chat-bubble ${
+			isEmployee ? "pds-button--subtle" : "pds-ts-8xl"
+		}`}
+	/>
+);
+
+// Non-className prop that still ends in "ClassName"
+const O = () => <Icon iconClassName="pds-button--subtle" />;

package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.input.tsx

@@ -27,5 +27,34 @@ const G = () => <div className='pds-overline-m' />;
 const cls = 'pds-overline-text';
 const H = () => <div className={cls} />;
 
+// Bare ternary — both branches are string literals
+const J = ({ active }: { active: boolean }) => (
+	<div className={active ? 'pds-overline-text' : 'pds-overline-text--sm'} />
+);
+
+// Bare logical expression — right-hand side is a string literal
+const K = ({ isOpen }: { isOpen: boolean }) => (
+	<div className={isOpen && 'pds-overline-text'} />
+);
+
+// Ternary nested inside a template literal interpolation
+const L = ({ isEmployee }: { isEmployee: boolean }) => (
+	<div
+		className={`chat-bubble ${
+			isEmployee ? 'pds-overline-text--sm' : 'pds-overline-text--lg'
+		}`}
+	/>
+);
+
+// Ternary with one literal branch and one dynamic branch — only the literal
+// branch can be renamed; the dynamic branch is left untouched
+const M = ({ active, fallbackClass }: { active: boolean; fallbackClass: string }) => (
+	<div className={active ? 'pds-overline-text' : fallbackClass} />
+);
+
+// Non-className prop that still ends in "ClassName" — common for components
+// with multiple styleable slots
+const N = () => <Icon iconClassName='pds-overline-text' />;
+
 // Non-className attribute — should be left alone
 const I = () => <div id='pds-overline-text' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.output.tsx

@@ -27,5 +27,34 @@ const G = () => <div className='pds-overline-m' />;
 const cls = 'pds-overline-text';
 const H = () => <div className={cls} />;
 
+// Bare ternary — both branches are string literals
+const J = ({ active }: { active: boolean }) => (
+	<div className={active ? "pds-overline-m" : "pds-overline-s"} />
+);
+
+// Bare logical expression — right-hand side is a string literal
+const K = ({ isOpen }: { isOpen: boolean }) => (
+	<div className={isOpen && "pds-overline-m"} />
+);
+
+// Ternary nested inside a template literal interpolation
+const L = ({ isEmployee }: { isEmployee: boolean }) => (
+	<div
+		className={`chat-bubble ${
+			isEmployee ? "pds-overline-s" : "pds-overline-l"
+		}`}
+	/>
+);
+
+// Ternary with one literal branch and one dynamic branch — only the literal
+// branch can be renamed; the dynamic branch is left untouched
+const M = ({ active, fallbackClass }: { active: boolean; fallbackClass: string }) => (
+	<div className={active ? "pds-overline-m" : fallbackClass} />
+);
+
+// Non-className prop that still ends in "ClassName" — common for components
+// with multiple styleable slots
+const N = () => <Icon iconClassName="pds-overline-m" />;
+
 // Non-className attribute — should be left alone
 const I = () => <div id='pds-overline-text' />;

package/codemods/v1-to-v2/transforms/css-class-removals.js

@@ -1,7 +1,9 @@
 /**
  * Codemod: css-class-removals
  *
- * Handles removed PDS CSS utility classes in JSX className attributes.
+ * Handles removed PDS CSS utility classes in JSX className attributes — and
+ * any other prop ending in "ClassName" (e.g. iconClassName, labelClassName),
+ * a common pattern for components with multiple styleable slots.
  * Driven entirely by cssClasses.removals in mappings.json.
  *
  * Three kinds of change:
@@ -21,6 +23,17 @@
  *    these manually. Removing them silently would break visible styles with
  *    no clear path forward.
  *
+ * Handles ternaries / logical expressions, as a bare className expression or
+ * nested inside a template literal's ${...} slot, as long as every branch
+ * reached is itself a plain string literal:
+ *   className={isActive ? 'pds-button--navbar' : 'other-class'}
+ *   className={`base ${isEmployee ? 'pds-lead-text' : 'pds-ts-9xl'}`}
+ *   className={isOpen && 'pds-button--navbar'}
+ *
+ * Does not handle truly dynamic class names (a variable, function call, or
+ * any branch of a ternary/logical expression that isn't itself a string
+ * literal).
+ *
  * Usage:
  *   npx jscodeshift -t codemods/v1-to-v2/transforms/css-class-removals.js \
  *     --extensions=tsx,ts,jsx,js \
@@ -30,6 +43,7 @@
  */
 
 const path = require('path');
+
 const mappings = require(path.join(__dirname, '../mappings.json'));
 
 // Extract the first pds-* class name from a replacement string, if present.
@@ -71,11 +85,11 @@ function buildLookups() {
 	return { renames, removals, flags };
 }
 
-const { renames: RENAMES, removals: REMOVALS, flags: FLAGS } = buildLookups();
+const { flags: FLAGS, removals: REMOVALS, renames: RENAMES } = buildLookups();
 
 // Process a space-separated class string.
 // Returns { result, changed, flagged[] }
-function processClasses(classString, filePath) {
+function processClasses(classString) {
 	let changed = false;
 	const flagged = [];
 
@@ -107,6 +121,52 @@ function processClasses(classString, filePath) {
 	return { result: normalised, changed: didChange, flagged };
 }
 
+// Recursively process any string-literal branch reachable from `node`
+// without crossing into a non-literal value — i.e. it descends into
+// ternaries (ConditionalExpression) and logical expressions (&&/||),
+// processing each branch that is itself a string literal, but leaves
+// anything else (a variable, a function call, a member expression, ...)
+// untouched since its value isn't knowable statically. Returns the
+// (possibly replaced) node, whether anything changed, and any flagged
+// classes found along the way. Does not mutate in place, so callers must
+// reassign the returned node back onto its parent.
+function processStringLiteralBranches(node, j) {
+	if (!node) return { node, changed: false, flagged: [] };
+
+	if (node.type === 'StringLiteral' || node.type === 'Literal') {
+		const { changed, flagged, result } = processClasses(node.value);
+		return changed
+			? { node: j.stringLiteral(result), changed: true, flagged }
+			: { node, changed: false, flagged };
+	}
+
+	if (node.type === 'ConditionalExpression') {
+		const consequent = processStringLiteralBranches(node.consequent, j);
+		const alternate = processStringLiteralBranches(node.alternate, j);
+		if (consequent.changed) node.consequent = consequent.node;
+		if (alternate.changed) node.alternate = alternate.node;
+		return {
+			node,
+			changed: consequent.changed || alternate.changed,
+			flagged: [...consequent.flagged, ...alternate.flagged],
+		};
+	}
+
+	if (node.type === 'LogicalExpression') {
+		const left = processStringLiteralBranches(node.left, j);
+		const right = processStringLiteralBranches(node.right, j);
+		if (left.changed) node.left = left.node;
+		if (right.changed) node.right = right.node;
+		return {
+			node,
+			changed: left.changed || right.changed,
+			flagged: [...left.flagged, ...right.flagged],
+		};
+	}
+
+	return { node, changed: false, flagged: [] };
+}
+
 module.exports = function transform(file, api) {
 	const j = api.jscodeshift;
 	const root = j(file.source);
@@ -115,18 +175,15 @@ module.exports = function transform(file, api) {
 	let changed = false;
 
 	root
-		.find(j.JSXAttribute, { name: { name: 'className' } })
+		.find(j.JSXAttribute)
+		.filter((nodePath) => /className$/i.test(nodePath.node.name.name))
 		.forEach((nodePath) => {
 			const { value } = nodePath.node;
 			if (!value) return;
 
 			// className="pds-button--navbar foo"
 			if (value.type === 'StringLiteral') {
-				const {
-					result,
-					changed: c,
-					flagged,
-				} = processClasses(value.value, file.path);
+				const { changed: c, flagged, result } = processClasses(value.value);
 				if (c) {
 					nodePath.node.value = j.stringLiteral(result);
 					changed = true;
@@ -138,29 +195,14 @@ module.exports = function transform(file, api) {
 			if (value.type !== 'JSXExpressionContainer') return;
 			const { expression } = value;
 
-			// className={'pds-button--navbar'}
-			if (expression.type === 'StringLiteral') {
-				const {
-					result,
-					changed: c,
-					flagged,
-				} = processClasses(expression.value, file.path);
-				if (c) {
-					value.expression = j.stringLiteral(result);
-					changed = true;
-				}
-				flagged.forEach((cls) => allFlagged.push(cls));
-				return;
-			}
-
-			// className={`pds-button--navbar ${x}`}
+			// className={`pds-button--navbar ${isActive ? 'a' : 'b'}`}
 			if (expression.type === 'TemplateLiteral') {
 				expression.quasis.forEach((quasi) => {
 					const {
-						result,
 						changed: c,
 						flagged,
-					} = processClasses(quasi.value.raw, file.path);
+						result,
+					} = processClasses(quasi.value.raw);
 					if (c) {
 						quasi.value.raw = result;
 						quasi.value.cooked = result;
@@ -168,7 +210,35 @@ module.exports = function transform(file, api) {
 					}
 					flagged.forEach((cls) => allFlagged.push(cls));
 				});
+
+				expression.expressions.forEach((expr, index) => {
+					const {
+						changed: c,
+						flagged,
+						node: processed,
+					} = processStringLiteralBranches(expr, j);
+					if (c) {
+						expression.expressions[index] = processed;
+						changed = true;
+					}
+					flagged.forEach((cls) => allFlagged.push(cls));
+				});
+				return;
+			}
+
+			// className={'pds-button--navbar'}
+			// className={isActive ? 'pds-button--navbar' : 'other-class'}
+			// className={isOpen && 'pds-button--navbar'}
+			const {
+				changed: c,
+				flagged,
+				node: processed,
+			} = processStringLiteralBranches(expression, j);
+			if (c) {
+				value.expression = processed;
+				changed = true;
 			}
+			flagged.forEach((cls) => allFlagged.push(cls));
 		});
 
 	// Emit warnings for classes that need manual attention