@atlaskit/lozenge 11.13.1 → 11.13.3

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/lozenge
 
+## 11.13.3
+
+### Patch Changes
+
+- [#113045](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113045)
+  [`2c88e65615d04`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2c88e65615d04) -
+  Update dependencies and remove old codemods.
+
+## 11.13.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.13.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "11.13.1",
+	"version": "11.13.3",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,8 +41,8 @@
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/css": "^0.8.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",
-		"@atlaskit/primitives": "^13.4.0",
-		"@atlaskit/theme": "^14.1.0",
+		"@atlaskit/primitives": "^13.5.0",
+		"@atlaskit/theme": "^15.0.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.1",
@@ -55,10 +55,12 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
+		"@atlaskit/docs": "*",
 		"@atlaskit/ds-lib": "^3.5.0",
 		"@atlaskit/heading": "^4.1.0",
+		"@atlaskit/link": "*",
+		"@atlaskit/section-message": "*",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^13.4.0",
 		"jscodeshift": "^0.13.0",
 		"react-dom": "^18.2.0",

package/codemods/11.0.0-lite-mode.tsx

@@ -1,15 +0,0 @@
-import { type JSCodeshift } from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import { createTransformer, hasImportDeclaration } from '@atlaskit/codemod-utils';
-
-import moveObjectAppearanceToStyle from './migrations/11.0.0-lite-mode/move-object-appearance-to-style';
-import removeThemeProp from './migrations/11.0.0-lite-mode/remove-theme-prop';
-
-const transformer = createTransformer(
-	[moveObjectAppearanceToStyle, removeThemeProp],
-	(j: JSCodeshift, source: Collection<Node>) =>
-		hasImportDeclaration(j, source, '@atlaskit/lozenge'),
-);
-
-export default transformer;

package/codemods/__tests__/11.0.0-move-object-appearance-to-style.test.tsx

@@ -1,172 +0,0 @@
-import transformer from '../11.0.0-lite-mode';
-
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-describe('Lozenge codemod', () => {
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-
-    const App = () => {
-      return (
-        <Lozenge
-          appearance={{ backgroundColor: 'yellow', textColor: 'blue' }}
-        >
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-
-    const App = () => {
-      return (
-        <Lozenge
-          style={{
-            backgroundColor: { backgroundColor: 'yellow', textColor: 'blue' }["backgroundColor"],
-            color: { backgroundColor: 'yellow', textColor: 'blue' }["textColor"]
-          }}
-        >
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`should move object appearance values to style prop`,
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/custom-lozenge';
-
-    const App = () => {
-      return (
-        <Lozenge
-          appearance={{ backgroundColor: 'yellow', textColor: 'blue' }}
-        >
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/custom-lozenge';
-
-    const App = () => {
-      return (
-        <Lozenge
-          appearance={{ backgroundColor: 'yellow', textColor: 'blue' }}
-        >
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`should not be modified when not imported from "@atlaskit/lozenge"`,
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-
-    const App = () => {
-      return (
-        <Lozenge appearance='default'>
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-
-    const App = () => {
-      return (
-        <Lozenge appearance='default'>
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`should not be modified when appearance prop is not an object`,
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-
-    const App = (props) => {
-      return (
-        <Lozenge appearance={props.appearance}>
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-
-    const App = (props) => {
-      return (
-        <Lozenge appearance={props.appearance}>
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`should not be modified when appearance prop is dynamic`,
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-
-    const App = () => {
-      return (
-        <Lozenge
-          appearance="default"
-          style={{ backgroundColor: 'red' }}
-        >
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-
-    const App = () => {
-      return (
-        <Lozenge
-          appearance="default"
-          style={{ backgroundColor: 'red' }}
-        >
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`should not be modified when appearance prop is not type of object and style prop is also present`,
-	);
-});

package/codemods/__tests__/11.0.0-remove-theme-prop.test.tsx

@@ -1,93 +0,0 @@
-import transformer from '../11.0.0-lite-mode';
-
-const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
-
-describe('remove theme prop', () => {
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-    import { useTheme } from '../../theme';
-
-    const LozengeTheme = (themeProps) => ({
-      dark: { backgroundColor: 'blue', color: 'white' },
-      light: { backgroundColor: 'blue', color: 'white' },
-    });
-
-    const App = () => {
-      return (
-        <Lozenge theme={useTheme(LozengeTheme)}>
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    We could not automatically convert this code to the new API.
-
-    This file uses \`Lozenge\`’s \`theme\` prop. This has been deprecated and removed. 
-
-    You will have to change your usage to use the \`style\` prop.
-    See the example on https://atlaskit.atlassian.com/examples/design-system/lozenge/with-custom-theme */
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-    import { useTheme } from '../../theme';
-
-    const LozengeTheme = (themeProps) => ({
-      dark: { backgroundColor: 'blue', color: 'white' },
-      light: { backgroundColor: 'blue', color: 'white' },
-    });
-
-    const App = () => {
-      return (
-        <Lozenge>
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`should remove theme if it is defined inline`,
-	);
-
-	defineInlineTest(
-		{ default: transformer, parser: 'tsx' },
-		{},
-		`
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-    import { lozengeTheme } from '../../theme';
-
-    const App = () => {
-      return (
-        <Lozenge theme={lozengeTheme}>
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`
-    /* TODO: (from codemod) 
-    We could not automatically convert this code to the new API.
-
-    This file uses \`Lozenge\`’s \`theme\` prop. This has been deprecated and removed. 
-
-    You will have to change your usage to use the \`style\` prop.
-    See the example on https://atlaskit.atlassian.com/examples/design-system/lozenge/with-custom-theme */
-    import React from 'react';
-    import Lozenge from '@atlaskit/lozenge';
-    import { lozengeTheme } from '../../theme';
-
-    const App = () => {
-      return (
-        <Lozenge>
-          Custom
-        </Lozenge>
-      );
-    }
-    `,
-		`should remove theme if it is imported`,
-	);
-});

package/codemods/migrations/11.0.0-lite-mode/move-object-appearance-to-style.tsx

@@ -1,69 +0,0 @@
-import { type ASTPath, type JSCodeshift, type JSXAttribute, type JSXElement } from 'jscodeshift';
-import { type Collection } from 'jscodeshift/src/Collection';
-
-import { getDefaultSpecifier, getJSXAttributesByName } from '@atlaskit/codemod-utils';
-
-const APPEARANCE_PROP_NAME = 'appearance';
-
-const STYLE_PROP_NAME = 'style';
-
-const moveObjectAppearanceToStyle = (j: JSCodeshift, source: Collection<Node>) => {
-	const defaultSpecifier = getDefaultSpecifier(j, source, '@atlaskit/lozenge');
-
-	if (!defaultSpecifier) {
-		return;
-	}
-
-	source.findJSXElements(defaultSpecifier).forEach((element: ASTPath<JSXElement>) => {
-		getJSXAttributesByName(j, element, APPEARANCE_PROP_NAME).forEach(
-			(attribute: ASTPath<JSXAttribute>) => {
-				const { value } = attribute.node;
-
-				if (!value) {
-					return;
-				}
-
-				switch (value.type) {
-					case 'JSXExpressionContainer':
-						const { expression: appearanceExpression } = value;
-						if (appearanceExpression.type === 'ObjectExpression') {
-							const styleAttributes = getJSXAttributesByName(j, element, STYLE_PROP_NAME);
-
-							if (styleAttributes.length === 0) {
-								j(element)
-									.find(j.JSXOpeningElement)
-									.forEach((openingElement) => {
-										openingElement.node.attributes?.push(
-											j.jsxAttribute(
-												j.jsxIdentifier(STYLE_PROP_NAME),
-												j.jsxExpressionContainer(getMappedAppearance(j, appearanceExpression)),
-											),
-										);
-									});
-								j(attribute).remove();
-							}
-						}
-						break;
-				}
-			},
-		);
-	});
-};
-
-function getMappedAppearance(j: JSCodeshift, expression: Parameters<typeof j.memberExpression>[0]) {
-	const backgroundColorMemberExpression = j.memberExpression(
-		expression,
-		j.stringLiteral('backgroundColor'),
-	);
-	backgroundColorMemberExpression.computed = true;
-
-	const textColorMemberExpression = j.memberExpression(expression, j.stringLiteral('textColor'));
-	textColorMemberExpression.computed = true;
-
-	return j.objectExpression([
-		j.objectProperty(j.identifier('backgroundColor'), backgroundColorMemberExpression),
-		j.objectProperty(j.identifier('color'), textColorMemberExpression),
-	]);
-}
-
-export default moveObjectAppearanceToStyle;

package/codemods/migrations/11.0.0-lite-mode/remove-theme-prop.tsx

@@ -1,18 +0,0 @@
-import { createRemoveFuncWithDefaultSpecifierFor } from '../../utils';
-
-const comment = `
-We could not automatically convert this code to the new API.
-
-This file uses \`Lozenge\`’s \`theme\` prop. This has been deprecated and removed. 
-
-You will have to change your usage to use the \`style\` prop.
-See the example on https://atlaskit.atlassian.com/examples/design-system/lozenge/with-custom-theme
-`;
-
-const removeThemeProp = createRemoveFuncWithDefaultSpecifierFor(
-	'@atlaskit/lozenge',
-	'theme',
-	comment,
-);
-
-export default removeThemeProp;

package/codemods/utils.tsx

@@ -1,27 +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();
-			});
-		});
-	};