@pantheon-systems/pds-toolkit-react 2.0.0-alpha.7 → 2.0.0-alpha.71

package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/basic.input.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+	Avatar,
+	Button,
+	Card,
+	CodeBlock,
+	IconButton,
+	MenuButton,
+	Panel,
+	Spinner,
+	Switch,
+} from '@pantheon-systems/pds-toolkit-react';
+
+// Value rewrites — prop stays, value changes
+const A = () => <Button variant='brand-secondary'>Click</Button>;
+const B = () => <Button variant='navbar'>Click</Button>;
+const C = () => (
+	<MenuButton variant='navbar' id='menu' label='Menu' menuItems={[]} />
+);
+const D = () => (
+	<IconButton variant='critical-hover' iconName='x' label='Close' />
+);
+const E = () => <Avatar size='xl' />;
+
+// JSX expression container value rewrite
+const F = () => <Button variant={'brand-secondary'}>Click</Button>;
+
+// Unconditional prop removals
+const G = () => <Spinner colorType='full-color' />;
+const H = () => <CodeBlock colorType='dark' />;
+const I = () => (
+	<Panel
+		hasStatusIndicator
+		statusType='success'
+		typeLabels={{ success: 'OK' }}
+	/>
+);
+const J = () => (
+	<Switch
+		showStatusLabel
+		statusLabelPlacement='end'
+		onLabel='On'
+		offLabel='Off'
+	/>
+);
+
+// Conditional removal — remove only deprecated gradient values, leave valid values alone
+const K = () => <Card background='mint-gradient' />;
+const L = () => <Card background='sundown-gradient' />;
+const M = () => <Card background='default' />;
+
+// Already correct — should be left alone
+const N = () => <Button variant='secondary'>Click</Button>;
+
+// Non-PDS component — should be left alone
+const O = () => <div variant='brand-secondary' />;
+
+// Dynamic value — cannot transform, leave as-is
+const myVariant = 'brand-secondary';
+const P = () => <Button variant={myVariant}>Click</Button>;

package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/basic.output.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import {
+	Avatar,
+	Button,
+	Card,
+	CodeBlock,
+	IconButton,
+	MenuButton,
+	Panel,
+	Spinner,
+	Switch,
+} from '@pantheon-systems/pds-toolkit-react';
+
+// Value rewrites — prop stays, value changes
+const A = () => <Button variant="secondary">Click</Button>;
+const B = () => <Button variant="subtle">Click</Button>;
+const C = () => (
+	<MenuButton variant="subtle" id='menu' label='Menu' menuItems={[]} />
+);
+const D = () => (
+	<IconButton variant="critical" iconName='x' label='Close' />
+);
+const E = () => <Avatar size="l" />;
+
+// JSX expression container value rewrite
+const F = () => <Button variant={"secondary"}>Click</Button>;
+
+// Unconditional prop removals
+const G = () => <Spinner />;
+const H = () => <CodeBlock />;
+const I = () => (
+	<Panel />
+);
+const J = () => (
+	<Switch />
+);
+
+// Conditional removal — remove only deprecated gradient values, leave valid values alone
+const K = () => <Card />;
+const L = () => <Card />;
+const M = () => <Card background='default' />;
+
+// Already correct — should be left alone
+const N = () => <Button variant='secondary'>Click</Button>;
+
+// Non-PDS component — should be left alone
+const O = () => <div variant='brand-secondary' />;
+
+// Dynamic value — cannot transform, leave as-is
+const myVariant = 'brand-secondary';
+const P = () => <Button variant={myVariant}>Click</Button>;

package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/only.input.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button, Spinner } from '@pantheon-systems/pds-toolkit-react';
+
+// Button — matches --only=Button, should be transformed
+const A = () => <Button variant='brand-secondary'>Click</Button>;
+
+// Spinner — not in --only list, should be left alone
+const B = () => <Spinner colorType='full-color' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/only.output.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button, Spinner } from '@pantheon-systems/pds-toolkit-react';
+
+// Button — matches --only=Button, should be transformed
+const A = () => <Button variant="secondary">Click</Button>;
+
+// Spinner — not in --only list, should be left alone
+const B = () => <Spinner colorType='full-color' />;

package/codemods/v1-to-v2/transforms/__tests__/component-renames.test.js

@@ -0,0 +1,15 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'component-renames';
+
+// Unfiltered: renames all components
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });
+
+// --only=IndicatorBadge: renames only IndicatorBadge; all other components untouched
+defineTest(
+	__dirname,
+	transform,
+	{ only: 'IndicatorBadge' },
+	`${transform}/only`,
+	{ parser: 'tsx' },
+);

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

@@ -0,0 +1,6 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'css-class-removals';
+
+// CSS class removals apply to any element — no --only flag
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });

package/codemods/v1-to-v2/transforms/__tests__/css-class-renames.test.js

@@ -0,0 +1,6 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'css-class-renames';
+
+// CSS class renames apply to any element — no --only flag
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });

package/codemods/v1-to-v2/transforms/__tests__/icon-name-updates.test.js

@@ -0,0 +1,15 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'icon-name-updates';
+
+// Unfiltered: updates iconName on all PDS components
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });
+
+// --only=Icon: updates only Icon's iconName; Button is untouched
+defineTest(
+	__dirname,
+	transform,
+	{ only: 'Icon' },
+	`${transform}/only`,
+	{ parser: 'tsx' },
+);

package/codemods/v1-to-v2/transforms/__tests__/prop-renames.test.js

@@ -0,0 +1,15 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'prop-renames';
+
+// Unfiltered: renames all components' props
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });
+
+// --only=Button: renames only Button's props; Icon and others are untouched
+defineTest(
+	__dirname,
+	transform,
+	{ only: 'Button' },
+	`${transform}/only`,
+	{ parser: 'tsx' },
+);

package/codemods/v1-to-v2/transforms/__tests__/prop-value-standardization.test.js

@@ -0,0 +1,16 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'prop-value-standardization';
+const fixtures = `${__dirname}/../__testfixtures__/${transform}`;
+
+// Unfiltered: rewrites all components with size migration rules
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });
+
+// --only=Spinner: rewrites only Spinner; all other PDS components are untouched
+defineTest(
+	__dirname,
+	transform,
+	{ only: 'Spinner' },
+	`${transform}/only`,
+	{ parser: 'tsx' },
+);

package/codemods/v1-to-v2/transforms/__tests__/removed-prop-values.test.js

@@ -0,0 +1,15 @@
+const { defineTest } = require('jscodeshift/src/testUtils');
+
+const transform = 'removed-prop-values';
+
+// Unfiltered: applies all value rewrites and prop removals
+defineTest(__dirname, transform, null, `${transform}/basic`, { parser: 'tsx' });
+
+// --only=Button: transforms Button props only; Spinner is untouched
+defineTest(
+	__dirname,
+	transform,
+	{ only: 'Button' },
+	`${transform}/only`,
+	{ parser: 'tsx' },
+);

package/codemods/v1-to-v2/transforms/component-renames.js

@@ -0,0 +1,166 @@
+/**
+ * Codemod: component-renames
+ *
+ * Renames PDS v1 components to their v2 names. Handles two import styles:
+ *
+ * 1. Root package imports (most common):
+ *    import { IndicatorBadge } from '@pantheon-systems/pds-toolkit-react'
+ *    → import { Badge } from '@pantheon-systems/pds-toolkit-react'
+ *    Driven by components.renames in mappings.json.
+ *
+ * 2. Deep path imports:
+ *    import { IndicatorBadge } from '@pantheon-systems/pds-toolkit-react/components/badges/IndicatorBadge/IndicatorBadge'
+ *    → import { Badge } from '@pantheon-systems/pds-toolkit-react/components/badges/Badge/Badge'
+ *    Driven by imports.pathChanges in mappings.json.
+ *
+ * In both cases, non-aliased imports also update every JSX tag in the file.
+ * Aliased imports preserve the local alias — only the imported name changes.
+ *
+ * Usage (all renames):
+ *   npx jscodeshift -t codemods/v1-to-v2/transforms/component-renames.js \
+ *     --extensions=tsx,ts,jsx,js \
+ *     src/
+ *
+ * Usage (single component — recommended for by-component migrations):
+ *   npx jscodeshift -t codemods/v1-to-v2/transforms/component-renames.js \
+ *     --only=IndicatorBadge \
+ *     --extensions=tsx,ts,jsx,js \
+ *     src/
+ *
+ * --only accepts a comma-separated list of OLD (v1) component names.
+ */
+
+const path = require('path');
+const mappings = require(path.join(__dirname, '../mappings.json'));
+
+// Build lookup for root package imports: { 'OldName': 'NewName' }
+function buildRenamesLookup() {
+	const lookup = {};
+	for (const entry of mappings.components.renames) {
+		lookup[entry.from] = entry.to;
+	}
+	return lookup;
+}
+
+// Build list for deep path imports: [{ from, to, oldName, newName }]
+function buildPathChangesLookup() {
+	return mappings.imports.pathChanges.map((entry) => ({
+		from: entry.from,
+		to: entry.to,
+		oldName: entry.from.split('/').pop(),
+		newName: entry.component || entry.to.split('/').pop(),
+	}));
+}
+
+const ALL_RENAMES = buildRenamesLookup();
+const ALL_PATH_CHANGES = buildPathChangesLookup();
+
+module.exports = function transform(file, api, options) {
+	const j = api.jscodeshift;
+	const root = j(file.source);
+
+	// Parse --only flag: comma-separated OLD (v1) component names
+	const onlyComponents =
+		options && options.only
+			? new Set(
+					options.only
+						.split(',')
+						.map((s) => s.trim())
+						.filter(Boolean),
+				)
+			: null;
+
+	// Apply --only filter to both lookups
+	const renames = onlyComponents
+		? Object.fromEntries(
+				Object.entries(ALL_RENAMES).filter(([from]) =>
+					onlyComponents.has(from),
+				),
+			)
+		: ALL_RENAMES;
+
+	const pathChanges = onlyComponents
+		? ALL_PATH_CHANGES.filter((p) => onlyComponents.has(p.oldName))
+		: ALL_PATH_CHANGES;
+
+	if (Object.keys(renames).length === 0 && pathChanges.length === 0) return;
+
+	// Track non-aliased renames so JSX tags can be updated in Step 2.
+	const localRenameMap = new Map(); // oldLocalName → newLocalName
+
+	let changed = false;
+
+	// Step 1: Update import declarations
+	root.find(j.ImportDeclaration).forEach((nodePath) => {
+		const source = nodePath.node.source.value;
+
+		// 1a. Root package imports
+		if (source === '@pantheon-systems/pds-toolkit-react') {
+			nodePath.node.specifiers.forEach((spec) => {
+				if (spec.type !== 'ImportSpecifier') return;
+
+				const importedName = spec.imported.name;
+				const newName = renames[importedName];
+				if (!newName) return;
+
+				const isAliased = spec.local.name !== spec.imported.name;
+				spec.imported = j.identifier(newName);
+				changed = true;
+
+				if (!isAliased) {
+					spec.local = j.identifier(newName);
+					localRenameMap.set(importedName, newName);
+				}
+			});
+			return;
+		}
+
+		// 1b. Deep path imports
+		for (const { from, to, oldName, newName } of pathChanges) {
+			if (!source.includes(from)) continue;
+
+			nodePath.node.source = j.stringLiteral(source.replace(from, to));
+			changed = true;
+
+			nodePath.node.specifiers.forEach((spec) => {
+				if (spec.type !== 'ImportSpecifier') return;
+				if (spec.imported.name !== oldName) return;
+
+				const isAliased = spec.local.name !== spec.imported.name;
+				spec.imported = j.identifier(newName);
+
+				if (!isAliased) {
+					spec.local = j.identifier(newName);
+					localRenameMap.set(oldName, newName);
+				}
+			});
+
+			break; // a source string can only match one path change
+		}
+	});
+
+	if (!changed) return;
+
+	// Step 2: Rewrite JSX tags for non-aliased renames
+	if (localRenameMap.size > 0) {
+		root.find(j.JSXOpeningElement).forEach((nodePath) => {
+			const nameNode = nodePath.node.name;
+			if (nameNode.type !== 'JSXIdentifier') return;
+
+			const newName = localRenameMap.get(nameNode.name);
+			if (newName) nodePath.node.name = j.jsxIdentifier(newName);
+		});
+
+		root.find(j.JSXClosingElement).forEach((nodePath) => {
+			const nameNode = nodePath.node.name;
+			if (nameNode.type !== 'JSXIdentifier') return;
+
+			const newName = localRenameMap.get(nameNode.name);
+			if (newName) nodePath.node.name = j.jsxIdentifier(newName);
+		});
+	}
+
+	return root.toSource();
+};
+
+module.exports.parser = 'tsx';

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

@@ -0,0 +1,262 @@
+/**
+ * Codemod: css-class-removals
+ *
+ * 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:
+ *
+ * 1. Direct renames — replacement is another class name:
+ *    pds-button--navbar   → pds-button--subtle
+ *    pds-ts-9xl           → pds-ts-8xl
+ *    Replaced automatically.
+ *
+ * 2. Safe removals — replacement text says "no class needed":
+ *    pds-typography--product → removed (product context is now the default)
+ *    Removed automatically.
+ *
+ * 3. Flag only — replacement requires manual styling work with design tokens:
+ *    pds-color-bg-brand, pds-color-fg-brand, pds-lead-text*, pds-quote-text*
+ *    Left in place; a warning is printed so the developer can find and fix
+ *    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 \
+ *     src/
+ *
+ * No --only flag — CSS utility classes apply to any element globally.
+ */
+
+const path = require('path');
+
+const mappings = require(path.join(__dirname, '../mappings.json'));
+
+// Extract the first pds-* class name from a replacement string, if present.
+// Strips CSS custom property references (var(--pds-*)) first so that token
+// names mentioned in prose explanations aren't mistaken for class names.
+function extractReplacementClass(replacement) {
+	if (!replacement) return null;
+	const cleaned = replacement.replace(/var\(--[^)]+\)/g, '');
+	const match = cleaned.match(/\bpds-[a-z0-9-]+/);
+	return match ? match[0] : null;
+}
+
+// Classify each removal entry into one of three buckets.
+function buildLookups() {
+	// { oldClass: newClass } — rename automatically
+	const renames = {};
+	// Set of class names to remove unconditionally
+	const removals = new Set();
+	// Set of class names to flag with a warning (no safe auto-fix)
+	const flags = new Set();
+
+	for (const entry of mappings.cssClasses.removals) {
+		const { old: oldClass, replacement } = entry;
+		if (!oldClass) continue;
+
+		const replacementClass = extractReplacementClass(replacement);
+		if (replacementClass) {
+			renames[oldClass] = replacementClass;
+		} else if (
+			replacement &&
+			/no class needed|no replacement/i.test(replacement)
+		) {
+			removals.add(oldClass);
+		} else {
+			flags.add(oldClass);
+		}
+	}
+
+	return { renames, removals, flags };
+}
+
+const { flags: FLAGS, removals: REMOVALS, renames: RENAMES } = buildLookups();
+
+// Process a space-separated class string.
+// Returns { result, changed, flagged[] }
+function processClasses(classString) {
+	let changed = false;
+	const flagged = [];
+
+	const result = classString
+		.split(/(\s+)/)
+		.map((token) => {
+			if (/^\s+$/.test(token) || token === '') return token;
+
+			if (RENAMES[token]) {
+				changed = true;
+				return RENAMES[token];
+			}
+			if (REMOVALS.has(token)) {
+				changed = true;
+				return null; // will be filtered out
+			}
+			if (FLAGS.has(token)) {
+				flagged.push(token);
+			}
+			return token;
+		})
+		.filter((token) => token !== null)
+		.join('');
+
+	// Normalise any double-spaces left by removed tokens
+	const normalised = result.replace(/  +/g, ' ').trim();
+	const didChange = changed || normalised !== classString.trim();
+
+	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);
+
+	const allFlagged = []; // { file, class } pairs for the summary warning
+	let changed = false;
+
+	root
+		.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 { changed: c, flagged, result } = processClasses(value.value);
+				if (c) {
+					nodePath.node.value = j.stringLiteral(result);
+					changed = true;
+				}
+				flagged.forEach((cls) => allFlagged.push(cls));
+				return;
+			}
+
+			if (value.type !== 'JSXExpressionContainer') return;
+			const { expression } = value;
+
+			// className={`pds-button--navbar ${isActive ? 'a' : 'b'}`}
+			if (expression.type === 'TemplateLiteral') {
+				expression.quasis.forEach((quasi) => {
+					const {
+						changed: c,
+						flagged,
+						result,
+					} = processClasses(quasi.value.raw);
+					if (c) {
+						quasi.value.raw = result;
+						quasi.value.cooked = result;
+						changed = true;
+					}
+					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
+	if (allFlagged.length > 0) {
+		const unique = [...new Set(allFlagged)];
+		process.stderr.write(
+			`\n⚠  ${file.path}\n` +
+				unique
+					.map(
+						(cls) =>
+							`   ${cls} — removed in v2, no direct replacement. See migration guide.`,
+					)
+					.join('\n') +
+				'\n',
+		);
+	}
+
+	return changed ? root.toSource() : undefined;
+};
+
+module.exports.parser = 'tsx';