Dec release #2 - Stateful Editor

editor/babel.config.js

@@ -10,7 +10,9 @@ module.exports = {
           components: "./components",
           icons: "./icons",
           layouts: "./layouts",
+          scaffolds: "./scaffolds",
           utils: "./utils",
+          core: "./core",
           public: "./public",
           hooks: "./hooks",
         },

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

@@ -49,9 +49,11 @@ export function AppRunner(props: {
       >
         <div
           style={{
+            borderRadius: 4,
+            overflow: "hidden",
             width: viewportsize.width || sceneSize.w || "100%",
             height: viewportsize.height || sceneSize.h || "100%",
-            boxShadow: "0px 0px 48px #63636328",
+            boxShadow: "0px 0px 48px #00000020",
           }}
         >
           <DedicatedFrameworkRunner
@@ -162,14 +164,7 @@ function ResizableContainer({
   };
 
   return (
-    <Resizable
-      ref={resizable}
-      defaultSize={initialSize}
-      onResize={_onResize}
-      handleComponent={{
-        bottomRight: ResizeKnob(),
-      }}
-    >
+    <Resizable ref={resizable} defaultSize={initialSize} onResize={_onResize}>
       {children}
     </Resizable>
   );

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

@@ -10,7 +10,7 @@ export function VanillaRunner({
   source: string;
   componentName: string;
 }) {
-  const inlinesource = source || `<p>Hello world</p>`;
+  const inlinesource = source || `<div></div>`;
   return (
     <>
       <iframe

editor/components/clear-remote-design-session-cache/index.tsx

@@ -1,10 +1,17 @@
 import React from "react";
 import { RemoteDesignSessionCacheStore } from "../../store";
 
-export function ClearRemoteDesignSessionCache(props: { url: string }) {
+export function ClearRemoteDesignSessionCache(
+  props:
+    | { url: string }
+    | {
+        file: string;
+        node: string;
+      }
+) {
   const clearCache = () => {
-    new RemoteDesignSessionCacheStore({ url: props.url }).clear();
-    alert("cleared - " + props.url);
+    new RemoteDesignSessionCacheStore(props).clear();
+    alert("cleared - " + JSON.stringify(props));
   };
 
   return (

editor/components/code-editor/monaco.tsx

@@ -26,6 +26,7 @@ export function MonacoEditor(props: MonacoEditorProps) {
       defaultLanguage={
         pollyfill_language(props.defaultLanguage) ?? "typescript"
       }
+      loading={<></>}
       defaultValue={props.defaultValue ?? "// no content"}
       theme="vs-dark"
       options={{ ...props.options }}

editor/components/codeui-code-options-control/code-options-control.tsx

@@ -31,6 +31,11 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) {
     all_preset_options_map__prod[__presetname]
   );
 
+  useEffect(() => {
+    // trigger initial value
+    props.onUseroptionChange(useroption);
+  }, []);
+
   // FIXME: this should be fixed on https://github.com/gridaco/code-like-ui (view CURSOR)
   const __dirty_sort_framework = (): Option<string>[] => {
     const presets = [

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

@@ -1,15 +1,15 @@
 import React from "react";
 import { FigmaEmbedCanvas } from "components/canvas";
 
-interface ScenePreviewConfig {
+interface DesignPreviewConfig {
   fileid: string;
   sceneid: string;
   origin: "figma" | "sketch" | "xd" | "nothing";
   displayAs: "embed" | "static" | "nothing";
 }
 
-export function ScenePreview(props: {
-  config: ScenePreviewConfig;
+export function DesignPreview(props: {
+  config: DesignPreviewConfig;
   width: string;
   height: string;
 }) {

editor/components/design-preview/index.ts

@@ -0,0 +1 @@
+export * from "./design-preview";

editor/components/editor/README.md

@@ -0,0 +1 @@
+# Primary editor components

editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { useEditorState } from "core/states";
+
+export function AppbarFragmentForCanvas() {
+  const [state] = useEditorState();
+  return (
+    <RootWrapperAppbarFragmentForCanvas>
+      <Breadcrumbs>{state.design?.current?.name}</Breadcrumbs>
+    </RootWrapperAppbarFragmentForCanvas>
+  );
+}
+
+const RootWrapperAppbarFragmentForCanvas = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  gap: 10px;
+  align-self: stretch;
+  background-color: rgba(37, 37, 38, 1);
+  box-sizing: border-box;
+  padding: 10px 24px;
+`;
+
+const Breadcrumbs = styled.span`
+  text-overflow: ellipsis;
+  font-size: 14px;
+  color: grey;
+  font-family: "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  text-align: left;
+`;

editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+export function AppbarFragmentForCodeEditor() {
+  return (
+    <RootWrapperAppbarFragmentForCodeEditor>
+      <Frame354>
+        <Flutter>Flutter</Flutter>
+        <IconsAntdSettingOutlined
+          src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/4056/6ff2/8d18f474998d7ea1972ca5fe08258dd7"
+          alt="icon"
+        ></IconsAntdSettingOutlined>
+      </Frame354>
+      <AppbarActions>
+        <AppbarIconButton
+          src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/acff/b783/96b0feffa7116a485371002a54621c73"
+          alt="icon"
+        ></AppbarIconButton>
+        <AppbarIconButton_0001
+          src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/40e6/2dd0/0874244c17bfefb7d2125d3e55860428"
+          alt="icon"
+        ></AppbarIconButton_0001>
+      </AppbarActions>
+    </RootWrapperAppbarFragmentForCodeEditor>
+  );
+}
+
+const RootWrapperAppbarFragmentForCodeEditor = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  gap: 10px;
+  align-self: stretch;
+  background-color: rgba(30, 30, 30, 1);
+  box-sizing: border-box;
+  padding-bottom: 14px;
+  padding-top: 14px;
+  padding-left: 12px;
+  padding-right: 20px;
+`;
+
+const Frame354 = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  flex: 1;
+  gap: 4px;
+  align-self: stretch;
+  box-sizing: border-box;
+`;
+
+const Flutter = styled.span`
+  color: rgba(124, 124, 124, 1);
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-family: "Helvetica Neue", sans-serif;
+  font-weight: 400;
+  text-align: left;
+`;
+
+const IconsAntdSettingOutlined = styled.img`
+  width: 16px;
+  height: 16px;
+  object-fit: cover;
+`;
+
+const AppbarActions = styled.div`
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  flex: none;
+  gap: 14px;
+  width: 62px;
+  height: 24px;
+  box-sizing: border-box;
+`;
+
+const AppbarIconButton = styled.img`
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+`;
+
+const AppbarIconButton_0001 = styled.img`
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+`;

editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+export function AppbarFragmentForSidebar() {
+  return (
+    <RootWrapperAppbarFragmentForSidebar>
+      <IconsMdiMenu
+        // TODO: replace resource
+        src="https://s3-us-west-2.amazonaws.com/figma-alpha-api/img/333b/8550/4bdd6a7ceffe5b23b37bc68c1fb7a4ab"
+        alt="image of IconsMdiMenu"
+      ></IconsMdiMenu>
+    </RootWrapperAppbarFragmentForSidebar>
+  );
+}
+
+const RootWrapperAppbarFragmentForSidebar = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  width: 200px;
+  align-self: stretch;
+  background-color: rgba(37, 37, 38, 1);
+  box-sizing: border-box;
+  padding: 14px 16px;
+`;
+
+const IconsMdiMenu = styled.img`
+  width: 24px;
+  height: 24px;
+  object-fit: cover;
+`;

editor/components/editor/editor-appbar/editor-appbar.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { AppbarFragmentForSidebar } from "./editor-appbar-fragment-for-sidebar";
+import { AppbarFragmentForCanvas } from "./editor-appbar-fragment-for-canvas";
+import { AppbarFragmentForCodeEditor } from "./editor-appbar-fragment-for-code-editor";
+
+export function Appbar() {
+  return (
+    <AppbarContainer>
+      <AppbarFragmentForSidebar></AppbarFragmentForSidebar>
+      <AppbarFragmentForCanvas></AppbarFragmentForCanvas>
+      <AppbarFragmentForCodeEditor></AppbarFragmentForCodeEditor>
+    </AppbarContainer>
+  );
+}
+
+const AppbarContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row;
+  align-items: start;
+  flex: 1;
+  gap: 0;
+  align-self: stretch;
+  box-sizing: border-box;
+`;

editor/components/editor/editor-appbar/index.ts

@@ -0,0 +1,11 @@
+export { Appbar as EditorAppbar } from "./editor-appbar";
+
+import { AppbarFragmentForSidebar } from "./editor-appbar-fragment-for-sidebar";
+import { AppbarFragmentForCanvas } from "./editor-appbar-fragment-for-canvas";
+import { AppbarFragmentForCodeEditor } from "./editor-appbar-fragment-for-code-editor";
+
+export const EditorAppbarFragments = {
+  Sidebar: AppbarFragmentForSidebar,
+  Canvas: AppbarFragmentForCanvas,
+  CodeEditor: AppbarFragmentForCodeEditor,
+};