Skip to content

Commit 162c2c4

Browse files
softmarshmallowsoftmarshmallow
committed
moved editor as scaffold from page
1 parent d7ee62b commit 162c2c4

5 files changed

Lines changed: 249 additions & 243 deletions

File tree

‎editor/babel.config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ module.exports = {
1010
components: "./components",
1111
icons: "./icons",
1212
layouts: "./layouts",
13+
scaffolds: "./scaffolds",
1314
utils: "./utils",
1415
public: "./public",
1516
hooks: "./hooks",

‎editor/pages/to-code/index.tsx‎

Lines changed: 2 additions & 243 deletions
Original file line numberDiff line numberDiff line change
@@ -1,252 +1,11 @@
11
import React, { useEffect, useState } from "react";
2-
import { designToCode, Result } from "@designto/code";
3-
import { useDesign, useFigmaAccessToken } from "hooks";
4-
import styled from "@emotion/styled";
5-
import { DefaultEditorWorkspaceLayout } from "layouts/default-editor-workspace-layout";
6-
import { PreviewAndRunPanel } from "components/preview-and-run";
7-
import {
8-
WorkspaceContentPanel,
9-
WorkspaceContentPanelGridLayout,
10-
} from "layouts/panel";
11-
import { WorkspaceBottomPanelDockLayout } from "layouts/panel/workspace-bottom-panel-dock-layout";
12-
import { CodeEditor } from "components/code-editor";
13-
import { useRouter } from "next/router";
14-
import { config } from "@designto/config";
15-
import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
16-
import {
17-
ImageRepository,
18-
MainImageRepository,
19-
} from "@design-sdk/core/assets-repository";
20-
import LoadingLayout from "layouts/loading-overlay";
21-
import { DesignInput } from "@designto/config/input";
22-
import { ClearRemoteDesignSessionCache } from "components/clear-remote-design-session-cache";
23-
import { WidgetTree } from "components/visualization/json-visualization/json-tree";
24-
import { personal } from "@design-sdk/figma-auth-store";
25-
import { CodeOptionsControl } from "components/codeui-code-options-control";
262
import { SigninToContinueBannerPrmoptProvider } from "components/prompt-banner-signin-to-continue";
27-
import {
28-
get_enable_components_config_from_query,
29-
get_framework_config,
30-
get_framework_config_from_query,
31-
get_preview_runner_framework,
32-
} from "core/to-code-options-from-query";
33-
import {
34-
EditorAppbar,
35-
EditorAppbarFragments,
36-
EditorSidebar,
37-
} from "components/editor";
38-
39-
function DesignToCodeUniversalPage() {
40-
const router = useRouter();
41-
const design = useDesign({ type: "use-router", router: router });
42-
const isDebug = router.query.debug;
43-
const [result, setResult] = useState<Result>();
44-
const [preview, setPreview] = useState<Result>();
45-
46-
const [framework_config, set_framework_config] = useState(
47-
get_framework_config_from_query(router.query)
48-
);
49-
const preview_runner_framework = get_preview_runner_framework(router.query);
50-
const enable_components = get_enable_components_config_from_query(
51-
router.query
52-
);
53-
54-
const fat = useFigmaAccessToken();
55-
56-
useEffect(() => {
57-
if (design) {
58-
const { reflect, raw } = design;
59-
const { id, name } = reflect;
60-
// ------------------------------------------------------------
61-
// other platforms are not supported yet
62-
// set image repo for figma platform
63-
MainImageRepository.instance = new RemoteImageRepositories(design.file, {
64-
authentication: {
65-
accessToken: fat,
66-
personalAccessToken: personal.get_safe(),
67-
},
68-
});
69-
MainImageRepository.instance.register(
70-
new ImageRepository(
71-
"fill-later-assets",
72-
"grida://assets-reservation/images/"
73-
)
74-
);
75-
// ------------------------------------------------------------
76-
designToCode({
77-
input: DesignInput.fromApiResponse({ entry: reflect, raw }),
78-
framework: framework_config,
79-
asset_config: { asset_repository: MainImageRepository.instance },
80-
build_config: {
81-
...config.default_build_configuration,
82-
disable_components: !enable_components,
83-
},
84-
}).then((result) => {
85-
setResult(result);
86-
if (framework_config.framework == preview_runner_framework.framework) {
87-
setPreview(result);
88-
}
89-
});
90-
}
91-
}, [design, framework_config.framework]);
92-
93-
useEffect(() => {
94-
if (design) {
95-
const { reflect, raw } = design;
96-
const { id, name } = reflect;
97-
// ----- for preview -----
98-
if (framework_config.framework !== preview_runner_framework.framework) {
99-
designToCode({
100-
input: {
101-
id: id,
102-
name: name,
103-
entry: reflect,
104-
},
105-
build_config: {
106-
...config.default_build_configuration,
107-
disable_components: true,
108-
},
109-
framework: preview_runner_framework,
110-
asset_config: { asset_repository: MainImageRepository.instance },
111-
}).then((result) => {
112-
setPreview(result);
113-
});
114-
}
115-
}
116-
}, [design]);
117-
118-
const { code, scaffold, name: componentName } = result ?? {};
119-
const _key_for_preview = design?.url ?? design?.reflect?.id;
120-
121-
return (
122-
<DefaultEditorWorkspaceLayout
123-
backgroundColor={"rgba(37, 37, 38, 1)"}
124-
leftbar={<EditorSidebar />}
125-
>
126-
<WorkspaceContentPanelGridLayout>
127-
<WorkspaceContentPanel>
128-
<>
129-
<EditorAppbarFragments.Canvas />
130-
{_key_for_preview && preview ? (
131-
<PreviewAndRunPanel
132-
key={_key_for_preview}
133-
config={{
134-
src: preview.scaffold.raw,
135-
platform: preview_runner_framework.framework,
136-
componentName: componentName,
137-
sceneSize: {
138-
w: design.reflect?.width,
139-
h: design.reflect?.height,
140-
},
141-
initialMode: "run",
142-
fileid: design.file,
143-
sceneid: design.node,
144-
hideModeChangeControls: true,
145-
}}
146-
/>
147-
) : (
148-
<EditorCanvasSkeleton />
149-
)}
150-
</>
151-
</WorkspaceContentPanel>
152-
<WorkspaceContentPanel backgroundColor={"rgba(30, 30, 30, 1)"}>
153-
<CodeEditorContainer>
154-
<EditorAppbarFragments.CodeEditor />
155-
{/* <CodeOptionsControl
156-
initialPreset={router.query.framework as string}
157-
fallbackPreset="react_default"
158-
onUseroptionChange={(o) => {
159-
set_framework_config(get_framework_config(o.framework));
160-
}}
161-
/> */}
162-
<CodeEditor
163-
key={code?.raw}
164-
height="100vh"
165-
options={{
166-
automaticLayout: true,
167-
}}
168-
files={
169-
code
170-
? {
171-
"index.tsx": {
172-
raw: code.raw,
173-
language: framework_config.language,
174-
name: "index.tsx",
175-
},
176-
}
177-
: {
178-
"loading.txt": {
179-
raw: "// No input design provided to be converted..",
180-
language: "text",
181-
name: "loading",
182-
},
183-
}
184-
}
185-
/>
186-
</CodeEditorContainer>
187-
</WorkspaceContentPanel>
188-
{isDebug && (
189-
<WorkspaceBottomPanelDockLayout resizable>
190-
<WorkspaceContentPanel>
191-
<div
192-
style={{
193-
display: "flex",
194-
flexDirection: "row",
195-
alignItems: "stretch",
196-
}}
197-
>
198-
<div style={{ flex: 1 }}>
199-
<ClearRemoteDesignSessionCache
200-
key={design.url}
201-
url={design.url}
202-
/>
203-
<br />
204-
{(design.reflect.origin === "INSTANCE" ||
205-
design.reflect.origin === "COMPONENT") && (
206-
<button
207-
onClick={() => {
208-
router.push({
209-
pathname: "/figma/inspect-component",
210-
query: router.query,
211-
});
212-
}}
213-
>
214-
inspect component
215-
</button>
216-
)}
217-
</div>
218-
219-
<div style={{ flex: 2 }}>
220-
<WidgetTree data={design.reflect} />
221-
</div>
222-
<div style={{ flex: 2 }}>
223-
<WidgetTree data={result.widget} />
224-
</div>
225-
</div>
226-
</WorkspaceContentPanel>
227-
</WorkspaceBottomPanelDockLayout>
228-
)}
229-
</WorkspaceContentPanelGridLayout>
230-
</DefaultEditorWorkspaceLayout>
231-
);
232-
}
233-
234-
const EditorCanvasSkeleton = styled.div`
235-
width: 100%;
236-
height: 100%;
237-
color: red;
238-
`;
239-
240-
const CodeEditorContainer = styled.div`
241-
display: flex;
242-
flex-direction: column;
243-
align-items: stretch;
244-
`;
3+
import { Editor } from "scaffolds/editor";
2454

2465
export default function Page() {
2476
return (
2487
<SigninToContinueBannerPrmoptProvider>
249-
<DesignToCodeUniversalPage />
8+
<Editor />
2509
</SigninToContinueBannerPrmoptProvider>
25110
);
25211
}

‎editor/scaffolds/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Stetefull + logic + ui scaffolds.

0 commit comments

Comments
 (0)