UI/workspace #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

softmarshmallow merged 19 commits into main from ui/workspace

Jun 2, 2021

.gitmodules

-Original file line number
+Diff line change
@@ Expand Up / @@ -13,3 +13,6 @@ @@
     [submodule "packages/coli-web-builder"]
     	path = packages/coli-web-builder
     	url = https://github.com/bridgedxyz/coli-web-builder
+    [submodule "ui/editor-ui"]
+    	path = ui/editor-ui
+    	url = https://github.com/bridgedxyz/reflect-editor-ui

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -15,17 +15,15 @@ export function AppRunner(props: {
  
        case "flutter":

          return (

            <FlutterAppRunner

              width={sceneSize.w}

              height={sceneSize.h}

              width="300px"

              height="100%"

              q={{

                language: "dart",

                src: src,

              }}

            />

          );

        case "web":

          return (

            <CodeSandBoxView width={sceneSize.w} height={sceneSize.h} src={src} />

          );

          return <CodeSandBoxView width="300px" height="100%" src={src} />;

      }

    }

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -43,24 +43,5 @@ export function CodeSandBoxView(props: { @@
         );
       }, []);
-      return (
-        <Wrapper width={props.width} height={props.height}>
-          <iframe src={iframeUrl} />
-        </Wrapper>
-      );
+      return <iframe width={props.width} height={props.height} src={iframeUrl} />;
     }
-    interface WrapperProps {
-      width: string | number;
-      height: string | number;
-    }
-    const Wrapper = styled.div<WrapperProps>`
-      iframe {
-        position: absolute;
-        right: 0;
-        width: ${(props) => props.width};
-        height: ${(props) => props.width};
-        border: none;
-      }
-    `;

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

-Original file line number
+Diff line change
@@ -1,10 +1,18 @@
     import React from "react";
     import { CodeSandBoxView } from "./code-sandbox-runner";
-    export function ReactAppRunner(props: { source: string }) {
+    export function ReactAppRunner(props: {
+      source: string;
+      width: string | number;
+      height: string | number;
+    }) {
       return (
         <>
-          <CodeSandBoxView src={props.source} />
+          <CodeSandBoxView
+            src={props.source}
+            width={props.width}
+            height={props.height}
+          />
         </>
       );
     }

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

-Original file line number
+Diff line change
@@ -1,16 +1,25 @@
     import React from "react";
     type EmbedInput = { url: string } | { fileid: string; nodeid?: string };
-    export function FigmaEmbedCanvas(props: { src: EmbedInput }) {
+    export function FigmaEmbedCanvas(props: {
+      src: EmbedInput;
+      width?: string | number;
+      height?: string | number;
+    }) {
       const url = builEmbedabledUrl(props.src);
       if (url) {
         /**
          * build embedding url. - https://www.figma.com/developers/embed
          */
         const _embed_url = `https://www.figma.com/embed?embed_host=astra&url=${url}`;
-        console.log("loading into figma embed preview - url is..", _embed_url, url);
-        return <iframe width={300} height={600} src={_embed_url} />;
+        return (
+          <iframe
+            width={props.width ?? 375}
+            height={props.height}
+            src={_embed_url}
+          />
+        );
       }
       return <>NO FIGMA URL PROVIDED</>;
     }
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -0,0 +1,40 @@
+    //// dynamic code editor. supports codemirror & monaco
+    import React from "react";
+    import CodeMirror from "./code-mirror";
+    import { MonacoEditor } from "./monaco";
+    interface DynamicEdotorProps {
+      host?: _Host;
+    }
+    type _Host = "codemirror" | "monaco" | "auto";
+    // uses monaco by default. when set auto or host not provided.
+    const fallbackAutoHost = "monaco";
+    export function CodeEditor(props: DynamicEdotorProps) {
+      const _editorname = getTargetEditorName(props.host);
+      switch (_editorname) {
+        case "codemirror":
+          return <CodeMirror />;
+        case "monaco":
+          return <MonacoEditor />;
+      }
+    }
+    function getTargetEditorName(host?: _Host): "codemirror" | "monaco" {
+      if (!host) {
+        return fallbackAutoHost;
+      }
+      switch (host) {
+        case "auto":
+          return fallbackAutoHost;
+        case "codemirror":
+          return "codemirror";
+        case "monaco":
+          return "monaco";
+      }
+      throw `invalid host option provided - "${host}"`;
+    }

editor/components/code-editor/index.ts

-Original file line number
+Diff line change
@@ -1 +1,3 @@
+    export * from "./code-editor";
     export * from "./code-mirror";
+    export * from "./monaco";

editor/components/code-editor/monaco.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,62 @@
+    import React, { useEffect } from "react";
+    import Editor, { useMonaco } from "@monaco-editor/react";
+    import * as monaco from "monaco-editor/esm/vs/editor/editor.api";
+    interface EditorProps {
+      defaultValue?: string;
+      width?: number | string;
+      height?: number | string;
+      options?: monaco.editor.IStandaloneEditorConstructionOptions;
+    }
+    export function MonacoEditor(props: EditorProps) {
+      const monaco = useMonaco();
+      useEffect(() => {
+        // adding jsx support - https://github.com/microsoft/monaco-editor/issues/264
+        if (monaco) {
+          monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+            target: monaco.languages.typescript.ScriptTarget.Latest,
+            allowNonTsExtensions: true,
+            moduleResolution:
+              monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+            module: monaco.languages.typescript.ModuleKind.CommonJS,
+            noEmit: true,
+            esModuleInterop: true,
+            jsx: monaco.languages.typescript.JsxEmit.React,
+            reactNamespace: "React",
+            allowJs: true,
+            typeRoots: ["node_modules/@types"],
+          });
+          monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+            noSemanticValidation: false,
+            noSyntaxValidation: false,
+          });
+          monaco.languages.typescript.typescriptDefaults.addExtraLib(
+            "https://cdn.jsdelivr.net/npm/@types/[email protected]/index.d.ts"
+          );
+          // monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+          //   jsx: monaco.languages.typescript.JsxEmit.ReactJSX,
+          // });
+          // monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+          //   noSemanticValidation: false,
+          //   noSyntaxValidation: false,
+          // });
+        }
+      }, [monaco]);
+      return (
+        <Editor
+          width={props.width}
+          height={props.height}
+          defaultLanguage="typescript"
+          defaultValue={props.defaultValue ?? "// no content"}
+          theme="vs-dark"
+          options={props.options}
+        />
+      );
+    }
+    export { useMonaco } from "@monaco-editor/react";

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -36,7 +36,7 @@ export function LayerHierarchy(props: {
  
      const renderTree = (nodes: LayerTree) => {

        if (!nodes) {

          return <>empty</>;

          return <div style={{ padding: 24 }}>empty</div>;

        }

        return (

          <TreeItem

    @@ -72,9 +72,13 @@ export function LayerHierarchy(props: {
  
    }

    const Wrapper = styled.div`

      flex: 1;

      flex: 0;

      min-width: 200px;

      background-color: #2a2e39;

      display: flex;

      align-items: stretch;

      flex-direction: column;

      min-height: 100%;

      .scene-tab {

        margin: 30px 0px;

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

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -1,3 +1,4 @@
  
    import styled from "@emotion/styled";

    import { Tab } from "@material-ui/core";

    import React, { useEffect, useState } from "react";

    import { AppRunner } from "../app-runner";

    @@ -36,6 +37,8 @@ export function PreviewAndRunPanel(props: { config: SceneRunnerConfig }) {
  
      };

      const TargetModePanel = () => {

        const _width = "100%";

        const _height = "100%";

        switch (mode) {

          case "preview":

            return (

    @@ -46,6 +49,8 @@ export function PreviewAndRunPanel(props: { config: SceneRunnerConfig }) {
  
                  origin: "figma",

                  displayAs: "embed",

                }}

                width={_width}

                height={_height}

              />

            );

          case "run":

    @@ -67,16 +72,22 @@ export function PreviewAndRunPanel(props: { config: SceneRunnerConfig }) {
  
        };

        return (

          <>

            <Tab onClick={clicked("preview")}>Preview</Tab>

            <Tab onClick={clicked("run")}>Run</Tab>

            <button onClick={clicked("preview")}>Preview</button>

            <button onClick={clicked("run")}>Run</button>

          </>

        );

      };

      return (

        <>

          <ModeSelectionTab />

          <StickyTab>

            <ModeSelectionTab />

          </StickyTab>

          <TargetModePanel />

        </>

      );

    }

    const StickyTab = styled.div`

      position: absolute;

    `;

editor/components/scene-preview/scene-preview.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,11 @@ interface ScenePreviewConfig { @@
       displayAs: "embed" | "static" | "nothing";
     }
-    export function ScenePreview(props: { config: ScenePreviewConfig }) {
+    export function ScenePreview(props: {
+      config: ScenePreviewConfig;
+      width: number | string;
+      height: number | string;
+    }) {
       const { config } = props;
       switch (config.origin) {
         case "figma":
@@ Expand All @@
                     fileid: config.fileid,
                     nodeid: config.sceneid, // scene id is node id here.
                   }}
+                  width={props.width}
+                  height={props.height}
                 />
               );
             case "static":
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -0,0 +1,28 @@
+    import React from "react";
+    import JSONTree from "react-json-tree";
+    const theme = {
+      scheme: "monokai",
+      author: "wimer hazenberg (http://www.monokai.nl)",
+      base00: "#272822",
+      base01: "#383830",
+      base02: "#49483e",
+      base03: "#75715e",
+      base04: "#a59f85",
+      base05: "#f8f8f2",
+      base06: "#f5f4f1",
+      base07: "#f9f8f5",
+      base08: "#f92672",
+      base09: "#fd971f",
+      base0A: "#f4bf75",
+      base0B: "#a6e22e",
+      base0C: "#a1efe4",
+      base0D: "#66d9ef",
+      base0E: "#ae81ff",
+      base0F: "#cc6633",
+      "background-color": "transparent",
+    };
+    export function JsonTree(props: { data: any; hideRoot?: boolean }) {
+      return <JSONTree data={props.data} theme={theme} hideRoot={props.hideRoot} />;
+    }

editor/layout/app-menu/app-menu.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,47 @@
+    import React from "react";
+    import Button from "@material-ui/core/Button";
+    import Menu from "@material-ui/core/Menu";
+    import MenuItem from "@material-ui/core/MenuItem";
+    import styled from "@emotion/styled";
+    export function AppMenu() {
+      const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+      const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+      };
+      const handleClose = () => {
+        setAnchorEl(null);
+      };
+      const handleLoadDesignClick = () => {
+        console.log("load design click. open design loader prompt");
+        handleClose();
+      };
+      return (
+        <AppMenuRoot>
+          <Button
+            aria-controls="simple-menu"
+            aria-haspopup="true"
+            onClick={handleClick}
+          >
+            File
+          </Button>
+          <Menu
+            id="simple-menu"
+            anchorEl={anchorEl}
+            keepMounted
+            open={Boolean(anchorEl)}
+            onClose={handleClose}
+          >
+            <MenuItem onClick={handleLoadDesignClick}>Load design</MenuItem>
+          </Menu>
+        </AppMenuRoot>
+      );
+    }
+    const AppMenuRoot = styled.div`
+      flex-grow: 0;
+    `;

editor/layout/app-menu/index.ts

Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export * from "./app-menu";

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

UI/workspace #9

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!