As SDK - organize project to be used from external package (packaging as sdk)

.vscode/settings.json

@@ -1,10 +1,16 @@
 {
-    "files.exclude": {
-        "**/.git": true,
-        "**/.svn": true,
-        "**/.hg": true,
-        "**/CVS": true,
-        "**/.DS_Store": true,
-        "**/node_modules": true
-    }
-}
+  "files.exclude": {
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true,
+    "**/node_modules": true
+  },
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/bower_components": true,
+    "**/*.code-search": true,
+    "yarn.lock": true
+  }
+}

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

@@ -4,6 +4,7 @@ import TreeView from "@material-ui/lab/TreeView";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import TreeItem from "@material-ui/lab/TreeItem";
+import { SideNavigation } from "../../side-navigation";
 
 interface LayerTree {
   id: string;
@@ -60,44 +61,42 @@ export function LayerHierarchy(props: {
   };
 
   return (
-    <Wrapper>
-      <div className="scene-tab">
-        <span>SCENE</span>
-        <span>FILES</span>
-      </div>
-      <>
-        <TreeView
-          defaultCollapseIcon={<ExpandMoreIcon />}
-          defaultExpanded={[props.data?.id]}
-          defaultExpandIcon={<ChevronRightIcon />}
-          expanded={expanded}
-          selected={selected}
-          onNodeToggle={handleToggle}
-          onNodeSelect={handleSelect}
-        >
-          {renderTree(data)}
-        </TreeView>
-      </>
-    </Wrapper>
+    <SideNavigation>
+      <Wrapper>
+        <div className="scene-tab">
+          <span>SCENE</span>
+          <span>FILES</span>
+        </div>
+        <>
+          <TreeView
+            defaultCollapseIcon={<ExpandMoreIcon />}
+            defaultExpanded={[props.data?.id]}
+            defaultExpandIcon={<ChevronRightIcon />}
+            expanded={expanded}
+            selected={selected}
+            onNodeToggle={handleToggle}
+            onNodeSelect={handleSelect}
+          >
+            {renderTree(data)}
+          </TreeView>
+        </>
+      </Wrapper>
+    </SideNavigation>
   );
 }
 
 const Wrapper = styled.div`
   flex: 0;
-  min-width: 200px;
-  background-color: #2a2e39;
   display: flex;
   align-items: stretch;
   flex-direction: column;
-  min-height: 100%;
 
   .scene-tab {
     margin: 30px 0px;
 
     span {
       cursor: pointer;
       margin-left: 16px;
-      color: #fff;
       font-size: 12px;
     }
   }

editor/components/recent-design-card/builtin-demo-design-card.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { RecentDesign } from "../../store";
+import { RecentDesignCard } from "./recent-design-card";
+import moment from "moment";
+import router from "next/router";
+import { formToCodeUrl } from "../../url";
+
+const _id =
+  "https://www.figma.com/file/x7RRK6RwWtZuNakmbMLTVH/examples?node-id=1%3A120";
+const defaultdemodesign: RecentDesign = {
+  id: _id,
+  name: "WNV Main screen",
+  provider: "figma",
+  addedAt: moment().toDate(),
+  lastUpdatedAt: moment().toDate(),
+  previewUrl:
+    "https://example-project-manifest.s3.us-west-1.amazonaws.com/app-wnv/cover.png",
+};
+
+export function BuiltinDemoDesignCard() {
+  const onclick = () => {
+    const _path = formToCodeUrl({
+      design: _id,
+    });
+    router.push(_path);
+  };
+  return (
+    <>
+      <RecentDesignCard key={_id} onclick={onclick} data={defaultdemodesign} />
+    </>
+  );
+}

editor/components/recent-design-card/import-new-design-card.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { RecentDesign } from "../../store/recent-designs-store";
+import { RecentDesignCard } from "./recent-design-card";
+
+const _id = "--new--";
+const importnewdesingcarddata: RecentDesign = {
+  id: _id,
+  name: "New Design",
+  lastUpdatedAt: new Date(),
+  addedAt: new Date(),
+  provider: "unknown",
+  previewUrl:
+    "https://example-project-manifest.s3.us-west-1.amazonaws.com/app-new/cover.png",
+};
+
+export function ImportNewDesignCard() {
+  const onclick = () => {
+    // TODO: import design
+  };
+
+  return (
+    <>
+      <RecentDesignCard
+        key={_id}
+        onclick={onclick}
+        data={importnewdesingcarddata}
+      />
+    </>
+  );
+}

editor/components/recent-design-card/index.ts

@@ -0,0 +1,2 @@
+export * from "./recent-design-card";
+export * from "./recent-design-card-list";

editor/components/recent-design-card/recent-design-card-list.tsx

@@ -0,0 +1,42 @@
+import styled from "@emotion/styled";
+import router from "next/router";
+import React, { useEffect, useState } from "react";
+import { RecentDesignsStore, RecentDesign } from "../../store";
+import { BuiltinDemoDesignCard } from "./builtin-demo-design-card";
+import { ImportNewDesignCard } from "./import-new-design-card";
+import { RecentDesignCard } from "./recent-design-card";
+
+export function RecentDesignCardList() {
+  const [recents, setRecents] = useState<RecentDesign[]>([]);
+  useEffect(() => {
+    const _loads = new RecentDesignsStore().load();
+    setRecents(_loads);
+  }, []);
+
+  const oncardclick = (id: string, d: RecentDesign) => {
+    console.log("click", id);
+    router.push(`/to-code/${id}`); // fixme id is not a param
+    //
+  };
+
+  return (
+    <ListWrap>
+      <ImportNewDesignCard />
+      <BuiltinDemoDesignCard />
+      {recents.map((recentDesign) => {
+        return (
+          <RecentDesignCard
+            key={recentDesign.id}
+            data={recentDesign}
+            onclick={oncardclick}
+          />
+        );
+      })}
+    </ListWrap>
+  );
+}
+
+const ListWrap = styled.div`
+  display: flex;
+  flex-direction: row;
+`;

editor/components/recent-design-card/recent-design-card.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { RecentDesign } from "../../store";
+import moment from "moment";
+import styled from "@emotion/styled";
+
+export type OnCardClickCallback = (id: string, data?: RecentDesign) => void;
+
+/**
+ * create recent design card component
+ **/
+export function RecentDesignCard(props: {
+  data: RecentDesign;
+  onclick?: OnCardClickCallback;
+}) {
+  const { name, id, provider, previewUrl, lastUpdatedAt } = props.data;
+  const onclick = (e) => {
+    props.onclick?.(id, props.data);
+  };
+  return (
+    <Container onClick={onclick}>
+      <PreviewImage
+        src={_safe_previewurl(previewUrl)}
+        alt={`${_str_alt(name)}`}
+      />
+      <NameText>{name}</NameText>
+      <LastUpdateText>{_str_lastUpdatedAt(lastUpdatedAt)}</LastUpdateText>
+    </Container>
+  );
+}
+
+const _defaultpreview =
+  "https://s3.amazonaws.com/uifaces/faces/twitter/golovey/128.jpg";
+function _safe_previewurl(previewUrl: string): string {
+  if (!previewUrl) {
+    return _defaultpreview;
+  }
+  return previewUrl;
+}
+
+function _str_lastUpdatedAt(lastUpdatedAt: Date) {
+  return moment(lastUpdatedAt).format("MM/dd/yyyy");
+}
+
+function _str_alt(name: string) {
+  return `${name} Design`;
+}
+
+const Container = styled.div`
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  max-width: 240px;
+  max-height: 360px;
+
+  &:hover {
+    cursor: pointer;
+    background-color: #f4f4f4;
+  }
+`;
+
+const PreviewImage = styled.img`
+  height: 120px;
+  width: 100%;
+  max-width: 100%;
+  object-fit: cover;
+  background-size: cover;
+  background-position: center center;
+`;
+
+const NameText = styled.h6`
+  font-size: 14px;
+`;
+
+const LastUpdateText = styled.h6`
+  font-size: 11px;
+  font-weight: normal;
+`;

editor/components/side-navigation/index.ts

@@ -0,0 +1 @@
+export * from "./side-navigation";

editor/components/side-navigation/side-navigation.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+export function SideNavigation(props: {
+  children: JSX.Element | JSX.Element[];
+}) {
+  return <Wrapper>{props.children}</Wrapper>;
+}
+
+const Wrapper = styled.div`
+  flex: 0;
+  min-width: 200px;
+  display: flex;
+  align-items: stretch;
+  flex-direction: column;
+  min-height: 100%;
+`;

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

@@ -41,7 +41,6 @@ const AppBarMenuAndBelowContentWrap = styled.div`
 
 const AppBarWrap = styled.div`
   flex-grow: 0;
-  background: grey;
 `;
 
 const NonMenuContentZoneWrap = styled.div`

editor/layout/panel/workspace-bottom-panel-dock-layout.tsx

@@ -15,9 +15,8 @@ export function WorkspaceBottomPanelDockLayout(props: {
 
 const DockRootWrap = styled.div`
   min-height: 100%;
-  border: solid #181a22;
+  border: solid #d2d2d2;
   align-self: stretch;
-  background: #2a2e39;
   border-width: 1px;
   display: flex;
   flex-direction: row;

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

@@ -11,10 +11,9 @@ export function WorkspaceContentPanel(props: { children: JSX.Element }) {
 }
 
 const Container = styled.div`
-  border: solid #181a22;
+  border: solid #d2d2d2;
   border-width: 1px;
   align-self: stretch;
   flex: 1;
   overflow: auto;
-  background: #2a2e39;
 `;

editor/next.config.js

@@ -1,4 +1,5 @@
 const withTM = require("next-transpile-modules")([
+  "@designto/config",
   "@designto/code",
   "@designto/token",
   "@designto/flutter",
@@ -7,8 +8,11 @@ const withTM = require("next-transpile-modules")([
   // design-sdk
   "@design-sdk/key-annotations",
   "@design-sdk/core",
+  "@design-sdk/core-types",
   "@design-sdk/universal",
   "@design-sdk/figma",
+  "@design-sdk/figma-url",
+  "@design-sdk/url-analysis",
   "@design-sdk/sketch",
   // reflect-ui
   "@reflect-ui/core",

editor/package.json

@@ -11,6 +11,7 @@
     "@babel/runtime": "^7.14.0",
     "@base-sdk/base": "^0.1.0-5",
     "@designto/code": "0.0.1",
+    "@emotion/core": "^11.0.0",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
     "@material-ui/core": "^4.11.4",
@@ -27,7 +28,8 @@
     "codesandbox": "^2.2.3",
     "cuid": "^2.1.8",
     "dart-style": "^1.3.2-dev",
-    "idb": "^6.0.0",
+    "idb": "^6.1.2",
+    "moment": "^2.29.1",
     "monaco-editor": "^0.24.0",
     "next": "10.0.3",
     "react": "17.0.1",

editor/pages/_app.tsx

@@ -12,7 +12,6 @@ function GlobalCss() {
           margin: 0px;
           padding: 0;
           font-family: "Roboto", sans-serif;
-          background-color: #181a22;
         }
         iframe {
           border: none;
@@ -25,11 +24,11 @@ function GlobalCss() {
         h5,
         h6,
         p {
-          color: white;
+          color: black;
         }
 
         a {
-          color: grey;
+          color: blue;
         }
       `}
     />