@seed-design/figma 1.3.3 → 1.3.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/codegen/index.cjs +32 -11
- package/lib/codegen/index.d.ts +2 -1
- package/lib/codegen/index.d.ts.map +1 -1
- package/lib/codegen/index.js +32 -11
- package/lib/codegen/targets/react/index.cjs +159 -16
- package/lib/codegen/targets/react/index.d.ts.map +1 -1
- package/lib/codegen/targets/react/index.js +159 -16
- package/lib/index.cjs +8 -9
- package/lib/index.js +8 -9
- package/package.json +3 -3
- package/src/codegen/component-properties.ts +16 -0
- package/src/codegen/core/codegen.ts +22 -0
- 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/image-frame.ts +134 -0
- package/src/codegen/targets/react/component/handlers/index.ts +1 -0
- package/src/codegen/targets/react/component/handlers/switch.ts +0 -4
- package/src/codegen/targets/react/pipeline.ts +2 -0
- package/src/entities/data/__generated__/component-sets/index.d.ts +8 -9
- package/src/entities/data/__generated__/component-sets/index.mjs +7 -8
- package/src/entities/data/__generated__/components/index.d.ts +5 -5
- package/src/entities/data/__generated__/components/index.mjs +5 -5
package/lib/codegen/index.cjs
CHANGED
|
@@ -448,11 +448,20 @@ function applyInferredLayout(parentNode, result) {
|
|
|
448
448
|
};
|
|
449
449
|
}
|
|
450
450
|
|
|
451
|
-
function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout }) {
|
|
451
|
+
function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys }) {
|
|
452
|
+
function isSkippedInstance(node) {
|
|
453
|
+
if (!skipComponentKeys || skipComponentKeys.size === 0) return false;
|
|
454
|
+
if (node.type !== "INSTANCE") return false;
|
|
455
|
+
const { componentKey, componentSetKey } = node;
|
|
456
|
+
return skipComponentKeys.has(componentKey) || !!componentSetKey && skipComponentKeys.has(componentSetKey);
|
|
457
|
+
}
|
|
452
458
|
function traverse(node) {
|
|
453
459
|
if ("visible" in node && !node.visible) {
|
|
454
460
|
return;
|
|
455
461
|
}
|
|
462
|
+
if (isSkippedInstance(node)) {
|
|
463
|
+
return;
|
|
464
|
+
}
|
|
456
465
|
const result = tsPattern.match(node).with({
|
|
457
466
|
type: "FRAME"
|
|
458
467
|
}, (node)=>shouldInferAutoLayout ? frameTransformer(applyInferredLayout(node, inferLayout(node)), traverse) : frameTransformer(node, traverse)).with({
|
|
@@ -480,6 +489,12 @@ function createCodeGenerator({ frameTransformer, textTransformer, rectangleTrans
|
|
|
480
489
|
return traverse(node);
|
|
481
490
|
}
|
|
482
491
|
function generateCode(node, options) {
|
|
492
|
+
if (isSkippedInstance(node)) {
|
|
493
|
+
return {
|
|
494
|
+
imports: "",
|
|
495
|
+
jsx: "// This component is intentionally excluded from codegen"
|
|
496
|
+
};
|
|
497
|
+
}
|
|
483
498
|
const jsxTree = generateJsxTree(node);
|
|
484
499
|
if (!jsxTree) {
|
|
485
500
|
return undefined;
|
|
@@ -18651,8 +18666,8 @@ const FIGMA_VARIABLES = {
|
|
|
18651
18666
|
}
|
|
18652
18667
|
};
|
|
18653
18668
|
|
|
18654
|
-
const
|
|
18655
|
-
"name": "
|
|
18669
|
+
const privateTemplateAttachmentField = {
|
|
18670
|
+
"name": "privateTemplateAttachmentField",
|
|
18656
18671
|
"key": "5ba20e248e9cd0292fc285488b2ed3b3145d37b0",
|
|
18657
18672
|
"componentPropertyDefinitions": {
|
|
18658
18673
|
"Show Header#40606:8": {
|
|
@@ -20657,11 +20672,11 @@ const componentBottomSheet = {
|
|
|
20657
20672
|
"Header Layout": {
|
|
20658
20673
|
"type": "VARIANT",
|
|
20659
20674
|
"variantOptions": [
|
|
20675
|
+
"Top Left",
|
|
20676
|
+
"Top Center",
|
|
20660
20677
|
"Bottom Left",
|
|
20661
|
-
"None",
|
|
20662
20678
|
"Bottom Center",
|
|
20663
|
-
"
|
|
20664
|
-
"Top Left"
|
|
20679
|
+
"None"
|
|
20665
20680
|
]
|
|
20666
20681
|
}
|
|
20667
20682
|
}
|
|
@@ -21209,7 +21224,7 @@ const componentImageFrame = {
|
|
|
21209
21224
|
"80",
|
|
21210
21225
|
"96",
|
|
21211
21226
|
"120",
|
|
21212
|
-
"
|
|
21227
|
+
"Free"
|
|
21213
21228
|
]
|
|
21214
21229
|
},
|
|
21215
21230
|
"Rounded": {
|
|
@@ -22068,8 +22083,7 @@ const componentSwitch = {
|
|
|
22068
22083
|
"type": "VARIANT",
|
|
22069
22084
|
"variantOptions": [
|
|
22070
22085
|
"Label Last",
|
|
22071
|
-
"Label First"
|
|
22072
|
-
"🚫[Switch Mark 사용] Switch Only"
|
|
22086
|
+
"Label First"
|
|
22073
22087
|
]
|
|
22074
22088
|
}
|
|
22075
22089
|
}
|
|
@@ -22882,7 +22896,7 @@ var FIGMA_COMPONENTS = {
|
|
|
22882
22896
|
privateComponentUnderlineTextInputInputReadOnly: privateComponentUnderlineTextInputInputReadOnly,
|
|
22883
22897
|
privateComponentUnderlineTextInputPrefix: privateComponentUnderlineTextInputPrefix,
|
|
22884
22898
|
privateComponentUnderlineTextInputSuffix: privateComponentUnderlineTextInputSuffix,
|
|
22885
|
-
|
|
22899
|
+
privateTemplateAttachmentField: privateTemplateAttachmentField,
|
|
22886
22900
|
privateTemplateChipGroup: privateTemplateChipGroup,
|
|
22887
22901
|
privateTemplateChipGroupField: privateTemplateChipGroupField,
|
|
22888
22902
|
privateTemplatePhoneNumberField: privateTemplatePhoneNumberField,
|
|
@@ -23059,6 +23073,12 @@ const variableService = createVariableService({
|
|
|
23059
23073
|
}
|
|
23060
23074
|
});
|
|
23061
23075
|
|
|
23076
|
+
const SKIP_COMPONENT_KEYS = new Set([
|
|
23077
|
+
componentOsBottomIndicatorFigmaOnly.key,
|
|
23078
|
+
componentOsKeyboardFigmaOnly.key,
|
|
23079
|
+
componentOsStatusBarFigmaOnly.key
|
|
23080
|
+
]);
|
|
23081
|
+
|
|
23062
23082
|
function createFrameTransformer({ propsConverters }) {
|
|
23063
23083
|
return defineElementTransformer((node, traverse)=>{
|
|
23064
23084
|
const children = node.children;
|
|
@@ -23381,7 +23401,8 @@ function createPipeline(options = {}) {
|
|
|
23381
23401
|
instanceTransformer,
|
|
23382
23402
|
vectorTransformer,
|
|
23383
23403
|
booleanOperationTransformer,
|
|
23384
|
-
shouldInferAutoLayout
|
|
23404
|
+
shouldInferAutoLayout,
|
|
23405
|
+
skipComponentKeys: SKIP_COMPONENT_KEYS
|
|
23385
23406
|
});
|
|
23386
23407
|
return codegenTransformer;
|
|
23387
23408
|
}
|
package/lib/codegen/index.d.ts
CHANGED
|
@@ -122,6 +122,7 @@ interface CodeGeneratorDeps {
|
|
|
122
122
|
vectorTransformer: ElementTransformer<NormalizedVectorNode>;
|
|
123
123
|
booleanOperationTransformer: ElementTransformer<NormalizedBooleanOperationNode>;
|
|
124
124
|
shouldInferAutoLayout: boolean;
|
|
125
|
+
skipComponentKeys?: Set<string>;
|
|
125
126
|
}
|
|
126
127
|
interface CodeGenerator {
|
|
127
128
|
generateJsxTree: (node: NormalizedSceneNode) => ElementNode | undefined;
|
|
@@ -132,7 +133,7 @@ interface CodeGenerator {
|
|
|
132
133
|
jsx: string;
|
|
133
134
|
} | undefined;
|
|
134
135
|
}
|
|
135
|
-
declare function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, }: CodeGeneratorDeps): CodeGenerator;
|
|
136
|
+
declare function createCodeGenerator({ frameTransformer, textTransformer, rectangleTransformer, instanceTransformer, vectorTransformer, booleanOperationTransformer, shouldInferAutoLayout, skipComponentKeys, }: CodeGeneratorDeps): CodeGenerator;
|
|
136
137
|
|
|
137
138
|
interface ComponentHandler<T extends NormalizedInstanceNode["componentProperties"] = NormalizedInstanceNode["componentProperties"]> {
|
|
138
139
|
key: string;
|