@atlaskit/modal-dialog 14.14.4 → 14.14.6

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/modal-dialog
 
+## 14.14.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 14.14.5
+
+### Patch Changes
+
+- [`02483200273ec`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/02483200273ec) -
+  Enrol all Design System UI packages into the React Compiler with platform gating via
+  isReactCompilerActivePlatform.
+- Updated dependencies
+
 ## 14.14.4
 
 ### Patch Changes

package/codemods/migrations/remove-props.tsx

@@ -1,4 +1,4 @@
-import { createRemoveFuncIfBooleanFor } from '../utils';
+import { createRemoveFuncIfBooleanFor } from '../utils/create-remove-func-if-boolean-for';
 
 export const removeAutoFocus: (
 	j: import('jscodeshift/src/core').JSCodeshift,

package/codemods/not-yet-boolean-autofocus-removal.tsx

@@ -1,7 +1,7 @@
 import type { API, FileInfo, Options } from 'jscodeshift';
 
 import { removeAutoFocus } from './migrations/remove-props';
-import { createTransformer } from './utils';
+import { createTransformer } from './utils/create-transformer';
 
 const transformer: (fileInfo: FileInfo, { jscodeshift }: API, options: Options) => string =
 	createTransformer('@atlaskit/modal-dialog', [removeAutoFocus]);

package/codemods/utils/add-comment-before.tsx

@@ -0,0 +1,40 @@
+import { type ASTPath, type ImportDeclaration, type JSCodeshift, type Program } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+// not replacing newlines (which \s does)
+const spacesAndTabs: RegExp = /[ \t]{2,}/g;
+const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
+
+function clean(value: string): string {
+	return (
+		value
+			.replace(spacesAndTabs, ' ')
+			.replace(lineStartWithSpaces, '')
+			// using .trim() to clear the any newlines before the first text and after last text
+			.trim()
+	);
+}
+
+export function addCommentBefore({
+	j,
+	target,
+	message,
+}: {
+	j: JSCodeshift;
+	target: Collection<Program> | Collection<ImportDeclaration>;
+	message: string;
+}): void {
+	const content: string = ` TODO: (from codemod) ${clean(message)} `;
+	target.forEach((path: ASTPath<Program | ImportDeclaration>) => {
+		path.value.comments = path.value.comments || [];
+
+		const exists = path.value.comments.find((comment) => comment.value === content);
+
+		// avoiding duplicates of the same comment
+		if (exists) {
+			return;
+		}
+
+		path.value.comments.push(j.commentBlock(content));
+	});
+}

package/codemods/utils/add-comment-to-start-of-file.tsx

@@ -0,0 +1,20 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { addCommentBefore } from './add-comment-before';
+
+export function addCommentToStartOfFile({
+	j,
+	base,
+	message,
+}: {
+	j: JSCodeshift;
+	base: Collection<Node>;
+	message: string;
+}): void {
+	addCommentBefore({
+		j,
+		target: base.find(j.Program),
+		message,
+	});
+}

package/codemods/utils/add-to-import.tsx

@@ -0,0 +1,32 @@
+import { type ImportDefaultSpecifier, type ImportSpecifier, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function addToImport({
+	j,
+	base,
+	importSpecifier,
+	packageName,
+}: {
+	j: JSCodeshift;
+	base: Collection<any>;
+	importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
+	packageName: string;
+}): void {
+	base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.value.source.value === packageName)
+		.replaceWith((declaration) => {
+			return j.importDeclaration(
+				[
+					// we are appending to the existing specifiers
+					// We are doing a filter hear because sometimes specifiers can be removed
+					// but they hand around in the declaration
+					...(declaration.value.specifiers || []).filter(
+						(item) => item.type === 'ImportSpecifier' && item.imported != null,
+					),
+					importSpecifier,
+				],
+				j.literal(packageName),
+			);
+		});
+}

package/codemods/utils/create-remove-func-if-boolean-for.tsx

@@ -0,0 +1,44 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { addCommentToStartOfFile } from './add-comment-to-start-of-file';
+import { getDefaultSpecifier } from './get-default-specifier';
+import { getJSXAttributesByName } from './get-jsx-attributes-by-name';
+import { getNamedSpecifier } from './get-named-specifier';
+
+export const createRemoveFuncIfBooleanFor: (
+	component: string,
+	importName: string,
+	prop: string,
+	comment?: string,
+) => (j: JSCodeshift, source: Collection<Node>) => void =
+	(component: string, importName: string, prop: string, comment?: string) =>
+	(j: JSCodeshift, source: Collection<Node>) => {
+		const specifier =
+			getNamedSpecifier(j, source, component, importName) ||
+			getDefaultSpecifier(j, source, component);
+
+		if (!specifier) {
+			return;
+		}
+
+		source.findJSXElements(specifier).forEach((element) => {
+			getJSXAttributesByName(j, element, prop).forEach((attribute) => {
+				const el = attribute.parent.value;
+				if (
+					// Verify the element we are working on is the element we want
+					el.type === 'JSXOpeningElement' &&
+					el.name.type === 'JSXIdentifier' &&
+					el.name.name === specifier &&
+					(attribute.value.value === null ||
+						(attribute.value.value?.type === 'JSXExpressionContainer' &&
+							attribute.value.value.expression.type === 'BooleanLiteral'))
+				) {
+					j(attribute).remove();
+					if (comment) {
+						addCommentToStartOfFile({ j, base: source, message: comment });
+					}
+				}
+			});
+		});
+	};

package/codemods/utils/create-remove-imports-for.tsx

@@ -0,0 +1,83 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { addCommentToStartOfFile } from './add-comment-to-start-of-file';
+import { type Nullable } from './types';
+
+export const createRemoveImportsFor: ({
+	importsToRemove,
+	packagePath,
+	comment,
+}: {
+	importsToRemove: string[];
+	packagePath: string;
+	comment: string;
+}) => (j: JSCodeshift, source: Collection<Node>) => void =
+	({
+		importsToRemove,
+		packagePath,
+		comment,
+	}: {
+		importsToRemove: string[];
+		packagePath: string;
+		comment: string;
+	}) =>
+	(j: JSCodeshift, source: Collection<Node>) => {
+		const isUsingName: boolean =
+			source.find(j.ImportDeclaration).filter((path) => path.node.source.value === packagePath)
+				.length > 0;
+		if (!isUsingName) {
+			return;
+		}
+
+		const existingAlias: Nullable<string> =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === packagePath)
+				.find(j.ImportSpecifier)
+				.nodes()
+				.map((specifier): Nullable<string> => {
+					if (!importsToRemove.includes(specifier.imported.name)) {
+						return null;
+					}
+					// If aliased: return the alias
+					if (specifier.local && !importsToRemove.includes(specifier.local.name)) {
+						return specifier.local.name;
+					}
+
+					return null;
+				})
+				.filter(Boolean)[0] || null;
+
+		// Remove imports
+		source
+			.find(j.ImportDeclaration)
+			.filter((path) => path.node.source.value === packagePath)
+			.find(j.ImportSpecifier)
+			.find(j.Identifier)
+			.filter((identifier) => {
+				if (
+					importsToRemove.includes(identifier.value.name) ||
+					identifier.value.name === existingAlias
+				) {
+					addCommentToStartOfFile({ j, base: source, message: comment });
+					return true;
+				}
+				return false;
+			})
+			.remove();
+
+		// Remove entire import if it is empty
+		const isEmptyImport =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === packagePath)
+				.find(j.ImportSpecifier)
+				.find(j.Identifier).length === 0;
+		if (isEmptyImport) {
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === packagePath)
+				.remove();
+		}
+	};

package/codemods/utils/create-rename-func-for.tsx

@@ -0,0 +1,42 @@
+import { type JSCodeshift, type VariableDeclaration } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { findIdentifierAndReplaceAttribute } from './find-identifier-and-replace-attribute';
+import { getJSXAttributesByName } from './get-jsx-attributes-by-name';
+import { getNamedSpecifier } from './get-named-specifier';
+import { hasVariableAssignment } from './has-variable-assignment';
+
+export const createRenameFuncFor: (
+	component: string,
+	importName: string,
+	from: string,
+	to: string,
+) => (j: JSCodeshift, source: Collection<Node>) => void =
+	(component: string, importName: string, from: string, to: string) =>
+	(j: JSCodeshift, source: Collection<Node>) => {
+		const specifier = getNamedSpecifier(j, source, component, importName);
+
+		if (!specifier) {
+			return;
+		}
+
+		source.findJSXElements(specifier).forEach((element) => {
+			getJSXAttributesByName(j, element, from).forEach((attribute) => {
+				j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(to), attribute.node.value));
+			});
+		});
+
+		let variable = hasVariableAssignment(j, source, specifier);
+		if (variable) {
+			(variable as Collection<VariableDeclaration>)
+				.find(j.VariableDeclarator)
+				.forEach((declarator) => {
+					j(declarator)
+						.find(j.Identifier)
+						.filter((identifier) => identifier.name === 'id')
+						.forEach((ids) => {
+							findIdentifierAndReplaceAttribute(j, source, ids.node.name, from, to);
+						});
+				});
+		}
+	};

package/codemods/utils/create-rename-import-for.tsx

@@ -0,0 +1,97 @@
+import { type ImportDefaultSpecifier, type ImportSpecifier, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { addToImport } from './add-to-import';
+import { tryCreateImport } from './try-create-import';
+import { type Nullable } from './types';
+
+export const createRenameImportFor: ({
+	componentName,
+	newComponentName,
+	oldPackagePath,
+	newPackagePath,
+}: {
+	componentName: string;
+	newComponentName?: string;
+	oldPackagePath: string;
+	newPackagePath: string;
+}) => (j: JSCodeshift, source: Collection<Node>) => void =
+	({
+		componentName,
+		newComponentName,
+		oldPackagePath,
+		newPackagePath,
+	}: {
+		componentName: string;
+		newComponentName?: string;
+		oldPackagePath: string;
+		newPackagePath: string;
+	}) =>
+	(j: JSCodeshift, source: Collection<Node>) => {
+		const isUsingName: boolean =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === oldPackagePath)
+				.find(j.ImportSpecifier)
+				.nodes()
+				.filter((specifier) => specifier.imported && specifier.imported.name === componentName)
+				.length > 0;
+		if (!isUsingName) {
+			return;
+		}
+
+		const existingAlias: Nullable<string> =
+			source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === oldPackagePath)
+				.find(j.ImportSpecifier)
+				.nodes()
+				.map((specifier): Nullable<string> => {
+					if (specifier.imported && specifier.imported.name !== componentName) {
+						return null;
+					}
+					// If aliased: return the alias
+					if (specifier.local && specifier.local.name !== componentName) {
+						return specifier.local.name;
+					}
+
+					return null;
+				})
+				.filter(Boolean)[0] || null;
+
+		// Check to see if need to create new package path
+		// Try create an import declaration just before the old import
+		tryCreateImport({
+			j,
+			base: source,
+			relativeToPackage: oldPackagePath,
+			packageName: newPackagePath,
+		});
+
+		const newSpecifier: ImportSpecifier | ImportDefaultSpecifier = (() => {
+			// If there's a new name use that
+			if (newComponentName) {
+				return j.importSpecifier(j.identifier(newComponentName), j.identifier(newComponentName));
+			}
+
+			if (existingAlias) {
+				return j.importSpecifier(j.identifier(componentName), j.identifier(existingAlias));
+			}
+
+			// Add specifier
+			return j.importSpecifier(j.identifier(componentName), j.identifier(componentName));
+		})();
+
+		addToImport({
+			j,
+			base: source,
+			importSpecifier: newSpecifier,
+			packageName: newPackagePath,
+		});
+
+		// Remove old path
+		source
+			.find(j.ImportDeclaration)
+			.filter((path) => path.node.source.value === oldPackagePath)
+			.remove();
+	};

package/codemods/utils/create-transformer.tsx

@@ -0,0 +1,23 @@
+import { type API, type FileInfo, type JSCodeshift, type Options } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { hasImportDeclaration } from './has-import-declaration';
+
+export const createTransformer: (
+	component: string,
+	migrates: {
+		(j: JSCodeshift, source: Collection<Node>): void;
+	}[],
+) => (fileInfo: FileInfo, api: API, options: Options) => string =
+	(component: string, migrates: { (j: JSCodeshift, source: Collection<Node>): void }[]) =>
+	(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
+		const source: Collection<Node> = j(fileInfo.source);
+
+		if (!hasImportDeclaration(j, source, component)) {
+			return fileInfo.source;
+		}
+
+		migrates.forEach((tf) => tf(j, source));
+
+		return source.toSource(options.printOptions || { quote: 'single' });
+	};

package/codemods/utils/find-identifier-and-replace-attribute.tsx

@@ -0,0 +1,27 @@
+import { type JSCodeshift } from 'jscodeshift';
+
+export function findIdentifierAndReplaceAttribute(
+	j: JSCodeshift,
+	source: ReturnType<typeof j>,
+	identifierName: string,
+	searchAttr: string,
+	replaceWithAttr: string,
+): void {
+	source
+		.find(j.JSXElement)
+		.find(j.JSXOpeningElement)
+		.filter((path) => {
+			return !!j(path.node)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === identifierName);
+		})
+		.forEach((element) => {
+			j(element)
+				.find(j.JSXAttribute)
+				.find(j.JSXIdentifier)
+				.filter((attr) => attr.node.name === searchAttr)
+				.forEach((attribute) => {
+					j(attribute).replaceWith(j.jsxIdentifier(replaceWithAttr));
+				});
+		});
+}

package/codemods/utils/get-default-specifier.tsx

@@ -0,0 +1,17 @@
+import { type ASTPath, type ImportDeclaration, type JSCodeshift } from 'jscodeshift';
+
+export function getDefaultSpecifier(
+	j: JSCodeshift,
+	source: ReturnType<typeof j>,
+	specifier: string,
+): string | null {
+	const specifiers = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+		.find(j.ImportDefaultSpecifier);
+
+	if (!specifiers.length) {
+		return null;
+	}
+	return specifiers.nodes()[0]!.local!.name;
+}

package/codemods/utils/get-jsx-attributes-by-name.tsx

@@ -0,0 +1,18 @@
+import { type ASTPath, type JSCodeshift, type JSXAttribute } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function getJSXAttributesByName(
+	j: JSCodeshift,
+	element: ASTPath<any>,
+	attributeName: string,
+): Collection<JSXAttribute> {
+	return j(element)
+		.find(j.JSXOpeningElement)
+		.find(j.JSXAttribute)
+		.filter((attribute) => {
+			const matches = j(attribute)
+				.find(j.JSXIdentifier)
+				.filter((identifier) => identifier.value.name === attributeName);
+			return Boolean(matches.length);
+		});
+}

package/codemods/utils/get-named-specifier.tsx

@@ -0,0 +1,24 @@
+import {
+	type ASTPath,
+	type ImportDeclaration,
+	type ImportSpecifier,
+	type JSCodeshift,
+} from 'jscodeshift';
+
+export function getNamedSpecifier(
+	j: JSCodeshift,
+	source: any,
+	specifier: string,
+	importName: string,
+): any {
+	const specifiers = source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
+		.find(j.ImportSpecifier)
+		.filter((path: ASTPath<ImportSpecifier>) => path.node.imported.name === importName);
+
+	if (!specifiers.length) {
+		return null;
+	}
+	return specifiers.nodes()[0]!.local!.name;
+}

package/codemods/utils/has-import-declaration.tsx

@@ -0,0 +1,12 @@
+import { type ASTPath, type ImportDeclaration, type JSCodeshift } from 'jscodeshift';
+
+export function hasImportDeclaration(j: JSCodeshift, source: any, importPath: string): boolean {
+	const imports = source
+		.find(j.ImportDeclaration)
+		.filter(
+			(path: ASTPath<ImportDeclaration>) =>
+				typeof path.node.source.value === 'string' && path.node.source.value.startsWith(importPath),
+		);
+
+	return Boolean(imports.length);
+}

package/codemods/utils/has-variable-assignment.tsx

@@ -0,0 +1,18 @@
+import { type JSCodeshift, type VariableDeclaration } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function hasVariableAssignment(
+	j: JSCodeshift,
+	source: ReturnType<typeof j>,
+	identifierName: string,
+): Collection<VariableDeclaration> | boolean {
+	const occurance = source.find(j.VariableDeclaration).filter((path) => {
+		return !!j(path.node)
+			.find(j.VariableDeclarator)
+			.find(j.Identifier)
+			.filter((identifier) => {
+				return identifier.node.name === identifierName;
+			}).length;
+	});
+	return !!occurance.length ? occurance : false;
+}

package/codemods/utils/try-create-import.tsx

@@ -0,0 +1,27 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+export function tryCreateImport({
+	j,
+	base,
+	relativeToPackage,
+	packageName,
+}: {
+	j: JSCodeshift;
+	base: Collection<any>;
+	relativeToPackage: string;
+	packageName: string;
+}): void {
+	const exists: boolean =
+		base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
+			.length > 0;
+
+	if (exists) {
+		return;
+	}
+
+	base
+		.find(j.ImportDeclaration)
+		.filter((path) => path.value.source.value === relativeToPackage)
+		.insertBefore(j.importDeclaration([], j.literal(packageName)));
+}

package/codemods/utils/types.tsx

@@ -0,0 +1 @@
+export type Nullable<T> = T | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "14.14.4",
+	"version": "14.14.6",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -17,6 +17,13 @@
 	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
+		"react-compiler": {
+			"enabled": true,
+			"gating": {
+				"source": "@atlassian/react-compiler-gating",
+				"importSpecifierName": "isReactCompilerActivePlatform"
+			}
+		},
 		"team": "Design System Team",
 		"website": {
 			"name": "Modal dialog",
@@ -29,7 +36,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
 		"@atlaskit/blanket": "^15.0.0",
-		"@atlaskit/button": "^23.10.0",
+		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/icon": "^34.0.0",
@@ -39,7 +46,7 @@
 		"@atlaskit/portal": "^5.4.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/primitives": "^18.1.0",
-		"@atlaskit/theme": "^22.0.0",
+		"@atlaskit/theme": "^23.0.0",
 		"@atlaskit/tokens": "^11.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -56,7 +63,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/avatar": "^25.11.0",
-		"@atlaskit/avatar-group": "^12.5.0",
+		"@atlaskit/avatar-group": "^12.6.0",
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^16.0.0",
 		"@atlaskit/checkbox": "^17.3.0",
@@ -66,16 +73,17 @@
 		"@atlaskit/dropdown-menu": "^16.8.0",
 		"@atlaskit/flag": "^17.9.0",
 		"@atlaskit/form": "^15.5.0",
-		"@atlaskit/heading": "^5.3.0",
-		"@atlaskit/link": "^3.3.0",
+		"@atlaskit/heading": "^5.4.0",
+		"@atlaskit/link": "^3.4.0",
 		"@atlaskit/popup": "^4.16.0",
-		"@atlaskit/radio": "^8.4.0",
+		"@atlaskit/radio": "^8.5.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlaskit/select": "^21.10.0",
 		"@atlaskit/spotlight": "^0.11.0",
-		"@atlaskit/textfield": "^8.2.0",
+		"@atlaskit/textfield": "^8.3.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
+		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@atlassian/testing-library": "^0.5.0",

package/codemods/utils.tsx

@@ -1,488 +0,0 @@
-import type {
-	API,
-	ASTPath,
-	default as core,
-	FileInfo,
-	ImportDeclaration,
-	ImportDefaultSpecifier,
-	ImportSpecifier,
-	JSXAttribute,
-	Options,
-	Program,
-	VariableDeclaration,
-} from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-export type Nullable<T> = T | null;
-
-export function getNamedSpecifier(
-	j: core.JSCodeshift,
-	source: any,
-	specifier: string,
-	importName: string,
-): any {
-	const specifiers = source
-		.find(j.ImportDeclaration)
-		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
-		.find(j.ImportSpecifier)
-		.filter((path: ASTPath<ImportSpecifier>) => path.node.imported.name === importName);
-
-	if (!specifiers.length) {
-		return null;
-	}
-	return specifiers.nodes()[0]!.local!.name;
-}
-
-function getDefaultSpecifier(j: core.JSCodeshift, source: ReturnType<typeof j>, specifier: string) {
-	const specifiers = source
-		.find(j.ImportDeclaration)
-		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
-		.find(j.ImportDefaultSpecifier);
-
-	if (!specifiers.length) {
-		return null;
-	}
-	return specifiers.nodes()[0]!.local!.name;
-}
-
-export function getJSXAttributesByName(
-	j: core.JSCodeshift,
-	element: ASTPath<any>,
-	attributeName: string,
-): Collection<JSXAttribute> {
-	return j(element)
-		.find(j.JSXOpeningElement)
-		.find(j.JSXAttribute)
-		.filter((attribute) => {
-			const matches = j(attribute)
-				.find(j.JSXIdentifier)
-				.filter((identifier) => identifier.value.name === attributeName);
-			return Boolean(matches.length);
-		});
-}
-
-export function hasImportDeclaration(
-	j: core.JSCodeshift,
-	source: any,
-	importPath: string,
-): boolean {
-	const imports = source
-		.find(j.ImportDeclaration)
-		.filter(
-			(path: ASTPath<ImportDeclaration>) =>
-				typeof path.node.source.value === 'string' && path.node.source.value.startsWith(importPath),
-		);
-
-	return Boolean(imports.length);
-}
-
-export function findIdentifierAndReplaceAttribute(
-	j: core.JSCodeshift,
-	source: ReturnType<typeof j>,
-	identifierName: string,
-	searchAttr: string,
-	replaceWithAttr: string,
-): void {
-	source
-		.find(j.JSXElement)
-		.find(j.JSXOpeningElement)
-		.filter((path) => {
-			return !!j(path.node)
-				.find(j.JSXIdentifier)
-				.filter((identifier) => identifier.value.name === identifierName);
-		})
-		.forEach((element) => {
-			j(element)
-				.find(j.JSXAttribute)
-				.find(j.JSXIdentifier)
-				.filter((attr) => attr.node.name === searchAttr)
-				.forEach((attribute) => {
-					j(attribute).replaceWith(j.jsxIdentifier(replaceWithAttr));
-				});
-		});
-}
-
-export function hasVariableAssignment(
-	j: core.JSCodeshift,
-	source: ReturnType<typeof j>,
-	identifierName: string,
-): Collection<VariableDeclaration> | boolean {
-	const occurance = source.find(j.VariableDeclaration).filter((path) => {
-		return !!j(path.node)
-			.find(j.VariableDeclarator)
-			.find(j.Identifier)
-			.filter((identifier) => {
-				return identifier.node.name === identifierName;
-			}).length;
-	});
-	return !!occurance.length ? occurance : false;
-}
-
-// not replacing newlines (which \s does)
-const spacesAndTabs: RegExp = /[ \t]{2,}/g;
-const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
-
-function clean(value: string): string {
-	return (
-		value
-			.replace(spacesAndTabs, ' ')
-			.replace(lineStartWithSpaces, '')
-			// using .trim() to clear the any newlines before the first text and after last text
-			.trim()
-	);
-}
-
-export function addCommentToStartOfFile({
-	j,
-	base,
-	message,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<Node>;
-	message: string;
-}): void {
-	addCommentBefore({
-		j,
-		target: base.find(j.Program),
-		message,
-	});
-}
-
-export function addCommentBefore({
-	j,
-	target,
-	message,
-}: {
-	j: core.JSCodeshift;
-	target: Collection<Program> | Collection<ImportDeclaration>;
-	message: string;
-}): void {
-	const content: string = ` TODO: (from codemod) ${clean(message)} `;
-	target.forEach((path: ASTPath<Program | ImportDeclaration>) => {
-		path.value.comments = path.value.comments || [];
-
-		const exists = path.value.comments.find((comment) => comment.value === content);
-
-		// avoiding duplicates of the same comment
-		if (exists) {
-			return;
-		}
-
-		path.value.comments.push(j.commentBlock(content));
-	});
-}
-
-export function tryCreateImport({
-	j,
-	base,
-	relativeToPackage,
-	packageName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	relativeToPackage: string;
-	packageName: string;
-}): void {
-	const exists: boolean =
-		base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
-			.length > 0;
-
-	if (exists) {
-		return;
-	}
-
-	base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.value.source.value === relativeToPackage)
-		.insertBefore(j.importDeclaration([], j.literal(packageName)));
-}
-
-export function addToImport({
-	j,
-	base,
-	importSpecifier,
-	packageName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
-	packageName: string;
-}): void {
-	base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.value.source.value === packageName)
-		.replaceWith((declaration) => {
-			return j.importDeclaration(
-				[
-					// we are appending to the existing specifiers
-					// We are doing a filter hear because sometimes specifiers can be removed
-					// but they hand around in the declaration
-					...(declaration.value.specifiers || []).filter(
-						(item) => item.type === 'ImportSpecifier' && item.imported != null,
-					),
-					importSpecifier,
-				],
-				j.literal(packageName),
-			);
-		});
-}
-
-export const createRenameFuncFor: (
-	component: string,
-	importName: string,
-	from: string,
-	to: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => void =
-	(component: string, importName: string, from: string, to: string) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const specifier = getNamedSpecifier(j, source, component, importName);
-
-		if (!specifier) {
-			return;
-		}
-
-		source.findJSXElements(specifier).forEach((element) => {
-			getJSXAttributesByName(j, element, from).forEach((attribute) => {
-				j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(to), attribute.node.value));
-			});
-		});
-
-		let variable = hasVariableAssignment(j, source, specifier);
-		if (variable) {
-			(variable as Collection<VariableDeclaration>)
-				.find(j.VariableDeclarator)
-				.forEach((declarator) => {
-					j(declarator)
-						.find(j.Identifier)
-						.filter((identifier) => identifier.name === 'id')
-						.forEach((ids) => {
-							findIdentifierAndReplaceAttribute(j, source, ids.node.name, from, to);
-						});
-				});
-		}
-	};
-
-export const createRemoveFuncIfBooleanFor: (
-	component: string,
-	importName: string,
-	prop: string,
-	comment?: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => void =
-	(component: string, importName: string, prop: string, comment?: string) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const specifier =
-			getNamedSpecifier(j, source, component, importName) ||
-			getDefaultSpecifier(j, source, component);
-
-		if (!specifier) {
-			return;
-		}
-
-		source.findJSXElements(specifier).forEach((element) => {
-			getJSXAttributesByName(j, element, prop).forEach((attribute) => {
-				const el = attribute.parent.value;
-				if (
-					// Verify the element we are working on is the element we want
-					el.type === 'JSXOpeningElement' &&
-					el.name.type === 'JSXIdentifier' &&
-					el.name.name === specifier &&
-					(attribute.value.value === null ||
-						(attribute.value.value?.type === 'JSXExpressionContainer' &&
-							attribute.value.value.expression.type === 'BooleanLiteral'))
-				) {
-					j(attribute).remove();
-					if (comment) {
-						addCommentToStartOfFile({ j, base: source, message: comment });
-					}
-				}
-			});
-		});
-	};
-
-export const createRenameImportFor: ({
-	componentName,
-	newComponentName,
-	oldPackagePath,
-	newPackagePath,
-}: {
-	componentName: string;
-	newComponentName?: string;
-	oldPackagePath: string;
-	newPackagePath: string;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
-	({
-		componentName,
-		newComponentName,
-		oldPackagePath,
-		newPackagePath,
-	}: {
-		componentName: string;
-		newComponentName?: string;
-		oldPackagePath: string;
-		newPackagePath: string;
-	}) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const isUsingName: boolean =
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === oldPackagePath)
-				.find(j.ImportSpecifier)
-				.nodes()
-				.filter((specifier) => specifier.imported && specifier.imported.name === componentName)
-				.length > 0;
-		if (!isUsingName) {
-			return;
-		}
-
-		const existingAlias: Nullable<string> =
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === oldPackagePath)
-				.find(j.ImportSpecifier)
-				.nodes()
-				.map((specifier): Nullable<string> => {
-					if (specifier.imported && specifier.imported.name !== componentName) {
-						return null;
-					}
-					// If aliased: return the alias
-					if (specifier.local && specifier.local.name !== componentName) {
-						return specifier.local.name;
-					}
-
-					return null;
-				})
-				.filter(Boolean)[0] || null;
-
-		// Check to see if need to create new package path
-		// Try create an import declaration just before the old import
-		tryCreateImport({
-			j,
-			base: source,
-			relativeToPackage: oldPackagePath,
-			packageName: newPackagePath,
-		});
-
-		const newSpecifier: ImportSpecifier | ImportDefaultSpecifier = (() => {
-			// If there's a new name use that
-			if (newComponentName) {
-				return j.importSpecifier(j.identifier(newComponentName), j.identifier(newComponentName));
-			}
-
-			if (existingAlias) {
-				return j.importSpecifier(j.identifier(componentName), j.identifier(existingAlias));
-			}
-
-			// Add specifier
-			return j.importSpecifier(j.identifier(componentName), j.identifier(componentName));
-		})();
-
-		addToImport({
-			j,
-			base: source,
-			importSpecifier: newSpecifier,
-			packageName: newPackagePath,
-		});
-
-		// Remove old path
-		source
-			.find(j.ImportDeclaration)
-			.filter((path) => path.node.source.value === oldPackagePath)
-			.remove();
-	};
-
-export const createRemoveImportsFor: ({
-	importsToRemove,
-	packagePath,
-	comment,
-}: {
-	importsToRemove: string[];
-	packagePath: string;
-	comment: string;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => void =
-	({
-		importsToRemove,
-		packagePath,
-		comment,
-	}: {
-		importsToRemove: string[];
-		packagePath: string;
-		comment: string;
-	}) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const isUsingName: boolean =
-			source.find(j.ImportDeclaration).filter((path) => path.node.source.value === packagePath)
-				.length > 0;
-		if (!isUsingName) {
-			return;
-		}
-
-		const existingAlias: Nullable<string> =
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === packagePath)
-				.find(j.ImportSpecifier)
-				.nodes()
-				.map((specifier): Nullable<string> => {
-					if (!importsToRemove.includes(specifier.imported.name)) {
-						return null;
-					}
-					// If aliased: return the alias
-					if (specifier.local && !importsToRemove.includes(specifier.local.name)) {
-						return specifier.local.name;
-					}
-
-					return null;
-				})
-				.filter(Boolean)[0] || null;
-
-		// Remove imports
-		source
-			.find(j.ImportDeclaration)
-			.filter((path) => path.node.source.value === packagePath)
-			.find(j.ImportSpecifier)
-			.find(j.Identifier)
-			.filter((identifier) => {
-				if (
-					importsToRemove.includes(identifier.value.name) ||
-					identifier.value.name === existingAlias
-				) {
-					addCommentToStartOfFile({ j, base: source, message: comment });
-					return true;
-				}
-				return false;
-			})
-			.remove();
-
-		// Remove entire import if it is empty
-		const isEmptyImport =
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === packagePath)
-				.find(j.ImportSpecifier)
-				.find(j.Identifier).length === 0;
-		if (isEmptyImport) {
-			source
-				.find(j.ImportDeclaration)
-				.filter((path) => path.node.source.value === packagePath)
-				.remove();
-		}
-	};
-
-export const createTransformer: (
-	component: string,
-	migrates: {
-		(j: core.JSCodeshift, source: Collection<Node>): void;
-	}[],
-) => (fileInfo: FileInfo, api: API, options: Options) => string =
-	(component: string, migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[]) =>
-	(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
-		const source: Collection<Node> = j(fileInfo.source);
-
-		if (!hasImportDeclaration(j, source, component)) {
-			return fileInfo.source;
-		}
-
-		migrates.forEach((tf) => tf(j, source));
-
-		return source.toSource(options.printOptions || { quote: 'single' });
-	};