Feature/component view

app/lib/components/codebox-edit-dialog.tsx

@@ -0,0 +1,62 @@
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  TextField,
+  DialogActions,
+  Button,
+} from "@material-ui/core";
+import React from "react";
+
+export function CodeboxEditDialog(props: {
+  title: string;
+  description: string;
+  label: string;
+  open: boolean;
+  initialValue: string;
+  handleClose: () => void;
+  handleSave: (value: string) => void;
+}) {
+  let value = props.initialValue;
+  return (
+    <>
+      <Dialog
+        fullScreen
+        open={props.open}
+        onClose={props.handleClose}
+        aria-labelledby="form-dialog-title"
+      >
+        <DialogTitle id="form-dialog-title">{props.title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{props.description}</DialogContentText>
+          <TextField
+            autoFocus
+            id="name"
+            label={props.label}
+            fullWidth
+            multiline
+            defaultValue={props.initialValue}
+            onChange={(e) => {
+              value = e.target.value;
+            }}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={props.handleClose} color="primary">
+            Cancel
+          </Button>
+          <Button
+            onClick={() => {
+              props.handleSave(value);
+              props.handleClose();
+            }}
+            color="primary"
+          >
+            Save
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}

app/lib/components/highlight.tsx → app/lib/components/codebox.tsx

@@ -11,11 +11,12 @@ import "./highlight.css";
 // https://github.com/FormidableLabs/prism-react-renderer/issues/22#issuecomment-553042928
 import Prism from "prism-react-renderer/prism";
 import dartLang from "refractor/lang/dart";
-import { EK_COPIED } from "../constants/ek.constant";
 import { quickLook } from "../quicklook";
 import { Widget } from "@bridged.xyz/flutter-builder/lib";
-import { notify } from "@bridged.xyz/design-sdk/lib/figma";
 import Button from "@material-ui/core/Button";
+import { PluginSdk } from "../utils/plugin-provider/plugin-app-sdk";
+import { IconButton } from "@material-ui/core";
+import { Add } from "@material-ui/icons";
 dartLang(Prism);
 // endregion
 
@@ -25,12 +26,13 @@ interface State {
 
 interface Props {
   language: Language | any;
-  app: string;
-  widget: Widget;
   code: string;
+  app?: string;
+  widget?: Widget;
+  codeActions?: Array<JSX.Element>;
 }
 
-export default class Highlight extends React.Component<Props, State> {
+export default class CodeBox extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this.state = {
@@ -40,7 +42,7 @@ export default class Highlight extends React.Component<Props, State> {
 
   onCopyClicked = (e) => {
     copy(this.props.code);
-    parent.postMessage({ pluginMessage: { type: EK_COPIED } }, "*");
+    PluginSdk.notifyCopied();
   };
 
   onQuickLookClicked = (e) => {
@@ -56,19 +58,23 @@ export default class Highlight extends React.Component<Props, State> {
     quickLook("quicklook", this.props.app)
       .then((r) => {
         setLoadingState(false);
-        notify(parent, "quick look ready !");
+        PluginSdk.notify("quick look ready !");
       })
       .catch((e) => {
         console.error(e);
         setLoadingState(false);
-        notify(parent, "compile failed. view console for details.", 2);
+        PluginSdk.notify("compile failed. view console for details.", 2);
       });
   };
 
   render() {
     return (
       <>
         <code>
+          {this.props.codeActions &&
+            this.props.codeActions.map((e) => {
+              return e;
+            })}
           <PrismHighlight
             {...defaultProps}
             Prism={Prism}
@@ -93,13 +99,15 @@ export default class Highlight extends React.Component<Props, State> {
           <Button className="btn-copy-code" onClick={this.onCopyClicked}>
             copy code
           </Button>
-          <Button
-            className="btn-quick-look"
-            disabled={this.state.isLaunchingConsole}
-            onClick={this.onQuickLookClicked}
-          >
-            {this.state.isLaunchingConsole ? "launching.." : "quick look"}
-          </Button>
+          {this.props.app && (
+            <Button
+              className="btn-quick-look"
+              disabled={this.state.isLaunchingConsole}
+              onClick={this.onQuickLookClicked}
+            >
+              {this.state.isLaunchingConsole ? "launching.." : "quick look"}
+            </Button>
+          )}
         </div>
       </>
     );

app/lib/components/preview.tsx

@@ -1,61 +1,64 @@
 import { Typography, CircularProgress, Fade } from "@material-ui/core";
-import * as React from "react";
+import React, { useState, useEffect } from "react";
+import { EK_PREVIEW_SOURCE } from "../constants/ek.constant";
 import "./preview.css";
 
 interface Props {
-  data: Uint8Array;
-  name: string;
+  auto?: boolean;
+  data?: Uint8Array;
+  name?: string;
   type?: string;
 }
 
-interface State {
-  url: string;
-}
-export class Preview extends React.Component<Props, State> {
-  constructor(props) {
-    super(props);
-    this.state = {
-      url: null,
-    };
-  }
+export function Preview(props: Props) {
+  const [data, setData] = useState(props.data);
+  const [name, setName] = useState(props.name);
 
-  componentDidMount() { }
+  useEffect(() => {
+    if (props.auto) {
+      window.addEventListener("message", (ev: MessageEvent) => {
+        const msg = ev.data.pluginMessage;
+        if (msg && msg.type == EK_PREVIEW_SOURCE) {
+          setName(msg.data.name);
+          setData(msg.data.source);
+        }
+      });
+    }
+  }, []);
 
-  get url(): string {
-    if (this.props.data) {
-      var blob = new Blob([this.props.data], { type: "image/png" });
+  function makeUrl() {
+    if (data) {
+      var blob = new Blob([data], { type: "image/png" });
       var url = URL.createObjectURL(blob);
       return url;
     }
   }
 
-  render() {
-    const unselectedLogo = require("./assets/preview-unselected.svg") as string;
+  const unselectedLogo = require("./assets/preview-unselected.svg") as string;
 
-    let render = this.url ? (
-      <img
-        className="render"
-        alt={this.props.name}
-        src={this.url}
-        width="100%"
-        height="200px"
-      />
-    ) : (
-        <div className="render">
-          <div className="inner-render">
-            <img src={unselectedLogo} alt="unSelected-logo" />
-            <Typography className="rendering-notify">
-              Nothing is selected
-          </Typography>
-          </div>
-        </div>
-      );
-
-    return (
-      <div className="preview">
-        <Typography variant="caption">{this.props.type}</Typography>
-        {render}
+  let render = data ? (
+    <img
+      className="render"
+      alt={name}
+      src={makeUrl()}
+      width="100%"
+      height="200px"
+    />
+  ) : (
+    <div className="render">
+      <div className="inner-render">
+        <img src={unselectedLogo} alt="unSelected-logo" />
+        <Typography className="rendering-notify">
+          Nothing is selected
+        </Typography>
       </div>
-    );
-  }
+    </div>
+  );
+
+  return (
+    <div className="preview">
+      <Typography variant="caption">{props.type}</Typography>
+      {render}
+    </div>
+  );
 }

app/lib/constants/ek.constant.ts

@@ -1,13 +1,11 @@
 /// EK stands for "Event Key"
 /// the event keys constants
 
-export const EK_DRAG_AND_DROPPED = "EK_DRAG_AND_DROPPED";
 export const EK_LINT_FEEDBACK = "EK_LINT_FEEDBACK";
 export const EK_GENERATED_CODE_PLAIN = "EK_GENERATED_CODE_PLAIN";
 export const EK_IMAGE_ASSET_REPOSITORY_MAP = "EK_IMAGE_ASSET_REPOSITORY_MAP";
 export const EK_VANILLA_TRANSPORT = "EK_VANILLA_TRANSPORT";
 export const EK_PREVIEW_SOURCE = "EK_PREVIEW_SOURCE";
-export const EK_COPIED = "EK_COPIED";
 // icon related
 export const EK_ICON_DRAG_AND_DROPPED = "assistant/design/icons/add/dropped";
 export const EK_CREATE_ICON = "assistant/design/icons/add/create";
@@ -16,6 +14,3 @@ export const EK_SET_APP_MODE = "EK_SET_APP_MODE";
 export const EK_FOCUS_REQUEST = "EK_FOCUS_REQUEST";
 export const EK_COMPUTE_STARTED = "EK_COMPUTE_STARTED";
 export const EK_REPLACE_FONT = "EK_REPLACE_FONT";
-export const EK_BATCH_META_UPDATE = "assistant/tools/batch-meta-editor/update";
-export const EK_REQUEST_FETCH_ROOT_META =
-  "assistant/tools/batch-meta-editor/fetch";