@atlaskit/forge-react-types 0.52.1 → 0.52.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/forge-react-types
 
+## 0.52.2
+
+### Patch Changes
+
+- [`baaa9523c646c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/baaa9523c646c) -
+  Update Lozenge and Badge prop types
+
 ## 0.52.1
 
 ### Patch Changes

package/dist/types/components/__generated__/BadgeProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BadgeProps
  *
- * @codegen <<SignedSource::dded43c94e5bc997c5df041eeb253927>>
+ * @codegen <<SignedSource::9d4cb948f5d6ac145a3d3e82ab8cfa92>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::002a848f01b18a8dea0ea160d731edbf>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::f9bf0bacecb91875eab391c4148409c1>>
  */
 import type React from 'react';
 export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
@@ -20,7 +20,7 @@ type _PlatformBadgeProps = {
     /**
        * Affects the visual style of the badge.
        */
-    appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
+    appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed' | 'warning' | 'discovery' | 'danger' | 'neutral' | 'success' | 'information' | 'inverse';
     children?: React.ReactNode;
     /**
        * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.

package/dist/types/components/__generated__/LozengeProps.codegen.d.ts

@@ -3,34 +3,36 @@
  *
  * Extract component prop types from UIKit 2 components - LozengeProps
  *
- * @codegen <<SignedSource::2c6d1eb88477563937e65c98996d0b92>>
+ * @codegen <<SignedSource::abe727d97158c4d16d13504ebd7f60d6>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::5e9e88bd5dd513ba567d815ada9e7eae>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::9799ca9fa788b29c08dfbdb778da62b4>>
  */
 import type React from 'react';
 type PlatformLozengeProps = {
     /**
-       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+       * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
+       * Legacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.
        */
-    children?: React.ReactNode;
+    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success' | 'warning' | 'danger' | 'information' | 'neutral' | 'discovery' | 'accent-red' | 'accent-orange' | 'accent-yellow' | 'accent-lime' | 'accent-green' | 'accent-teal' | 'accent-blue' | 'accent-purple' | 'accent-magenta' | 'accent-gray';
     /**
-       * A `testId` prop is provided for specified elements, which is a unique
-       * string that appears as a data attribute `data-testid` in the rendered code,
-       * serving as a hook for automated tests
+       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
        */
-    testId?: string;
+    children?: React.ReactNode;
     /**
        * Determines whether to apply the bold style or not.
+       * @deprecated This prop is deprecated and will be removed in an upcoming major release. Use Tag component for non-bold styles.
        */
     isBold?: boolean;
-    /**
-       * The appearance type.
-       */
-    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
     /**
        * max-width of lozenge container. Default to 200px.
        */
     maxWidth?: string | number;
+    /**
+       * A `testId` prop is provided for specified elements, which is a unique
+       * string that appears as a data attribute `data-testid` in the rendered code,
+       * serving as a hook for automated tests
+       */
+    testId?: string;
 };
 export type LozengeProps = Pick<PlatformLozengeProps, 'appearance' | 'children' | 'isBold' | 'maxWidth' | 'testId'>;
 /**

package/dist/types-ts4.5/components/__generated__/BadgeProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BadgeProps
  *
- * @codegen <<SignedSource::dded43c94e5bc997c5df041eeb253927>>
+ * @codegen <<SignedSource::9d4cb948f5d6ac145a3d3e82ab8cfa92>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::002a848f01b18a8dea0ea160d731edbf>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::f9bf0bacecb91875eab391c4148409c1>>
  */
 import type React from 'react';
 export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
@@ -20,7 +20,7 @@ type _PlatformBadgeProps = {
     /**
        * Affects the visual style of the badge.
        */
-    appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
+    appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed' | 'warning' | 'discovery' | 'danger' | 'neutral' | 'success' | 'information' | 'inverse';
     children?: React.ReactNode;
     /**
        * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.

package/dist/types-ts4.5/components/__generated__/LozengeProps.codegen.d.ts

@@ -3,34 +3,36 @@
  *
  * Extract component prop types from UIKit 2 components - LozengeProps
  *
- * @codegen <<SignedSource::2c6d1eb88477563937e65c98996d0b92>>
+ * @codegen <<SignedSource::abe727d97158c4d16d13504ebd7f60d6>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::5e9e88bd5dd513ba567d815ada9e7eae>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::9799ca9fa788b29c08dfbdb778da62b4>>
  */
 import type React from 'react';
 type PlatformLozengeProps = {
     /**
-       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+       * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
+       * Legacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.
        */
-    children?: React.ReactNode;
+    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success' | 'warning' | 'danger' | 'information' | 'neutral' | 'discovery' | 'accent-red' | 'accent-orange' | 'accent-yellow' | 'accent-lime' | 'accent-green' | 'accent-teal' | 'accent-blue' | 'accent-purple' | 'accent-magenta' | 'accent-gray';
     /**
-       * A `testId` prop is provided for specified elements, which is a unique
-       * string that appears as a data attribute `data-testid` in the rendered code,
-       * serving as a hook for automated tests
+       * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
        */
-    testId?: string;
+    children?: React.ReactNode;
     /**
        * Determines whether to apply the bold style or not.
+       * @deprecated This prop is deprecated and will be removed in an upcoming major release. Use Tag component for non-bold styles.
        */
     isBold?: boolean;
-    /**
-       * The appearance type.
-       */
-    appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
     /**
        * max-width of lozenge container. Default to 200px.
        */
     maxWidth?: string | number;
+    /**
+       * A `testId` prop is provided for specified elements, which is a unique
+       * string that appears as a data attribute `data-testid` in the rendered code,
+       * serving as a hook for automated tests
+       */
+    testId?: string;
 };
 export type LozengeProps = Pick<PlatformLozengeProps, 'appearance' | 'children' | 'isBold' | 'maxWidth' | 'testId'>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/forge-react-types",
-	"version": "0.52.1",
+	"version": "0.52.2",
 	"description": "Component types for Forge UI Kit React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,11 +25,11 @@
 		"@atlaskit/comment": "^13.2.0",
 		"@atlaskit/datetime-picker": "^17.2.0",
 		"@atlaskit/dynamic-table": "^18.3.0",
-		"@atlaskit/form": "^15.1.0",
+		"@atlaskit/form": "^15.2.0",
 		"@atlaskit/inline-edit": "^15.4.0",
 		"@atlaskit/modal-dialog": "^14.9.0",
-		"@atlaskit/navigation-system": "^5.13.0",
-		"@atlaskit/popup": "^4.8.0",
+		"@atlaskit/navigation-system": "^5.15.0",
+		"@atlaskit/popup": "^4.9.0",
 		"@atlaskit/primitives": "^17.0.0",
 		"@atlaskit/progress-bar": "^4.1.0",
 		"@atlaskit/progress-tracker": "^10.4.0",

package/scripts/codegen/typeSerializer.ts

@@ -4,6 +4,7 @@ import {
 	type Type as TSType,
 	type UnionTypeNode,
 	type TypeReferenceNode,
+	type Symbol as TSSymbol,
 	SyntaxKind,
 } from 'ts-morph';
 
@@ -139,10 +140,17 @@ const flattenPickType = (
 
 	const serializedProperties = properties
 		.map((prop) => {
-			const propertySignature = prop.getDeclarations()[0] as PropertySignature | undefined;
-			if (!propertySignature) {
-				return null; // Skip if no declaration
+			const propertySignatures = extractPropertySignatures(prop);
+			if (propertySignatures.length === 0) {
+				return null;
+			} else if (propertySignatures.length > 1) {
+				// Currently we only support union type with same property signatures or a superset signature
+				// as we assume this setup is to support gradual type changes behind feature flags.
+				// other use cases are not supported currently.
+				throw new Error(`Unsupported union prop type with multiple different property signatures, ${prop.getName()}`);
 			}
+
+			const propertySignature = propertySignatures[0];
 			const { jsDoc, typeCode } =
 				propertyCallback({
 					propertySignature,
@@ -162,6 +170,70 @@ const flattenPickType = (
 	return `{\n${serializedProperties.map((prop) => (!!prop?.trim() ? `  ${prop}` : '')).join('\n')}\n}`;
 };
 
+// Note: ADS components uses union types to rollout new component type changes gradually (behind feature flags).
+// e.g. LozengeProps = LegacyLozengeProps | NewLozengeProps
+// In such cases, we need to consolidate property signatures from all union members.
+const extractPropertySignatures = (prop: TSSymbol): PropertySignature[] => {
+	const declarations = prop.getDeclarations();
+	if (!declarations) {
+		return [];
+	}
+	const signatures = declarations.filter((decl) => decl.getKind() === SyntaxKind.PropertySignature) as PropertySignature[];
+	if (signatures.length <= 1) {
+		return signatures;
+	}
+
+	// consolidate signatures if they are exactly the same
+	const uniqSignatures: PropertySignature[] = [];
+	const signatureTexts = new Set<string>();
+	for (const sig of signatures) {
+		const sigText = sig.getText();
+		if (!signatureTexts.has(sigText)) {
+			signatureTexts.add(sigText);
+			uniqSignatures.push(sig);
+		}
+	}
+
+	// next we should find one that's the supperset of others
+	if (uniqSignatures.length <= 1) {
+		return uniqSignatures;
+	}
+
+	const supersetSignatures: PropertySignature[] = [];
+	for (const sig of uniqSignatures) {
+		const sigType = sig.getType();
+		let isSuperset = true;
+		for (const otherSig of uniqSignatures) {
+			if (sig === otherSig) {
+				continue;
+			}
+			const otherSigType = otherSig.getType();
+			if (!isTypeAssignableTo(prop, otherSigType, sigType)) {
+				isSuperset = false;
+				break;
+			}
+		}
+		if (isSuperset) {
+			supersetSignatures.push(sig);
+		}
+	}
+
+	if (supersetSignatures.length > 0) {
+		return supersetSignatures;
+	}
+	return uniqSignatures;
+};
+
+const isTypeAssignableTo = (prop: TSSymbol, sourceType: TSType, targetType: TSType): boolean => {
+	const typeChecker = prop.getDeclarations()[0].getProject().getTypeChecker().compilerObject;
+
+	// ts typecker has an intneral method `isTypeAssignableTo` we can leverage here:
+	//   https://github.com/microsoft/TypeScript/pull/56448
+	return (typeChecker as unknown as {
+		isTypeAssignableTo: (source: unknown, target: unknown) => boolean;
+	}).isTypeAssignableTo(sourceType.compilerType, targetType.compilerType);
+};
+
 const getUnresolvableTypes = (tsType: TSType) => {
 	const unresolvableTypes = new Set<string>();
 	getUnresolvableTypesBase(tsType, unresolvableTypes);

package/src/components/__generated__/BadgeProps.codegen.tsx

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BadgeProps
  *
- * @codegen <<SignedSource::dded43c94e5bc997c5df041eeb253927>>
+ * @codegen <<SignedSource::9d4cb948f5d6ac145a3d3e82ab8cfa92>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::002a848f01b18a8dea0ea160d731edbf>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::f9bf0bacecb91875eab391c4148409c1>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
@@ -25,7 +25,7 @@ type _PlatformBadgeProps = {
   /**
 	 * Affects the visual style of the badge.
 	 */
-	appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
+	appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed' | 'warning' | 'discovery' | 'danger' | 'neutral' | 'success' | 'information' | 'inverse';
   
 	children?: React.ReactNode;
   /**

package/src/components/__generated__/LozengeProps.codegen.tsx

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - LozengeProps
  *
- * @codegen <<SignedSource::2c6d1eb88477563937e65c98996d0b92>>
+ * @codegen <<SignedSource::abe727d97158c4d16d13504ebd7f60d6>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::5e9e88bd5dd513ba567d815ada9e7eae>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/lozenge/__generated__/index.partial.tsx <<SignedSource::9799ca9fa788b29c08dfbdb778da62b4>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
@@ -15,27 +15,29 @@ import type React from 'react';
 // Serialized type
 type PlatformLozengeProps = {
   /**
-	 * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
+	 * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
+	 * Legacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.
 	 */
-	children?: React.ReactNode;
+	appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success' | 'warning' | 'danger' | 'information' | 'neutral' | 'discovery' | 'accent-red' | 'accent-orange' | 'accent-yellow' | 'accent-lime' | 'accent-green' | 'accent-teal' | 'accent-blue' | 'accent-purple' | 'accent-magenta' | 'accent-gray';
   /**
-	 * A `testId` prop is provided for specified elements, which is a unique
-	 * string that appears as a data attribute `data-testid` in the rendered code,
-	 * serving as a hook for automated tests
+	 * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
 	 */
-	testId?: string;
+	children?: React.ReactNode;
   /**
 	 * Determines whether to apply the bold style or not.
+	 * @deprecated This prop is deprecated and will be removed in an upcoming major release. Use Tag component for non-bold styles.
 	 */
 	isBold?: boolean;
-  /**
-	 * The appearance type.
-	 */
-	appearance?: 'default' | 'inprogress' | 'moved' | 'new' | 'removed' | 'success';
   /**
 	 * max-width of lozenge container. Default to 200px.
 	 */
 	maxWidth?: string | number;
+  /**
+	 * A `testId` prop is provided for specified elements, which is a unique
+	 * string that appears as a data attribute `data-testid` in the rendered code,
+	 * serving as a hook for automated tests
+	 */
+	testId?: string;
 };
 
 export type LozengeProps = Pick<