@atlaskit/forge-react-types 0.47.2 → 0.49.0
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 +18 -0
- package/dist/cjs/components/__generated__/BoxProps.codegen.js +25 -45
- package/dist/cjs/components/__generated__/PressableProps.codegen.js +24 -44
- package/dist/es2019/components/__generated__/BoxProps.codegen.js +25 -45
- package/dist/es2019/components/__generated__/PressableProps.codegen.js +24 -44
- package/dist/esm/components/__generated__/BoxProps.codegen.js +25 -45
- package/dist/esm/components/__generated__/PressableProps.codegen.js +24 -44
- package/dist/types/components/__generated__/BoxProps.codegen.d.ts +53 -887
- package/dist/types/components/__generated__/CodeBlockProps.codegen.d.ts +3 -3
- package/dist/types/components/__generated__/PressableProps.codegen.d.ts +30 -866
- package/dist/types-ts4.5/components/__generated__/BoxProps.codegen.d.ts +53 -887
- package/dist/types-ts4.5/components/__generated__/CodeBlockProps.codegen.d.ts +3 -3
- package/dist/types-ts4.5/components/__generated__/PressableProps.codegen.d.ts +30 -866
- package/package.json +11 -11
- package/scripts/codegen/codeGenerator.ts +161 -5
- package/scripts/codegen/componentPropTypes.ts +21 -9
- package/src/components/__generated__/BoxProps.codegen.tsx +57 -44
- package/src/components/__generated__/CodeBlockProps.codegen.tsx +3 -3
- package/src/components/__generated__/PressableProps.codegen.tsx +32 -21
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/forge-react-types",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.49.0",
|
|
4
4
|
"description": "Component types for Forge UI Kit React components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -25,26 +25,26 @@
|
|
|
25
25
|
"@atlaskit/comment": "^13.1.0",
|
|
26
26
|
"@atlaskit/datetime-picker": "^17.1.0",
|
|
27
27
|
"@atlaskit/dynamic-table": "^18.3.0",
|
|
28
|
-
"@atlaskit/form": "^14.
|
|
28
|
+
"@atlaskit/form": "^14.3.0",
|
|
29
29
|
"@atlaskit/inline-edit": "^15.3.0",
|
|
30
|
-
"@atlaskit/modal-dialog": "^14.
|
|
31
|
-
"@atlaskit/navigation-system": "^5.
|
|
30
|
+
"@atlaskit/modal-dialog": "^14.7.0",
|
|
31
|
+
"@atlaskit/navigation-system": "^5.9.0",
|
|
32
32
|
"@atlaskit/popup": "^4.6.0",
|
|
33
|
-
"@atlaskit/primitives": "^16.
|
|
33
|
+
"@atlaskit/primitives": "^16.4.0",
|
|
34
34
|
"@atlaskit/progress-bar": "^4.0.0",
|
|
35
35
|
"@atlaskit/progress-tracker": "^10.3.0",
|
|
36
36
|
"@atlaskit/radio": "^8.3.0",
|
|
37
37
|
"@atlaskit/section-message": "^8.9.0",
|
|
38
|
-
"@atlaskit/select": "^21.
|
|
38
|
+
"@atlaskit/select": "^21.4.0",
|
|
39
39
|
"@atlaskit/spinner": "^19.0.0",
|
|
40
40
|
"@atlaskit/tabs": "^18.2.0",
|
|
41
41
|
"@atlaskit/tag": "^14.1.0",
|
|
42
42
|
"@atlaskit/tag-group": "^12.0.0",
|
|
43
|
-
"@atlaskit/textarea": "^8.
|
|
44
|
-
"@atlaskit/textfield": "^8.
|
|
43
|
+
"@atlaskit/textarea": "^8.1.0",
|
|
44
|
+
"@atlaskit/textfield": "^8.1.0",
|
|
45
45
|
"@atlaskit/toggle": "^15.1.0",
|
|
46
|
-
"@atlaskit/tokens": "^8.
|
|
47
|
-
"@atlaskit/tooltip": "^20.
|
|
46
|
+
"@atlaskit/tokens": "^8.3.0",
|
|
47
|
+
"@atlaskit/tooltip": "^20.10.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0"
|
|
49
49
|
},
|
|
50
50
|
"peerDependencies": {
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
},
|
|
53
53
|
"devDependencies": {
|
|
54
54
|
"@atlassian/codegen": "^0.1.0",
|
|
55
|
-
"@atlassian/forge-ui": "^32.
|
|
55
|
+
"@atlassian/forge-ui": "^32.49.0",
|
|
56
56
|
"@types/node": "~22.17.1",
|
|
57
57
|
"lodash": "^4.17.21",
|
|
58
58
|
"react": "^18.2.0",
|
|
@@ -6,7 +6,9 @@ import {
|
|
|
6
6
|
type TypeAliasDeclaration,
|
|
7
7
|
type ImportDeclaration,
|
|
8
8
|
type TypeReferenceNode,
|
|
9
|
+
type VariableDeclaration,
|
|
9
10
|
SyntaxKind,
|
|
11
|
+
Node,
|
|
10
12
|
} from 'ts-morph';
|
|
11
13
|
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
12
14
|
import kebabCase from 'lodash/kebabCase';
|
|
@@ -193,6 +195,7 @@ class ImportDeclarationProxy implements IImportDeclaration {
|
|
|
193
195
|
.map((text) => text.trim());
|
|
194
196
|
|
|
195
197
|
if (isSharedUIKit2TypesImport(this.base)) {
|
|
198
|
+
// Map shared UIKit type imports to types.codegen
|
|
196
199
|
packageName = './types.codegen';
|
|
197
200
|
}
|
|
198
201
|
|
|
@@ -243,12 +246,11 @@ class SimpleImportDeclaration implements IImportDeclaration {
|
|
|
243
246
|
|
|
244
247
|
// handles type imports from platform/packages/forge/forge-ui/src/components/UIKit/types.ts
|
|
245
248
|
const isSharedUIKit2TypesImport = (importDeclaration: ImportDeclaration) => {
|
|
249
|
+
const fileName = importDeclaration.getModuleSpecifierValue().split('/').pop();
|
|
246
250
|
return (
|
|
247
251
|
importDeclaration.isTypeOnly() &&
|
|
248
|
-
// file is a relative import
|
|
249
252
|
importDeclaration.getModuleSpecifierValue().charAt(0) === '.' &&
|
|
250
|
-
|
|
251
|
-
importDeclaration.getModuleSpecifierValue().split('/').pop() === 'types'
|
|
253
|
+
fileName === 'types'
|
|
252
254
|
);
|
|
253
255
|
};
|
|
254
256
|
|
|
@@ -772,6 +774,143 @@ const generateComponentPropTypeSourceCodeWithSerializedType = (
|
|
|
772
774
|
});
|
|
773
775
|
};
|
|
774
776
|
|
|
777
|
+
/**
|
|
778
|
+
* Extracts variable declarations that are referenced in the given variable declaration node.
|
|
779
|
+
* This recursively finds all variable references and extracts their declarations.
|
|
780
|
+
*/
|
|
781
|
+
const extractReferencedVariables = (
|
|
782
|
+
sourceFile: SourceFile,
|
|
783
|
+
variableDeclaration: VariableDeclaration,
|
|
784
|
+
visited: Set<string> = new Set(),
|
|
785
|
+
): string[] => {
|
|
786
|
+
const variableDeclarations: string[] = [];
|
|
787
|
+
const identifiers = new Set<string>();
|
|
788
|
+
|
|
789
|
+
// Traverse the AST to find identifier references
|
|
790
|
+
const initializer = variableDeclaration.getInitializer();
|
|
791
|
+
if (initializer) {
|
|
792
|
+
initializer.forEachDescendant((node) => {
|
|
793
|
+
if (Node.isIdentifier(node)) {
|
|
794
|
+
// Only consider identifiers that are not part of property access
|
|
795
|
+
// (e.g., `obj.prop` - we want to skip `prop` but consider `obj` if it's a variable)
|
|
796
|
+
const parent = node.getParent();
|
|
797
|
+
const isPropertyAccess =
|
|
798
|
+
Node.isPropertyAccessExpression(parent) && parent.getNameNode() === node;
|
|
799
|
+
const isPropertyName = Node.isPropertyAssignment(parent) && parent.getNameNode() === node;
|
|
800
|
+
|
|
801
|
+
if (!isPropertyAccess && !isPropertyName) {
|
|
802
|
+
const identifier = node.getText();
|
|
803
|
+
// Skip keywords and already visited variables
|
|
804
|
+
if (
|
|
805
|
+
!visited.has(identifier) &&
|
|
806
|
+
![
|
|
807
|
+
'const',
|
|
808
|
+
'let',
|
|
809
|
+
'var',
|
|
810
|
+
'function',
|
|
811
|
+
'return',
|
|
812
|
+
'if',
|
|
813
|
+
'else',
|
|
814
|
+
'for',
|
|
815
|
+
'while',
|
|
816
|
+
'true',
|
|
817
|
+
'false',
|
|
818
|
+
'null',
|
|
819
|
+
'undefined',
|
|
820
|
+
'this',
|
|
821
|
+
'super',
|
|
822
|
+
'makeXCSSValidator',
|
|
823
|
+
].includes(identifier)
|
|
824
|
+
) {
|
|
825
|
+
identifiers.add(identifier);
|
|
826
|
+
}
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
});
|
|
830
|
+
}
|
|
831
|
+
|
|
832
|
+
// Try to find variable declarations for each identifier
|
|
833
|
+
for (const identifier of identifiers) {
|
|
834
|
+
try {
|
|
835
|
+
const referencedVar = sourceFile.getVariableDeclaration(identifier);
|
|
836
|
+
if (referencedVar && !visited.has(identifier)) {
|
|
837
|
+
visited.add(identifier);
|
|
838
|
+
const declarationText = referencedVar.getVariableStatement()?.getText();
|
|
839
|
+
if (declarationText) {
|
|
840
|
+
variableDeclarations.push(declarationText);
|
|
841
|
+
// Recursively extract variables referenced in this declaration
|
|
842
|
+
const nestedVariables = extractReferencedVariables(sourceFile, referencedVar, visited);
|
|
843
|
+
variableDeclarations.push(...nestedVariables);
|
|
844
|
+
}
|
|
845
|
+
}
|
|
846
|
+
} catch {
|
|
847
|
+
// Variable not found in this file, skip it
|
|
848
|
+
}
|
|
849
|
+
}
|
|
850
|
+
|
|
851
|
+
return variableDeclarations;
|
|
852
|
+
};
|
|
853
|
+
|
|
854
|
+
/**
|
|
855
|
+
* Extracts import declarations that are used by the given variable declarations.
|
|
856
|
+
*/
|
|
857
|
+
const extractImportsForVariables = (
|
|
858
|
+
sourceFile: SourceFile,
|
|
859
|
+
variableDeclarations: string[],
|
|
860
|
+
): string[] => {
|
|
861
|
+
const importDeclarations: string[] = [];
|
|
862
|
+
const allVariableCode = variableDeclarations.join('\n');
|
|
863
|
+
|
|
864
|
+
// Get all import declarations from the source file
|
|
865
|
+
const imports = sourceFile.getImportDeclarations();
|
|
866
|
+
|
|
867
|
+
for (const importDecl of imports) {
|
|
868
|
+
const moduleSpecifier = importDecl.getModuleSpecifierValue();
|
|
869
|
+
// Only extract imports from @atlaskit packages (not local imports)
|
|
870
|
+
if (moduleSpecifier.startsWith('@atlaskit/')) {
|
|
871
|
+
const namedImports = importDecl.getNamedImports();
|
|
872
|
+
const isTypeOnlyImport = importDecl.isTypeOnly();
|
|
873
|
+
|
|
874
|
+
// Check if any of the imported names are used in the variable declarations
|
|
875
|
+
const usedNamedImports: string[] = [];
|
|
876
|
+
const usedTypeImports: string[] = [];
|
|
877
|
+
|
|
878
|
+
for (const namedImport of namedImports) {
|
|
879
|
+
const importName = namedImport.getAliasNode()?.getText() ?? namedImport.getName();
|
|
880
|
+
if (isTokenUsed(importName, [allVariableCode])) {
|
|
881
|
+
// Check if this specific import specifier is type-only
|
|
882
|
+
// by checking if the import declaration text contains "type" before this import
|
|
883
|
+
const importText = importDecl.getText();
|
|
884
|
+
const importNamePattern = new RegExp(`\\btype\\s+${importName}\\b`);
|
|
885
|
+
const isTypeOnly = isTypeOnlyImport || importNamePattern.test(importText);
|
|
886
|
+
|
|
887
|
+
if (isTypeOnly) {
|
|
888
|
+
usedTypeImports.push(importName);
|
|
889
|
+
} else {
|
|
890
|
+
usedNamedImports.push(importName);
|
|
891
|
+
}
|
|
892
|
+
}
|
|
893
|
+
}
|
|
894
|
+
|
|
895
|
+
// If any imports are used, create an import statement
|
|
896
|
+
if (usedNamedImports.length > 0 || usedTypeImports.length > 0) {
|
|
897
|
+
const importParts: string[] = [];
|
|
898
|
+
if (usedTypeImports.length > 0) {
|
|
899
|
+
importParts.push(`type { ${usedTypeImports.join(', ')} }`);
|
|
900
|
+
}
|
|
901
|
+
if (usedNamedImports.length > 0) {
|
|
902
|
+
importParts.push(`{ ${usedNamedImports.join(', ')} }`);
|
|
903
|
+
}
|
|
904
|
+
if (importParts.length > 0) {
|
|
905
|
+
importDeclarations.push(`import ${importParts.join(', ')} from '${moduleSpecifier}';`);
|
|
906
|
+
}
|
|
907
|
+
}
|
|
908
|
+
}
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
return importDeclarations;
|
|
912
|
+
};
|
|
913
|
+
|
|
775
914
|
const handleXCSSProp: CodeConsolidator = ({
|
|
776
915
|
sourceFile,
|
|
777
916
|
importCode,
|
|
@@ -783,12 +922,25 @@ const handleXCSSProp: CodeConsolidator = ({
|
|
|
783
922
|
const xcssValidatorfile = sourceFile
|
|
784
923
|
.getProject()
|
|
785
924
|
.addSourceFileAtPath(require.resolve('@atlassian/forge-ui/utils/xcssValidator'));
|
|
786
|
-
const
|
|
925
|
+
const xcssValidatorDeclaration = xcssValidatorfile.getVariableDeclarationOrThrow('xcssValidator');
|
|
926
|
+
const xcssValidator = xcssValidatorDeclaration.getText();
|
|
787
927
|
const XCSSPropType = xcssValidatorfile
|
|
788
928
|
.getTypeAliasOrThrow('XCSSProp')
|
|
789
929
|
.setIsExported(false)
|
|
790
930
|
.getText();
|
|
791
931
|
|
|
932
|
+
// Extract variables referenced in xcssValidator
|
|
933
|
+
const referencedVariables = extractReferencedVariables(
|
|
934
|
+
xcssValidatorfile,
|
|
935
|
+
xcssValidatorDeclaration,
|
|
936
|
+
);
|
|
937
|
+
// Reverse to maintain dependency order (dependencies first)
|
|
938
|
+
const referencedVariablesCode = referencedVariables.reverse().join('\n');
|
|
939
|
+
|
|
940
|
+
// Extract imports used by the extracted variables
|
|
941
|
+
const variableImports = extractImportsForVariables(xcssValidatorfile, referencedVariables);
|
|
942
|
+
const variableImportsCode = variableImports.join('\n');
|
|
943
|
+
|
|
792
944
|
const utilsFile = sourceFile
|
|
793
945
|
.getProject()
|
|
794
946
|
.addSourceFileAtPath(require.resolve('@atlassian/forge-ui/utils/xcssValidate'));
|
|
@@ -798,9 +950,13 @@ const handleXCSSProp: CodeConsolidator = ({
|
|
|
798
950
|
}).compilerObject.outputFiles[0].text;
|
|
799
951
|
const xcssValidatorVariableDeclarationCode = [
|
|
800
952
|
xcssValidatorDeclarationCode,
|
|
953
|
+
variableImportsCode,
|
|
954
|
+
referencedVariablesCode,
|
|
801
955
|
`const ${xcssValidator};`,
|
|
802
956
|
XCSSPropType,
|
|
803
|
-
]
|
|
957
|
+
]
|
|
958
|
+
.filter((code) => !!code)
|
|
959
|
+
.join('\n');
|
|
804
960
|
|
|
805
961
|
return [
|
|
806
962
|
'/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */',
|
|
@@ -147,21 +147,33 @@ const updatePackageJsonWithADSComponentDependencies = (componentOutputDir: strin
|
|
|
147
147
|
const packageJsonPath = resolve(__dirname, '..', '..', 'package.json');
|
|
148
148
|
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
|
|
149
149
|
|
|
150
|
-
//
|
|
150
|
+
// Build updated dependencies: keep non-@atlaskit packages, and add/update @atlaskit packages
|
|
151
151
|
const updatedDependencies = Object.entries<string>(packageJson.dependencies)
|
|
152
152
|
.filter(([key]) => !key.startsWith('@atlaskit/'))
|
|
153
|
-
.concat(
|
|
154
|
-
Object.entries<string>(forgeUIPackageJson.dependencies).filter(([key]) =>
|
|
155
|
-
utilizedPackages.has(key),
|
|
156
|
-
),
|
|
157
|
-
)
|
|
158
|
-
.sort(([a], [b]) => a.localeCompare(b))
|
|
159
153
|
.reduce<Record<string, string>>((acc, [key, value]) => {
|
|
160
154
|
acc[key] = value;
|
|
161
155
|
return acc;
|
|
162
156
|
}, {});
|
|
163
157
|
|
|
164
|
-
|
|
158
|
+
// Add @atlaskit packages that are being used
|
|
159
|
+
// Prefer version from forgeUIPackageJson if available, otherwise keep existing version
|
|
160
|
+
for (const packageName of utilizedPackages) {
|
|
161
|
+
if (forgeUIPackageJson.dependencies?.[packageName]) {
|
|
162
|
+
// Use version from forgeUIPackageJson
|
|
163
|
+
updatedDependencies[packageName] = forgeUIPackageJson.dependencies[packageName];
|
|
164
|
+
} else if (packageJson.dependencies?.[packageName]) {
|
|
165
|
+
// Keep existing version if not in forgeUIPackageJson
|
|
166
|
+
updatedDependencies[packageName] = packageJson.dependencies[packageName];
|
|
167
|
+
}
|
|
168
|
+
// If package is not in either, we skip it (shouldn't happen if codegen is working correctly)
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// Sort dependencies alphabetically
|
|
172
|
+
const sortedDependencies = Object.entries(updatedDependencies).sort(([a], [b]) =>
|
|
173
|
+
a.localeCompare(b),
|
|
174
|
+
);
|
|
175
|
+
|
|
176
|
+
packageJson.dependencies = Object.fromEntries(sortedDependencies);
|
|
165
177
|
fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, '\t') + '\n');
|
|
166
178
|
};
|
|
167
179
|
/**
|
|
@@ -209,7 +221,7 @@ const generateComponentPropTypes = (componentNames?: string) => {
|
|
|
209
221
|
})
|
|
210
222
|
.sort((a, b) => a.getName().localeCompare(b.getName()));
|
|
211
223
|
|
|
212
|
-
// generate
|
|
224
|
+
// generate shared files first
|
|
213
225
|
generateSharedTypesFile(componentOutputDir);
|
|
214
226
|
|
|
215
227
|
generateComponentPropTypeSourceFiles(componentOutputDir, componentPropTypeSymbols);
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::2576658a875b738553fdb3ccfa41acd1>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/index.tsx <<SignedSource::6b375bb57ecf19919f9e1b65e899fd96>>
|
|
9
9
|
*/
|
|
10
10
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
11
|
|
|
12
12
|
import React from 'react';
|
|
13
|
-
import { Box as PlatformBox } from '@atlaskit/primitives';
|
|
13
|
+
import type { Box as PlatformBox } from '@atlaskit/primitives';
|
|
14
14
|
|
|
15
15
|
import type * as CSS from 'csstype';
|
|
16
16
|
import type { MediaQuery } from '@atlaskit/primitives';
|
|
@@ -67,6 +67,17 @@ declare const makeXCSSValidator: <U extends XCSSValidatorParam>(supportedXCSSPro
|
|
|
67
67
|
export { makeXCSSValidator };
|
|
68
68
|
export type { SafeCSSObject };
|
|
69
69
|
|
|
70
|
+
import type { BorderRadius } from '@atlaskit/primitives';
|
|
71
|
+
const borderRadiusTokens: BorderRadius[] = [
|
|
72
|
+
'radius.xsmall',
|
|
73
|
+
'radius.small',
|
|
74
|
+
'radius.medium',
|
|
75
|
+
'radius.large',
|
|
76
|
+
'radius.xlarge',
|
|
77
|
+
'radius.full',
|
|
78
|
+
'radius.tile',
|
|
79
|
+
];
|
|
80
|
+
const borderRadiusSupportedValues = [...borderRadiusTokens, 'border.radius'];
|
|
70
81
|
const xcssValidator = makeXCSSValidator({
|
|
71
82
|
// text related props
|
|
72
83
|
textAlign: {
|
|
@@ -150,26 +161,26 @@ const xcssValidator = makeXCSSValidator({
|
|
|
150
161
|
paddingTop: true,
|
|
151
162
|
|
|
152
163
|
// other box related props
|
|
153
|
-
borderRadius: { supportedValues:
|
|
154
|
-
borderBottomLeftRadius: { supportedValues:
|
|
155
|
-
borderBottomRightRadius: { supportedValues:
|
|
156
|
-
borderTopLeftRadius: { supportedValues:
|
|
157
|
-
borderTopRightRadius: { supportedValues:
|
|
158
|
-
borderEndEndRadius: { supportedValues:
|
|
159
|
-
borderEndStartRadius: { supportedValues:
|
|
160
|
-
borderStartEndRadius: { supportedValues:
|
|
161
|
-
borderStartStartRadius: { supportedValues:
|
|
162
|
-
borderWidth:
|
|
163
|
-
borderBlockWidth:
|
|
164
|
-
borderBlockEndWidth:
|
|
165
|
-
borderBlockStartWidth:
|
|
166
|
-
borderBottomWidth:
|
|
167
|
-
borderInlineWidth:
|
|
168
|
-
borderInlineEndWidth:
|
|
169
|
-
borderInlineStartWidth:
|
|
170
|
-
borderLeftWidth:
|
|
171
|
-
borderRightWidth:
|
|
172
|
-
borderTopWidth:
|
|
164
|
+
borderRadius: { supportedValues: borderRadiusSupportedValues },
|
|
165
|
+
borderBottomLeftRadius: { supportedValues: borderRadiusSupportedValues },
|
|
166
|
+
borderBottomRightRadius: { supportedValues: borderRadiusSupportedValues },
|
|
167
|
+
borderTopLeftRadius: { supportedValues: borderRadiusSupportedValues },
|
|
168
|
+
borderTopRightRadius: { supportedValues: borderRadiusSupportedValues },
|
|
169
|
+
borderEndEndRadius: { supportedValues: borderRadiusSupportedValues },
|
|
170
|
+
borderEndStartRadius: { supportedValues: borderRadiusSupportedValues },
|
|
171
|
+
borderStartEndRadius: { supportedValues: borderRadiusSupportedValues },
|
|
172
|
+
borderStartStartRadius: { supportedValues: borderRadiusSupportedValues },
|
|
173
|
+
borderWidth: true,
|
|
174
|
+
borderBlockWidth: true,
|
|
175
|
+
borderBlockEndWidth: true,
|
|
176
|
+
borderBlockStartWidth: true,
|
|
177
|
+
borderBottomWidth: true,
|
|
178
|
+
borderInlineWidth: true,
|
|
179
|
+
borderInlineEndWidth: true,
|
|
180
|
+
borderInlineStartWidth: true,
|
|
181
|
+
borderLeftWidth: true,
|
|
182
|
+
borderRightWidth: true,
|
|
183
|
+
borderTopWidth: true,
|
|
173
184
|
|
|
174
185
|
// other props not in tokens based props
|
|
175
186
|
borderTopStyle: {
|
|
@@ -196,6 +207,22 @@ type XCSSProp = ReturnType<typeof xcssValidator>;
|
|
|
196
207
|
type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
|
|
197
208
|
|
|
198
209
|
export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
210
|
+
/**
|
|
211
|
+
* A token alias for background color. See: [Design tokens](https://atlassian.design/components/tokens/all-tokens)
|
|
212
|
+
* for a list of available colors.
|
|
213
|
+
*
|
|
214
|
+
* When the background color is set to a surface token, the current surface CSS variable
|
|
215
|
+
* will also be set to this value in the `Box` styles.
|
|
216
|
+
*
|
|
217
|
+
* @type [Background color tokens](https://atlassian.design/components/tokens/all-tokens#color-background)
|
|
218
|
+
*/
|
|
219
|
+
backgroundColor?: PlatformBoxProps['backgroundColor'];
|
|
220
|
+
|
|
221
|
+
/**
|
|
222
|
+
* @type ForgeComponent
|
|
223
|
+
*/
|
|
224
|
+
children?: PlatformBoxProps['children'];
|
|
225
|
+
|
|
199
226
|
/**
|
|
200
227
|
* A shorthand for `paddingBlock` and `paddingInline` together.
|
|
201
228
|
*
|
|
@@ -211,18 +238,18 @@ export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
|
211
238
|
paddingBlock?: PlatformBoxProps['paddingBlock'];
|
|
212
239
|
|
|
213
240
|
/**
|
|
214
|
-
* The logical block
|
|
241
|
+
* The logical block end padding of an element.
|
|
215
242
|
*
|
|
216
243
|
* @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
|
|
217
244
|
*/
|
|
218
|
-
|
|
245
|
+
paddingBlockEnd?: PlatformBoxProps['paddingBlockEnd'];
|
|
219
246
|
|
|
220
247
|
/**
|
|
221
|
-
* The logical block
|
|
248
|
+
* The logical block start padding of an element.
|
|
222
249
|
*
|
|
223
250
|
* @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
|
|
224
251
|
*/
|
|
225
|
-
|
|
252
|
+
paddingBlockStart?: PlatformBoxProps['paddingBlockStart'];
|
|
226
253
|
|
|
227
254
|
/**
|
|
228
255
|
* The logical inline start and end padding of an element.
|
|
@@ -246,15 +273,11 @@ export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
|
246
273
|
paddingInlineStart?: PlatformBoxProps['paddingInlineStart'];
|
|
247
274
|
|
|
248
275
|
/**
|
|
249
|
-
*
|
|
250
|
-
* for a list of available colors.
|
|
276
|
+
* Accessible role.
|
|
251
277
|
*
|
|
252
|
-
*
|
|
253
|
-
* will also be set to this value in the `Box` styles.
|
|
254
|
-
*
|
|
255
|
-
* @type [Background color tokens](https://atlassian.design/components/tokens/all-tokens#color-background)
|
|
278
|
+
* @type string
|
|
256
279
|
*/
|
|
257
|
-
|
|
280
|
+
role?: PlatformBoxProps['role'];
|
|
258
281
|
|
|
259
282
|
/**
|
|
260
283
|
* Apply a subset of permitted styles, powered by Atlassian Design System tokens.
|
|
@@ -263,16 +286,6 @@ export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
|
263
286
|
* @type XCSSProp
|
|
264
287
|
*/
|
|
265
288
|
xcss?: XCSSProp;
|
|
266
|
-
|
|
267
|
-
/**
|
|
268
|
-
* @type string
|
|
269
|
-
*/
|
|
270
|
-
role?: PlatformBoxProps['role'];
|
|
271
|
-
|
|
272
|
-
/**
|
|
273
|
-
* @type ForgeComponent
|
|
274
|
-
*/
|
|
275
|
-
children?: PlatformBoxProps['children'];
|
|
276
289
|
};
|
|
277
290
|
|
|
278
291
|
/**
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - CodeBlockProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::6c26b81b83c693ac6c0552fd53179c16>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/codeblock.partial.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/code/__generated__/codeblock.partial.tsx <<SignedSource::27a16c7d91cb7ca0b0cdaa2eb9314633>>
|
|
9
9
|
*/
|
|
10
10
|
/* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
|
|
11
11
|
|
|
@@ -37,7 +37,7 @@ type PlatformCodeBlockProps = {
|
|
|
37
37
|
*
|
|
38
38
|
* @default 'text'
|
|
39
39
|
*/
|
|
40
|
-
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' | 'TOML' | 'toml' | 'Handlebars' | 'handlebars' | 'mustache' | 'Gherkin' | 'gherkin' | 'cucumber' | 'ABAP' | 'abap';
|
|
40
|
+
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' | 'TOML' | 'toml' | 'Handlebars' | 'handlebars' | 'mustache' | 'Gherkin' | 'gherkin' | 'cucumber' | 'ABAP' | 'abap' | 'Markdown' | 'markdown';
|
|
41
41
|
/**
|
|
42
42
|
* Comma delimited lines to highlight.
|
|
43
43
|
*
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - PressableProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::7158030e15c00ca33456e783cffd4db2>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
8
|
* @codegenDependency ../../../../forge-ui/src/components/UIKit/pressable/index.tsx <<SignedSource::e23b1db22ac327f82c64213c36751b27>>
|
|
9
9
|
*/
|
|
@@ -67,6 +67,17 @@ declare const makeXCSSValidator: <U extends XCSSValidatorParam>(supportedXCSSPro
|
|
|
67
67
|
export { makeXCSSValidator };
|
|
68
68
|
export type { SafeCSSObject };
|
|
69
69
|
|
|
70
|
+
import type { BorderRadius } from '@atlaskit/primitives';
|
|
71
|
+
const borderRadiusTokens: BorderRadius[] = [
|
|
72
|
+
'radius.xsmall',
|
|
73
|
+
'radius.small',
|
|
74
|
+
'radius.medium',
|
|
75
|
+
'radius.large',
|
|
76
|
+
'radius.xlarge',
|
|
77
|
+
'radius.full',
|
|
78
|
+
'radius.tile',
|
|
79
|
+
];
|
|
80
|
+
const borderRadiusSupportedValues = [...borderRadiusTokens, 'border.radius'];
|
|
70
81
|
const xcssValidator = makeXCSSValidator({
|
|
71
82
|
// text related props
|
|
72
83
|
textAlign: {
|
|
@@ -150,26 +161,26 @@ const xcssValidator = makeXCSSValidator({
|
|
|
150
161
|
paddingTop: true,
|
|
151
162
|
|
|
152
163
|
// other box related props
|
|
153
|
-
borderRadius: { supportedValues:
|
|
154
|
-
borderBottomLeftRadius: { supportedValues:
|
|
155
|
-
borderBottomRightRadius: { supportedValues:
|
|
156
|
-
borderTopLeftRadius: { supportedValues:
|
|
157
|
-
borderTopRightRadius: { supportedValues:
|
|
158
|
-
borderEndEndRadius: { supportedValues:
|
|
159
|
-
borderEndStartRadius: { supportedValues:
|
|
160
|
-
borderStartEndRadius: { supportedValues:
|
|
161
|
-
borderStartStartRadius: { supportedValues:
|
|
162
|
-
borderWidth:
|
|
163
|
-
borderBlockWidth:
|
|
164
|
-
borderBlockEndWidth:
|
|
165
|
-
borderBlockStartWidth:
|
|
166
|
-
borderBottomWidth:
|
|
167
|
-
borderInlineWidth:
|
|
168
|
-
borderInlineEndWidth:
|
|
169
|
-
borderInlineStartWidth:
|
|
170
|
-
borderLeftWidth:
|
|
171
|
-
borderRightWidth:
|
|
172
|
-
borderTopWidth:
|
|
164
|
+
borderRadius: { supportedValues: borderRadiusSupportedValues },
|
|
165
|
+
borderBottomLeftRadius: { supportedValues: borderRadiusSupportedValues },
|
|
166
|
+
borderBottomRightRadius: { supportedValues: borderRadiusSupportedValues },
|
|
167
|
+
borderTopLeftRadius: { supportedValues: borderRadiusSupportedValues },
|
|
168
|
+
borderTopRightRadius: { supportedValues: borderRadiusSupportedValues },
|
|
169
|
+
borderEndEndRadius: { supportedValues: borderRadiusSupportedValues },
|
|
170
|
+
borderEndStartRadius: { supportedValues: borderRadiusSupportedValues },
|
|
171
|
+
borderStartEndRadius: { supportedValues: borderRadiusSupportedValues },
|
|
172
|
+
borderStartStartRadius: { supportedValues: borderRadiusSupportedValues },
|
|
173
|
+
borderWidth: true,
|
|
174
|
+
borderBlockWidth: true,
|
|
175
|
+
borderBlockEndWidth: true,
|
|
176
|
+
borderBlockStartWidth: true,
|
|
177
|
+
borderBottomWidth: true,
|
|
178
|
+
borderInlineWidth: true,
|
|
179
|
+
borderInlineEndWidth: true,
|
|
180
|
+
borderInlineStartWidth: true,
|
|
181
|
+
borderLeftWidth: true,
|
|
182
|
+
borderRightWidth: true,
|
|
183
|
+
borderTopWidth: true,
|
|
173
184
|
|
|
174
185
|
// other props not in tokens based props
|
|
175
186
|
borderTopStyle: {
|