Merge pull request #11 from bridgedxyz/react/styled-components

React/styled components

Author: softmarshmallow

editor/components/_playground/.gitignore

@@ -0,0 +1,4 @@
+*.play.tsx
+*.play.jsx
+*.play.js
+*.play.ts

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

@@ -11,8 +11,9 @@ export function AppRunner(props: {
     h: number | string;
   };
   src: string;
+  componentName: string;
 }) {
-  const { platform, sceneSize, src } = props;
+  const { platform, sceneSize, src, componentName } = props;
   switch (platform) {
     case "flutter":
       return (
@@ -50,6 +51,13 @@ export function AppRunner(props: {
         </div>
       );
     case "web":
-      return <CodeSandBoxView width="300px" height="100%" src={src} />;
+      return (
+        <CodeSandBoxView
+          width="100%"
+          height="100%"
+          src={src}
+          componentName={componentName}
+        />
+      );
   }
 }

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

@@ -11,21 +11,85 @@ import { useAsyncEffect } from "../../hooks";
  */
 export function CodeSandBoxView(props: {
   src: string;
+  componentName: string;
   width: number | string;
   height: number | string;
 }) {
   const [iframeUrl, setIframeUrl] = useState("");
   useAsyncEffect(async () => {
     const parameters = getParameters({
       files: {
-        "index.js": {
+        "App.tsx": {
           content: props.src,
           isBinary: false,
         },
-        // "package.json": {
-        //   content: "",
-        //   isBinary: false,
-        // },
+        "index.tsx": {
+          content: `
+          import React from "react";
+          import { render } from "react-dom";
+
+          import ${props.componentName} from "./App";
+          
+          const rootElement = document.getElementById("root");
+          render(<${props.componentName} />, rootElement);
+          `,
+          isBinary: false,
+        },
+        "tsconfig.json": {
+          content: `{
+            "include": [
+                "./src/**/*"
+            ],
+            "compilerOptions": {
+                "strict": true,
+                "esModuleInterop": true,
+                "lib": [
+                    "dom",
+                    "es2015"
+                ],
+                "jsx": "react-jsx"
+            }
+        }`,
+          isBinary: false,
+        },
+        "package.json": {
+          content: `{
+            "name": "react-typescript",
+            "version": "1.0.0",
+            "description": "React and TypeScript example starter project",
+            "keywords": [
+              "typescript",
+              "react",
+              "starter"
+            ],
+            "main": "src/index.tsx",
+            "dependencies": {
+              "react": "17.0.2",
+              "react-dom": "17.0.2",
+              "react-scripts": "4.0.0",
+              "@emotion/react": "^11.1.5",
+              "@emotion/styled": "^11.1.5"
+            },
+            "devDependencies": {
+              "@types/react": "17.0.0",
+              "@types/react-dom": "17.0.0",
+              "typescript": "4.1.3"
+            },
+            "scripts": {
+              "start": "react-scripts start",
+              "build": "react-scripts build",
+              "test": "react-scripts test --env=jsdom",
+              "eject": "react-scripts eject"
+            },
+            "browserslist": [
+              ">0.2%",
+              "not dead",
+              "not ie <= 11",
+              "not op_mini all"
+            ]
+          }`,
+          isBinary: false,
+        },
       },
       template: "create-react-app-typescript",
     });

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

@@ -5,10 +5,12 @@ export function ReactAppRunner(props: {
   source: string;
   width: string | number;
   height: string | number;
+  componentName;
 }) {
   return (
     <>
       <CodeSandBoxView
+        componentName={props.componentName}
         src={props.source}
         width={props.width}
         height={props.height}

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

@@ -22,12 +22,24 @@ export function LayerHierarchy(props: {
   // make mode
   const selectionmode = props.onLayerSelect?.multi ? "multi" : "single";
   const [selections, setSelections] = useState<string[]>();
+  const [expanded, setExpanded] = useState<string[]>([]);
+  const [selected, setSelected] = useState<string[]>([]);
 
-  const handleLayerClick = (id: string) => {
+  const handleToggle = (event: React.ChangeEvent<{}>, nodeIds: string[]) => {
+    setExpanded(nodeIds);
+  };
+
+  const handleSelect = (event: React.ChangeEvent<{}>, nodeIds: string[]) => {
+    setSelected(nodeIds);
+    handleLayerClick(nodeIds);
+  };
+
+  const handleLayerClick = (ids: string[]) => {
     if (selectionmode == "single") {
+      const id = ids[ids.length - 1];
       props.onLayerSelect?.single?.(id);
     } else {
-      setSelections([id, ...selections]);
+      setSelections(ids);
       props.onLayerSelect?.multi?.(selections);
     }
   };
@@ -39,12 +51,7 @@ export function LayerHierarchy(props: {
       return <div style={{ padding: 24 }}>empty</div>;
     }
     return (
-      <TreeItem
-        key={nodes.id}
-        nodeId={nodes.id}
-        label={nodes.name}
-        onClick={() => handleLayerClick(nodes.id)}
-      >
+      <TreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
         {Array.isArray(nodes.children)
           ? nodes.children.map((node) => renderTree(node))
           : null}
@@ -61,8 +68,12 @@ export function LayerHierarchy(props: {
       <>
         <TreeView
           defaultCollapseIcon={<ExpandMoreIcon />}
-          defaultExpanded={["root"]}
+          defaultExpanded={[props.data?.id]}
           defaultExpandIcon={<ChevronRightIcon />}
+          expanded={expanded}
+          selected={selected}
+          onNodeToggle={handleToggle}
+          onNodeSelect={handleSelect}
         >
           {renderTree(data)}
         </TreeView>

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

@@ -15,6 +15,7 @@ interface SceneRunnerConfig {
   };
   src: string | (() => string);
   platform: "web" | "flutter";
+  componentName: string;
 }
 
 export function PreviewAndRunPanel(props: { config: SceneRunnerConfig }) {
@@ -51,6 +52,7 @@ export function PreviewAndRunPanel(props: { config: SceneRunnerConfig }) {
       case "run":
         return (
           <AppRunner
+            componentName={sceneConfig.componentName}
             sceneSize={sceneConfig?.sceneSize}
             src={loadSource()}
             platform={sceneConfig?.platform}

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

@@ -1,3 +1,5 @@
+import { Widget as WebWidget } from "@coli.codes/web-builder-core";
+import { Widget as ReflectWidget } from "@reflect-ui/core";
 import React from "react";
 import JSONTree from "react-json-tree";
 
@@ -24,5 +26,54 @@ const theme = {
 };
 
 export function JsonTree(props: { data: any; hideRoot?: boolean }) {
-  return <JSONTree data={props.data} theme={theme} hideRoot={props.hideRoot} />;
+  return (
+    <JSONTree
+      data={props.data}
+      theme={theme}
+      hideRoot={props.hideRoot}
+      getItemString={(type, data, itemType, itemString) => {
+        return (
+          <span>
+            {type} {itemType}
+          </span>
+        );
+      }}
+    />
+  );
+}
+
+type WidgetDataLike = WebWidget | ReflectWidget;
+export function WidgetTree(props: {
+  data: WidgetDataLike;
+  hideRoot?: boolean;
+}) {
+  const getname = (data: WidgetDataLike | any): string => {
+    if (data instanceof WebWidget) {
+      return data.key.name;
+    } else if (data instanceof ReflectWidget) {
+      return data.key.originName;
+    } else {
+      return data.constructor?.name ?? undefined;
+    }
+  };
+
+  const gettype = (data: WidgetDataLike): string => {
+    return data._type;
+  };
+
+  return (
+    <JSONTree
+      data={props.data}
+      theme={theme}
+      hideRoot={props.hideRoot}
+      getItemString={(type, data: WidgetDataLike, itemType, itemString) => {
+        return (
+          <span>
+            {getname(data) && getname(data)} {gettype(data) && gettype(data)}{" "}
+            {itemType}
+          </span>
+        );
+      }}
+    />
+  );
 }

editor/layout/default-editor-workspace-layout.tsx

@@ -55,6 +55,9 @@ const NonMenuContentZoneWrap = styled.div`
 const PanelLeftSideWrap = styled.div`
   flex-grow: 0;
   min-height: 100%;
+  max-height: 100%;
+  max-width: 400px;
+  overflow: auto;
 `;
 
 const PanelRightSideWrap = styled.div`

editor/layout/panel/workspace-content-panel-grid-layout.tsx

@@ -61,6 +61,8 @@ const Slot_BottomDockedContent = styled.div`
   position: relative;
   margin-top: auto;
   min-height: 150px;
+  max-height: 400px;
+  overflow: auto;
 `;
 
 const PanelLayoutItemsContainer = styled.div`

editor/next.config.js

@@ -25,6 +25,7 @@ const withTM = require("next-transpile-modules")([
   "coli",
   "@coli.codes/web-builder",
   "@coli.codes/web-builder-core",
+  "@coli.codes/nodejs-builder",
   "@coli.codes/react-builder",
   "@web-builder/styled",
   "@bridged.xyz/flutter-builder",