@cdx-ui/components 0.0.1-beta.4 → 0.0.1-beta.40
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/README.md +18 -11
- package/lib/commonjs/components/Avatar/index.js +1 -1
- package/lib/commonjs/components/Avatar/styles.js +36 -29
- package/lib/commonjs/components/Avatar/styles.js.map +1 -1
- package/lib/commonjs/components/Button/styles.js +2 -2
- package/lib/commonjs/components/Button/styles.js.map +1 -1
- package/lib/commonjs/components/CLAUDE.md +90 -0
- package/lib/commonjs/components/Card/index.js +22 -4
- package/lib/commonjs/components/Card/index.js.map +1 -1
- package/lib/commonjs/components/Card/styles.js +27 -5
- package/lib/commonjs/components/Card/styles.js.map +1 -1
- package/lib/commonjs/components/Checkbox/index.js +5 -29
- package/lib/commonjs/components/Checkbox/index.js.map +1 -1
- package/lib/commonjs/components/Checkbox/styles.js +39 -47
- package/lib/commonjs/components/Checkbox/styles.js.map +1 -1
- package/lib/commonjs/components/Chip/index.js +78 -9
- package/lib/commonjs/components/Chip/index.js.map +1 -1
- package/lib/commonjs/components/Chip/styles.js +207 -21
- package/lib/commonjs/components/Chip/styles.js.map +1 -1
- package/lib/commonjs/components/Field/index.js +8 -2
- package/lib/commonjs/components/Field/index.js.map +1 -1
- package/lib/commonjs/components/Field/styles.js +4 -4
- package/lib/commonjs/components/Field/styles.js.map +1 -1
- package/lib/commonjs/components/Heading/styles.js +1 -1
- package/lib/commonjs/components/Heading/styles.js.map +1 -1
- package/lib/commonjs/components/Icon/index.js +1 -2
- package/lib/commonjs/components/Icon/index.js.map +1 -1
- package/lib/commonjs/components/IconButton/index.js +6 -1
- package/lib/commonjs/components/IconButton/index.js.map +1 -1
- package/lib/commonjs/components/IconButton/styles.js +135 -10
- package/lib/commonjs/components/IconButton/styles.js.map +1 -1
- package/lib/commonjs/components/Input/styles.js +7 -6
- package/lib/commonjs/components/Input/styles.js.map +1 -1
- package/lib/commonjs/components/ListItem/index.js +283 -0
- package/lib/commonjs/components/ListItem/index.js.map +1 -0
- package/lib/commonjs/components/ListItem/styles.js +130 -0
- package/lib/commonjs/components/ListItem/styles.js.map +1 -0
- package/lib/commonjs/components/ProgressSegmented/index.js +22 -10
- package/lib/commonjs/components/ProgressSegmented/index.js.map +1 -1
- package/lib/commonjs/components/Radio/index.js +167 -0
- package/lib/commonjs/components/Radio/index.js.map +1 -0
- package/lib/commonjs/components/Radio/styles.js +31 -0
- package/lib/commonjs/components/Radio/styles.js.map +1 -0
- package/lib/commonjs/components/Text/styles.js +2 -2
- package/lib/commonjs/components/Text/styles.js.map +1 -1
- package/lib/commonjs/components/Tile/index.js +251 -0
- package/lib/commonjs/components/Tile/index.js.map +1 -0
- package/lib/commonjs/components/Tile/styles.js +52 -0
- package/lib/commonjs/components/Tile/styles.js.map +1 -0
- package/lib/commonjs/components/index.js +36 -0
- package/lib/commonjs/components/index.js.map +1 -1
- package/lib/commonjs/figma/Avatar.figma.js +54 -0
- package/lib/commonjs/figma/Avatar.figma.js.map +1 -0
- package/lib/commonjs/figma/Button.figma.js +28 -11
- package/lib/commonjs/figma/Button.figma.js.map +1 -1
- package/lib/commonjs/figma/CLAUDE.md +30 -0
- package/lib/commonjs/figma/Card.Header.figma.js +28 -0
- package/lib/commonjs/figma/Card.Header.figma.js.map +1 -0
- package/lib/commonjs/figma/Card.figma.js +42 -0
- package/lib/commonjs/figma/Card.figma.js.map +1 -0
- package/lib/commonjs/figma/Checkbox.figma.js +55 -0
- package/lib/commonjs/figma/Checkbox.figma.js.map +1 -0
- package/lib/commonjs/figma/Chip.figma.js +68 -0
- package/lib/commonjs/figma/Chip.figma.js.map +1 -0
- package/lib/commonjs/figma/Field.Input.figma.js +57 -0
- package/lib/commonjs/figma/Field.Input.figma.js.map +1 -0
- package/lib/commonjs/figma/Field.Select.figma.js +57 -0
- package/lib/commonjs/figma/Field.Select.figma.js.map +1 -0
- package/lib/commonjs/figma/Heading.figma.js +30 -0
- package/lib/commonjs/figma/Heading.figma.js.map +1 -0
- package/lib/commonjs/figma/Icon.figma.js +20 -0
- package/lib/commonjs/figma/Icon.figma.js.map +1 -0
- package/lib/commonjs/figma/IconButton.figma.js +47 -0
- package/lib/commonjs/figma/IconButton.figma.js.map +1 -0
- package/lib/commonjs/figma/Input.figma.js +52 -0
- package/lib/commonjs/figma/Input.figma.js.map +1 -0
- package/lib/commonjs/figma/ProgressSegmented.figma.js +39 -0
- package/lib/commonjs/figma/ProgressSegmented.figma.js.map +1 -0
- package/lib/commonjs/figma/Radio.figma.js +38 -0
- package/lib/commonjs/figma/Radio.figma.js.map +1 -0
- package/lib/commonjs/figma/Select.figma.js +53 -0
- package/lib/commonjs/figma/Select.figma.js.map +1 -0
- package/lib/commonjs/figma/Text.figma.js +29 -0
- package/lib/commonjs/figma/Text.figma.js.map +1 -0
- package/lib/commonjs/figma/icons.figma.batch.js +27 -0
- package/lib/commonjs/figma/icons.figma.batch.js.map +1 -0
- package/lib/commonjs/figma/icons.figma.batch.json +17705 -0
- package/lib/commonjs/styles/primitives.js +42 -5
- package/lib/commonjs/styles/primitives.js.map +1 -1
- package/lib/module/components/Avatar/index.js +1 -1
- package/lib/module/components/Avatar/styles.js +36 -29
- package/lib/module/components/Avatar/styles.js.map +1 -1
- package/lib/module/components/Button/styles.js +2 -2
- package/lib/module/components/Button/styles.js.map +1 -1
- package/lib/module/components/CLAUDE.md +90 -0
- package/lib/module/components/Card/index.js +23 -4
- package/lib/module/components/Card/index.js.map +1 -1
- package/lib/module/components/Card/styles.js +27 -5
- package/lib/module/components/Card/styles.js.map +1 -1
- package/lib/module/components/Checkbox/index.js +6 -30
- package/lib/module/components/Checkbox/index.js.map +1 -1
- package/lib/module/components/Checkbox/styles.js +40 -48
- package/lib/module/components/Checkbox/styles.js.map +1 -1
- package/lib/module/components/Chip/index.js +82 -13
- package/lib/module/components/Chip/index.js.map +1 -1
- package/lib/module/components/Chip/styles.js +206 -20
- package/lib/module/components/Chip/styles.js.map +1 -1
- package/lib/module/components/Field/index.js +9 -3
- package/lib/module/components/Field/index.js.map +1 -1
- package/lib/module/components/Field/styles.js +4 -4
- package/lib/module/components/Field/styles.js.map +1 -1
- package/lib/module/components/Heading/styles.js +1 -1
- package/lib/module/components/Heading/styles.js.map +1 -1
- package/lib/module/components/Icon/index.js +1 -2
- package/lib/module/components/Icon/index.js.map +1 -1
- package/lib/module/components/IconButton/index.js +6 -1
- package/lib/module/components/IconButton/index.js.map +1 -1
- package/lib/module/components/IconButton/styles.js +135 -10
- package/lib/module/components/IconButton/styles.js.map +1 -1
- package/lib/module/components/Input/styles.js +7 -6
- package/lib/module/components/Input/styles.js.map +1 -1
- package/lib/module/components/ListItem/index.js +226 -0
- package/lib/module/components/ListItem/index.js.map +1 -0
- package/lib/module/components/ListItem/styles.js +127 -0
- package/lib/module/components/ListItem/styles.js.map +1 -0
- package/lib/module/components/ProgressSegmented/index.js +23 -11
- package/lib/module/components/ProgressSegmented/index.js.map +1 -1
- package/lib/module/components/Radio/index.js +164 -0
- package/lib/module/components/Radio/index.js.map +1 -0
- package/lib/module/components/Radio/styles.js +27 -0
- package/lib/module/components/Radio/styles.js.map +1 -0
- package/lib/module/components/Text/styles.js +2 -2
- package/lib/module/components/Text/styles.js.map +1 -1
- package/lib/module/components/Tile/index.js +243 -0
- package/lib/module/components/Tile/index.js.map +1 -0
- package/lib/module/components/Tile/styles.js +48 -0
- package/lib/module/components/Tile/styles.js.map +1 -0
- package/lib/module/components/index.js +3 -0
- package/lib/module/components/index.js.map +1 -1
- package/lib/module/figma/Avatar.figma.js +48 -0
- package/lib/module/figma/Avatar.figma.js.map +1 -0
- package/lib/module/figma/Button.figma.js +28 -11
- package/lib/module/figma/Button.figma.js.map +1 -1
- package/lib/module/figma/CLAUDE.md +30 -0
- package/lib/module/figma/Card.Header.figma.js +22 -0
- package/lib/module/figma/Card.Header.figma.js.map +1 -0
- package/lib/module/figma/Card.figma.js +36 -0
- package/lib/module/figma/Card.figma.js.map +1 -0
- package/lib/module/figma/Checkbox.figma.js +49 -0
- package/lib/module/figma/Checkbox.figma.js.map +1 -0
- package/lib/module/figma/Chip.figma.js +62 -0
- package/lib/module/figma/Chip.figma.js.map +1 -0
- package/lib/module/figma/Field.Input.figma.js +51 -0
- package/lib/module/figma/Field.Input.figma.js.map +1 -0
- package/lib/module/figma/Field.Select.figma.js +51 -0
- package/lib/module/figma/Field.Select.figma.js.map +1 -0
- package/lib/module/figma/Heading.figma.js +24 -0
- package/lib/module/figma/Heading.figma.js.map +1 -0
- package/lib/module/figma/Icon.figma.js +14 -0
- package/lib/module/figma/Icon.figma.js.map +1 -0
- package/lib/module/figma/IconButton.figma.js +41 -0
- package/lib/module/figma/IconButton.figma.js.map +1 -0
- package/lib/module/figma/Input.figma.js +46 -0
- package/lib/module/figma/Input.figma.js.map +1 -0
- package/lib/module/figma/ProgressSegmented.figma.js +33 -0
- package/lib/module/figma/ProgressSegmented.figma.js.map +1 -0
- package/lib/module/figma/Radio.figma.js +32 -0
- package/lib/module/figma/Radio.figma.js.map +1 -0
- package/lib/module/figma/Select.figma.js +47 -0
- package/lib/module/figma/Select.figma.js.map +1 -0
- package/lib/module/figma/Text.figma.js +23 -0
- package/lib/module/figma/Text.figma.js.map +1 -0
- package/lib/module/figma/icons.figma.batch.js +22 -0
- package/lib/module/figma/icons.figma.batch.js.map +1 -0
- package/lib/module/figma/icons.figma.batch.json +17705 -0
- package/lib/module/styles/primitives.js +42 -5
- package/lib/module/styles/primitives.js.map +1 -1
- package/lib/typescript/components/Avatar/styles.d.ts +4 -4
- package/lib/typescript/components/Avatar/styles.d.ts.map +1 -1
- package/lib/typescript/components/Card/index.d.ts +4 -3
- package/lib/typescript/components/Card/index.d.ts.map +1 -1
- package/lib/typescript/components/Card/styles.d.ts +13 -3
- package/lib/typescript/components/Card/styles.d.ts.map +1 -1
- package/lib/typescript/components/Checkbox/index.d.ts +1 -2
- package/lib/typescript/components/Checkbox/index.d.ts.map +1 -1
- package/lib/typescript/components/Checkbox/styles.d.ts +4 -14
- package/lib/typescript/components/Checkbox/styles.d.ts.map +1 -1
- package/lib/typescript/components/Chip/index.d.ts +19 -6
- package/lib/typescript/components/Chip/index.d.ts.map +1 -1
- package/lib/typescript/components/Chip/styles.d.ts +13 -4
- package/lib/typescript/components/Chip/styles.d.ts.map +1 -1
- package/lib/typescript/components/Field/FieldLabel.web.d.ts +2 -2
- package/lib/typescript/components/Field/FieldLabel.web.d.ts.map +1 -1
- package/lib/typescript/components/Field/index.d.ts.map +1 -1
- package/lib/typescript/components/Field/styles.d.ts.map +1 -1
- package/lib/typescript/components/Heading/styles.d.ts +1 -1
- package/lib/typescript/components/Icon/index.d.ts.map +1 -1
- package/lib/typescript/components/IconButton/index.d.ts.map +1 -1
- package/lib/typescript/components/IconButton/styles.d.ts +6 -2
- package/lib/typescript/components/IconButton/styles.d.ts.map +1 -1
- package/lib/typescript/components/Input/styles.d.ts.map +1 -1
- package/lib/typescript/components/ListItem/index.d.ts +49 -0
- package/lib/typescript/components/ListItem/index.d.ts.map +1 -0
- package/lib/typescript/components/ListItem/styles.d.ts +30 -0
- package/lib/typescript/components/ListItem/styles.d.ts.map +1 -0
- package/lib/typescript/components/ProgressSegmented/index.d.ts +14 -3
- package/lib/typescript/components/ProgressSegmented/index.d.ts.map +1 -1
- package/lib/typescript/components/Radio/index.d.ts +40 -0
- package/lib/typescript/components/Radio/index.d.ts.map +1 -0
- package/lib/typescript/components/Radio/styles.d.ts +8 -0
- package/lib/typescript/components/Radio/styles.d.ts.map +1 -0
- package/lib/typescript/components/Stack/styles.d.ts +2 -2
- package/lib/typescript/components/Text/styles.d.ts +1 -1
- package/lib/typescript/components/Tile/index.d.ts +70 -0
- package/lib/typescript/components/Tile/index.d.ts.map +1 -0
- package/lib/typescript/components/Tile/styles.d.ts +18 -0
- package/lib/typescript/components/Tile/styles.d.ts.map +1 -0
- package/lib/typescript/components/index.d.ts +3 -0
- package/lib/typescript/components/index.d.ts.map +1 -1
- package/lib/typescript/figma/Avatar.figma.d.ts +8 -0
- package/lib/typescript/figma/Avatar.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Button.figma.d.ts.map +1 -1
- package/lib/typescript/figma/Card.Header.figma.d.ts +8 -0
- package/lib/typescript/figma/Card.Header.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Card.figma.d.ts +8 -0
- package/lib/typescript/figma/Card.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Checkbox.figma.d.ts +8 -0
- package/lib/typescript/figma/Checkbox.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Chip.figma.d.ts +8 -0
- package/lib/typescript/figma/Chip.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Field.Input.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.Input.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Field.Select.figma.d.ts +8 -0
- package/lib/typescript/figma/Field.Select.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Heading.figma.d.ts +8 -0
- package/lib/typescript/figma/Heading.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Icon.figma.d.ts +8 -0
- package/lib/typescript/figma/Icon.figma.d.ts.map +1 -0
- package/lib/typescript/figma/IconButton.figma.d.ts +8 -0
- package/lib/typescript/figma/IconButton.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Input.figma.d.ts +8 -0
- package/lib/typescript/figma/Input.figma.d.ts.map +1 -0
- package/lib/typescript/figma/ProgressSegmented.figma.d.ts +8 -0
- package/lib/typescript/figma/ProgressSegmented.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Radio.figma.d.ts +8 -0
- package/lib/typescript/figma/Radio.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Select.figma.d.ts +8 -0
- package/lib/typescript/figma/Select.figma.d.ts.map +1 -0
- package/lib/typescript/figma/Text.figma.d.ts +8 -0
- package/lib/typescript/figma/Text.figma.d.ts.map +1 -0
- package/lib/typescript/figma/icons.figma.batch.d.ts +14 -0
- package/lib/typescript/figma/icons.figma.batch.d.ts.map +1 -0
- package/lib/typescript/styles/primitives.d.ts +38 -0
- package/lib/typescript/styles/primitives.d.ts.map +1 -1
- package/package.json +4 -4
- package/src/components/Avatar/index.tsx +1 -1
- package/src/components/Avatar/styles.ts +49 -34
- package/src/components/Button/styles.ts +2 -2
- package/src/components/CLAUDE.md +90 -0
- package/src/components/Card/index.tsx +41 -16
- package/src/components/Card/styles.ts +43 -23
- package/src/components/Checkbox/index.tsx +8 -19
- package/src/components/Checkbox/styles.ts +82 -86
- package/src/components/Chip/index.tsx +104 -27
- package/src/components/Chip/styles.ts +232 -18
- package/src/components/Field/FieldLabel.web.tsx +1 -1
- package/src/components/Field/index.tsx +10 -3
- package/src/components/Field/styles.ts +5 -4
- package/src/components/Heading/styles.ts +1 -1
- package/src/components/Icon/index.tsx +1 -2
- package/src/components/IconButton/index.tsx +3 -2
- package/src/components/IconButton/styles.ts +136 -10
- package/src/components/Input/styles.ts +14 -9
- package/src/components/ListItem/index.tsx +285 -0
- package/src/components/ListItem/styles.ts +153 -0
- package/src/components/ProgressSegmented/index.tsx +49 -14
- package/src/components/Radio/index.tsx +192 -0
- package/src/components/Radio/styles.ts +59 -0
- package/src/components/Text/styles.ts +2 -2
- package/src/components/Tile/index.tsx +296 -0
- package/src/components/Tile/styles.ts +82 -0
- package/src/components/index.ts +3 -0
- package/src/styles/primitives.ts +42 -5
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=119-72
|
|
4
4
|
// source=packages/components/src/components/Button/index.tsx
|
|
5
5
|
// component=Button
|
|
6
6
|
import figma from 'figma';
|
|
@@ -8,7 +8,7 @@ const instance = figma.selectedInstance;
|
|
|
8
8
|
|
|
9
9
|
// Variant rename: Figma uses "solid" but code uses "strong" for the filled/primary style.
|
|
10
10
|
// This divergence exists because "strong" better communicates visual weight in the code API
|
|
11
|
-
// while "solid" is the conventional Figma naming.
|
|
11
|
+
// while "solid" is the conventional Figma naming.
|
|
12
12
|
const variant = instance.getEnum('variant', {
|
|
13
13
|
solid: 'strong',
|
|
14
14
|
outline: 'outline',
|
|
@@ -22,26 +22,43 @@ const size = instance.getEnum('size', {
|
|
|
22
22
|
default: 'default',
|
|
23
23
|
small: 'small'
|
|
24
24
|
});
|
|
25
|
-
// Enum-as-boolean
|
|
26
|
-
//
|
|
27
|
-
// to undefined so the prop is omitted entirely from the generated snippet when not disabled.
|
|
25
|
+
// Enum-as-boolean: isDisabled is a VARIANT property in Figma (string values "true"/"false")
|
|
26
|
+
// rather than a true BOOLEAN. Map "false" to undefined so the prop is omitted when not disabled.
|
|
28
27
|
const isDisabled = instance.getEnum('isDisabled', {
|
|
29
28
|
true: true,
|
|
30
29
|
false: undefined
|
|
31
30
|
});
|
|
31
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
32
32
|
const showLeadingIcon = instance.getBoolean('Show Leading Icon?');
|
|
33
33
|
const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
|
|
34
|
-
|
|
35
|
-
|
|
34
|
+
|
|
35
|
+
// Icon slots: Prefer metadata.props.componentName exposed by icon Code Connect templates,
|
|
36
|
+
// which yields a clean identifier (e.g. "Check"). Fall back to executeTemplate().example
|
|
37
|
+
// (renders a placeholder pill when the icon lacks Code Connect).
|
|
38
|
+
const leadingIconResult = instance.getInstanceSwap('Leading Icon')?.executeTemplate();
|
|
39
|
+
const trailingIconResult = instance.getInstanceSwap('Trailing Icon')?.executeTemplate();
|
|
40
|
+
const leadingIconName = leadingIconResult?.metadata?.props?.componentName;
|
|
41
|
+
const trailingIconName = trailingIconResult?.metadata?.props?.componentName;
|
|
42
|
+
const leadingIconSnippet = leadingIconName ?? leadingIconResult?.example;
|
|
43
|
+
const trailingIconSnippet = trailingIconName ?? trailingIconResult?.example;
|
|
36
44
|
const label = instance.findText('Button.Label').textContent;
|
|
45
|
+
|
|
46
|
+
// Include icon imports when resolved via metadata.props (propagated from icon Code Connect)
|
|
47
|
+
const iconImports = [];
|
|
48
|
+
if (showLeadingIcon && leadingIconName) {
|
|
49
|
+
iconImports.push(`import { ${leadingIconName} } from '@cdx-ui/icons'`);
|
|
50
|
+
}
|
|
51
|
+
if (showTrailingIcon && trailingIconName) {
|
|
52
|
+
iconImports.push(`import { ${trailingIconName} } from '@cdx-ui/icons'`);
|
|
53
|
+
}
|
|
37
54
|
export default {
|
|
38
55
|
id: 'button',
|
|
39
|
-
imports: ["import { Button } from '@cdx-ui/components'"],
|
|
56
|
+
imports: ["import { Button } from '@cdx-ui/components'", ...iconImports],
|
|
40
57
|
example: figma.code`
|
|
41
|
-
<Button variant="${variant}" color="${color}" size="${size}"
|
|
42
|
-
${showLeadingIcon ?
|
|
58
|
+
<Button variant="${variant}" color="${color}" size="${size}"${isDisabledProp}>
|
|
59
|
+
${showLeadingIcon ? figma.code`<Button.Icon as={${leadingIconSnippet}} />` : null}
|
|
43
60
|
<Button.Label>${label}</Button.Label>
|
|
44
|
-
${showTrailingIcon ?
|
|
61
|
+
${showTrailingIcon ? figma.code`<Button.Icon as={${trailingIconSnippet}} />` : null}
|
|
45
62
|
</Button>`
|
|
46
63
|
};
|
|
47
64
|
//# sourceMappingURL=Button.figma.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","solid","outline","ghost","color","action","danger","size","default","small","isDisabled","true","false","undefined","showLeadingIcon","getBoolean","showTrailingIcon","
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","solid","outline","ghost","color","action","danger","size","default","small","isDisabled","true","false","undefined","isDisabledProp","helpers","react","renderProp","showLeadingIcon","getBoolean","showTrailingIcon","leadingIconResult","getInstanceSwap","executeTemplate","trailingIconResult","leadingIconName","metadata","props","componentName","trailingIconName","leadingIconSnippet","example","trailingIconSnippet","label","findText","textContent","iconImports","push","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Button.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA;AACA,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,KAAK,EAAE,QAAQ;EACfC,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGP,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCK,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGV,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCQ,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF;AACA;AACA,MAAMC,UAAU,GAAGb,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDW,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,cAAc,GAAGlB,KAAK,CAACmB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEP,UAAU,CAAC;AAE/E,MAAMQ,eAAe,GAAGrB,QAAQ,CAACsB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,gBAAgB,GAAGvB,QAAQ,CAACsB,UAAU,CAAC,qBAAqB,CAAC;;AAEnE;AACA;AACA;AACA,MAAME,iBAAiB,GAAGxB,QAAQ,CAACyB,eAAe,CAAC,cAAc,CAAC,EAAEC,eAAe,CAAC,CAAC;AACrF,MAAMC,kBAAkB,GAAG3B,QAAQ,CAACyB,eAAe,CAAC,eAAe,CAAC,EAAEC,eAAe,CAAC,CAAC;AAEvF,MAAME,eAAe,GAAGJ,iBAAiB,EAAEK,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AAC/F,MAAMC,gBAAgB,GAAGL,kBAAkB,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjG,MAAME,kBAAkB,GAAGL,eAAe,IAAIJ,iBAAiB,EAAEU,OAAO;AACxE,MAAMC,mBAAmB,GAAGH,gBAAgB,IAAIL,kBAAkB,EAAEO,OAAO;AAE3E,MAAME,KAAK,GAAIpC,QAAQ,CAACqC,QAAQ,CAAC,cAAc,CAAC,CAAgCC,WAAW;;AAE3F;AACA,MAAMC,WAAqB,GAAG,EAAE;AAChC,IAAIlB,eAAe,IAAIO,eAAe,EAAE;EACtCW,WAAW,CAACC,IAAI,CAAC,YAAYZ,eAAe,yBAAyB,CAAC;AACxE;AACA,IAAIL,gBAAgB,IAAIS,gBAAgB,EAAE;EACxCO,WAAW,CAACC,IAAI,CAAC,YAAYR,gBAAgB,yBAAyB,CAAC;AACzE;AAEA,eAAe;EACbS,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,EAAE,GAAGH,WAAW,CAAC;EACxEL,OAAO,EAAEnC,KAAK,CAAC4C,IAAI;AACrB,mBAAmBzC,OAAO,YAAYK,KAAK,WAAWG,IAAI,IAAIO,cAAc;AAC5E,IAAII,eAAe,GAAGtB,KAAK,CAAC4C,IAAI,oBAAoBV,kBAAkB,MAAM,GAAG,IAAI;AACnF,kBAAkBG,KAAK;AACvB,IAAIb,gBAAgB,GAAGxB,KAAK,CAAC4C,IAAI,oBAAoBR,mBAAmB,MAAM,GAAG,IAAI;AACrF;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# Code Connect
|
|
2
|
+
|
|
3
|
+
Auto-loaded when working in `packages/components/src/figma/**` (`*.figma.ts`, `*.figma.batch.ts`, `*.figma.batch.json`).
|
|
4
|
+
|
|
5
|
+
Template files connect CDX UI components to Figma Dev Mode snippets. Read the full guide before making changes:
|
|
6
|
+
|
|
7
|
+
- `docs/internal/practices/code-connect.md` — complete workflow, mapping patterns, publishing, troubleshooting
|
|
8
|
+
|
|
9
|
+
## Pattern summary
|
|
10
|
+
|
|
11
|
+
Each `.figma.ts` file follows this structure (see `Button.figma.ts` as the canonical example):
|
|
12
|
+
|
|
13
|
+
1. **Metadata comments** — `// url=`, `// source=`, `// component=` at the top (required)
|
|
14
|
+
2. **`figma` import** — `import figma from 'figma'` (template API, not a runtime import)
|
|
15
|
+
3. **Instance handle** — `const instance = figma.selectedInstance`
|
|
16
|
+
4. **Property mappings** — `getEnum`, `getBoolean`, `getInstanceSwap`, `findText`, `findInstance`
|
|
17
|
+
5. **Default export** — `{ id, imports, example }` with optional `metadata`
|
|
18
|
+
|
|
19
|
+
## Key rules
|
|
20
|
+
|
|
21
|
+
- **Enum renaming** — pass a mapping object to `getEnum` when Figma and code names differ; list all values explicitly
|
|
22
|
+
- **Boolean-as-variant** — Figma VARIANT properties with `"true"`/`"false"` string values use `getEnum`, not `getBoolean`; map `"false"` to `undefined`; **always** render via `figma.helpers.react.renderProp` — never `isDisabled={${isDisabled}}` (produces `isDisabled={}` when undefined)
|
|
23
|
+
- **Instance swap** — use `getInstanceSwap` (not `findInstance`) for designer-swappable slots; call `.executeTemplate()` before interpolating; prefer `metadata.props.componentName` over raw `.example` for icon slots
|
|
24
|
+
- **Runtime states excluded** — `isHovered`, `isFocused`, `isPressed`, `isLoading` are runtime-managed; never map them
|
|
25
|
+
- **Falsy → `undefined`** — default or falsy values map to `undefined` so they don't clutter the snippet
|
|
26
|
+
- **Compound dot notation** — render sub-components as `Button.Label`, `Button.Icon`, not bare `Label`/`Icon`
|
|
27
|
+
- **`imports` array** — use `@cdx-ui/components` import path; Figma deduplicates identical strings
|
|
28
|
+
- **Nestable metadata** — leaf components (icons, badges) set `metadata: { nestable: true, props: { componentName } }`
|
|
29
|
+
- **Batch pattern** — for large sets with identical code shapes (icons), use `.figma.batch.ts` + `.figma.batch.json` with `figma.batch.name`/`figma.batch.id`
|
|
30
|
+
- **Publish** — `pnpm figma:publish` locally; CI publishes on merge to `main`
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=455-178
|
|
4
|
+
// source=packages/components/src/components/Card/index.tsx
|
|
5
|
+
// component=Card.Header
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const showActions = instance.getBoolean('Show Actions?');
|
|
9
|
+
const actionsSlot = instance.getSlot('Actions');
|
|
10
|
+
const title = instance.findText('{Title}').textContent;
|
|
11
|
+
const actions = showActions && actionsSlot ? figma.helpers.react.renderChildren(actionsSlot) : null;
|
|
12
|
+
export default {
|
|
13
|
+
id: 'card-header',
|
|
14
|
+
// Must match Card.figma.ts when the card nests this template (identical strings → deduped imports).
|
|
15
|
+
imports: ["import { Card, Heading } from '@cdx-ui/components'"],
|
|
16
|
+
example: figma.code`
|
|
17
|
+
<Card.Header>
|
|
18
|
+
<Heading size="sm">${title}</Heading>
|
|
19
|
+
${actions}
|
|
20
|
+
</Card.Header>`
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=Card.Header.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","showActions","getBoolean","actionsSlot","getSlot","title","findText","textContent","actions","helpers","react","renderChildren","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Card.Header.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,WAAW,GAAGF,QAAQ,CAACG,UAAU,CAAC,eAAe,CAAC;AACxD,MAAMC,WAAW,GAAGJ,QAAQ,CAACK,OAAO,CAAC,SAAS,CAAC;AAC/C,MAAMC,KAAK,GAAIN,QAAQ,CAACO,QAAQ,CAAC,SAAS,CAAC,CAAgCC,WAAW;AAEtF,MAAMC,OAAO,GAAGP,WAAW,IAAIE,WAAW,GAAGL,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,cAAc,CAACR,WAAW,CAAC,GAAG,IAAI;AAEnG,eAAe;EACbS,EAAE,EAAE,aAAa;EACjB;EACAC,OAAO,EAAE,CAAC,oDAAoD,CAAC;EAC/DC,OAAO,EAAEhB,KAAK,CAACiB,IAAI;AACrB;AACA,uBAAuBV,KAAK;AAC5B,IAAIG,OAAO;AACX;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=456-14
|
|
4
|
+
// source=packages/components/src/components/Card/index.tsx
|
|
5
|
+
// component=Card
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
// VARIANT property uses "true" / "false" strings — omit prop when not full bleed.
|
|
10
|
+
const fullBleed = instance.getEnum('fullBleed', {
|
|
11
|
+
true: true,
|
|
12
|
+
false: undefined
|
|
13
|
+
});
|
|
14
|
+
const showHeader = instance.getBoolean('Show Header?');
|
|
15
|
+
const showFooter = instance.getBoolean('Show Footer?');
|
|
16
|
+
const headerLayer = instance.findInstance('Card.Header');
|
|
17
|
+
const headerSnippet = showHeader && headerLayer?.type === 'INSTANCE' ? headerLayer.executeTemplate().example : null;
|
|
18
|
+
const contentSlot = instance.getSlot('Card.Content');
|
|
19
|
+
const footerSlot = instance.getSlot('Card.Footer');
|
|
20
|
+
const contentChildren = contentSlot ? figma.helpers.react.renderChildren(contentSlot) : null;
|
|
21
|
+
const footerChildren = footerSlot ? figma.helpers.react.renderChildren(footerSlot) : null;
|
|
22
|
+
|
|
23
|
+
// When the header shows: use the exact same import string as Card.Header.figma.ts (Code Connect
|
|
24
|
+
// allows only `import … from 'figma'` in template files; duplicate literals are required for dedupe).
|
|
25
|
+
const componentImport = showHeader ? "import { Card, Heading } from '@cdx-ui/components'" : `import { Card } from '@cdx-ui/components'`;
|
|
26
|
+
export default {
|
|
27
|
+
id: 'card',
|
|
28
|
+
imports: [componentImport],
|
|
29
|
+
example: figma.code`
|
|
30
|
+
<Card fullBleed={${fullBleed}}>
|
|
31
|
+
${headerSnippet}
|
|
32
|
+
<Card.Content>${contentChildren}</Card.Content>
|
|
33
|
+
${showFooter ? figma.code`<Card.Footer>${footerChildren}</Card.Footer>` : null}
|
|
34
|
+
</Card>`
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=Card.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","fullBleed","getEnum","true","false","undefined","showHeader","getBoolean","showFooter","headerLayer","findInstance","headerSnippet","type","executeTemplate","example","contentSlot","getSlot","footerSlot","contentChildren","helpers","react","renderChildren","footerChildren","componentImport","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Card.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,SAAS,GAAGF,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAMC,UAAU,GAAGP,QAAQ,CAACQ,UAAU,CAAC,cAAc,CAAC;AACtD,MAAMC,UAAU,GAAGT,QAAQ,CAACQ,UAAU,CAAC,cAAc,CAAC;AAEtD,MAAME,WAAW,GAAGV,QAAQ,CAACW,YAAY,CAAC,aAAa,CAAC;AACxD,MAAMC,aAAa,GACjBL,UAAU,IAAIG,WAAW,EAAEG,IAAI,KAAK,UAAU,GAAGH,WAAW,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO,GAAG,IAAI;AAE/F,MAAMC,WAAW,GAAGhB,QAAQ,CAACiB,OAAO,CAAC,cAAc,CAAC;AACpD,MAAMC,UAAU,GAAGlB,QAAQ,CAACiB,OAAO,CAAC,aAAa,CAAC;AAElD,MAAME,eAAe,GAAGH,WAAW,GAAGjB,KAAK,CAACqB,OAAO,CAACC,KAAK,CAACC,cAAc,CAACN,WAAW,CAAC,GAAG,IAAI;AAE5F,MAAMO,cAAc,GAAGL,UAAU,GAAGnB,KAAK,CAACqB,OAAO,CAACC,KAAK,CAACC,cAAc,CAACJ,UAAU,CAAC,GAAG,IAAI;;AAEzF;AACA;AACA,MAAMM,eAAe,GAAGjB,UAAU,GAC9B,oDAAoD,GACpD,2CAA2C;AAE/C,eAAe;EACbkB,EAAE,EAAE,MAAM;EACVC,OAAO,EAAE,CAACF,eAAe,CAAC;EAC1BT,OAAO,EAAEhB,KAAK,CAAC4B,IAAI;AACrB,mBAAmBzB,SAAS;AAC5B,IAAIU,aAAa;AACjB,kBAAkBO,eAAe;AACjC,IAAIV,UAAU,GAAGV,KAAK,CAAC4B,IAAI,gBAAgBJ,cAAc,gBAAgB,GAAG,IAAI;AAChF;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=366-383
|
|
4
|
+
// source=packages/components/src/components/Checkbox/index.tsx
|
|
5
|
+
// component=Checkbox
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Enum-as-boolean VARIANT props use string values "true"/"false" in Figma.
|
|
11
|
+
* Props are emitted via `figma.helpers.react.renderProp` so JSX formatting matches Code Connect conventions.
|
|
12
|
+
*
|
|
13
|
+
* `isHovered` and `isFocused` are interaction-only variants (fixed "false") and are intentionally omitted.
|
|
14
|
+
*/
|
|
15
|
+
const isChecked = instance.getEnum('isChecked', {
|
|
16
|
+
true: true,
|
|
17
|
+
false: false
|
|
18
|
+
});
|
|
19
|
+
const isIndeterminate = instance.getEnum('isIndeterminate', {
|
|
20
|
+
true: true,
|
|
21
|
+
false: false
|
|
22
|
+
});
|
|
23
|
+
const isInvalid = instance.getEnum('isInvalid', {
|
|
24
|
+
true: true,
|
|
25
|
+
false: false
|
|
26
|
+
});
|
|
27
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
28
|
+
true: true,
|
|
29
|
+
false: false
|
|
30
|
+
});
|
|
31
|
+
const valueProp = figma.helpers.react.renderProp('value', 'terms');
|
|
32
|
+
const isCheckedProp = figma.helpers.react.renderProp('isChecked', isChecked);
|
|
33
|
+
const isIndeterminateProp = figma.helpers.react.renderProp('isIndeterminate', isIndeterminate);
|
|
34
|
+
const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
|
|
35
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
36
|
+
const showLabel = instance.getEnum('Show Label?', {
|
|
37
|
+
true: true,
|
|
38
|
+
false: false
|
|
39
|
+
});
|
|
40
|
+
const labelText = instance.findText('Label').textContent;
|
|
41
|
+
export default {
|
|
42
|
+
id: 'checkbox',
|
|
43
|
+
imports: ["import { Checkbox } from '@cdx-ui/components'"],
|
|
44
|
+
example: figma.code`
|
|
45
|
+
<Checkbox${valueProp}${isCheckedProp}${isIndeterminateProp}${isInvalidProp}${isDisabledProp}>
|
|
46
|
+
${showLabel ? figma.code`<Checkbox.Label>${labelText}</Checkbox.Label>` : null}
|
|
47
|
+
</Checkbox>`
|
|
48
|
+
};
|
|
49
|
+
//# sourceMappingURL=Checkbox.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","isChecked","getEnum","true","false","isIndeterminate","isInvalid","isDisabled","valueProp","helpers","react","renderProp","isCheckedProp","isIndeterminateProp","isInvalidProp","isDisabledProp","showLabel","labelText","findText","textContent","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Checkbox.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAS,GAAGF,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,eAAe,GAAGN,QAAQ,CAACG,OAAO,CAAC,iBAAiB,EAAE;EAC1DC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAME,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMG,UAAU,GAAGR,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMI,SAAS,GAAGV,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC;AAClE,MAAMC,aAAa,GAAGd,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEV,SAAS,CAAC;AAC5E,MAAMY,mBAAmB,GAAGf,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,iBAAiB,EAAEN,eAAe,CAAC;AAC9F,MAAMS,aAAa,GAAGhB,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAEL,SAAS,CAAC;AAC5E,MAAMS,cAAc,GAAGjB,KAAK,CAACW,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMS,SAAS,GAAGjB,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMa,SAAS,GAAIlB,QAAQ,CAACmB,QAAQ,CAAC,OAAO,CAAC,CAAgCC,WAAW;AAExF,eAAe;EACbC,EAAE,EAAE,UAAU;EACdC,OAAO,EAAE,CAAC,+CAA+C,CAAC;EAC1DC,OAAO,EAAExB,KAAK,CAACyB,IAAI;AACrB,WAAWf,SAAS,GAAGI,aAAa,GAAGC,mBAAmB,GAAGC,aAAa,GAAGC,cAAc;AAC3F,IAAIC,SAAS,GAAGlB,KAAK,CAACyB,IAAI,mBAAmBN,SAAS,mBAAmB,GAAG,IAAI;AAChF;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=444-13403
|
|
4
|
+
// source=packages/components/src/components/Chip/index.tsx
|
|
5
|
+
// component=Chip
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const variant = instance.getEnum('variant', {
|
|
9
|
+
tint: 'tint',
|
|
10
|
+
outline: 'outline'
|
|
11
|
+
});
|
|
12
|
+
const size = instance.getEnum('size', {
|
|
13
|
+
default: 'default',
|
|
14
|
+
small: 'small',
|
|
15
|
+
xsmall: 'xsmall'
|
|
16
|
+
});
|
|
17
|
+
const color = instance.getEnum('color', {
|
|
18
|
+
default: 'default',
|
|
19
|
+
action: 'action',
|
|
20
|
+
danger: 'danger',
|
|
21
|
+
warning: 'warning',
|
|
22
|
+
success: 'success',
|
|
23
|
+
info: 'info'
|
|
24
|
+
});
|
|
25
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
26
|
+
true: true,
|
|
27
|
+
false: undefined
|
|
28
|
+
});
|
|
29
|
+
const disabledProp = figma.helpers.react.renderProp('disabled', isDisabled);
|
|
30
|
+
const showLeadingIcon = instance.getBoolean('Show Leading Icon?');
|
|
31
|
+
const showAvatar = instance.getBoolean('Show Avatar?');
|
|
32
|
+
const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
|
|
33
|
+
|
|
34
|
+
// INSTANCE_SWAP property names from Figma (Chip.LeadingIcon / Chip.TrailingIcon).
|
|
35
|
+
const leadingIconResult = showLeadingIcon && !showAvatar ? instance.getInstanceSwap('Chip.LeadingIcon')?.executeTemplate() : undefined;
|
|
36
|
+
const trailingIconResult = showTrailingIcon ? instance.getInstanceSwap('Chip.TrailingIcon')?.executeTemplate() : undefined;
|
|
37
|
+
const leadingIconName = leadingIconResult?.metadata?.props?.componentName;
|
|
38
|
+
const trailingIconName = trailingIconResult?.metadata?.props?.componentName;
|
|
39
|
+
const leadingIconSnippet = leadingIconName ?? leadingIconResult?.example;
|
|
40
|
+
const trailingIconSnippet = trailingIconName ?? trailingIconResult?.example;
|
|
41
|
+
const label = instance.findText('Chip.Label').textContent;
|
|
42
|
+
const iconImports = [];
|
|
43
|
+
if (showLeadingIcon && !showAvatar && leadingIconName) {
|
|
44
|
+
iconImports.push(`import { ${leadingIconName} } from '@cdx-ui/icons'`);
|
|
45
|
+
}
|
|
46
|
+
if (showTrailingIcon && trailingIconName) {
|
|
47
|
+
iconImports.push(`import { ${trailingIconName} } from '@cdx-ui/icons'`);
|
|
48
|
+
}
|
|
49
|
+
const avatarImport = showAvatar ? ["import { Avatar } from '@cdx-ui/components'"] : [];
|
|
50
|
+
export default {
|
|
51
|
+
id: 'chip',
|
|
52
|
+
imports: ["import { Chip } from '@cdx-ui/components'", ...avatarImport, ...iconImports],
|
|
53
|
+
example: figma.code`
|
|
54
|
+
<Chip variant="${variant}" size="${size}" color="${color}"${disabledProp}>
|
|
55
|
+
${showAvatar ? figma.code`<Chip.Avatar>
|
|
56
|
+
<Avatar.Image source={{ uri: '...' }} />
|
|
57
|
+
</Chip.Avatar>` : showLeadingIcon ? figma.code`<Chip.Icon as={${leadingIconSnippet}} slot="leading" />` : null}
|
|
58
|
+
<Chip.Label>${label}</Chip.Label>
|
|
59
|
+
${showTrailingIcon ? figma.code`<Chip.Icon as={${trailingIconSnippet}} slot="trailing" />` : null}
|
|
60
|
+
</Chip>`
|
|
61
|
+
};
|
|
62
|
+
//# sourceMappingURL=Chip.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","tint","outline","size","default","small","xsmall","color","action","danger","warning","success","info","isDisabled","true","false","undefined","disabledProp","helpers","react","renderProp","showLeadingIcon","getBoolean","showAvatar","showTrailingIcon","leadingIconResult","getInstanceSwap","executeTemplate","trailingIconResult","leadingIconName","metadata","props","componentName","trailingIconName","leadingIconSnippet","example","trailingIconSnippet","label","findText","textContent","iconImports","push","avatarImport","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Chip.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,IAAI,EAAE,MAAM;EACZC,OAAO,EAAE;AACX,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGN,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCI,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE,OAAO;EACdC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGV,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCI,OAAO,EAAE,SAAS;EAClBI,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE,QAAQ;EAChBC,OAAO,EAAE,SAAS;EAClBC,OAAO,EAAE,SAAS;EAClBC,IAAI,EAAE;AACR,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGhB,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDc,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,YAAY,GAAGrB,KAAK,CAACsB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,UAAU,EAAEP,UAAU,CAAC;AAE3E,MAAMQ,eAAe,GAAGxB,QAAQ,CAACyB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,UAAU,GAAG1B,QAAQ,CAACyB,UAAU,CAAC,cAAc,CAAC;AACtD,MAAME,gBAAgB,GAAG3B,QAAQ,CAACyB,UAAU,CAAC,qBAAqB,CAAC;;AAEnE;AACA,MAAMG,iBAAiB,GACrBJ,eAAe,IAAI,CAACE,UAAU,GAC1B1B,QAAQ,CAAC6B,eAAe,CAAC,kBAAkB,CAAC,EAAEC,eAAe,CAAC,CAAC,GAC/DX,SAAS;AACf,MAAMY,kBAAkB,GAAGJ,gBAAgB,GACvC3B,QAAQ,CAAC6B,eAAe,CAAC,mBAAmB,CAAC,EAAEC,eAAe,CAAC,CAAC,GAChEX,SAAS;AAEb,MAAMa,eAAe,GAAGJ,iBAAiB,EAAEK,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AAC/F,MAAMC,gBAAgB,GAAGL,kBAAkB,EAAEE,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjG,MAAME,kBAAkB,GAAGL,eAAe,IAAIJ,iBAAiB,EAAEU,OAAO;AACxE,MAAMC,mBAAmB,GAAGH,gBAAgB,IAAIL,kBAAkB,EAAEO,OAAO;AAE3E,MAAME,KAAK,GAAIxC,QAAQ,CAACyC,QAAQ,CAAC,YAAY,CAAC,CAAgCC,WAAW;AAEzF,MAAMC,WAAqB,GAAG,EAAE;AAChC,IAAInB,eAAe,IAAI,CAACE,UAAU,IAAIM,eAAe,EAAE;EACrDW,WAAW,CAACC,IAAI,CAAC,YAAYZ,eAAe,yBAAyB,CAAC;AACxE;AACA,IAAIL,gBAAgB,IAAIS,gBAAgB,EAAE;EACxCO,WAAW,CAACC,IAAI,CAAC,YAAYR,gBAAgB,yBAAyB,CAAC;AACzE;AACA,MAAMS,YAAY,GAAGnB,UAAU,GAAG,CAAC,6CAA6C,CAAC,GAAG,EAAE;AAEtF,eAAe;EACboB,EAAE,EAAE,MAAM;EACVC,OAAO,EAAE,CAAC,2CAA2C,EAAE,GAAGF,YAAY,EAAE,GAAGF,WAAW,CAAC;EACvFL,OAAO,EAAEvC,KAAK,CAACiD,IAAI;AACrB,iBAAiB9C,OAAO,WAAWI,IAAI,YAAYI,KAAK,IAAIU,YAAY;AACxE,IACIM,UAAU,GACN3B,KAAK,CAACiD,IAAI;AAClB;AACA,iBAAiB,GACTxB,eAAe,GACbzB,KAAK,CAACiD,IAAI,kBAAkBX,kBAAkB,qBAAqB,GACnE,IAAI;AACd,gBACgBG,KAAK;AACrB,IAAIb,gBAAgB,GAAG5B,KAAK,CAACiD,IAAI,kBAAkBT,mBAAmB,sBAAsB,GAAG,IAAI;AACnG;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=409-3015
|
|
4
|
+
// source=packages/components/src/components/Field/index.tsx
|
|
5
|
+
// component=Field
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const showLabel = instance.getBoolean('Show Label?');
|
|
9
|
+
const showHelperText = instance.getBoolean('Show Helper Text?');
|
|
10
|
+
const showErrorText = instance.getBoolean('Show Error Text?');
|
|
11
|
+
|
|
12
|
+
// Enum-as-boolean: isInvalid / isDisabled are VARIANT properties in Figma (string values "true"/"false").
|
|
13
|
+
// Map "false" to undefined so renderProp omits them from the snippet.
|
|
14
|
+
const isInvalid = instance.getEnum('isInvalid', {
|
|
15
|
+
true: true,
|
|
16
|
+
false: undefined
|
|
17
|
+
});
|
|
18
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
19
|
+
true: true,
|
|
20
|
+
false: undefined
|
|
21
|
+
});
|
|
22
|
+
const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
|
|
23
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
24
|
+
const labelText = instance.findText('{Label}', {
|
|
25
|
+
traverseInstances: true
|
|
26
|
+
}).textContent;
|
|
27
|
+
const helperText = instance.findText('{HelperText}', {
|
|
28
|
+
traverseInstances: true
|
|
29
|
+
}).textContent;
|
|
30
|
+
const errorText = instance.findText('{ErrorText}', {
|
|
31
|
+
traverseInstances: true
|
|
32
|
+
}).textContent;
|
|
33
|
+
const input = instance.findInstance('Input');
|
|
34
|
+
let inputSnippet;
|
|
35
|
+
if (input?.type === 'INSTANCE') {
|
|
36
|
+
inputSnippet = input.executeTemplate().example;
|
|
37
|
+
}
|
|
38
|
+
export default {
|
|
39
|
+
id: 'field-input',
|
|
40
|
+
// Only import Field here; the nested Input template provides its own "import { Input } …" line.
|
|
41
|
+
// Code Connect merges the two separate import statements from the same package automatically.
|
|
42
|
+
imports: ["import { Field } from '@cdx-ui/components'"],
|
|
43
|
+
example: figma.code`
|
|
44
|
+
<Field${isInvalidProp}${isDisabledProp}>
|
|
45
|
+
${showLabel ? figma.code`<Field.Label>${labelText}</Field.Label>` : null}
|
|
46
|
+
${inputSnippet}
|
|
47
|
+
${!isInvalid && showHelperText ? figma.code`<Field.Helper>${helperText}</Field.Helper>` : null}
|
|
48
|
+
${isInvalid && showErrorText ? figma.code`<Field.Error>${errorText}</Field.Error>` : null}
|
|
49
|
+
</Field>`
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=Field.Input.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","showLabel","getBoolean","showHelperText","showErrorText","isInvalid","getEnum","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","labelText","findText","traverseInstances","textContent","helperText","errorText","input","findInstance","inputSnippet","type","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Field.Input.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,SAAS,GAAGF,QAAQ,CAACG,UAAU,CAAC,aAAa,CAAC;AACpD,MAAMC,cAAc,GAAGJ,QAAQ,CAACG,UAAU,CAAC,mBAAmB,CAAC;AAC/D,MAAME,aAAa,GAAGL,QAAQ,CAACG,UAAU,CAAC,kBAAkB,CAAC;;AAE7D;AACA;AACA,MAAMG,SAAS,GAAGN,QAAQ,CAACO,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACO,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAET,SAAS,CAAC;AAC5E,MAAMU,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GACbjB,QAAQ,CAACkB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,UAAU,GACdrB,QAAQ,CAACkB,QAAQ,CAAC,cAAc,EAAE;EAChCC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAME,SAAS,GACbtB,QAAQ,CAACkB,QAAQ,CAAC,aAAa,EAAE;EAC/BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AAEb,MAAMG,KAAK,GAAGvB,QAAQ,CAACwB,YAAY,CAAC,OAAO,CAAC;AAC5C,IAAIC,YAAyD;AAC7D,IAAIF,KAAK,EAAEG,IAAI,KAAK,UAAU,EAAE;EAC9BD,YAAY,GAAGF,KAAK,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO;AAChD;AAEA,eAAe;EACbC,EAAE,EAAE,aAAa;EACjB;EACA;EACAC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDF,OAAO,EAAE7B,KAAK,CAACgC,IAAI;AACrB,QAAQnB,aAAa,GAAGI,cAAc;AACtC,IAAId,SAAS,GAAGH,KAAK,CAACgC,IAAI,gBAAgBd,SAAS,gBAAgB,GAAG,IAAI;AAC1E,IAAIQ,YAAY;AAChB,IAAI,CAACnB,SAAS,IAAIF,cAAc,GAAGL,KAAK,CAACgC,IAAI,iBAAiBV,UAAU,iBAAiB,GAAG,IAAI;AAChG,IAAIf,SAAS,IAAID,aAAa,GAAGN,KAAK,CAACgC,IAAI,gBAAgBT,SAAS,gBAAgB,GAAG,IAAI;AAC3F;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=427-4179
|
|
4
|
+
// source=packages/components/src/components/Field/index.tsx
|
|
5
|
+
// component=Field
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const showLabel = instance.getBoolean('Show Label?');
|
|
9
|
+
const showHelperText = instance.getBoolean('Show Helper Text?');
|
|
10
|
+
const showErrorText = instance.getBoolean('Show Error Text?');
|
|
11
|
+
|
|
12
|
+
// Enum-as-boolean: isInvalid / isDisabled are VARIANT properties in Figma (string values "true"/"false").
|
|
13
|
+
// Map "false" to undefined so renderProp omits them from the snippet.
|
|
14
|
+
const isInvalid = instance.getEnum('isInvalid', {
|
|
15
|
+
true: true,
|
|
16
|
+
false: undefined
|
|
17
|
+
});
|
|
18
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
19
|
+
true: true,
|
|
20
|
+
false: undefined
|
|
21
|
+
});
|
|
22
|
+
const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
|
|
23
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
24
|
+
const labelText = instance.findText('{Label}', {
|
|
25
|
+
traverseInstances: true
|
|
26
|
+
}).textContent;
|
|
27
|
+
const helperText = instance.findText('{HelperText}', {
|
|
28
|
+
traverseInstances: true
|
|
29
|
+
}).textContent;
|
|
30
|
+
const errorText = instance.findText('{ErrorText}', {
|
|
31
|
+
traverseInstances: true
|
|
32
|
+
}).textContent;
|
|
33
|
+
const select = instance.findInstance('Select');
|
|
34
|
+
let selectSnippet;
|
|
35
|
+
if (select?.type === 'INSTANCE') {
|
|
36
|
+
selectSnippet = select.executeTemplate().example;
|
|
37
|
+
}
|
|
38
|
+
export default {
|
|
39
|
+
id: 'field-select',
|
|
40
|
+
// Only import Field here; the nested Select template provides its own "import { Select } …" line.
|
|
41
|
+
// Code Connect merges the two separate import statements from the same package automatically.
|
|
42
|
+
imports: ["import { Field } from '@cdx-ui/components'"],
|
|
43
|
+
example: figma.code`
|
|
44
|
+
<Field${isInvalidProp}${isDisabledProp}>
|
|
45
|
+
${showLabel ? figma.code`<Field.Label>${labelText}</Field.Label>` : null}
|
|
46
|
+
${selectSnippet}
|
|
47
|
+
${!isInvalid && showHelperText ? figma.code`<Field.Helper>${helperText}</Field.Helper>` : null}
|
|
48
|
+
${isInvalid && showErrorText ? figma.code`<Field.Error>${errorText}</Field.Error>` : null}
|
|
49
|
+
</Field>`
|
|
50
|
+
};
|
|
51
|
+
//# sourceMappingURL=Field.Select.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","showLabel","getBoolean","showHelperText","showErrorText","isInvalid","getEnum","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","labelText","findText","traverseInstances","textContent","helperText","errorText","select","findInstance","selectSnippet","type","executeTemplate","example","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Field.Select.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,SAAS,GAAGF,QAAQ,CAACG,UAAU,CAAC,aAAa,CAAC;AACpD,MAAMC,cAAc,GAAGJ,QAAQ,CAACG,UAAU,CAAC,mBAAmB,CAAC;AAC/D,MAAME,aAAa,GAAGL,QAAQ,CAACG,UAAU,CAAC,kBAAkB,CAAC;;AAE7D;AACA;AACA,MAAMG,SAAS,GAAGN,QAAQ,CAACO,OAAO,CAAC,WAAW,EAAE;EAC9CC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACO,OAAO,CAAC,YAAY,EAAE;EAChDC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAET,SAAS,CAAC;AAC5E,MAAMU,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GACbjB,QAAQ,CAACkB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,UAAU,GACdrB,QAAQ,CAACkB,QAAQ,CAAC,cAAc,EAAE;EAChCC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAME,SAAS,GACbtB,QAAQ,CAACkB,QAAQ,CAAC,aAAa,EAAE;EAC/BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AAEb,MAAMG,MAAM,GAAGvB,QAAQ,CAACwB,YAAY,CAAC,QAAQ,CAAC;AAC9C,IAAIC,aAA0D;AAC9D,IAAIF,MAAM,EAAEG,IAAI,KAAK,UAAU,EAAE;EAC/BD,aAAa,GAAGF,MAAM,CAACI,eAAe,CAAC,CAAC,CAACC,OAAO;AAClD;AAEA,eAAe;EACbC,EAAE,EAAE,cAAc;EAClB;EACA;EACAC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDF,OAAO,EAAE7B,KAAK,CAACgC,IAAI;AACrB,QAAQnB,aAAa,GAAGI,cAAc;AACtC,IAAId,SAAS,GAAGH,KAAK,CAACgC,IAAI,gBAAgBd,SAAS,gBAAgB,GAAG,IAAI;AAC1E,IAAIQ,aAAa;AACjB,IAAI,CAACnB,SAAS,IAAIF,cAAc,GAAGL,KAAK,CAACgC,IAAI,iBAAiBV,UAAU,iBAAiB,GAAG,IAAI;AAChG,IAAIf,SAAS,IAAID,aAAa,GAAGN,KAAK,CAACgC,IAAI,gBAAgBT,SAAS,gBAAgB,GAAG,IAAI;AAC3F;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=399-3385
|
|
4
|
+
// source=packages/components/src/components/Heading/index.tsx
|
|
5
|
+
// component=Heading
|
|
6
|
+
// Use the same branch URL as Button: Code Connect is scoped per file key; main vs branch are separate targets.
|
|
7
|
+
import figma from 'figma';
|
|
8
|
+
const instance = figma.selectedInstance;
|
|
9
|
+
|
|
10
|
+
// Figma size values are identical to code size values — no renaming needed.
|
|
11
|
+
const size = instance.getEnum('size', {
|
|
12
|
+
xl: 'xl',
|
|
13
|
+
lg: 'lg',
|
|
14
|
+
md: 'md',
|
|
15
|
+
sm: 'sm',
|
|
16
|
+
xs: 'xs'
|
|
17
|
+
});
|
|
18
|
+
const text = instance.findText('{Heading}').textContent;
|
|
19
|
+
export default {
|
|
20
|
+
id: 'heading',
|
|
21
|
+
imports: ["import { Heading } from '@cdx-ui/components'"],
|
|
22
|
+
example: figma.code`<Heading size="${size}">${text}</Heading>`
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=Heading.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","size","getEnum","xl","lg","md","sm","xs","text","findText","textContent","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Heading.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;;AAEvC;AACA,MAAMC,IAAI,GAAGF,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE,IAAI;EACRC,EAAE,EAAE;AACN,CAAC,CAAC;AAEF,MAAMC,IAAI,GAAIT,QAAQ,CAACU,QAAQ,CAAC,WAAW,CAAC,CAAgCC,WAAW;AAEvF,eAAe;EACbC,EAAE,EAAE,SAAS;EACbC,OAAO,EAAE,CAAC,8CAA8C,CAAC;EACzDC,OAAO,EAAEf,KAAK,CAACgB,IAAI,kBAAkBb,IAAI,KAAKO,IAAI;AACpD,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=397-33
|
|
4
|
+
// source=packages/components/src/components/Icon/index.tsx
|
|
5
|
+
// component=Icon
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const iconSnippet = instance.getInstanceSwap('as')?.executeTemplate().example;
|
|
9
|
+
export default {
|
|
10
|
+
example: figma.code`${iconSnippet}`,
|
|
11
|
+
imports: ["import { Icon } from '@cdx-ui/components'"],
|
|
12
|
+
id: 'icon'
|
|
13
|
+
};
|
|
14
|
+
//# sourceMappingURL=Icon.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","iconSnippet","getInstanceSwap","executeTemplate","example","code","imports","id"],"sourceRoot":"../../../src","sources":["figma/Icon.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,WAAW,GAAGF,QAAQ,CAACG,eAAe,CAAC,IAAI,CAAC,EAAEC,eAAe,CAAC,CAAC,CAACC,OAAO;AAE7E,eAAe;EACbA,OAAO,EAAEN,KAAK,CAACO,IAAI,GAAGJ,WAAW,EAAE;EACnCK,OAAO,EAAE,CAAC,2CAA2C,CAAC;EACtDC,EAAE,EAAE;AACN,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=427-5235
|
|
4
|
+
// source=packages/components/src/components/IconButton/index.tsx
|
|
5
|
+
// component=IconButton
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const variant = instance.getEnum('variant', {
|
|
9
|
+
solid: 'solid',
|
|
10
|
+
tint: 'tint',
|
|
11
|
+
ghost: 'ghost'
|
|
12
|
+
});
|
|
13
|
+
const color = instance.getEnum('color', {
|
|
14
|
+
neutral: 'neutral',
|
|
15
|
+
action: 'action',
|
|
16
|
+
danger: 'danger'
|
|
17
|
+
});
|
|
18
|
+
const size = instance.getEnum('size', {
|
|
19
|
+
default: 'default',
|
|
20
|
+
small: 'small'
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
// Enum-as-boolean: isDisabled is a VARIANT property in Figma ("true"/"false").
|
|
24
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
25
|
+
true: true,
|
|
26
|
+
false: undefined
|
|
27
|
+
});
|
|
28
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
29
|
+
|
|
30
|
+
// icon: INSTANCE_SWAP → IconButton `as` (CdxIcon). Prefer metadata.props.componentName from icon Code Connect.
|
|
31
|
+
const iconResult = instance.getInstanceSwap('icon')?.executeTemplate();
|
|
32
|
+
const iconName = iconResult?.metadata?.props?.componentName;
|
|
33
|
+
const iconSnippet = iconName ?? iconResult?.example;
|
|
34
|
+
const iconImports = iconName ? [`import { ${iconName} } from '@cdx-ui/icons'`] : [];
|
|
35
|
+
export default {
|
|
36
|
+
id: 'icon-button',
|
|
37
|
+
imports: ["import { IconButton } from '@cdx-ui/components'", ...iconImports],
|
|
38
|
+
example: figma.code`
|
|
39
|
+
<IconButton as={${iconSnippet}} variant="${variant}" color="${color}" size="${size}"${isDisabledProp} />`
|
|
40
|
+
};
|
|
41
|
+
//# sourceMappingURL=IconButton.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","solid","tint","ghost","color","neutral","action","danger","size","default","small","isDisabled","true","false","undefined","isDisabledProp","helpers","react","renderProp","iconResult","getInstanceSwap","executeTemplate","iconName","metadata","props","componentName","iconSnippet","example","iconImports","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/IconButton.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGP,QAAQ,CAACG,OAAO,CAAC,OAAO,EAAE;EACtCK,OAAO,EAAE,SAAS;EAClBC,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGX,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCS,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;;AAEF;AACA,MAAMC,UAAU,GAAGd,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDY,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,cAAc,GAAGnB,KAAK,CAACoB,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEP,UAAU,CAAC;;AAE/E;AACA,MAAMQ,UAAU,GAAGtB,QAAQ,CAACuB,eAAe,CAAC,MAAM,CAAC,EAAEC,eAAe,CAAC,CAAC;AACtE,MAAMC,QAAQ,GAAGH,UAAU,EAAEI,QAAQ,EAAEC,KAAK,EAAEC,aAAmC;AACjF,MAAMC,WAAW,GAAGJ,QAAQ,IAAIH,UAAU,EAAEQ,OAAO;AAEnD,MAAMC,WAAW,GAAGN,QAAQ,GAAG,CAAC,YAAYA,QAAQ,yBAAyB,CAAC,GAAG,EAAE;AAEnF,eAAe;EACbO,EAAE,EAAE,aAAa;EACjBC,OAAO,EAAE,CAAC,iDAAiD,EAAE,GAAGF,WAAW,CAAC;EAC5ED,OAAO,EAAE/B,KAAK,CAACmC,IAAI;AACrB,kBAAkBL,WAAW,cAAc3B,OAAO,YAAYK,KAAK,WAAWI,IAAI,IAAIO,cAAc;AACpG,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-CDS-V2--React-Native?node-id=159-22
|
|
4
|
+
// source=packages/components/src/components/Input/index.tsx
|
|
5
|
+
// component=Input
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const variant = instance.getEnum('variant', {
|
|
9
|
+
outlined: 'outline'
|
|
10
|
+
});
|
|
11
|
+
const size = instance.getEnum('size', {
|
|
12
|
+
default: 'default'
|
|
13
|
+
});
|
|
14
|
+
const isInvalid = instance.getEnum('isInvalid', {
|
|
15
|
+
true: true,
|
|
16
|
+
false: undefined
|
|
17
|
+
});
|
|
18
|
+
const isDisabled = instance.getEnum('isDisabled', {
|
|
19
|
+
true: true,
|
|
20
|
+
false: undefined
|
|
21
|
+
});
|
|
22
|
+
const isInvalidProp = figma.helpers.react.renderProp('isInvalid', isInvalid);
|
|
23
|
+
const isDisabledProp = figma.helpers.react.renderProp('isDisabled', isDisabled);
|
|
24
|
+
const showValue = instance.getEnum('Show Value?', {
|
|
25
|
+
true: true,
|
|
26
|
+
false: false
|
|
27
|
+
});
|
|
28
|
+
const showPlaceholder = instance.getEnum('Show Placeholder?', {
|
|
29
|
+
true: true,
|
|
30
|
+
false: false
|
|
31
|
+
});
|
|
32
|
+
const valueText = instance.findText('{value}', {
|
|
33
|
+
traverseInstances: true
|
|
34
|
+
}).textContent;
|
|
35
|
+
const placeholder = instance.getString('placeholder');
|
|
36
|
+
const defaultValueProp = figma.helpers.react.renderProp('defaultValue', showValue ? valueText : undefined);
|
|
37
|
+
const placeholderProp = figma.helpers.react.renderProp('placeholder', showPlaceholder ? placeholder : undefined);
|
|
38
|
+
export default {
|
|
39
|
+
id: 'input',
|
|
40
|
+
imports: ["import { Input } from '@cdx-ui/components'"],
|
|
41
|
+
example: figma.code`
|
|
42
|
+
<Input variant="${variant}" size="${size}"${isInvalidProp}${isDisabledProp}>
|
|
43
|
+
<Input.Field${defaultValueProp}${placeholderProp} />
|
|
44
|
+
</Input>`
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=Input.figma.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["figma","instance","selectedInstance","variant","getEnum","outlined","size","default","isInvalid","true","false","undefined","isDisabled","isInvalidProp","helpers","react","renderProp","isDisabledProp","showValue","showPlaceholder","valueText","findText","traverseInstances","textContent","placeholder","getString","defaultValueProp","placeholderProp","id","imports","example","code"],"sourceRoot":"../../../src","sources":["figma/Input.figma.ts"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,gBAAgB;AAEvC,MAAMC,OAAO,GAAGF,QAAQ,CAACG,OAAO,CAAC,SAAS,EAAE;EAC1CC,QAAQ,EAAE;AACZ,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGL,QAAQ,CAACG,OAAO,CAAC,MAAM,EAAE;EACpCG,OAAO,EAAE;AACX,CAAC,CAAC;AAEF,MAAMC,SAAS,GAAGP,QAAQ,CAACG,OAAO,CAAC,WAAW,EAAE;EAC9CK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AACF,MAAMC,UAAU,GAAGX,QAAQ,CAACG,OAAO,CAAC,YAAY,EAAE;EAChDK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAME,aAAa,GAAGb,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,WAAW,EAAER,SAAS,CAAC;AAC5E,MAAMS,cAAc,GAAGjB,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CAAC,YAAY,EAAEJ,UAAU,CAAC;AAE/E,MAAMM,SAAS,GAAGjB,QAAQ,CAACG,OAAO,CAAC,aAAa,EAAE;EAChDK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMS,eAAe,GAAGlB,QAAQ,CAACG,OAAO,CAAC,mBAAmB,EAAE;EAC5DK,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMU,SAAS,GACbnB,QAAQ,CAACoB,QAAQ,CAAC,SAAS,EAAE;EAC3BC,iBAAiB,EAAE;AACrB,CAAC,CAAC,CACFC,WAAW;AACb,MAAMC,WAAW,GAAGvB,QAAQ,CAACwB,SAAS,CAAC,aAAa,CAAC;AAErD,MAAMC,gBAAgB,GAAG1B,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CACrD,cAAc,EACdE,SAAS,GAAGE,SAAS,GAAGT,SAC1B,CAAC;AACD,MAAMgB,eAAe,GAAG3B,KAAK,CAACc,OAAO,CAACC,KAAK,CAACC,UAAU,CACpD,aAAa,EACbG,eAAe,GAAGK,WAAW,GAAGb,SAClC,CAAC;AAED,eAAe;EACbiB,EAAE,EAAE,OAAO;EACXC,OAAO,EAAE,CAAC,4CAA4C,CAAC;EACvDC,OAAO,EAAE9B,KAAK,CAAC+B,IAAI;AACrB,kBAAkB5B,OAAO,WAAWG,IAAI,IAAIO,aAAa,GAAGI,cAAc;AAC1E,gBAAgBS,gBAAgB,GAAGC,eAAe;AAClD;AACA,CAAC","ignoreList":[]}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
// url=https://www.figma.com/design/0lEVMVlLj8ZS4fgItr3pmd/%E2%AD%90-Forge-DS--React-Native-Components?node-id=449-449
|
|
4
|
+
// source=packages/components/src/components/ProgressSegmented/index.tsx
|
|
5
|
+
// component=ProgressSegmented
|
|
6
|
+
import figma from 'figma';
|
|
7
|
+
const instance = figma.selectedInstance;
|
|
8
|
+
const segmentsCount = instance.getEnum('segments', {
|
|
9
|
+
'2': 2,
|
|
10
|
+
'3': 3,
|
|
11
|
+
'4': 4,
|
|
12
|
+
'5': 5,
|
|
13
|
+
'6': 6
|
|
14
|
+
});
|
|
15
|
+
|
|
16
|
+
// Figma `step=complete` maps to `isStepComplete` on the last step (all segments filled).
|
|
17
|
+
const stepRaw = instance.getEnum('step', {
|
|
18
|
+
'1': '1',
|
|
19
|
+
'2': '2',
|
|
20
|
+
'3': '3',
|
|
21
|
+
'4': '4',
|
|
22
|
+
'5': '5',
|
|
23
|
+
'6': '6',
|
|
24
|
+
complete: 'complete'
|
|
25
|
+
});
|
|
26
|
+
const isStepComplete = stepRaw === 'complete';
|
|
27
|
+
const step = isStepComplete ? segmentsCount : Number(stepRaw);
|
|
28
|
+
export default {
|
|
29
|
+
id: 'progress-segmented',
|
|
30
|
+
imports: ["import { ProgressSegmented } from '@cdx-ui/components'"],
|
|
31
|
+
example: figma.code`<ProgressSegmented segments={${segmentsCount}} step={${step}}${isStepComplete ? figma.code` isStepComplete` : figma.code``} />`
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=ProgressSegmented.figma.js.map
|