@seed-design/figma 1.3.8 → 1.3.10
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 +51 -7
- package/lib/codegen/index.d.ts +9 -2
- package/lib/codegen/index.d.ts.map +1 -1
- package/lib/codegen/index.js +51 -7
- package/lib/codegen/targets/react/index.cjs +39 -17
- package/lib/codegen/targets/react/index.d.ts +7 -1
- package/lib/codegen/targets/react/index.d.ts.map +1 -1
- package/lib/codegen/targets/react/index.js +39 -17
- package/lib/index.cjs +63 -5
- package/lib/index.d.ts +8 -2
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +63 -5
- package/package.json +3 -3
- package/src/codegen/core/codegen.ts +4 -0
- package/src/codegen/targets/figma/instance.ts +29 -11
- package/src/codegen/targets/figma/pipeline.ts +15 -1
- package/src/codegen/targets/react/component/handlers/bottom-sheet.ts +9 -13
- package/src/codegen/targets/react/component/handlers/image-frame.ts +1 -1
- package/src/codegen/targets/react/component/handlers/select-box.ts +16 -10
- package/src/codegen/targets/react/pipeline.ts +7 -1
- package/src/entities/data/__generated__/component-sets/index.d.ts +14 -3
- package/src/entities/data/__generated__/component-sets/index.mjs +14 -3
- package/src/entities/data/__generated__/components/index.d.ts +5 -15
- package/src/entities/data/__generated__/components/index.mjs +5 -15
- package/src/normalizer/from-plugin.ts +34 -1
- package/src/normalizer/from-rest.ts +33 -1
- package/src/normalizer/types.ts +8 -0
- package/src/utils/figma-node.ts +14 -8
package/lib/index.js
CHANGED
|
@@ -24,6 +24,8 @@ export * from './codegen/index.js';
|
|
|
24
24
|
return normalizeComponentNode(node);
|
|
25
25
|
case "INSTANCE":
|
|
26
26
|
return normalizeInstanceNode(node);
|
|
27
|
+
case "SLOT":
|
|
28
|
+
return normalizeSlotNode(node);
|
|
27
29
|
case "VECTOR":
|
|
28
30
|
return normalizeVectorNode(node);
|
|
29
31
|
case "BOOLEAN_OPERATION":
|
|
@@ -78,7 +80,7 @@ export * from './codegen/index.js';
|
|
|
78
80
|
}
|
|
79
81
|
function normalizePaints(paints) {
|
|
80
82
|
if (!paints) return [];
|
|
81
|
-
return paints.map(normalizePaint);
|
|
83
|
+
return paints.filter((paint)=>!("visible" in paint) || paint.visible !== false).map(normalizePaint);
|
|
82
84
|
}
|
|
83
85
|
function normalizeRadiusProps({ cornerRadius, rectangleCornerRadii }) {
|
|
84
86
|
return {
|
|
@@ -160,6 +162,27 @@ export * from './codegen/index.js';
|
|
|
160
162
|
children: normalizeNodes(node.children)
|
|
161
163
|
};
|
|
162
164
|
}
|
|
165
|
+
function normalizeSlotNode(node) {
|
|
166
|
+
return {
|
|
167
|
+
// NormalizedIsLayerTrait
|
|
168
|
+
type: node.type,
|
|
169
|
+
id: node.id,
|
|
170
|
+
name: node.name,
|
|
171
|
+
boundVariables: normalizeBoundVariables(node.boundVariables),
|
|
172
|
+
// NormalizedHasLayoutTrait, NormalizedHasGeometryTrait, NormalizedHasEffectsTrait, NormalizedHasFramePropertiesTrait
|
|
173
|
+
...normalizeShapeProps(node),
|
|
174
|
+
// NormalizedCornerTrait
|
|
175
|
+
...normalizeRadiusProps(node),
|
|
176
|
+
// NormalizedHasFramePropertiesTrait
|
|
177
|
+
...normalizeAutolayoutProps(node),
|
|
178
|
+
// NormalizedHasChildrenTrait
|
|
179
|
+
children: normalizeNodes(node.children),
|
|
180
|
+
// NormalizedSlotNode specific
|
|
181
|
+
...node.componentPropertyReferences?.["slotContentId"] && {
|
|
182
|
+
componentPropertyReferences: node.componentPropertyReferences
|
|
183
|
+
}
|
|
184
|
+
};
|
|
185
|
+
}
|
|
163
186
|
function normalizeRectangleNode(node) {
|
|
164
187
|
return {
|
|
165
188
|
// NormalizedIsLayerTrait
|
|
@@ -514,6 +537,8 @@ function createPluginNormalizer() {
|
|
|
514
537
|
return normalizeComponentNode(node);
|
|
515
538
|
case "INSTANCE":
|
|
516
539
|
return normalizeInstanceNode(node);
|
|
540
|
+
case "SLOT":
|
|
541
|
+
return normalizeSlotNode(node);
|
|
517
542
|
case "VECTOR":
|
|
518
543
|
return normalizeVectorNode(node);
|
|
519
544
|
case "BOOLEAN_OPERATION":
|
|
@@ -613,7 +638,7 @@ function createPluginNormalizer() {
|
|
|
613
638
|
console.warn("Mixed fills are not supported");
|
|
614
639
|
return [];
|
|
615
640
|
}
|
|
616
|
-
return fills.map(normalizePaint);
|
|
641
|
+
return fills.filter((paint)=>paint.visible !== false).map(normalizePaint);
|
|
617
642
|
}
|
|
618
643
|
function normalizeRadiusProps(node) {
|
|
619
644
|
return {
|
|
@@ -696,6 +721,28 @@ function createPluginNormalizer() {
|
|
|
696
721
|
children: await normalizeNodes(node.children)
|
|
697
722
|
};
|
|
698
723
|
}
|
|
724
|
+
async function normalizeSlotNode(node) {
|
|
725
|
+
return {
|
|
726
|
+
// NormalizedIsLayerTrait
|
|
727
|
+
type: node.type,
|
|
728
|
+
id: node.id,
|
|
729
|
+
name: node.name,
|
|
730
|
+
boundVariables: normalizeBoundVariables(node),
|
|
731
|
+
// NormalizedHasLayoutTrait, NormalizedHasGeometryTrait, NormalizedHasEffectsTrait
|
|
732
|
+
...await normalizeShapeProps(node),
|
|
733
|
+
// NormalizedCornerTrait
|
|
734
|
+
...normalizeRadiusProps(node),
|
|
735
|
+
// NormalizedHasFramePropertiesTrait
|
|
736
|
+
...await normalizeAutolayoutProps(node),
|
|
737
|
+
// NormalizedHasChildrenTrait
|
|
738
|
+
children: await normalizeNodes(node.children),
|
|
739
|
+
// NormalizedSlotNode specific
|
|
740
|
+
// Plugin API types don't include "slotContentId" in componentPropertyReferences yet
|
|
741
|
+
...node.componentPropertyReferences?.["slotContentId"] && {
|
|
742
|
+
componentPropertyReferences: node.componentPropertyReferences
|
|
743
|
+
}
|
|
744
|
+
};
|
|
745
|
+
}
|
|
699
746
|
async function normalizeRectangleNode(node) {
|
|
700
747
|
return {
|
|
701
748
|
// NormalizedIsLayerTrait
|
|
@@ -24308,6 +24355,7 @@ const componentAvatar = {
|
|
|
24308
24355
|
"36",
|
|
24309
24356
|
"42",
|
|
24310
24357
|
"48",
|
|
24358
|
+
"56",
|
|
24311
24359
|
"64",
|
|
24312
24360
|
"80",
|
|
24313
24361
|
"96",
|
|
@@ -24361,6 +24409,7 @@ const componentAvatarStack = {
|
|
|
24361
24409
|
"36",
|
|
24362
24410
|
"42",
|
|
24363
24411
|
"48",
|
|
24412
|
+
"56",
|
|
24364
24413
|
"64",
|
|
24365
24414
|
"80",
|
|
24366
24415
|
"96",
|
|
@@ -24453,6 +24502,9 @@ const componentBottomSheet = {
|
|
|
24453
24502
|
"name": "componentBottomSheet",
|
|
24454
24503
|
"key": "ffe99a21452831c28bd9375aac0aaf37d7ee6a0d",
|
|
24455
24504
|
"componentPropertyDefinitions": {
|
|
24505
|
+
"Contents Slot#6752:0": {
|
|
24506
|
+
"type": "SLOT"
|
|
24507
|
+
},
|
|
24456
24508
|
"Title#19787:3": {
|
|
24457
24509
|
"type": "TEXT"
|
|
24458
24510
|
},
|
|
@@ -24468,9 +24520,6 @@ const componentBottomSheet = {
|
|
|
24468
24520
|
"Show Description#25192:0": {
|
|
24469
24521
|
"type": "BOOLEAN"
|
|
24470
24522
|
},
|
|
24471
|
-
"Contents#25320:0": {
|
|
24472
|
-
"type": "INSTANCE_SWAP"
|
|
24473
|
-
},
|
|
24474
24523
|
"Show Safe Area#25488:8": {
|
|
24475
24524
|
"type": "BOOLEAN"
|
|
24476
24525
|
},
|
|
@@ -24797,6 +24846,9 @@ const componentChlid = {
|
|
|
24797
24846
|
"name": "componentChlid",
|
|
24798
24847
|
"key": "ef79a21a39ceb4ce24b2fb93c9b430c1980a3e71",
|
|
24799
24848
|
"componentPropertyDefinitions": {
|
|
24849
|
+
"Slot#6081:0": {
|
|
24850
|
+
"type": "SLOT"
|
|
24851
|
+
},
|
|
24800
24852
|
"Type": {
|
|
24801
24853
|
"type": "VARIANT",
|
|
24802
24854
|
"variantOptions": [
|
|
@@ -26484,6 +26536,9 @@ const componentSelectBoxItemHorizontal = {
|
|
|
26484
26536
|
"name": "componentSelectBoxItemHorizontal",
|
|
26485
26537
|
"key": "8174af8ef3654dad996723883f5b84f44f791513",
|
|
26486
26538
|
"componentPropertyDefinitions": {
|
|
26539
|
+
"Content Slot#6752:6": {
|
|
26540
|
+
"type": "SLOT"
|
|
26541
|
+
},
|
|
26487
26542
|
"Title#28452:21": {
|
|
26488
26543
|
"type": "TEXT"
|
|
26489
26544
|
},
|
|
@@ -26531,6 +26586,9 @@ const componentSelectBoxItemVertical = {
|
|
|
26531
26586
|
"name": "componentSelectBoxItemVertical",
|
|
26532
26587
|
"key": "ccc88f0aae500c64e7d43be63c4f1a70baf76bfe",
|
|
26533
26588
|
"componentPropertyDefinitions": {
|
|
26589
|
+
"Content Slot#6765:0": {
|
|
26590
|
+
"type": "SLOT"
|
|
26591
|
+
},
|
|
26534
26592
|
"Title#58766:114": {
|
|
26535
26593
|
"type": "TEXT"
|
|
26536
26594
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seed-design/figma",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.10",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/daangn/seed-design.git",
|
|
@@ -39,12 +39,12 @@
|
|
|
39
39
|
"sync-entities": "find src/entities/data/__generated__ -mindepth 1 -maxdepth 1 ! -name 'archive' -exec rm -rf {} + 2>/dev/null; bun figma-extractor src/entities/data/__generated__"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@seed-design/css": "1.2.
|
|
42
|
+
"@seed-design/css": "1.2.8",
|
|
43
43
|
"change-case": "^5.4.4",
|
|
44
44
|
"ts-pattern": "^5.7.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
-
"@figma/plugin-typings": "^1.
|
|
47
|
+
"@figma/plugin-typings": "^1.123.0",
|
|
48
48
|
"@figma/rest-api-spec": "^0.36.0",
|
|
49
49
|
"@karrotmarket/icon-data": "^1.22.0",
|
|
50
50
|
"@seed-design/figma-extractor": "^1.1.0",
|
|
@@ -5,6 +5,7 @@ import type {
|
|
|
5
5
|
NormalizedInstanceNode,
|
|
6
6
|
NormalizedRectangleNode,
|
|
7
7
|
NormalizedSceneNode,
|
|
8
|
+
NormalizedSlotNode,
|
|
8
9
|
NormalizedTextNode,
|
|
9
10
|
NormalizedVectorNode,
|
|
10
11
|
} from "@/normalizer";
|
|
@@ -18,6 +19,7 @@ export interface CodeGeneratorDeps {
|
|
|
18
19
|
frameTransformer: ElementTransformer<
|
|
19
20
|
NormalizedFrameNode | NormalizedComponentNode | NormalizedInstanceNode
|
|
20
21
|
>;
|
|
22
|
+
slotTransformer: ElementTransformer<NormalizedSlotNode>;
|
|
21
23
|
textTransformer: ElementTransformer<NormalizedTextNode>;
|
|
22
24
|
rectangleTransformer: ElementTransformer<NormalizedRectangleNode>;
|
|
23
25
|
instanceTransformer: ElementTransformer<NormalizedInstanceNode>;
|
|
@@ -37,6 +39,7 @@ export interface CodeGenerator {
|
|
|
37
39
|
|
|
38
40
|
export function createCodeGenerator({
|
|
39
41
|
frameTransformer,
|
|
42
|
+
slotTransformer,
|
|
40
43
|
textTransformer,
|
|
41
44
|
rectangleTransformer,
|
|
42
45
|
instanceTransformer,
|
|
@@ -75,6 +78,7 @@ export function createCodeGenerator({
|
|
|
75
78
|
.with({ type: "TEXT" }, (node) => textTransformer(node, traverse))
|
|
76
79
|
.with({ type: "RECTANGLE" }, (node) => rectangleTransformer(node, traverse))
|
|
77
80
|
.with({ type: "COMPONENT" }, (node) => frameTransformer(node, traverse)) // NOTE: Treat component node as Frame for now
|
|
81
|
+
.with({ type: "SLOT" }, (node) => slotTransformer(node, traverse))
|
|
78
82
|
.with({ type: "INSTANCE" }, (node) => instanceTransformer(node, traverse))
|
|
79
83
|
.with({ type: "VECTOR" }, (node) => vectorTransformer(node, traverse))
|
|
80
84
|
.with({ type: "BOOLEAN_OPERATION" }, (node) => booleanOperationTransformer(node, traverse))
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { ComponentRepository } from "@/entities";
|
|
2
2
|
import type { NormalizedInstanceNode } from "@/normalizer";
|
|
3
|
+
import { findOne } from "@/utils/figma-node";
|
|
3
4
|
import { camelCase } from "change-case";
|
|
4
5
|
import { createElement, defineElementTransformer, type ElementTransformer } from "../../core";
|
|
5
6
|
|
|
@@ -16,17 +17,34 @@ export function createInstanceTransformer({
|
|
|
16
17
|
const component = componentRepository?.getOne(node.componentSetKey ?? node.componentKey);
|
|
17
18
|
|
|
18
19
|
if (component) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
)
|
|
29
|
-
|
|
20
|
+
const slotChildren = Object.entries(node.componentProperties)
|
|
21
|
+
.filter(([_, prop]) => prop.type === "SLOT")
|
|
22
|
+
.map(([key]) =>
|
|
23
|
+
findOne(
|
|
24
|
+
node,
|
|
25
|
+
(child) =>
|
|
26
|
+
child.type === "SLOT" && child.componentPropertyReferences?.slotContentId === key,
|
|
27
|
+
),
|
|
28
|
+
)
|
|
29
|
+
.filter((slot) => slot != null)
|
|
30
|
+
.map((slot) => traverse(slot))
|
|
31
|
+
.filter((el) => el != null);
|
|
32
|
+
|
|
33
|
+
return createElement(
|
|
34
|
+
"Instance",
|
|
35
|
+
{
|
|
36
|
+
componentName: component.name,
|
|
37
|
+
...Object.fromEntries(
|
|
38
|
+
Object.entries(node.componentProperties)
|
|
39
|
+
.filter(([_, props]) => props.type === "VARIANT" || props.type === "TEXT")
|
|
40
|
+
.map(([key, props]) => [
|
|
41
|
+
camelCase(key.split("#")[0]),
|
|
42
|
+
camelCase(props.value as string),
|
|
43
|
+
]),
|
|
44
|
+
),
|
|
45
|
+
},
|
|
46
|
+
slotChildren,
|
|
47
|
+
);
|
|
30
48
|
}
|
|
31
49
|
|
|
32
50
|
return frameTransformer(node, traverse);
|
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
createCodeGenerator,
|
|
3
|
+
createValueResolver,
|
|
4
|
+
createElement,
|
|
5
|
+
defineElementTransformer,
|
|
6
|
+
} from "@/codegen/core";
|
|
2
7
|
import type { CodeGenerator } from "@/codegen/core/codegen";
|
|
8
|
+
import type { NormalizedSlotNode } from "@/normalizer";
|
|
3
9
|
import { styleService, variableService } from "@/codegen/default-services";
|
|
4
10
|
import { SKIP_COMPONENT_KEYS } from "@/codegen/skip-components";
|
|
5
11
|
import { componentRepository } from "@/entities";
|
|
@@ -91,8 +97,16 @@ export function createPipeline(options: CreatePipelineConfig = {}): CodeGenerato
|
|
|
91
97
|
propsConverters,
|
|
92
98
|
});
|
|
93
99
|
|
|
100
|
+
const slotTransformer = defineElementTransformer<NormalizedSlotNode>((node, traverse) => {
|
|
101
|
+
const slotName = node.componentPropertyReferences?.slotContentId?.split("#")[0];
|
|
102
|
+
const frameResult = frameTransformer({ ...node, type: "FRAME" }, traverse);
|
|
103
|
+
if (!frameResult) return undefined;
|
|
104
|
+
return createElement("Slot", { ...(slotName && { name: slotName }) }, frameResult);
|
|
105
|
+
});
|
|
106
|
+
|
|
94
107
|
const codegenTransformer = createCodeGenerator({
|
|
95
108
|
frameTransformer,
|
|
109
|
+
slotTransformer,
|
|
96
110
|
textTransformer,
|
|
97
111
|
rectangleTransformer,
|
|
98
112
|
instanceTransformer,
|
|
@@ -4,7 +4,7 @@ import * as metadata from "@/entities/data/__generated__/component-sets";
|
|
|
4
4
|
import { match } from "ts-pattern";
|
|
5
5
|
import { createLocalSnippetHelper } from "../../element-factories";
|
|
6
6
|
import type { ComponentHandlerDeps } from "../deps.interface";
|
|
7
|
-
import { findAllInstances } from "@/utils/figma-node";
|
|
7
|
+
import { findAllInstances, findSlotNode } from "@/utils/figma-node";
|
|
8
8
|
|
|
9
9
|
const { createLocalSnippetElement } = createLocalSnippetHelper("bottom-sheet");
|
|
10
10
|
const { createLocalSnippetElement: createLocalSnippetElementTrigger } =
|
|
@@ -30,19 +30,15 @@ export const createBottomSheetHandler = (_ctx: ComponentHandlerDeps) =>
|
|
|
30
30
|
showCloseButton: props["Show Close Button#19787:11"].value,
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
const
|
|
34
|
-
node,
|
|
35
|
-
key: props["Contents#25320:0"].componentKey,
|
|
36
|
-
});
|
|
33
|
+
const slotNode = findSlotNode(node, "Contents Slot#6752:0");
|
|
37
34
|
|
|
38
|
-
const bottomSheetBody =
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
);
|
|
35
|
+
const bottomSheetBody = slotNode
|
|
36
|
+
? createLocalSnippetElement("BottomSheetBody", {}, traverse(slotNode))
|
|
37
|
+
: createLocalSnippetElement(
|
|
38
|
+
"BottomSheetBody",
|
|
39
|
+
{},
|
|
40
|
+
createElement("div", undefined, "No content available"),
|
|
41
|
+
);
|
|
46
42
|
|
|
47
43
|
const footerNodes = findAllInstances({
|
|
48
44
|
node,
|
|
@@ -9,7 +9,7 @@ import type {
|
|
|
9
9
|
import { defineComponentHandler } from "@/codegen/core";
|
|
10
10
|
import * as metadata from "@/entities/data/__generated__/component-sets";
|
|
11
11
|
import * as components from "@/entities/data/__generated__/components";
|
|
12
|
-
import {
|
|
12
|
+
import { findAllInstances, findOne } from "@/utils/figma-node";
|
|
13
13
|
import { createSeedReactElement } from "../../element-factories";
|
|
14
14
|
import type { ComponentHandlerDeps } from "../deps.interface";
|
|
15
15
|
import { createBadgeHandler } from "@/codegen/targets/react/component/handlers/badge";
|
|
@@ -10,9 +10,9 @@ import type {
|
|
|
10
10
|
import { defineComponentHandler } from "@/codegen/core";
|
|
11
11
|
import * as metadata from "@/entities/data/__generated__/component-sets";
|
|
12
12
|
import * as components from "@/entities/data/__generated__/components";
|
|
13
|
-
import { findAllInstances } from "@/utils/figma-node";
|
|
13
|
+
import { findAllInstances, findSlotNode } from "@/utils/figma-node";
|
|
14
14
|
import { match } from "ts-pattern";
|
|
15
|
-
import { createLocalSnippetHelper
|
|
15
|
+
import { createLocalSnippetHelper } from "../../element-factories";
|
|
16
16
|
import type { ComponentHandlerDeps } from "../deps.interface";
|
|
17
17
|
import {
|
|
18
18
|
createFieldFooterHandler,
|
|
@@ -34,7 +34,7 @@ const { createLocalSnippetElement } = createLocalSnippetHelper("select-box");
|
|
|
34
34
|
const createSelectBoxHorizontalHandler = (ctx: ComponentHandlerDeps) =>
|
|
35
35
|
defineComponentHandler<SelectBoxHorizontalProperties>(
|
|
36
36
|
metadata.componentSelectBoxItemHorizontal.key,
|
|
37
|
-
(node) => {
|
|
37
|
+
(node, traverse) => {
|
|
38
38
|
const { componentProperties: props } = node;
|
|
39
39
|
|
|
40
40
|
const { tag, suffix } = match(props.Control.value)
|
|
@@ -77,6 +77,11 @@ const createSelectBoxHorizontalHandler = (ctx: ComponentHandlerDeps) =>
|
|
|
77
77
|
return undefined;
|
|
78
78
|
})();
|
|
79
79
|
|
|
80
|
+
const contentSlotNode = props["Show Custom Content#56903:0"].value
|
|
81
|
+
? findSlotNode(node, "Content Slot#6752:6")
|
|
82
|
+
: undefined;
|
|
83
|
+
const footer = contentSlotNode ? traverse(contentSlotNode) : undefined;
|
|
84
|
+
|
|
80
85
|
const commonProps = {
|
|
81
86
|
// layout: "horizontal",
|
|
82
87
|
|
|
@@ -90,9 +95,7 @@ const createSelectBoxHorizontalHandler = (ctx: ComponentHandlerDeps) =>
|
|
|
90
95
|
|
|
91
96
|
...(suffix && { suffix }),
|
|
92
97
|
|
|
93
|
-
...(
|
|
94
|
-
footer: createSeedReactElement("Box", undefined, "Footer Placeholder"),
|
|
95
|
-
}),
|
|
98
|
+
...(footer && { footer }),
|
|
96
99
|
|
|
97
100
|
...(tag === "RadioSelectBoxItem" && {
|
|
98
101
|
value: props["Title#28452:21"].value,
|
|
@@ -115,7 +118,7 @@ const createSelectBoxHorizontalHandler = (ctx: ComponentHandlerDeps) =>
|
|
|
115
118
|
const createSelectBoxVerticalHandler = (ctx: ComponentHandlerDeps) =>
|
|
116
119
|
defineComponentHandler<SelectBoxVerticalProperties>(
|
|
117
120
|
metadata.componentSelectBoxItemVertical.key,
|
|
118
|
-
(node) => {
|
|
121
|
+
(node, traverse) => {
|
|
119
122
|
const { componentProperties: props } = node;
|
|
120
123
|
|
|
121
124
|
const { tag, suffix } = match(props.Control.value)
|
|
@@ -158,6 +161,11 @@ const createSelectBoxVerticalHandler = (ctx: ComponentHandlerDeps) =>
|
|
|
158
161
|
return undefined;
|
|
159
162
|
})();
|
|
160
163
|
|
|
164
|
+
const contentSlotNode = props["Show Custom Content#58766:119"].value
|
|
165
|
+
? findSlotNode(node, "Content Slot#6765:0")
|
|
166
|
+
: undefined;
|
|
167
|
+
const footer = contentSlotNode ? traverse(contentSlotNode) : undefined;
|
|
168
|
+
|
|
161
169
|
const commonProps = {
|
|
162
170
|
// layout: "vertical",
|
|
163
171
|
|
|
@@ -171,9 +179,7 @@ const createSelectBoxVerticalHandler = (ctx: ComponentHandlerDeps) =>
|
|
|
171
179
|
|
|
172
180
|
...(suffix && { suffix }),
|
|
173
181
|
|
|
174
|
-
...(
|
|
175
|
-
footer: createSeedReactElement("Box", undefined, "Footer Placeholder"),
|
|
176
|
-
}),
|
|
182
|
+
...(footer && { footer }),
|
|
177
183
|
|
|
178
184
|
...(tag === "RadioSelectBoxItem" && {
|
|
179
185
|
value: props["Title#58766:114"].value,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { createCodeGenerator, createValueResolver } from "@/codegen/core";
|
|
1
|
+
import { createCodeGenerator, createValueResolver, defineElementTransformer } from "@/codegen/core";
|
|
2
|
+
import type { NormalizedSlotNode } from "@/normalizer";
|
|
2
3
|
import { iconService, styleService, variableService } from "@/codegen/default-services";
|
|
3
4
|
import { SKIP_COMPONENT_KEYS } from "@/codegen/skip-components";
|
|
4
5
|
import {
|
|
@@ -118,8 +119,13 @@ export function createPipeline(options: CreatePipelineConfig = {}) {
|
|
|
118
119
|
const vectorTransformer = createVectorTransformer();
|
|
119
120
|
const booleanOperationTransformer = createBooleanOperationTransformer();
|
|
120
121
|
|
|
122
|
+
const slotTransformer = defineElementTransformer<NormalizedSlotNode>((node, traverse) =>
|
|
123
|
+
frameTransformer({ ...node, type: "FRAME" }, traverse),
|
|
124
|
+
);
|
|
125
|
+
|
|
121
126
|
const codeGenerator = createCodeGenerator({
|
|
122
127
|
frameTransformer,
|
|
128
|
+
slotTransformer,
|
|
123
129
|
textTransformer,
|
|
124
130
|
rectangleTransformer,
|
|
125
131
|
instanceTransformer,
|
|
@@ -1976,6 +1976,7 @@ export declare const componentAvatar: {
|
|
|
1976
1976
|
"36",
|
|
1977
1977
|
"42",
|
|
1978
1978
|
"48",
|
|
1979
|
+
"56",
|
|
1979
1980
|
"64",
|
|
1980
1981
|
"80",
|
|
1981
1982
|
"96",
|
|
@@ -2031,6 +2032,7 @@ export declare const componentAvatarStack: {
|
|
|
2031
2032
|
"36",
|
|
2032
2033
|
"42",
|
|
2033
2034
|
"48",
|
|
2035
|
+
"56",
|
|
2034
2036
|
"64",
|
|
2035
2037
|
"80",
|
|
2036
2038
|
"96",
|
|
@@ -2126,6 +2128,9 @@ export declare const componentBottomSheet: {
|
|
|
2126
2128
|
"name": "componentBottomSheet",
|
|
2127
2129
|
"key": "ffe99a21452831c28bd9375aac0aaf37d7ee6a0d",
|
|
2128
2130
|
"componentPropertyDefinitions": {
|
|
2131
|
+
"Contents Slot#6752:0": {
|
|
2132
|
+
"type": "SLOT"
|
|
2133
|
+
},
|
|
2129
2134
|
"Title#19787:3": {
|
|
2130
2135
|
"type": "TEXT"
|
|
2131
2136
|
},
|
|
@@ -2141,9 +2146,6 @@ export declare const componentBottomSheet: {
|
|
|
2141
2146
|
"Show Description#25192:0": {
|
|
2142
2147
|
"type": "BOOLEAN"
|
|
2143
2148
|
},
|
|
2144
|
-
"Contents#25320:0": {
|
|
2145
|
-
"type": "INSTANCE_SWAP"
|
|
2146
|
-
},
|
|
2147
2149
|
"Show Safe Area#25488:8": {
|
|
2148
2150
|
"type": "BOOLEAN"
|
|
2149
2151
|
},
|
|
@@ -2479,6 +2481,9 @@ export declare const componentChlid: {
|
|
|
2479
2481
|
"name": "componentChlid",
|
|
2480
2482
|
"key": "ef79a21a39ceb4ce24b2fb93c9b430c1980a3e71",
|
|
2481
2483
|
"componentPropertyDefinitions": {
|
|
2484
|
+
"Slot#6081:0": {
|
|
2485
|
+
"type": "SLOT"
|
|
2486
|
+
},
|
|
2482
2487
|
"Type": {
|
|
2483
2488
|
"type": "VARIANT",
|
|
2484
2489
|
"variantOptions": [
|
|
@@ -4232,6 +4237,9 @@ export declare const componentSelectBoxItemHorizontal: {
|
|
|
4232
4237
|
"name": "componentSelectBoxItemHorizontal",
|
|
4233
4238
|
"key": "8174af8ef3654dad996723883f5b84f44f791513",
|
|
4234
4239
|
"componentPropertyDefinitions": {
|
|
4240
|
+
"Content Slot#6752:6": {
|
|
4241
|
+
"type": "SLOT"
|
|
4242
|
+
},
|
|
4235
4243
|
"Title#28452:21": {
|
|
4236
4244
|
"type": "TEXT"
|
|
4237
4245
|
},
|
|
@@ -4280,6 +4288,9 @@ export declare const componentSelectBoxItemVertical: {
|
|
|
4280
4288
|
"name": "componentSelectBoxItemVertical",
|
|
4281
4289
|
"key": "ccc88f0aae500c64e7d43be63c4f1a70baf76bfe",
|
|
4282
4290
|
"componentPropertyDefinitions": {
|
|
4291
|
+
"Content Slot#6765:0": {
|
|
4292
|
+
"type": "SLOT"
|
|
4293
|
+
},
|
|
4283
4294
|
"Title#58766:114": {
|
|
4284
4295
|
"type": "TEXT"
|
|
4285
4296
|
},
|
|
@@ -1976,6 +1976,7 @@ export const componentAvatar = {
|
|
|
1976
1976
|
"36",
|
|
1977
1977
|
"42",
|
|
1978
1978
|
"48",
|
|
1979
|
+
"56",
|
|
1979
1980
|
"64",
|
|
1980
1981
|
"80",
|
|
1981
1982
|
"96",
|
|
@@ -2031,6 +2032,7 @@ export const componentAvatarStack = {
|
|
|
2031
2032
|
"36",
|
|
2032
2033
|
"42",
|
|
2033
2034
|
"48",
|
|
2035
|
+
"56",
|
|
2034
2036
|
"64",
|
|
2035
2037
|
"80",
|
|
2036
2038
|
"96",
|
|
@@ -2126,6 +2128,9 @@ export const componentBottomSheet = {
|
|
|
2126
2128
|
"name": "componentBottomSheet",
|
|
2127
2129
|
"key": "ffe99a21452831c28bd9375aac0aaf37d7ee6a0d",
|
|
2128
2130
|
"componentPropertyDefinitions": {
|
|
2131
|
+
"Contents Slot#6752:0": {
|
|
2132
|
+
"type": "SLOT"
|
|
2133
|
+
},
|
|
2129
2134
|
"Title#19787:3": {
|
|
2130
2135
|
"type": "TEXT"
|
|
2131
2136
|
},
|
|
@@ -2141,9 +2146,6 @@ export const componentBottomSheet = {
|
|
|
2141
2146
|
"Show Description#25192:0": {
|
|
2142
2147
|
"type": "BOOLEAN"
|
|
2143
2148
|
},
|
|
2144
|
-
"Contents#25320:0": {
|
|
2145
|
-
"type": "INSTANCE_SWAP"
|
|
2146
|
-
},
|
|
2147
2149
|
"Show Safe Area#25488:8": {
|
|
2148
2150
|
"type": "BOOLEAN"
|
|
2149
2151
|
},
|
|
@@ -2479,6 +2481,9 @@ export const componentChlid = {
|
|
|
2479
2481
|
"name": "componentChlid",
|
|
2480
2482
|
"key": "ef79a21a39ceb4ce24b2fb93c9b430c1980a3e71",
|
|
2481
2483
|
"componentPropertyDefinitions": {
|
|
2484
|
+
"Slot#6081:0": {
|
|
2485
|
+
"type": "SLOT"
|
|
2486
|
+
},
|
|
2482
2487
|
"Type": {
|
|
2483
2488
|
"type": "VARIANT",
|
|
2484
2489
|
"variantOptions": [
|
|
@@ -4232,6 +4237,9 @@ export const componentSelectBoxItemHorizontal = {
|
|
|
4232
4237
|
"name": "componentSelectBoxItemHorizontal",
|
|
4233
4238
|
"key": "8174af8ef3654dad996723883f5b84f44f791513",
|
|
4234
4239
|
"componentPropertyDefinitions": {
|
|
4240
|
+
"Content Slot#6752:6": {
|
|
4241
|
+
"type": "SLOT"
|
|
4242
|
+
},
|
|
4235
4243
|
"Title#28452:21": {
|
|
4236
4244
|
"type": "TEXT"
|
|
4237
4245
|
},
|
|
@@ -4280,6 +4288,9 @@ export const componentSelectBoxItemVertical = {
|
|
|
4280
4288
|
"name": "componentSelectBoxItemVertical",
|
|
4281
4289
|
"key": "ccc88f0aae500c64e7d43be63c4f1a70baf76bfe",
|
|
4282
4290
|
"componentPropertyDefinitions": {
|
|
4291
|
+
"Content Slot#6765:0": {
|
|
4292
|
+
"type": "SLOT"
|
|
4293
|
+
},
|
|
4283
4294
|
"Title#58766:114": {
|
|
4284
4295
|
"type": "TEXT"
|
|
4285
4296
|
},
|
|
@@ -18,11 +18,6 @@ export declare const privateTemplateTimePickerField: {
|
|
|
18
18
|
"key": "e38df17cf1e0f96e09774b015739dfde30d46115"
|
|
19
19
|
};
|
|
20
20
|
|
|
21
|
-
export declare const privateComponentBottomSheetContentsPlaceholder: {
|
|
22
|
-
"name": "privateComponentBottomSheetContentsPlaceholder",
|
|
23
|
-
"key": "e68b006d572300d3c987776192c8ab387fa45e05"
|
|
24
|
-
};
|
|
25
|
-
|
|
26
21
|
export declare const privateComponentField: {
|
|
27
22
|
"name": "privateComponentField",
|
|
28
23
|
"key": "96f0d114c3ec7826b22531502f05e82404835df4",
|
|
@@ -39,11 +34,6 @@ export declare const privateComponentField: {
|
|
|
39
34
|
}
|
|
40
35
|
};
|
|
41
36
|
|
|
42
|
-
export declare const privateComponentSelectBoxItemCustomContent: {
|
|
43
|
-
"name": "privateComponentSelectBoxItemCustomContent",
|
|
44
|
-
"key": "b327f8f0f74f9af3fded3f22fa4a64a08ed8d7cb"
|
|
45
|
-
};
|
|
46
|
-
|
|
47
37
|
export declare const privateComponentSliderItemHandleSliderItemValueIndicator: {
|
|
48
38
|
"name": "privateComponentSliderItemHandleSliderItemValueIndicator",
|
|
49
39
|
"key": "cfe6acde9d78c5020d2c84a0fdbd54f75277d231"
|
|
@@ -84,11 +74,6 @@ export declare const templateInformationList: {
|
|
|
84
74
|
"key": "ea1ff4070a5ef4ada5974dc7030e8f9a1b759cdb"
|
|
85
75
|
};
|
|
86
76
|
|
|
87
|
-
export declare const componentFigmaOnly: {
|
|
88
|
-
"name": "componentFigmaOnly",
|
|
89
|
-
"key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
|
|
90
|
-
};
|
|
91
|
-
|
|
92
77
|
export declare const componentBottomSheetContentsAgreement: {
|
|
93
78
|
"name": "componentBottomSheetContentsAgreement",
|
|
94
79
|
"key": "9d530235407646750ce8298b2815093dffcbbd83"
|
|
@@ -376,3 +361,8 @@ export declare const componentSelectBoxItemSuffixRadiomark: {
|
|
|
376
361
|
"name": "componentSelectBoxItemSuffixRadiomark",
|
|
377
362
|
"key": "cfb712b12fe2805b5594f8c143147c8aa3de490e"
|
|
378
363
|
};
|
|
364
|
+
|
|
365
|
+
export declare const componentFigmaOnly: {
|
|
366
|
+
"name": "componentFigmaOnly",
|
|
367
|
+
"key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
|
|
368
|
+
};
|
|
@@ -18,11 +18,6 @@ export const privateTemplateTimePickerField = {
|
|
|
18
18
|
"key": "e38df17cf1e0f96e09774b015739dfde30d46115"
|
|
19
19
|
};
|
|
20
20
|
|
|
21
|
-
export const privateComponentBottomSheetContentsPlaceholder = {
|
|
22
|
-
"name": "privateComponentBottomSheetContentsPlaceholder",
|
|
23
|
-
"key": "e68b006d572300d3c987776192c8ab387fa45e05"
|
|
24
|
-
};
|
|
25
|
-
|
|
26
21
|
export const privateComponentField = {
|
|
27
22
|
"name": "privateComponentField",
|
|
28
23
|
"key": "96f0d114c3ec7826b22531502f05e82404835df4",
|
|
@@ -39,11 +34,6 @@ export const privateComponentField = {
|
|
|
39
34
|
}
|
|
40
35
|
};
|
|
41
36
|
|
|
42
|
-
export const privateComponentSelectBoxItemCustomContent = {
|
|
43
|
-
"name": "privateComponentSelectBoxItemCustomContent",
|
|
44
|
-
"key": "b327f8f0f74f9af3fded3f22fa4a64a08ed8d7cb"
|
|
45
|
-
};
|
|
46
|
-
|
|
47
37
|
export const privateComponentSliderItemHandleSliderItemValueIndicator = {
|
|
48
38
|
"name": "privateComponentSliderItemHandleSliderItemValueIndicator",
|
|
49
39
|
"key": "cfe6acde9d78c5020d2c84a0fdbd54f75277d231"
|
|
@@ -84,11 +74,6 @@ export const templateInformationList = {
|
|
|
84
74
|
"key": "ea1ff4070a5ef4ada5974dc7030e8f9a1b759cdb"
|
|
85
75
|
};
|
|
86
76
|
|
|
87
|
-
export const componentFigmaOnly = {
|
|
88
|
-
"name": "componentFigmaOnly",
|
|
89
|
-
"key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
|
|
90
|
-
};
|
|
91
|
-
|
|
92
77
|
export const componentBottomSheetContentsAgreement = {
|
|
93
78
|
"name": "componentBottomSheetContentsAgreement",
|
|
94
79
|
"key": "9d530235407646750ce8298b2815093dffcbbd83"
|
|
@@ -376,3 +361,8 @@ export const componentSelectBoxItemSuffixRadiomark = {
|
|
|
376
361
|
"name": "componentSelectBoxItemSuffixRadiomark",
|
|
377
362
|
"key": "cfb712b12fe2805b5594f8c143147c8aa3de490e"
|
|
378
363
|
};
|
|
364
|
+
|
|
365
|
+
export const componentFigmaOnly = {
|
|
366
|
+
"name": "componentFigmaOnly",
|
|
367
|
+
"key": "a790da2ff1fb6f761abf202034920c1504b8f8f1"
|
|
368
|
+
};
|