Merge pull request #94 from gridaco/staging

Dec release #2 - Stateful Editor

Author: softmarshmallow

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 = [

…mponents/scene-preview/scene-preview.tsx …onents/design-preview/design-preview.tsxeditor/components/scene-preview/scene-preview.tsx renamed to editor/components/design-preview/design-preview.tsx editor/components/scene-preview/scene-preview.tsx renamed to 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;
+`;