@seed-design/figma 1.3.3 → 1.3.5
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/codegen/index.cjs +72 -12
- package/lib/codegen/index.d.ts +2 -1
- package/lib/codegen/index.d.ts.map +1 -1
- package/lib/codegen/index.js +73 -13
- package/lib/codegen/targets/react/index.cjs +207 -30
- package/lib/codegen/targets/react/index.d.ts.map +1 -1
- package/lib/codegen/targets/react/index.js +207 -30
- package/lib/index.cjs +47 -9
- package/lib/index.js +47 -9
- package/package.json +3 -3
- package/src/codegen/component-properties.ts +20 -0
- package/src/codegen/core/codegen.ts +26 -1
- package/src/codegen/skip-components.ts +7 -0
- package/src/codegen/targets/figma/pipeline.ts +2 -0
- package/src/codegen/targets/react/component/handlers/action-button.ts +3 -1
- package/src/codegen/targets/react/component/handlers/app-bar.ts +17 -0
- package/src/codegen/targets/react/component/handlers/bottom-sheet.ts +1 -2
- package/src/codegen/targets/react/component/handlers/identity-placeholder.ts +4 -13
- package/src/codegen/targets/react/component/handlers/image-frame.ts +134 -0
- package/src/codegen/targets/react/component/handlers/index.ts +1 -0
- package/src/codegen/targets/react/component/handlers/menu-sheet.ts +1 -1
- package/src/codegen/targets/react/component/handlers/switch.ts +0 -4
- package/src/codegen/targets/react/component/handlers/tabs.ts +7 -3
- package/src/codegen/targets/react/pipeline.ts +2 -0
- package/src/entities/data/__generated__/component-sets/index.d.ts +21 -8
- package/src/entities/data/__generated__/component-sets/index.mjs +22 -9
- package/src/entities/data/__generated__/components/index.d.ts +6 -6
- package/src/entities/data/__generated__/components/index.mjs +6 -6
- package/src/entities/data/__generated__/variable-collections/index.mjs +1 -0
- package/src/entities/data/__generated__/variables/index.mjs +24 -0
|
@@ -436,11 +436,20 @@ function applyInferredLayout(parentNode, result) {
|
|
|
436
436
|
};
|
|
437
437
|
}
|
|
438
438
|
|
|
439
|
-
function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout }) {
|
|
439
|
+
function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
|
|
440
|
+
function isSkippedInstance(node) {
|
|
441
|
+
if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
|
|
442
|
+
if (node.type !== "INSTANCE") return false;
|
|
443
|
+
const { componentKey, componentSetKey } = node;
|
|
444
|
+
return skipComponentKeys.has(componentKey) || !!componentSetKey && skipComponentKeys.has(componentSetKey);
|
|
445
|
+
}
|
|
440
446
|
function traverse(node) {
|
|
441
447
|
if ("visible" in node && !node.visible) {
|
|
442
448
|
return;
|
|
443
449
|
}
|
|
450
|
+
if (isSkippedInstance(node)) {
|
|
451
|
+
return;
|
|
452
|
+
}
|
|
444
453
|
const result = match(node).with({
|
|
445
454
|
type: "FRAME"
|
|
446
455
|
}, (node)=>shouldInferAutoLayout ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse) : frameTransformer(node, traverse)).with({
|
|
@@ -458,7 +467,7 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
|
|
|
458
467
|
type: "BOOLEAN_OPERATION"
|
|
459
468
|
}, (node)=>booleanOperationTransformer(node, traverse)).with({
|
|
460
469
|
type: "UNHANDLED"
|
|
461
|
-
}, ()=>createElement(
|
|
470
|
+
}, (node)=>createElement(`Unhandled${pascalCase(node.original.type)}Node`)).exhaustive();
|
|
462
471
|
if (result) {
|
|
463
472
|
return appendSource(result, node.id);
|
|
464
473
|
}
|
|
@@ -468,6 +477,12 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
|
|
|
468
477
|
return traverse(node);
|
|
469
478
|
}
|
|
470
479
|
function generateCode(node, options) {
|
|
480
|
+
if (isSkippedInstance(node)) {
|
|
481
|
+
return {
|
|
482
|
+
imports: "",
|
|
483
|
+
jsx: "// This component is intentionally excluded from codegen"
|
|
484
|
+
};
|
|
485
|
+
}
|
|
471
486
|
const jsxTree = generateJsxTree(node);
|
|
472
487
|
if (!jsxTree) {
|
|
473
488
|
return undefined;
|
|
@@ -3449,9 +3464,9 @@ const createAppBarHandler$1 = (ctx)=>{
|
|
|
3449
3464
|
});
|
|
3450
3465
|
};
|
|
3451
3466
|
|
|
3452
|
-
const IDENTITY_PLACEHOLDER_KEY
|
|
3467
|
+
const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
|
|
3453
3468
|
const { createLocalSnippetElement: createLocalSnippetElement$15 } = createLocalSnippetHelper("identity-placeholder");
|
|
3454
|
-
const createIdentityPlaceholderHandler$1 = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY
|
|
3469
|
+
const createIdentityPlaceholderHandler$1 = (_ctx)=>defineComponentHandler(IDENTITY_PLACEHOLDER_KEY, ({ componentProperties: props })=>{
|
|
3455
3470
|
const commonProps = {
|
|
3456
3471
|
identity: camelCase(props.Identity.value)
|
|
3457
3472
|
};
|
|
@@ -5296,8 +5311,8 @@ var archivedHandlers = {
|
|
|
5296
5311
|
createToggleButtonHandler: createToggleButtonHandler$1
|
|
5297
5312
|
};
|
|
5298
5313
|
|
|
5299
|
-
const
|
|
5300
|
-
"name": "
|
|
5314
|
+
const privateTemplateAttachmentField = {
|
|
5315
|
+
"name": "privateTemplateAttachmentField",
|
|
5301
5316
|
"key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
|
|
5302
5317
|
"componentPropertyDefinitions": {
|
|
5303
5318
|
"Show Header#40606:8": {
|
|
@@ -5510,6 +5525,19 @@ const privateComponentFieldHeaderSuffix = {
|
|
|
5510
5525
|
}
|
|
5511
5526
|
}
|
|
5512
5527
|
};
|
|
5528
|
+
const privateComponentIdentityPlaceholder = {
|
|
5529
|
+
"name": "privateComponentIdentityPlaceholder",
|
|
5530
|
+
"key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
|
|
5531
|
+
"componentPropertyDefinitions": {
|
|
5532
|
+
"Identity": {
|
|
5533
|
+
"type": "VARIANT",
|
|
5534
|
+
"variantOptions": [
|
|
5535
|
+
"Person",
|
|
5536
|
+
"Business"
|
|
5537
|
+
]
|
|
5538
|
+
}
|
|
5539
|
+
}
|
|
5540
|
+
};
|
|
5513
5541
|
const privateComponentInputButtonPrefix = {
|
|
5514
5542
|
"name": "privateComponentInputButtonPrefix",
|
|
5515
5543
|
"key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
|
|
@@ -7302,11 +7330,11 @@ const componentBottomSheet = {
|
|
|
7302
7330
|
"Header Layout": {
|
|
7303
7331
|
"type": "VARIANT",
|
|
7304
7332
|
"variantOptions": [
|
|
7333
|
+
"Top Left",
|
|
7334
|
+
"Top Center",
|
|
7305
7335
|
"Bottom Left",
|
|
7306
|
-
"None",
|
|
7307
7336
|
"Bottom Center",
|
|
7308
|
-
"
|
|
7309
|
-
"Top Left"
|
|
7337
|
+
"None"
|
|
7310
7338
|
]
|
|
7311
7339
|
}
|
|
7312
7340
|
}
|
|
@@ -7854,7 +7882,7 @@ const componentImageFrame = {
|
|
|
7854
7882
|
"80",
|
|
7855
7883
|
"96",
|
|
7856
7884
|
"120",
|
|
7857
|
-
"
|
|
7885
|
+
"Free"
|
|
7858
7886
|
]
|
|
7859
7887
|
},
|
|
7860
7888
|
"Rounded": {
|
|
@@ -8713,8 +8741,7 @@ const componentSwitch = {
|
|
|
8713
8741
|
"type": "VARIANT",
|
|
8714
8742
|
"variantOptions": [
|
|
8715
8743
|
"Label Last",
|
|
8716
|
-
"Label First"
|
|
8717
|
-
"🚫[Switch Mark 사용] Switch Only"
|
|
8744
|
+
"Label First"
|
|
8718
8745
|
]
|
|
8719
8746
|
}
|
|
8720
8747
|
}
|
|
@@ -9483,6 +9510,7 @@ var FIGMA_COMPONENTS = {
|
|
|
9483
9510
|
privateComponentFieldFooterCharacterCount: privateComponentFieldFooterCharacterCount,
|
|
9484
9511
|
privateComponentFieldHeaderIndicator: privateComponentFieldHeaderIndicator,
|
|
9485
9512
|
privateComponentFieldHeaderSuffix: privateComponentFieldHeaderSuffix,
|
|
9513
|
+
privateComponentIdentityPlaceholder: privateComponentIdentityPlaceholder,
|
|
9486
9514
|
privateComponentInputButtonPrefix: privateComponentInputButtonPrefix,
|
|
9487
9515
|
privateComponentInputButtonSuffix: privateComponentInputButtonSuffix,
|
|
9488
9516
|
privateComponentInputButtonValue: privateComponentInputButtonValue,
|
|
@@ -9527,7 +9555,7 @@ var FIGMA_COMPONENTS = {
|
|
|
9527
9555
|
privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
|
|
9528
9556
|
privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
|
|
9529
9557
|
privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
|
|
9530
|
-
|
|
9558
|
+
privateTemplateAttachmentField: privateTemplateAttachmentField,
|
|
9531
9559
|
privateTemplateChipGroup: privateTemplateChipGroup,
|
|
9532
9560
|
privateTemplateChipGroupField: privateTemplateChipGroupField,
|
|
9533
9561
|
privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,
|
|
@@ -9551,7 +9579,7 @@ var FIGMA_COMPONENTS = {
|
|
|
9551
9579
|
};
|
|
9552
9580
|
|
|
9553
9581
|
const { createLocalSnippetElement: createLocalSnippetElement$A } = createLocalSnippetHelper("action-button");
|
|
9554
|
-
const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionButton.key, ({ componentProperties: props })=>{
|
|
9582
|
+
const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionButton.key, ({ componentProperties: props, layoutGrow })=>{
|
|
9555
9583
|
const states = props.State.value.split("-");
|
|
9556
9584
|
const { layout, children } = match(props.Layout.value).with("Icon Only", ()=>({
|
|
9557
9585
|
layout: "iconOnly",
|
|
@@ -9589,7 +9617,10 @@ const createActionButtonHandler = (ctx)=>defineComponentHandler(componentActionB
|
|
|
9589
9617
|
},
|
|
9590
9618
|
size: handleSizeProp(props.Size.value),
|
|
9591
9619
|
variant: camelCase(props.Variant.value),
|
|
9592
|
-
layout
|
|
9620
|
+
layout,
|
|
9621
|
+
...layoutGrow === 1 && {
|
|
9622
|
+
flexGrow: true
|
|
9623
|
+
}
|
|
9593
9624
|
};
|
|
9594
9625
|
return createLocalSnippetElement$A("ActionButton", commonProps, children);
|
|
9595
9626
|
});
|
|
@@ -9646,6 +9677,9 @@ const createActionButtonGhostHandler = (ctx)=>defineComponentHandler(componentAc
|
|
|
9646
9677
|
...props.Bleed.value === "true" && {
|
|
9647
9678
|
bleedX: "asPadding",
|
|
9648
9679
|
bleedY: "asPadding"
|
|
9680
|
+
},
|
|
9681
|
+
...node.layoutGrow === 1 && {
|
|
9682
|
+
flexGrow: true
|
|
9649
9683
|
}
|
|
9650
9684
|
};
|
|
9651
9685
|
return createLocalSnippetElement$A("ActionButton", commonProps, children);
|
|
@@ -9727,13 +9761,17 @@ const privateTemplateSelectField = {
|
|
|
9727
9761
|
const privateTemplateTimePickerField = {
|
|
9728
9762
|
"key": "e38df17cf1e0f96e09774b015739dfde30d46115"
|
|
9729
9763
|
};
|
|
9730
|
-
const privateComponentBottomSheetContentsPlaceholder = {
|
|
9731
|
-
"key": "e68b006d572300d3c987776192c8ab387fa45e05"
|
|
9732
|
-
};
|
|
9733
9764
|
const privateComponentTopNavigationLeftIconButton = {
|
|
9734
9765
|
"key": "c3e708bab11d8ea90a909b4539b6ba6b2a4e7b9c"};
|
|
9735
9766
|
const componentChipSuffixIcon = {
|
|
9736
9767
|
"key": "2f79e3c5a78315c854d7bd4499d142cfcc94548f"};
|
|
9768
|
+
const componentImageFrameBadge = {
|
|
9769
|
+
"key": "6a1feb47139040d6f7522528f7c91bf4fe7bcc84"
|
|
9770
|
+
};
|
|
9771
|
+
const componentImageFrameIcon = {
|
|
9772
|
+
"key": "4f495448eeda5d10f41e6195e16b4eff49aaec17"};
|
|
9773
|
+
const componentImageFrameOverlayIndicator = {
|
|
9774
|
+
"key": "e3e3596f8c535facae4d23c21bc1d62dd721fe23"};
|
|
9737
9775
|
const componentListItemPrefixAvatar = {
|
|
9738
9776
|
"key": "27e33754113178be97e07195528c4ea020b3d3b7"
|
|
9739
9777
|
};
|
|
@@ -9870,11 +9908,22 @@ const createAppBarHandler = (ctx)=>{
|
|
|
9870
9908
|
});
|
|
9871
9909
|
});
|
|
9872
9910
|
};
|
|
9911
|
+
const createAppBarPresetHandler = (ctx)=>{
|
|
9912
|
+
const appBarHandler = createAppBarHandler(ctx);
|
|
9913
|
+
return defineComponentHandler(templateTopNavigationPreset.key, (node, traverse)=>{
|
|
9914
|
+
const [appBarNode] = findAllInstances({
|
|
9915
|
+
node,
|
|
9916
|
+
key: componentTopNavigation.key
|
|
9917
|
+
});
|
|
9918
|
+
if (!appBarNode) {
|
|
9919
|
+
return createLocalSnippetElement$y("AppBar");
|
|
9920
|
+
}
|
|
9921
|
+
return appBarHandler.transform(appBarNode, traverse);
|
|
9922
|
+
});
|
|
9923
|
+
};
|
|
9873
9924
|
|
|
9874
|
-
// hardcoded since this lives in a different figma file
|
|
9875
|
-
const IDENTITY_PLACEHOLDER_KEY = "b3563b6f16ba4cfe4240c9b33eef7edad4c304eb";
|
|
9876
9925
|
const { createLocalSnippetElement: createLocalSnippetElement$x } = createLocalSnippetHelper("identity-placeholder");
|
|
9877
|
-
const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(
|
|
9926
|
+
const createIdentityPlaceholderHandler = (_ctx)=>defineComponentHandler(privateComponentIdentityPlaceholder.key, ({ componentProperties: props })=>{
|
|
9878
9927
|
const commonProps = {
|
|
9879
9928
|
identity: camelCase(props.Identity.value)
|
|
9880
9929
|
};
|
|
@@ -9957,7 +10006,7 @@ const createBottomSheetHandler = (_ctx)=>defineComponentHandler(componentBottomS
|
|
|
9957
10006
|
};
|
|
9958
10007
|
const bodyNodes = findAllInstances({
|
|
9959
10008
|
node,
|
|
9960
|
-
key:
|
|
10009
|
+
key: props["Contents#25320:0"].componentKey
|
|
9961
10010
|
});
|
|
9962
10011
|
const bottomSheetBody = bodyNodes.length === 1 ? createLocalSnippetElement$u("BottomSheetBody", {}, bodyNodes[0].children.map(traverse)) : createLocalSnippetElement$u("BottomSheetBody", {}, createElement("div", undefined, "No content available"));
|
|
9963
10012
|
const footerNodes = findAllInstances({
|
|
@@ -10478,6 +10527,99 @@ const createHelpBubbleHandler = (_ctx)=>defineComponentHandler(componentHelpBubb
|
|
|
10478
10527
|
});
|
|
10479
10528
|
});
|
|
10480
10529
|
|
|
10530
|
+
const CORNER_CONFIGS = [
|
|
10531
|
+
{
|
|
10532
|
+
showKey: "ㄴ Left Top#58686:165",
|
|
10533
|
+
placement: "top-start"
|
|
10534
|
+
},
|
|
10535
|
+
{
|
|
10536
|
+
showKey: "ㄴ Right Top#58686:198",
|
|
10537
|
+
placement: "top-end"
|
|
10538
|
+
},
|
|
10539
|
+
{
|
|
10540
|
+
showKey: "ㄴ Left Bottom#58686:231",
|
|
10541
|
+
placement: "bottom-start"
|
|
10542
|
+
},
|
|
10543
|
+
{
|
|
10544
|
+
showKey: "ㄴ Right Bottom#58686:264",
|
|
10545
|
+
placement: "bottom-end"
|
|
10546
|
+
}
|
|
10547
|
+
];
|
|
10548
|
+
function formatRatio(ratioStr) {
|
|
10549
|
+
const [w, h] = ratioStr.split(":");
|
|
10550
|
+
return `${w} / ${h}`;
|
|
10551
|
+
}
|
|
10552
|
+
const createImageFrameBadgeHandler = (ctx)=>{
|
|
10553
|
+
const badgeHandler = createBadgeHandler();
|
|
10554
|
+
return defineComponentHandler(componentImageFrameBadge.key, (node, traverse)=>{
|
|
10555
|
+
const [badge] = findAllInstances({
|
|
10556
|
+
node,
|
|
10557
|
+
key: badgeHandler.key
|
|
10558
|
+
});
|
|
10559
|
+
if (!badge) throw new Error("Badge component not found within ImageFrameBadge");
|
|
10560
|
+
return {
|
|
10561
|
+
...badgeHandler.transform(badge, traverse),
|
|
10562
|
+
tag: "ImageFrameBadge"
|
|
10563
|
+
};
|
|
10564
|
+
});
|
|
10565
|
+
};
|
|
10566
|
+
const createImageFrameReactionButtonHandler = (_ctx)=>{
|
|
10567
|
+
return defineComponentHandler(componentImageFrameReactionButton.key, ({ componentProperties: props })=>{
|
|
10568
|
+
return createSeedReactElement("ImageFrameReactionButton", {
|
|
10569
|
+
...props.Selected.value === "True" && {
|
|
10570
|
+
defaultPressed: true
|
|
10571
|
+
}
|
|
10572
|
+
});
|
|
10573
|
+
});
|
|
10574
|
+
};
|
|
10575
|
+
const createImageFrameOverlayIndicatorHandler = (_ctx)=>{
|
|
10576
|
+
return defineComponentHandler(componentImageFrameOverlayIndicator.key, ({ componentProperties: props })=>{
|
|
10577
|
+
return createSeedReactElement("ImageFrameIndicator", undefined, props["Text#58708:0"].value);
|
|
10578
|
+
});
|
|
10579
|
+
};
|
|
10580
|
+
const createImageFrameIconHandler = (ctx)=>{
|
|
10581
|
+
return defineComponentHandler(componentImageFrameIcon.key, ({ componentProperties: props })=>{
|
|
10582
|
+
return createSeedReactElement("ImageFrameIcon", {
|
|
10583
|
+
svg: ctx.iconHandler.transform(props["Icon#58686:297"])
|
|
10584
|
+
});
|
|
10585
|
+
});
|
|
10586
|
+
};
|
|
10587
|
+
const createImageFrameHandler = (ctx)=>{
|
|
10588
|
+
return defineComponentHandler(componentImageFrame.key, (node, traverse)=>{
|
|
10589
|
+
const props = node.componentProperties;
|
|
10590
|
+
const floaters = [];
|
|
10591
|
+
for (const { showKey, placement } of CORNER_CONFIGS){
|
|
10592
|
+
if (!props[showKey].value) continue;
|
|
10593
|
+
const slotName = showKey.split("#")[0];
|
|
10594
|
+
const slotNode = findOne(node, (n)=>"name" in n && n.name === slotName);
|
|
10595
|
+
if (!slotNode) continue;
|
|
10596
|
+
const child = traverse(slotNode);
|
|
10597
|
+
if (!child) continue;
|
|
10598
|
+
floaters.push(createSeedReactElement("ImageFrameFloater", {
|
|
10599
|
+
placement
|
|
10600
|
+
}, child));
|
|
10601
|
+
}
|
|
10602
|
+
const commonProps = {
|
|
10603
|
+
src: `https://placehold.co/${node.absoluteBoundingBox?.width ?? 100}x${node.absoluteBoundingBox?.height ?? 100}`,
|
|
10604
|
+
alt: "",
|
|
10605
|
+
ratio: formatRatio(props.Ratio.value),
|
|
10606
|
+
...props.Rounded.value === "True" && {
|
|
10607
|
+
borderRadius: ctx.valueResolver.getFormattedValue.topLeftRadius(node)
|
|
10608
|
+
},
|
|
10609
|
+
...node.layoutGrow === 1 ? {
|
|
10610
|
+
flexGrow: true
|
|
10611
|
+
} : node.layoutAlign === "STRETCH" ? {
|
|
10612
|
+
alignSelf: "stretch"
|
|
10613
|
+
} : {
|
|
10614
|
+
width: ctx.valueResolver.getFormattedValue.width(node)
|
|
10615
|
+
}
|
|
10616
|
+
};
|
|
10617
|
+
return createSeedReactElement("ImageFrame", commonProps, props["Show Overlay#58686:33"].value && floaters.length > 0 ? floaters : undefined, {
|
|
10618
|
+
comment: "alt 텍스트를 제공해야 합니다."
|
|
10619
|
+
});
|
|
10620
|
+
});
|
|
10621
|
+
};
|
|
10622
|
+
|
|
10481
10623
|
const { createLocalSnippetElement: createLocalSnippetElement$l } = createLocalSnippetHelper("select-box");
|
|
10482
10624
|
const createLegacySelectBoxHandler = (_ctx)=>defineComponentHandler(componentDeprecatedSelectBox.key, ({ componentProperties: props })=>{
|
|
10483
10625
|
const tag = match(props.Control.value).with("Checkbox", ()=>"CheckSelectBox").with("Radio", ()=>"RadioSelectBoxItem").exhaustive();
|
|
@@ -10835,7 +10977,7 @@ const createMenuSheetHandler = (ctx)=>{
|
|
|
10835
10977
|
const trigger = createLocalSnippetElement$f("MenuSheetTrigger", {
|
|
10836
10978
|
asChild: true
|
|
10837
10979
|
}, createLocalSnippetElementTrigger("ActionButton", {}, "MenuSheet 열기"));
|
|
10838
|
-
return createLocalSnippetElement$f("
|
|
10980
|
+
return createLocalSnippetElement$f("MenuSheetRoot", undefined, [
|
|
10839
10981
|
trigger,
|
|
10840
10982
|
content
|
|
10841
10983
|
]);
|
|
@@ -11459,9 +11601,6 @@ const createSwitchHandler = (_ctx)=>defineComponentHandler(componentSwitch.key,
|
|
|
11459
11601
|
tone,
|
|
11460
11602
|
size: props.Size.value
|
|
11461
11603
|
};
|
|
11462
|
-
if (props["Layout(Figma Only)"].value === "🚫[Switch Mark 사용] Switch Only") {
|
|
11463
|
-
return createLocalSnippetElement$4("Switchmark", commonProps);
|
|
11464
|
-
}
|
|
11465
11604
|
return createLocalSnippetElement$4("Switch", {
|
|
11466
11605
|
...commonProps,
|
|
11467
11606
|
label: props["Label#36578:0"].value,
|
|
@@ -11583,7 +11722,7 @@ const createLineTriggerHugHandler = (_ctx)=>defineComponentHandler(privateCompon
|
|
|
11583
11722
|
notification: true
|
|
11584
11723
|
}
|
|
11585
11724
|
};
|
|
11586
|
-
return createTabsLocalSnippetElement("TabsTrigger", commonProps);
|
|
11725
|
+
return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
|
|
11587
11726
|
});
|
|
11588
11727
|
const createLineTriggerFillHandler = (_ctx)=>defineComponentHandler(privateComponentTabItemLineFill.key, ({ componentProperties: props })=>{
|
|
11589
11728
|
const commonProps = {
|
|
@@ -11595,7 +11734,7 @@ const createLineTriggerFillHandler = (_ctx)=>defineComponentHandler(privateCompo
|
|
|
11595
11734
|
notification: true
|
|
11596
11735
|
}
|
|
11597
11736
|
};
|
|
11598
|
-
return createTabsLocalSnippetElement("TabsTrigger", commonProps);
|
|
11737
|
+
return createTabsLocalSnippetElement("TabsTrigger", commonProps, props["Label#4478:2"].value);
|
|
11599
11738
|
});
|
|
11600
11739
|
/*
|
|
11601
11740
|
<ChipTabsRoot
|
|
@@ -11683,7 +11822,7 @@ const createChipTabsTriggerHandler = (_ctx)=>defineComponentHandler(privateCompo
|
|
|
11683
11822
|
notification: true
|
|
11684
11823
|
}
|
|
11685
11824
|
};
|
|
11686
|
-
return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps);
|
|
11825
|
+
return createChipTabsLocalSnippetElement("ChipTabsTrigger", commonProps, chipProps["Label#7185:0"].value);
|
|
11687
11826
|
});
|
|
11688
11827
|
|
|
11689
11828
|
const { createLocalSnippetElement: createLocalSnippetElement$2 } = createLocalSnippetHelper("tag-group");
|
|
@@ -11939,6 +12078,7 @@ var currentHandlers = {
|
|
|
11939
12078
|
createAddressFieldHandler: createAddressFieldHandler,
|
|
11940
12079
|
createAlertDialogHandler: createAlertDialogHandler,
|
|
11941
12080
|
createAppBarHandler: createAppBarHandler,
|
|
12081
|
+
createAppBarPresetHandler: createAppBarPresetHandler,
|
|
11942
12082
|
createAvatarHandler: createAvatarHandler,
|
|
11943
12083
|
createAvatarStackHandler: createAvatarStackHandler,
|
|
11944
12084
|
createBadgeHandler: createBadgeHandler,
|
|
@@ -11955,6 +12095,11 @@ var currentHandlers = {
|
|
|
11955
12095
|
createFloatingActionButtonHandler: createFloatingActionButtonHandler,
|
|
11956
12096
|
createHelpBubbleHandler: createHelpBubbleHandler,
|
|
11957
12097
|
createIdentityPlaceholderHandler: createIdentityPlaceholderHandler,
|
|
12098
|
+
createImageFrameBadgeHandler: createImageFrameBadgeHandler,
|
|
12099
|
+
createImageFrameHandler: createImageFrameHandler,
|
|
12100
|
+
createImageFrameIconHandler: createImageFrameIconHandler,
|
|
12101
|
+
createImageFrameOverlayIndicatorHandler: createImageFrameOverlayIndicatorHandler,
|
|
12102
|
+
createImageFrameReactionButtonHandler: createImageFrameReactionButtonHandler,
|
|
11958
12103
|
createLegacyMultilineTextFieldHandler: createLegacyMultilineTextFieldHandler,
|
|
11959
12104
|
createLegacySelectBoxGroupHandler: createLegacySelectBoxGroupHandler,
|
|
11960
12105
|
createLegacyTextFieldHandler: createLegacyTextFieldHandler,
|
|
@@ -24196,6 +24341,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
|
|
|
24196
24341
|
"VariableID:576:22878",
|
|
24197
24342
|
"VariableID:59176:2",
|
|
24198
24343
|
"VariableID:59176:3",
|
|
24344
|
+
"VariableID:61337:3",
|
|
24199
24345
|
"VariableID:654:20851",
|
|
24200
24346
|
"VariableID:670:2700",
|
|
24201
24347
|
"VariableID:6782:76317",
|
|
@@ -31029,6 +31175,30 @@ const FIGMA_VARIABLES = {
|
|
|
31029
31175
|
],
|
|
31030
31176
|
"codeSyntax": {}
|
|
31031
31177
|
},
|
|
31178
|
+
"VariableID:61337:3": {
|
|
31179
|
+
"name": "stroke/focus-ring",
|
|
31180
|
+
"id": "VariableID:61337:3",
|
|
31181
|
+
"remote": false,
|
|
31182
|
+
"key": "ca937a0bb83fda59d06959cfb5d960f00b5e9add",
|
|
31183
|
+
"variableCollectionId": "VariableCollectionId:1:3",
|
|
31184
|
+
"resolvedType": "COLOR",
|
|
31185
|
+
"description": "",
|
|
31186
|
+
"hiddenFromPublishing": false,
|
|
31187
|
+
"valuesByMode": {
|
|
31188
|
+
"1928:7": {
|
|
31189
|
+
"type": "VARIABLE_ALIAS",
|
|
31190
|
+
"id": "VariableID:1883:92938"
|
|
31191
|
+
},
|
|
31192
|
+
"1928:8": {
|
|
31193
|
+
"type": "VARIABLE_ALIAS",
|
|
31194
|
+
"id": "VariableID:1883:92938"
|
|
31195
|
+
}
|
|
31196
|
+
},
|
|
31197
|
+
"scopes": [
|
|
31198
|
+
"ALL_SCOPES"
|
|
31199
|
+
],
|
|
31200
|
+
"codeSyntax": {}
|
|
31201
|
+
},
|
|
31032
31202
|
"VariableID:41338:806": {
|
|
31033
31203
|
"name": "stroke/informative-solid",
|
|
31034
31204
|
"id": "VariableID:41338:806",
|
|
@@ -31501,6 +31671,12 @@ const iconService = createIconService({
|
|
|
31501
31671
|
iconRepository
|
|
31502
31672
|
});
|
|
31503
31673
|
|
|
31674
|
+
const SKIP_COMPONENT_KEYS = new Set([
|
|
31675
|
+
componentOsBottomIndicatorFigmaOnly.key,
|
|
31676
|
+
componentOsKeyboardFigmaOnly.key,
|
|
31677
|
+
componentOsStatusBarFigmaOnly.key
|
|
31678
|
+
]);
|
|
31679
|
+
|
|
31504
31680
|
const defaultIconNameFormatter = ({ name, weight })=>pascalCase(`${name}${weight ? weight : ""}`);
|
|
31505
31681
|
function createIconHandler({ iconService, iconNameFormatter = defaultIconNameFormatter }) {
|
|
31506
31682
|
function isIconInstance(node) {
|
|
@@ -31667,7 +31843,8 @@ function createPipeline(options = {}) {
|
|
|
31667
31843
|
instanceTransformer,
|
|
31668
31844
|
vectorTransformer,
|
|
31669
31845
|
booleanOperationTransformer,
|
|
31670
|
-
shouldInferAutoLayout
|
|
31846
|
+
shouldInferAutoLayout,
|
|
31847
|
+
skipComponentKeys: SKIP_COMPONENT_KEYS
|
|
31671
31848
|
});
|
|
31672
31849
|
return codeGenerator;
|
|
31673
31850
|
}
|
package/lib/index.cjs
CHANGED
|
@@ -15217,6 +15217,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
|
|
|
15217
15217
|
"VariableID:576:22878",
|
|
15218
15218
|
"VariableID:59176:2",
|
|
15219
15219
|
"VariableID:59176:3",
|
|
15220
|
+
"VariableID:61337:3",
|
|
15220
15221
|
"VariableID:654:20851",
|
|
15221
15222
|
"VariableID:670:2700",
|
|
15222
15223
|
"VariableID:6782:76317",
|
|
@@ -22050,6 +22051,30 @@ const FIGMA_VARIABLES = {
|
|
|
22050
22051
|
],
|
|
22051
22052
|
"codeSyntax": {}
|
|
22052
22053
|
},
|
|
22054
|
+
"VariableID:61337:3": {
|
|
22055
|
+
"name": "stroke/focus-ring",
|
|
22056
|
+
"id": "VariableID:61337:3",
|
|
22057
|
+
"remote": false,
|
|
22058
|
+
"key": "ca937a0bb83fda59d06959cfb5d960f00b5e9add",
|
|
22059
|
+
"variableCollectionId": "VariableCollectionId:1:3",
|
|
22060
|
+
"resolvedType": "COLOR",
|
|
22061
|
+
"description": "",
|
|
22062
|
+
"hiddenFromPublishing": false,
|
|
22063
|
+
"valuesByMode": {
|
|
22064
|
+
"1928:7": {
|
|
22065
|
+
"type": "VARIABLE_ALIAS",
|
|
22066
|
+
"id": "VariableID:1883:92938"
|
|
22067
|
+
},
|
|
22068
|
+
"1928:8": {
|
|
22069
|
+
"type": "VARIABLE_ALIAS",
|
|
22070
|
+
"id": "VariableID:1883:92938"
|
|
22071
|
+
}
|
|
22072
|
+
},
|
|
22073
|
+
"scopes": [
|
|
22074
|
+
"ALL_SCOPES"
|
|
22075
|
+
],
|
|
22076
|
+
"codeSyntax": {}
|
|
22077
|
+
},
|
|
22053
22078
|
"VariableID:41338:806": {
|
|
22054
22079
|
"name": "stroke/informative-solid",
|
|
22055
22080
|
"id": "VariableID:41338:806",
|
|
@@ -22351,8 +22376,8 @@ const FIGMA_VARIABLES = {
|
|
|
22351
22376
|
}
|
|
22352
22377
|
};
|
|
22353
22378
|
|
|
22354
|
-
const
|
|
22355
|
-
"name": "
|
|
22379
|
+
const privateTemplateAttachmentField = {
|
|
22380
|
+
"name": "privateTemplateAttachmentField",
|
|
22356
22381
|
"key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
|
|
22357
22382
|
"componentPropertyDefinitions": {
|
|
22358
22383
|
"Show Header#40606:8": {
|
|
@@ -22565,6 +22590,19 @@ const privateComponentFieldHeaderSuffix = {
|
|
|
22565
22590
|
}
|
|
22566
22591
|
}
|
|
22567
22592
|
};
|
|
22593
|
+
const privateComponentIdentityPlaceholder = {
|
|
22594
|
+
"name": "privateComponentIdentityPlaceholder",
|
|
22595
|
+
"key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
|
|
22596
|
+
"componentPropertyDefinitions": {
|
|
22597
|
+
"Identity": {
|
|
22598
|
+
"type": "VARIANT",
|
|
22599
|
+
"variantOptions": [
|
|
22600
|
+
"Person",
|
|
22601
|
+
"Business"
|
|
22602
|
+
]
|
|
22603
|
+
}
|
|
22604
|
+
}
|
|
22605
|
+
};
|
|
22568
22606
|
const privateComponentInputButtonPrefix = {
|
|
22569
22607
|
"name": "privateComponentInputButtonPrefix",
|
|
22570
22608
|
"key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
|
|
@@ -24357,11 +24395,11 @@ const componentBottomSheet = {
|
|
|
24357
24395
|
"Header Layout": {
|
|
24358
24396
|
"type": "VARIANT",
|
|
24359
24397
|
"variantOptions": [
|
|
24398
|
+
"Top Left",
|
|
24399
|
+
"Top Center",
|
|
24360
24400
|
"Bottom Left",
|
|
24361
|
-
"None",
|
|
24362
24401
|
"Bottom Center",
|
|
24363
|
-
"
|
|
24364
|
-
"Top Left"
|
|
24402
|
+
"None"
|
|
24365
24403
|
]
|
|
24366
24404
|
}
|
|
24367
24405
|
}
|
|
@@ -24909,7 +24947,7 @@ const componentImageFrame = {
|
|
|
24909
24947
|
"80",
|
|
24910
24948
|
"96",
|
|
24911
24949
|
"120",
|
|
24912
|
-
"
|
|
24950
|
+
"Free"
|
|
24913
24951
|
]
|
|
24914
24952
|
},
|
|
24915
24953
|
"Rounded": {
|
|
@@ -25768,8 +25806,7 @@ const componentSwitch = {
|
|
|
25768
25806
|
"type": "VARIANT",
|
|
25769
25807
|
"variantOptions": [
|
|
25770
25808
|
"Label Last",
|
|
25771
|
-
"Label First"
|
|
25772
|
-
"🚫[Switch Mark 사용] Switch Only"
|
|
25809
|
+
"Label First"
|
|
25773
25810
|
]
|
|
25774
25811
|
}
|
|
25775
25812
|
}
|
|
@@ -26538,6 +26575,7 @@ var FIGMA_COMPONENTS = {
|
|
|
26538
26575
|
privateComponentFieldFooterCharacterCount: privateComponentFieldFooterCharacterCount,
|
|
26539
26576
|
privateComponentFieldHeaderIndicator: privateComponentFieldHeaderIndicator,
|
|
26540
26577
|
privateComponentFieldHeaderSuffix: privateComponentFieldHeaderSuffix,
|
|
26578
|
+
privateComponentIdentityPlaceholder: privateComponentIdentityPlaceholder,
|
|
26541
26579
|
privateComponentInputButtonPrefix: privateComponentInputButtonPrefix,
|
|
26542
26580
|
privateComponentInputButtonSuffix: privateComponentInputButtonSuffix,
|
|
26543
26581
|
privateComponentInputButtonValue: privateComponentInputButtonValue,
|
|
@@ -26582,7 +26620,7 @@ var FIGMA_COMPONENTS = {
|
|
|
26582
26620
|
privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
|
|
26583
26621
|
privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
|
|
26584
26622
|
privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
|
|
26585
|
-
|
|
26623
|
+
privateTemplateAttachmentField: privateTemplateAttachmentField,
|
|
26586
26624
|
privateTemplateChipGroup: privateTemplateChipGroup,
|
|
26587
26625
|
privateTemplateChipGroupField: privateTemplateChipGroupField,
|
|
26588
26626
|
privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,
|
package/lib/index.js
CHANGED
|
@@ -15217,6 +15217,7 @@ const FIGMA_VARIABLE_COLLECTIONS = {
|
|
|
15217
15217
|
"VariableID:576:22878",
|
|
15218
15218
|
"VariableID:59176:2",
|
|
15219
15219
|
"VariableID:59176:3",
|
|
15220
|
+
"VariableID:61337:3",
|
|
15220
15221
|
"VariableID:654:20851",
|
|
15221
15222
|
"VariableID:670:2700",
|
|
15222
15223
|
"VariableID:6782:76317",
|
|
@@ -22050,6 +22051,30 @@ const FIGMA_VARIABLES = {
|
|
|
22050
22051
|
],
|
|
22051
22052
|
"codeSyntax": {}
|
|
22052
22053
|
},
|
|
22054
|
+
"VariableID:61337:3": {
|
|
22055
|
+
"name": "stroke/focus-ring",
|
|
22056
|
+
"id": "VariableID:61337:3",
|
|
22057
|
+
"remote": false,
|
|
22058
|
+
"key": "ca937a0bb83fda59d06959cfb5d960f00b5e9add",
|
|
22059
|
+
"variableCollectionId": "VariableCollectionId:1:3",
|
|
22060
|
+
"resolvedType": "COLOR",
|
|
22061
|
+
"description": "",
|
|
22062
|
+
"hiddenFromPublishing": false,
|
|
22063
|
+
"valuesByMode": {
|
|
22064
|
+
"1928:7": {
|
|
22065
|
+
"type": "VARIABLE_ALIAS",
|
|
22066
|
+
"id": "VariableID:1883:92938"
|
|
22067
|
+
},
|
|
22068
|
+
"1928:8": {
|
|
22069
|
+
"type": "VARIABLE_ALIAS",
|
|
22070
|
+
"id": "VariableID:1883:92938"
|
|
22071
|
+
}
|
|
22072
|
+
},
|
|
22073
|
+
"scopes": [
|
|
22074
|
+
"ALL_SCOPES"
|
|
22075
|
+
],
|
|
22076
|
+
"codeSyntax": {}
|
|
22077
|
+
},
|
|
22053
22078
|
"VariableID:41338:806": {
|
|
22054
22079
|
"name": "stroke/informative-solid",
|
|
22055
22080
|
"id": "VariableID:41338:806",
|
|
@@ -22351,8 +22376,8 @@ const FIGMA_VARIABLES = {
|
|
|
22351
22376
|
}
|
|
22352
22377
|
};
|
|
22353
22378
|
|
|
22354
|
-
const
|
|
22355
|
-
"name": "
|
|
22379
|
+
const privateTemplateAttachmentField = {
|
|
22380
|
+
"name": "privateTemplateAttachmentField",
|
|
22356
22381
|
"key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
|
|
22357
22382
|
"componentPropertyDefinitions": {
|
|
22358
22383
|
"Show Header#40606:8": {
|
|
@@ -22565,6 +22590,19 @@ const privateComponentFieldHeaderSuffix = {
|
|
|
22565
22590
|
}
|
|
22566
22591
|
}
|
|
22567
22592
|
};
|
|
22593
|
+
const privateComponentIdentityPlaceholder = {
|
|
22594
|
+
"name": "privateComponentIdentityPlaceholder",
|
|
22595
|
+
"key": "7d7ae18cabac6ebad19934516de8e7e256854eba",
|
|
22596
|
+
"componentPropertyDefinitions": {
|
|
22597
|
+
"Identity": {
|
|
22598
|
+
"type": "VARIANT",
|
|
22599
|
+
"variantOptions": [
|
|
22600
|
+
"Person",
|
|
22601
|
+
"Business"
|
|
22602
|
+
]
|
|
22603
|
+
}
|
|
22604
|
+
}
|
|
22605
|
+
};
|
|
22568
22606
|
const privateComponentInputButtonPrefix = {
|
|
22569
22607
|
"name": "privateComponentInputButtonPrefix",
|
|
22570
22608
|
"key": "c7d12be4056a8171f6857ec4ef15d81bd18d8cae",
|
|
@@ -24357,11 +24395,11 @@ const componentBottomSheet = {
|
|
|
24357
24395
|
"Header Layout": {
|
|
24358
24396
|
"type": "VARIANT",
|
|
24359
24397
|
"variantOptions": [
|
|
24398
|
+
"Top Left",
|
|
24399
|
+
"Top Center",
|
|
24360
24400
|
"Bottom Left",
|
|
24361
|
-
"None",
|
|
24362
24401
|
"Bottom Center",
|
|
24363
|
-
"
|
|
24364
|
-
"Top Left"
|
|
24402
|
+
"None"
|
|
24365
24403
|
]
|
|
24366
24404
|
}
|
|
24367
24405
|
}
|
|
@@ -24909,7 +24947,7 @@ const componentImageFrame = {
|
|
|
24909
24947
|
"80",
|
|
24910
24948
|
"96",
|
|
24911
24949
|
"120",
|
|
24912
|
-
"
|
|
24950
|
+
"Free"
|
|
24913
24951
|
]
|
|
24914
24952
|
},
|
|
24915
24953
|
"Rounded": {
|
|
@@ -25768,8 +25806,7 @@ const componentSwitch = {
|
|
|
25768
25806
|
"type": "VARIANT",
|
|
25769
25807
|
"variantOptions": [
|
|
25770
25808
|
"Label Last",
|
|
25771
|
-
"Label First"
|
|
25772
|
-
"🚫[Switch Mark 사용] Switch Only"
|
|
25809
|
+
"Label First"
|
|
25773
25810
|
]
|
|
25774
25811
|
}
|
|
25775
25812
|
}
|
|
@@ -26538,6 +26575,7 @@ var FIGMA_COMPONENTS = {
|
|
|
26538
26575
|
privateComponentFieldFooterCharacterCount: privateComponentFieldFooterCharacterCount,
|
|
26539
26576
|
privateComponentFieldHeaderIndicator: privateComponentFieldHeaderIndicator,
|
|
26540
26577
|
privateComponentFieldHeaderSuffix: privateComponentFieldHeaderSuffix,
|
|
26578
|
+
privateComponentIdentityPlaceholder: privateComponentIdentityPlaceholder,
|
|
26541
26579
|
privateComponentInputButtonPrefix: privateComponentInputButtonPrefix,
|
|
26542
26580
|
privateComponentInputButtonSuffix: privateComponentInputButtonSuffix,
|
|
26543
26581
|
privateComponentInputButtonValue: privateComponentInputButtonValue,
|
|
@@ -26582,7 +26620,7 @@ var FIGMA_COMPONENTS = {
|
|
|
26582
26620
|
privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
|
|
26583
26621
|
privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
|
|
26584
26622
|
privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
|
|
26585
|
-
|
|
26623
|
+
privateTemplateAttachmentField: privateTemplateAttachmentField,
|
|
26586
26624
|
privateTemplateChipGroup: privateTemplateChipGroup,
|
|
26587
26625
|
privateTemplateChipGroupField: privateTemplateChipGroupField,
|
|
26588
26626
|
privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,
|