@pantheon-systems/pds-toolkit-react 2.0.0-alpha.37 → 2.0.0-alpha.39

package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/only.output.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Icon, Button } from '@pantheon-systems/pds-toolkit-react';
+
+// Icon — matches --only=Icon, should be updated
+const A = () => <Icon iconName="circlePlus" />;
+
+// Button — not in --only list, should be left alone
+const B = () => <Button iconName='circlePlusOutline' label='Add' />;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+	Button,
+	CloseButton,
+	FileDiff,
+	GlobalWrapper,
+	Icon,
+} from '@pantheon-systems/pds-toolkit-react';
+// Aliased import
+import { Icon as PdsIcon } from '@pantheon-systems/pds-toolkit-react';
+
+// Simple renames
+const A = () => <Button isLoading />;
+const B = () => <GlobalWrapper mobileMenuMaxWidth={767} />;
+const C = () => <FileDiff labelStrings={{ add: 'Added', remove: 'Removed' }} />;
+
+// Same old prop name, different components — both should rename
+const D = () => <Icon iconSize='m' iconName='star' />;
+const E = () => <CloseButton iconSize='l' />;
+
+// Aliased import — should still rename
+const F = () => <PdsIcon iconSize='s' iconName='gear' />;
+
+// Already correct — should be left alone
+const G = () => <Button isWorking />;
+
+// Non-PDS component — should be left alone
+const H = () => <div isLoading />;

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+	Button,
+	CloseButton,
+	FileDiff,
+	GlobalWrapper,
+	Icon,
+} from '@pantheon-systems/pds-toolkit-react';
+// Aliased import
+import { Icon as PdsIcon } from '@pantheon-systems/pds-toolkit-react';
+
+// Simple renames
+const A = () => <Button isWorking />;
+const B = () => <GlobalWrapper mobileMaxWidth={767} />;
+const C = () => <FileDiff translationStrings={{ add: 'Added', remove: 'Removed' }} />;
+
+// Same old prop name, different components — both should rename
+const D = () => <Icon size='m' iconName='star' />;
+const E = () => <CloseButton size='l' />;
+
+// Aliased import — should still rename
+const F = () => <PdsIcon size='s' iconName='gear' />;
+
+// Already correct — should be left alone
+const G = () => <Button isWorking />;
+
+// Non-PDS component — should be left alone
+const H = () => <div isLoading />;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button, Icon } from '@pantheon-systems/pds-toolkit-react';
+
+// Button — matches --only=Button, should be renamed
+const A = () => <Button isLoading />;
+
+// Icon — not in --only list, should be left alone
+const B = () => <Icon iconSize='m' iconName='star' />;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button, Icon } from '@pantheon-systems/pds-toolkit-react';
+
+// Button — matches --only=Button, should be renamed
+const A = () => <Button isWorking />;
+
+// Icon — not in --only list, should be left alone
+const B = () => <Icon iconSize='m' iconName='star' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.output.tsx

@@ -9,19 +9,19 @@ import {
 import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
 
 // String literals — should be updated
-const A = () => <Spinner size='s' />;
-const B = () => <Spinner size='m' />;
-const C = () => <Spinner size='l' />;
-const D = () => <Avatar size='s' />;
-const E = () => <Avatar size='m' />;
+const A = () => <Spinner size="s" />;
+const B = () => <Spinner size="m" />;
+const C = () => <Spinner size="l" />;
+const D = () => <Avatar size="s" />;
+const E = () => <Avatar size="m" />;
 // StatusIndicator has a different mapping: sm→xs, md→s
-const F = () => <StatusIndicator size='xs' />;
-const G = () => <StatusIndicator size='s' />;
+const F = () => <StatusIndicator size="xs" />;
+const G = () => <StatusIndicator size="s" />;
 // Aliased import
-const H = () => <PdsIconButton size='s' />;
+const H = () => <PdsIconButton size="s" />;
 
 // JSX expression container — should also be updated
-const I = () => <Badge size={'s'} />;
+const I = () => <Badge size={"s"} />;
 
 // Already correct — should be left alone
 const J = () => <Spinner size='s' />;
@@ -33,4 +33,4 @@ const K = () => <Spinner size={mySize} />;
 const L = () => <div size='sm' />;
 
 // Tooltip uses a different prop name: triggerIconSize
-const M = () => <Tooltip triggerIconSize='s' />;
+const M = () => <Tooltip triggerIconSize="s" />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/only.input.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// Spinner — matches --only=Spinner, should be updated
+const A = () => <Spinner size='sm' />;
+const B = () => <Spinner size='md' />;
+const C = () => <Spinner size='lg' />;
+
+// Other PDS components — not in --only list, should be left alone
+const D = () => <Avatar size='sm' />;
+const E = () => <StatusIndicator size='sm' />;
+const F = () => <Badge size={'sm'} />;
+const G = () => <PdsIconButton size='sm' />;
+const H = () => <Tooltip triggerIconSize='sm' />;

package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/only.output.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {
+	Spinner,
+	Avatar,
+	StatusIndicator,
+	Badge,
+	Tooltip,
+} from '@pantheon-systems/pds-toolkit-react';
+import { IconButton as PdsIconButton } from '@pantheon-systems/pds-toolkit-react';
+
+// Spinner — matches --only=Spinner, should be updated
+const A = () => <Spinner size="s" />;
+const B = () => <Spinner size="m" />;
+const C = () => <Spinner size="l" />;
+
+// Other PDS components — not in --only list, should be left alone
+const D = () => <Avatar size='sm' />;
+const E = () => <StatusIndicator size='sm' />;
+const F = () => <Badge size={'sm'} />;
+const G = () => <PdsIconButton size='sm' />;
+const H = () => <Tooltip triggerIconSize='sm' />;

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

@@ -3,4 +3,14 @@ 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';