Skip to content

Commit c86993b

Browse files
softmarshmallowsoftmarshmallow
authored
Merge pull request #12 from bridgedxyz/react/styled-components
update to-token screen
2 parents e0660eb + ba0f731 commit c86993b

5 files changed

Lines changed: 152 additions & 35 deletions

File tree

‎editor/components/figma/screen-importer.tsx‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState } from "react";
2-
import { remote, utils, nodes } from "@design-sdk/figma";
2+
import { remote, utils, nodes, Figma } from "@design-sdk/figma";
33
import { convert } from "@design-sdk/figma";
44
import { utils_figma } from "../../utils";
55
import { UserInputCache } from "../../utils/user-input-value-cache";
@@ -8,17 +8,27 @@ import { FigmaTargetNodeConfig } from "@design-sdk/core/utils/figma-api-utils";
88
export type OnImportedCallback = (reflect: nodes.ReflectSceneNode) => void;
99
type _OnRemoteLoadedCallback = (reflect: remote.types.Node) => void;
1010

11+
export interface FigmaReflectImportPack {
12+
remote: remote.api.Node;
13+
figma: Figma.SceneNode;
14+
reflect: nodes.ReflectSceneNode;
15+
}
16+
1117
export async function fetchTargetAsReflect(
1218
file: string,
1319
node: string
14-
): Promise<nodes.ReflectSceneNode> {
20+
): Promise<FigmaReflectImportPack> {
1521
const d = await fetchTarget(file, node);
1622
console.log("api raw", d);
1723
const _mapped = remote.mapper.mapFigmaRemoteToFigma(d as any);
1824
console.log("mapped", _mapped);
1925
const _converted = convert.intoReflectNode(_mapped);
2026
console.log("converted", _converted);
21-
return _converted;
27+
return {
28+
remote: d,
29+
figma: _mapped,
30+
reflect: _converted,
31+
};
2232
}
2333

2434
async function fetchTarget(file: string, node: string) {
@@ -91,8 +101,9 @@ export function FigmaScreenImporter(props: {
91101
<_UrlImporterSegment
92102
onLoaded={handleLocalDataLoad}
93103
onUrlEnter={(url: string) => {
94-
const nodeconfig =
95-
utils.figmaApi.parseFileAndNodeIdFromUrl_Figma(url);
104+
const nodeconfig = utils.figmaApi.parseFileAndNodeIdFromUrl_Figma(
105+
url
106+
);
96107
props.onTargetEnter(nodeconfig);
97108
}}
98109
/>
@@ -127,15 +138,17 @@ function _UrlImporterSegment(props: {
127138
onLoaded: _OnRemoteLoadedCallback;
128139
onUrlEnter?: (url: string) => void;
129140
}) {
130-
const [loadState, setLoadState] =
131-
useState<"none" | "loading" | "failed" | "complete">("none");
141+
const [loadState, setLoadState] = useState<
142+
"none" | "loading" | "failed" | "complete"
143+
>("none");
132144

133145
let urlInput: string = UserInputCache.load(
134146
_FIGMA_FILE_URL_IMPORT_INPUT_CACHE_KEY
135147
);
136148

137-
const figmaTargetConfig =
138-
utils.figmaApi.parseFileAndNodeIdFromUrl_Figma(urlInput);
149+
const figmaTargetConfig = utils.figmaApi.parseFileAndNodeIdFromUrl_Figma(
150+
urlInput
151+
);
139152

140153
const handleEnter = () => {
141154
props.onUrlEnter?.(urlInput);

‎editor/components/visualization/json-visualization/json-tree.tsx‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import { Widget as WebWidget } from "@coli.codes/web-builder-core";
2+
import { ReflectSceneNode } from "@design-sdk/core/nodes";
3+
import { Figma } from "@design-sdk/figma";
24
import { Widget as ReflectWidget } from "@reflect-ui/core";
35
import React from "react";
46
import JSONTree from "react-json-tree";
@@ -42,7 +44,11 @@ export function JsonTree(props: { data: any; hideRoot?: boolean }) {
4244
);
4345
}
4446

45-
type WidgetDataLike = WebWidget | ReflectWidget;
47+
type WidgetDataLike =
48+
| WebWidget
49+
| ReflectWidget
50+
| Figma.SceneNode
51+
| ReflectSceneNode;
4652
export function WidgetTree(props: {
4753
data: WidgetDataLike;
4854
hideRoot?: boolean;
@@ -58,7 +64,12 @@ export function WidgetTree(props: {
5864
};
5965

6066
const gettype = (data: WidgetDataLike): string => {
61-
return data._type;
67+
if ("_type" in data) {
68+
return data._type;
69+
}
70+
if ("type" in data) {
71+
return data.type;
72+
}
6273
};
6374

6475
return (

‎editor/pages/figma/to-react.tsx‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,15 +26,17 @@ import { mapGrandchildren } from "@design-sdk/core/utils";
2626
import { ReactWidget } from "@coli.codes/react-builder";
2727
import * as core from "@reflect-ui/core";
2828
import { ReactComponentExportResult } from "@coli.codes/react-builder/export/export-result";
29+
import { Figma } from "@design-sdk/figma";
30+
import {
31+
extractFromFigmaQueryParams,
32+
setFigmaTargetUrl,
33+
} from "../../query/from-figma";
2934

3035
// set image repo for figma platform
3136
MainImageRepository.instance = new ImageRepositories();
3237

33-
interface FigmaToReactRouterQueryParams {
34-
figma_target_url: string;
35-
}
36-
3738
export default function FigmaToReactDemoPage() {
39+
const [figmaNode, setFigmaNode] = useState<Figma.SceneNode>();
3840
const [reflect, setReflect] = useState<ReflectSceneNode>();
3941
const [targetSelectionNodeId, setTargetSelectionNodeId] = useState<string>();
4042
const [
@@ -45,16 +47,16 @@ export default function FigmaToReactDemoPage() {
4547
const router = useRouter();
4648

4749
useEffect(() => {
48-
const targetUrl = ((router.query as any) as FigmaToReactRouterQueryParams)
49-
?.figma_target_url;
50-
if (targetUrl) {
51-
console.log("target url loaded from query parm", targetUrl);
52-
const targetnodeconfig = parseFileAndNodeIdFromUrl_Figma(targetUrl);
50+
const params = extractFromFigmaQueryParams(router);
51+
if (params.figma_target_url) {
52+
const targetnodeconfig = parseFileAndNodeIdFromUrl_Figma(
53+
params.figma_target_url
54+
);
5355
setTargetnodeConfig(targetnodeconfig);
5456
fetchTargetAsReflect(targetnodeconfig.file, targetnodeconfig.node).then(
55-
(reflect) => {
56-
console.log("setting reflect", reflect);
57-
setReflect(reflect);
57+
(res) => {
58+
setReflect(res.reflect);
59+
setFigmaNode(res.figma);
5860
}
5961
);
6062
}
@@ -66,9 +68,7 @@ export default function FigmaToReactDemoPage() {
6668

6769
const handleTargetAquired = (target: FigmaTargetNodeConfig) => {
6870
// update url query param
69-
((router.query as any) as FigmaToReactRouterQueryParams).figma_target_url =
70-
target.url;
71-
router.push(router);
71+
setFigmaTargetUrl(router, target.url);
7272
//
7373

7474
// update config
@@ -175,6 +175,9 @@ export default function FigmaToReactDemoPage() {
175175
alignItems: "stretch",
176176
}}
177177
>
178+
<div style={{ flex: 1 }}>
179+
<WidgetTree data={figmaNode} />
180+
</div>
178181
<div style={{ flex: 1 }}>
179182
<WidgetTree data={reflectWidget} />
180183
</div>

‎editor/pages/figma/to-token.tsx‎

Lines changed: 80 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,52 @@
1-
import React, { useState } from "react";
1+
import React, { useEffect, useState } from "react";
22
import { figmacomp, canvas } from "../../components";
33
import { ReflectSceneNode } from "@design-sdk/core/nodes";
44
import { tokenize } from "@designto/token";
5-
import { JsonTree } from "../../components/visualization/json-visualization/json-tree";
6-
import { FigmaTargetNodeConfig } from "@design-sdk/core/utils/figma-api-utils";
5+
import {
6+
JsonTree,
7+
WidgetTree,
8+
} from "../../components/visualization/json-visualization/json-tree";
9+
import {
10+
FigmaTargetNodeConfig,
11+
parseFileAndNodeIdFromUrl_Figma,
12+
} from "@design-sdk/core/utils/figma-api-utils";
13+
import { useRouter } from "next/router";
14+
import { extractFromFigmaQueryParams } from "../../query/from-figma";
15+
import { Figma } from "@design-sdk/figma";
16+
import { fetchTargetAsReflect } from "../../components/figma/screen-importer";
17+
import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
18+
import { LayerHierarchy } from "../../components/editor-hierarchy";
19+
import { WorkspaceContentPanelGridLayout } from "../../layout/panel/workspace-content-panel-grid-layout";
20+
import { WorkspaceContentPanel } from "../../layout/panel";
21+
import { WorkspaceBottomPanelDockLayout } from "../../layout/panel/workspace-bottom-panel-dock-layout";
722

823
export default function FigmaToReflectWidgetTokenPage() {
24+
const [figmaNode, setFigmaNode] = useState<Figma.SceneNode>();
925
const [reflect, setReflect] = useState<ReflectSceneNode>();
1026
const [figmaNodeUrl, setFigmaNodeUrl] = useState<string>();
27+
const [
28+
targetnodeConfig,
29+
setTargetnodeConfig,
30+
] = useState<FigmaTargetNodeConfig>();
31+
32+
const router = useRouter();
33+
34+
useEffect(() => {
35+
const params = extractFromFigmaQueryParams(router);
36+
if (params.figma_target_url) {
37+
setFigmaNodeUrl(params.figma_target_url);
38+
const targetnodeconfig = parseFileAndNodeIdFromUrl_Figma(
39+
params.figma_target_url
40+
);
41+
setTargetnodeConfig(targetnodeconfig);
42+
fetchTargetAsReflect(targetnodeconfig.file, targetnodeconfig.node).then(
43+
(res) => {
44+
setReflect(res.reflect);
45+
setFigmaNode(res.figma);
46+
}
47+
);
48+
}
49+
}, [router]);
1150

1251
const handleOnDesignImported = (reflect: ReflectSceneNode) => {
1352
setReflect(reflect);
@@ -24,13 +63,45 @@ export default function FigmaToReflectWidgetTokenPage() {
2463

2564
return (
2665
<>
27-
<canvas.FigmaEmbedCanvas src={{ url: figmaNodeUrl }} />
28-
<figmacomp.FigmaScreenImporter
29-
onImported={handleOnDesignImported}
30-
onTargetEnter={handleFigmaUrlEnter}
31-
/>
66+
{!figmaNodeUrl && (
67+
<figmacomp.FigmaScreenImporter
68+
onImported={handleOnDesignImported}
69+
onTargetEnter={handleFigmaUrlEnter}
70+
/>
71+
)}
72+
<DefaultEditorWorkspaceLayout leftbar={<LayerHierarchy data={reflect} />}>
73+
<WorkspaceContentPanelGridLayout>
74+
<WorkspaceContentPanel>
75+
<canvas.FigmaEmbedCanvas
76+
src={{ url: figmaNodeUrl }}
77+
width="100%"
78+
height="100%"
79+
/>
80+
</WorkspaceContentPanel>
3281

33-
<JsonTree hideRoot data={tokenTree} />
82+
<WorkspaceBottomPanelDockLayout>
83+
<WorkspaceContentPanel>
84+
<div
85+
style={{
86+
display: "flex",
87+
flexDirection: "row",
88+
alignItems: "stretch",
89+
}}
90+
>
91+
<div style={{ flex: 1 }}>
92+
<WidgetTree data={figmaNode} />
93+
</div>
94+
<div style={{ flex: 1 }}>
95+
<WidgetTree data={reflect} />
96+
</div>
97+
<div style={{ flex: 1 }}>
98+
<JsonTree hideRoot data={tokenTree} />
99+
</div>
100+
</div>
101+
</WorkspaceContentPanel>
102+
</WorkspaceBottomPanelDockLayout>
103+
</WorkspaceContentPanelGridLayout>
104+
</DefaultEditorWorkspaceLayout>
34105
</>
35106
);
36107
}

‎editor/query/from-figma/index.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { NextRouter } from "next/router";
2+
3+
const P_FIGMA_TARGET_URL = "figma_target_url";
4+
5+
export interface FigmaToReactRouterQueryParams {
6+
figma_target_url: string;
7+
}
8+
9+
export function extractFromFigmaQueryParams(router: NextRouter) {
10+
const targetUrl = (router.query as any)?.[P_FIGMA_TARGET_URL];
11+
return {
12+
figma_target_url: targetUrl,
13+
};
14+
}
15+
16+
export function setFigmaTargetUrl(router: NextRouter, url: string) {
17+
((router.query as any) as FigmaToReactRouterQueryParams).figma_target_url = url;
18+
router.push(router);
19+
}

0 commit comments

Comments
 (0)