@atlaskit/forge-react-types 0.42.8 → 0.42.9

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

@@ -3,14 +3,59 @@
  *
  * Extract component prop types from UIKit 2 components - RangeProps
  *
- * @codegen <<SignedSource::8059d330e7cc4a21c671966f6c2496cc>>
+ * @codegen <<SignedSource::630c202e2564f5bfeac2d313285aad09>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/range/__generated__/index.partial.tsx <<SignedSource::66f3c55587192848bc42f9fc146e6c7e>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/range/__generated__/index.partial.tsx <<SignedSource::d9ea91886a193f2c5119bc1ed1b50c71>>
  */
-import React from 'react';
-import PlatformRange from '@atlaskit/range';
 import type { EventHandlerProps } from './types.codegen';
-type PlatformRangeProps = React.ComponentProps<typeof PlatformRange>;
+type PlatformRangeProps = {
+    /**
+       * Sets the maximum value of the range.
+       */
+    max?: number;
+    /**
+       * Sets the minimum value of the range.
+       */
+    min?: number;
+    name?: string;
+    /**
+       * Sets the step value for the range.
+       */
+    step?: number;
+    /**
+       * Sets the value of the range.
+       */
+    value?: number;
+    /**
+       * Hook to be invoked on change of the range.
+       */
+    onChange?: (value: number) => void;
+    /**
+       * Sets the default value if range is not set.
+       */
+    defaultValue?: number;
+    id?: string;
+    /**
+           * Indicates the entered value does not conform to the format expected by the application.
+           * @see aria-errormessage.
+           */
+    "aria-invalid"?: false | true | 'false' | 'true' | 'grammar' | 'spelling';
+    /**
+           * Identifies the element (or elements) that labels the current element.
+           * @see aria-describedby.
+           */
+    "aria-labelledby"?: string;
+    /**
+       * Sets whether the field range is disabled.
+       */
+    isDisabled?: boolean;
+    /**
+       * A `testId` prop is provided for specific elements. This is a unique string
+       * that appears as a data attribute `data-testid` in the rendered code and
+       * serves as a hook for automated tests.
+       */
+    testId?: string;
+};
 export type RangeProps = Pick<PlatformRangeProps, 'defaultValue' | 'max' | 'min' | 'step' | 'testId' | 'onChange' | 'id' | 'isDisabled' | 'value' | 'aria-invalid' | 'aria-labelledby' | 'name'> & Pick<EventHandlerProps, 'onBlur' | 'onFocus'>;
 /**
  * A range lets users choose an approximate value on a slider.

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

@@ -1,5 +1,4 @@
 export type { BadgeProps, TBadge } from './BadgeProps.codegen';
-export type { BleedProps, TBleed } from './BleedProps.codegen';
 export type { BoxProps, TBox } from './BoxProps.codegen';
 export type { ButtonGroupProps, TButtonGroup } from './ButtonGroupProps.codegen';
 export type { ButtonProps, TButton } from './ButtonProps.codegen';

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,3 @@
-export type { AdfRendererProps, BadgeProps, BleedProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, CommentProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, ChromelessEditorProps, CommentEditorProps, PressableProps, TBadge, TBleed, TBox, TButtonGroup, TButton, TCalendar, TCheckbox, TCheckboxGroup, TCodeBlock, TCode, TComment, TDatePicker, TDynamicTable, TEmptyState, TErrorMessage, TFlex, TFormFooter, TFormHeader, TForm, TFormSection, TGrid, THeading, THelperMessage, TIcon, TInline, TInlineEdit, TLabel, TLinkButton, TList, TListItem, TLoadingButton, TLozenge, TModalBody, TModalFooter, TModalHeader, TModal, TModalTitle, TModalTransition, TProgressBar, TProgressTracker, TRadioGroup, TRadio, TRange, TSectionMessageAction, TSectionMessage, TSelect, TSpinner, TStack, TTabList, TTabPanel, TTab, TTabs, TTagGroup, TTag, TTextArea, TTextfield, TTimePicker, TToggle, TTooltip, TValidMessage, TPopup, TAdfRenderer, TText, TChromelessEditor, TCommentEditor, TPressable, } from './components/__generated__';
+export type { AdfRendererProps, BadgeProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, CommentProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, ChromelessEditorProps, CommentEditorProps, PressableProps, TBadge, TBox, TButtonGroup, TButton, TCalendar, TCheckbox, TCheckboxGroup, TCodeBlock, TCode, TComment, TDatePicker, TDynamicTable, TEmptyState, TErrorMessage, TFlex, TFormFooter, TFormHeader, TForm, TFormSection, TGrid, THeading, THelperMessage, TIcon, TInline, TInlineEdit, TLabel, TLinkButton, TList, TListItem, TLoadingButton, TLozenge, TModalBody, TModalFooter, TModalHeader, TModal, TModalTitle, TModalTransition, TProgressBar, TProgressTracker, TRadioGroup, TRadio, TRange, TSectionMessageAction, TSectionMessage, TSelect, TSpinner, TStack, TTabList, TTabPanel, TTab, TTabs, TTagGroup, TTag, TTextArea, TTextfield, TTimePicker, TToggle, TTooltip, TValidMessage, TPopup, TAdfRenderer, TText, TChromelessEditor, TCommentEditor, TPressable, } from './components/__generated__';
 export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, LineChartProps, DonutChartProps, PieChartProps, TBarChart, TStackBarChart, THorizontalStackBarChart, THorizontalBarChart, TLineChart, TDonutChart, TPieChart, } from './components/charts';
 export type { ChartColorTokens } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/forge-react-types",
-	"version": "0.42.8",
+	"version": "0.42.9",
 	"description": "Component types for Forge UI Kit React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,14 +25,12 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^23.2.0",
-		"@atlaskit/calendar": "^17.1.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/comment": "^13.0.0",
 		"@atlaskit/datetime-picker": "^17.0.0",
 		"@atlaskit/dynamic-table": "^18.2.0",
 		"@atlaskit/empty-state": "^10.1.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/inline-edit": "^15.3.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/modal-dialog": "^14.2.0",
@@ -41,7 +39,6 @@
 		"@atlaskit/progress-bar": "^4.0.0",
 		"@atlaskit/progress-tracker": "^10.2.0",
 		"@atlaskit/radio": "^8.1.0",
-		"@atlaskit/range": "^9.1.0",
 		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/select": "^21.1.0",
 		"@atlaskit/spinner": "^18.0.0",

package/scripts/codegen/codeGenerator.ts

@@ -5,10 +5,21 @@ import {
 	type SourceFile,
 	type TypeAliasDeclaration,
 	type ImportDeclaration,
+	type TypeReferenceNode,
+	SyntaxKind,
 } from 'ts-morph';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import kebabCase from 'lodash/kebabCase';
-import { serializeSymbolType } from './typeSerializer';
+import {
+	serializeTypeReferenceWithPickType,
+	extractPickKeys,
+	extractOmitKeys,
+} from './typeSerializer';
+import {
+	findTypeReferenceFromUnionOrIntersect,
+	getTypeNodeFromSymbol,
+	makePickOrOmitPredicate,
+} from './utils';
 
 const getNames = (symbol: Symbol) => {
 	const name = symbol.getName();
@@ -224,7 +235,7 @@ class SimpleImportDeclaration implements IImportDeclaration {
 			.map((name) => `type ${name}`);
 		const importedNames =
 			importedNamesList.length > 0 ? `{ ${importedNamesList.join(', ')} }` : null;
-		const defaultImport = this.defaultImport ? `${this.defaultImport}` : null;
+		const defaultImport = this.defaultImport ? `type ${this.defaultImport}` : null;
 		return `import ${[defaultImport, importedNames].filter(Boolean).join(', ')} from '${this.packageName}';`;
 	}
 }
@@ -567,12 +578,21 @@ const registeredExternalTypes: Record<
 		defaultImport: string;
 	}
 > = {
-	'React.ReactNode': {
+	'^React\..+$': {
 		package: 'react',
 		defaultImport: 'React',
 	},
 };
 
+const findExternalTypeInfo = (typeName: string) => {
+	return (
+		Object.entries(registeredExternalTypes).find(
+			([externalTypePattern]) =>
+				externalTypePattern === typeName || new RegExp(externalTypePattern).test(typeName),
+		)?.[1] ?? null
+	);
+};
+
 // consolidate external types into import declarations
 const consolidateImportDeclarations = (
 	importDeclarations: ImportDeclarationProxy[],
@@ -580,7 +600,7 @@ const consolidateImportDeclarations = (
 ): IImportDeclaration[] => {
 	const declarations: IImportDeclaration[] = [...importDeclarations];
 	externalTypes.forEach((typeName) => {
-		const typePackage = registeredExternalTypes[typeName];
+		const typePackage = findExternalTypeInfo(typeName);
 		if (typePackage) {
 			const existingImport = importDeclarations.find(
 				(declaration) => declaration.getBasePackage() === typePackage.package,
@@ -602,6 +622,62 @@ const consolidateImportDeclarations = (
 	return declarations;
 };
 
+const extractPlatformPropsTypeDeclarationAndTargetPropertyKeys = (
+	rawDependentTypeDeclarations: TypeAliasDeclaration[],
+	baseComponentPropsSymbol: Symbol,
+): {
+	typeDeclaration: TypeAliasDeclaration;
+	baseComponentPropTypeReference: TypeReferenceNode;
+	omitKeys: string[];
+	pickKeys: string[];
+} => {
+	// this pattern is used when there is special JSDoc comments override required to customize component documentation.
+	// e.g. Badge component has:
+	//    PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {}
+	//    BadgeProps = Pick<PlatformBadgeProps, 'appearance' | 'children' | 'max' | 'testId'>
+	const specialPlatformPropsTypeDeclaration = rawDependentTypeDeclarations.find((declaration) =>
+		declaration.getName().startsWith('_Platform'),
+	);
+	const mainPlatformPropsTypeDeclaration = rawDependentTypeDeclarations.find((declaration) =>
+		declaration.getName().startsWith('Platform'),
+	);
+	if (!mainPlatformPropsTypeDeclaration && !specialPlatformPropsTypeDeclaration) {
+		throw new Error(
+			'Could not find Platform props type declaration from the component prop type source code',
+		);
+	}
+	const platformPropsTypeDeclaration =
+		specialPlatformPropsTypeDeclaration ?? mainPlatformPropsTypeDeclaration;
+
+	const typeWhichPicksPlatformProps = findTypeReferenceFromUnionOrIntersect(
+		getTypeNodeFromSymbol(baseComponentPropsSymbol!)!,
+		makePickOrOmitPredicate('Pick', 'Platform'),
+	);
+	if (!typeWhichPicksPlatformProps) {
+		throw new Error(
+			`Could not find type which picks platform props from the component prop type source code for ${baseComponentPropsSymbol.getName()}`,
+		);
+	}
+	const pickKeys = extractPickKeys(typeWhichPicksPlatformProps);
+	let omitKeys: string[] = [];
+	if (specialPlatformPropsTypeDeclaration && mainPlatformPropsTypeDeclaration) {
+		const omitNode = mainPlatformPropsTypeDeclaration
+			.getTypeNodeOrThrow()
+			.asKindOrThrow(SyntaxKind.IntersectionType)
+			.getTypeNodes()[0]
+			.asKindOrThrow(SyntaxKind.TypeReference);
+		// if there is a special platform props type declaration, we need
+		omitKeys = extractOmitKeys(omitNode);
+	}
+
+	return {
+		typeDeclaration: platformPropsTypeDeclaration!,
+		baseComponentPropTypeReference: typeWhichPicksPlatformProps,
+		pickKeys,
+		omitKeys,
+	};
+};
+
 /**
  * This function implements the new code generation logic for the component prop types.
  * Instead of referencing to the ADS component prop types, it generates the prop types
@@ -619,24 +695,20 @@ const generateComponentPropTypeSourceCodeWithSerializedType = (
 	// 2) from the prop type code further extract other relevant types in the source file,
 	//    and separate the platform props type declaration from the rest of the dependent types.
 	//    as this will be used to generate the type code.
-	const [dependentTypeDeclarations, platformPropsTypeDeclaration] = getDependentTypeDeclarations(
+	const rawDependentTypeDeclarations = getDependentTypeDeclarations(
 		baseComponentPropSymbol,
 		sourceFile,
-	).reduce(
-		(agg, declarations) => {
-			if (declarations.getName().startsWith('_Platform')) {
-				// this is the platform props type declaration, we will use it to generate the type code.
-				// this pattern is used when we need to add custom overrides to the platform props type.
-				agg[1] = declarations;
-			} else if (declarations.getName().startsWith('Platform') && !agg[1]) {
-				// we only use this pattern if _Platform is not used. (this is for cases like Code and CodeBlock)
-				agg[1] = declarations;
-			} else {
-				agg[0].push(declarations);
-			}
-			return agg;
-		},
-		[[] as TypeAliasDeclaration[], null as TypeAliasDeclaration | null],
+	);
+	const {
+		omitKeys,
+		typeDeclaration: platformPropsTypeDeclaration,
+		baseComponentPropTypeReference,
+	} = extractPlatformPropsTypeDeclarationAndTargetPropertyKeys(
+		rawDependentTypeDeclarations,
+		baseComponentPropSymbol,
+	);
+	const dependentTypeDeclarations = rawDependentTypeDeclarations.filter(
+		(declaration) => declaration !== platformPropsTypeDeclaration,
 	);
 
 	// 3) extract the import statement
@@ -654,9 +726,20 @@ const generateComponentPropTypeSourceCodeWithSerializedType = (
 	);
 
 	// 5) serialize the prop type for the @atlaskit component (e.g. PlatformButtonProps)
-	const [typeDefCode, usedExternalTypes] = serializeSymbolType(
-		baseComponentPropSymbol,
-		sourceFile.getProject().getTypeChecker(),
+	const [typeDefCode, usedExternalTypes] = serializeTypeReferenceWithPickType(
+		baseComponentPropTypeReference,
+		({ jsDoc, typeCode, propertySignature }) => {
+			const propertyName = propertySignature.getName();
+			if (omitKeys.includes(propertyName)) {
+				return {
+					typeCode,
+				};
+			}
+			return {
+				jsDoc,
+				typeCode,
+			};
+		},
 	);
 
 	// 6) generate the source file
@@ -739,7 +822,14 @@ const codeConsolidators: Record<string, CodeConsolidator> = {
 	PressableProps: handleXCSSProp,
 };
 
-const typeSerializableComponentPropSymbols = ['CodeProps', 'CodeBlockProps', 'BadgeProps'];
+const typeSerializableComponentPropSymbols = [
+	'CalendarProps',
+	'CodeProps',
+	'CodeBlockProps',
+	'BadgeProps',
+	'HeadingProps',
+	'RangeProps',
+];
 
 const generateComponentPropTypeSourceCode = (
 	componentPropSymbol: Symbol,

package/scripts/codegen/typeSerializer.ts

@@ -1,56 +1,32 @@
 import {
-	type Symbol as TSSymbol,
 	type Node,
-	type TypeChecker,
 	type PropertySignature,
 	type Type as TSType,
+	type UnionTypeNode,
+	type TypeReferenceNode,
 	SyntaxKind,
 } from 'ts-morph';
 
-export const serializeSymbolType = (
-	symbol: TSSymbol,
-	typeChecker: TypeChecker,
-): [string, Set<string>] => {
-	const declaration = symbol.getDeclarations()[0];
-
-	if (!declaration) {
-		throw new Error(`No declaration found for symbol: ${symbol.getName()}`);
-	}
+type PropertyCallback = ({
+	jsDoc,
+	typeCode,
+	propertySignature,
+}: {
+	jsDoc?: string;
+	typeCode: string;
+	propertySignature: PropertySignature;
+}) => {
+	jsDoc?: string;
+	typeCode: string;
+} | null;
 
+export const serializeTypeReferenceWithPickType = (
+	typeReference: TypeReferenceNode,
+	propertyCallback: PropertyCallback,
+): [string, Set<string>] => {
 	const usedExternalTypes = new Set<string>();
-	if (declaration.getKind() === SyntaxKind.TypeAliasDeclaration) {
-		const typeAlias = declaration.asKindOrThrow(SyntaxKind.TypeAliasDeclaration);
-		const typeNode = typeAlias.getTypeNode();
-		if (typeNode && isCommonComponentPropType(typeNode)) {
-			const serializedType = flattenPickType(
-				typeNode.asKindOrThrow(SyntaxKind.TypeReference),
-				typeChecker,
-				usedExternalTypes,
-			);
-			return [serializedType, usedExternalTypes];
-		}
-	}
-
-	throw new Error(
-		`Unsupported declaration kind: ${declaration.getKindName()} for symbol: ${symbol.getName()}`,
-	);
-};
-
-/**
- * Checks if a node is a common component prop type. e.g.
- *
- * export type BleedProps = Pick<
- *   PlatformBleedProps,
- *   'children' | 'all' | 'inline' | 'block' | 'testId' | 'role'
- * >;
- */
-const isCommonComponentPropType = (node: Node) => {
-	if (node.getKind() === SyntaxKind.TypeReference) {
-		const typeRef = node.asKindOrThrow(SyntaxKind.TypeReference);
-		const typeName = typeRef.getTypeName().getText();
-		return typeName === 'Pick';
-	}
-	return false;
+	const serializedType = flattenPickType(typeReference, usedExternalTypes, propertyCallback);
+	return [serializedType, usedExternalTypes];
 };
 
 // resolve single level type references (e.g. SupportedLanguages))
@@ -63,6 +39,54 @@ const isSimpleTypeReferenceNode = (tsType: TSType): boolean => {
 	return false;
 };
 
+// event function type that is not a React event handler
+const isCustomEventHandlerType = (tsType: TSType): boolean => {
+	const callSignatures = tsType.getCallSignatures();
+	// we already import React, hence we don't have to serialize it
+	if (
+		callSignatures.length > 0 &&
+		callSignatures[0].getParameters().length > 1 &&
+		!tsType.getText().startsWith('React.')
+	) {
+		const analyticsEventSymbol = callSignatures[0].getParameters()[1];
+		if (analyticsEventSymbol) {
+			const eventTypeName = analyticsEventSymbol
+				.getDeclarations()[0]
+				.asKind(SyntaxKind.Parameter)
+				?.getTypeNode()
+				?.getText();
+			return eventTypeName === 'UIAnalyticsEvent';
+		}
+		return true;
+	}
+	return false;
+};
+
+const serializeSimpleEventType = (tsType: TSType): string => {
+	const propertyCode: string[] = tsType
+		.getProperties()
+		.map((prop) => {
+			const propertySignature = prop.getDeclarations()[0] as PropertySignature | undefined;
+			if (propertySignature) {
+				const typeCode = serializeSimpleTypeNode(resolveNonNullableType(propertySignature));
+				return `${prop.getName()}: ${typeCode}`;
+			}
+			return null;
+		})
+		.filter(Boolean) as string[];
+	return `{ ${propertyCode.join(', ')} }`;
+};
+
+const serializeCustomEventHandlerType = (tsType: TSType): string => {
+	const callSignature = tsType.getCallSignatures()[0];
+	const eventSymbol = callSignature.getParameters()[0];
+	const parameterDeclaration = eventSymbol.getDeclarations()[0].asKindOrThrow(SyntaxKind.Parameter);
+	const eventType = parameterDeclaration.getType();
+	const analyticsEventName = callSignature.getParameters()[1]?.getName() ?? 'analyticsEvent';
+	const returnType = callSignature.getReturnType().getText();
+	return `(${eventSymbol.getName()}: ${serializeSimpleEventType(eventType)}, ${analyticsEventName}: any) => ${returnType}`;
+};
+
 const serializeSimpleTypeNode = (tsType: TSType): string => {
 	if (tsType.isStringLiteral()) {
 		return `'${tsType.getLiteralValue()}'`;
@@ -72,6 +96,8 @@ const serializeSimpleTypeNode = (tsType: TSType): string => {
 		const unionTypes = tsType.getUnionTypes();
 		const serializedTypes = unionTypes.map((t) => serializeSimpleTypeNode(t));
 		return serializedTypes.join(' | ');
+	} else if (isCustomEventHandlerType(tsType)) {
+		return serializeCustomEventHandlerType(tsType);
 	}
 	return tsType.getText();
 };
@@ -98,25 +124,14 @@ const serializePropertySignatureCode = (propertySignature: PropertySignature) =>
 
 const flattenPickType = (
 	typeRef: Node,
-	typeChecker: TypeChecker,
 	usedExternalTypesOutput: Set<string>,
+	propertyCallback: PropertyCallback,
 ): string => {
-	const typeArgs = typeRef.asKindOrThrow(SyntaxKind.TypeReference).getTypeArguments();
-
-	if (typeArgs.length < 2) {
-		return typeRef.getText(); // Fallback if not a valid Pick
-	}
-
-	const keysNode = typeArgs[1];
-
-	// Get the selected keys
-	const selectedKeys = extractUnionKeys(keysNode);
-
-	// Get the base type symbol
+	const pickKeys = extractPickKeys(typeRef.asKindOrThrow(SyntaxKind.TypeReference));
 	const properties = typeRef
 		.getType()
 		.getProperties()
-		.filter((prop) => selectedKeys.includes(prop.getName()));
+		.filter((prop) => pickKeys.includes(prop.getName()));
 
 	if (properties.length === 0) {
 		return '{}'; // If no properties match, return 'any'
@@ -128,19 +143,23 @@ const flattenPickType = (
 			if (!propertySignature) {
 				return null; // Skip if no declaration
 			}
-			const jsDoc = propertySignature.getJsDocs()?.[0]?.getText();
-			const typeCode = `\t${serializePropertySignatureCode(propertySignature)}`;
+			const { jsDoc, typeCode } =
+				propertyCallback({
+					propertySignature,
+					jsDoc: propertySignature.getJsDocs()?.[0]?.getText(),
+					typeCode: serializePropertySignatureCode(propertySignature),
+				}) || {};
 			getUnresolvableTypes(propertySignature.getType()).forEach((typeName) => {
 				usedExternalTypesOutput.add(typeName);
 			});
-			return [jsDoc, typeCode].filter(Boolean).join('\n');
+			return `${jsDoc ?? ''}\n\t${typeCode}`;
 		})
 		.filter(Boolean);
 
 	if (serializedProperties.length === 0) {
 		return '{}'; // If no properties are serialized, return empty object
 	}
-	return `{\n  ${serializedProperties.join('\n  ')}\n}`;
+	return `{\n${serializedProperties.map((prop) => (!!prop?.trim() ? `  ${prop}` : '')).join('\n')}\n}`;
 };
 
 const getUnresolvableTypes = (tsType: TSType) => {
@@ -195,18 +214,51 @@ const isExternalType = (tsType: TSType): boolean => {
 	return filePath.includes('node_modules');
 };
 
+export const extractUnionKeysFromTypeReferenceNode = (
+	typeReferenceNode: TypeReferenceNode,
+	targetTypeName: 'Pick' | 'Omit',
+): string[] => {
+	const typeName = typeReferenceNode.getTypeName().getText();
+	if (typeName !== targetTypeName) {
+		throw new Error(`Expected '${targetTypeName}' type, but found '${typeName}'`);
+	}
+	const typeArgs = typeReferenceNode.getTypeArguments();
+	if (typeArgs.length !== 2) {
+		throw new Error(
+			`Expected 2 type arguments for ${targetTypeName}, but found ${typeArgs.length}`,
+		);
+	}
+	const unionType = typeArgs[1];
+	return extractUnionKeys(unionType);
+};
+
+export const extractOmitKeys = (typeReferenceNode: TypeReferenceNode): string[] => {
+	return extractUnionKeysFromTypeReferenceNode(typeReferenceNode, 'Omit');
+};
+
+export const extractPickKeys = (typeReferenceNode: TypeReferenceNode): string[] => {
+	return extractUnionKeysFromTypeReferenceNode(typeReferenceNode, 'Pick');
+};
+
+const unwrapStringQuotes = (str: string): string => {
+	return str.replace(/['"]/g, '');
+};
+
+const extractUnionKeysFromUnionType = (unionType: UnionTypeNode): string[] => {
+	return unionType.getTypeNodes().map((node) => {
+		if (node.getKind() === SyntaxKind.StringLiteral) {
+			return node.asKindOrThrow(SyntaxKind.StringLiteral).getLiteralValue();
+		}
+		return unwrapStringQuotes(node.getText());
+	});
+};
+
 const extractUnionKeys = (keysNode: Node): string[] => {
 	if (keysNode.getKind() === SyntaxKind.UnionType) {
 		const unionType = keysNode.asKindOrThrow(SyntaxKind.UnionType);
-		return unionType.getTypeNodes().map((node) => {
-			if (node.getKind() === SyntaxKind.StringLiteral) {
-				return node.asKindOrThrow(SyntaxKind.StringLiteral).getLiteralValue();
-			}
-			return node.getText().replace(/['"]/g, '');
-		});
+		return extractUnionKeysFromUnionType(unionType);
 	} else if (keysNode.getKind() === SyntaxKind.StringLiteral) {
 		return [keysNode.asKindOrThrow(SyntaxKind.StringLiteral).getLiteralValue()];
 	}
-
-	return [keysNode.getText().replace(/['"]/g, '')];
+	return [unwrapStringQuotes(keysNode.getText())];
 };

package/scripts/codegen/utils.ts

@@ -0,0 +1,71 @@
+import {
+	type Symbol as TSSymbol,
+	type TypeReferenceNode,
+	type TypeNode,
+	SyntaxKind,
+} from 'ts-morph';
+
+export const getTypeNodeFromSymbol = (symbol: TSSymbol): TypeNode | null => {
+	const declaration = symbol.getDeclarations()[0];
+	if (!declaration) {
+		return null;
+	}
+
+	if (declaration.getKind() === SyntaxKind.TypeAliasDeclaration) {
+		return declaration.asKindOrThrow(SyntaxKind.TypeAliasDeclaration).getTypeNode() ?? null;
+	}
+
+	return null;
+};
+
+type TypeFinderPredicate = (node: TypeNode) => boolean;
+
+export const makePickOrOmitPredicate = (
+	targetTypeName: 'Pick' | 'Omit',
+	baseClassNamePrefix: string,
+): TypeFinderPredicate => {
+	return (node: TypeNode) => {
+		const typeReferenceNode = node.asKind(SyntaxKind.TypeReference);
+		if (!typeReferenceNode) {
+			return false;
+		}
+		const typeName = typeReferenceNode.getTypeName().getText();
+		if (typeName !== targetTypeName) {
+			return false;
+		}
+		const baseNode = typeReferenceNode.getTypeArguments()[0]!;
+		return baseNode.getText().startsWith(baseClassNamePrefix);
+	};
+};
+
+export const findTypeReferenceFromUnionOrIntersect = (
+	node: TypeNode,
+	predicate: TypeFinderPredicate,
+): TypeReferenceNode | null => {
+	if (predicate(node)) {
+		return node.asKindOrThrow(SyntaxKind.TypeReference);
+	}
+	if (node.getKind() === SyntaxKind.UnionType) {
+		const unionNode = node.asKindOrThrow(SyntaxKind.UnionType);
+		return (
+			(unionNode.getTypeNodes().find((n) => {
+				if (n.isKind(SyntaxKind.TypeReference)) {
+					return predicate(n.asKindOrThrow(SyntaxKind.TypeReference));
+				}
+				return false;
+			}) as TypeReferenceNode) ?? null
+		);
+	} else if (node.getKind() === SyntaxKind.IntersectionType) {
+		const intersectionNode = node.asKindOrThrow(SyntaxKind.IntersectionType);
+		return (
+			(intersectionNode.getTypeNodes().find((n) => {
+				if (n.isKind(SyntaxKind.TypeReference)) {
+					return predicate(n.asKindOrThrow(SyntaxKind.TypeReference));
+				}
+				return false;
+			}) as TypeReferenceNode) ?? null
+		);
+	}
+
+	return null;
+};

package/scripts/typechecker.ts

@@ -1,12 +1,18 @@
 /* eslint-disable */
 import {
 	type BadgeProps,
-	type CodeProps,
+	type CalendarProps,
 	type CodeBlockProps,
+	type CodeProps,
+	type HeadingProps,
+	type RangeProps,
 } from '@atlassian/forge-ui/src/components/UIKit';
 import { type BadgeProps as GeneratedBadgeProps } from '../src/components/__generated__/BadgeProps.codegen';
-import { type CodeProps as GeneratedCodeProps } from '../src/components/__generated__/CodeProps.codegen';
+import { type CalendarProps as GeneratedCalendarProps } from '../src/components/__generated__/CalendarProps.codegen';
 import { type CodeBlockProps as GeneratedCodeBlockProps } from '../src/components/__generated__/CodeBlockProps.codegen';
+import { type CodeProps as GeneratedCodeProps } from '../src/components/__generated__/CodeProps.codegen';
+import { type HeadingProps as GeneratedHeadingProps } from '../src/components/__generated__/HeadingProps.codegen';
+import { type RangeProps as GeneratedRangeProps } from '../src/components/__generated__/RangeProps.codegen';
 
 const assertAssignable = <A, B extends A>() => {};
 
@@ -18,3 +24,12 @@ assertAssignable<CodeProps, GeneratedCodeProps>();
 
 assertAssignable<GeneratedCodeBlockProps, CodeBlockProps>();
 assertAssignable<CodeBlockProps, GeneratedCodeBlockProps>();
+
+assertAssignable<GeneratedHeadingProps, HeadingProps>();
+assertAssignable<HeadingProps, GeneratedHeadingProps>();
+
+assertAssignable<GeneratedRangeProps, RangeProps>();
+assertAssignable<RangeProps, GeneratedRangeProps>();
+
+assertAssignable<GeneratedCalendarProps, CalendarProps>();
+assertAssignable<CalendarProps, GeneratedCalendarProps>();