mvp of assistant live session (no-auth)

gridaco · Nov 2, 2021 · adc0f9a · adc0f9a
1 parent 054defa
commit adc0f9a
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 18 deletions.
diff --git a/editor/layout/panel/workspace-content-panel.tsx b/editor/layout/panel/workspace-content-panel.tsx
@@ -6,12 +6,18 @@ import React from "react";
  * @param props
  * @returns
  */
-export function WorkspaceContentPanel(props: { children: JSX.Element }) {
-  return <Container>{props.children}</Container>;
+export function WorkspaceContentPanel({
+  children,
+  disableBorder = false,
+}: {
+  children: JSX.Element;
+  disableBorder?: boolean;
+}) {
+  return <Container disableBorder={disableBorder}>{children}</Container>;
 }
 
-const Container = styled.div`
-  border: solid #d2d2d2;
+const Container = styled.div<{ disableBorder: boolean }>`
+  border: ${(p) => (p.disableBorder ? "none" : "solid #d2d2d2")};
   border-width: 1px;
   align-self: stretch;
   flex: 1;

diff --git a/editor/pages/_app.tsx b/editor/pages/_app.tsx
@@ -11,7 +11,7 @@ function GlobalCss() {
         body {
           margin: 0px;
           padding: 0;
-          font-family: "Roboto", sans-serif;
+          font-family: "Helvetica Nueue", "Roboto", sans-serif;
         }
         iframe {
           border: none;

diff --git a/editor/pages/live/index.tsx b/editor/pages/live/index.tsx
@@ -1,9 +1,28 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Pusher from "pusher-js";
-import { useState } from "react";
-import { useEffect } from "react";
 import LoadingLayout from "../../layout/loading-overlay";
 import { useDesign } from "../../hooks";
+import { designToCode, Result } from "@designto/code";
+import { TargetNodeConfig } from "../../query/target-node";
+import { DefaultEditorWorkspaceLayout } from "../../layout/default-editor-workspace-layout";
+import {
+  WorkspaceContentPanel,
+  WorkspaceContentPanelGridLayout,
+} from "../../layout/panel";
+import { PreviewAndRunPanel } from "../../components/preview-and-run";
+import { CodeEditor } from "../../components/code-editor";
+import {
+  ImageRepository,
+  MainImageRepository,
+} from "@design-sdk/core/assets-repository";
+import { RemoteImageRepositories } from "@design-sdk/figma-remote/lib/asset-repository/image-repository";
+import { DesignInput } from "@designto/config/input";
+import { config, FrameworkConfig, output } from "@designto/config";
+import {
+  react_presets,
+  flutter_presets,
+  vanilla_presets,
+} from "@grida/builder-config-preset";
 
 const _base_url =
   "https://ahzdf5x4q3.execute-api.us-west-1.amazonaws.com/production"; // "https://assistant-live-session.grida.cc";
@@ -20,28 +39,25 @@ export default function LiveSessionPage() {
   const [filekey, setFilekey] = useState<string>();
   const [nodeid, setNodeid] = useState<string>();
 
-  const design = useDesign({
-    type: "use-file-node-id",
-    file: filekey,
-    node: nodeid,
-  });
-
   useEffect(() => {
     // TODO: - add auth guard
 
     // subscribe once wheb the page is loaded
     const subscription = pusher.subscribe("private-live-session"); // channel
     subscription.bind("client-select", (d) => {
+      console.log(d);
       setLastmessage(JSON.stringify(d));
+      setFilekey(d.filekey);
+      setNodeid(d.node);
     });
   }, []);
 
   return (
-    <div style={{ margin: 24 }}>
+    <div>
       {lastmessage ? (
-        <>
-          <p>{lastmessage}</p>
-        </>
+        <div key={filekey + nodeid}>
+          <DesignProxyPage file={filekey} node={nodeid} />
+        </div>
       ) : (
         <>
           <LoadingLayout
@@ -53,3 +69,118 @@ export default function LiveSessionPage() {
     </div>
   );
 }
+
+function DesignProxyPage({ file, node }: { file: string; node: string }) {
+  const design = useDesign({
+    type: "use-file-node-id",
+    file: file,
+    node: node,
+    use_session_cache: true,
+  });
+
+  console.log("design", design);
+
+  if (design) {
+    return <ResultProxyPage design={design} />;
+  } else {
+    return <LoadingLayout />;
+  }
+}
+
+function ResultProxyPage({ design }: { design: TargetNodeConfig }) {
+  const [result, setResult] = useState<Result>();
+  const [preview, setPreview] = useState<Result>();
+
+  const framework_config = react_presets.react_default;
+  const preview_runner_framework = vanilla_presets.vanilla_default;
+
+  useEffect(() => {
+    const { reflect, raw } = design;
+    const { id, name } = reflect;
+    // ------------------------------------------------------------
+    // other platforms are not supported yet
+    // set image repo for figma platform
+    MainImageRepository.instance = new RemoteImageRepositories(design.file);
+    MainImageRepository.instance.register(
+      new ImageRepository(
+        "fill-later-assets",
+        "grida://assets-reservation/images/"
+      )
+    );
+    // ------------------------------------------------------------
+    designToCode({
+      input: DesignInput.fromApiResponse({ entry: reflect, raw }),
+      framework: framework_config,
+      asset_config: { asset_repository: MainImageRepository.instance },
+      build_config: {
+        ...config.default_build_configuration,
+        disable_components: true,
+      },
+    }).then((result) => {
+      setResult(result);
+      setPreview(result);
+    });
+    // ----- for preview -----
+    designToCode({
+      input: {
+        id: id,
+        name: name,
+        entry: reflect,
+      },
+      build_config: {
+        ...config.default_build_configuration,
+        disable_components: true,
+      },
+      framework: preview_runner_framework,
+      asset_config: { asset_repository: MainImageRepository.instance },
+    }).then((result) => {
+      setPreview(result);
+    });
+  }, []);
+
+  if (!result || !preview) {
+    return <LoadingLayout />;
+  }
+
+  const { code, scaffold, name: componentName } = result;
+
+  return (
+    <WorkspaceContentPanelGridLayout>
+      <WorkspaceContentPanel disableBorder>
+        <PreviewAndRunPanel
+          key={design.url ?? design.reflect?.id}
+          config={{
+            src: preview.scaffold.raw,
+            platform: preview_runner_framework.framework,
+            componentName: componentName,
+            sceneSize: {
+              w: design.reflect?.width,
+              h: design.reflect?.height,
+            },
+            initialMode: "run",
+            fileid: design.file,
+            sceneid: design.node,
+          }}
+        />
+      </WorkspaceContentPanel>
+      <WorkspaceContentPanel key={design.node} disableBorder>
+        <CodeEditor
+          // key={code.raw}
+          height="100vh"
+          options={{
+            automaticLayout: true,
+          }}
+          files={{
+            "index.tsx": {
+              raw: code
+                ? code.raw
+                : "// No input design provided to be converted..",
+              language: framework_config.language,
+              name: "index.tsx",
+            },
+          }}
+        />
+      </WorkspaceContentPanel>
+    </WorkspaceContentPanelGridLayout>
+  );
+}