Skip to content

Commit 36be044

Browse files
softmarshmallowsoftmarshmallow
authored
Merge pull request #9 from bridgedxyz/ui/workspace
UI/workspace
2 parents 37a9ad7 + 718fe10 commit 36be044

30 files changed

Lines changed: 7931 additions & 344 deletions

‎.gitmodules‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,6 @@
1313
[submodule "packages/coli-web-builder"]
1414
path = packages/coli-web-builder
1515
url = https://github.com/bridgedxyz/coli-web-builder
16+
[submodule "ui/editor-ui"]
17+
path = ui/editor-ui
18+
url = https://github.com/bridgedxyz/reflect-editor-ui

‎editor/components/app-runner/app-runner.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,17 +15,15 @@ export function AppRunner(props: {
1515
case "flutter":
1616
return (
1717
<FlutterAppRunner
18-
width={sceneSize.w}
19-
height={sceneSize.h}
18+
width="300px"
19+
height="100%"
2020
q={{
2121
language: "dart",
2222
src: src,
2323
}}
2424
/>
2525
);
2626
case "web":
27-
return (
28-
<CodeSandBoxView width={sceneSize.w} height={sceneSize.h} src={src} />
29-
);
27+
return <CodeSandBoxView width="300px" height="100%" src={src} />;
3028
}
3129
}

‎editor/components/app-runner/code-sandbox-runner.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -43,24 +43,5 @@ export function CodeSandBoxView(props: {
4343
);
4444
}, []);
4545

46-
return (
47-
<Wrapper width={props.width} height={props.height}>
48-
<iframe src={iframeUrl} />
49-
</Wrapper>
50-
);
46+
return <iframe width={props.width} height={props.height} src={iframeUrl} />;
5147
}
52-
53-
interface WrapperProps {
54-
width: string | number;
55-
height: string | number;
56-
}
57-
58-
const Wrapper = styled.div<WrapperProps>`
59-
iframe {
60-
position: absolute;
61-
right: 0;
62-
width: ${(props) => props.width};
63-
height: ${(props) => props.width};
64-
border: none;
65-
}
66-
`;

‎editor/components/app-runner/react-app-runner.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
import React from "react";
22
import { CodeSandBoxView } from "./code-sandbox-runner";
33

4-
export function ReactAppRunner(props: { source: string }) {
4+
export function ReactAppRunner(props: {
5+
source: string;
6+
width: string | number;
7+
height: string | number;
8+
}) {
59
return (
610
<>
7-
<CodeSandBoxView src={props.source} />
11+
<CodeSandBoxView
12+
src={props.source}
13+
width={props.width}
14+
height={props.height}
15+
/>
816
</>
917
);
1018
}

‎editor/components/canvas/figma-embed-canvas.tsx‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
import React from "react";
22

33
type EmbedInput = { url: string } | { fileid: string; nodeid?: string };
4-
export function FigmaEmbedCanvas(props: { src: EmbedInput }) {
4+
export function FigmaEmbedCanvas(props: {
5+
src: EmbedInput;
6+
width?: string | number;
7+
height?: string | number;
8+
}) {
59
const url = builEmbedabledUrl(props.src);
610

711
if (url) {
812
/**
913
* build embedding url. - https://www.figma.com/developers/embed
1014
*/
1115
const _embed_url = `https://www.figma.com/embed?embed_host=astra&url=${url}`;
12-
console.log("loading into figma embed preview - url is..", _embed_url, url);
13-
return <iframe width={300} height={600} src={_embed_url} />;
16+
return (
17+
<iframe
18+
width={props.width ?? 375}
19+
height={props.height}
20+
src={_embed_url}
21+
/>
22+
);
1423
}
1524
return <>NO FIGMA URL PROVIDED</>;
1625
}

‎editor/components/code-editor/code-editor.tsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
//// dynamic code editor. supports codemirror & monaco
2+
import React from "react";
3+
import CodeMirror from "./code-mirror";
4+
import { MonacoEditor } from "./monaco";
5+
6+
interface DynamicEdotorProps {
7+
host?: _Host;
8+
}
9+
10+
type _Host = "codemirror" | "monaco" | "auto";
11+
// uses monaco by default. when set auto or host not provided.
12+
const fallbackAutoHost = "monaco";
13+
14+
export function CodeEditor(props: DynamicEdotorProps) {
15+
const _editorname = getTargetEditorName(props.host);
16+
17+
switch (_editorname) {
18+
case "codemirror":
19+
return <CodeMirror />;
20+
case "monaco":
21+
return <MonacoEditor />;
22+
}
23+
}
24+
25+
function getTargetEditorName(host?: _Host): "codemirror" | "monaco" {
26+
if (!host) {
27+
return fallbackAutoHost;
28+
}
29+
30+
switch (host) {
31+
case "auto":
32+
return fallbackAutoHost;
33+
case "codemirror":
34+
return "codemirror";
35+
case "monaco":
36+
return "monaco";
37+
}
38+
39+
throw `invalid host option provided - "${host}"`;
40+
}

‎editor/components/code-editor/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
1+
export * from "./code-editor";
12
export * from "./code-mirror";
3+
export * from "./monaco";

‎editor/components/code-editor/monaco.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React, { useEffect } from "react";
2+
import Editor, { useMonaco } from "@monaco-editor/react";
3+
import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
4+
interface EditorProps {
5+
defaultValue?: string;
6+
width?: number | string;
7+
height?: number | string;
8+
options?: monaco.editor.IStandaloneEditorConstructionOptions;
9+
}
10+
11+
export function MonacoEditor(props: EditorProps) {
12+
const monaco = useMonaco();
13+
useEffect(() => {
14+
// adding jsx support - https://github.com/microsoft/monaco-editor/issues/264
15+
if (monaco) {
16+
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
17+
target: monaco.languages.typescript.ScriptTarget.Latest,
18+
allowNonTsExtensions: true,
19+
moduleResolution:
20+
monaco.languages.typescript.ModuleResolutionKind.NodeJs,
21+
module: monaco.languages.typescript.ModuleKind.CommonJS,
22+
noEmit: true,
23+
esModuleInterop: true,
24+
jsx: monaco.languages.typescript.JsxEmit.React,
25+
reactNamespace: "React",
26+
allowJs: true,
27+
typeRoots: ["node_modules/@types"],
28+
});
29+
30+
monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
31+
noSemanticValidation: false,
32+
noSyntaxValidation: false,
33+
});
34+
35+
monaco.languages.typescript.typescriptDefaults.addExtraLib(
36+
"https://cdn.jsdelivr.net/npm/@types/react@16.9.41/index.d.ts"
37+
);
38+
39+
// monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
40+
// jsx: monaco.languages.typescript.JsxEmit.ReactJSX,
41+
// });
42+
43+
// monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
44+
// noSemanticValidation: false,
45+
// noSyntaxValidation: false,
46+
// });
47+
}
48+
}, [monaco]);
49+
50+
return (
51+
<Editor
52+
width={props.width}
53+
height={props.height}
54+
defaultLanguage="typescript"
55+
defaultValue={props.defaultValue ?? "// no content"}
56+
theme="vs-dark"
57+
options={props.options}
58+
/>
59+
);
60+
}
61+
62+
export { useMonaco } from "@monaco-editor/react";

‎editor/components/editor-hierarchy/editor-layer-hierarchy/index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function LayerHierarchy(props: {
3636

3737
const renderTree = (nodes: LayerTree) => {
3838
if (!nodes) {
39-
return <>empty</>;
39+
return <div style={{ padding: 24 }}>empty</div>;
4040
}
4141
return (
4242
<TreeItem
@@ -72,9 +72,13 @@ export function LayerHierarchy(props: {
7272
}
7373

7474
const Wrapper = styled.div`
75-
flex: 1;
75+
flex: 0;
7676
min-width: 200px;
7777
background-color: #2a2e39;
78+
display: flex;
79+
align-items: stretch;
80+
flex-direction: column;
81+
min-height: 100%;
7882
7983
.scene-tab {
8084
margin: 30px 0px;

‎editor/components/preview-and-run/preview-and-run-panel.tsx‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import styled from "@emotion/styled";
12
import { Tab } from "@material-ui/core";
23
import React, { useEffect, useState } from "react";
34
import { AppRunner } from "../app-runner";
@@ -36,6 +37,8 @@ export function PreviewAndRunPanel(props: { config: SceneRunnerConfig }) {
3637
};
3738

3839
const TargetModePanel = () => {
40+
const _width = "100%";
41+
const _height = "100%";
3942
switch (mode) {
4043
case "preview":
4144
return (
@@ -46,6 +49,8 @@ export function PreviewAndRunPanel(props: { config: SceneRunnerConfig }) {
4649
origin: "figma",
4750
displayAs: "embed",
4851
}}
52+
width={_width}
53+
height={_height}
4954
/>
5055
);
5156
case "run":
@@ -67,16 +72,22 @@ export function PreviewAndRunPanel(props: { config: SceneRunnerConfig }) {
6772
};
6873
return (
6974
<>
70-
<Tab onClick={clicked("preview")}>Preview</Tab>
71-
<Tab onClick={clicked("run")}>Run</Tab>
75+
<button onClick={clicked("preview")}>Preview</button>
76+
<button onClick={clicked("run")}>Run</button>
7277
</>
7378
);
7479
};
7580

7681
return (
7782
<>
78-
<ModeSelectionTab />
83+
<StickyTab>
84+
<ModeSelectionTab />
85+
</StickyTab>
7986
<TargetModePanel />
8087
</>
8188
);
8289
}
90+
91+
const StickyTab = styled.div`
92+
position: absolute;
93+
`;

0 commit comments

Comments
 (0)