@atlaskit/forge-react-types 0.42.6 → 0.42.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/forge-react-types
 
+## 0.42.7
+
+### Patch Changes
+
+- [#183155](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183155)
+  [`0da1030d5f383`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0da1030d5f383) -
+  Remove @atlaskit/code dependency from @atlaskit/forge-react-types
+
 ## 0.42.6
 
 ### Patch Changes

package/dist/cjs/components/__generated__/CodeBlockProps.codegen.js

@@ -1,5 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+"use strict";

package/dist/es2019/components/__generated__/CodeBlockProps.codegen.js

@@ -1 +0,0 @@
-export {};

package/dist/esm/components/__generated__/CodeBlockProps.codegen.js

@@ -1 +0,0 @@
-export {};

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

@@ -3,13 +3,60 @@
  *
  * Extract component prop types from UIKit 2 components - CodeBlockProps
  *
- * @codegen <<SignedSource::8ab4ed1e38d2bd1f9ceafe4cbc20f97d>>
+ * @codegen <<SignedSource::8fded8a55e24b0312739eb3ab66f63ca>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/codeblock.partial.tsx <<SignedSource::88ed38fdfc47db0938e7801195a00403>>
  */
-import React from 'react';
-import { CodeBlock as PlatformCodeBlock } from '@atlaskit/code';
-type PlatformCodeBlockProps = React.ComponentProps<typeof PlatformCodeBlock>;
+type PlatformCodeBlockProps = {
+    /**
+       * The code to be formatted.
+       */
+    text: string;
+    /**
+       * A unique string that appears as a data attribute `data-testid` in the
+       * rendered code. Serves as a hook for automated tests.
+       */
+    testId: string;
+    /**
+       *  Sets whether to display code line numbers or not.
+       *  @default true
+       */
+    showLineNumbers: boolean;
+    /**
+       * Language reference designed to be populated from `SUPPORTED_LANGUAGES` in
+       * `design-system/code`. Run against language grammars from PrismJS (full list
+       * available at [PrismJS documentation](https://prismjs.com/#supported-languages)).
+       *
+       * When set to "text" will not perform highlighting. If unsupported language
+       * provided - code will be treated as "text" with no highlighting.
+       *
+       * @default 'text'
+       */
+    language: "text" | "PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | "xml" | "C++" | "c++" | "cpp" | "clike" | "Ruby" | "ruby" | "rb" | "duby" | "Objective-C" | "objective-c" | "objectivec" | "obj-c" | "objc" | "C" | "c" | "Swift" | "swift" | "TeX" | "tex" | "latex" | "Shell" | "shell" | "bash" | "sh" | "ksh" | "zsh" | "Scala" | "scala" | "Go" | "go" | "ActionScript" | "actionscript" | "actionscript3" | "as" | "ColdFusion" | "coldfusion" | "JavaFX" | "javafx" | "jfx" | "VbNet" | "vbnet" | "vb.net" | "vfp" | "clipper" | "xbase" | "JSON" | "json" | "MATLAB" | "matlab" | "Groovy" | "groovy" | "SQL" | "sql" | "postgresql" | "postgres" | "plpgsql" | "psql" | "postgresql-console" | "postgres-console" | "tsql" | "t-sql" | "mysql" | "sqlite" | "R" | "r" | "Perl" | "perl" | "pl" | "Lua" | "lua" | "Pascal" | "pas" | "pascal" | "objectpascal" | "delphi" | "XML" | "TypeScript" | "typescript" | "ts" | "CoffeeScript" | "coffeescript" | "coffee-script" | "coffee" | "Haskell" | "haskell" | "hs" | "Puppet" | "puppet" | "Arduino" | "arduino" | "Fortran" | "fortran" | "Erlang" | "erlang" | "erl" | "PowerShell" | "powershell" | "posh" | "ps1" | "psm1" | "Haxe" | "haxe" | "hx" | "hxsl" | "Elixir" | "elixir" | "ex" | "exs" | "Verilog" | "verilog" | "v" | "Rust" | "rust" | "VHDL" | "vhdl" | "Sass" | "sass" | "OCaml" | "ocaml" | "Dart" | "dart" | "CSS" | "css" | "reStructuredText" | "restructuredtext" | "rst" | "rest" | "Kotlin" | "kotlin" | "D" | "d" | "Octave" | "octave" | "QML" | "qbs" | "qml" | "Prolog" | "prolog" | "FoxPro" | "foxpro" | "purebasic" | "Scheme" | "scheme" | "scm" | "CUDA" | "cuda" | "cu" | "Julia" | "julia" | "jl" | "Racket" | "racket" | "rkt" | "Ada" | "ada" | "ada95" | "ada2005" | "Tcl" | "tcl" | "Mathematica" | "mathematica" | "mma" | "nb" | "Autoit" | "autoit" | "StandardML" | "standardmL" | "sml" | "standardml" | "Objective-J" | "objective-j" | "objectivej" | "obj-j" | "objj" | "Smalltalk" | "smalltalk" | "squeak" | "st" | "Vala" | "vala" | "vapi" | "LiveScript" | "livescript" | "live-script" | "XQuery" | "xquery" | "xqy" | "xq" | "xql" | "xqm" | "PlainText" | "plaintext" | "Yaml" | "yaml" | "yml" | "GraphQL" | "graphql" | "AppleScript" | "applescript" | "Clojure" | "clojure" | "Diff" | "diff" | "VisualBasic" | "visualbasic" | "JSX" | "jsx" | "TSX" | "tsx" | "SplunkSPL" | "splunk-spl" | "Dockerfile" | "docker" | "dockerfile" | "HCL" | "hcl" | "terraform" | "NGINX" | "nginx" | "Protocol Buffers" | "protobuf" | "proto" | "Handlebars" | "handlebars" | "mustache" | "Gherkin" | "gherkin" | "cucumber" | "ABAP" | "abap";
+    /**
+       * Comma delimited lines to highlight.
+       *
+       * Example uses:
+       * - To highlight one line `highlight="3"`
+       * - To highlight a group of lines `highlight="1-5"`
+       * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
+       */
+    highlight: string;
+    /**
+       * Screen reader text for the start of a highlighted line.
+       */
+    highlightedStartText: string;
+    /**
+       * Screen reader text for the end of a highlighted line.
+       */
+    highlightedEndText: string;
+    /**
+       * Sets whether long lines will create a horizontally scrolling container.
+       * When set to `true`, these lines will visually wrap instead.
+       * @default false
+       */
+    shouldWrapLongLines: boolean;
+};
 export type CodeBlockProps = Pick<PlatformCodeBlockProps, 'text' | 'testId' | 'showLineNumbers' | 'language' | 'highlight' | 'highlightedStartText' | 'highlightedEndText' | 'shouldWrapLongLines'>;
 /**
  * Code highlights short strings of code snippets inline with body text.

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

@@ -3,13 +3,22 @@
  *
  * Extract component prop types from UIKit 2 components - CodeProps
  *
- * @codegen <<SignedSource::baf6b565e34d8df53db53b8855ec120d>>
+ * @codegen <<SignedSource::7ea0b6ee7be9f3e5454b38e528c0753f>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/code.partial.tsx <<SignedSource::6f210b052488fe7ece12d865706a551e>>
  */
-import React from 'react';
-import { Code as PlatformCode } from '@atlaskit/code';
-type PlatformCodeProps = React.ComponentProps<typeof PlatformCode>;
+import { type ReactNode } from 'react';
+type PlatformCodeProps = {
+    /**
+       * A unique string that appears as a data attribute `data-testid`
+       * in the rendered code. Serves as a hook for automated tests.
+       */
+    testId: string;
+    /**
+       * Content to be rendered in the inline code block.
+       */
+    children: ReactNode;
+};
 export type CodeProps = Pick<PlatformCodeProps, 'children' | 'testId'>;
 /**
  * Code highlights short strings of code snippets inline with body text.

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

@@ -3,13 +3,60 @@
  *
  * Extract component prop types from UIKit 2 components - CodeBlockProps
  *
- * @codegen <<SignedSource::8ab4ed1e38d2bd1f9ceafe4cbc20f97d>>
+ * @codegen <<SignedSource::8fded8a55e24b0312739eb3ab66f63ca>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/codeblock.partial.tsx <<SignedSource::88ed38fdfc47db0938e7801195a00403>>
  */
-import React from 'react';
-import { CodeBlock as PlatformCodeBlock } from '@atlaskit/code';
-type PlatformCodeBlockProps = React.ComponentProps<typeof PlatformCodeBlock>;
+type PlatformCodeBlockProps = {
+    /**
+       * The code to be formatted.
+       */
+    text: string;
+    /**
+       * A unique string that appears as a data attribute `data-testid` in the
+       * rendered code. Serves as a hook for automated tests.
+       */
+    testId: string;
+    /**
+       *  Sets whether to display code line numbers or not.
+       *  @default true
+       */
+    showLineNumbers: boolean;
+    /**
+       * Language reference designed to be populated from `SUPPORTED_LANGUAGES` in
+       * `design-system/code`. Run against language grammars from PrismJS (full list
+       * available at [PrismJS documentation](https://prismjs.com/#supported-languages)).
+       *
+       * When set to "text" will not perform highlighting. If unsupported language
+       * provided - code will be treated as "text" with no highlighting.
+       *
+       * @default 'text'
+       */
+    language: "text" | "PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | "xml" | "C++" | "c++" | "cpp" | "clike" | "Ruby" | "ruby" | "rb" | "duby" | "Objective-C" | "objective-c" | "objectivec" | "obj-c" | "objc" | "C" | "c" | "Swift" | "swift" | "TeX" | "tex" | "latex" | "Shell" | "shell" | "bash" | "sh" | "ksh" | "zsh" | "Scala" | "scala" | "Go" | "go" | "ActionScript" | "actionscript" | "actionscript3" | "as" | "ColdFusion" | "coldfusion" | "JavaFX" | "javafx" | "jfx" | "VbNet" | "vbnet" | "vb.net" | "vfp" | "clipper" | "xbase" | "JSON" | "json" | "MATLAB" | "matlab" | "Groovy" | "groovy" | "SQL" | "sql" | "postgresql" | "postgres" | "plpgsql" | "psql" | "postgresql-console" | "postgres-console" | "tsql" | "t-sql" | "mysql" | "sqlite" | "R" | "r" | "Perl" | "perl" | "pl" | "Lua" | "lua" | "Pascal" | "pas" | "pascal" | "objectpascal" | "delphi" | "XML" | "TypeScript" | "typescript" | "ts" | "CoffeeScript" | "coffeescript" | "coffee-script" | "coffee" | "Haskell" | "haskell" | "hs" | "Puppet" | "puppet" | "Arduino" | "arduino" | "Fortran" | "fortran" | "Erlang" | "erlang" | "erl" | "PowerShell" | "powershell" | "posh" | "ps1" | "psm1" | "Haxe" | "haxe" | "hx" | "hxsl" | "Elixir" | "elixir" | "ex" | "exs" | "Verilog" | "verilog" | "v" | "Rust" | "rust" | "VHDL" | "vhdl" | "Sass" | "sass" | "OCaml" | "ocaml" | "Dart" | "dart" | "CSS" | "css" | "reStructuredText" | "restructuredtext" | "rst" | "rest" | "Kotlin" | "kotlin" | "D" | "d" | "Octave" | "octave" | "QML" | "qbs" | "qml" | "Prolog" | "prolog" | "FoxPro" | "foxpro" | "purebasic" | "Scheme" | "scheme" | "scm" | "CUDA" | "cuda" | "cu" | "Julia" | "julia" | "jl" | "Racket" | "racket" | "rkt" | "Ada" | "ada" | "ada95" | "ada2005" | "Tcl" | "tcl" | "Mathematica" | "mathematica" | "mma" | "nb" | "Autoit" | "autoit" | "StandardML" | "standardmL" | "sml" | "standardml" | "Objective-J" | "objective-j" | "objectivej" | "obj-j" | "objj" | "Smalltalk" | "smalltalk" | "squeak" | "st" | "Vala" | "vala" | "vapi" | "LiveScript" | "livescript" | "live-script" | "XQuery" | "xquery" | "xqy" | "xq" | "xql" | "xqm" | "PlainText" | "plaintext" | "Yaml" | "yaml" | "yml" | "GraphQL" | "graphql" | "AppleScript" | "applescript" | "Clojure" | "clojure" | "Diff" | "diff" | "VisualBasic" | "visualbasic" | "JSX" | "jsx" | "TSX" | "tsx" | "SplunkSPL" | "splunk-spl" | "Dockerfile" | "docker" | "dockerfile" | "HCL" | "hcl" | "terraform" | "NGINX" | "nginx" | "Protocol Buffers" | "protobuf" | "proto" | "Handlebars" | "handlebars" | "mustache" | "Gherkin" | "gherkin" | "cucumber" | "ABAP" | "abap";
+    /**
+       * Comma delimited lines to highlight.
+       *
+       * Example uses:
+       * - To highlight one line `highlight="3"`
+       * - To highlight a group of lines `highlight="1-5"`
+       * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
+       */
+    highlight: string;
+    /**
+       * Screen reader text for the start of a highlighted line.
+       */
+    highlightedStartText: string;
+    /**
+       * Screen reader text for the end of a highlighted line.
+       */
+    highlightedEndText: string;
+    /**
+       * Sets whether long lines will create a horizontally scrolling container.
+       * When set to `true`, these lines will visually wrap instead.
+       * @default false
+       */
+    shouldWrapLongLines: boolean;
+};
 export type CodeBlockProps = Pick<PlatformCodeBlockProps, 'text' | 'testId' | 'showLineNumbers' | 'language' | 'highlight' | 'highlightedStartText' | 'highlightedEndText' | 'shouldWrapLongLines'>;
 /**
  * Code highlights short strings of code snippets inline with body text.

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

@@ -3,13 +3,22 @@
  *
  * Extract component prop types from UIKit 2 components - CodeProps
  *
- * @codegen <<SignedSource::baf6b565e34d8df53db53b8855ec120d>>
+ * @codegen <<SignedSource::7ea0b6ee7be9f3e5454b38e528c0753f>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/code.partial.tsx <<SignedSource::6f210b052488fe7ece12d865706a551e>>
  */
-import React from 'react';
-import { Code as PlatformCode } from '@atlaskit/code';
-type PlatformCodeProps = React.ComponentProps<typeof PlatformCode>;
+import { type ReactNode } from 'react';
+type PlatformCodeProps = {
+    /**
+       * A unique string that appears as a data attribute `data-testid`
+       * in the rendered code. Serves as a hook for automated tests.
+       */
+    testId: string;
+    /**
+       * Content to be rendered in the inline code block.
+       */
+    children: ReactNode;
+};
 export type CodeProps = Pick<PlatformCodeProps, 'children' | 'testId'>;
 /**
  * Code highlights short strings of code snippets inline with body text.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/forge-react-types",
-	"version": "0.42.6",
+	"version": "0.42.7",
 	"description": "Component types for Forge UI Kit React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,14 +28,13 @@
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/calendar": "^17.1.0",
 		"@atlaskit/checkbox": "^17.1.0",
-		"@atlaskit/code": "^17.2.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.2.0",
+		"@atlaskit/inline-edit": "^15.3.0",
 		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/modal-dialog": "^14.2.0",
 		"@atlaskit/popup": "^4.3.0",
@@ -45,7 +44,7 @@
 		"@atlaskit/radio": "^8.1.0",
 		"@atlaskit/range": "^9.1.0",
 		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/select": "^21.0.0",
+		"@atlaskit/select": "^21.1.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.1.0",
 		"@atlaskit/tag": "^14.0.0",

package/scripts/codegen/codeGenerator.ts

@@ -8,6 +8,7 @@ import {
 } from 'ts-morph';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import kebabCase from 'lodash/kebabCase';
+import { serializeSymbolType } from './typeSerializer';
 
 const getNames = (symbol: Symbol) => {
 	const name = symbol.getName();
@@ -125,20 +126,39 @@ const isTokenUsed = (token: string, codes: string[]) => {
 	return codes.some((code) => check.test(code));
 };
 
+interface IImportDeclaration {
+	addNamedImport: (namedImport: string) => void;
+	removeNamedImport: (namedImport: string) => void;
+	getText: () => string;
+}
+
 /**
  * implement a custom ImportDeclaration object that allows remove named import
  * and re-generate the modified import statement.
  * This is for solving the edge case raised from DynamicTableProps.
  */
-class ImportDeclarationProxy {
+class ImportDeclarationProxy implements IImportDeclaration {
 	private readonly base: ImportDeclaration;
 
 	private removedNamedImports = new Set<string>();
 
+	private addedNamedImports = new Set<string>();
+
 	constructor(base: ImportDeclaration) {
 		this.base = base;
 	}
 
+	public getBasePackage() {
+		return this.base.getModuleSpecifierValue();
+	}
+
+	public addNamedImport(namedImport: string) {
+		if (this.removedNamedImports.has(namedImport)) {
+			this.removedNamedImports.delete(namedImport);
+		}
+		this.addedNamedImports.add(namedImport);
+	}
+
 	public removeNamedImport(namedImport: string) {
 		const target = this.base
 			.getNamedImports()
@@ -155,22 +175,55 @@ class ImportDeclarationProxy {
 			return this.base.getText();
 		}
 		let [_, importStatement, importedNames, packageName] = match;
-		importedNames = importedNames.trim();
+		let importedNamesList = importedNames
+			.trim()
+			.split(',')
+			.map((text) => text.trim());
 
 		if (isSharedUIKit2TypesImport(this.base)) {
 			packageName = './types.codegen';
 		}
+
 		if (this.removedNamedImports.size > 0) {
-			importedNames = importedNames!
-				.split(',')
-				.map((text) => text.trim())
-				.filter((text) => !this.removedNamedImports.has(text))
-				.join(', ');
+			importedNamesList = importedNamesList.filter((text) => !this.removedNamedImports.has(text));
 		}
+		if (this.addedNamedImports) {
+			importedNamesList = Array.from(new Set([...importedNamesList, ...this.addedNamedImports]));
+		}
+		importedNames = importedNamesList.sort().join(', ');
 		return `${importStatement}{ ${importedNames} } from '${packageName}';`;
 	}
 }
 
+class SimpleImportDeclaration implements IImportDeclaration {
+	private readonly packageName: string;
+
+	private namedImports = new Set<string>();
+
+	constructor(packageName: string) {
+		this.packageName = packageName;
+	}
+
+	public addNamedImport(namedImport: string) {
+		this.namedImports.add(namedImport);
+	}
+
+	public removeNamedImport(namedImport: string) {
+		this.namedImports.delete(namedImport);
+	}
+
+	public getText() {
+		if (this.namedImports.size === 0) {
+			return `import '${this.packageName}';`;
+		}
+		const importedNames = Array.from(this.namedImports)
+			.sort()
+			.map((name) => `type ${name}`)
+			.join(', ');
+		return `import { ${importedNames} } from '${this.packageName}';`;
+	}
+}
+
 // handles type imports from platform/packages/forge/forge-ui/src/components/UIKit/types.ts
 const isSharedUIKit2TypesImport = (importDeclaration: ImportDeclaration) => {
 	return (
@@ -502,6 +555,125 @@ const baseGenerateComponentPropTypeSourceCode = (
 	});
 };
 
+const registeredExternalTypes: Record<
+	string,
+	{
+		package: string;
+		alias?: string;
+	}
+> = {
+	'React.ReactNode': {
+		package: 'react',
+		alias: 'ReactNode',
+	},
+};
+
+// consolidate external types into import declarations
+const consolidateImportDeclarations = (
+	importDeclarations: ImportDeclarationProxy[],
+	externalTypes: Set<string>,
+): IImportDeclaration[] => {
+	const declarations: IImportDeclaration[] = [...importDeclarations];
+	externalTypes.forEach((typeName) => {
+		const typePackage = registeredExternalTypes[typeName];
+		if (typePackage) {
+			const existingImport = importDeclarations.find(
+				(declaration) => declaration.getBasePackage() === typePackage.package,
+			);
+			if (existingImport) {
+				existingImport.addNamedImport(typeName);
+			} else {
+				const newImport = new SimpleImportDeclaration(typePackage.package);
+				newImport.addNamedImport(typePackage.alias ?? typeName);
+				declarations.push(newImport);
+			}
+		}
+	});
+	return declarations;
+};
+
+/**
+ * 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
+ * by serializing the ADS component prop types. Hence, it remove the dependency on the
+ * ADS components.
+ */
+const generateComponentPropTypeSourceCodeWithSerializedType = (
+	componentPropSymbol: Symbol,
+	sourceFile: SourceFile,
+	customConsolidator?: CodeConsolidator,
+) => {
+	// 1) extract the prop types from the source file
+	const baseComponentPropSymbol = getBaseComponentSymbol(componentPropSymbol, sourceFile);
+
+	// 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(
+		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
+				agg[1] = declarations;
+			} else {
+				agg[0].push(declarations);
+			}
+			return agg;
+		},
+		[[] as TypeAliasDeclaration[], null as TypeAliasDeclaration | null],
+	);
+
+	// 3) extract the import statement
+	const importDeclarations = extractImportDeclarations(
+		sourceFile,
+		baseComponentPropSymbol,
+		dependentTypeDeclarations,
+	);
+
+	// 4) resolve other types definition (not part of the ADS components)
+	const externalTypesCode = resolveExternalTypesCode(
+		sourceFile,
+		baseComponentPropSymbol,
+		dependentTypeDeclarations,
+	);
+
+	// 5) serialize the prop type for the @atlaskit component (e.g. PlatformButtonProps)
+	const [typeDefCode, usedExternalTypes] = serializeSymbolType(
+		baseComponentPropSymbol,
+		sourceFile.getProject().getTypeChecker(),
+	);
+
+	// 6) generate the source file
+	const importCode = consolidateImportDeclarations(importDeclarations, usedExternalTypes)
+		.map((declaration) => declaration.getText())
+		.join('\n');
+
+	const platformPropsTypeDeclarationName = platformPropsTypeDeclaration?.getName();
+	const dependentTypeCode = [
+		...dependentTypeDeclarations.map((typeAlias) => typeAlias.getText()),
+		platformPropsTypeDeclarationName &&
+			`\n// Serialized type\ntype ${platformPropsTypeDeclarationName} = ${typeDefCode}`,
+	]
+		.filter(Boolean)
+		.join('\n');
+
+	const componentPropCode = getComponentPropsTypeCode(baseComponentPropSymbol);
+
+	// 7) get component type code
+	const componentTypeCode = getComponentTypeCode(baseComponentPropSymbol, sourceFile);
+
+	return (customConsolidator ?? consolidateCodeSections)({
+		sourceFile,
+		importCode,
+		externalTypesCode,
+		dependentTypeCode,
+		componentPropCode,
+		componentTypeCode,
+	});
+};
+
 const handleXCSSProp: CodeConsolidator = ({
 	sourceFile,
 	importCode,
@@ -553,11 +725,19 @@ const codeConsolidators: Record<string, CodeConsolidator> = {
 	PressableProps: handleXCSSProp,
 };
 
+const typeSerializableComponentPropSymbols = ['CodeProps', 'CodeBlockProps'];
+
 const generateComponentPropTypeSourceCode = (
 	componentPropSymbol: Symbol,
 	sourceFile: SourceFile,
 ) => {
-	return baseGenerateComponentPropTypeSourceCode(
+	const sourceCodeGenerator = typeSerializableComponentPropSymbols.includes(
+		componentPropSymbol.getName(),
+	)
+		? generateComponentPropTypeSourceCodeWithSerializedType
+		: baseGenerateComponentPropTypeSourceCode;
+
+	return sourceCodeGenerator(
 		componentPropSymbol,
 		sourceFile,
 		codeConsolidators[componentPropSymbol.getName()],

package/scripts/codegen/typeSerializer.ts

@@ -0,0 +1,201 @@
+import {
+	type Symbol as TSSymbol,
+	type Node,
+	type TypeChecker,
+	type PropertySignature,
+	type Type as TSType,
+	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()}`);
+	}
+
+	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;
+};
+
+// resolve single level type references (e.g. SupportedLanguages))
+// type SupportedLanguages = 'text' | 'PHP' | 'Java' | 'CSharp' | ...;
+const isSimpleTypeReferenceNode = (node: Node): boolean => {
+	const type = node.getType();
+	if (type.isUnion()) {
+		const unionTypes = type.getUnionTypes();
+		return unionTypes.every((t) => {
+			return t.isString() || t.isStringLiteral() || t.isNumber() || t.isBoolean();
+		});
+	}
+	return false;
+};
+
+const serializeSimpleTypeNode = (node: Node): string => {
+	switch (node.getKind()) {
+		case SyntaxKind.UnionType:
+			const unionType = node.asKindOrThrow(SyntaxKind.UnionType);
+			const unionTypes = unionType.getTypeNodes().map((t) => serializeSimpleTypeNode(t));
+			return unionTypes.join(' | ');
+
+		case SyntaxKind.StringLiteral:
+			return `'${node.asKindOrThrow(SyntaxKind.StringLiteral).getLiteralValue()}'`;
+		case SyntaxKind.TypeReference:
+			// resolve single level type references (e.g. SupportedLanguages))
+			if (isSimpleTypeReferenceNode(node)) {
+				return node
+					.getType()
+					.getUnionTypes()
+					.map((t) => t.getText())
+					.join(' | ');
+			}
+	}
+	return node.getText();
+};
+
+const serializePropertySignatureCode = (propertySignature: PropertySignature) => {
+	return `${propertySignature.getName()}: ${serializeSimpleTypeNode(propertySignature.getTypeNode()!)};`;
+};
+
+const flattenPickType = (
+	typeRef: Node,
+	typeChecker: TypeChecker,
+	usedExternalTypesOutput: Set<string>,
+): 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 properties = typeRef
+		.getType()
+		.getProperties()
+		.filter((prop) => selectedKeys.includes(prop.getName()));
+
+	if (properties.length === 0) {
+		return '{}'; // If no properties match, return 'any'
+	}
+
+	const serializedProperties = properties
+		.map((prop) => {
+			const propertySignature = prop.getDeclarations()[0] as PropertySignature | undefined;
+			if (!propertySignature) {
+				return null; // Skip if no declaration
+			}
+			const jsDoc = propertySignature.getJsDocs()?.[0]?.getText();
+			const typeCode = `\t${serializePropertySignatureCode(propertySignature)}`;
+			getUnresolvableTypes(propertySignature.getType()).forEach((typeName) => {
+				usedExternalTypesOutput.add(typeName);
+			});
+			return [jsDoc, typeCode].filter(Boolean).join('\n');
+		})
+		.filter(Boolean);
+
+	if (serializedProperties.length === 0) {
+		return '{}'; // If no properties are serialized, return empty object
+	}
+	return `{\n  ${serializedProperties.join('\n  ')}\n}`;
+};
+
+const getUnresolvableTypes = (tsType: TSType) => {
+	const unresolvableTypes = new Set<string>();
+	getUnresolvableTypesBase(tsType, unresolvableTypes);
+	return unresolvableTypes;
+};
+
+const getUnresolvableTypesBase = (tsType: TSType, unresolvableTypes: Set<string>) => {
+	if (isExternalType(tsType)) {
+		unresolvableTypes.add(tsType.getText());
+	} else if (tsType.isUnion()) {
+		const unionTypes = tsType.getUnionTypes();
+		unionTypes.forEach((type) => {
+			getUnresolvableTypesBase(type, unresolvableTypes);
+		});
+	} else if (!isBasicType(tsType)) {
+		unresolvableTypes.add(tsType.getText());
+	}
+};
+
+const isBasicType = (tsType: TSType): boolean => {
+	return (
+		tsType.isString() ||
+		tsType.isNumber() ||
+		tsType.isBoolean() ||
+		tsType.isNull() ||
+		tsType.isUndefined() ||
+		tsType.isAny() ||
+		tsType.isUnknown() ||
+		tsType.isNever()
+	);
+};
+
+const isExternalType = (tsType: TSType): boolean => {
+	const symbol = tsType.getSymbol() ?? tsType.getAliasSymbol();
+	if (!symbol) {return false;}
+
+	const declaration = symbol.getDeclarations()?.[0];
+	if (!declaration) {return false;}
+
+	const sourceFile = declaration.getSourceFile();
+	const filePath = sourceFile.getFilePath();
+
+	return filePath.includes('node_modules');
+};
+
+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, '');
+		});
+	} else if (keysNode.getKind() === SyntaxKind.StringLiteral) {
+		return [keysNode.asKindOrThrow(SyntaxKind.StringLiteral).getLiteralValue()];
+	}
+
+	return [keysNode.getText().replace(/['"]/g, '')];
+};

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

@@ -3,16 +3,64 @@
  *
  * Extract component prop types from UIKit 2 components - CodeBlockProps
  *
- * @codegen <<SignedSource::8ab4ed1e38d2bd1f9ceafe4cbc20f97d>>
+ * @codegen <<SignedSource::8fded8a55e24b0312739eb3ab66f63ca>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/codeblock.partial.tsx <<SignedSource::88ed38fdfc47db0938e7801195a00403>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
-import React from 'react';
-import { CodeBlock as PlatformCodeBlock } from '@atlaskit/code';
 
-type PlatformCodeBlockProps = React.ComponentProps<typeof PlatformCodeBlock>;
+// Serialized type
+type PlatformCodeBlockProps = {
+  /**
+	 * The code to be formatted.
+	 */
+	text: string;
+  /**
+	 * A unique string that appears as a data attribute `data-testid` in the
+	 * rendered code. Serves as a hook for automated tests.
+	 */
+	testId: string;
+  /**
+	 *  Sets whether to display code line numbers or not.
+	 *  @default true
+	 */
+	showLineNumbers: boolean;
+  /**
+	 * Language reference designed to be populated from `SUPPORTED_LANGUAGES` in
+	 * `design-system/code`. Run against language grammars from PrismJS (full list
+	 * available at [PrismJS documentation](https://prismjs.com/#supported-languages)).
+	 *
+	 * When set to "text" will not perform highlighting. If unsupported language
+	 * provided - code will be treated as "text" with no highlighting.
+	 *
+	 * @default 'text'
+	 */
+	language: "text" | "PHP" | "php" | "php3" | "php4" | "php5" | "Java" | "java" | "CSharp" | "csharp" | "c#" | "Python" | "python" | "py" | "JavaScript" | "javascript" | "js" | "Html" | "html" | "xml" | "C++" | "c++" | "cpp" | "clike" | "Ruby" | "ruby" | "rb" | "duby" | "Objective-C" | "objective-c" | "objectivec" | "obj-c" | "objc" | "C" | "c" | "Swift" | "swift" | "TeX" | "tex" | "latex" | "Shell" | "shell" | "bash" | "sh" | "ksh" | "zsh" | "Scala" | "scala" | "Go" | "go" | "ActionScript" | "actionscript" | "actionscript3" | "as" | "ColdFusion" | "coldfusion" | "JavaFX" | "javafx" | "jfx" | "VbNet" | "vbnet" | "vb.net" | "vfp" | "clipper" | "xbase" | "JSON" | "json" | "MATLAB" | "matlab" | "Groovy" | "groovy" | "SQL" | "sql" | "postgresql" | "postgres" | "plpgsql" | "psql" | "postgresql-console" | "postgres-console" | "tsql" | "t-sql" | "mysql" | "sqlite" | "R" | "r" | "Perl" | "perl" | "pl" | "Lua" | "lua" | "Pascal" | "pas" | "pascal" | "objectpascal" | "delphi" | "XML" | "TypeScript" | "typescript" | "ts" | "CoffeeScript" | "coffeescript" | "coffee-script" | "coffee" | "Haskell" | "haskell" | "hs" | "Puppet" | "puppet" | "Arduino" | "arduino" | "Fortran" | "fortran" | "Erlang" | "erlang" | "erl" | "PowerShell" | "powershell" | "posh" | "ps1" | "psm1" | "Haxe" | "haxe" | "hx" | "hxsl" | "Elixir" | "elixir" | "ex" | "exs" | "Verilog" | "verilog" | "v" | "Rust" | "rust" | "VHDL" | "vhdl" | "Sass" | "sass" | "OCaml" | "ocaml" | "Dart" | "dart" | "CSS" | "css" | "reStructuredText" | "restructuredtext" | "rst" | "rest" | "Kotlin" | "kotlin" | "D" | "d" | "Octave" | "octave" | "QML" | "qbs" | "qml" | "Prolog" | "prolog" | "FoxPro" | "foxpro" | "purebasic" | "Scheme" | "scheme" | "scm" | "CUDA" | "cuda" | "cu" | "Julia" | "julia" | "jl" | "Racket" | "racket" | "rkt" | "Ada" | "ada" | "ada95" | "ada2005" | "Tcl" | "tcl" | "Mathematica" | "mathematica" | "mma" | "nb" | "Autoit" | "autoit" | "StandardML" | "standardmL" | "sml" | "standardml" | "Objective-J" | "objective-j" | "objectivej" | "obj-j" | "objj" | "Smalltalk" | "smalltalk" | "squeak" | "st" | "Vala" | "vala" | "vapi" | "LiveScript" | "livescript" | "live-script" | "XQuery" | "xquery" | "xqy" | "xq" | "xql" | "xqm" | "PlainText" | "plaintext" | "Yaml" | "yaml" | "yml" | "GraphQL" | "graphql" | "AppleScript" | "applescript" | "Clojure" | "clojure" | "Diff" | "diff" | "VisualBasic" | "visualbasic" | "JSX" | "jsx" | "TSX" | "tsx" | "SplunkSPL" | "splunk-spl" | "Dockerfile" | "docker" | "dockerfile" | "HCL" | "hcl" | "terraform" | "NGINX" | "nginx" | "Protocol Buffers" | "protobuf" | "proto" | "Handlebars" | "handlebars" | "mustache" | "Gherkin" | "gherkin" | "cucumber" | "ABAP" | "abap";
+  /**
+	 * Comma delimited lines to highlight.
+	 *
+	 * Example uses:
+	 * - To highlight one line `highlight="3"`
+	 * - To highlight a group of lines `highlight="1-5"`
+	 * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
+	 */
+	highlight: string;
+  /**
+	 * Screen reader text for the start of a highlighted line.
+	 */
+	highlightedStartText: string;
+  /**
+	 * Screen reader text for the end of a highlighted line.
+	 */
+	highlightedEndText: string;
+  /**
+	 * Sets whether long lines will create a horizontally scrolling container.
+	 * When set to `true`, these lines will visually wrap instead.
+	 * @default false
+	 */
+	shouldWrapLongLines: boolean;
+}
 
 export type CodeBlockProps = Pick<
   PlatformCodeBlockProps,

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

@@ -3,16 +3,27 @@
  *
  * Extract component prop types from UIKit 2 components - CodeProps
  *
- * @codegen <<SignedSource::baf6b565e34d8df53db53b8855ec120d>>
+ * @codegen <<SignedSource::7ea0b6ee7be9f3e5454b38e528c0753f>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/code.partial.tsx <<SignedSource::6f210b052488fe7ece12d865706a551e>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
-import React from 'react';
-import { Code as PlatformCode } from '@atlaskit/code';
+import { type ReactNode } from 'react';
 
-type PlatformCodeProps = React.ComponentProps<typeof PlatformCode>;
+
+// Serialized type
+type PlatformCodeProps = {
+  /**
+	 * A unique string that appears as a data attribute `data-testid`
+	 * in the rendered code. Serves as a hook for automated tests.
+	 */
+	testId: string;
+  /**
+	 * Content to be rendered in the inline code block.
+	 */
+	children: ReactNode;
+}
 
 export type CodeProps = Pick<
   PlatformCodeProps,