@atlaskit/side-navigation 6.0.1 → 6.0.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/side-navigation
 
+## 6.0.2
+
+### Patch Changes
+
+- [#124556](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124556)
+  [`48adeb70784c5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/48adeb70784c5) -
+  Updated dependencies and removed old codemods.
+
 ## 6.0.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-navigation",
-	"version": "6.0.1",
+	"version": "6.0.2",
 	"description": "A highly composable side navigation component that supports nested views.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,11 +36,11 @@
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/menu": "^3.1.0",
-		"@atlaskit/motion": "^5.0.0",
+		"@atlaskit/motion": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.3.0",
+		"@atlaskit/tokens": "^4.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.2"
 	},
@@ -48,18 +48,28 @@
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/accessibility-testing": "*",
-		"@af/integration-testing": "*",
-		"@af/visual-regression": "*",
-		"@atlaskit/visual-regression": "*",
-		"@atlassian/feature-flags-test-utils": "*",
+		"@af/accessibility-testing": "^2.0.0",
+		"@af/integration-testing": "^0.5.0",
+		"@af/visual-regression": "^1.3.0",
+		"@atlaskit/atlassian-navigation": "^5.0.0",
+		"@atlaskit/button": "^21.1.0",
+		"@atlaskit/docs": "^10.0.0",
+		"@atlaskit/dropdown-menu": "^13.0.0",
+		"@atlaskit/form": "^12.0.0",
+		"@atlaskit/image": "^2.0.0",
+		"@atlaskit/link": "^3.0.0",
+		"@atlaskit/logo": "^16.0.0",
+		"@atlaskit/onboarding": "^13.0.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
+		"@atlaskit/pragmatic-drag-and-drop-live-region": "^1.3.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-accessibility": "^2.0.0",
+		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^2.2.0",
+		"@atlaskit/section-message": "^8.1.0",
+		"@atlaskit/select": "^20.0.0",
+		"@atlaskit/visual-regression": "^0.10.0",
 		"@testing-library/react": "^13.4.0",
-		"@types/jest-axe": "^3.5.5",
-		"ast-types": "^0.13.3",
-		"jest-axe": "^8.0.0",
-		"jest-emotion": "^10.0.32",
-		"jscodeshift": "^0.13.0",
 		"raf-stub": "^2.0.1",
+		"tiny-invariant": "^1.2.0",
 		"typescript": "~5.4.2"
 	},
 	"techstack": {

package/codemods/0.8.0-change-css-fn-prop.tsx

@@ -1,157 +0,0 @@
-import { type NodePath } from 'ast-types/lib/node-path';
-import {
-	type API,
-	type ASTPath,
-	type default as core,
-	type FileInfo,
-	type ImportDeclaration,
-	type ImportSpecifier,
-	type Options,
-} from 'jscodeshift';
-
-import { addCommentBeforeJSX, getDefaultSpecifierName } from './helpers/generic';
-
-function getJSXAttributesByName(j: core.JSCodeshift, element: ASTPath<any>, attributeName: string) {
-	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);
-		});
-}
-
-function getImportSpecifier(
-	j: core.JSCodeshift,
-	source: ReturnType<typeof j>,
-	specifier: string,
-	imported: string,
-) {
-	const specifiers = source
-		.find(j.ImportDeclaration)
-		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
-		.find(j.ImportSpecifier)
-		.filter((path: ASTPath<ImportSpecifier>) => path.value.imported.name === imported);
-
-	if (!specifiers.length) {
-		return null;
-	}
-
-	return specifiers.nodes()[0]!.local!.name;
-}
-
-function updateCssFnProp(j: core.JSCodeshift, source: ReturnType<typeof j>, specifier: string) {
-	source.findJSXElements(specifier).forEach((element) => {
-		const cssFnPropCollection = getJSXAttributesByName(j, element, 'cssFn');
-
-		// no cssProp usage for this element
-		if (!cssFnPropCollection.length) {
-			return;
-		}
-
-		const cssFnProp = cssFnPropCollection.get();
-
-		const cssFnExpression: NodePath = j(cssFnProp)
-			.find(j.JSXExpressionContainer)
-			.find(j.Expression)
-			.get();
-
-		if (cssFnExpression) {
-			// just remove the state styles param
-			try {
-				const [stylePropName] = cssFnExpression!.value.params;
-				j(cssFnExpression)
-					.find(j.SpreadElement)
-					.forEach((n) => {
-						// discerns whether there are multiple identifiers here
-						const isComplexIdentifier = j(n).find(j.Identifier).length > 1;
-
-						if (isComplexIdentifier) {
-							throw new Error('CSSFn Prop codemod: Unable to parse spread element');
-						}
-
-						const hasStyleProp = !!j(n)
-							.find(j.Identifier)
-							.filter((node) => node.value.name === stylePropName.name).length;
-						if (hasStyleProp) {
-							j(n).remove();
-						}
-					});
-
-				cssFnExpression!.value.params.shift();
-			} catch (e) {
-				addCommentBeforeJSX(
-					j,
-					cssFnProp,
-					`
-        The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
-        The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
-        For more info please reach out to #help-design-system-code.
-        `,
-				);
-			}
-		}
-	});
-}
-
-function hasImportDeclaration(
-	j: core.JSCodeshift,
-	source: ReturnType<typeof j>,
-	importPath: string,
-) {
-	return !!source.find(j.ImportDeclaration).filter((path) => path.node.source.value === importPath)
-		.length;
-}
-
-export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
-	const source = j(fileInfo.source);
-
-	if (hasImportDeclaration(j, source, '@atlaskit/side-navigation')) {
-		const defaultSpecifier = getDefaultSpecifierName({
-			j,
-			base: source,
-			packageName: '@atlaskit/side-navigation',
-		});
-
-		if (defaultSpecifier != null) {
-			updateCssFnProp(j, source, defaultSpecifier);
-		}
-
-		[
-			'SideNavigation',
-			'Header',
-			'NavigationHeader',
-			'NavigationContent',
-			'Section',
-			'HeadingItem',
-			'SkeletonHeadingItem',
-			'NestableNavigationContent',
-			'NestingItem',
-			'ButtonItem',
-			'LinkItem',
-			'GoBackItem',
-			'CustomItem',
-			'SkeletonItem',
-			'Footer',
-			'NavigationFooter',
-			'LoadingItems',
-		].forEach((pkg) => {
-			const importSpecifier = getImportSpecifier(j, source, '@atlaskit/side-navigation', pkg);
-
-			if (importSpecifier != null) {
-				updateCssFnProp(j, source, importSpecifier);
-			}
-		});
-
-		return source.toSource(
-			options.printOptions || {
-				quote: 'single',
-				trailingComma: true,
-			},
-		);
-	}
-
-	return fileInfo.source;
-}

package/codemods/__tests__/0.8.0-change-css-fn-prop.tsx

@@ -1,360 +0,0 @@
-jest.autoMockOff();
-
-import * as transformer from '../0.8.0-change-css-fn-prop';
-
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-describe('Updates and removes current inline styles', () => {
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-      import { ButtonItem } from '@atlaskit/something';
-
-      const App = () => {
-        return <ButtonItem />;
-      }
-    `,
-		`
-      import { ButtonItem } from '@atlaskit/something';
-
-      const App = () => {
-        return <ButtonItem />;
-      }
-  `,
-		'leaves unrelated code untouched',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-      import { ButtonItem } from '@atlaskit/side-navigation';
-
-      const App = () => {
-        return <ButtonItem cssFn={(styles, state) => ({
-
-        })} />;
-      }
-    `,
-		`
-      import { ButtonItem } from '@atlaskit/side-navigation';
-
-      const App = () => {
-        return (
-          <ButtonItem cssFn={state => {
-
-          }} />
-        );
-      }
-  `,
-		'should remove current styles from inline function',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-      import { ButtonItem } from '@atlaskit/side-navigation';
-
-      const App = () => {
-        return (
-          <div cssFn={(styles, state) => ({
-            ...styles,
-          })}>
-            <ButtonItem
-              cssFn={(styles, state) => ({
-                ...styles,
-              })}
-            />
-          </div>
-        );
-      };
-
-      `,
-		`
-      import { ButtonItem } from '@atlaskit/side-navigation';
-
-      const App = () => {
-        return (
-          <div cssFn={(styles, state) => ({
-            ...styles,
-          })}>
-            <ButtonItem
-              cssFn={state => ({})}
-            />
-          </div>
-        );
-      };
-  `,
-		'should remove current styles from scope',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return <ButtonItem cssFn={(styles, state) => ({
-        ...styles,
-        color: 'red',
-      })} />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={state => ({
-          color: 'red',
-        })} />
-      );
-    }
-    `,
-		'correctly removes spread styles',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return <ButtonItem cssFn={(styles, state) => ({
-        ...styles,
-        color: 'red',
-        ':hover': {
-          ...styles[':hover'],
-          color: 'blue',
-        }
-      })} />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={state => ({
-          color: 'red',
-
-          ':hover': {
-            color: 'blue',
-          },
-        })} />
-      );
-    }
-    `,
-		'correctly removes spread styles with pseudo-selector access',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={(styles, state) => ({
-          ...(state.x ? styles : {}),
-          color: 'red',
-        })} />
-      );
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return (
-        <ButtonItem
-          /*
-          TODO: (from codemod) The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
-          The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
-          For more info please reach out to #help-design-system-code.
-          */
-          cssFn={(styles, state) => ({
-            ...(state.x ? styles : {}),
-            color: 'red',
-          })} />
-      );
-    }
-      `,
-		'fail smoothly if the current styles are being used in a non-trivial way',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return <ButtonItem cssFn={() => ({
-        color: 'red',
-      })} />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return <ButtonItem cssFn={() => ({
-        color: 'red',
-      })} />;
-    }
-    `,
-		'not change anything if user is not using the current state or styles',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return <ButtonItem cssFn={(styles, state) => ({
-        ...styles,
-        color: 'red',
-      })}>
-        <ButtonItem cssFn={(styles, state) => ({
-          ...styles,
-          color: 'red',
-        })}/>
-      </ButtonItem>;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={state => ({
-          color: 'red',
-        })}>
-          <ButtonItem cssFn={state => ({
-            color: 'red',
-          })}/>
-        </ButtonItem>
-      );
-    }
-    `,
-		'should remove styles in nested children',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return <ButtonItem />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const App = () => {
-      return <ButtonItem />;
-    }
-    `,
-		'should leave affected items with no use of cssFn untouched',
-	);
-});
-
-describe('Updates and removes current styles', () => {
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const cssFn = (styles, state) => ({
-      ...styles,
-      color: 'red',
-    });
-
-    const App = () => {
-      return <ButtonItem cssFn={cssFn} />;
-    }
-      `,
-		`
-    import { ButtonItem } from '@atlaskit/side-navigation';
-
-    const cssFn = (styles, state) => ({
-      ...styles,
-      color: 'red',
-    });
-
-    const App = () => {
-      return (
-        <ButtonItem
-          /*
-          TODO: (from codemod) The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
-          The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
-          For more info please reach out to #help-design-system-code.
-          */
-          cssFn={cssFn} />
-      );
-    }
-    `,
-		'should add prompt for non-inline function',
-	);
-
-	defineInlineTest(
-		{ ...transformer, parser: 'tsx' },
-		{},
-		`
-    import { ButtonItem, LinkItem } from '@atlaskit/side-navigation';
-
-    const cssFunction = (styles, state) => ({
-      ...styles,
-      color: 'red',
-    });
-
-    const App = () => {
-      return (
-        <ButtonItem cssFn={cssFunction}>
-          <LinkItem cssFn={cssFunction} />
-        </ButtonItem>
-      );
-    };
-      `,
-		`
-    import { ButtonItem, LinkItem } from '@atlaskit/side-navigation';
-
-    const cssFunction = (styles, state) => ({
-      ...styles,
-      color: 'red',
-    });
-
-    const App = () => {
-      return (
-        <ButtonItem
-          /*
-          TODO: (from codemod) The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
-          The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
-          For more info please reach out to #help-design-system-code.
-          */
-          cssFn={cssFunction}>
-          <LinkItem
-            /*
-            TODO: (from codemod) The usage of the 'cssFn' prop in this component could not be transformed and requires manual intervention.
-            The 'cssFn' prop has been simplified so that users no longer need to merge the inherited styles with their own overrides.
-            For more info please reach out to #help-design-system-code.
-            */
-            cssFn={cssFunction} />
-        </ButtonItem>
-      );
-    };
-    `,
-		'should add prompt for non-inline function to multiple instances',
-	);
-});

package/codemods/helpers/generic.tsx

@@ -1,637 +0,0 @@
-import { type NodePath } from 'ast-types/lib/node-path';
-import {
-	type ASTPath,
-	type default as core,
-	type ImportDeclaration,
-	type ImportDefaultSpecifier,
-	type ImportSpecifier,
-	type JSXAttribute,
-	type JSXElement,
-	type Node,
-	type Program,
-} from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-export type Nullable<T> = T | null;
-
-export function hasImportDeclaration(
-	j: core.JSCodeshift,
-	source: string,
-	importPath: string,
-): boolean {
-	return (
-		j(source)
-			.find(j.ImportDeclaration)
-			.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === importPath).length >
-		0
-	);
-}
-
-export function getDefaultSpecifierName({
-	j,
-	base,
-	packageName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	packageName: string;
-}): Nullable<string> {
-	const specifiers = base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.node.source.value === packageName)
-		.find(j.ImportDefaultSpecifier);
-
-	if (!specifiers.length) {
-		return null;
-	}
-	return specifiers.nodes()[0]!.local!.name;
-}
-
-export function getJSXAttributesByName({
-	j,
-	element,
-	attributeName,
-}: {
-	j: core.JSCodeshift;
-	element: JSXElement;
-	attributeName: string;
-}): Collection<JSXAttribute> {
-	return j(element)
-		.find(j.JSXOpeningElement)
-		.find(j.JSXAttribute)
-		.filter((attribute) => {
-			const matches = j(attribute)
-				// This will find identifiers on nested jsx elements
-				// so we are going to do a filter to ensure we are only
-				// going one level deep
-				.find(j.JSXIdentifier)
-				.filter((identifer) => {
-					j(identifer).closest(j.JSXOpeningElement);
-					// Checking we are on the same level as the jsx element
-					const closest = j(identifer).closest(j.JSXOpeningElement).nodes()[0];
-
-					if (!closest) {
-						return false;
-					}
-					return (
-						closest.name.type === 'JSXIdentifier' &&
-						element.openingElement.name.type === 'JSXIdentifier' &&
-						element.openingElement.name.name === closest.name.name
-					);
-				})
-				.filter((identifier) => identifier.value.name === attributeName);
-			return Boolean(matches.length);
-		});
-}
-
-export function hasJSXAttributesByName({
-	j,
-	element,
-	attributeName,
-}: {
-	j: core.JSCodeshift;
-	element: JSXElement;
-	attributeName: string;
-}): boolean {
-	return getJSXAttributesByName({ j, element, attributeName }).length > 0;
-}
-
-export function removeImport({
-	j,
-	base,
-	packageName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	packageName: string;
-}) {
-	base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.node.source.value === packageName)
-		.remove();
-}
-
-export function tryCreateImport({
-	j,
-	base,
-	relativeToPackage,
-	packageName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	relativeToPackage: string;
-	packageName: string;
-}) {
-	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;
-}) {
-	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 function doesIdentifierExist({
-	j,
-	base,
-	name,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	name: string;
-}): boolean {
-	return base.find(j.Identifier).filter((identifer) => identifer.value.name === name).length > 0;
-}
-
-export function isUsingSupportedSpread({
-	j,
-	base,
-	element,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	element: NodePath<JSXElement, JSXElement>;
-}): boolean {
-	const isUsingSpread: boolean = j(element).find(j.JSXSpreadAttribute).length > 0;
-
-	if (!isUsingSpread) {
-		return true;
-	}
-
-	return (
-		j(element)
-			.find(j.JSXSpreadAttribute)
-			.filter((spread) => {
-				const argument = spread.value.argument;
-				// in place expression is supported
-				if (argument.type === 'ObjectExpression') {
-					return true;
-				}
-
-				// Supporting identifiers that point to an a local object expression
-				if (argument.type === 'Identifier') {
-					return (
-						base.find(j.VariableDeclarator).filter((declarator): boolean => {
-							return Boolean(
-								declarator.value.id.type === 'Identifier' &&
-									declarator.value.init &&
-									declarator.value.init.type === 'ObjectExpression',
-							);
-						}).length > 0
-					);
-				}
-
-				// We don't support anything else
-				return false;
-			}).length > 0
-	);
-}
-
-export function isOnlyUsingNameForJSX({
-	j,
-	base,
-	name,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	name: string;
-}): boolean {
-	const jsxIdentifierCount: number = base
-		.find(j.JSXIdentifier)
-		.filter((identifier) => identifier.value.name === name).length;
-
-	// Not used in JSX at all
-	if (jsxIdentifierCount === 0) {
-		return false;
-	}
-
-	const nonJSXIdentifierCount: number = base.find(j.Identifier).filter((identifier) => {
-		if (identifier.value.name !== name) {
-			return false;
-		}
-
-		// @ts-ignore
-		if (identifier.value.type === 'JSXIdentifier') {
-			return false;
-		}
-
-		// Excluding exports
-		if (j(identifier).closest(j.ImportDefaultSpecifier).length) {
-			return false;
-		}
-		if (j(identifier).closest(j.ImportSpecifier).length) {
-			return false;
-		}
-
-		return true;
-	}).length;
-
-	if (nonJSXIdentifierCount > 0) {
-		return false;
-	}
-
-	return true;
-}
-
-export function getSafeImportName({
-	j,
-	base,
-	currentDefaultSpecifierName,
-	desiredName,
-	fallbackName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	currentDefaultSpecifierName: string;
-	desiredName: string;
-	fallbackName: string;
-}) {
-	if (currentDefaultSpecifierName === desiredName) {
-		return desiredName;
-	}
-
-	const isUsed: boolean = doesIdentifierExist({ j, base, name: desiredName });
-
-	return isUsed ? fallbackName : desiredName;
-}
-
-export function isUsingThroughSpread({
-	j,
-	base,
-	element,
-	propName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	element: NodePath<JSXElement, JSXElement>;
-	propName: string;
-}): boolean {
-	if (!isUsingSupportedSpread({ j, base, element })) {
-		return false;
-	}
-
-	const isUsedThroughExpression: boolean =
-		j(element)
-			.find(j.JSXSpreadAttribute)
-			.find(j.ObjectExpression)
-			.filter((item) => {
-				const match: boolean =
-					item.value.properties.filter(
-						(property) =>
-							property.type === 'ObjectProperty' &&
-							property.key.type === 'Identifier' &&
-							property.key.name === propName,
-					).length > 0;
-
-				return match;
-			}).length > 0;
-
-	if (isUsedThroughExpression) {
-		return true;
-	}
-
-	const isUsedThroughIdentifier: boolean =
-		j(element)
-			.find(j.JSXSpreadAttribute)
-			.find(j.Identifier)
-			.filter((identifier): boolean => {
-				return (
-					base
-						.find(j.VariableDeclarator)
-						.filter(
-							(declarator) =>
-								declarator.value.id.type === 'Identifier' &&
-								declarator.value.id.name === identifier.value.name,
-						)
-						.filter((declarator) => {
-							const value = declarator.value;
-							if (value.id.type !== 'Identifier') {
-								return false;
-							}
-
-							if (value.id.name !== identifier.value.name) {
-								return false;
-							}
-
-							if (!value.init) {
-								return false;
-							}
-
-							if (value.init.type !== 'ObjectExpression') {
-								return false;
-							}
-
-							const match: boolean =
-								value.init.properties.filter(
-									(property) =>
-										property.type === 'ObjectProperty' &&
-										property.key.type === 'Identifier' &&
-										property.key.name === propName,
-								).length > 0;
-
-							return match;
-						}).length > 0
-				);
-			}).length > 0;
-
-	return isUsedThroughIdentifier;
-}
-
-export function isUsingProp({
-	j,
-	base,
-	element,
-	propName,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	element: NodePath<JSXElement, JSXElement>;
-	propName: string;
-}): boolean {
-	return (
-		hasJSXAttributesByName({
-			j,
-			element: element.value,
-			attributeName: propName,
-		}) ||
-		isUsingThroughSpread({
-			j,
-			base,
-			element,
-			propName,
-		})
-	);
-}
-
-// 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 addCommentBeforeJSX(j: core.JSCodeshift, element: NodePath, message: string) {
-	const content: string = `\nTODO: (from codemod) ${clean(message)}\n`;
-
-	const comment = j.commentBlock(content, false, true);
-
-	element.insertBefore(comment);
-}
-
-export function addCommentToStartOfFile({
-	j,
-	base,
-	message,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<Node>;
-	message: string;
-}) {
-	addCommentBefore({
-		j,
-		target: base.find(j.Program),
-		message,
-	});
-}
-
-export function addCommentBefore({
-	j,
-	target,
-	message,
-}: {
-	j: core.JSCodeshift;
-	target: Collection<Node> | Collection<Program> | Collection<ImportDeclaration>;
-	message: string;
-}) {
-	const content: string = ` TODO: (from codemod) ${clean(message)} `;
-	target.forEach((path) => {
-		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 shiftDefaultImport({
-	j,
-	base,
-	defaultName,
-	oldPackagePath,
-	newPackagePath,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	defaultName: string;
-	oldPackagePath: string;
-	newPackagePath: string;
-}) {
-	tryCreateImport({
-		j,
-		base,
-		relativeToPackage: oldPackagePath,
-		packageName: newPackagePath,
-	});
-
-	addToImport({
-		j,
-		base,
-		importSpecifier: j.importDefaultSpecifier(j.identifier(defaultName)),
-		packageName: newPackagePath,
-	});
-
-	// removing old default specifier
-	base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.node.source.value === oldPackagePath)
-		.find(j.ImportDefaultSpecifier)
-		.remove();
-}
-
-type Option =
-	| {
-			type: 'change-name';
-			oldName: string;
-			newName: string;
-			fallbackNameAlias: string;
-	  }
-	| {
-			type: 'keep-name';
-			name: string;
-			behaviour: 'move-to-default-import' | 'keep-as-named-import';
-	  };
-
-// try to avoid this one if you can. I'm not super happy with it
-export function changeImportFor({
-	j,
-	base,
-	option,
-	oldPackagePath,
-	newPackagePath,
-}: {
-	j: core.JSCodeshift;
-	base: Collection<any>;
-	option: Option;
-	oldPackagePath: string;
-	newPackagePath: string;
-}) {
-	const currentName: string = option.type === 'change-name' ? option.oldName : option.name;
-	const desiredName: string = option.type === 'change-name' ? option.newName : option.name;
-
-	const isUsingName: boolean =
-		base
-			.find(j.ImportDeclaration)
-			.filter((path) => path.node.source.value === oldPackagePath)
-			.find(j.ImportSpecifier)
-			.find(j.Identifier)
-			.filter((identifier) => identifier.value.name === currentName).length > 0;
-
-	if (!isUsingName) {
-		return;
-	}
-
-	const existingAlias: Nullable<string> =
-		base
-			.find(j.ImportDeclaration)
-			.filter((path) => path.node.source.value === oldPackagePath)
-			.find(j.ImportSpecifier)
-			.nodes()
-			.map((specifier): Nullable<string> => {
-				if (specifier.imported.name !== currentName) {
-					return null;
-				}
-				// If aliased: return the alias
-				if (specifier.local && specifier.local.name !== currentName) {
-					return specifier.local.name;
-				}
-
-				return null;
-			})
-			.filter(Boolean)[0] || null;
-
-	base
-		.find(j.ImportDeclaration)
-		.filter((path) => path.node.source.value === oldPackagePath)
-		.find(j.ImportSpecifier)
-		.find(j.Identifier)
-		.filter((identifier) => {
-			if (identifier.value.name === currentName) {
-				return true;
-			}
-			if (identifier.value.name === existingAlias) {
-				return true;
-			}
-			return false;
-		})
-		.remove();
-
-	// Check to see if need to create new package path
-	// Try create an import declaration just before the old import
-	tryCreateImport({
-		j,
-		base,
-		relativeToPackage: oldPackagePath,
-		packageName: newPackagePath,
-	});
-
-	if (option.type === 'keep-name') {
-		const newSpecifier: ImportSpecifier | ImportDefaultSpecifier = (() => {
-			if (option.behaviour === 'keep-as-named-import') {
-				if (existingAlias) {
-					return j.importSpecifier(j.identifier(desiredName), j.identifier(existingAlias));
-				}
-
-				return j.importSpecifier(j.identifier(desiredName));
-			}
-
-			// moving to default specifier
-			return j.importDefaultSpecifier(j.identifier(existingAlias || desiredName));
-		})();
-
-		// We don't need to touch anything else in the file
-
-		addToImport({
-			j,
-			base,
-			importSpecifier: newSpecifier,
-			packageName: newPackagePath,
-		});
-		return;
-	}
-
-	const isNewNameAvailable: boolean =
-		base.find(j.Identifier).filter((i) => i.value.name === option.newName).length === 0;
-
-	const newSpecifier: ImportSpecifier = (() => {
-		if (existingAlias) {
-			return j.importSpecifier(j.identifier(desiredName), j.identifier(existingAlias));
-		}
-
-		if (isNewNameAvailable) {
-			return j.importSpecifier(j.identifier(desiredName));
-		}
-
-		// new type name is not available: need to use a new alias
-		return j.importSpecifier(j.identifier(desiredName), j.identifier(option.fallbackNameAlias));
-	})();
-
-	addToImport({
-		j,
-		base,
-		importSpecifier: newSpecifier,
-		packageName: newPackagePath,
-	});
-
-	// Change usages of old type in file
-	base
-		.find(j.Identifier)
-		.filter((identifier) => identifier.value.name === option.oldName)
-		.replaceWith(j.identifier(isNewNameAvailable ? option.newName : option.fallbackNameAlias));
-}