@seed-design/figma 0.0.2 → 0.0.4
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/lib/index.cjs +556 -471
- package/lib/index.d.ts +29 -4
- package/lib/index.js +556 -471
- package/package.json +2 -2
- package/src/component/handlers/action-button.ts +66 -0
- package/src/component/handlers/action-chip.ts +71 -0
- package/src/component/handlers/action-sheet.ts +74 -0
- package/src/component/handlers/app-bar.ts +183 -0
- package/src/component/handlers/avatar-stack.ts +35 -0
- package/src/component/handlers/avatar.ts +37 -0
- package/src/component/handlers/badge.ts +20 -0
- package/src/component/handlers/callout.ts +87 -0
- package/src/component/handlers/checkbox.ts +32 -0
- package/src/component/handlers/chip-tabs.ts +51 -0
- package/src/component/handlers/control-chip.ts +75 -0
- package/src/component/handlers/error-state.ts +37 -0
- package/src/component/handlers/extended-action-sheet.ts +86 -0
- package/src/component/handlers/extended-fab.ts +24 -0
- package/src/component/handlers/fab.ts +17 -0
- package/src/component/handlers/help-bubble.ts +66 -0
- package/src/component/handlers/identity-placeholder.ts +16 -0
- package/src/component/handlers/inline-banner.ts +83 -0
- package/src/component/handlers/manner-temp-badge.ts +17 -0
- package/src/component/handlers/multiline-text-field.ts +80 -0
- package/src/component/handlers/progress-circle.ts +49 -0
- package/src/component/handlers/reaction-button.ts +36 -0
- package/src/component/handlers/segmented-control.ts +51 -0
- package/src/component/handlers/select-box.ts +76 -0
- package/src/component/handlers/skeleton.ts +51 -0
- package/src/component/handlers/snackbar.ts +21 -0
- package/src/component/handlers/switch.ts +29 -0
- package/src/component/handlers/tabs.ts +107 -0
- package/src/component/handlers/text-button.ts +57 -0
- package/src/component/handlers/text-field.ts +108 -0
- package/src/component/handlers/toggle-button.ts +44 -0
- package/src/component/index.ts +32 -1644
- package/src/component/type-helper.ts +11 -0
- package/src/generate-code.ts +183 -145
- package/src/icon.ts +2 -2
- package/src/index.ts +1 -2
- package/src/jsx.ts +1 -1
- package/src/layout.ts +23 -281
- package/src/normalizer/from-plugin.ts +24 -4
- package/src/normalizer/from-rest.ts +22 -4
- package/src/normalizer/index.ts +3 -0
- package/src/normalizer/types.ts +3 -1
- package/src/{color.ts → props/color.ts} +1 -1
- package/src/props/layout.ts +292 -0
- package/src/{sizing.ts → props/sizing.ts} +17 -17
- package/src/{text.ts → props/text.ts} +2 -1
- package/src/{variable.ts → props/variable.ts} +1 -1
- package/src/{util.ts → utils/common.ts} +0 -2
- package/src/{node-util.ts → utils/figma-node.ts} +1 -1
package/lib/index.cjs
CHANGED
|
@@ -1,6 +1,102 @@
|
|
|
1
1
|
var changeCase = require('change-case');
|
|
2
|
-
var vars = require('@seed-design/css/vars');
|
|
3
2
|
var tsPattern = require('ts-pattern');
|
|
3
|
+
var vars = require('@seed-design/css/vars');
|
|
4
|
+
|
|
5
|
+
const metadata$v = {
|
|
6
|
+
"key": "a3d58bb8540600878742cdcf2608a4b3851667ec"};
|
|
7
|
+
|
|
8
|
+
const metadata$u = {
|
|
9
|
+
"key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89"};
|
|
10
|
+
|
|
11
|
+
const metadata$t = {
|
|
12
|
+
"key": "3d21594ef116e94a9465d507447b858aea062575"};
|
|
13
|
+
|
|
14
|
+
const metadata$s = {
|
|
15
|
+
"key": "7c29b70b7e71618e1894c26f61f336de2730d76e"};
|
|
16
|
+
|
|
17
|
+
const metadata$r = {
|
|
18
|
+
"key": "d71644aeba2e29deda366798fdfe35977166d120"};
|
|
19
|
+
|
|
20
|
+
const metadata$q = {
|
|
21
|
+
"key": "019467fdad2192abb48699dcfb79e344df04b799"};
|
|
22
|
+
|
|
23
|
+
const metadata$p = {
|
|
24
|
+
"key": "04609a35d47a1a0ef4904b3c25f79451892a85a1"};
|
|
25
|
+
|
|
26
|
+
const metadata$o = {
|
|
27
|
+
"key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe"};
|
|
28
|
+
|
|
29
|
+
const metadata$n = {
|
|
30
|
+
"key": "94a2f6957a86f8ae3b8c7ca200dfcd5e29f6075b"};
|
|
31
|
+
|
|
32
|
+
const metadata$m = {
|
|
33
|
+
"key": "d098159beacf7713e9116f0ef38d8a20f64ec84f"};
|
|
34
|
+
|
|
35
|
+
const metadata$l = {
|
|
36
|
+
"key": "5780d56fc2f9bc4bbd6bc3db93949d8a8b7b7563"};
|
|
37
|
+
|
|
38
|
+
const metadata$k = {
|
|
39
|
+
"key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172"};
|
|
40
|
+
|
|
41
|
+
const metadata$j = {
|
|
42
|
+
"key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb"};
|
|
43
|
+
|
|
44
|
+
const metadata$i = {
|
|
45
|
+
"key": "032f3fddaad0aa3fa5a7f680768c1f5d02fb463f"};
|
|
46
|
+
|
|
47
|
+
const metadata$h = {
|
|
48
|
+
"key": "1974b94703032585bb9e20bd54743e01094b965c"};
|
|
49
|
+
|
|
50
|
+
const metadata$g = {
|
|
51
|
+
"key": "804b327c091278a40d5891939eaed90bb2889659"};
|
|
52
|
+
|
|
53
|
+
const metadata$f = {
|
|
54
|
+
"key": "808206c07408aa1056ec85a55925e9844e9265c2"};
|
|
55
|
+
|
|
56
|
+
const metadata$e = {
|
|
57
|
+
"key": "ce587d0f21754af05240cb32a4880227cb0ea1e1"};
|
|
58
|
+
|
|
59
|
+
const metadata$d = {
|
|
60
|
+
"key": "ac5331cec7a2c75b671df5b85ef247dfd820dd2f"};
|
|
61
|
+
|
|
62
|
+
const metadata$c = {
|
|
63
|
+
"key": "88b2399c930c85f9ce2972163a078bc684b84bbe"};
|
|
64
|
+
|
|
65
|
+
const metadata$b = {
|
|
66
|
+
"key": "6e6779a372cab2485a0e25529bc4dbc9932a7346"};
|
|
67
|
+
|
|
68
|
+
const metadata$a = {
|
|
69
|
+
"key": "ec43e4e881f7048e95601f8b58c01a0905a174e0"};
|
|
70
|
+
|
|
71
|
+
const metadata$9 = {
|
|
72
|
+
"key": "3ad7133ba52755867f42f9232375f75639e00d58"};
|
|
73
|
+
|
|
74
|
+
const metadata$8 = {
|
|
75
|
+
"key": "38722ffeb4c966256a709155e8ddac50c93d7c60"};
|
|
76
|
+
|
|
77
|
+
const metadata$7 = {
|
|
78
|
+
"key": "ef22c3288722fbfa64a5ab73df397ade88f8e05a"};
|
|
79
|
+
|
|
80
|
+
const metadata$6 = {
|
|
81
|
+
"key": "81b17fb8c7d731a19cf8d36a8605559d41414eca"};
|
|
82
|
+
|
|
83
|
+
const metadata$5 = {
|
|
84
|
+
"key": "c07bfe331cf214375fce9ad47cb6fdb459d1fb1b"};
|
|
85
|
+
|
|
86
|
+
const metadata$4 = {
|
|
87
|
+
"key": "80ce5a33b5ab713ab3bd2449472e2fb13d78c7f3"};
|
|
88
|
+
|
|
89
|
+
const metadata$3 = {
|
|
90
|
+
"key": "ffe33411fb8796f7a95d3637b90150007f0dd954"};
|
|
91
|
+
|
|
92
|
+
const metadata$2 = {
|
|
93
|
+
"key": "601f788792916250e33d04bd3165dee1404342df"};
|
|
94
|
+
|
|
95
|
+
const metadata$1 = {
|
|
96
|
+
"key": "c49873c37a639f0dffdea4efd0eb43760d66c141"};
|
|
97
|
+
|
|
98
|
+
const metadata = {
|
|
99
|
+
"key": "1d240ee5fd7a56879713e69cbea1b6f006f0ea22"};
|
|
4
100
|
|
|
5
101
|
const FIGMA_VARIABLES = [
|
|
6
102
|
{
|
|
@@ -8772,102 +8868,6 @@ function createBorderProps(node) {
|
|
|
8772
8868
|
};
|
|
8773
8869
|
}
|
|
8774
8870
|
|
|
8775
|
-
const metadata$v = {
|
|
8776
|
-
"key": "a3d58bb8540600878742cdcf2608a4b3851667ec"};
|
|
8777
|
-
|
|
8778
|
-
const metadata$u = {
|
|
8779
|
-
"key": "450ede9d0bf42fc6ef14345c77e6e407d6d5ee89"};
|
|
8780
|
-
|
|
8781
|
-
const metadata$t = {
|
|
8782
|
-
"key": "3d21594ef116e94a9465d507447b858aea062575"};
|
|
8783
|
-
|
|
8784
|
-
const metadata$s = {
|
|
8785
|
-
"key": "7c29b70b7e71618e1894c26f61f336de2730d76e"};
|
|
8786
|
-
|
|
8787
|
-
const metadata$r = {
|
|
8788
|
-
"key": "d71644aeba2e29deda366798fdfe35977166d120"};
|
|
8789
|
-
|
|
8790
|
-
const metadata$q = {
|
|
8791
|
-
"key": "019467fdad2192abb48699dcfb79e344df04b799"};
|
|
8792
|
-
|
|
8793
|
-
const metadata$p = {
|
|
8794
|
-
"key": "04609a35d47a1a0ef4904b3c25f79451892a85a1"};
|
|
8795
|
-
|
|
8796
|
-
const metadata$o = {
|
|
8797
|
-
"key": "ec46d38baac3c367c4a5ffa47a2110d51ba0a4fe"};
|
|
8798
|
-
|
|
8799
|
-
const metadata$n = {
|
|
8800
|
-
"key": "94a2f6957a86f8ae3b8c7ca200dfcd5e29f6075b"};
|
|
8801
|
-
|
|
8802
|
-
const metadata$m = {
|
|
8803
|
-
"key": "d098159beacf7713e9116f0ef38d8a20f64ec84f"};
|
|
8804
|
-
|
|
8805
|
-
const metadata$l = {
|
|
8806
|
-
"key": "5780d56fc2f9bc4bbd6bc3db93949d8a8b7b7563"};
|
|
8807
|
-
|
|
8808
|
-
const metadata$k = {
|
|
8809
|
-
"key": "39b4ecd0b5b4d35f4dc5791765ca04aa062a5172"};
|
|
8810
|
-
|
|
8811
|
-
const metadata$j = {
|
|
8812
|
-
"key": "cd4cf8a850bf3de87b79080b36b421a649bf3fcb"};
|
|
8813
|
-
|
|
8814
|
-
const metadata$i = {
|
|
8815
|
-
"key": "032f3fddaad0aa3fa5a7f680768c1f5d02fb463f"};
|
|
8816
|
-
|
|
8817
|
-
const metadata$h = {
|
|
8818
|
-
"key": "1974b94703032585bb9e20bd54743e01094b965c"};
|
|
8819
|
-
|
|
8820
|
-
const metadata$g = {
|
|
8821
|
-
"key": "804b327c091278a40d5891939eaed90bb2889659"};
|
|
8822
|
-
|
|
8823
|
-
const metadata$f = {
|
|
8824
|
-
"key": "808206c07408aa1056ec85a55925e9844e9265c2"};
|
|
8825
|
-
|
|
8826
|
-
const metadata$e = {
|
|
8827
|
-
"key": "ce587d0f21754af05240cb32a4880227cb0ea1e1"};
|
|
8828
|
-
|
|
8829
|
-
const metadata$d = {
|
|
8830
|
-
"key": "ac5331cec7a2c75b671df5b85ef247dfd820dd2f"};
|
|
8831
|
-
|
|
8832
|
-
const metadata$c = {
|
|
8833
|
-
"key": "88b2399c930c85f9ce2972163a078bc684b84bbe"};
|
|
8834
|
-
|
|
8835
|
-
const metadata$b = {
|
|
8836
|
-
"key": "6e6779a372cab2485a0e25529bc4dbc9932a7346"};
|
|
8837
|
-
|
|
8838
|
-
const metadata$a = {
|
|
8839
|
-
"key": "ec43e4e881f7048e95601f8b58c01a0905a174e0"};
|
|
8840
|
-
|
|
8841
|
-
const metadata$9 = {
|
|
8842
|
-
"key": "3ad7133ba52755867f42f9232375f75639e00d58"};
|
|
8843
|
-
|
|
8844
|
-
const metadata$8 = {
|
|
8845
|
-
"key": "38722ffeb4c966256a709155e8ddac50c93d7c60"};
|
|
8846
|
-
|
|
8847
|
-
const metadata$7 = {
|
|
8848
|
-
"key": "ef22c3288722fbfa64a5ab73df397ade88f8e05a"};
|
|
8849
|
-
|
|
8850
|
-
const metadata$6 = {
|
|
8851
|
-
"key": "81b17fb8c7d731a19cf8d36a8605559d41414eca"};
|
|
8852
|
-
|
|
8853
|
-
const metadata$5 = {
|
|
8854
|
-
"key": "c07bfe331cf214375fce9ad47cb6fdb459d1fb1b"};
|
|
8855
|
-
|
|
8856
|
-
const metadata$4 = {
|
|
8857
|
-
"key": "80ce5a33b5ab713ab3bd2449472e2fb13d78c7f3"};
|
|
8858
|
-
|
|
8859
|
-
const metadata$3 = {
|
|
8860
|
-
"key": "ffe33411fb8796f7a95d3637b90150007f0dd954"};
|
|
8861
|
-
|
|
8862
|
-
const metadata$2 = {
|
|
8863
|
-
"key": "601f788792916250e33d04bd3165dee1404342df"};
|
|
8864
|
-
|
|
8865
|
-
const metadata$1 = {
|
|
8866
|
-
"key": "c49873c37a639f0dffdea4efd0eb43760d66c141"};
|
|
8867
|
-
|
|
8868
|
-
const metadata = {
|
|
8869
|
-
"key": "1d240ee5fd7a56879713e69cbea1b6f006f0ea22"};
|
|
8870
|
-
|
|
8871
8871
|
const iconRecord = {
|
|
8872
8872
|
"8b12671ecc2e0d9bd87c854fd10f7907bd06c54b": {
|
|
8873
8873
|
name: "icon_arrow_left",
|
|
@@ -11738,35 +11738,6 @@ function stringifyElement(element) {
|
|
|
11738
11738
|
return recursive(element, 0);
|
|
11739
11739
|
}
|
|
11740
11740
|
|
|
11741
|
-
function traverseNode(node, callback) {
|
|
11742
|
-
if ("children" in node) {
|
|
11743
|
-
node.children.forEach((child)=>traverseNode(child, callback));
|
|
11744
|
-
} else {
|
|
11745
|
-
callback(node);
|
|
11746
|
-
}
|
|
11747
|
-
}
|
|
11748
|
-
function findOne(node, callback) {
|
|
11749
|
-
let result;
|
|
11750
|
-
traverseNode(node, (n)=>{
|
|
11751
|
-
if (callback(n)) {
|
|
11752
|
-
result = n;
|
|
11753
|
-
}
|
|
11754
|
-
});
|
|
11755
|
-
return result;
|
|
11756
|
-
}
|
|
11757
|
-
function findAll(node, callback) {
|
|
11758
|
-
const result = [];
|
|
11759
|
-
traverseNode(node, (n)=>{
|
|
11760
|
-
if (callback(n)) {
|
|
11761
|
-
result.push(n);
|
|
11762
|
-
}
|
|
11763
|
-
});
|
|
11764
|
-
return result;
|
|
11765
|
-
}
|
|
11766
|
-
function findAllInstances({ node, key }) {
|
|
11767
|
-
return findAll(node, (n)=>n.type === "INSTANCE" && (n.componentKey === key || n.componentSetKey === key));
|
|
11768
|
-
}
|
|
11769
|
-
|
|
11770
11741
|
function handleSize(size) {
|
|
11771
11742
|
switch(size){
|
|
11772
11743
|
case "XSmall":
|
|
@@ -11829,6 +11800,7 @@ const actionButtonHandler = {
|
|
|
11829
11800
|
return createElement("ActionButton", commonProps, children);
|
|
11830
11801
|
}
|
|
11831
11802
|
};
|
|
11803
|
+
|
|
11832
11804
|
const actionChipHandler = {
|
|
11833
11805
|
key: metadata$t.key,
|
|
11834
11806
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -11884,6 +11856,36 @@ const actionChipHandler = {
|
|
|
11884
11856
|
return createElement("ActionChip", commonProps, children);
|
|
11885
11857
|
}
|
|
11886
11858
|
};
|
|
11859
|
+
|
|
11860
|
+
function traverseNode(node, callback) {
|
|
11861
|
+
if ("children" in node) {
|
|
11862
|
+
node.children.forEach((child)=>traverseNode(child, callback));
|
|
11863
|
+
} else {
|
|
11864
|
+
callback(node);
|
|
11865
|
+
}
|
|
11866
|
+
}
|
|
11867
|
+
function findOne(node, callback) {
|
|
11868
|
+
let result;
|
|
11869
|
+
traverseNode(node, (n)=>{
|
|
11870
|
+
if (callback(n)) {
|
|
11871
|
+
result = n;
|
|
11872
|
+
}
|
|
11873
|
+
});
|
|
11874
|
+
return result;
|
|
11875
|
+
}
|
|
11876
|
+
function findAll(node, callback) {
|
|
11877
|
+
const result = [];
|
|
11878
|
+
traverseNode(node, (n)=>{
|
|
11879
|
+
if (callback(n)) {
|
|
11880
|
+
result.push(n);
|
|
11881
|
+
}
|
|
11882
|
+
});
|
|
11883
|
+
return result;
|
|
11884
|
+
}
|
|
11885
|
+
function findAllInstances({ node, key }) {
|
|
11886
|
+
return findAll(node, (n)=>n.type === "INSTANCE" && (n.componentKey === key || n.componentSetKey === key));
|
|
11887
|
+
}
|
|
11888
|
+
|
|
11887
11889
|
const actionSheetHandler = {
|
|
11888
11890
|
key: metadata$s.key,
|
|
11889
11891
|
codegen: async (node)=>{
|
|
@@ -11930,6 +11932,7 @@ const actionSheetItemHandler = {
|
|
|
11930
11932
|
return createElement("ActionSheetItem", commonProps);
|
|
11931
11933
|
}
|
|
11932
11934
|
};
|
|
11935
|
+
|
|
11933
11936
|
const appBarHandler = {
|
|
11934
11937
|
key: metadata$5.key,
|
|
11935
11938
|
codegen: async (node)=>{
|
|
@@ -12045,10 +12048,21 @@ const appBarRightHandler = {
|
|
|
12045
12048
|
return createElement("AppBarRight", undefined, children);
|
|
12046
12049
|
}
|
|
12047
12050
|
};
|
|
12048
|
-
|
|
12051
|
+
|
|
12052
|
+
const identityPlaceholderHandler = {
|
|
12053
|
+
key: metadata$f.key,
|
|
12054
|
+
codegen: async ({ componentProperties: props })=>{
|
|
12055
|
+
const commonProps = {
|
|
12056
|
+
identity: changeCase.camelCase(props.Identity.value)
|
|
12057
|
+
};
|
|
12058
|
+
return createElement("IdentityPlaceholder", commonProps);
|
|
12059
|
+
}
|
|
12060
|
+
};
|
|
12061
|
+
|
|
12062
|
+
const avatarHandler = {
|
|
12049
12063
|
key: metadata$r.key,
|
|
12050
12064
|
codegen: async (node)=>{
|
|
12051
|
-
const [placeholder] =
|
|
12065
|
+
const [placeholder] = findAllInstances({
|
|
12052
12066
|
node,
|
|
12053
12067
|
key: identityPlaceholderHandler.key
|
|
12054
12068
|
});
|
|
@@ -12067,6 +12081,7 @@ const avatarHandler = {
|
|
|
12067
12081
|
return createElement("Avatar", commonProps, props["Show Badge#1398:26"].value ? createElement("AvatarBadge", {}) : undefined, avatarHasSrc ? "alt 텍스트를 제공해야 합니다." : undefined);
|
|
12068
12082
|
}
|
|
12069
12083
|
};
|
|
12084
|
+
|
|
12070
12085
|
const avatarStackHandler = {
|
|
12071
12086
|
key: metadata$q.key,
|
|
12072
12087
|
codegen: async (node)=>{
|
|
@@ -12090,6 +12105,7 @@ const avatarStackHandler = {
|
|
|
12090
12105
|
return createElement("AvatarStack", commonProps, avatarStackChildren);
|
|
12091
12106
|
}
|
|
12092
12107
|
};
|
|
12108
|
+
|
|
12093
12109
|
const badgeHandler = {
|
|
12094
12110
|
key: metadata$p.key,
|
|
12095
12111
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12102,6 +12118,7 @@ const badgeHandler = {
|
|
|
12102
12118
|
return createElement("Badge", commonProps, props["Label#1584:0"].value);
|
|
12103
12119
|
}
|
|
12104
12120
|
};
|
|
12121
|
+
|
|
12105
12122
|
const calloutHandler = {
|
|
12106
12123
|
key: metadata$o.key,
|
|
12107
12124
|
codegen: async ({ componentProperties: props, children })=>{
|
|
@@ -12170,6 +12187,7 @@ const calloutHandler = {
|
|
|
12170
12187
|
return createElement(tag, commonProps);
|
|
12171
12188
|
}
|
|
12172
12189
|
};
|
|
12190
|
+
|
|
12173
12191
|
const checkboxHandler = {
|
|
12174
12192
|
key: metadata$n.key,
|
|
12175
12193
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12193,10 +12211,11 @@ const checkboxHandler = {
|
|
|
12193
12211
|
return createElement("Checkbox", commonProps);
|
|
12194
12212
|
}
|
|
12195
12213
|
};
|
|
12214
|
+
|
|
12196
12215
|
const chipTabsHandler = {
|
|
12197
12216
|
key: metadata$m.key,
|
|
12198
12217
|
codegen: async (node)=>{
|
|
12199
|
-
const chipTabsItems =
|
|
12218
|
+
const chipTabsItems = findAllInstances({
|
|
12200
12219
|
node,
|
|
12201
12220
|
key: chipTabsItemHandler.key
|
|
12202
12221
|
});
|
|
@@ -12224,6 +12243,7 @@ const chipTabsItemHandler = {
|
|
|
12224
12243
|
return createElement("ChipTabsTrigger", commonProps, props["Label#8876:0"].value);
|
|
12225
12244
|
}
|
|
12226
12245
|
};
|
|
12246
|
+
|
|
12227
12247
|
const controlChipHandler = {
|
|
12228
12248
|
key: metadata$l.key,
|
|
12229
12249
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12282,6 +12302,7 @@ const controlChipHandler = {
|
|
|
12282
12302
|
return createElement("ControlChip.Toggle", commonProps, children);
|
|
12283
12303
|
}
|
|
12284
12304
|
};
|
|
12305
|
+
|
|
12285
12306
|
const errorStateHandler = {
|
|
12286
12307
|
key: metadata$k.key,
|
|
12287
12308
|
codegen: async (node)=>{
|
|
@@ -12308,6 +12329,7 @@ const errorStateHandler = {
|
|
|
12308
12329
|
return createElement("ErrorState", commonProps);
|
|
12309
12330
|
}
|
|
12310
12331
|
};
|
|
12332
|
+
|
|
12311
12333
|
const extendedActionSheetHandler = {
|
|
12312
12334
|
key: metadata$j.key,
|
|
12313
12335
|
codegen: async (node)=>{
|
|
@@ -12359,6 +12381,7 @@ const extendedActionSheetItemHandler = {
|
|
|
12359
12381
|
]);
|
|
12360
12382
|
}
|
|
12361
12383
|
};
|
|
12384
|
+
|
|
12362
12385
|
const extendedFabHandler = {
|
|
12363
12386
|
key: metadata$i.key,
|
|
12364
12387
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12374,12 +12397,14 @@ const extendedFabHandler = {
|
|
|
12374
12397
|
]);
|
|
12375
12398
|
}
|
|
12376
12399
|
};
|
|
12400
|
+
|
|
12377
12401
|
const fabHandler = {
|
|
12378
12402
|
key: metadata$h.key,
|
|
12379
12403
|
codegen: async ({ componentProperties: props })=>{
|
|
12380
12404
|
return createElement("Fab", undefined, createElement(createIconTagNameFromKey(props["Icon#28796:0"].componentKey)), "aria-label이나 aria-labelledby 중 하나를 제공해야 합니다.");
|
|
12381
12405
|
}
|
|
12382
12406
|
};
|
|
12407
|
+
|
|
12383
12408
|
const helpBubbleHandler = {
|
|
12384
12409
|
key: metadata$g.key,
|
|
12385
12410
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12423,15 +12448,7 @@ const helpBubbleHandler = {
|
|
|
12423
12448
|
return createElement("HelpBubbleTrigger", commonProps, createElement("ActionButton", undefined, "열기", "HelpBubble을 여는 요소를 제공해주세요."));
|
|
12424
12449
|
}
|
|
12425
12450
|
};
|
|
12426
|
-
|
|
12427
|
-
key: metadata$f.key,
|
|
12428
|
-
codegen: async ({ componentProperties: props })=>{
|
|
12429
|
-
const commonProps = {
|
|
12430
|
-
identity: changeCase.camelCase(props.Identity.value)
|
|
12431
|
-
};
|
|
12432
|
-
return createElement("IdentityPlaceholder", commonProps);
|
|
12433
|
-
}
|
|
12434
|
-
};
|
|
12451
|
+
|
|
12435
12452
|
const inlineBannerHandler = {
|
|
12436
12453
|
key: metadata$e.key,
|
|
12437
12454
|
codegen: async (node)=>{
|
|
@@ -12487,6 +12504,7 @@ const inlineBannerHandler = {
|
|
|
12487
12504
|
return createElement(tag, commonProps);
|
|
12488
12505
|
}
|
|
12489
12506
|
};
|
|
12507
|
+
|
|
12490
12508
|
const mannerTempBadgeHandler = {
|
|
12491
12509
|
key: metadata$d.key,
|
|
12492
12510
|
codegen: async ({ children })=>{
|
|
@@ -12497,6 +12515,7 @@ const mannerTempBadgeHandler = {
|
|
|
12497
12515
|
return createElement("MannerTempBadge", commonProps);
|
|
12498
12516
|
}
|
|
12499
12517
|
};
|
|
12518
|
+
|
|
12500
12519
|
const multilineTextFieldHandler = {
|
|
12501
12520
|
key: metadata$c.key,
|
|
12502
12521
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12544,6 +12563,7 @@ const multilineTextFieldHandler = {
|
|
|
12544
12563
|
return createElement("TextField", commonProps, TextFieldChildren);
|
|
12545
12564
|
}
|
|
12546
12565
|
};
|
|
12566
|
+
|
|
12547
12567
|
const progressCircleHandler = {
|
|
12548
12568
|
key: metadata$b.key,
|
|
12549
12569
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12578,6 +12598,7 @@ const progressCircleHandler = {
|
|
|
12578
12598
|
return createElement("ProgressCircle", commonProps);
|
|
12579
12599
|
}
|
|
12580
12600
|
};
|
|
12601
|
+
|
|
12581
12602
|
const reactionButtonHandler = {
|
|
12582
12603
|
key: metadata$a.key,
|
|
12583
12604
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12603,6 +12624,7 @@ const reactionButtonHandler = {
|
|
|
12603
12624
|
]);
|
|
12604
12625
|
}
|
|
12605
12626
|
};
|
|
12627
|
+
|
|
12606
12628
|
const segmentedControlHandler = {
|
|
12607
12629
|
key: metadata$9.key,
|
|
12608
12630
|
codegen: async (node)=>{
|
|
@@ -12633,6 +12655,7 @@ const segmentedControlItemHandler = {
|
|
|
12633
12655
|
return createElement("SegmentedControlItem", commonProps, props["Label#11366:15"].value);
|
|
12634
12656
|
}
|
|
12635
12657
|
};
|
|
12658
|
+
|
|
12636
12659
|
const selectBoxGroupHandler = {
|
|
12637
12660
|
key: metadata$v.key,
|
|
12638
12661
|
codegen: async (node)=>{
|
|
@@ -12645,7 +12668,7 @@ const selectBoxGroupHandler = {
|
|
|
12645
12668
|
return "RadioSelectBoxGroup";
|
|
12646
12669
|
}
|
|
12647
12670
|
})();
|
|
12648
|
-
const selectBoxes =
|
|
12671
|
+
const selectBoxes = findAllInstances({
|
|
12649
12672
|
node,
|
|
12650
12673
|
key: selectBoxHandler.key
|
|
12651
12674
|
});
|
|
@@ -12688,6 +12711,7 @@ const selectBoxHandler = {
|
|
|
12688
12711
|
return createElement(tag, commonProps);
|
|
12689
12712
|
}
|
|
12690
12713
|
};
|
|
12714
|
+
|
|
12691
12715
|
const skeletonHandler = {
|
|
12692
12716
|
key: metadata$7.key,
|
|
12693
12717
|
codegen: async ({ componentProperties: props, absoluteBoundingBox, layoutSizingHorizontal, layoutSizingVertical, boundVariables })=>{
|
|
@@ -12725,6 +12749,7 @@ const skeletonHandler = {
|
|
|
12725
12749
|
return createElement("Skeleton", commonProps);
|
|
12726
12750
|
}
|
|
12727
12751
|
};
|
|
12752
|
+
|
|
12728
12753
|
const snackbarHandler = {
|
|
12729
12754
|
key: metadata$6.key,
|
|
12730
12755
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12739,6 +12764,28 @@ const snackbarHandler = {
|
|
|
12739
12764
|
return createElement("Snackbar", commonProps);
|
|
12740
12765
|
}
|
|
12741
12766
|
};
|
|
12767
|
+
|
|
12768
|
+
const switchHandler = {
|
|
12769
|
+
key: metadata$4.key,
|
|
12770
|
+
codegen: async ({ componentProperties: props })=>{
|
|
12771
|
+
const states = props.State.value.split("-");
|
|
12772
|
+
const size = handleSize(props.Size.value);
|
|
12773
|
+
const commonProps = {
|
|
12774
|
+
size,
|
|
12775
|
+
...size === "small" && {
|
|
12776
|
+
label: props["Label#15191:2"].value
|
|
12777
|
+
},
|
|
12778
|
+
...states.includes("Selected") && {
|
|
12779
|
+
defaultChecked: true
|
|
12780
|
+
},
|
|
12781
|
+
...states.includes("Disabled") && {
|
|
12782
|
+
disabled: true
|
|
12783
|
+
}
|
|
12784
|
+
};
|
|
12785
|
+
return createElement("Switch", commonProps);
|
|
12786
|
+
}
|
|
12787
|
+
};
|
|
12788
|
+
|
|
12742
12789
|
const tabsHandler = {
|
|
12743
12790
|
key: metadata$3.key,
|
|
12744
12791
|
codegen: async ({ componentProperties: props, children })=>{
|
|
@@ -12815,6 +12862,7 @@ const tabsFillItemHandler = {
|
|
|
12815
12862
|
return createElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
|
|
12816
12863
|
}
|
|
12817
12864
|
};
|
|
12865
|
+
|
|
12818
12866
|
const textButtonHandler = {
|
|
12819
12867
|
key: metadata$2.key,
|
|
12820
12868
|
codegen: async (node)=>{
|
|
@@ -12845,6 +12893,7 @@ const textButtonHandler = {
|
|
|
12845
12893
|
return createElement("TextButton", commonProps, children);
|
|
12846
12894
|
}
|
|
12847
12895
|
};
|
|
12896
|
+
|
|
12848
12897
|
const textFieldHandler = {
|
|
12849
12898
|
key: metadata$1.key,
|
|
12850
12899
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12905,26 +12954,7 @@ const textFieldHandler = {
|
|
|
12905
12954
|
return createElement("TextField", commonProps, TextFieldChildren);
|
|
12906
12955
|
}
|
|
12907
12956
|
};
|
|
12908
|
-
|
|
12909
|
-
key: metadata$4.key,
|
|
12910
|
-
codegen: async ({ componentProperties: props })=>{
|
|
12911
|
-
const states = props.State.value.split("-");
|
|
12912
|
-
const size = handleSize(props.Size.value);
|
|
12913
|
-
const commonProps = {
|
|
12914
|
-
size,
|
|
12915
|
-
...size === "small" && {
|
|
12916
|
-
label: props["Label#15191:2"].value
|
|
12917
|
-
},
|
|
12918
|
-
...states.includes("Selected") && {
|
|
12919
|
-
defaultChecked: true
|
|
12920
|
-
},
|
|
12921
|
-
...states.includes("Disabled") && {
|
|
12922
|
-
disabled: true
|
|
12923
|
-
}
|
|
12924
|
-
};
|
|
12925
|
-
return createElement("Switch", commonProps);
|
|
12926
|
-
}
|
|
12927
|
-
};
|
|
12957
|
+
|
|
12928
12958
|
const toggleButtonHandler = {
|
|
12929
12959
|
key: metadata.key,
|
|
12930
12960
|
codegen: async ({ componentProperties: props })=>{
|
|
@@ -12953,6 +12983,7 @@ const toggleButtonHandler = {
|
|
|
12953
12983
|
]);
|
|
12954
12984
|
}
|
|
12955
12985
|
};
|
|
12986
|
+
|
|
12956
12987
|
const componentHandlers = [
|
|
12957
12988
|
actionButtonHandler,
|
|
12958
12989
|
actionChipHandler,
|
|
@@ -12996,6 +13027,162 @@ const ignoredComponentKeys = new Set([
|
|
|
12996
13027
|
"b38b719b61cdf1a24458d7a7888bee74b7649084"
|
|
12997
13028
|
]);
|
|
12998
13029
|
|
|
13030
|
+
const FIGMA_TEXT_STYLES = [
|
|
13031
|
+
{
|
|
13032
|
+
id: "S:2fec4e47f53f75ea46bee4d740795e099af5472f,",
|
|
13033
|
+
key: "2fec4e47f53f75ea46bee4d740795e099af5472f",
|
|
13034
|
+
name: "legacy-14-150"
|
|
13035
|
+
},
|
|
13036
|
+
{
|
|
13037
|
+
id: "S:af24f9e7cc90af3bf2a18029dd59ae0646966486,",
|
|
13038
|
+
key: "af24f9e7cc90af3bf2a18029dd59ae0646966486",
|
|
13039
|
+
name: "legacy-13-150"
|
|
13040
|
+
},
|
|
13041
|
+
{
|
|
13042
|
+
id: "S:4d54fb58fa4a63a6ddec973099b4babfbe502849,",
|
|
13043
|
+
key: "4d54fb58fa4a63a6ddec973099b4babfbe502849",
|
|
13044
|
+
name: "scale/t1-regular"
|
|
13045
|
+
},
|
|
13046
|
+
{
|
|
13047
|
+
id: "S:49735ed4693e2f7e9d98b6b6e3818f38e2fe77a8,",
|
|
13048
|
+
key: "49735ed4693e2f7e9d98b6b6e3818f38e2fe77a8",
|
|
13049
|
+
name: "scale/t1-medium"
|
|
13050
|
+
},
|
|
13051
|
+
{
|
|
13052
|
+
id: "S:337e113e2fafc22ccd5423b3fc7a7da69a6c917c,",
|
|
13053
|
+
key: "337e113e2fafc22ccd5423b3fc7a7da69a6c917c",
|
|
13054
|
+
name: "scale/t1-bold"
|
|
13055
|
+
},
|
|
13056
|
+
{
|
|
13057
|
+
id: "S:711eaf0bd91b906e108f3508cf7845fc82294b1a,",
|
|
13058
|
+
key: "711eaf0bd91b906e108f3508cf7845fc82294b1a",
|
|
13059
|
+
name: "scale/t2-regular"
|
|
13060
|
+
},
|
|
13061
|
+
{
|
|
13062
|
+
id: "S:2aff06b0ad8be136acbfb3090fa4dde1f9eac48e,",
|
|
13063
|
+
key: "2aff06b0ad8be136acbfb3090fa4dde1f9eac48e",
|
|
13064
|
+
name: "scale/t2-medium"
|
|
13065
|
+
},
|
|
13066
|
+
{
|
|
13067
|
+
id: "S:8378bd59b14f5682dcaf20110efde4b7a1fb18e3,",
|
|
13068
|
+
key: "8378bd59b14f5682dcaf20110efde4b7a1fb18e3",
|
|
13069
|
+
name: "scale/t2-bold"
|
|
13070
|
+
},
|
|
13071
|
+
{
|
|
13072
|
+
id: "S:22ead16ee07b342df4a26952bc987f3155988779,",
|
|
13073
|
+
key: "22ead16ee07b342df4a26952bc987f3155988779",
|
|
13074
|
+
name: "scale/t3-regular"
|
|
13075
|
+
},
|
|
13076
|
+
{
|
|
13077
|
+
id: "S:96a2f248d201c246587d63eb4d00cb7610897400,",
|
|
13078
|
+
key: "96a2f248d201c246587d63eb4d00cb7610897400",
|
|
13079
|
+
name: "scale/t3-medium"
|
|
13080
|
+
},
|
|
13081
|
+
{
|
|
13082
|
+
id: "S:f749d659a689cbbecbdbb1b559056731234332a3,",
|
|
13083
|
+
key: "f749d659a689cbbecbdbb1b559056731234332a3",
|
|
13084
|
+
name: "scale/t3-bold"
|
|
13085
|
+
},
|
|
13086
|
+
{
|
|
13087
|
+
id: "S:b23d3e206b0244690c19472fd78bfc33b9b46d06,",
|
|
13088
|
+
key: "b23d3e206b0244690c19472fd78bfc33b9b46d06",
|
|
13089
|
+
name: "scale/t4-regular"
|
|
13090
|
+
},
|
|
13091
|
+
{
|
|
13092
|
+
id: "S:2c143ba862b3c1af10a0bd5d2e723bd12e7878ef,",
|
|
13093
|
+
key: "2c143ba862b3c1af10a0bd5d2e723bd12e7878ef",
|
|
13094
|
+
name: "scale/t4-medium"
|
|
13095
|
+
},
|
|
13096
|
+
{
|
|
13097
|
+
id: "S:a85ea49c1625319427c047bc206c26e708012030,",
|
|
13098
|
+
key: "a85ea49c1625319427c047bc206c26e708012030",
|
|
13099
|
+
name: "scale/t4-bold"
|
|
13100
|
+
},
|
|
13101
|
+
{
|
|
13102
|
+
id: "S:54a5a4c2bfc09573fba3a8efe0dafff067cf53bd,",
|
|
13103
|
+
key: "54a5a4c2bfc09573fba3a8efe0dafff067cf53bd",
|
|
13104
|
+
name: "scale/t5-regular"
|
|
13105
|
+
},
|
|
13106
|
+
{
|
|
13107
|
+
id: "S:bc8bcf3caa904cdc2e1c2983d0f12d32832d7374,",
|
|
13108
|
+
key: "bc8bcf3caa904cdc2e1c2983d0f12d32832d7374",
|
|
13109
|
+
name: "scale/t5-medium"
|
|
13110
|
+
},
|
|
13111
|
+
{
|
|
13112
|
+
id: "S:8eff229c53f06eeb418f39ad1cb3dbe12480f12b,",
|
|
13113
|
+
key: "8eff229c53f06eeb418f39ad1cb3dbe12480f12b",
|
|
13114
|
+
name: "scale/t5-bold"
|
|
13115
|
+
},
|
|
13116
|
+
{
|
|
13117
|
+
id: "S:6608eaab965859080a5effa6e23eb857d888057f,",
|
|
13118
|
+
key: "6608eaab965859080a5effa6e23eb857d888057f",
|
|
13119
|
+
name: "scale/t6-regular"
|
|
13120
|
+
},
|
|
13121
|
+
{
|
|
13122
|
+
id: "S:02ee25a9050a9c78dbaa03ea006aa4d1db593e99,",
|
|
13123
|
+
key: "02ee25a9050a9c78dbaa03ea006aa4d1db593e99",
|
|
13124
|
+
name: "scale/t6-medium"
|
|
13125
|
+
},
|
|
13126
|
+
{
|
|
13127
|
+
id: "S:adf921a56e89b5737a6b626034cfea184e828370,",
|
|
13128
|
+
key: "adf921a56e89b5737a6b626034cfea184e828370",
|
|
13129
|
+
name: "scale/t6-bold"
|
|
13130
|
+
},
|
|
13131
|
+
{
|
|
13132
|
+
id: "S:eb1c0409582609a51fe9afc9e31301d529e3d12f,",
|
|
13133
|
+
key: "eb1c0409582609a51fe9afc9e31301d529e3d12f",
|
|
13134
|
+
name: "scale/t7-regular"
|
|
13135
|
+
},
|
|
13136
|
+
{
|
|
13137
|
+
id: "S:b2e24640e7dc1264fc638434511c9f994e1e149c,",
|
|
13138
|
+
key: "b2e24640e7dc1264fc638434511c9f994e1e149c",
|
|
13139
|
+
name: "scale/t7-medium"
|
|
13140
|
+
},
|
|
13141
|
+
{
|
|
13142
|
+
id: "S:182d9252d7f7380075915a89e6160d7595124bc3,",
|
|
13143
|
+
key: "182d9252d7f7380075915a89e6160d7595124bc3",
|
|
13144
|
+
name: "scale/t7-bold"
|
|
13145
|
+
},
|
|
13146
|
+
{
|
|
13147
|
+
id: "S:b7f864e3f64524a863d38729e2cea18f44c7ebaa,",
|
|
13148
|
+
key: "b7f864e3f64524a863d38729e2cea18f44c7ebaa",
|
|
13149
|
+
name: "scale/t8-bold"
|
|
13150
|
+
},
|
|
13151
|
+
{
|
|
13152
|
+
id: "S:b146e1317c67db787834f1890493225bdbba4e48,",
|
|
13153
|
+
key: "b146e1317c67db787834f1890493225bdbba4e48",
|
|
13154
|
+
name: "scale/t9-bold"
|
|
13155
|
+
},
|
|
13156
|
+
{
|
|
13157
|
+
id: "S:6ea6b06312771259d59de265a5ef12cd1dae9102,",
|
|
13158
|
+
key: "6ea6b06312771259d59de265a5ef12cd1dae9102",
|
|
13159
|
+
name: "scale/t10-bold"
|
|
13160
|
+
},
|
|
13161
|
+
{
|
|
13162
|
+
id: "S:85422ef9f0230f821f1a9e6d2f8f86b3ba87f20d,",
|
|
13163
|
+
key: "85422ef9f0230f821f1a9e6d2f8f86b3ba87f20d",
|
|
13164
|
+
name: "semantic/article-body"
|
|
13165
|
+
},
|
|
13166
|
+
{
|
|
13167
|
+
id: "S:d918eb7069e10c8dd745abf40bc375004c1badb8,",
|
|
13168
|
+
key: "d918eb7069e10c8dd745abf40bc375004c1badb8",
|
|
13169
|
+
name: "semantic/screen-title"
|
|
13170
|
+
}
|
|
13171
|
+
];
|
|
13172
|
+
|
|
13173
|
+
function inferLayoutComponent(props) {
|
|
13174
|
+
if (props.flexDirection === "row" && props.alignItems === "flexStart" && props.justifyContent === "flexStart" && props.flexWrap === "wrap") {
|
|
13175
|
+
return "Inline";
|
|
13176
|
+
}
|
|
13177
|
+
if (props.flexDirection === "row" && props.justifyContent === "flexStart" && props.flexWrap === "nowrap") {
|
|
13178
|
+
return "Columns";
|
|
13179
|
+
}
|
|
13180
|
+
if (props.flexDirection === "column") {
|
|
13181
|
+
return "Stack";
|
|
13182
|
+
}
|
|
13183
|
+
return "Flex";
|
|
13184
|
+
}
|
|
13185
|
+
|
|
12999
13186
|
const layoutPropHandlers = {
|
|
13000
13187
|
flexDirection: ({ layoutMode })=>layoutMode === "HORIZONTAL" ? "row" : "column",
|
|
13001
13188
|
justifyContent: ({ primaryAxisAlignItems })=>{
|
|
@@ -13110,6 +13297,7 @@ const layoutShorthandHandlers = {
|
|
|
13110
13297
|
return undefined;
|
|
13111
13298
|
}
|
|
13112
13299
|
};
|
|
13300
|
+
// Default values
|
|
13113
13301
|
const layoutPropDefaults = {
|
|
13114
13302
|
flexDirection: "row",
|
|
13115
13303
|
justifyContent: "flexStart",
|
|
@@ -13186,17 +13374,14 @@ function createLayoutProps(node) {
|
|
|
13186
13374
|
}
|
|
13187
13375
|
|
|
13188
13376
|
const sizingPropHandlers = {
|
|
13189
|
-
height: ({ boundVariables, layoutSizingVertical,
|
|
13190
|
-
width: ({ boundVariables, layoutSizingHorizontal,
|
|
13377
|
+
height: ({ boundVariables, layoutSizingVertical, absoluteBoundingBox })=>layoutSizingVertical === "FIXED" ? boundVariables?.size?.y ? getLayoutVariableName(boundVariables.size.y.id) : inferDimension(absoluteBoundingBox?.height ?? 0) : undefined,
|
|
13378
|
+
width: ({ boundVariables, layoutSizingHorizontal, absoluteBoundingBox })=>layoutSizingHorizontal === "FIXED" ? boundVariables?.size?.x ? getLayoutVariableName(boundVariables.size.x.id) : inferDimension(absoluteBoundingBox?.width ?? 0) : undefined
|
|
13191
13379
|
};
|
|
13192
13380
|
function createSizingProps(node) {
|
|
13193
13381
|
const boundVariables = node.boundVariables;
|
|
13194
13382
|
const layoutSizingHorizontal = node.layoutSizingHorizontal ?? "FIXED";
|
|
13195
13383
|
const layoutSizingVertical = node.layoutSizingVertical ?? "FIXED";
|
|
13196
|
-
const
|
|
13197
|
-
width: 0,
|
|
13198
|
-
height: 0
|
|
13199
|
-
};
|
|
13384
|
+
const absoluteBoundingBox = node.absoluteBoundingBox;
|
|
13200
13385
|
if (!boundVariables) {
|
|
13201
13386
|
return {};
|
|
13202
13387
|
}
|
|
@@ -13206,8 +13391,7 @@ function createSizingProps(node) {
|
|
|
13206
13391
|
boundVariables,
|
|
13207
13392
|
layoutSizingHorizontal,
|
|
13208
13393
|
layoutSizingVertical,
|
|
13209
|
-
|
|
13210
|
-
height
|
|
13394
|
+
absoluteBoundingBox
|
|
13211
13395
|
});
|
|
13212
13396
|
if (value !== undefined) {
|
|
13213
13397
|
result[prop] = value;
|
|
@@ -13216,6 +13400,7 @@ function createSizingProps(node) {
|
|
|
13216
13400
|
return result;
|
|
13217
13401
|
}
|
|
13218
13402
|
|
|
13403
|
+
// TODO: handle raw values
|
|
13219
13404
|
function createTextProps(boundVariables) {
|
|
13220
13405
|
const fontSizeBoundVariables = boundVariables?.fontSize?.[0];
|
|
13221
13406
|
const fontStyleBoundVariables = boundVariables?.fontStyle?.[0];
|
|
@@ -13227,151 +13412,7 @@ function createTextProps(boundVariables) {
|
|
|
13227
13412
|
};
|
|
13228
13413
|
}
|
|
13229
13414
|
|
|
13230
|
-
const
|
|
13231
|
-
{
|
|
13232
|
-
id: "S:2fec4e47f53f75ea46bee4d740795e099af5472f,",
|
|
13233
|
-
key: "2fec4e47f53f75ea46bee4d740795e099af5472f",
|
|
13234
|
-
name: "legacy-14-150"
|
|
13235
|
-
},
|
|
13236
|
-
{
|
|
13237
|
-
id: "S:af24f9e7cc90af3bf2a18029dd59ae0646966486,",
|
|
13238
|
-
key: "af24f9e7cc90af3bf2a18029dd59ae0646966486",
|
|
13239
|
-
name: "legacy-13-150"
|
|
13240
|
-
},
|
|
13241
|
-
{
|
|
13242
|
-
id: "S:4d54fb58fa4a63a6ddec973099b4babfbe502849,",
|
|
13243
|
-
key: "4d54fb58fa4a63a6ddec973099b4babfbe502849",
|
|
13244
|
-
name: "scale/t1-regular"
|
|
13245
|
-
},
|
|
13246
|
-
{
|
|
13247
|
-
id: "S:49735ed4693e2f7e9d98b6b6e3818f38e2fe77a8,",
|
|
13248
|
-
key: "49735ed4693e2f7e9d98b6b6e3818f38e2fe77a8",
|
|
13249
|
-
name: "scale/t1-medium"
|
|
13250
|
-
},
|
|
13251
|
-
{
|
|
13252
|
-
id: "S:337e113e2fafc22ccd5423b3fc7a7da69a6c917c,",
|
|
13253
|
-
key: "337e113e2fafc22ccd5423b3fc7a7da69a6c917c",
|
|
13254
|
-
name: "scale/t1-bold"
|
|
13255
|
-
},
|
|
13256
|
-
{
|
|
13257
|
-
id: "S:711eaf0bd91b906e108f3508cf7845fc82294b1a,",
|
|
13258
|
-
key: "711eaf0bd91b906e108f3508cf7845fc82294b1a",
|
|
13259
|
-
name: "scale/t2-regular"
|
|
13260
|
-
},
|
|
13261
|
-
{
|
|
13262
|
-
id: "S:2aff06b0ad8be136acbfb3090fa4dde1f9eac48e,",
|
|
13263
|
-
key: "2aff06b0ad8be136acbfb3090fa4dde1f9eac48e",
|
|
13264
|
-
name: "scale/t2-medium"
|
|
13265
|
-
},
|
|
13266
|
-
{
|
|
13267
|
-
id: "S:8378bd59b14f5682dcaf20110efde4b7a1fb18e3,",
|
|
13268
|
-
key: "8378bd59b14f5682dcaf20110efde4b7a1fb18e3",
|
|
13269
|
-
name: "scale/t2-bold"
|
|
13270
|
-
},
|
|
13271
|
-
{
|
|
13272
|
-
id: "S:22ead16ee07b342df4a26952bc987f3155988779,",
|
|
13273
|
-
key: "22ead16ee07b342df4a26952bc987f3155988779",
|
|
13274
|
-
name: "scale/t3-regular"
|
|
13275
|
-
},
|
|
13276
|
-
{
|
|
13277
|
-
id: "S:96a2f248d201c246587d63eb4d00cb7610897400,",
|
|
13278
|
-
key: "96a2f248d201c246587d63eb4d00cb7610897400",
|
|
13279
|
-
name: "scale/t3-medium"
|
|
13280
|
-
},
|
|
13281
|
-
{
|
|
13282
|
-
id: "S:f749d659a689cbbecbdbb1b559056731234332a3,",
|
|
13283
|
-
key: "f749d659a689cbbecbdbb1b559056731234332a3",
|
|
13284
|
-
name: "scale/t3-bold"
|
|
13285
|
-
},
|
|
13286
|
-
{
|
|
13287
|
-
id: "S:b23d3e206b0244690c19472fd78bfc33b9b46d06,",
|
|
13288
|
-
key: "b23d3e206b0244690c19472fd78bfc33b9b46d06",
|
|
13289
|
-
name: "scale/t4-regular"
|
|
13290
|
-
},
|
|
13291
|
-
{
|
|
13292
|
-
id: "S:2c143ba862b3c1af10a0bd5d2e723bd12e7878ef,",
|
|
13293
|
-
key: "2c143ba862b3c1af10a0bd5d2e723bd12e7878ef",
|
|
13294
|
-
name: "scale/t4-medium"
|
|
13295
|
-
},
|
|
13296
|
-
{
|
|
13297
|
-
id: "S:a85ea49c1625319427c047bc206c26e708012030,",
|
|
13298
|
-
key: "a85ea49c1625319427c047bc206c26e708012030",
|
|
13299
|
-
name: "scale/t4-bold"
|
|
13300
|
-
},
|
|
13301
|
-
{
|
|
13302
|
-
id: "S:54a5a4c2bfc09573fba3a8efe0dafff067cf53bd,",
|
|
13303
|
-
key: "54a5a4c2bfc09573fba3a8efe0dafff067cf53bd",
|
|
13304
|
-
name: "scale/t5-regular"
|
|
13305
|
-
},
|
|
13306
|
-
{
|
|
13307
|
-
id: "S:bc8bcf3caa904cdc2e1c2983d0f12d32832d7374,",
|
|
13308
|
-
key: "bc8bcf3caa904cdc2e1c2983d0f12d32832d7374",
|
|
13309
|
-
name: "scale/t5-medium"
|
|
13310
|
-
},
|
|
13311
|
-
{
|
|
13312
|
-
id: "S:8eff229c53f06eeb418f39ad1cb3dbe12480f12b,",
|
|
13313
|
-
key: "8eff229c53f06eeb418f39ad1cb3dbe12480f12b",
|
|
13314
|
-
name: "scale/t5-bold"
|
|
13315
|
-
},
|
|
13316
|
-
{
|
|
13317
|
-
id: "S:6608eaab965859080a5effa6e23eb857d888057f,",
|
|
13318
|
-
key: "6608eaab965859080a5effa6e23eb857d888057f",
|
|
13319
|
-
name: "scale/t6-regular"
|
|
13320
|
-
},
|
|
13321
|
-
{
|
|
13322
|
-
id: "S:02ee25a9050a9c78dbaa03ea006aa4d1db593e99,",
|
|
13323
|
-
key: "02ee25a9050a9c78dbaa03ea006aa4d1db593e99",
|
|
13324
|
-
name: "scale/t6-medium"
|
|
13325
|
-
},
|
|
13326
|
-
{
|
|
13327
|
-
id: "S:adf921a56e89b5737a6b626034cfea184e828370,",
|
|
13328
|
-
key: "adf921a56e89b5737a6b626034cfea184e828370",
|
|
13329
|
-
name: "scale/t6-bold"
|
|
13330
|
-
},
|
|
13331
|
-
{
|
|
13332
|
-
id: "S:eb1c0409582609a51fe9afc9e31301d529e3d12f,",
|
|
13333
|
-
key: "eb1c0409582609a51fe9afc9e31301d529e3d12f",
|
|
13334
|
-
name: "scale/t7-regular"
|
|
13335
|
-
},
|
|
13336
|
-
{
|
|
13337
|
-
id: "S:b2e24640e7dc1264fc638434511c9f994e1e149c,",
|
|
13338
|
-
key: "b2e24640e7dc1264fc638434511c9f994e1e149c",
|
|
13339
|
-
name: "scale/t7-medium"
|
|
13340
|
-
},
|
|
13341
|
-
{
|
|
13342
|
-
id: "S:182d9252d7f7380075915a89e6160d7595124bc3,",
|
|
13343
|
-
key: "182d9252d7f7380075915a89e6160d7595124bc3",
|
|
13344
|
-
name: "scale/t7-bold"
|
|
13345
|
-
},
|
|
13346
|
-
{
|
|
13347
|
-
id: "S:b7f864e3f64524a863d38729e2cea18f44c7ebaa,",
|
|
13348
|
-
key: "b7f864e3f64524a863d38729e2cea18f44c7ebaa",
|
|
13349
|
-
name: "scale/t8-bold"
|
|
13350
|
-
},
|
|
13351
|
-
{
|
|
13352
|
-
id: "S:b146e1317c67db787834f1890493225bdbba4e48,",
|
|
13353
|
-
key: "b146e1317c67db787834f1890493225bdbba4e48",
|
|
13354
|
-
name: "scale/t9-bold"
|
|
13355
|
-
},
|
|
13356
|
-
{
|
|
13357
|
-
id: "S:6ea6b06312771259d59de265a5ef12cd1dae9102,",
|
|
13358
|
-
key: "6ea6b06312771259d59de265a5ef12cd1dae9102",
|
|
13359
|
-
name: "scale/t10-bold"
|
|
13360
|
-
},
|
|
13361
|
-
{
|
|
13362
|
-
id: "S:85422ef9f0230f821f1a9e6d2f8f86b3ba87f20d,",
|
|
13363
|
-
key: "85422ef9f0230f821f1a9e6d2f8f86b3ba87f20d",
|
|
13364
|
-
name: "semantic/article-body"
|
|
13365
|
-
},
|
|
13366
|
-
{
|
|
13367
|
-
id: "S:d918eb7069e10c8dd745abf40bc375004c1badb8,",
|
|
13368
|
-
key: "d918eb7069e10c8dd745abf40bc375004c1badb8",
|
|
13369
|
-
name: "semantic/screen-title"
|
|
13370
|
-
}
|
|
13371
|
-
];
|
|
13372
|
-
|
|
13373
|
-
async function generateCode(selection) {
|
|
13374
|
-
async function handleFrameNode(node) {
|
|
13415
|
+
const defaultFrameHandler = (traverse)=>async (node)=>{
|
|
13375
13416
|
const children = node.children;
|
|
13376
13417
|
const props = {
|
|
13377
13418
|
...createLayoutProps(node),
|
|
@@ -13379,22 +13420,23 @@ async function generateCode(selection) {
|
|
|
13379
13420
|
...createBackgroundProps(node),
|
|
13380
13421
|
...createBorderProps(node)
|
|
13381
13422
|
};
|
|
13382
|
-
|
|
13423
|
+
const layoutComponent = inferLayoutComponent(props);
|
|
13424
|
+
if (layoutComponent === "Stack") {
|
|
13425
|
+
const { flexDirection, ...rest } = props;
|
|
13426
|
+
return createElement("Stack", rest, await Promise.all(children.map(traverse)));
|
|
13427
|
+
}
|
|
13428
|
+
if (layoutComponent === "Inline") {
|
|
13383
13429
|
const { flexDirection, flexWrap, alignItems, justifyContent, ...rest } = props;
|
|
13384
13430
|
return createElement("Inline", rest, await Promise.all(children.map(traverse)));
|
|
13385
13431
|
}
|
|
13386
|
-
if (
|
|
13432
|
+
if (layoutComponent === "Columns") {
|
|
13387
13433
|
const { flexDirection, flexWrap, justifyContent, ...rest } = props;
|
|
13388
13434
|
const childrenResult = await Promise.all(children.map(traverse));
|
|
13389
13435
|
return createElement("Columns", rest, childrenResult.map((child)=>createElement("Column", {}, child)));
|
|
13390
13436
|
}
|
|
13391
|
-
if (props.flexDirection === "column") {
|
|
13392
|
-
const { flexDirection, ...rest } = props;
|
|
13393
|
-
return createElement("Stack", rest, await Promise.all(children.map(traverse)));
|
|
13394
|
-
}
|
|
13395
13437
|
return createElement("Flex", props, await Promise.all(children.map(traverse)));
|
|
13396
|
-
}
|
|
13397
|
-
|
|
13438
|
+
};
|
|
13439
|
+
const defaultTextNodeHandler = ()=>(node)=>{
|
|
13398
13440
|
const maxLines = node.style.textTruncation === "ENDING" ? node.style.maxLines ?? undefined : undefined;
|
|
13399
13441
|
if (node.fills.length > 1) {
|
|
13400
13442
|
throw new Error("Expected a single fill");
|
|
@@ -13421,17 +13463,17 @@ async function generateCode(selection) {
|
|
|
13421
13463
|
lineHeight,
|
|
13422
13464
|
color
|
|
13423
13465
|
}), node.characters.replace(/\n/g, "<br />"));
|
|
13424
|
-
}
|
|
13425
|
-
|
|
13466
|
+
};
|
|
13467
|
+
const defaultRectangleNodeHandler = ()=>(node)=>{
|
|
13426
13468
|
return createElement("Box", {
|
|
13427
13469
|
...createSizingProps(node),
|
|
13428
13470
|
background: "palette.gray200"
|
|
13429
13471
|
}, undefined, "Rectangle Node Placeholder");
|
|
13430
|
-
}
|
|
13431
|
-
|
|
13432
|
-
return
|
|
13433
|
-
}
|
|
13434
|
-
|
|
13472
|
+
};
|
|
13473
|
+
const defaultComponentNodeHandler = (traverse)=>async (node)=>{
|
|
13474
|
+
return defaultFrameHandler(traverse)(node);
|
|
13475
|
+
};
|
|
13476
|
+
const defaultInstanceNodeHandler = (traverse)=>async (node)=>{
|
|
13435
13477
|
const { componentKey, componentSetKey } = node;
|
|
13436
13478
|
if (isIconComponent(componentKey)) {
|
|
13437
13479
|
const iconElement = createElement(createIconTagNameFromKey(componentKey));
|
|
@@ -13460,7 +13502,7 @@ async function generateCode(selection) {
|
|
|
13460
13502
|
return componentData.codegen(node);
|
|
13461
13503
|
}
|
|
13462
13504
|
// if (node.id === selection.id) {
|
|
13463
|
-
return await
|
|
13505
|
+
return await defaultFrameHandler(traverse)(node);
|
|
13464
13506
|
// }
|
|
13465
13507
|
// const mainComponent = node.mainComponent;
|
|
13466
13508
|
// return createElement(
|
|
@@ -13475,7 +13517,21 @@ async function generateCode(selection) {
|
|
|
13475
13517
|
// undefined,
|
|
13476
13518
|
// "Custom Component",
|
|
13477
13519
|
// );
|
|
13478
|
-
}
|
|
13520
|
+
};
|
|
13521
|
+
async function generateCode(selection, options) {
|
|
13522
|
+
const handlers = {
|
|
13523
|
+
frame: defaultFrameHandler,
|
|
13524
|
+
text: defaultTextNodeHandler,
|
|
13525
|
+
rectangle: defaultRectangleNodeHandler,
|
|
13526
|
+
component: defaultComponentNodeHandler,
|
|
13527
|
+
instance: defaultInstanceNodeHandler,
|
|
13528
|
+
...options?.handlers
|
|
13529
|
+
};
|
|
13530
|
+
const handleFrameNode = handlers.frame(traverse);
|
|
13531
|
+
const handleTextNode = handlers.text(traverse);
|
|
13532
|
+
const handleRectangleNode = handlers.rectangle(traverse);
|
|
13533
|
+
const handleComponentNode = handlers.component(traverse);
|
|
13534
|
+
const handleInstanceNode = handlers.instance(traverse);
|
|
13479
13535
|
async function traverse(node) {
|
|
13480
13536
|
if ("visible" in node && !node.visible) {
|
|
13481
13537
|
return;
|
|
@@ -13499,7 +13555,161 @@ async function generateCode(selection) {
|
|
|
13499
13555
|
}
|
|
13500
13556
|
}
|
|
13501
13557
|
|
|
13558
|
+
function createRestNormalizer(ctx) {
|
|
13559
|
+
function normalizeNodes(nodes) {
|
|
13560
|
+
// Figma REST API omits default values for some fields, "visible" is one of them
|
|
13561
|
+
return nodes.filter((node)=>!("visible" in node) || node.visible).map(normalizeNode);
|
|
13562
|
+
}
|
|
13563
|
+
function normalizeNode(node) {
|
|
13564
|
+
if (node.type === "FRAME") {
|
|
13565
|
+
return normalizeFrameNode(node);
|
|
13566
|
+
}
|
|
13567
|
+
if (node.type === "GROUP") {
|
|
13568
|
+
return normalizeGroupNode(node);
|
|
13569
|
+
}
|
|
13570
|
+
if (node.type === "RECTANGLE") {
|
|
13571
|
+
return normalizeRectangleNode(node);
|
|
13572
|
+
}
|
|
13573
|
+
if (node.type === "VECTOR") {
|
|
13574
|
+
return normalizeVectorNode(node);
|
|
13575
|
+
}
|
|
13576
|
+
if (node.type === "BOOLEAN_OPERATION") {
|
|
13577
|
+
return normalizeBooleanOperationNode(node);
|
|
13578
|
+
}
|
|
13579
|
+
if (node.type === "TEXT") {
|
|
13580
|
+
return normalizeTextNode(node);
|
|
13581
|
+
}
|
|
13582
|
+
if (node.type === "COMPONENT") {
|
|
13583
|
+
return normalizeComponentNode(node);
|
|
13584
|
+
}
|
|
13585
|
+
if (node.type === "INSTANCE") {
|
|
13586
|
+
return normalizeInstanceNode(node);
|
|
13587
|
+
}
|
|
13588
|
+
throw new Error(`Unimplemented node type: ${node.type}, ${node.name}`);
|
|
13589
|
+
}
|
|
13590
|
+
function normalizeFrameNode(node) {
|
|
13591
|
+
return {
|
|
13592
|
+
...node,
|
|
13593
|
+
children: normalizeNodes(node.children)
|
|
13594
|
+
};
|
|
13595
|
+
}
|
|
13596
|
+
function normalizeGroupNode(node) {
|
|
13597
|
+
return {
|
|
13598
|
+
...node,
|
|
13599
|
+
type: "FRAME",
|
|
13600
|
+
children: normalizeNodes(node.children)
|
|
13601
|
+
};
|
|
13602
|
+
}
|
|
13603
|
+
function normalizeRectangleNode(node) {
|
|
13604
|
+
return node;
|
|
13605
|
+
}
|
|
13606
|
+
function normalizeVectorNode(node) {
|
|
13607
|
+
return node;
|
|
13608
|
+
}
|
|
13609
|
+
function normalizeBooleanOperationNode(node) {
|
|
13610
|
+
return {
|
|
13611
|
+
...node,
|
|
13612
|
+
children: normalizeNodes(node.children)
|
|
13613
|
+
};
|
|
13614
|
+
}
|
|
13615
|
+
function normalizeTextNode(node) {
|
|
13616
|
+
// Function to segment a text node based on style overrides
|
|
13617
|
+
function segmentTextNode(textNode) {
|
|
13618
|
+
const segments = [];
|
|
13619
|
+
const characters = textNode.characters;
|
|
13620
|
+
const styleOverrides = textNode.characterStyleOverrides || [];
|
|
13621
|
+
const styleTable = textNode.styleOverrideTable || {};
|
|
13622
|
+
// If no style overrides, return the entire text as one segment
|
|
13623
|
+
if (!styleOverrides.length) {
|
|
13624
|
+
return [
|
|
13625
|
+
{
|
|
13626
|
+
characters: characters,
|
|
13627
|
+
start: 0,
|
|
13628
|
+
end: characters.length,
|
|
13629
|
+
style: textNode.style || {}
|
|
13630
|
+
}
|
|
13631
|
+
];
|
|
13632
|
+
}
|
|
13633
|
+
let currentSegment = {
|
|
13634
|
+
characters: "",
|
|
13635
|
+
start: 0,
|
|
13636
|
+
end: 0,
|
|
13637
|
+
style: {}
|
|
13638
|
+
};
|
|
13639
|
+
let currentStyleId = null;
|
|
13640
|
+
for(let i = 0; i < characters.length; i++){
|
|
13641
|
+
const styleId = styleOverrides[i]?.toString() || null;
|
|
13642
|
+
// If style changes or it's the first character
|
|
13643
|
+
if (styleId !== currentStyleId || i === 0) {
|
|
13644
|
+
// Add the previous segment if it exists
|
|
13645
|
+
if (i > 0) {
|
|
13646
|
+
currentSegment.end = i;
|
|
13647
|
+
currentSegment.characters = characters.substring(currentSegment.start, currentSegment.end);
|
|
13648
|
+
segments.push({
|
|
13649
|
+
...currentSegment
|
|
13650
|
+
});
|
|
13651
|
+
}
|
|
13652
|
+
// Start a new segment
|
|
13653
|
+
currentStyleId = styleId;
|
|
13654
|
+
currentSegment = {
|
|
13655
|
+
characters: "",
|
|
13656
|
+
start: i,
|
|
13657
|
+
end: 0,
|
|
13658
|
+
style: styleId ? styleTable[styleId] || {} : {}
|
|
13659
|
+
};
|
|
13660
|
+
}
|
|
13661
|
+
}
|
|
13662
|
+
// Add the last segment
|
|
13663
|
+
if (currentSegment.start < characters.length) {
|
|
13664
|
+
currentSegment.end = characters.length;
|
|
13665
|
+
currentSegment.characters = characters.substring(currentSegment.start, currentSegment.end);
|
|
13666
|
+
segments.push(currentSegment);
|
|
13667
|
+
}
|
|
13668
|
+
return segments;
|
|
13669
|
+
}
|
|
13670
|
+
return {
|
|
13671
|
+
...node,
|
|
13672
|
+
textStyleKey: node.styles?.["text"] ? ctx.styles[node.styles["text"]]?.key : undefined,
|
|
13673
|
+
segments: segmentTextNode(node)
|
|
13674
|
+
};
|
|
13675
|
+
}
|
|
13676
|
+
function normalizeComponentNode(node) {
|
|
13677
|
+
return {
|
|
13678
|
+
...node,
|
|
13679
|
+
children: normalizeNodes(node.children)
|
|
13680
|
+
};
|
|
13681
|
+
}
|
|
13682
|
+
function normalizeInstanceNode(node) {
|
|
13683
|
+
const mainComponent = ctx.components[node.componentId];
|
|
13684
|
+
if (!mainComponent) {
|
|
13685
|
+
throw new Error(`Component ${node.componentId} not found`);
|
|
13686
|
+
}
|
|
13687
|
+
const componentSet = mainComponent.componentSetId ? ctx.componentSets[mainComponent.componentSetId] : undefined;
|
|
13688
|
+
const componentProperties = {};
|
|
13689
|
+
for (const [key, value] of Object.entries(node.componentProperties ?? {})){
|
|
13690
|
+
componentProperties[key] = value;
|
|
13691
|
+
if (value.type === "INSTANCE_SWAP") {
|
|
13692
|
+
const mainComponent = ctx.components[value.value];
|
|
13693
|
+
if (mainComponent) {
|
|
13694
|
+
componentProperties[key].componentKey = mainComponent.key;
|
|
13695
|
+
}
|
|
13696
|
+
}
|
|
13697
|
+
}
|
|
13698
|
+
return {
|
|
13699
|
+
...node,
|
|
13700
|
+
children: normalizeNodes(node.children),
|
|
13701
|
+
componentKey: mainComponent.key,
|
|
13702
|
+
componentSetKey: componentSet?.key,
|
|
13703
|
+
componentProperties
|
|
13704
|
+
};
|
|
13705
|
+
}
|
|
13706
|
+
return normalizeNode;
|
|
13707
|
+
}
|
|
13708
|
+
|
|
13502
13709
|
function createPluginNormalizer() {
|
|
13710
|
+
async function normalizeNodes(nodes) {
|
|
13711
|
+
return Promise.all(nodes.filter((node)=>node.visible).map(normalizeNode));
|
|
13712
|
+
}
|
|
13503
13713
|
async function normalizeNode(node) {
|
|
13504
13714
|
if (node.type === "FRAME") {
|
|
13505
13715
|
return normalizeFrameNode(node);
|
|
@@ -13513,6 +13723,9 @@ function createPluginNormalizer() {
|
|
|
13513
13723
|
if (node.type === "VECTOR") {
|
|
13514
13724
|
return normalizeVectorNode(node);
|
|
13515
13725
|
}
|
|
13726
|
+
if (node.type === "BOOLEAN_OPERATION") {
|
|
13727
|
+
return normalizeBooleanOperationNode(node);
|
|
13728
|
+
}
|
|
13516
13729
|
if (node.type === "TEXT") {
|
|
13517
13730
|
return normalizeTextNode(node);
|
|
13518
13731
|
}
|
|
@@ -13532,7 +13745,7 @@ function createPluginNormalizer() {
|
|
|
13532
13745
|
boundVariables: await normalizeBoundVariables(node),
|
|
13533
13746
|
...normalizeRadiusProps(node),
|
|
13534
13747
|
...normalizeAutolayoutProps(node),
|
|
13535
|
-
children: await
|
|
13748
|
+
children: await normalizeNodes(node.children)
|
|
13536
13749
|
};
|
|
13537
13750
|
}
|
|
13538
13751
|
async function normalizeGroupNode(node) {
|
|
@@ -13560,7 +13773,7 @@ function createPluginNormalizer() {
|
|
|
13560
13773
|
counterAxisSpacing: node.inferredAutoLayout?.counterAxisSpacing ?? undefined,
|
|
13561
13774
|
fills: [],
|
|
13562
13775
|
strokes: [],
|
|
13563
|
-
children: await
|
|
13776
|
+
children: await normalizeNodes(node.children)
|
|
13564
13777
|
};
|
|
13565
13778
|
}
|
|
13566
13779
|
async function normalizeRectangleNode(node) {
|
|
@@ -13582,6 +13795,16 @@ function createPluginNormalizer() {
|
|
|
13582
13795
|
...normalizeShapeProps(node)
|
|
13583
13796
|
};
|
|
13584
13797
|
}
|
|
13798
|
+
async function normalizeBooleanOperationNode(node) {
|
|
13799
|
+
return {
|
|
13800
|
+
type: node.type,
|
|
13801
|
+
id: node.id,
|
|
13802
|
+
name: node.name,
|
|
13803
|
+
boundVariables: await normalizeBoundVariables(node),
|
|
13804
|
+
children: await normalizeNodes(node.children),
|
|
13805
|
+
fills: normalizePaints(node.fills)
|
|
13806
|
+
};
|
|
13807
|
+
}
|
|
13585
13808
|
async function normalizeTextNode(node) {
|
|
13586
13809
|
const segments = node.getStyledTextSegments([
|
|
13587
13810
|
"fontSize",
|
|
@@ -13646,7 +13869,7 @@ function createPluginNormalizer() {
|
|
|
13646
13869
|
boundVariables: await normalizeBoundVariables(node),
|
|
13647
13870
|
...normalizeRadiusProps(node),
|
|
13648
13871
|
...normalizeAutolayoutProps(node),
|
|
13649
|
-
children: await
|
|
13872
|
+
children: await normalizeNodes(node.children)
|
|
13650
13873
|
};
|
|
13651
13874
|
}
|
|
13652
13875
|
async function normalizeInstanceNode(node) {
|
|
@@ -13671,7 +13894,7 @@ function createPluginNormalizer() {
|
|
|
13671
13894
|
boundVariables: await normalizeBoundVariables(node),
|
|
13672
13895
|
...normalizeRadiusProps(node),
|
|
13673
13896
|
...normalizeAutolayoutProps(node),
|
|
13674
|
-
children: await
|
|
13897
|
+
children: await normalizeNodes(node.children),
|
|
13675
13898
|
componentKey: mainComponent.key,
|
|
13676
13899
|
componentSetKey: mainComponent.parent?.type === "COMPONENT_SET" ? mainComponent.parent.key : undefined,
|
|
13677
13900
|
componentProperties
|
|
@@ -13775,144 +13998,6 @@ function createPluginNormalizer() {
|
|
|
13775
13998
|
return normalizeNode;
|
|
13776
13999
|
}
|
|
13777
14000
|
|
|
13778
|
-
function createRestNormalizer(ctx) {
|
|
13779
|
-
function normalizeNode(node) {
|
|
13780
|
-
if (node.type === "FRAME") {
|
|
13781
|
-
return normalizeFrameNode(node);
|
|
13782
|
-
}
|
|
13783
|
-
if (node.type === "GROUP") {
|
|
13784
|
-
return normalizeGroupNode(node);
|
|
13785
|
-
}
|
|
13786
|
-
if (node.type === "RECTANGLE") {
|
|
13787
|
-
return normalizeRectangleNode(node);
|
|
13788
|
-
}
|
|
13789
|
-
if (node.type === "VECTOR") {
|
|
13790
|
-
return normalizeVectorNode(node);
|
|
13791
|
-
}
|
|
13792
|
-
if (node.type === "TEXT") {
|
|
13793
|
-
return normalizeTextNode(node);
|
|
13794
|
-
}
|
|
13795
|
-
if (node.type === "COMPONENT") {
|
|
13796
|
-
return normalizeComponentNode(node);
|
|
13797
|
-
}
|
|
13798
|
-
if (node.type === "INSTANCE") {
|
|
13799
|
-
return normalizeInstanceNode(node);
|
|
13800
|
-
}
|
|
13801
|
-
throw new Error(`Unimplemented node type: ${node.type}, ${node.name}`);
|
|
13802
|
-
}
|
|
13803
|
-
function normalizeFrameNode(node) {
|
|
13804
|
-
return {
|
|
13805
|
-
...node,
|
|
13806
|
-
children: node.children.map(normalizeNode)
|
|
13807
|
-
};
|
|
13808
|
-
}
|
|
13809
|
-
function normalizeGroupNode(node) {
|
|
13810
|
-
return {
|
|
13811
|
-
...node,
|
|
13812
|
-
type: "FRAME",
|
|
13813
|
-
children: node.children.map(normalizeNode)
|
|
13814
|
-
};
|
|
13815
|
-
}
|
|
13816
|
-
function normalizeRectangleNode(node) {
|
|
13817
|
-
return node;
|
|
13818
|
-
}
|
|
13819
|
-
function normalizeVectorNode(node) {
|
|
13820
|
-
return node;
|
|
13821
|
-
}
|
|
13822
|
-
function normalizeTextNode(node) {
|
|
13823
|
-
// Function to segment a text node based on style overrides
|
|
13824
|
-
function segmentTextNode(textNode) {
|
|
13825
|
-
const segments = [];
|
|
13826
|
-
const characters = textNode.characters;
|
|
13827
|
-
const styleOverrides = textNode.characterStyleOverrides || [];
|
|
13828
|
-
const styleTable = textNode.styleOverrideTable || {};
|
|
13829
|
-
// If no style overrides, return the entire text as one segment
|
|
13830
|
-
if (!styleOverrides.length) {
|
|
13831
|
-
return [
|
|
13832
|
-
{
|
|
13833
|
-
characters: characters,
|
|
13834
|
-
start: 0,
|
|
13835
|
-
end: characters.length,
|
|
13836
|
-
style: textNode.style || {}
|
|
13837
|
-
}
|
|
13838
|
-
];
|
|
13839
|
-
}
|
|
13840
|
-
let currentSegment = {
|
|
13841
|
-
characters: "",
|
|
13842
|
-
start: 0,
|
|
13843
|
-
end: 0,
|
|
13844
|
-
style: {}
|
|
13845
|
-
};
|
|
13846
|
-
let currentStyleId = null;
|
|
13847
|
-
for(let i = 0; i < characters.length; i++){
|
|
13848
|
-
const styleId = styleOverrides[i]?.toString() || null;
|
|
13849
|
-
// If style changes or it's the first character
|
|
13850
|
-
if (styleId !== currentStyleId || i === 0) {
|
|
13851
|
-
// Add the previous segment if it exists
|
|
13852
|
-
if (i > 0) {
|
|
13853
|
-
currentSegment.end = i;
|
|
13854
|
-
currentSegment.characters = characters.substring(currentSegment.start, currentSegment.end);
|
|
13855
|
-
segments.push({
|
|
13856
|
-
...currentSegment
|
|
13857
|
-
});
|
|
13858
|
-
}
|
|
13859
|
-
// Start a new segment
|
|
13860
|
-
currentStyleId = styleId;
|
|
13861
|
-
currentSegment = {
|
|
13862
|
-
characters: "",
|
|
13863
|
-
start: i,
|
|
13864
|
-
end: 0,
|
|
13865
|
-
style: styleId ? styleTable[styleId] || {} : {}
|
|
13866
|
-
};
|
|
13867
|
-
}
|
|
13868
|
-
}
|
|
13869
|
-
// Add the last segment
|
|
13870
|
-
if (currentSegment.start < characters.length) {
|
|
13871
|
-
currentSegment.end = characters.length;
|
|
13872
|
-
currentSegment.characters = characters.substring(currentSegment.start, currentSegment.end);
|
|
13873
|
-
segments.push(currentSegment);
|
|
13874
|
-
}
|
|
13875
|
-
return segments;
|
|
13876
|
-
}
|
|
13877
|
-
return {
|
|
13878
|
-
...node,
|
|
13879
|
-
textStyleKey: node.styles?.["text"] ? ctx.styles[node.styles["text"]]?.key : undefined,
|
|
13880
|
-
segments: segmentTextNode(node)
|
|
13881
|
-
};
|
|
13882
|
-
}
|
|
13883
|
-
function normalizeComponentNode(node) {
|
|
13884
|
-
return {
|
|
13885
|
-
...node,
|
|
13886
|
-
children: node.children.map(normalizeNode)
|
|
13887
|
-
};
|
|
13888
|
-
}
|
|
13889
|
-
function normalizeInstanceNode(node) {
|
|
13890
|
-
const mainComponent = ctx.components[node.componentId];
|
|
13891
|
-
if (!mainComponent) {
|
|
13892
|
-
throw new Error(`Component ${node.componentId} not found`);
|
|
13893
|
-
}
|
|
13894
|
-
const componentSet = mainComponent.componentSetId ? ctx.componentSets[mainComponent.componentSetId] : undefined;
|
|
13895
|
-
const componentProperties = {};
|
|
13896
|
-
for (const [key, value] of Object.entries(node.componentProperties ?? {})){
|
|
13897
|
-
componentProperties[key] = value;
|
|
13898
|
-
if (value.type === "INSTANCE_SWAP") {
|
|
13899
|
-
const mainComponent = ctx.components[value.value];
|
|
13900
|
-
if (mainComponent) {
|
|
13901
|
-
componentProperties[key].componentKey = mainComponent.key;
|
|
13902
|
-
}
|
|
13903
|
-
}
|
|
13904
|
-
}
|
|
13905
|
-
return {
|
|
13906
|
-
...node,
|
|
13907
|
-
children: node.children.map(normalizeNode),
|
|
13908
|
-
componentKey: mainComponent.key,
|
|
13909
|
-
componentSetKey: componentSet?.key,
|
|
13910
|
-
componentProperties
|
|
13911
|
-
};
|
|
13912
|
-
}
|
|
13913
|
-
return normalizeNode;
|
|
13914
|
-
}
|
|
13915
|
-
|
|
13916
14001
|
exports.createPluginNormalizer = createPluginNormalizer;
|
|
13917
14002
|
exports.createRestNormalizer = createRestNormalizer;
|
|
13918
14003
|
exports.generateCode = generateCode;
|