@atlaskit/menu 2.4.0 → 2.5.0

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

@@ -1,177 +1,149 @@
 import { type NodePath } from 'ast-types/lib/node-path';
 import type {
-  API,
-  ASTPath,
-  default as core,
-  FileInfo,
-  ImportDeclaration,
-  ImportSpecifier,
-  Options,
+	API,
+	ASTPath,
+	default as core,
+	FileInfo,
+	ImportDeclaration,
+	ImportSpecifier,
+	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);
-    });
+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,
+	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;
+	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,
-          `
+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,
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	importPath: string,
 ) {
-  return !!source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === importPath).length;
+	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/menu')) {
-    const defaultSpecifier = getDefaultSpecifierName({
-      j,
-      base: source,
-      packageName: '@atlaskit/menu',
-    });
-
-    if (defaultSpecifier != null) {
-      updateCssFnProp(j, source, defaultSpecifier);
-    }
-
-    [
-      'ButtonItem',
-      'LinkItem',
-      'CustomItem',
-      'HeadingItem',
-      'SkeletonItem',
-      'SkeletonHeadingItem',
-      'MenuGroup',
-      'PopupMenuGroup',
-      'Section',
-    ].forEach((pkg) => {
-      const importSpecifier = getImportSpecifier(
-        j,
-        source,
-        '@atlaskit/menu',
-        pkg,
-      );
-
-      if (importSpecifier != null) {
-        updateCssFnProp(j, source, importSpecifier);
-      }
-    });
-
-    return source.toSource(
-      options.printOptions || {
-        quote: 'single',
-        trailingComma: true,
-      },
-    );
-  }
-
-  return fileInfo.source;
+export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const source = j(fileInfo.source);
+
+	if (hasImportDeclaration(j, source, '@atlaskit/menu')) {
+		const defaultSpecifier = getDefaultSpecifierName({
+			j,
+			base: source,
+			packageName: '@atlaskit/menu',
+		});
+
+		if (defaultSpecifier != null) {
+			updateCssFnProp(j, source, defaultSpecifier);
+		}
+
+		[
+			'ButtonItem',
+			'LinkItem',
+			'CustomItem',
+			'HeadingItem',
+			'SkeletonItem',
+			'SkeletonHeadingItem',
+			'MenuGroup',
+			'PopupMenuGroup',
+			'Section',
+		].forEach((pkg) => {
+			const importSpecifier = getImportSpecifier(j, source, '@atlaskit/menu', pkg);
+
+			if (importSpecifier != null) {
+				updateCssFnProp(j, source, importSpecifier);
+			}
+		});
+
+		return source.toSource(
+			options.printOptions || {
+				quote: 'single',
+				trailingComma: true,
+			},
+		);
+	}
+
+	return fileInfo.source;
 }

package/codemods/2.1.0-invalid-link-item-to-button-item.tsx

@@ -1,170 +1,146 @@
 import type {
-  API,
-  ASTPath,
-  default as core,
-  FileInfo,
-  ImportDeclaration,
-  ImportSpecifier,
-  Options,
+	API,
+	ASTPath,
+	default as core,
+	FileInfo,
+	ImportDeclaration,
+	ImportSpecifier,
+	Options,
 } from 'jscodeshift';
 
 const invalidHrefValues = ['', '#'];
 const pkg = '@atlaskit/menu';
 
-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 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,
+	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;
+	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 convertInvalidLinkItemsToButtonItems(
-  j: core.JSCodeshift,
-  source: ReturnType<typeof j>,
-  specifier: string,
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	specifier: string,
 ) {
-  // For each instance of LinkItem
-  source.findJSXElements(specifier).forEach((element) => {
-    const hrefPropCollection = getJSXAttributesByName(j, element, 'href');
-
-    // base case: no `href` prop exists, it is invalid
-    let validHref = false;
-
-    // if `href` exists
-    if (hrefPropCollection.length > 0) {
-      const hrefProp = hrefPropCollection.get();
-
-      const hrefStringLiteral = j(hrefProp).find(j.StringLiteral);
-      const hrefExpressionContainer = j(hrefProp)
-        .find(j.JSXExpressionContainer)
-        .find(j.Expression);
-
-      // This is tin foil hattery. Can something be neither a string literal
-      // nor an expression container? Don't know but gonna cover that
-      if (
-        hrefStringLiteral.length === 0 &&
-        hrefExpressionContainer.length === 0
-      ) {
-        return;
-      }
-
-      if (hrefStringLiteral.length > 0) {
-        const hrefValue = hrefStringLiteral.get().value.value;
-        if (invalidHrefValues.includes(hrefValue)) {
-          j(hrefProp).forEach((el) => j(el).remove());
-        } else {
-          validHref = true;
-        }
-      } else {
-        // It seems foolish to try and resolve variables, so we will assume it
-        // is valid
-        validHref = true;
-      }
-    }
-
-    if (!validHref) {
-      const pkgImport = source
-        .find(j.ImportDeclaration)
-        .filter((path) => path.node.source.value === pkg);
-      const buttonItemIsImported =
-        pkgImport
-          .find(j.ImportSpecifier)
-          .nodes()
-          .filter((node) => node.imported.name === 'ButtonItem').length > 0;
-      if (!buttonItemIsImported) {
-        // Add ButtonItem to imports
-        const newSpecifier = j.importSpecifier(j.identifier('ButtonItem'));
-        pkgImport.forEach((moduleImport) => {
-          const specifiers = moduleImport.node.specifiers
-            ? [...moduleImport.node.specifiers]
-            : [];
-          j(moduleImport).replaceWith(
-            j.importDeclaration(
-              specifiers.concat([newSpecifier]),
-              moduleImport.node.source,
-            ),
-          );
-        });
-      }
-
-      // Replace existing LinkItem with ButtonItem, while maintaining the same props
-      if (element.value.openingElement.name.type === 'JSXIdentifier') {
-        element.value.openingElement.name.name = 'ButtonItem';
-        if (
-          element.value.closingElement &&
-          element.value.closingElement.name.type === 'JSXIdentifier'
-        ) {
-          element.value.closingElement.name.name = 'ButtonItem';
-        }
-      }
-    }
-  });
+	// For each instance of LinkItem
+	source.findJSXElements(specifier).forEach((element) => {
+		const hrefPropCollection = getJSXAttributesByName(j, element, 'href');
+
+		// base case: no `href` prop exists, it is invalid
+		let validHref = false;
+
+		// if `href` exists
+		if (hrefPropCollection.length > 0) {
+			const hrefProp = hrefPropCollection.get();
+
+			const hrefStringLiteral = j(hrefProp).find(j.StringLiteral);
+			const hrefExpressionContainer = j(hrefProp).find(j.JSXExpressionContainer).find(j.Expression);
+
+			// This is tin foil hattery. Can something be neither a string literal
+			// nor an expression container? Don't know but gonna cover that
+			if (hrefStringLiteral.length === 0 && hrefExpressionContainer.length === 0) {
+				return;
+			}
+
+			if (hrefStringLiteral.length > 0) {
+				const hrefValue = hrefStringLiteral.get().value.value;
+				if (invalidHrefValues.includes(hrefValue)) {
+					j(hrefProp).forEach((el) => j(el).remove());
+				} else {
+					validHref = true;
+				}
+			} else {
+				// It seems foolish to try and resolve variables, so we will assume it
+				// is valid
+				validHref = true;
+			}
+		}
+
+		if (!validHref) {
+			const pkgImport = source
+				.find(j.ImportDeclaration)
+				.filter((path) => path.node.source.value === pkg);
+			const buttonItemIsImported =
+				pkgImport
+					.find(j.ImportSpecifier)
+					.nodes()
+					.filter((node) => node.imported.name === 'ButtonItem').length > 0;
+			if (!buttonItemIsImported) {
+				// Add ButtonItem to imports
+				const newSpecifier = j.importSpecifier(j.identifier('ButtonItem'));
+				pkgImport.forEach((moduleImport) => {
+					const specifiers = moduleImport.node.specifiers ? [...moduleImport.node.specifiers] : [];
+					j(moduleImport).replaceWith(
+						j.importDeclaration(specifiers.concat([newSpecifier]), moduleImport.node.source),
+					);
+				});
+			}
+
+			// Replace existing LinkItem with ButtonItem, while maintaining the same props
+			if (element.value.openingElement.name.type === 'JSXIdentifier') {
+				element.value.openingElement.name.name = 'ButtonItem';
+				if (
+					element.value.closingElement &&
+					element.value.closingElement.name.type === 'JSXIdentifier'
+				) {
+					element.value.closingElement.name.name = 'ButtonItem';
+				}
+			}
+		}
+	});
 }
 
 function hasImportDeclaration(
-  j: core.JSCodeshift,
-  source: ReturnType<typeof j>,
-  importPath: string,
+	j: core.JSCodeshift,
+	source: ReturnType<typeof j>,
+	importPath: string,
 ) {
-  return !!source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === importPath).length;
+	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);
+export default function transformer(fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) {
+	const source = j(fileInfo.source);
 
-  if (hasImportDeclaration(j, source, pkg)) {
-    const importSpecifier = getImportSpecifier(j, source, pkg, 'LinkItem');
+	if (hasImportDeclaration(j, source, pkg)) {
+		const importSpecifier = getImportSpecifier(j, source, pkg, 'LinkItem');
 
-    if (importSpecifier != null) {
-      convertInvalidLinkItemsToButtonItems(j, source, importSpecifier);
-    }
+		if (importSpecifier != null) {
+			convertInvalidLinkItemsToButtonItems(j, source, importSpecifier);
+		}
 
-    return source.toSource(
-      options.printOptions || {
-        quote: 'single',
-        trailingComma: true,
-      },
-    );
-  }
+		return source.toSource(
+			options.printOptions || {
+				quote: 'single',
+				trailingComma: true,
+			},
+		);
+	}
 
-  return fileInfo.source;
+	return fileInfo.source;
 }