@cdx-ui/components 0.0.1-beta.5 → 0.0.1-beta.7
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 +1 -1
- package/lib/commonjs/figma/Button.figma.js +25 -9
- package/lib/commonjs/figma/Button.figma.js.map +1 -1
- package/lib/module/figma/Button.figma.js +25 -9
- package/lib/module/figma/Button.figma.js.map +1 -1
- package/lib/typescript/figma/Button.figma.d.ts.map +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -35,7 +35,7 @@ Component stories live in [`apps/storybook`](../../apps/storybook/). See the ful
|
|
|
35
35
|
|
|
36
36
|
### Components
|
|
37
37
|
|
|
38
|
-
AlertDialog, Avatar, BottomSheet, Button, Card, Checkbox, Chip, Dialog, Field, Form, Heading, HStack / VStack, Icon, IconButton, Image, Input, Link, OtpInput, ProgressBar, ProgressSegmented, Select, Switch, Text, VirtualizedList.
|
|
38
|
+
AlertDialog, Avatar, BottomSheet, Button, Card, Checkbox, Chip, Dialog, Field, Form, Heading, HStack / VStack, Icon, IconButton, Image, Input, Link, ListItem, OtpInput, ProgressBar, ProgressSegmented, Select, Switch, Text, VirtualizedList.
|
|
39
39
|
|
|
40
40
|
> `Box` is exported but deprecated — use React Native's `View` directly.
|
|
41
41
|
|
|
@@ -14,7 +14,7 @@ const instance = _figma.default.selectedInstance;
|
|
|
14
14
|
|
|
15
15
|
// Variant rename: Figma uses "solid" but code uses "strong" for the filled/primary style.
|
|
16
16
|
// This divergence exists because "strong" better communicates visual weight in the code API
|
|
17
|
-
// while "solid" is the conventional Figma naming.
|
|
17
|
+
// while "solid" is the conventional Figma naming.
|
|
18
18
|
const variant = instance.getEnum('variant', {
|
|
19
19
|
solid: 'strong',
|
|
20
20
|
outline: 'outline',
|
|
@@ -28,26 +28,42 @@ const size = instance.getEnum('size', {
|
|
|
28
28
|
default: 'default',
|
|
29
29
|
small: 'small'
|
|
30
30
|
});
|
|
31
|
-
// Enum-as-boolean
|
|
32
|
-
//
|
|
33
|
-
// to undefined so the prop is omitted entirely from the generated snippet when not disabled.
|
|
31
|
+
// Enum-as-boolean: isDisabled is a VARIANT property in Figma (string values "true"/"false")
|
|
32
|
+
// rather than a true BOOLEAN. Map "false" to undefined so the prop is omitted when not disabled.
|
|
34
33
|
const isDisabled = instance.getEnum('isDisabled', {
|
|
35
34
|
true: true,
|
|
36
35
|
false: undefined
|
|
37
36
|
});
|
|
38
37
|
const showLeadingIcon = instance.getBoolean('Show Leading Icon?');
|
|
39
38
|
const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
|
|
40
|
-
|
|
41
|
-
|
|
39
|
+
|
|
40
|
+
// Icon slots: Prefer metadata.props.componentName exposed by icon Code Connect templates,
|
|
41
|
+
// which yields a clean identifier (e.g. "Check"). Fall back to executeTemplate().example
|
|
42
|
+
// (renders a placeholder pill when the icon lacks Code Connect).
|
|
43
|
+
const leadingIconResult = instance.getInstanceSwap('Leading Icon')?.executeTemplate();
|
|
44
|
+
const trailingIconResult = instance.getInstanceSwap('Trailing Icon')?.executeTemplate();
|
|
45
|
+
const leadingIconName = leadingIconResult?.metadata?.props?.componentName;
|
|
46
|
+
const trailingIconName = trailingIconResult?.metadata?.props?.componentName;
|
|
47
|
+
const leadingIconSnippet = leadingIconName ?? leadingIconResult?.example;
|
|
48
|
+
const trailingIconSnippet = trailingIconName ?? trailingIconResult?.example;
|
|
42
49
|
const label = instance.findText('Button.Label').textContent;
|
|
50
|
+
|
|
51
|
+
// Include icon imports when resolved via metadata.props (propagated from icon Code Connect)
|
|
52
|
+
const iconImports = [];
|
|
53
|
+
if (showLeadingIcon && leadingIconName) {
|
|
54
|
+
iconImports.push(`import { ${leadingIconName} } from '@cdx-ui/icons'`);
|
|
55
|
+
}
|
|
56
|
+
if (showTrailingIcon && trailingIconName) {
|
|
57
|
+
iconImports.push(`import { ${trailingIconName} } from '@cdx-ui/icons'`);
|
|
58
|
+
}
|
|
43
59
|
var _default = exports.default = {
|
|
44
60
|
id: 'button',
|
|
45
|
-
imports: ["import { Button } from '@cdx-ui/components'"],
|
|
61
|
+
imports: ["import { Button } from '@cdx-ui/components'", ...iconImports],
|
|
46
62
|
example: _figma.default.code`
|
|
47
63
|
<Button variant="${variant}" color="${color}" size="${size}" isDisabled={${isDisabled}}>
|
|
48
|
-
${showLeadingIcon ?
|
|
64
|
+
${showLeadingIcon ? _figma.default.code`<Button.Icon as={${leadingIconSnippet}} />` : null}
|
|
49
65
|
<Button.Label>${label}</Button.Label>
|
|
50
|
-
${showTrailingIcon ?
|
|
66
|
+
${showTrailingIcon ? _figma.default.code`<Button.Icon as={${trailingIconSnippet}} />` : null}
|
|
51
67
|
</Button>`
|
|
52
68
|
};
|
|
53
69
|
//# sourceMappingURL=Button.figma.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_figma","_interopRequireDefault","require","e","__esModule","default","instance","figma","selectedInstance","variant","getEnum","solid","outline","ghost","color","action","danger","size","small","isDisabled","true","false","undefined","showLeadingIcon","getBoolean","showTrailingIcon","
|
|
1
|
+
{"version":3,"names":["_figma","_interopRequireDefault","require","e","__esModule","default","instance","figma","selectedInstance","variant","getEnum","solid","outline","ghost","color","action","danger","size","small","isDisabled","true","false","undefined","showLeadingIcon","getBoolean","showTrailingIcon","leadingIconResult","getInstanceSwap","executeTemplate","trailingIconResult","leadingIconName","metadata","props","componentName","trailingIconName","leadingIconSnippet","example","trailingIconSnippet","label","findText","textContent","iconImports","push","_default","exports","id","imports","code"],"sourceRoot":"../../../src","sources":["figma/Button.figma.ts"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA0B,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAH1B;AACA;AACA;;AAGA,MAAMG,QAAQ,GAAGC,cAAK,CAACC,gBAAgB;;AAEvC;AACA;AACA;AACA,MAAMC,OAAO,GAAGH,QAAQ,CAACI,OAAO,CAAC,SAAS,EAAE;EAC1CC,KAAK,EAAE,QAAQ;EACfC,OAAO,EAAE,SAAS;EAClBC,KAAK,EAAE;AACT,CAAC,CAAC;AACF,MAAMC,KAAK,GAAGR,QAAQ,CAACI,OAAO,CAAC,OAAO,EAAE;EACtCK,MAAM,EAAE,QAAQ;EAChBC,MAAM,EAAE;AACV,CAAC,CAAC;AACF,MAAMC,IAAI,GAAGX,QAAQ,CAACI,OAAO,CAAC,MAAM,EAAE;EACpCL,OAAO,EAAE,SAAS;EAClBa,KAAK,EAAE;AACT,CAAC,CAAC;AACF;AACA;AACA,MAAMC,UAAU,GAAGb,QAAQ,CAACI,OAAO,CAAC,YAAY,EAAE;EAChDU,IAAI,EAAE,IAAI;EACVC,KAAK,EAAEC;AACT,CAAC,CAAC;AAEF,MAAMC,eAAe,GAAGjB,QAAQ,CAACkB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,gBAAgB,GAAGnB,QAAQ,CAACkB,UAAU,CAAC,qBAAqB,CAAC;;AAEnE;AACA;AACA;AACA,MAAME,iBAAiB,GAAGpB,QAAQ,CAACqB,eAAe,CAAC,cAAc,CAAC,EAAEC,eAAe,CAAC,CAAC;AACrF,MAAMC,kBAAkB,GAAGvB,QAAQ,CAACqB,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,GAAIhC,QAAQ,CAACiC,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;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAvC,OAAA,GAEc;EACbwC,EAAE,EAAE,QAAQ;EACZC,OAAO,EAAE,CAAC,6CAA6C,EAAE,GAAGL,WAAW,CAAC;EACxEL,OAAO,EAAE7B,cAAK,CAACwC,IAAI;AACrB,mBAAmBtC,OAAO,YAAYK,KAAK,WAAWG,IAAI,iBAAiBE,UAAU;AACrF,IAAII,eAAe,GAAGhB,cAAK,CAACwC,IAAI,oBAAoBZ,kBAAkB,MAAM,GAAG,IAAI;AACnF,kBAAkBG,KAAK;AACvB,IAAIb,gBAAgB,GAAGlB,cAAK,CAACwC,IAAI,oBAAoBV,mBAAmB,MAAM,GAAG,IAAI;AACrF;AACA,CAAC","ignoreList":[]}
|
|
@@ -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,42 @@ 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
|
});
|
|
32
31
|
const showLeadingIcon = instance.getBoolean('Show Leading Icon?');
|
|
33
32
|
const showTrailingIcon = instance.getBoolean('Show Trailing Icon?');
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
|
|
34
|
+
// Icon slots: Prefer metadata.props.componentName exposed by icon Code Connect templates,
|
|
35
|
+
// which yields a clean identifier (e.g. "Check"). Fall back to executeTemplate().example
|
|
36
|
+
// (renders a placeholder pill when the icon lacks Code Connect).
|
|
37
|
+
const leadingIconResult = instance.getInstanceSwap('Leading Icon')?.executeTemplate();
|
|
38
|
+
const trailingIconResult = instance.getInstanceSwap('Trailing Icon')?.executeTemplate();
|
|
39
|
+
const leadingIconName = leadingIconResult?.metadata?.props?.componentName;
|
|
40
|
+
const trailingIconName = trailingIconResult?.metadata?.props?.componentName;
|
|
41
|
+
const leadingIconSnippet = leadingIconName ?? leadingIconResult?.example;
|
|
42
|
+
const trailingIconSnippet = trailingIconName ?? trailingIconResult?.example;
|
|
36
43
|
const label = instance.findText('Button.Label').textContent;
|
|
44
|
+
|
|
45
|
+
// Include icon imports when resolved via metadata.props (propagated from icon Code Connect)
|
|
46
|
+
const iconImports = [];
|
|
47
|
+
if (showLeadingIcon && leadingIconName) {
|
|
48
|
+
iconImports.push(`import { ${leadingIconName} } from '@cdx-ui/icons'`);
|
|
49
|
+
}
|
|
50
|
+
if (showTrailingIcon && trailingIconName) {
|
|
51
|
+
iconImports.push(`import { ${trailingIconName} } from '@cdx-ui/icons'`);
|
|
52
|
+
}
|
|
37
53
|
export default {
|
|
38
54
|
id: 'button',
|
|
39
|
-
imports: ["import { Button } from '@cdx-ui/components'"],
|
|
55
|
+
imports: ["import { Button } from '@cdx-ui/components'", ...iconImports],
|
|
40
56
|
example: figma.code`
|
|
41
57
|
<Button variant="${variant}" color="${color}" size="${size}" isDisabled={${isDisabled}}>
|
|
42
|
-
${showLeadingIcon ?
|
|
58
|
+
${showLeadingIcon ? figma.code`<Button.Icon as={${leadingIconSnippet}} />` : null}
|
|
43
59
|
<Button.Label>${label}</Button.Label>
|
|
44
|
-
${showTrailingIcon ?
|
|
60
|
+
${showTrailingIcon ? figma.code`<Button.Icon as={${trailingIconSnippet}} />` : null}
|
|
45
61
|
</Button>`
|
|
46
62
|
};
|
|
47
63
|
//# 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","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;AAEF,MAAMC,eAAe,GAAGjB,QAAQ,CAACkB,UAAU,CAAC,oBAAoB,CAAC;AACjE,MAAMC,gBAAgB,GAAGnB,QAAQ,CAACkB,UAAU,CAAC,qBAAqB,CAAC;;AAEnE;AACA;AACA;AACA,MAAME,iBAAiB,GAAGpB,QAAQ,CAACqB,eAAe,CAAC,cAAc,CAAC,EAAEC,eAAe,CAAC,CAAC;AACrF,MAAMC,kBAAkB,GAAGvB,QAAQ,CAACqB,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,GAAIhC,QAAQ,CAACiC,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,EAAE/B,KAAK,CAACwC,IAAI;AACrB,mBAAmBrC,OAAO,YAAYK,KAAK,WAAWG,IAAI,iBAAiBG,UAAU;AACrF,IAAII,eAAe,GAAGlB,KAAK,CAACwC,IAAI,oBAAoBV,kBAAkB,MAAM,GAAG,IAAI;AACnF,kBAAkBG,KAAK;AACvB,IAAIb,gBAAgB,GAAGpB,KAAK,CAACwC,IAAI,oBAAoBR,mBAAmB,MAAM,GAAG,IAAI;AACrF;AACA,CAAC","ignoreList":[]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Button.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;
|
|
1
|
+
{"version":3,"file":"Button.figma.d.ts","sourceRoot":"","sources":["../../../src/figma/Button.figma.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;AAoD1B,wBASE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cdx-ui/components",
|
|
3
|
-
"version": "0.0.1-beta.
|
|
3
|
+
"version": "0.0.1-beta.7",
|
|
4
4
|
"main": "lib/commonjs/index.js",
|
|
5
5
|
"module": "lib/module/index.js",
|
|
6
6
|
"react-native": "src/index.ts",
|
|
@@ -67,9 +67,9 @@
|
|
|
67
67
|
"@gorhom/bottom-sheet": "^5.2.6",
|
|
68
68
|
"class-variance-authority": "^0.7.1",
|
|
69
69
|
"uniwind": "1.6.1",
|
|
70
|
-
"@cdx-ui/primitives": "0.0.1-beta.
|
|
71
|
-
"@cdx-ui/icons": "0.0.1-beta.
|
|
72
|
-
"@cdx-ui/utils": "0.0.1-beta.
|
|
70
|
+
"@cdx-ui/primitives": "0.0.1-beta.7",
|
|
71
|
+
"@cdx-ui/icons": "0.0.1-beta.7",
|
|
72
|
+
"@cdx-ui/utils": "0.0.1-beta.7"
|
|
73
73
|
},
|
|
74
74
|
"devDependencies": {
|
|
75
75
|
"@types/react": "*",
|