@atlaskit/checkbox 17.3.8 → 17.3.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/checkbox
 
+## 17.3.10
+
+### 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
+
+## 17.3.9
+
+### Patch Changes
+
+- [`22bf79dbdcdca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22bf79dbdcdca) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+
 ## 17.3.8
 
 ### Patch Changes

package/codemods/15.0.0-size-removal.tsx

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

package/codemods/migrations/remove-full-width.tsx

@@ -0,0 +1,6 @@
+import { createRemoveFuncFor } from '../utils/create-remove-func-for';
+
+export const removeFullWidth: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'isFullWidth');

package/codemods/migrations/remove-imports.tsx

@@ -1,4 +1,4 @@
-import { createRemoveImportsFor } from '../utils';
+import { createRemoveImportsFor } from '../utils/create-remove-imports-for';
 
 export const removeThemeImports: (
 	j: import('jscodeshift/src/core').JSCodeshift,

package/codemods/migrations/remove-overrides.tsx

@@ -0,0 +1,15 @@
+import { createRemoveFuncFor } from '../utils/create-remove-func-for';
+
+export const removeOverrides: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor(
+	'@atlaskit/checkbox',
+	'Checkbox',
+	'overrides',
+	`This file uses the @atlaskit/checkbox \`overrides\` prop
+  which has now been removed due to its poor performance characteristics. We have not
+  replaced overrides with an equivalent API and the overrides pattern exposes internal
+  implementation detail as public API and makes it harder for you to upgrade. The appearance
+  of Checkbox will have likely changed.`,
+);

package/codemods/migrations/remove-size.tsx

@@ -0,0 +1,6 @@
+import { createRemoveFuncFor } from '../utils/create-remove-func-for';
+
+export const removeSize: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor('@atlaskit/checkbox', 'Checkbox', 'size');

package/codemods/migrations/remove-theme.tsx

@@ -0,0 +1,15 @@
+import { createRemoveFuncFor } from '../utils/create-remove-func-for';
+
+export const removeTheme: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRemoveFuncFor(
+	'@atlaskit/checkbox',
+	'Checkbox',
+	'theme',
+	`This file uses the @atlaskit/checkbox \`theme\` prop which
+  has now been removed due to its poor performance characteristics. We have not replaced
+  theme with an equivalent API due to minimal usage of the \`theme\` prop. However if you
+  were using theme to customise the size of the checkbox there is now a \`size\` prop.
+  The appearance of Checkbox will have likely changed.`,
+);

package/codemods/migrations/rename-checkbox-without-analytics-import.tsx

@@ -0,0 +1,11 @@
+import { createRenameImportFor } from '../utils/create-rename-import-for';
+
+export const renameCheckboxWithoutAnalyticsImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
+	componentName: 'CheckboxWithoutAnalytics',
+	newComponentName: 'Checkbox',
+	oldPackagePath: '@atlaskit/checkbox/Checkbox',
+	newPackagePath: '@atlaskit/checkbox',
+});

package/codemods/migrations/rename-deep-type-import.tsx

@@ -0,0 +1,10 @@
+import { createRenameImportFor } from '../utils/create-rename-import-for';
+
+export const renameDeepTypeImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
+	componentName: 'CheckboxProps',
+	oldPackagePath: '@atlaskit/checkbox/dist/cjs/types',
+	newPackagePath: '@atlaskit/checkbox',
+});

package/codemods/migrations/rename-input-ref-to-ref.tsx

@@ -1,4 +1,4 @@
-import { createRenameFuncFor } from '../utils';
+import { createRenameFuncFor } from '../utils/create-rename-func-for';
 
 export const renameInputRef: (
 	j: import('jscodeshift/src/core').JSCodeshift,

package/codemods/migrations/rename-type-import.tsx

@@ -0,0 +1,10 @@
+import { createRenameImportFor } from '../utils/create-rename-import-for';
+
+export const renameTypeImport: (
+	j: import('jscodeshift/src/core').JSCodeshift,
+	source: import('jscodeshift/src/Collection').Collection<Node>,
+) => void = createRenameImportFor({
+	componentName: 'CheckboxProps',
+	oldPackagePath: '@atlaskit/checkbox/types',
+	newPackagePath: '@atlaskit/checkbox',
+});

package/codemods/types.tsx

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

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-for.tsx

@@ -0,0 +1,33 @@
+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 createRemoveFuncFor: (
+	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) => {
+				j(attribute).remove();
+				if (comment) {
+					addCommentToStartOfFile({ j, base: source, message: comment });
+				}
+			});
+		});
+	};

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

@@ -0,0 +1,84 @@
+import { type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { type Nullable } from '../types';
+
+import { addCommentToStartOfFile } from './add-comment-to-start-of-file';
+
+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,98 @@
+import { type ImportDefaultSpecifier, type ImportSpecifier, type JSCodeshift } from 'jscodeshift';
+import { type Collection } from 'jscodeshift/src/Collection';
+
+import { type Nullable } from '../types';
+
+import { addToImport } from './add-to-import';
+import { tryCreateImport } from './try-create-import';
+
+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, { jscodeshift }: API, options: Options) => string =
+	(component: string, migrates: { (j: JSCodeshift, source: Collection<Node>): void }[]) =>
+	(fileInfo: FileInfo, { jscodeshift }: API, options: Options) => {
+		const source: Collection<Node> = jscodeshift(fileInfo.source);
+
+		if (!hasImportDeclaration(jscodeshift, source, component)) {
+			return fileInfo.source;
+		}
+
+		migrates.forEach((tf) => tf(jscodeshift, 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)));
+}