@atlaskit/forge-react-types 0.42.6 → 0.42.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/forge-react-types
2
2
 
3
+ ## 0.42.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [#183733](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183733)
8
+ [`a0bd63639d169`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0bd63639d169) -
9
+ Fix types for code and codeblock components
10
+
11
+ ## 0.42.7
12
+
13
+ ### Patch Changes
14
+
15
+ - [#183155](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/183155)
16
+ [`0da1030d5f383`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0da1030d5f383) -
17
+ Remove @atlaskit/code dependency from @atlaskit/forge-react-types
18
+
3
19
  ## 0.42.6
4
20
 
5
21
  ### Patch Changes
@@ -1,5 +1 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
1
+ "use strict";
@@ -3,13 +3,11 @@
3
3
  *
4
4
  * Extract component prop types from UIKit 2 components - BadgeProps
5
5
  *
6
- * @codegen <<SignedSource::c3ed8f1b656c7e1c4a9aad0919de3f7d>>
6
+ * @codegen <<SignedSource::70958e2a60c7a0e1b3443db2d24003cc>>
7
7
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
8
8
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::89ad3341c1b8ef4b6fc93df162ac91d3>>
9
9
  */
10
10
  import React from 'react';
11
- import PlatformBadge from '@atlaskit/badge';
12
- type _PlatformBadgeProps = React.ComponentProps<typeof PlatformBadge>;
13
11
  export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
14
12
  /**
15
13
  * The value displayed within the badge. A badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
@@ -18,6 +16,28 @@ export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
18
16
  */
19
17
  children?: _PlatformBadgeProps['children'];
20
18
  };
19
+ type _PlatformBadgeProps = {
20
+ /**
21
+ * Affects the visual style of the badge.
22
+ */
23
+ appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
24
+ /**
25
+ * The value displayed within the badge. A badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
26
+ *
27
+ * @type string | number
28
+ */
29
+ children?: React.ReactNode;
30
+ /**
31
+ * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
32
+ * This value should be greater than 0. If set to `false` the original value will be displayed regardless of
33
+ * whether it is larger than the default maximum value.
34
+ */
35
+ max?: number | false;
36
+ /**
37
+ * 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
38
+ */
39
+ testId?: string;
40
+ };
21
41
  export type BadgeProps = Pick<PlatformBadgeProps, 'appearance' | 'children' | 'max' | 'testId'>;
22
42
  /**
23
43
  * A badge is a visual indicator for numeric values such as tallies and scores.
@@ -3,13 +3,60 @@
3
3
  *
4
4
  * Extract component prop types from UIKit 2 components - CodeBlockProps
5
5
  *
6
- * @codegen <<SignedSource::8ab4ed1e38d2bd1f9ceafe4cbc20f97d>>
6
+ * @codegen <<SignedSource::65085e024d4b564b666c598596566f73>>
7
7
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
8
8
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/codeblock.partial.tsx <<SignedSource::88ed38fdfc47db0938e7801195a00403>>
9
9
  */
10
- import React from 'react';
11
- import { CodeBlock as PlatformCodeBlock } from '@atlaskit/code';
12
- type PlatformCodeBlockProps = React.ComponentProps<typeof PlatformCodeBlock>;
10
+ type PlatformCodeBlockProps = {
11
+ /**
12
+ * The code to be formatted.
13
+ */
14
+ text: string;
15
+ /**
16
+ * A unique string that appears as a data attribute `data-testid` in the
17
+ * rendered code. Serves as a hook for automated tests.
18
+ */
19
+ testId?: string;
20
+ /**
21
+ * Sets whether to display code line numbers or not.
22
+ * @default true
23
+ */
24
+ showLineNumbers?: boolean;
25
+ /**
26
+ * Language reference designed to be populated from `SUPPORTED_LANGUAGES` in
27
+ * `design-system/code`. Run against language grammars from PrismJS (full list
28
+ * available at [PrismJS documentation](https://prismjs.com/#supported-languages)).
29
+ *
30
+ * When set to "text" will not perform highlighting. If unsupported language
31
+ * provided - code will be treated as "text" with no highlighting.
32
+ *
33
+ * @default 'text'
34
+ */
35
+ 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';
36
+ /**
37
+ * Comma delimited lines to highlight.
38
+ *
39
+ * Example uses:
40
+ * - To highlight one line `highlight="3"`
41
+ * - To highlight a group of lines `highlight="1-5"`
42
+ * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
43
+ */
44
+ highlight?: string;
45
+ /**
46
+ * Screen reader text for the start of a highlighted line.
47
+ */
48
+ highlightedStartText?: string;
49
+ /**
50
+ * Screen reader text for the end of a highlighted line.
51
+ */
52
+ highlightedEndText?: string;
53
+ /**
54
+ * Sets whether long lines will create a horizontally scrolling container.
55
+ * When set to `true`, these lines will visually wrap instead.
56
+ * @default false
57
+ */
58
+ shouldWrapLongLines?: boolean;
59
+ };
13
60
  export type CodeBlockProps = Pick<PlatformCodeBlockProps, 'text' | 'testId' | 'showLineNumbers' | 'language' | 'highlight' | 'highlightedStartText' | 'highlightedEndText' | 'shouldWrapLongLines'>;
14
61
  /**
15
62
  * Code highlights short strings of code snippets inline with body text.
@@ -3,13 +3,22 @@
3
3
  *
4
4
  * Extract component prop types from UIKit 2 components - CodeProps
5
5
  *
6
- * @codegen <<SignedSource::baf6b565e34d8df53db53b8855ec120d>>
6
+ * @codegen <<SignedSource::e915d32433441373892842df5cce597e>>
7
7
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
8
8
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/code.partial.tsx <<SignedSource::6f210b052488fe7ece12d865706a551e>>
9
9
  */
10
10
  import React from 'react';
11
- import { Code as PlatformCode } from '@atlaskit/code';
12
- type PlatformCodeProps = React.ComponentProps<typeof PlatformCode>;
11
+ type PlatformCodeProps = {
12
+ /**
13
+ * A unique string that appears as a data attribute `data-testid`
14
+ * in the rendered code. Serves as a hook for automated tests.
15
+ */
16
+ testId?: string;
17
+ /**
18
+ * Content to be rendered in the inline code block.
19
+ */
20
+ children?: React.ReactNode;
21
+ };
13
22
  export type CodeProps = Pick<PlatformCodeProps, 'children' | 'testId'>;
14
23
  /**
15
24
  * Code highlights short strings of code snippets inline with body text.
@@ -3,13 +3,11 @@
3
3
  *
4
4
  * Extract component prop types from UIKit 2 components - BadgeProps
5
5
  *
6
- * @codegen <<SignedSource::c3ed8f1b656c7e1c4a9aad0919de3f7d>>
6
+ * @codegen <<SignedSource::70958e2a60c7a0e1b3443db2d24003cc>>
7
7
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
8
8
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::89ad3341c1b8ef4b6fc93df162ac91d3>>
9
9
  */
10
10
  import React from 'react';
11
- import PlatformBadge from '@atlaskit/badge';
12
- type _PlatformBadgeProps = React.ComponentProps<typeof PlatformBadge>;
13
11
  export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
14
12
  /**
15
13
  * The value displayed within the badge. A badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
@@ -18,6 +16,28 @@ export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
18
16
  */
19
17
  children?: _PlatformBadgeProps['children'];
20
18
  };
19
+ type _PlatformBadgeProps = {
20
+ /**
21
+ * Affects the visual style of the badge.
22
+ */
23
+ appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
24
+ /**
25
+ * The value displayed within the badge. A badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
26
+ *
27
+ * @type string | number
28
+ */
29
+ children?: React.ReactNode;
30
+ /**
31
+ * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
32
+ * This value should be greater than 0. If set to `false` the original value will be displayed regardless of
33
+ * whether it is larger than the default maximum value.
34
+ */
35
+ max?: number | false;
36
+ /**
37
+ * 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
38
+ */
39
+ testId?: string;
40
+ };
21
41
  export type BadgeProps = Pick<PlatformBadgeProps, 'appearance' | 'children' | 'max' | 'testId'>;
22
42
  /**
23
43
  * A badge is a visual indicator for numeric values such as tallies and scores.
@@ -3,13 +3,60 @@
3
3
  *
4
4
  * Extract component prop types from UIKit 2 components - CodeBlockProps
5
5
  *
6
- * @codegen <<SignedSource::8ab4ed1e38d2bd1f9ceafe4cbc20f97d>>
6
+ * @codegen <<SignedSource::65085e024d4b564b666c598596566f73>>
7
7
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
8
8
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/codeblock.partial.tsx <<SignedSource::88ed38fdfc47db0938e7801195a00403>>
9
9
  */
10
- import React from 'react';
11
- import { CodeBlock as PlatformCodeBlock } from '@atlaskit/code';
12
- type PlatformCodeBlockProps = React.ComponentProps<typeof PlatformCodeBlock>;
10
+ type PlatformCodeBlockProps = {
11
+ /**
12
+ * The code to be formatted.
13
+ */
14
+ text: string;
15
+ /**
16
+ * A unique string that appears as a data attribute `data-testid` in the
17
+ * rendered code. Serves as a hook for automated tests.
18
+ */
19
+ testId?: string;
20
+ /**
21
+ * Sets whether to display code line numbers or not.
22
+ * @default true
23
+ */
24
+ showLineNumbers?: boolean;
25
+ /**
26
+ * Language reference designed to be populated from `SUPPORTED_LANGUAGES` in
27
+ * `design-system/code`. Run against language grammars from PrismJS (full list
28
+ * available at [PrismJS documentation](https://prismjs.com/#supported-languages)).
29
+ *
30
+ * When set to "text" will not perform highlighting. If unsupported language
31
+ * provided - code will be treated as "text" with no highlighting.
32
+ *
33
+ * @default 'text'
34
+ */
35
+ 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';
36
+ /**
37
+ * Comma delimited lines to highlight.
38
+ *
39
+ * Example uses:
40
+ * - To highlight one line `highlight="3"`
41
+ * - To highlight a group of lines `highlight="1-5"`
42
+ * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
43
+ */
44
+ highlight?: string;
45
+ /**
46
+ * Screen reader text for the start of a highlighted line.
47
+ */
48
+ highlightedStartText?: string;
49
+ /**
50
+ * Screen reader text for the end of a highlighted line.
51
+ */
52
+ highlightedEndText?: string;
53
+ /**
54
+ * Sets whether long lines will create a horizontally scrolling container.
55
+ * When set to `true`, these lines will visually wrap instead.
56
+ * @default false
57
+ */
58
+ shouldWrapLongLines?: boolean;
59
+ };
13
60
  export type CodeBlockProps = Pick<PlatformCodeBlockProps, 'text' | 'testId' | 'showLineNumbers' | 'language' | 'highlight' | 'highlightedStartText' | 'highlightedEndText' | 'shouldWrapLongLines'>;
14
61
  /**
15
62
  * Code highlights short strings of code snippets inline with body text.
@@ -3,13 +3,22 @@
3
3
  *
4
4
  * Extract component prop types from UIKit 2 components - CodeProps
5
5
  *
6
- * @codegen <<SignedSource::baf6b565e34d8df53db53b8855ec120d>>
6
+ * @codegen <<SignedSource::e915d32433441373892842df5cce597e>>
7
7
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
8
8
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/code.partial.tsx <<SignedSource::6f210b052488fe7ece12d865706a551e>>
9
9
  */
10
10
  import React from 'react';
11
- import { Code as PlatformCode } from '@atlaskit/code';
12
- type PlatformCodeProps = React.ComponentProps<typeof PlatformCode>;
11
+ type PlatformCodeProps = {
12
+ /**
13
+ * A unique string that appears as a data attribute `data-testid`
14
+ * in the rendered code. Serves as a hook for automated tests.
15
+ */
16
+ testId?: string;
17
+ /**
18
+ * Content to be rendered in the inline code block.
19
+ */
20
+ children?: React.ReactNode;
21
+ };
13
22
  export type CodeProps = Pick<PlatformCodeProps, 'children' | 'testId'>;
14
23
  /**
15
24
  * Code highlights short strings of code snippets inline with body text.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/forge-react-types",
3
- "version": "0.42.6",
3
+ "version": "0.42.8",
4
4
  "description": "Component types for Forge UI Kit React components",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,18 +24,16 @@
24
24
  "team": "Forge UI"
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/badge": "^18.1.0",
28
27
  "@atlaskit/button": "^23.2.0",
29
28
  "@atlaskit/calendar": "^17.1.0",
30
29
  "@atlaskit/checkbox": "^17.1.0",
31
- "@atlaskit/code": "^17.2.0",
32
30
  "@atlaskit/comment": "^13.0.0",
33
31
  "@atlaskit/datetime-picker": "^17.0.0",
34
32
  "@atlaskit/dynamic-table": "^18.2.0",
35
33
  "@atlaskit/empty-state": "^10.1.0",
36
34
  "@atlaskit/form": "^12.0.0",
37
35
  "@atlaskit/heading": "^5.2.0",
38
- "@atlaskit/inline-edit": "^15.2.0",
36
+ "@atlaskit/inline-edit": "^15.3.0",
39
37
  "@atlaskit/lozenge": "^13.0.0",
40
38
  "@atlaskit/modal-dialog": "^14.2.0",
41
39
  "@atlaskit/popup": "^4.3.0",
@@ -45,7 +43,7 @@
45
43
  "@atlaskit/radio": "^8.1.0",
46
44
  "@atlaskit/range": "^9.1.0",
47
45
  "@atlaskit/section-message": "^8.2.0",
48
- "@atlaskit/select": "^21.0.0",
46
+ "@atlaskit/select": "^21.1.0",
49
47
  "@atlaskit/spinner": "^18.0.0",
50
48
  "@atlaskit/tabs": "^18.1.0",
51
49
  "@atlaskit/tag": "^14.0.0",
@@ -62,6 +60,7 @@
62
60
  },
63
61
  "devDependencies": {
64
62
  "@atlassian/codegen": "^0.1.0",
63
+ "@atlassian/forge-ui": "^32.24.0",
65
64
  "@types/node": "~20.16.5",
66
65
  "lodash": "^4.17.21",
67
66
  "react": "^18.2.0",
@@ -70,7 +69,8 @@
70
69
  "typescript": "~5.4.2"
71
70
  },
72
71
  "scripts": {
73
- "codegen": "ts-node ./scripts/codegen-runner.ts"
72
+ "codegen": "ts-node ./scripts/codegen-runner.ts",
73
+ "check-types": "ts-node --type-check ./scripts/typechecker.ts"
74
74
  },
75
75
  "sideEffects": [
76
76
  "*.compiled.css"
@@ -8,6 +8,7 @@ import {
8
8
  } from 'ts-morph';
9
9
  // eslint-disable-next-line import/no-extraneous-dependencies
10
10
  import kebabCase from 'lodash/kebabCase';
11
+ import { serializeSymbolType } from './typeSerializer';
11
12
 
12
13
  const getNames = (symbol: Symbol) => {
13
14
  const name = symbol.getName();
@@ -125,20 +126,39 @@ const isTokenUsed = (token: string, codes: string[]) => {
125
126
  return codes.some((code) => check.test(code));
126
127
  };
127
128
 
129
+ interface IImportDeclaration {
130
+ addNamedImport: (namedImport: string) => void;
131
+ removeNamedImport: (namedImport: string) => void;
132
+ getText: () => string;
133
+ }
134
+
128
135
  /**
129
136
  * implement a custom ImportDeclaration object that allows remove named import
130
137
  * and re-generate the modified import statement.
131
138
  * This is for solving the edge case raised from DynamicTableProps.
132
139
  */
133
- class ImportDeclarationProxy {
140
+ class ImportDeclarationProxy implements IImportDeclaration {
134
141
  private readonly base: ImportDeclaration;
135
142
 
136
143
  private removedNamedImports = new Set<string>();
137
144
 
145
+ private addedNamedImports = new Set<string>();
146
+
138
147
  constructor(base: ImportDeclaration) {
139
148
  this.base = base;
140
149
  }
141
150
 
151
+ public getBasePackage() {
152
+ return this.base.getModuleSpecifierValue();
153
+ }
154
+
155
+ public addNamedImport(namedImport: string) {
156
+ if (this.removedNamedImports.has(namedImport)) {
157
+ this.removedNamedImports.delete(namedImport);
158
+ }
159
+ this.addedNamedImports.add(namedImport);
160
+ }
161
+
142
162
  public removeNamedImport(namedImport: string) {
143
163
  const target = this.base
144
164
  .getNamedImports()
@@ -155,22 +175,60 @@ class ImportDeclarationProxy {
155
175
  return this.base.getText();
156
176
  }
157
177
  let [_, importStatement, importedNames, packageName] = match;
158
- importedNames = importedNames.trim();
178
+ let importedNamesList = importedNames
179
+ .trim()
180
+ .split(',')
181
+ .map((text) => text.trim());
159
182
 
160
183
  if (isSharedUIKit2TypesImport(this.base)) {
161
184
  packageName = './types.codegen';
162
185
  }
186
+
163
187
  if (this.removedNamedImports.size > 0) {
164
- importedNames = importedNames!
165
- .split(',')
166
- .map((text) => text.trim())
167
- .filter((text) => !this.removedNamedImports.has(text))
168
- .join(', ');
188
+ importedNamesList = importedNamesList.filter((text) => !this.removedNamedImports.has(text));
169
189
  }
190
+ if (this.addedNamedImports) {
191
+ importedNamesList = Array.from(new Set([...importedNamesList, ...this.addedNamedImports]));
192
+ }
193
+ importedNames = importedNamesList.sort().join(', ');
170
194
  return `${importStatement}{ ${importedNames} } from '${packageName}';`;
171
195
  }
172
196
  }
173
197
 
198
+ class SimpleImportDeclaration implements IImportDeclaration {
199
+ private readonly packageName: string;
200
+
201
+ private namedImports = new Set<string>();
202
+
203
+ private defaultImport?: string;
204
+
205
+ constructor(packageName: string, defaultImport?: string) {
206
+ this.packageName = packageName;
207
+ this.defaultImport = defaultImport;
208
+ }
209
+
210
+ public addNamedImport(namedImport: string) {
211
+ this.namedImports.add(namedImport);
212
+ }
213
+
214
+ public removeNamedImport(namedImport: string) {
215
+ this.namedImports.delete(namedImport);
216
+ }
217
+
218
+ public getText() {
219
+ if (this.namedImports.size === 0 && !this.defaultImport) {
220
+ return `import '${this.packageName}';`;
221
+ }
222
+ const importedNamesList = Array.from(this.namedImports)
223
+ .sort()
224
+ .map((name) => `type ${name}`);
225
+ const importedNames =
226
+ importedNamesList.length > 0 ? `{ ${importedNamesList.join(', ')} }` : null;
227
+ const defaultImport = this.defaultImport ? `${this.defaultImport}` : null;
228
+ return `import ${[defaultImport, importedNames].filter(Boolean).join(', ')} from '${this.packageName}';`;
229
+ }
230
+ }
231
+
174
232
  // handles type imports from platform/packages/forge/forge-ui/src/components/UIKit/types.ts
175
233
  const isSharedUIKit2TypesImport = (importDeclaration: ImportDeclaration) => {
176
234
  return (
@@ -502,6 +560,134 @@ const baseGenerateComponentPropTypeSourceCode = (
502
560
  });
503
561
  };
504
562
 
563
+ const registeredExternalTypes: Record<
564
+ string,
565
+ {
566
+ package: string;
567
+ defaultImport: string;
568
+ }
569
+ > = {
570
+ 'React.ReactNode': {
571
+ package: 'react',
572
+ defaultImport: 'React',
573
+ },
574
+ };
575
+
576
+ // consolidate external types into import declarations
577
+ const consolidateImportDeclarations = (
578
+ importDeclarations: ImportDeclarationProxy[],
579
+ externalTypes: Set<string>,
580
+ ): IImportDeclaration[] => {
581
+ const declarations: IImportDeclaration[] = [...importDeclarations];
582
+ externalTypes.forEach((typeName) => {
583
+ const typePackage = registeredExternalTypes[typeName];
584
+ if (typePackage) {
585
+ const existingImport = importDeclarations.find(
586
+ (declaration) => declaration.getBasePackage() === typePackage.package,
587
+ );
588
+ if (existingImport) {
589
+ existingImport.addNamedImport(typeName);
590
+ } else {
591
+ const newImport = new SimpleImportDeclaration(
592
+ typePackage.package,
593
+ typePackage.defaultImport,
594
+ );
595
+ if (!typeName.startsWith(`${typePackage.defaultImport}.`)) {
596
+ newImport.addNamedImport(typeName);
597
+ }
598
+ declarations.push(newImport);
599
+ }
600
+ }
601
+ });
602
+ return declarations;
603
+ };
604
+
605
+ /**
606
+ * This function implements the new code generation logic for the component prop types.
607
+ * Instead of referencing to the ADS component prop types, it generates the prop types
608
+ * by serializing the ADS component prop types. Hence, it remove the dependency on the
609
+ * ADS components.
610
+ */
611
+ const generateComponentPropTypeSourceCodeWithSerializedType = (
612
+ componentPropSymbol: Symbol,
613
+ sourceFile: SourceFile,
614
+ customConsolidator?: CodeConsolidator,
615
+ ) => {
616
+ // 1) extract the prop types from the source file
617
+ const baseComponentPropSymbol = getBaseComponentSymbol(componentPropSymbol, sourceFile);
618
+
619
+ // 2) from the prop type code further extract other relevant types in the source file,
620
+ // and separate the platform props type declaration from the rest of the dependent types.
621
+ // as this will be used to generate the type code.
622
+ const [dependentTypeDeclarations, platformPropsTypeDeclaration] = getDependentTypeDeclarations(
623
+ baseComponentPropSymbol,
624
+ sourceFile,
625
+ ).reduce(
626
+ (agg, declarations) => {
627
+ if (declarations.getName().startsWith('_Platform')) {
628
+ // this is the platform props type declaration, we will use it to generate the type code.
629
+ // this pattern is used when we need to add custom overrides to the platform props type.
630
+ agg[1] = declarations;
631
+ } else if (declarations.getName().startsWith('Platform') && !agg[1]) {
632
+ // we only use this pattern if _Platform is not used. (this is for cases like Code and CodeBlock)
633
+ agg[1] = declarations;
634
+ } else {
635
+ agg[0].push(declarations);
636
+ }
637
+ return agg;
638
+ },
639
+ [[] as TypeAliasDeclaration[], null as TypeAliasDeclaration | null],
640
+ );
641
+
642
+ // 3) extract the import statement
643
+ const importDeclarations = extractImportDeclarations(
644
+ sourceFile,
645
+ baseComponentPropSymbol,
646
+ dependentTypeDeclarations,
647
+ );
648
+
649
+ // 4) resolve other types definition (not part of the ADS components)
650
+ const externalTypesCode = resolveExternalTypesCode(
651
+ sourceFile,
652
+ baseComponentPropSymbol,
653
+ dependentTypeDeclarations,
654
+ );
655
+
656
+ // 5) serialize the prop type for the @atlaskit component (e.g. PlatformButtonProps)
657
+ const [typeDefCode, usedExternalTypes] = serializeSymbolType(
658
+ baseComponentPropSymbol,
659
+ sourceFile.getProject().getTypeChecker(),
660
+ );
661
+
662
+ // 6) generate the source file
663
+ const importCode = consolidateImportDeclarations(importDeclarations, usedExternalTypes)
664
+ .map((declaration) => declaration.getText())
665
+ .join('\n');
666
+
667
+ const platformPropsTypeDeclarationName = platformPropsTypeDeclaration?.getName();
668
+ const dependentTypeCode = [
669
+ ...dependentTypeDeclarations.map((typeAlias) => typeAlias.getText()),
670
+ platformPropsTypeDeclarationName &&
671
+ `\n// Serialized type\ntype ${platformPropsTypeDeclarationName} = ${typeDefCode};`,
672
+ ]
673
+ .filter(Boolean)
674
+ .join('\n');
675
+
676
+ const componentPropCode = getComponentPropsTypeCode(baseComponentPropSymbol);
677
+
678
+ // 7) get component type code
679
+ const componentTypeCode = getComponentTypeCode(baseComponentPropSymbol, sourceFile);
680
+
681
+ return (customConsolidator ?? consolidateCodeSections)({
682
+ sourceFile,
683
+ importCode,
684
+ externalTypesCode,
685
+ dependentTypeCode,
686
+ componentPropCode,
687
+ componentTypeCode,
688
+ });
689
+ };
690
+
505
691
  const handleXCSSProp: CodeConsolidator = ({
506
692
  sourceFile,
507
693
  importCode,
@@ -553,11 +739,19 @@ const codeConsolidators: Record<string, CodeConsolidator> = {
553
739
  PressableProps: handleXCSSProp,
554
740
  };
555
741
 
742
+ const typeSerializableComponentPropSymbols = ['CodeProps', 'CodeBlockProps', 'BadgeProps'];
743
+
556
744
  const generateComponentPropTypeSourceCode = (
557
745
  componentPropSymbol: Symbol,
558
746
  sourceFile: SourceFile,
559
747
  ) => {
560
- return baseGenerateComponentPropTypeSourceCode(
748
+ const sourceCodeGenerator = typeSerializableComponentPropSymbols.includes(
749
+ componentPropSymbol.getName(),
750
+ )
751
+ ? generateComponentPropTypeSourceCodeWithSerializedType
752
+ : baseGenerateComponentPropTypeSourceCode;
753
+
754
+ return sourceCodeGenerator(
561
755
  componentPropSymbol,
562
756
  sourceFile,
563
757
  codeConsolidators[componentPropSymbol.getName()],
@@ -189,17 +189,24 @@ const generateSharedTypesFile = (componentOutputDir: string) => {
189
189
  fs.writeFileSync(typesFilePath, signedSourceCode);
190
190
  };
191
191
 
192
- const generateComponentPropTypes = (componentName?: string) => {
192
+ const generateComponentPropTypes = (componentNames?: string) => {
193
193
  const componentOutputDir = resolve(__dirname, '..', '..', 'src', 'components', '__generated__');
194
194
  const componentIndexSourceFile = forgeUIProject.addSourceFileAtPath(
195
195
  require.resolve('@atlassian/forge-ui/UIKit'),
196
196
  );
197
197
  try {
198
+ const componentNamesFilter = componentNames ? componentNames.split(',') : [];
198
199
  const componentPropTypeSymbols = componentIndexSourceFile
199
200
  .getExportSymbols()
200
- .filter((symbol) =>
201
- symbol.getName().endsWith(componentName ? `${componentName}Props` : 'Props'),
202
- )
201
+ .filter((symbol) => {
202
+ if (componentNamesFilter.length === 0) {
203
+ return symbol.getName().endsWith('Props');
204
+ }
205
+ const symbolName = symbol.getName();
206
+ return componentNamesFilter.some((componentName) => {
207
+ return symbolName === `${componentName}Props`;
208
+ });
209
+ })
203
210
  .sort((a, b) => a.getName().localeCompare(b.getName()));
204
211
 
205
212
  // generate share types file first
@@ -0,0 +1,212 @@
1
+ import {
2
+ type Symbol as TSSymbol,
3
+ type Node,
4
+ type TypeChecker,
5
+ type PropertySignature,
6
+ type Type as TSType,
7
+ SyntaxKind,
8
+ } from 'ts-morph';
9
+
10
+ export const serializeSymbolType = (
11
+ symbol: TSSymbol,
12
+ typeChecker: TypeChecker,
13
+ ): [string, Set<string>] => {
14
+ const declaration = symbol.getDeclarations()[0];
15
+
16
+ if (!declaration) {
17
+ throw new Error(`No declaration found for symbol: ${symbol.getName()}`);
18
+ }
19
+
20
+ const usedExternalTypes = new Set<string>();
21
+ if (declaration.getKind() === SyntaxKind.TypeAliasDeclaration) {
22
+ const typeAlias = declaration.asKindOrThrow(SyntaxKind.TypeAliasDeclaration);
23
+ const typeNode = typeAlias.getTypeNode();
24
+ if (typeNode && isCommonComponentPropType(typeNode)) {
25
+ const serializedType = flattenPickType(
26
+ typeNode.asKindOrThrow(SyntaxKind.TypeReference),
27
+ typeChecker,
28
+ usedExternalTypes,
29
+ );
30
+ return [serializedType, usedExternalTypes];
31
+ }
32
+ }
33
+
34
+ throw new Error(
35
+ `Unsupported declaration kind: ${declaration.getKindName()} for symbol: ${symbol.getName()}`,
36
+ );
37
+ };
38
+
39
+ /**
40
+ * Checks if a node is a common component prop type. e.g.
41
+ *
42
+ * export type BleedProps = Pick<
43
+ * PlatformBleedProps,
44
+ * 'children' | 'all' | 'inline' | 'block' | 'testId' | 'role'
45
+ * >;
46
+ */
47
+ const isCommonComponentPropType = (node: Node) => {
48
+ if (node.getKind() === SyntaxKind.TypeReference) {
49
+ const typeRef = node.asKindOrThrow(SyntaxKind.TypeReference);
50
+ const typeName = typeRef.getTypeName().getText();
51
+ return typeName === 'Pick';
52
+ }
53
+ return false;
54
+ };
55
+
56
+ // resolve single level type references (e.g. SupportedLanguages))
57
+ // type SupportedLanguages = 'text' | 'PHP' | 'Java' | 'CSharp' | ...;
58
+ const isSimpleTypeReferenceNode = (tsType: TSType): boolean => {
59
+ if (tsType.isUnion()) {
60
+ const unionTypes = tsType.getUnionTypes();
61
+ return unionTypes.every((t) => isBasicType(t));
62
+ }
63
+ return false;
64
+ };
65
+
66
+ const serializeSimpleTypeNode = (tsType: TSType): string => {
67
+ if (tsType.isStringLiteral()) {
68
+ return `'${tsType.getLiteralValue()}'`;
69
+ } else if (isBasicType(tsType)) {
70
+ return tsType.getText();
71
+ } else if (isSimpleTypeReferenceNode(tsType)) {
72
+ const unionTypes = tsType.getUnionTypes();
73
+ const serializedTypes = unionTypes.map((t) => serializeSimpleTypeNode(t));
74
+ return serializedTypes.join(' | ');
75
+ }
76
+ return tsType.getText();
77
+ };
78
+
79
+ const resolveNonNullableType = (propertySignature: PropertySignature): TSType => {
80
+ const hasOptionalHint = propertySignature.hasQuestionToken();
81
+ const type = propertySignature.getType();
82
+ if (!hasOptionalHint) {
83
+ return type;
84
+ }
85
+ // there is a case where `children?: ReactNode` using getNonNullableType() don't return the original ReactNode type
86
+ if (type.getText().split(' | ').includes('undefined')) {
87
+ return type.getNonNullableType();
88
+ }
89
+ return type;
90
+ };
91
+
92
+ const serializePropertySignatureCode = (propertySignature: PropertySignature) => {
93
+ const propertyName = propertySignature.getName();
94
+ const isOptional = propertySignature.hasQuestionToken();
95
+ const typeCode = serializeSimpleTypeNode(resolveNonNullableType(propertySignature));
96
+ return `${propertyName}${isOptional ? '?' : ''}: ${typeCode};`;
97
+ };
98
+
99
+ const flattenPickType = (
100
+ typeRef: Node,
101
+ typeChecker: TypeChecker,
102
+ usedExternalTypesOutput: Set<string>,
103
+ ): string => {
104
+ const typeArgs = typeRef.asKindOrThrow(SyntaxKind.TypeReference).getTypeArguments();
105
+
106
+ if (typeArgs.length < 2) {
107
+ return typeRef.getText(); // Fallback if not a valid Pick
108
+ }
109
+
110
+ const keysNode = typeArgs[1];
111
+
112
+ // Get the selected keys
113
+ const selectedKeys = extractUnionKeys(keysNode);
114
+
115
+ // Get the base type symbol
116
+ const properties = typeRef
117
+ .getType()
118
+ .getProperties()
119
+ .filter((prop) => selectedKeys.includes(prop.getName()));
120
+
121
+ if (properties.length === 0) {
122
+ return '{}'; // If no properties match, return 'any'
123
+ }
124
+
125
+ const serializedProperties = properties
126
+ .map((prop) => {
127
+ const propertySignature = prop.getDeclarations()[0] as PropertySignature | undefined;
128
+ if (!propertySignature) {
129
+ return null; // Skip if no declaration
130
+ }
131
+ const jsDoc = propertySignature.getJsDocs()?.[0]?.getText();
132
+ const typeCode = `\t${serializePropertySignatureCode(propertySignature)}`;
133
+ getUnresolvableTypes(propertySignature.getType()).forEach((typeName) => {
134
+ usedExternalTypesOutput.add(typeName);
135
+ });
136
+ return [jsDoc, typeCode].filter(Boolean).join('\n');
137
+ })
138
+ .filter(Boolean);
139
+
140
+ if (serializedProperties.length === 0) {
141
+ return '{}'; // If no properties are serialized, return empty object
142
+ }
143
+ return `{\n ${serializedProperties.join('\n ')}\n}`;
144
+ };
145
+
146
+ const getUnresolvableTypes = (tsType: TSType) => {
147
+ const unresolvableTypes = new Set<string>();
148
+ getUnresolvableTypesBase(tsType, unresolvableTypes);
149
+ return unresolvableTypes;
150
+ };
151
+
152
+ const getUnresolvableTypesBase = (tsType: TSType, unresolvableTypes: Set<string>) => {
153
+ if (isExternalType(tsType)) {
154
+ unresolvableTypes.add(tsType.getText());
155
+ } else if (tsType.isUnion()) {
156
+ const unionTypes = tsType.getUnionTypes();
157
+ unionTypes.forEach((type) => {
158
+ getUnresolvableTypesBase(type, unresolvableTypes);
159
+ });
160
+ } else if (!isBasicType(tsType)) {
161
+ unresolvableTypes.add(tsType.getText());
162
+ }
163
+ };
164
+
165
+ const isBasicType = (tsType: TSType): boolean => {
166
+ return (
167
+ tsType.isString() ||
168
+ tsType.isStringLiteral() ||
169
+ tsType.isNumber() ||
170
+ tsType.isNumberLiteral() ||
171
+ tsType.isBoolean() ||
172
+ tsType.isBooleanLiteral() ||
173
+ tsType.isNull() ||
174
+ tsType.isUndefined() ||
175
+ tsType.isAny() ||
176
+ tsType.isUnknown() ||
177
+ tsType.isNever()
178
+ );
179
+ };
180
+
181
+ const isExternalType = (tsType: TSType): boolean => {
182
+ const symbol = tsType.getSymbol() ?? tsType.getAliasSymbol();
183
+ if (!symbol) {
184
+ return false;
185
+ }
186
+
187
+ const declaration = symbol.getDeclarations()?.[0];
188
+ if (!declaration) {
189
+ return false;
190
+ }
191
+
192
+ const sourceFile = declaration.getSourceFile();
193
+ const filePath = sourceFile.getFilePath();
194
+
195
+ return filePath.includes('node_modules');
196
+ };
197
+
198
+ const extractUnionKeys = (keysNode: Node): string[] => {
199
+ if (keysNode.getKind() === SyntaxKind.UnionType) {
200
+ const unionType = keysNode.asKindOrThrow(SyntaxKind.UnionType);
201
+ return unionType.getTypeNodes().map((node) => {
202
+ if (node.getKind() === SyntaxKind.StringLiteral) {
203
+ return node.asKindOrThrow(SyntaxKind.StringLiteral).getLiteralValue();
204
+ }
205
+ return node.getText().replace(/['"]/g, '');
206
+ });
207
+ } else if (keysNode.getKind() === SyntaxKind.StringLiteral) {
208
+ return [keysNode.asKindOrThrow(SyntaxKind.StringLiteral).getLiteralValue()];
209
+ }
210
+
211
+ return [keysNode.getText().replace(/['"]/g, '')];
212
+ };
@@ -1,9 +1,26 @@
1
1
  import { generateComponentPropTypes } from './codegen';
2
2
 
3
+ const runTypeCheck = () => {
4
+ // execute yarn run check-types
5
+ const { execSync } = require('child_process');
6
+ try {
7
+ execSync('yarn run check-types', { stdio: 'inherit' });
8
+ // eslint-disable-next-line no-console
9
+ console.log('✅ 🚀 Type checks passed successfully for generated UIKit component types!');
10
+ } catch (error) {
11
+ // eslint-disable-next-line no-console
12
+ console.error('❌ Type checks failed:', error);
13
+ process.exit(1);
14
+ }
15
+ };
16
+
3
17
  if (process.argv.length < 3) {
4
18
  generateComponentPropTypes();
5
19
  } else {
6
20
  // e.g yarn workspace @atlaskit/forge-react-types codegen Button
21
+ // or yarn workspace @atlaskit/forge-react-types codegen Button,Code
7
22
  const componentPropTypeFilter = process.argv[2];
8
23
  generateComponentPropTypes(componentPropTypeFilter);
9
24
  }
25
+
26
+ runTypeCheck();
@@ -0,0 +1,20 @@
1
+ /* eslint-disable */
2
+ import {
3
+ type BadgeProps,
4
+ type CodeProps,
5
+ type CodeBlockProps,
6
+ } from '@atlassian/forge-ui/src/components/UIKit';
7
+ import { type BadgeProps as GeneratedBadgeProps } from '../src/components/__generated__/BadgeProps.codegen';
8
+ import { type CodeProps as GeneratedCodeProps } from '../src/components/__generated__/CodeProps.codegen';
9
+ import { type CodeBlockProps as GeneratedCodeBlockProps } from '../src/components/__generated__/CodeBlockProps.codegen';
10
+
11
+ const assertAssignable = <A, B extends A>() => {};
12
+
13
+ assertAssignable<GeneratedBadgeProps, BadgeProps>();
14
+ assertAssignable<BadgeProps, GeneratedBadgeProps>();
15
+
16
+ assertAssignable<GeneratedCodeProps, CodeProps>();
17
+ assertAssignable<CodeProps, GeneratedCodeProps>();
18
+
19
+ assertAssignable<GeneratedCodeBlockProps, CodeBlockProps>();
20
+ assertAssignable<CodeBlockProps, GeneratedCodeBlockProps>();
@@ -3,16 +3,14 @@
3
3
  *
4
4
  * Extract component prop types from UIKit 2 components - BadgeProps
5
5
  *
6
- * @codegen <<SignedSource::c3ed8f1b656c7e1c4a9aad0919de3f7d>>
6
+ * @codegen <<SignedSource::70958e2a60c7a0e1b3443db2d24003cc>>
7
7
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
8
8
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::89ad3341c1b8ef4b6fc93df162ac91d3>>
9
9
  */
10
10
  /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
11
11
 
12
12
  import React from 'react';
13
- import PlatformBadge from '@atlaskit/badge';
14
13
 
15
- type _PlatformBadgeProps = React.ComponentProps<typeof PlatformBadge>;
16
14
  export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
17
15
  /**
18
16
  * The value displayed within the badge. A badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
@@ -22,6 +20,30 @@ export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
22
20
  children?: _PlatformBadgeProps['children'];
23
21
  }
24
22
 
23
+ // Serialized type
24
+ type _PlatformBadgeProps = {
25
+ /**
26
+ * Affects the visual style of the badge.
27
+ */
28
+ appearance?: 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
29
+ /**
30
+ * The value displayed within the badge. A badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
31
+ *
32
+ * @type string | number
33
+ */
34
+ children?: React.ReactNode;
35
+ /**
36
+ * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
37
+ * This value should be greater than 0. If set to `false` the original value will be displayed regardless of
38
+ * whether it is larger than the default maximum value.
39
+ */
40
+ max?: number | false;
41
+ /**
42
+ * 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
43
+ */
44
+ testId?: string;
45
+ };
46
+
25
47
  export type BadgeProps = Pick<
26
48
  PlatformBadgeProps,
27
49
  'appearance' | 'children' | 'max' | 'testId'
@@ -3,16 +3,64 @@
3
3
  *
4
4
  * Extract component prop types from UIKit 2 components - CodeBlockProps
5
5
  *
6
- * @codegen <<SignedSource::8ab4ed1e38d2bd1f9ceafe4cbc20f97d>>
6
+ * @codegen <<SignedSource::65085e024d4b564b666c598596566f73>>
7
7
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
8
8
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/codeblock.partial.tsx <<SignedSource::88ed38fdfc47db0938e7801195a00403>>
9
9
  */
10
10
  /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
11
11
 
12
- import React from 'react';
13
- import { CodeBlock as PlatformCodeBlock } from '@atlaskit/code';
14
12
 
15
- type PlatformCodeBlockProps = React.ComponentProps<typeof PlatformCodeBlock>;
13
+ // Serialized type
14
+ type PlatformCodeBlockProps = {
15
+ /**
16
+ * The code to be formatted.
17
+ */
18
+ text: string;
19
+ /**
20
+ * A unique string that appears as a data attribute `data-testid` in the
21
+ * rendered code. Serves as a hook for automated tests.
22
+ */
23
+ testId?: string;
24
+ /**
25
+ * Sets whether to display code line numbers or not.
26
+ * @default true
27
+ */
28
+ showLineNumbers?: boolean;
29
+ /**
30
+ * Language reference designed to be populated from `SUPPORTED_LANGUAGES` in
31
+ * `design-system/code`. Run against language grammars from PrismJS (full list
32
+ * available at [PrismJS documentation](https://prismjs.com/#supported-languages)).
33
+ *
34
+ * When set to "text" will not perform highlighting. If unsupported language
35
+ * provided - code will be treated as "text" with no highlighting.
36
+ *
37
+ * @default 'text'
38
+ */
39
+ 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';
40
+ /**
41
+ * Comma delimited lines to highlight.
42
+ *
43
+ * Example uses:
44
+ * - To highlight one line `highlight="3"`
45
+ * - To highlight a group of lines `highlight="1-5"`
46
+ * - To highlight multiple groups `highlight="1-5,7,10,15-20"`
47
+ */
48
+ highlight?: string;
49
+ /**
50
+ * Screen reader text for the start of a highlighted line.
51
+ */
52
+ highlightedStartText?: string;
53
+ /**
54
+ * Screen reader text for the end of a highlighted line.
55
+ */
56
+ highlightedEndText?: string;
57
+ /**
58
+ * Sets whether long lines will create a horizontally scrolling container.
59
+ * When set to `true`, these lines will visually wrap instead.
60
+ * @default false
61
+ */
62
+ shouldWrapLongLines?: boolean;
63
+ };
16
64
 
17
65
  export type CodeBlockProps = Pick<
18
66
  PlatformCodeBlockProps,
@@ -3,16 +3,27 @@
3
3
  *
4
4
  * Extract component prop types from UIKit 2 components - CodeProps
5
5
  *
6
- * @codegen <<SignedSource::baf6b565e34d8df53db53b8855ec120d>>
6
+ * @codegen <<SignedSource::e915d32433441373892842df5cce597e>>
7
7
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
8
8
  * @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/code.partial.tsx <<SignedSource::6f210b052488fe7ece12d865706a551e>>
9
9
  */
10
10
  /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
11
11
 
12
12
  import React from 'react';
13
- import { Code as PlatformCode } from '@atlaskit/code';
14
13
 
15
- type PlatformCodeProps = React.ComponentProps<typeof PlatformCode>;
14
+
15
+ // Serialized type
16
+ type PlatformCodeProps = {
17
+ /**
18
+ * A unique string that appears as a data attribute `data-testid`
19
+ * in the rendered code. Serves as a hook for automated tests.
20
+ */
21
+ testId?: string;
22
+ /**
23
+ * Content to be rendered in the inline code block.
24
+ */
25
+ children?: React.ReactNode;
26
+ };
16
27
 
17
28
  export type CodeProps = Pick<
18
29
  PlatformCodeProps,