@atlaskit/tabs 16.1.2 → 16.2.0

package/codemods/migrations/map-tabs-prop.tsx

@@ -1,21 +1,18 @@
 import {
-  type ASTPath,
-  type default as core,
-  type ImportDeclaration,
-  type JSXElement,
+	type ASTPath,
+	type default as core,
+	type ImportDeclaration,
+	type JSXElement,
 } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
 import {
-  addCommentToStartOfFile,
-  getDefaultSpecifier,
-  getJSXAttributesByName,
+	addCommentToStartOfFile,
+	getDefaultSpecifier,
+	getJSXAttributesByName,
 } from '@atlaskit/codemod-utils';
 
-import {
-  createRemoveFuncWithDefaultSpecifierFor,
-  doesIdentifierExist,
-} from '../utils';
+import { createRemoveFuncWithDefaultSpecifierFor, doesIdentifierExist } from '../utils';
 
 const spreadComment = `
 This file is spreading props on the Tabs component.
@@ -31,162 +28,144 @@ https://atlassian.design/components/tabs/examples
 `;
 
 const getImportSpecifiers = (j: core.JSCodeshift, defined: Array<string>) => {
-  return ['Tab', 'TabList', 'TabPanel'].map((specifier) => {
-    if (!defined.includes(specifier)) {
-      return j.importSpecifier(
-        j.identifier(specifier),
-        j.identifier(`Atlaskit${specifier}`),
-      );
-    } else {
-      return j.importSpecifier(j.identifier(specifier));
-    }
-  });
+	return ['Tab', 'TabList', 'TabPanel'].map((specifier) => {
+		if (!defined.includes(specifier)) {
+			return j.importSpecifier(j.identifier(specifier), j.identifier(`Atlaskit${specifier}`));
+		} else {
+			return j.importSpecifier(j.identifier(specifier));
+		}
+	});
 };
 
 const packageName = '@atlaskit/tabs';
 export const mapTabsProp = (j: core.JSCodeshift, source: Collection<Node>) => {
-  const specifier = getDefaultSpecifier(j, source, packageName);
-
-  if (!specifier) {
-    return;
-  }
-
-  const tabTagName = doesIdentifierExist({ j, base: source, name: 'Tab' })
-    ? 'AtlaskitTab'
-    : 'Tab';
-  const tabListTagName = doesIdentifierExist({
-    j,
-    base: source,
-    name: 'TabList',
-  })
-    ? 'AtlaskitTabList'
-    : 'TabList';
-  const tabPanelTagName = doesIdentifierExist({
-    j,
-    base: source,
-    name: 'TabPanel',
-  })
-    ? 'AtlaskitTabPanel'
-    : 'TabPanel';
-
-  source.findJSXElements(specifier).forEach((element: ASTPath<JSXElement>) => {
-    let tabs;
-
-    getJSXAttributesByName(j, element, 'tabs').forEach((attribute: any) => {
-      tabs = attribute.value.value.expression;
-    });
-    if (!tabs) {
-      j(element)
-        .find(j.JSXOpeningElement)
-        .find(j.JSXSpreadAttribute)
-        .forEach((spreadAttribute) => {
-          // If using spread then leave a comment indicating further research being needed
-          addCommentToStartOfFile({ j, base: source, message: spreadComment });
-          const spreadArgument = spreadAttribute.value.argument;
-          tabs = j.memberExpression(spreadArgument, j.identifier('tabs'));
-        });
-    }
-
-    if (!tabs) {
-      return;
-    }
-
-    const newLine = j.jsxText('\n');
-
-    const tabList = j.jsxElement(
-      j.jsxOpeningElement(j.jsxIdentifier(tabListTagName)),
-      j.jsxClosingElement(j.jsxIdentifier(tabListTagName)),
-      [
-        j.jsxText('\n'),
-        j.jsxExpressionContainer(
-          j.callExpression(j.memberExpression(tabs, j.identifier('map')), [
-            j.arrowFunctionExpression(
-              [j.identifier('tab'), j.identifier('index')],
-              j.jsxElement(
-                j.jsxOpeningElement(j.jsxIdentifier(tabTagName), [
-                  j.jsxAttribute(
-                    j.jsxIdentifier('testId'),
-                    j.jsxExpressionContainer(j.identifier('tab.testId')),
-                  ),
-                  j.jsxAttribute(
-                    j.jsxIdentifier('key'),
-                    j.jsxExpressionContainer(j.identifier('index')),
-                  ),
-                ]),
-                j.jsxClosingElement(j.jsxIdentifier(tabTagName)),
-                [j.jsxExpressionContainer(j.identifier('tab.label'))],
-              ),
-            ),
-          ]),
-        ),
-        j.jsxText('\n'),
-      ],
-    );
-
-    const tabPanels = j.jsxExpressionContainer(
-      j.callExpression(j.memberExpression(tabs, j.identifier('map')), [
-        j.arrowFunctionExpression(
-          [j.identifier('tab'), j.identifier('index')],
-          j.jsxElement(
-            j.jsxOpeningElement(j.jsxIdentifier(tabPanelTagName), [
-              j.jsxAttribute(
-                j.jsxIdentifier('key'),
-                j.jsxExpressionContainer(j.identifier('index')),
-              ),
-            ]),
-            j.jsxClosingElement(j.jsxIdentifier(tabPanelTagName)),
-            [j.jsxExpressionContainer(j.identifier('tab.content'))],
-          ),
-        ),
-      ]),
-    );
-
-    const tabsChildren = [newLine, tabList, newLine, tabPanels, newLine];
-
-    j(element)
-      .find(j.JSXOpeningElement)
-      .forEach((openingElement) => {
-        // @ts-ignore
-        if (openingElement.value.name.name === specifier) {
-          j(openingElement).replaceWith(
-            j.jsxElement(
-              j.jsxOpeningElement(
-                j.jsxIdentifier(specifier),
-                openingElement.value.attributes,
-              ),
-              j.jsxClosingElement(j.jsxIdentifier(specifier)),
-              tabsChildren,
-            ),
-          );
-        }
-      });
-  });
-
-  const specifiers = getImportSpecifiers(j, [
-    tabTagName,
-    tabListTagName,
-    tabPanelTagName,
-  ]);
-
-  source
-    .find(j.ImportDeclaration)
-    .filter(
-      (path: ASTPath<ImportDeclaration>) =>
-        path.node.source.value === packageName,
-    )
-    .forEach((path: ASTPath<ImportDeclaration>) => {
-      j(path).replaceWith(
-        j.importDeclaration(
-          // @ts-ignore
-          [...path.value.specifiers, ...specifiers],
-
-          j.literal(packageName),
-        ),
-      );
-    });
+	const specifier = getDefaultSpecifier(j, source, packageName);
+
+	if (!specifier) {
+		return;
+	}
+
+	const tabTagName = doesIdentifierExist({ j, base: source, name: 'Tab' }) ? 'AtlaskitTab' : 'Tab';
+	const tabListTagName = doesIdentifierExist({
+		j,
+		base: source,
+		name: 'TabList',
+	})
+		? 'AtlaskitTabList'
+		: 'TabList';
+	const tabPanelTagName = doesIdentifierExist({
+		j,
+		base: source,
+		name: 'TabPanel',
+	})
+		? 'AtlaskitTabPanel'
+		: 'TabPanel';
+
+	source.findJSXElements(specifier).forEach((element: ASTPath<JSXElement>) => {
+		let tabs;
+
+		getJSXAttributesByName(j, element, 'tabs').forEach((attribute: any) => {
+			tabs = attribute.value.value.expression;
+		});
+		if (!tabs) {
+			j(element)
+				.find(j.JSXOpeningElement)
+				.find(j.JSXSpreadAttribute)
+				.forEach((spreadAttribute) => {
+					// If using spread then leave a comment indicating further research being needed
+					addCommentToStartOfFile({ j, base: source, message: spreadComment });
+					const spreadArgument = spreadAttribute.value.argument;
+					tabs = j.memberExpression(spreadArgument, j.identifier('tabs'));
+				});
+		}
+
+		if (!tabs) {
+			return;
+		}
+
+		const newLine = j.jsxText('\n');
+
+		const tabList = j.jsxElement(
+			j.jsxOpeningElement(j.jsxIdentifier(tabListTagName)),
+			j.jsxClosingElement(j.jsxIdentifier(tabListTagName)),
+			[
+				j.jsxText('\n'),
+				j.jsxExpressionContainer(
+					j.callExpression(j.memberExpression(tabs, j.identifier('map')), [
+						j.arrowFunctionExpression(
+							[j.identifier('tab'), j.identifier('index')],
+							j.jsxElement(
+								j.jsxOpeningElement(j.jsxIdentifier(tabTagName), [
+									j.jsxAttribute(
+										j.jsxIdentifier('testId'),
+										j.jsxExpressionContainer(j.identifier('tab.testId')),
+									),
+									j.jsxAttribute(
+										j.jsxIdentifier('key'),
+										j.jsxExpressionContainer(j.identifier('index')),
+									),
+								]),
+								j.jsxClosingElement(j.jsxIdentifier(tabTagName)),
+								[j.jsxExpressionContainer(j.identifier('tab.label'))],
+							),
+						),
+					]),
+				),
+				j.jsxText('\n'),
+			],
+		);
+
+		const tabPanels = j.jsxExpressionContainer(
+			j.callExpression(j.memberExpression(tabs, j.identifier('map')), [
+				j.arrowFunctionExpression(
+					[j.identifier('tab'), j.identifier('index')],
+					j.jsxElement(
+						j.jsxOpeningElement(j.jsxIdentifier(tabPanelTagName), [
+							j.jsxAttribute(
+								j.jsxIdentifier('key'),
+								j.jsxExpressionContainer(j.identifier('index')),
+							),
+						]),
+						j.jsxClosingElement(j.jsxIdentifier(tabPanelTagName)),
+						[j.jsxExpressionContainer(j.identifier('tab.content'))],
+					),
+				),
+			]),
+		);
+
+		const tabsChildren = [newLine, tabList, newLine, tabPanels, newLine];
+
+		j(element)
+			.find(j.JSXOpeningElement)
+			.forEach((openingElement) => {
+				// @ts-ignore
+				if (openingElement.value.name.name === specifier) {
+					j(openingElement).replaceWith(
+						j.jsxElement(
+							j.jsxOpeningElement(j.jsxIdentifier(specifier), openingElement.value.attributes),
+							j.jsxClosingElement(j.jsxIdentifier(specifier)),
+							tabsChildren,
+						),
+					);
+				}
+			});
+	});
+
+	const specifiers = getImportSpecifiers(j, [tabTagName, tabListTagName, tabPanelTagName]);
+
+	source
+		.find(j.ImportDeclaration)
+		.filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === packageName)
+		.forEach((path: ASTPath<ImportDeclaration>) => {
+			j(path).replaceWith(
+				j.importDeclaration(
+					// @ts-ignore
+					[...path.value.specifiers, ...specifiers],
+
+					j.literal(packageName),
+				),
+			);
+		});
 };
 
-export const removeTabsProp = createRemoveFuncWithDefaultSpecifierFor(
-  '@atlaskit/tabs',
-  'tabs',
-);
+export const removeTabsProp = createRemoveFuncWithDefaultSpecifierFor('@atlaskit/tabs', 'tabs');

package/codemods/migrations/on-select-to-on-change.tsx

@@ -1,14 +1,10 @@
-import {
-  type ASTPath,
-  type default as core,
-  type JSXElement,
-} from 'jscodeshift';
+import { type ASTPath, type default as core, type JSXElement } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
 import {
-  addCommentToStartOfFile,
-  getDefaultSpecifier,
-  getJSXAttributesByName,
+	addCommentToStartOfFile,
+	getDefaultSpecifier,
+	getJSXAttributesByName,
 } from '@atlaskit/codemod-utils';
 
 const comment = `
@@ -30,72 +26,66 @@ If you are using the selected prop you will need to ensure that you are passing
 of the selected tab as it also doesn't accept TabData anymore.
 `;
 
-export const migrateOnSelectType = (
-  j: core.JSCodeshift,
-  source: Collection<Node>,
-) => {
-  const specifier = getDefaultSpecifier(j, source, '@atlaskit/tabs');
-
-  if (!specifier) {
-    return;
-  }
-
-  source.findJSXElements(specifier).forEach((element: ASTPath<JSXElement>) => {
-    let tabs: any;
-    getJSXAttributesByName(j, element, 'tabs').forEach((attribute: any) => {
-      tabs = attribute.value.value.expression;
-    });
-
-    if (!tabs) {
-      j(element)
-        .find(j.JSXOpeningElement)
-        .find(j.JSXSpreadAttribute)
-        .forEach((spreadAttribute) => {
-          const spreadArgument = spreadAttribute.value.argument;
-          tabs = j.memberExpression(spreadArgument, j.identifier('tabs'));
-        });
-    }
-
-    if (!tabs) {
-      return;
-    }
-
-    getJSXAttributesByName(j, element, 'onSelect').forEach((attribute: any) => {
-      addCommentToStartOfFile({ j, base: source, message: comment });
-      const onChangeValue = attribute.node.value.expression;
-
-      let selectedTab = j.variableDeclaration('const', [
-        j.variableDeclarator(
-          j.identifier('selectedTab'),
-          j.memberExpression(tabs, j.identifier('index'), true),
-        ),
-      ]);
-
-      // Wrap arrow functions to create an IIFE
-      let onChangeCall = onChangeValue.name
-        ? onChangeValue
-        : j.parenthesizedExpression(onChangeValue);
-
-      const newVersionOfFn = j.arrowFunctionExpression(
-        [j.identifier('index'), j.identifier('analyticsEvent')],
-        j.blockStatement([
-          selectedTab,
-          j.expressionStatement(
-            j.callExpression(onChangeCall, [
-              j.identifier('selectedTab'),
-              j.identifier('index'),
-              j.identifier('analyticsEvent'),
-            ]),
-          ),
-        ]),
-      );
-
-      j(attribute).replaceWith(
-        j.jsxAttribute(
-          j.jsxIdentifier('onChange'),
-          j.jsxExpressionContainer(newVersionOfFn),
-        ),
-      );
-    });
-  });
+export const migrateOnSelectType = (j: core.JSCodeshift, source: Collection<Node>) => {
+	const specifier = getDefaultSpecifier(j, source, '@atlaskit/tabs');
+
+	if (!specifier) {
+		return;
+	}
+
+	source.findJSXElements(specifier).forEach((element: ASTPath<JSXElement>) => {
+		let tabs: any;
+		getJSXAttributesByName(j, element, 'tabs').forEach((attribute: any) => {
+			tabs = attribute.value.value.expression;
+		});
+
+		if (!tabs) {
+			j(element)
+				.find(j.JSXOpeningElement)
+				.find(j.JSXSpreadAttribute)
+				.forEach((spreadAttribute) => {
+					const spreadArgument = spreadAttribute.value.argument;
+					tabs = j.memberExpression(spreadArgument, j.identifier('tabs'));
+				});
+		}
+
+		if (!tabs) {
+			return;
+		}
+
+		getJSXAttributesByName(j, element, 'onSelect').forEach((attribute: any) => {
+			addCommentToStartOfFile({ j, base: source, message: comment });
+			const onChangeValue = attribute.node.value.expression;
+
+			let selectedTab = j.variableDeclaration('const', [
+				j.variableDeclarator(
+					j.identifier('selectedTab'),
+					j.memberExpression(tabs, j.identifier('index'), true),
+				),
+			]);
+
+			// Wrap arrow functions to create an IIFE
+			let onChangeCall = onChangeValue.name
+				? onChangeValue
+				: j.parenthesizedExpression(onChangeValue);
+
+			const newVersionOfFn = j.arrowFunctionExpression(
+				[j.identifier('index'), j.identifier('analyticsEvent')],
+				j.blockStatement([
+					selectedTab,
+					j.expressionStatement(
+						j.callExpression(onChangeCall, [
+							j.identifier('selectedTab'),
+							j.identifier('index'),
+							j.identifier('analyticsEvent'),
+						]),
+					),
+				]),
+			);
+
+			j(attribute).replaceWith(
+				j.jsxAttribute(j.jsxIdentifier('onChange'), j.jsxExpressionContainer(newVersionOfFn)),
+			);
+		});
+	});
 };

package/codemods/migrations/remove-components-prop.tsx

@@ -14,7 +14,7 @@ https://atlassian.design/components/tabs/examples#customizing-tab-panel
 `;
 
 export const removeComponentsProp = createRemoveFuncWithDefaultSpecifierFor(
-  '@atlaskit/tabs',
-  'components',
-  comment,
+	'@atlaskit/tabs',
+	'components',
+	comment,
 );

package/codemods/migrations/remove-is-selected-test-prop.tsx

@@ -11,7 +11,7 @@ This is documented at https:atlassian.design/components/tabs/examples#controlled
 `;
 
 export const removeIsSelectedTestProp = createRemoveFuncWithDefaultSpecifierFor(
-  '@atlaskit/tabs',
-  'isSelectedTest',
-  comment,
+	'@atlaskit/tabs',
+	'isSelectedTest',
+	comment,
 );

package/codemods/migrations/remove-tab-item-tab-content.tsx

@@ -1,29 +1,26 @@
 import {
-  type ASTPath,
-  type default as core,
-  type ImportDeclaration,
-  type ImportSpecifier,
+	type ASTPath,
+	type default as core,
+	type ImportDeclaration,
+	type ImportSpecifier,
 } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
 const component = '@atlaskit/tabs';
 
-export const removeTabItemTabContent = (
-  j: core.JSCodeshift,
-  source: Collection<Node>,
-) => {
-  source
-    .find(j.ImportDeclaration)
-    .filter(
-      (importDeclaration: ASTPath<ImportDeclaration>) =>
-        importDeclaration.node.source.value === component,
-    )
-    // Tabs only exported TabItem and TabContent from base so remove them
-    .forEach((importDeclaration) => {
-      j(importDeclaration)
-        .find(j.ImportSpecifier)
-        .forEach((importSpecifier: ASTPath<ImportSpecifier>) => {
-          j(importSpecifier).remove();
-        });
-    });
+export const removeTabItemTabContent = (j: core.JSCodeshift, source: Collection<Node>) => {
+	source
+		.find(j.ImportDeclaration)
+		.filter(
+			(importDeclaration: ASTPath<ImportDeclaration>) =>
+				importDeclaration.node.source.value === component,
+		)
+		// Tabs only exported TabItem and TabContent from base so remove them
+		.forEach((importDeclaration) => {
+			j(importDeclaration)
+				.find(j.ImportSpecifier)
+				.forEach((importSpecifier: ASTPath<ImportSpecifier>) => {
+					j(importSpecifier).remove();
+				});
+		});
 };

package/codemods/migrations/remove-types.tsx

@@ -1,45 +1,45 @@
 import {
-  type ASTPath,
-  type default as core,
-  type ImportDeclaration,
-  type ImportSpecifier,
+	type ASTPath,
+	type default as core,
+	type ImportDeclaration,
+	type ImportSpecifier,
 } from 'jscodeshift';
 import { type Collection } from 'jscodeshift/src/Collection';
 
 const component = '@atlaskit/tabs/types';
 const existingTypes = [
-  'TabProps',
-  'TabPanelProps',
-  'TabsProps',
-  'TabListProps',
-  'TabAttributesType',
-  'TabListAttributesType',
-  'TabPanelAttributesType',
-  'TabData',
+	'TabProps',
+	'TabPanelProps',
+	'TabsProps',
+	'TabListProps',
+	'TabAttributesType',
+	'TabListAttributesType',
+	'TabPanelAttributesType',
+	'TabData',
 ];
 
 export const removeTypes = (j: core.JSCodeshift, source: Collection<Node>) => {
-  source
-    .find(j.ImportDeclaration)
-    .filter(
-      (importDeclaration: ASTPath<ImportDeclaration>) =>
-        importDeclaration.node.source.value === component,
-    )
-    .forEach((importDeclaration) => {
-      const specifiers = j(importDeclaration)
-        .find(j.ImportSpecifier)
-        .filter((importSpecifier: ASTPath<ImportSpecifier>) => {
-          if (!existingTypes.includes(importSpecifier.node.imported.name)) {
-            j(importSpecifier).remove();
+	source
+		.find(j.ImportDeclaration)
+		.filter(
+			(importDeclaration: ASTPath<ImportDeclaration>) =>
+				importDeclaration.node.source.value === component,
+		)
+		.forEach((importDeclaration) => {
+			const specifiers = j(importDeclaration)
+				.find(j.ImportSpecifier)
+				.filter((importSpecifier: ASTPath<ImportSpecifier>) => {
+					if (!existingTypes.includes(importSpecifier.node.imported.name)) {
+						j(importSpecifier).remove();
 
-            return false;
-          }
+						return false;
+					}
 
-          return true;
-        });
+					return true;
+				});
 
-      if (!specifiers.length) {
-        j(importDeclaration).remove();
-      }
-    });
+			if (!specifiers.length) {
+				j(importDeclaration).remove();
+			}
+		});
 };