@atlaskit/tabs 17.2.0 → 17.2.2

package/codemods/migrations/add-id-prop.tsx

@@ -1,51 +0,0 @@
-import {
-	type ASTPath,
-	type default as core,
-	type JSXElement,
-	type JSXOpeningElement,
-} from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import { addCommentToStartOfFile, getDefaultSpecifier } from '@atlaskit/codemod-utils';
-
-const component = '@atlaskit/tabs';
-const newProp = 'id';
-
-function generateUniqueId() {
-	return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
-}
-
-export const addIdProp = (j: core.JSCodeshift, source: Collection<Node>) => {
-	const defaultSpecifier = getDefaultSpecifier(j, source, component);
-
-	if (!defaultSpecifier) {
-		return;
-	}
-
-	source.findJSXElements(defaultSpecifier).forEach((element: ASTPath<JSXElement>) => {
-		j(element)
-			.find(j.JSXOpeningElement)
-			.filter(
-				(openingElement: ASTPath<JSXOpeningElement>) =>
-					openingElement.node.name.type === 'JSXIdentifier' &&
-					openingElement.node.name.name === defaultSpecifier,
-			)
-			.forEach((openingElement: ASTPath<JSXOpeningElement>) => {
-				const { attributes } = openingElement.node;
-				const idAttribute = j.jsxAttribute(
-					j.jsxIdentifier(newProp),
-					j.stringLiteral(generateUniqueId()),
-				);
-
-				// @ts-ignore
-				attributes.push(idAttribute);
-
-				addCommentToStartOfFile({
-					j,
-					base: source,
-					message: `We have added an "${newProp}" prop to "${defaultSpecifier}" for accessibility reasons.
-              The codemod has added a random ID but you can add one that makes sense for your use case.`,
-				});
-			});
-	});
-};

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

@@ -1,171 +0,0 @@
-import {
-	type ASTPath,
-	type default as core,
-	type ImportDeclaration,
-	type JSXElement,
-} from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import {
-	addCommentToStartOfFile,
-	getDefaultSpecifier,
-	getJSXAttributesByName,
-} from '@atlaskit/codemod-utils';
-
-import { createRemoveFuncWithDefaultSpecifierFor, doesIdentifierExist } from '../utils';
-
-const spreadComment = `
-This file is spreading props on the Tabs component.
-
-The API has changed to be composable and a number of props have changed.
-- isSelectedTest no longer exists.
-- onSelect is now onChange and has a different type.
-- components prop has been removed in favour of the hooks, useTab and useTabPanel.
-- isContentPersisted is now called shouldUnmountTabPanelOnChange and its behaviour is inverted.
-
-If you were using any of these props, check the docs for the new API at
-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));
-		}
-	});
-};
-
-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),
-				),
-			);
-		});
-};
-
-export const removeTabsProp = createRemoveFuncWithDefaultSpecifierFor('@atlaskit/tabs', 'tabs');

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

@@ -1,91 +0,0 @@
-import { type ASTPath, type default as core, type JSXElement } from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import {
-	addCommentToStartOfFile,
-	getDefaultSpecifier,
-	getJSXAttributesByName,
-} from '@atlaskit/codemod-utils';
-
-const comment = `
-This file uses onSelect and this prop has been changed names to onChange.
-
-The type of onChange has also changed from
-(selected: TabData, selectedIndex: number, analyticsEvent: UIAnalyticsEvent) => void;
-to
-(index: number, analyticsEvent: UIAnalyticsEvent) => void;
-
-The logic around selecting tabs has changed internally and there is no longer the concept of TabData.
-Tabs is now composable and the tabs prop has been removed.
-
-The codemod has changed your usage of onSelect to be one of onChange. We are using the tabs
-array and the selected index to pass the "selected tab" to your old onSelect function. This is
-functional but you may like to update your usage of tabs to fit with the new API.
-
-If you are using the selected prop you will need to ensure that you are passing in the index
-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)),
-			);
-		});
-	});
-};

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

@@ -1,20 +0,0 @@
-import { createRemoveFuncWithDefaultSpecifierFor } from '../utils';
-
-const comment = `
-We could not automatically convert this code to the new API.
-
-This file uses \`Tabs\`’s \`component\` prop. This has been removed as part of moving to
-a compositional API.
-
-To create a custom tab (replacement for \`Item\` component) refer to the docs at
-https://atlassian.design/components/tabs/examples#customizing-tab
-
-To create a custom tab panel (replacement for \`Content\` component) refer to the docs at
-https://atlassian.design/components/tabs/examples#customizing-tab-panel
-`;
-
-export const removeComponentsProp = createRemoveFuncWithDefaultSpecifierFor(
-	'@atlaskit/tabs',
-	'components',
-	comment,
-);

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

@@ -1,17 +0,0 @@
-import { createRemoveFuncWithDefaultSpecifierFor } from '../utils';
-
-const comment = `
-We could not automatically convert this code to the new API.
-
-This file uses \`Tabs\`’s \`isSelectedTest\` prop. This has been removed as it is a second way
-to make \`Tabs\` controlled and is not needed.
-
-You will have to change your usage of \`tabs\` to use the \`selected\` prop.
-This is documented at https:atlassian.design/components/tabs/examples#controlled
-`;
-
-export const removeIsSelectedTestProp = createRemoveFuncWithDefaultSpecifierFor(
-	'@atlaskit/tabs',
-	'isSelectedTest',
-	comment,
-);

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

@@ -1,26 +0,0 @@
-import {
-	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();
-				});
-		});
-};

package/codemods/migrations/remove-types.tsx

@@ -1,45 +0,0 @@
-import {
-	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',
-];
-
-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();
-
-						return false;
-					}
-
-					return true;
-				});
-
-			if (!specifiers.length) {
-				j(importDeclaration).remove();
-			}
-		});
-};

package/codemods/migrations/rename-is-content-persisted-to-should-unmount-tab-panel-on-change.tsx

@@ -1,62 +0,0 @@
-import {
-	type ASTPath,
-	type default as core,
-	type JSXAttribute,
-	type JSXElement,
-} from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import { getDefaultSpecifier, getJSXAttributesByName } from '@atlaskit/codemod-utils';
-
-const component = '@atlaskit/tabs';
-const fromProp = 'isContentPersisted';
-const toProp = 'shouldUnmountTabPanelOnChange';
-
-export const renameIsContentPersistedToShouldUnmountTabPanelOnChange = (
-	j: core.JSCodeshift,
-	source: Collection<Node>,
-) => {
-	const defaultSpecifier = getDefaultSpecifier(j, source, component);
-
-	if (!defaultSpecifier) {
-		return;
-	}
-
-	source.findJSXElements(defaultSpecifier).forEach((element: ASTPath<JSXElement>) => {
-		let foundUsage = false;
-		getJSXAttributesByName(j, element, fromProp).forEach((attribute: ASTPath<JSXAttribute>) => {
-			foundUsage = true;
-			const { value } = attribute.node;
-
-			if (!value) {
-				// boolean attribute isContentPersisted -> removed
-				return j(attribute).remove();
-			}
-
-			if (value.type === 'JSXExpressionContainer') {
-				if (value.expression.type === 'BooleanLiteral') {
-					if (value.expression.value) {
-						// isContentPersisted={true} -> removed
-						j(attribute).remove();
-					} else {
-						// isContentPersisted={false} -> shouldUnmountTabPanelOnChange
-						j(attribute).replaceWith(j.jsxAttribute(j.jsxIdentifier(toProp), null));
-					}
-				} else if (value.expression.type === 'Identifier') {
-					// isContentPersisted={isContentPersisted} -> shouldUnmountTabPanelOnChange={!isContentPersisted}
-					j(attribute).replaceWith(
-						j.jsxAttribute(
-							j.jsxIdentifier(toProp),
-							j.jsxExpressionContainer(j.unaryExpression('!', value.expression)),
-						),
-					);
-				}
-			}
-		});
-		if (!foundUsage) {
-			// No prop -> shouldUnmountTabPanelOnChange
-			// @ts-ignore
-			element.value.openingElement.attributes.push(j.jsxAttribute(j.jsxIdentifier(toProp), null));
-		}
-	});
-};

package/codemods/utils.tsx

@@ -1,39 +0,0 @@
-import type core from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import {
-	addCommentToStartOfFile,
-	getDefaultSpecifier,
-	getJSXAttributesByName,
-} from '@atlaskit/codemod-utils';
-
-export const createRemoveFuncWithDefaultSpecifierFor =
-	(component: string, prop: string, comment?: string) =>
-	(j: core.JSCodeshift, source: Collection<Node>) => {
-		const specifier = getDefaultSpecifier(j, source, component);
-
-		if (!specifier) {
-			return;
-		}
-
-		source.findJSXElements(specifier).forEach((element) => {
-			getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
-				if (comment) {
-					addCommentToStartOfFile({ j, base: source, message: comment });
-				}
-				j(attribute).remove();
-			});
-		});
-	};
-
-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;
-}