From d3c92b5662841407d8253bba90778db089842e4d Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 00:11:47 +0900
Subject: [PATCH 01/36] create tree-view

---
 app/lib/components/tree-view.tsx |  88 +++++++++
 app/lib/components/ui.css        | 328 +++++++++++++++++++++++++++++++
 app/lib/pages/lint-screen.tsx    |  11 ++
 app/package.json                 |   1 +
 yarn.lock                        |   5 +
 5 files changed, 433 insertions(+)
 create mode 100644 app/lib/components/tree-view.tsx
 create mode 100644 app/lib/components/ui.css

diff --git a/app/lib/components/tree-view.tsx b/app/lib/components/tree-view.tsx
new file mode 100644
index 00000000..adc74871
--- /dev/null
+++ b/app/lib/components/tree-view.tsx
@@ -0,0 +1,88 @@
+import * as React from "react";
+import "./ui.css";
+
+export function TreeView(props) {
+  const { onClick } = props;
+  const node = props.node;
+  let childNodes = null;
+  let errorObject = { errors: [] };
+  let childErrorsCount = 0;
+
+  // let filteredErrorArray = props.errorArray;
+
+  // Check to see if this node has corresponding errors.
+  // if (filteredErrorArray.some((e) => e.id === node.id)) {
+  //   errorObject = filteredErrorArray.find((e) => e.id === node.id);
+  // }
+
+  // The component calls itself if there are children
+  if (node.children && node.children.length) {
+    // Find errors in this node's children.
+    childErrorsCount = findNestedErrors(node);
+
+    let reversedArray = node.children.slice().reverse();
+    childNodes = reversedArray.map(function (childNode) {
+      return (
+        <TreeView
+          ignoredErrorArray={[]}
+          // activeNodeIds={props.activeNodeIds}
+          // selectedListItems={props.selectedListItems}
+          // errorArray={filteredErrorArray}
+          onClick={onClick}
+          key={childNode.id}
+          node={childNode}
+        />
+      );
+    });
+  }
+
+  function findNestedErrors(node) {
+    let errorCount = 0;
+
+    node.children.forEach((childNode) => {
+      // if (filteredErrorArray.some((e) => e.id === childNode.id)) {
+      //   let childErrorObject = filteredErrorArray.find(
+      //     (e) => e.id === childNode.id
+      //   );
+      //   errorCount = errorCount + childErrorObject.errors.length;
+      // }
+
+      if (childNode.children) {
+        errorCount = errorCount + findNestedErrors(childNode);
+      }
+    });
+
+    return errorCount;
+  }
+
+  return (
+    <li
+      id={node.id}
+      //   className={
+      //     classNames(`list-item`, {
+      //     "list-item--active": props.activeNodeIds.includes(node.id),
+      //     "lis``t-item--selected": props.selectedListItems.includes(node.id),
+      //   })
+      // }
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick(node.id);
+      }}
+    >
+      <div className="list-flex-row">
+        <span className="list-arrow">
+          {childNodes ? <img className="list-arrow-icon" src={"/"} /> : null}
+        </span>
+        <span className="list-icon">
+          <img src={"/"} />
+        </span>
+        <span className="list-name">{node.name}</span>
+        {childErrorsCount >= 1 && <span className="dot"></span>}
+        {errorObject.errors.length >= 1 && (
+          <span className="badge">{errorObject.errors.length}</span>
+        )}
+      </div>
+      {childNodes ? <ul className="sub-list">{childNodes}</ul> : null}
+    </li>
+  );
+}
diff --git a/app/lib/components/ui.css b/app/lib/components/ui.css
new file mode 100644
index 00000000..25cca3d9
--- /dev/null
+++ b/app/lib/components/ui.css
@@ -0,0 +1,328 @@
+/* Overrides */
+
+.button--flex {
+  flex: 1;
+}
+
+.button--full {
+  width: 100%;
+}
+
+button:active,
+button:focus {
+  outline: none;
+}
+
+/* Generic styles */
+
+.button--icon {
+  height: 32px;
+  width: 32px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0;
+  border: none;
+  box-shadow: unset;
+  cursor: pointer;
+  font-size: 18px;
+  background: transparent;
+}
+
+.button--icon:hover {
+  background: #eee;
+}
+
+.button--icon:active {
+  transform: scale3d(0.94, 0.94, 1);
+}
+
+.settings-checkbox-group {
+  display: flex;
+  padding-top: 8px;
+}
+
+.settings-checkbox-group input {
+  margin: 2px 8px 0 0;
+}
+
+.settings-button {
+  border-radius: 8px;
+  background-color: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.8);
+}
+
+.w12 {
+  width: 12px;
+}
+
+/* Plugin specific styles */
+
+body {
+  font: 11px sans-serif;
+  font-family: system-ui;
+  margin: 0;
+  overflow: hidden;
+}
+
+#create {
+  box-shadow: none;
+  background: #18a0fb;
+  color: #fff;
+}
+
+.page {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100vw;
+  height: calc(100vh - 46px);
+}
+
+.nav {
+  padding: 16px;
+  display: flex;
+  align-content: center;
+  justify-content: flex-start;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.nav-item {
+  padding-right: 16px;
+  font-weight: 500;
+  font-size: 11px;
+  color: #b3b3b3;
+  cursor: pointer;
+}
+
+.nav-item.active {
+  color: #333333;
+}
+
+.bulk-errors-list {
+  height: calc(100vh - 46px);
+  flex: 1;
+  margin: 0;
+  padding: 16px 0 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+
+.list {
+  flex: 1;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  position: relative;
+}
+
+.list-arrow {
+  height: 32px;
+  min-width: 16px;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  flex-flow: column;
+}
+
+.list-arrow-icon {
+  opacity: 0;
+  transition: opacity 50ms ease;
+  transform: rotate(-90deg);
+}
+
+.list-item {
+  width: 100%;
+  list-style: none;
+  padding: 0;
+}
+
+.list-item ul {
+  display: none;
+}
+
+.list-item--selected > .list-flex-row {
+  background: #daebf7;
+}
+
+.list-item--selected ul {
+  background: #edf5fa;
+}
+
+.list-item--active > ul {
+  display: block;
+}
+
+.list-item--active > div > .list-arrow > .list-arrow-icon {
+  transform: rotate(0deg);
+}
+
+.list-flex-row {
+  height: 32px;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid transparent;
+  transition: border-color 100ms ease;
+  cursor: pointer;
+  position: relative;
+}
+
+.badge {
+  position: absolute;
+  top: 6px;
+  right: 16px;
+  background: #fe6262;
+  color: #fff;
+  height: 16px;
+  min-width: 16px;
+  padding: 2px;
+  border-radius: 32px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.badge.badge-em {
+  padding: 2px 4px;
+}
+
+.dot {
+  position: absolute;
+  right: 21px;
+  background: #fe6262;
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  display: block;
+}
+
+.list-flex-row:hover {
+  border-color: #18a0fb;
+}
+
+.list-flex-row:hover .list-arrow-icon {
+  opacity: 1;
+}
+
+.list-icon {
+  text-align: center;
+  width: 16px;
+  opacity: 0.6;
+}
+
+.list-icon img {
+  height: 12px;
+  width: 12px;
+}
+
+.list-name {
+  margin: 0 8px;
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 48px;
+}
+
+.sub-list {
+  /* width: calc(100% - 24px); */
+  margin: 0;
+  padding: 0 0 0 24px;
+}
+
+.frame {
+  font-weight: 400;
+}
+
+.list-wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.totals-row {
+  position: relative;
+  font-size: 12px;
+  font-weight: 400;
+  color: #333333;
+  border-top: 1px solid #e5e5e5;
+  display: flex;
+  align-items: center;
+  padding: 0 16px 0 8px;
+}
+
+.totals-row .section-title {
+  flex: 1;
+}
+
+.error-count {
+  min-width: none;
+  min-height: none;
+}
+
+.error-count.success {
+  right: 16px;
+  background: #55db9e;
+  padding: 5px 4px;
+  border-radius: 32px;
+}
+
+.actions-row {
+  padding: 12px 16px;
+  border-top: 1px solid #e5e5e5;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.actions-row button {
+  margin-right: 12px;
+}
+
+.actions-row button:last-child {
+  margin-right: 0;
+}
+
+/* Context menu */
+
+.menu {
+  position: relative;
+}
+
+.menu-trigger {
+  display: block;
+  position: relative;
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu-trigger:hover {
+  background: #eee;
+  border-radius: 16px;
+  cursor: pointer;
+}
+
+.menu-trigger img {
+  height: 20px;
+  width: 20px;
+}
+
+.menu-items {
+  position: absolute;
+  right: 0;
+  top: 32px;
+  width: 132px;
+}
+
+.menu-items .select-menu__list-item {
+  padding-left: 12px;
+}
diff --git a/app/lib/pages/lint-screen.tsx b/app/lib/pages/lint-screen.tsx
index a22251cd..082700ac 100644
--- a/app/lib/pages/lint-screen.tsx
+++ b/app/lib/pages/lint-screen.tsx
@@ -2,6 +2,7 @@ import { Button, Typography } from "@material-ui/core";
 import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks";
 import * as React from "react";
 import { Preview } from "../components/preview";
+import { TreeView } from "../components/tree-view";
 import { EK_FOCUS_REQUEST, EK_LINT_FEEDBACK } from "../constants/ek.constant";
 
 interface State {
@@ -52,6 +53,16 @@ export class LintScreen extends React.Component<any, State> {
       <>
         <Preview data={undefined} name="selected node name" />
         <ul>
+          <h1>hi</h1>
+          <TreeView
+            ignoredErrorArray={[]}
+            // activeNodeIds={props.activeNodeIds}
+            // selectedListItems={props.selectedListItems}
+            errorArray={[]}
+            onClick={() => {}}
+            key={"elfishefl"}
+            node={[{ name: "hi" }, { name: "hi" }, { name: "hi" }]}
+          />
           {feedbacks.map((item, i) => {
             return (
               <li key={i}>
diff --git a/app/package.json b/app/package.json
index 1c2ad99a..19d523d1 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,6 +22,7 @@
         "@reflect-ui/core": "0.0.2-rc.7-local",
         "@reflect-ui/lint": "0.0.5-rc",
         "@reflect.bridged.xyz/ui-generator": "0.0.1",
+        "classnames": "^2.3.1",
         "coli": "0.0.3",
         "copy-to-clipboard": "^3.3.1",
         "dart-style": "^1.3.2-dev",
diff --git a/yarn.lock b/yarn.lock
index 9c71d6c3..8e7ec5e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4731,6 +4731,11 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
+classnames@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
+  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+
 clean-css@4.2.x, clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"

From b9ccd4848161e5f76923421da7e19d6bfb049e35 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 00:35:45 +0900
Subject: [PATCH 02/36] update lint pckage

---
 packages/lint | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/lint b/packages/lint
index e1603598..49427d80 160000
--- a/packages/lint
+++ b/packages/lint
@@ -1 +1 @@
-Subproject commit e1603598db246fad1d19636b63a6c63090cdf4f3
+Subproject commit 49427d80dd49f45821624b7653b2b9498918815b

From 41606bf97c318da9c4d45a817f5b7aae3ad0ee09 Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 00:42:42 +0900
Subject: [PATCH 03/36] remove global style

---
 app/lib/components/tree-view.tsx | 1 -
 app/lib/components/ui.css        | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/lib/components/tree-view.tsx b/app/lib/components/tree-view.tsx
index adc74871..983ec070 100644
--- a/app/lib/components/tree-view.tsx
+++ b/app/lib/components/tree-view.tsx
@@ -1,5 +1,4 @@
 import * as React from "react";
-import "./ui.css";
 
 export function TreeView(props) {
   const { onClick } = props;
diff --git a/app/lib/components/ui.css b/app/lib/components/ui.css
index 25cca3d9..1838795f 100644
--- a/app/lib/components/ui.css
+++ b/app/lib/components/ui.css
@@ -60,12 +60,12 @@ button:focus {
 
 /* Plugin specific styles */
 
-body {
+/* body {
   font: 11px sans-serif;
   font-family: system-ui;
   margin: 0;
   overflow: hidden;
-}
+} */
 
 #create {
   box-shadow: none;

From 9477ee4537b88008a2f589e5b58f820123f0b697 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 00:50:32 +0900
Subject: [PATCH 04/36] re-org lint related components under /app/lint

---
 app/lib/lint/README.md                                        | 3 +++
 app/lib/lint/group-by/README.md                               | 4 ++++
 app/lib/lint/group-by/index.ts                                | 1 +
 app/lib/lint/hooks/README.md                                  | 1 +
 app/lib/lint/index.ts                                         | 2 ++
 app/lib/lint/lint-item-row/index.ts                           | 1 +
 app/lib/{components => lint/lint-item-row}/lint-item-row.tsx  | 0
 app/lib/lint/lint-list-view/index.ts                          | 4 ++++
 app/lib/lint/lint-tree-view/index.ts                          | 1 +
 .../tree-view.tsx => lint/lint-tree-view/lint-tree-view.tsx}  | 4 ++--
 app/lib/pages/lint-screen.tsx                                 | 4 ++--
 11 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 app/lib/lint/README.md
 create mode 100644 app/lib/lint/group-by/README.md
 create mode 100644 app/lib/lint/group-by/index.ts
 create mode 100644 app/lib/lint/hooks/README.md
 create mode 100644 app/lib/lint/index.ts
 create mode 100644 app/lib/lint/lint-item-row/index.ts
 rename app/lib/{components => lint/lint-item-row}/lint-item-row.tsx (100%)
 create mode 100644 app/lib/lint/lint-list-view/index.ts
 create mode 100644 app/lib/lint/lint-tree-view/index.ts
 rename app/lib/{components/tree-view.tsx => lint/lint-tree-view/lint-tree-view.tsx} (97%)

diff --git a/app/lib/lint/README.md b/app/lib/lint/README.md
new file mode 100644
index 00000000..de05775d
--- /dev/null
+++ b/app/lib/lint/README.md
@@ -0,0 +1,3 @@
+# Lint related components & logics
+
+> General Shared components will be placed under /components. only lint-specific-related components shall be placed under this directory.
diff --git a/app/lib/lint/group-by/README.md b/app/lib/lint/group-by/README.md
new file mode 100644
index 00000000..fbee8a8f
--- /dev/null
+++ b/app/lib/lint/group-by/README.md
@@ -0,0 +1,4 @@
+# Lint group by logics
+
+- 1. group by errors
+- 2. group by none - all as list
diff --git a/app/lib/lint/group-by/index.ts b/app/lib/lint/group-by/index.ts
new file mode 100644
index 00000000..6c8ea4d0
--- /dev/null
+++ b/app/lib/lint/group-by/index.ts
@@ -0,0 +1 @@
+// TODO:
diff --git a/app/lib/lint/hooks/README.md b/app/lib/lint/hooks/README.md
new file mode 100644
index 00000000..f6d6a89c
--- /dev/null
+++ b/app/lib/lint/hooks/README.md
@@ -0,0 +1 @@
+# Lint related hooks
diff --git a/app/lib/lint/index.ts b/app/lib/lint/index.ts
new file mode 100644
index 00000000..27973214
--- /dev/null
+++ b/app/lib/lint/index.ts
@@ -0,0 +1,2 @@
+export * from "./lint-item-row";
+export * from "./lint-tree-view";
diff --git a/app/lib/lint/lint-item-row/index.ts b/app/lib/lint/lint-item-row/index.ts
new file mode 100644
index 00000000..b94d5f2b
--- /dev/null
+++ b/app/lib/lint/lint-item-row/index.ts
@@ -0,0 +1 @@
+export * from "./lint-item-row"
\ No newline at end of file
diff --git a/app/lib/components/lint-item-row.tsx b/app/lib/lint/lint-item-row/lint-item-row.tsx
similarity index 100%
rename from app/lib/components/lint-item-row.tsx
rename to app/lib/lint/lint-item-row/lint-item-row.tsx
diff --git a/app/lib/lint/lint-list-view/index.ts b/app/lib/lint/lint-list-view/index.ts
new file mode 100644
index 00000000..b3bc2a07
--- /dev/null
+++ b/app/lib/lint/lint-list-view/index.ts
@@ -0,0 +1,4 @@
+// TODO:
+
+/** @deprecated this is dummy. replace me */
+export const dummy = "dummy";
diff --git a/app/lib/lint/lint-tree-view/index.ts b/app/lib/lint/lint-tree-view/index.ts
new file mode 100644
index 00000000..67822b6a
--- /dev/null
+++ b/app/lib/lint/lint-tree-view/index.ts
@@ -0,0 +1 @@
+export * from "./lint-tree-view";
diff --git a/app/lib/components/tree-view.tsx b/app/lib/lint/lint-tree-view/lint-tree-view.tsx
similarity index 97%
rename from app/lib/components/tree-view.tsx
rename to app/lib/lint/lint-tree-view/lint-tree-view.tsx
index 983ec070..d6816e3c 100644
--- a/app/lib/components/tree-view.tsx
+++ b/app/lib/lint/lint-tree-view/lint-tree-view.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 
-export function TreeView(props) {
+export function LintTreeView(props) {
   const { onClick } = props;
   const node = props.node;
   let childNodes = null;
@@ -22,7 +22,7 @@ export function TreeView(props) {
     let reversedArray = node.children.slice().reverse();
     childNodes = reversedArray.map(function (childNode) {
       return (
-        <TreeView
+        <LintTreeView
           ignoredErrorArray={[]}
           // activeNodeIds={props.activeNodeIds}
           // selectedListItems={props.selectedListItems}
diff --git a/app/lib/pages/lint-screen.tsx b/app/lib/pages/lint-screen.tsx
index 082700ac..d5af3570 100644
--- a/app/lib/pages/lint-screen.tsx
+++ b/app/lib/pages/lint-screen.tsx
@@ -2,7 +2,7 @@ import { Button, Typography } from "@material-ui/core";
 import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks";
 import * as React from "react";
 import { Preview } from "../components/preview";
-import { TreeView } from "../components/tree-view";
+import { LintTreeView } from "../lint";
 import { EK_FOCUS_REQUEST, EK_LINT_FEEDBACK } from "../constants/ek.constant";
 
 interface State {
@@ -54,7 +54,7 @@ export class LintScreen extends React.Component<any, State> {
         <Preview data={undefined} name="selected node name" />
         <ul>
           <h1>hi</h1>
-          <TreeView
+          <LintTreeView
             ignoredErrorArray={[]}
             // activeNodeIds={props.activeNodeIds}
             // selectedListItems={props.selectedListItems}

From c78ad6b56dfdba35525551d2ea3d7197ca612326 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 00:54:58 +0900
Subject: [PATCH 05/36] update func name "bridged" to "grida"

---
 app/lib/components/schema-editor/schema-editor.tsx    | 2 +-
 app/lib/utils/plugin-provider/plugin-app-sdk/index.ts | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/lib/components/schema-editor/schema-editor.tsx b/app/lib/components/schema-editor/schema-editor.tsx
index 465a42ea..db46c6e7 100644
--- a/app/lib/components/schema-editor/schema-editor.tsx
+++ b/app/lib/components/schema-editor/schema-editor.tsx
@@ -190,7 +190,7 @@ function _Mode_Component(props: { node: nodes.light.IReflectNodeReference }) {
   useEffect(() => {
     Promise.all(
       grandchilds.map((c) => {
-        return PluginSdk.fetchMetadata_bridged<ISingleLayerProperty>(
+        return PluginSdk.fetchMetadata_grida<ISingleLayerProperty>(
           c.id,
           "layer-property-data"
         );
diff --git a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
index 5b0c1fe2..70df6210 100644
--- a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
@@ -65,8 +65,9 @@ export class PluginSdk {
     throw "not implmtd";
   }
 
-  // endregion networ api
+  // endregion network api
 
+  //
   // region metadata
   static updateMetadata(request: NodeMetaUpdateRequest) {
     return this.request({
@@ -77,9 +78,9 @@ export class PluginSdk {
   }
 
   /**
-   * fetches the metadata with bridged default namespace provided.
+   * fetches the metadata with grida default namespace provided.
    */
-  static async fetchMetadata_bridged<T = any>(
+  static async fetchMetadata_grida<T = any>(
     on: string,
     key: string
   ): Promise<T> {

From 79953327e019c4b3cf47ee537d649ea15b549a57 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 01:00:31 +0900
Subject: [PATCH 06/36] add shared in-memorry cache store

---
 .../plugin-app-sdk/_shared-storage-cache.ts   | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts

diff --git a/app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts b/app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts
new file mode 100644
index 00000000..f4b62a03
--- /dev/null
+++ b/app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts
@@ -0,0 +1,23 @@
+/** Memory cache for saving data in memory before actual IO completes. */
+export class _SharedStorageCache {
+  constructor(readonly id: string) {}
+
+  private __cache: Map<string, any> = new Map();
+
+  setCache<T = string>(key: string, value: T) {
+    this.__cache.set(key, value);
+  }
+
+  getCache<T = string>(key: string): T {
+    return this.__cache.get(key) as T;
+  }
+
+  /** clears all cahce allocated */
+  clearCache() {
+    this.__cache = new Map();
+  }
+
+  removeCache(key: string) {
+    this.__cache.delete(key);
+  }
+}

From 583182dd17b451135acaf75e3132aea7bc434785 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 01:17:37 +0900
Subject: [PATCH 07/36] add plugin-sdk get/set item interface & event call.
 (reveiver not ready)

---
 app/lib/utils/plugin-provider/events.ts       | 17 ++++++
 .../plugin-provider/interfaces/meta/index.ts  |  3 +
 .../interfaces/storage/index.ts               |  2 +
 .../interfaces/storage/storage.request.ts     | 19 +++++++
 .../interfaces/storage/storage.response.ts    |  3 +
 .../plugin-app-sdk/_shared-storage-cache.ts   |  4 ++
 .../plugin-provider/plugin-app-sdk/index.ts   | 56 ++++++++++++++++++-
 7 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 app/lib/utils/plugin-provider/interfaces/meta/index.ts
 create mode 100644 app/lib/utils/plugin-provider/interfaces/storage/index.ts
 create mode 100644 app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts
 create mode 100644 app/lib/utils/plugin-provider/interfaces/storage/storage.response.ts

diff --git a/app/lib/utils/plugin-provider/events.ts b/app/lib/utils/plugin-provider/events.ts
index daa7b079..cf01ec6d 100644
--- a/app/lib/utils/plugin-provider/events.ts
+++ b/app/lib/utils/plugin-provider/events.ts
@@ -28,6 +28,23 @@ export const PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META =
   "assistant/tools/node-meta-editor/update/main-component";
 // endregion meta
 
+// region storage
+export const PLUGIN_SDK_NS_STORAGE = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/storage`;
+export const PLUGIN_SDK_EK_REQUEST_STORAGE_SET_ITEM =
+  "assistant/storage/set-item";
+export const PLUGIN_SDK_EK_REQUEST_STORAGE_GET_ITEM =
+  "assistant/storage/get-item";
+export const PLUGIN_SDK_EK_REQUEST_STORAGE_REMOVE_ITEM =
+  "assistant/storage/remove-item";
+export const PLUGIN_SDK_EK_REQUEST_STORAGE_CLEAR = "assistant/storage/clear";
+export const PLUGIN_SDK_EK_STORAGE_ALIAS = {
+  set: PLUGIN_SDK_EK_REQUEST_STORAGE_SET_ITEM,
+  get: PLUGIN_SDK_EK_REQUEST_STORAGE_GET_ITEM,
+  remove: PLUGIN_SDK_EK_REQUEST_STORAGE_REMOVE_ITEM,
+  clear: PLUGIN_SDK_EK_REQUEST_STORAGE_CLEAR,
+};
+// endregion storage
+
 // region notify
 export const PLUGIN_SDK_NS_NOTIFY_API = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/notify`;
 export const PLUGIN_SDK_EK_SIMPLE_NOTIFY = "notify";
diff --git a/app/lib/utils/plugin-provider/interfaces/meta/index.ts b/app/lib/utils/plugin-provider/interfaces/meta/index.ts
new file mode 100644
index 00000000..45f4c3ef
--- /dev/null
+++ b/app/lib/utils/plugin-provider/interfaces/meta/index.ts
@@ -0,0 +1,3 @@
+export * from "./meta.requests";
+// export * from "./meta.responses"; // empty
+export * from "./meta.types";
diff --git a/app/lib/utils/plugin-provider/interfaces/storage/index.ts b/app/lib/utils/plugin-provider/interfaces/storage/index.ts
new file mode 100644
index 00000000..f77187ae
--- /dev/null
+++ b/app/lib/utils/plugin-provider/interfaces/storage/index.ts
@@ -0,0 +1,2 @@
+export * from "./storage.request";
+export * from "./storage.response";
diff --git a/app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts b/app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts
new file mode 100644
index 00000000..7eb203ff
--- /dev/null
+++ b/app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts
@@ -0,0 +1,19 @@
+export type StorageRequest = StorageSetItemRequest | StorageGetItemRequest;
+export interface StorageSetItemRequest<T = string> {
+  type: "set-item";
+  key: string;
+  /** value must be json serializable. (without circular reference.) */
+  value: T;
+}
+
+export interface StorageGetItemRequest<T = string> {
+  type: "get-item";
+  key: string;
+  /** value must be json serializable. (without circular reference.) */
+  value: T;
+}
+
+export interface StorageRemoveItemRequest {
+  type: "remove-item";
+  key: string;
+}
diff --git a/app/lib/utils/plugin-provider/interfaces/storage/storage.response.ts b/app/lib/utils/plugin-provider/interfaces/storage/storage.response.ts
new file mode 100644
index 00000000..80af210b
--- /dev/null
+++ b/app/lib/utils/plugin-provider/interfaces/storage/storage.response.ts
@@ -0,0 +1,3 @@
+export interface StorageGetItemResponse<T = string> {
+  value: T;
+}
diff --git a/app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts b/app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts
index f4b62a03..5df9dfeb 100644
--- a/app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts
+++ b/app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts
@@ -4,6 +4,10 @@ export class _SharedStorageCache {
 
   private __cache: Map<string, any> = new Map();
 
+  hasCache(key: string): boolean {
+    return this.__cache.has(key);
+  }
+
   setCache<T = string>(key: string, value: T) {
     this.__cache.set(key, value);
   }
diff --git a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
index 70df6210..3d35fad2 100644
--- a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
@@ -12,19 +12,31 @@ import {
   PLUGIN_SDK_NS_NOTIFY_API,
   PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META,
   PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META,
+  PLUGIN_SDK_NS_STORAGE,
+  PLUGIN_SDK_EK_STORAGE_ALIAS,
   TransportPluginEvent,
 } from "../events";
 import {
   BatchMetaFetchRequest,
   NodeMetaFetchRequest,
   NodeMetaUpdateRequest,
-} from "../interfaces/meta/meta.requests";
+} from "../interfaces/meta";
+import {
+  StorageSetItemRequest,
+  StorageGetItemRequest,
+  StorageGetItemResponse,
+} from "../interfaces/storage";
 import { NotifyRequest } from "../interfaces/notify/notify.requests";
 import { DragAndDropOnCanvasRequest } from "../interfaces/dragdrop/dragdrop.requests";
 import type { ReflectSceneNode } from "@design-sdk/core/nodes";
 import { reqid } from "../_id";
 import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../../constants";
 
+import { _SharedStorageCache } from "./_shared-storage-cache";
+
+const __main_plugin_sdk_instance_storage_cache = new _SharedStorageCache(
+  "co.grida.assistant"
+);
 export class PluginSdk {
   static window: Window;
   static initializeWindow(window: Window) {
@@ -67,6 +79,48 @@ export class PluginSdk {
 
   // endregion network api
 
+  //
+  // region storage api
+  static setItem<T = string>(key: string, value: T) {
+    __main_plugin_sdk_instance_storage_cache.setCache(
+      key,
+      value
+    ); /* 1. set cache */
+
+    /* 2. send set request */
+    this.request({
+      namespace: PLUGIN_SDK_NS_STORAGE,
+      key: PLUGIN_SDK_EK_STORAGE_ALIAS.set,
+      data: <StorageSetItemRequest<T>>{
+        key: key,
+        value: value,
+      },
+    }).finally(() => {
+      __main_plugin_sdk_instance_storage_cache.removeCache(
+        key
+      ); /* 3. remove cache after saving complete */
+    });
+  }
+
+  static async getItem<T = string>(key: string): Promise<T> {
+    const _has_cached = __main_plugin_sdk_instance_storage_cache.hasCache(key);
+    if (_has_cached) {
+      return __main_plugin_sdk_instance_storage_cache.getCache<T>(key);
+    } else {
+      const _resp = await this.request<StorageGetItemResponse<T>>({
+        namespace: PLUGIN_SDK_NS_STORAGE,
+        key: PLUGIN_SDK_EK_STORAGE_ALIAS.get,
+        data: <StorageGetItemRequest<T>>{
+          key: key,
+        },
+      });
+      return _resp.value;
+    }
+  }
+
+  // endregion storage api
+  //
+
   //
   // region metadata
   static updateMetadata(request: NodeMetaUpdateRequest) {

From b2de3e59ea6749da0435f096eafa4cc4311dad4d Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 01:49:23 +0900
Subject: [PATCH 08/36] figma & web storage io implemented with event callback
 from `plugin service provider`

---
 app/lib/storage/index.ts                      |  24 ----
 app/lib/storage/web.storage.ts                |  16 ---
 .../interfaces/storage/storage.request.ts     |   2 -
 .../plugin-provider/plugin-service/index.ts   | 112 ++++++++++++------
 .../plugin-provider}/storage/README.md        |   0
 .../plugin-provider}/storage/figma.storage.ts |  10 +-
 .../utils/plugin-provider/storage/index.ts    |   4 +
 .../plugin-provider}/storage/istorage.ts      |   2 +-
 .../plugin-provider/storage/payload-handle.ts |   6 +
 .../storage/universal.storage.ts              |   1 +
 .../plugin-provider/storage/web.storage.ts    |  15 +++
 11 files changed, 105 insertions(+), 87 deletions(-)
 delete mode 100644 app/lib/storage/index.ts
 delete mode 100644 app/lib/storage/web.storage.ts
 rename app/lib/{ => utils/plugin-provider}/storage/README.md (100%)
 rename app/lib/{ => utils/plugin-provider}/storage/figma.storage.ts (59%)
 create mode 100644 app/lib/utils/plugin-provider/storage/index.ts
 rename app/lib/{ => utils/plugin-provider}/storage/istorage.ts (65%)
 create mode 100644 app/lib/utils/plugin-provider/storage/payload-handle.ts
 rename app/lib/{ => utils/plugin-provider}/storage/universal.storage.ts (86%)
 create mode 100644 app/lib/utils/plugin-provider/storage/web.storage.ts

diff --git a/app/lib/storage/index.ts b/app/lib/storage/index.ts
deleted file mode 100644
index d1953e88..00000000
--- a/app/lib/storage/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-//
-// where to get platform from ?
-
-//
-import { WebStorage } from "./web.storage";
-const platform = "figma"; // this is static for now.
-
-export async function setItem(key: string, value: any): Promise<void> {
-  try {
-    // TODO: support figma client storage
-    new WebStorage().setItem(key, value);
-  } catch (_) {
-    //
-  }
-}
-
-export async function getItem<T>(key: string): Promise<T> {
-  try {
-    // TODO: support figma client storage
-    return new WebStorage<T>().getItem(key);
-  } catch (_) {
-    //
-  }
-}
diff --git a/app/lib/storage/web.storage.ts b/app/lib/storage/web.storage.ts
deleted file mode 100644
index 0be37234..00000000
--- a/app/lib/storage/web.storage.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { IStorage } from "./istorage";
-
-/**
- * web storage using general localstorage
- */
-export class WebStorage<T> implements IStorage<T> {
-  getItem(key: string): T {
-    const parse = window.localStorage.getItem(key);
-    return JSON.parse(parse);
-  }
-
-  setItem(key: string, value: T) {
-    const payload = JSON.stringify(value);
-    return window.localStorage.setItem(key, payload);
-  }
-}
diff --git a/app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts b/app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts
index 7eb203ff..7f686cad 100644
--- a/app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts
+++ b/app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts
@@ -9,8 +9,6 @@ export interface StorageSetItemRequest<T = string> {
 export interface StorageGetItemRequest<T = string> {
   type: "get-item";
   key: string;
-  /** value must be json serializable. (without circular reference.) */
-  value: T;
 }
 
 export interface StorageRemoveItemRequest {
diff --git a/app/lib/utils/plugin-provider/plugin-service/index.ts b/app/lib/utils/plugin-provider/plugin-service/index.ts
index 623b49df..410dc9d7 100644
--- a/app/lib/utils/plugin-provider/plugin-service/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-service/index.ts
@@ -13,6 +13,7 @@ import {
   PLUGIN_SDK_NS_NOTIFY_API,
   PLUGIN_SDK_NS_REMOTE_API,
   PLUGIN_SDK_NS_RESPONSE_ALL,
+  PLUGIN_SDK_NS_STORAGE,
   PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META,
   PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META,
   TransportPluginEvent,
@@ -28,6 +29,7 @@ import {
   NodeMetaUpdateRequest,
 } from "../interfaces/meta/meta.requests";
 import { NotifyRequest } from "../interfaces/notify/notify.requests";
+import { WebStorage, FigmaStorage, IStorage } from "../storage";
 
 // TODO - make it universal
 import { Figma, figma } from "@design-sdk/figma";
@@ -36,6 +38,7 @@ import {
   TargetPlatform,
   TARGET_PLATFORM,
 } from "../../plugin-init/init-target-platform";
+import { StorageGetItemResponse, StorageRequest } from "../interfaces/storage";
 interface HanderProps<T = any> {
   id: string;
   key: string;
@@ -122,6 +125,12 @@ export class PluginSdkService {
       return true;
     }
 
+    // storage
+    if (event.namespace == PLUGIN_SDK_NS_STORAGE) {
+      handleStorageEvent(handerProps);
+      return true;
+    }
+
     // remote api call
     else if (event.namespace == PLUGIN_SDK_NS_REMOTE_API) {
       handleRemoteApiEvent(handerProps);
@@ -289,6 +298,70 @@ export function handleNotify(props: HanderProps<NotifyRequest>) {
   response(props.id, true);
 }
 
+function handleStorageEvent(props: HanderProps<StorageRequest>) {
+  const _get_dedicated_storage = (): IStorage => {
+    switch (TARGET_PLATFORM) {
+      case TargetPlatform.webdev: {
+        return new WebStorage();
+      }
+      case TargetPlatform.figma: {
+        return new FigmaStorage();
+      }
+    }
+  };
+
+  const _storage = _get_dedicated_storage();
+  switch (props.data.type) {
+    case "get-item":
+      _storage.getItem(props.data.key).then((d) => {
+        response<StorageGetItemResponse>(props.id, { value: d });
+      });
+      break;
+    case "set-item":
+      _storage.setItem(props.data.key, props.data.value).then(() => {
+        response(props.id, true); // setting data to storage does not require response data payload (using `true`.).
+      });
+      break;
+  }
+}
+
+function handleDragDropped(props: HanderProps<DragAndDropOnCanvasRequest>) {
+  console.log("handling drop event", props.data);
+  const { dropPosition, windowSize, offset, itemSize, eventKey, customData } =
+    props.data;
+
+  // Getting the position and size of the visible area of the canvas.
+  const bounds = figma.viewport.bounds;
+
+  // Getting the zoom level
+  const zoom = figma.viewport.zoom;
+
+  // There are two states of the Figma interface: With or without the UI (toolbar + left and right panes)
+  // The calculations would be slightly different, depending on whether the UI is shown.
+  // So to determine if the UI is shown, we'll be comparing the bounds to the window's width.
+  // Math.round is used here because sometimes bounds.width * zoom may return a floating point number very close but not exactly the window width.
+  const hasUI = Math.round(bounds.width * zoom) !== windowSize.width;
+
+  // Since the left pane is resizable, we need to get its width by subtracting the right pane and the canvas width from the window width.
+  const leftPaneWidth = windowSize.width - bounds.width * zoom - 240;
+
+  // Getting the position of the cursor relative to the top-left corner of the canvas.
+  const xFromCanvas = hasUI
+    ? dropPosition.clientX - leftPaneWidth
+    : dropPosition.clientX;
+  const yFromCanvas = hasUI ? dropPosition.clientY - 40 : dropPosition.clientY;
+
+  // The canvas position of the drop point can be calculated using the following:
+  const x = bounds.x + xFromCanvas / zoom - offset.x;
+  const y = bounds.y + yFromCanvas / zoom - offset.y;
+
+  PluginSdkService.handleDragAndDropEvent(eventKey, customData, { x: x, y: y });
+}
+
+///
+/// -------------------------- footer response section ----------------------------
+///
+
 function response<T = any>(
   requestId: string,
   data: T,
@@ -324,42 +397,3 @@ function response<T = any>(
  * @param withEvent
  */
 function sync(withEvent: TransportPluginEvent) {}
-
-function handleDragDropped(props: HanderProps<DragAndDropOnCanvasRequest>) {
-  console.log("handling drop event", props.data);
-  const {
-    dropPosition,
-    windowSize,
-    offset,
-    itemSize,
-    eventKey,
-    customData,
-  } = props.data;
-
-  // Getting the position and size of the visible area of the canvas.
-  const bounds = figma.viewport.bounds;
-
-  // Getting the zoom level
-  const zoom = figma.viewport.zoom;
-
-  // There are two states of the Figma interface: With or without the UI (toolbar + left and right panes)
-  // The calculations would be slightly different, depending on whether the UI is shown.
-  // So to determine if the UI is shown, we'll be comparing the bounds to the window's width.
-  // Math.round is used here because sometimes bounds.width * zoom may return a floating point number very close but not exactly the window width.
-  const hasUI = Math.round(bounds.width * zoom) !== windowSize.width;
-
-  // Since the left pane is resizable, we need to get its width by subtracting the right pane and the canvas width from the window width.
-  const leftPaneWidth = windowSize.width - bounds.width * zoom - 240;
-
-  // Getting the position of the cursor relative to the top-left corner of the canvas.
-  const xFromCanvas = hasUI
-    ? dropPosition.clientX - leftPaneWidth
-    : dropPosition.clientX;
-  const yFromCanvas = hasUI ? dropPosition.clientY - 40 : dropPosition.clientY;
-
-  // The canvas position of the drop point can be calculated using the following:
-  const x = bounds.x + xFromCanvas / zoom - offset.x;
-  const y = bounds.y + yFromCanvas / zoom - offset.y;
-
-  PluginSdkService.handleDragAndDropEvent(eventKey, customData, { x: x, y: y });
-}
diff --git a/app/lib/storage/README.md b/app/lib/utils/plugin-provider/storage/README.md
similarity index 100%
rename from app/lib/storage/README.md
rename to app/lib/utils/plugin-provider/storage/README.md
diff --git a/app/lib/storage/figma.storage.ts b/app/lib/utils/plugin-provider/storage/figma.storage.ts
similarity index 59%
rename from app/lib/storage/figma.storage.ts
rename to app/lib/utils/plugin-provider/storage/figma.storage.ts
index 60c4a3b2..ea773e88 100644
--- a/app/lib/storage/figma.storage.ts
+++ b/app/lib/utils/plugin-provider/storage/figma.storage.ts
@@ -1,14 +1,14 @@
 import { IStorage } from "./istorage";
-
+import { encode, decode } from "./payload-handle";
 /**
  * storage on figma platform using `figma.clientStorage`
  */
 export class FigmaStorage<T> implements IStorage<T> {
-  async getItem(key: string): Promise<T> {
-    return (await figma.clientStorage.getAsync(key)) as T;
+  async setItem<T>(key: string, value: T) {
+    await figma.clientStorage.setAsync(key, encode(value));
   }
 
-  async setItem<T>(key: string, value: T) {
-    await figma.clientStorage.setAsync(key, value);
+  async getItem(key: string): Promise<T> {
+    return decode<T>(await figma.clientStorage.getAsync(key));
   }
 }
diff --git a/app/lib/utils/plugin-provider/storage/index.ts b/app/lib/utils/plugin-provider/storage/index.ts
new file mode 100644
index 00000000..b80276d3
--- /dev/null
+++ b/app/lib/utils/plugin-provider/storage/index.ts
@@ -0,0 +1,4 @@
+export * from "./web.storage";
+export * from "./figma.storage";
+export type { IStorage } from "./istorage";
+// do not export universal storage until it is fullly implemented
diff --git a/app/lib/storage/istorage.ts b/app/lib/utils/plugin-provider/storage/istorage.ts
similarity index 65%
rename from app/lib/storage/istorage.ts
rename to app/lib/utils/plugin-provider/storage/istorage.ts
index 0ccf9dc6..8f26f55c 100644
--- a/app/lib/storage/istorage.ts
+++ b/app/lib/utils/plugin-provider/storage/istorage.ts
@@ -1,4 +1,4 @@
 export interface IStorage<T = string> {
-  getItem(key: string): Promise<T> | T;
+  getItem(key: string): Promise<T>;
   setItem(key: string, value: T);
 }
diff --git a/app/lib/utils/plugin-provider/storage/payload-handle.ts b/app/lib/utils/plugin-provider/storage/payload-handle.ts
new file mode 100644
index 00000000..eca4c973
--- /dev/null
+++ b/app/lib/utils/plugin-provider/storage/payload-handle.ts
@@ -0,0 +1,6 @@
+export function encode<T = string>(payload: T): string {
+  return JSON.stringify(payload);
+}
+export function decode<T>(payload: string): T {
+  return JSON.parse(payload) as T;
+}
diff --git a/app/lib/storage/universal.storage.ts b/app/lib/utils/plugin-provider/storage/universal.storage.ts
similarity index 86%
rename from app/lib/storage/universal.storage.ts
rename to app/lib/utils/plugin-provider/storage/universal.storage.ts
index 53826d46..e926f47b 100644
--- a/app/lib/storage/universal.storage.ts
+++ b/app/lib/utils/plugin-provider/storage/universal.storage.ts
@@ -1,5 +1,6 @@
 import { IStorage } from "./istorage";
 
+/** @deprecated not implemented. */
 export class UniversalStorage implements IStorage {
   // storage cache
   setItem(key: string, value: string) {
diff --git a/app/lib/utils/plugin-provider/storage/web.storage.ts b/app/lib/utils/plugin-provider/storage/web.storage.ts
new file mode 100644
index 00000000..584211e3
--- /dev/null
+++ b/app/lib/utils/plugin-provider/storage/web.storage.ts
@@ -0,0 +1,15 @@
+import { IStorage } from "./istorage";
+import { encode, decode } from "./payload-handle";
+
+/**
+ * web storage using general localstorage
+ */
+export class WebStorage<T> implements IStorage<T> {
+  getItem(key: string): Promise<T> {
+    return decode(window.localStorage.getItem(key));
+  }
+
+  setItem(key: string, value: T) {
+    window.localStorage.setItem(key, encode(value));
+  }
+}

From 467a65579e381d0b00e6cb5e35b436f4fa7dd78a Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 01:57:13 +0900
Subject: [PATCH 09/36] update token "bridged" -> "grida"

---
 app/lib/utils/plugin-provider/events.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/lib/utils/plugin-provider/events.ts b/app/lib/utils/plugin-provider/events.ts
index cf01ec6d..97b67349 100644
--- a/app/lib/utils/plugin-provider/events.ts
+++ b/app/lib/utils/plugin-provider/events.ts
@@ -1,6 +1,6 @@
-export const PLUGIN_SDK_NAMESPACE_BASE_TOKEN = "bridged";
-export const PLUGIN_SDK_NS_RESPONSE_ALL = "bridged/response/*";
-export const PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL = "bridged/app/request/*";
+export const PLUGIN_SDK_NAMESPACE_BASE_TOKEN = "grida";
+export const PLUGIN_SDK_NS_RESPONSE_ALL = "grida/response/*";
+export const PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL = "grida/app/request/*";
 export const PLC_REMOTE_API_REQ = "pugin-consumer/remote-api/request";
 export const PLC_REMOTE_API_RES = "pugin-consumer/remote-api/response";
 export const PLUGIN_SDK_NS_REMOTE_API = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/remote-api`;

From 28c20f834643f932066d0b15057146e581aa9d66 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 01:58:33 +0900
Subject: [PATCH 10/36] update safe token `__`

---
 app/lib/utils/plugin-provider/events.ts          | 16 ++++++++--------
 .../plugin-provider/plugin-service/index.ts      |  4 ++--
 .../utils/plugin-provider/pugin-app/index.tsx    |  5 ++---
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/app/lib/utils/plugin-provider/events.ts b/app/lib/utils/plugin-provider/events.ts
index 97b67349..e32338d2 100644
--- a/app/lib/utils/plugin-provider/events.ts
+++ b/app/lib/utils/plugin-provider/events.ts
@@ -1,17 +1,17 @@
-export const PLUGIN_SDK_NAMESPACE_BASE_TOKEN = "grida";
+export const __PLUGIN_SDK_NAMESPACE_BASE_TOKEN = "grida";
 export const PLUGIN_SDK_NS_RESPONSE_ALL = "grida/response/*";
 export const PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL = "grida/app/request/*";
 export const PLC_REMOTE_API_REQ = "pugin-consumer/remote-api/request";
 export const PLC_REMOTE_API_RES = "pugin-consumer/remote-api/response";
-export const PLUGIN_SDK_NS_REMOTE_API = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/remote-api`;
-export const PLUGIN_SDK_NS_GENERAL_STATE_DATA = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/general-state-data`;
+export const PLUGIN_SDK_NS_REMOTE_API = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/remote-api`;
+export const PLUGIN_SDK_NS_GENERAL_STATE_DATA = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/general-state-data`;
 
 // region sync
-export const PLUGIN_SDK_NS_SYNC = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/sync`;
+export const PLUGIN_SDK_NS_SYNC = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/sync`;
 // endregion sync
 
 // region meta
-export const PLUGIN_SDK_NS_META_API = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/meta`;
+export const PLUGIN_SDK_NS_META_API = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/meta`;
 export const PLUGIN_SDK_EK_BATCH_META_UPDATE =
   "assistant/tools/batch-meta-editor/update";
 export const PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META =
@@ -29,7 +29,7 @@ export const PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META =
 // endregion meta
 
 // region storage
-export const PLUGIN_SDK_NS_STORAGE = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/storage`;
+export const PLUGIN_SDK_NS_STORAGE = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/storage`;
 export const PLUGIN_SDK_EK_REQUEST_STORAGE_SET_ITEM =
   "assistant/storage/set-item";
 export const PLUGIN_SDK_EK_REQUEST_STORAGE_GET_ITEM =
@@ -46,14 +46,14 @@ export const PLUGIN_SDK_EK_STORAGE_ALIAS = {
 // endregion storage
 
 // region notify
-export const PLUGIN_SDK_NS_NOTIFY_API = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/notify`;
+export const PLUGIN_SDK_NS_NOTIFY_API = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/notify`;
 export const PLUGIN_SDK_EK_SIMPLE_NOTIFY = "notify";
 export const PLUGIN_SDK_EK_NOTIFY_COPIED = "notify-copied";
 
 // endregion notify
 
 // region canvas
-export const PLUGIN_SDK_NS_DRAG_AND_DROP = `${PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/drag-and-drop`;
+export const PLUGIN_SDK_NS_DRAG_AND_DROP = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/drag-and-drop`;
 export const PLUGIN_SDK_EK_DRAG_AND_DROPPED = `dropped on canvas`;
 // endregion canvas
 
diff --git a/app/lib/utils/plugin-provider/plugin-service/index.ts b/app/lib/utils/plugin-provider/plugin-service/index.ts
index 410dc9d7..7d703823 100644
--- a/app/lib/utils/plugin-provider/plugin-service/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-service/index.ts
@@ -6,7 +6,7 @@ import {
   PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META,
   PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META,
   PLUGIN_SDK_EK_SIMPLE_NOTIFY,
-  PLUGIN_SDK_NAMESPACE_BASE_TOKEN,
+  __PLUGIN_SDK_NAMESPACE_BASE_TOKEN,
   PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL,
   PLUGIN_SDK_NS_DRAG_AND_DROP,
   PLUGIN_SDK_NS_META_API,
@@ -106,7 +106,7 @@ export class PluginSdkService {
       return handleInternalEvent(event);
     }
 
-    if (!event.namespace.includes(PLUGIN_SDK_NAMESPACE_BASE_TOKEN)) {
+    if (!event.namespace.includes(__PLUGIN_SDK_NAMESPACE_BASE_TOKEN)) {
       console.warn(
         `the event is passed to PluginSdkServer, but the namespace or structure does not meet the standard interface. the givven event was - `,
         event
diff --git a/app/lib/utils/plugin-provider/pugin-app/index.tsx b/app/lib/utils/plugin-provider/pugin-app/index.tsx
index 7876d80e..c329fe45 100644
--- a/app/lib/utils/plugin-provider/pugin-app/index.tsx
+++ b/app/lib/utils/plugin-provider/pugin-app/index.tsx
@@ -2,9 +2,8 @@ import React, { useEffect } from "react";
 import { useSetRecoilState } from "recoil";
 import Axios from "axios";
 import {
-  PLC_REMOTE_API_REQ,
   PLC_REMOTE_API_RES,
-  PLUGIN_SDK_NAMESPACE_BASE_TOKEN,
+  __PLUGIN_SDK_NAMESPACE_BASE_TOKEN,
   PLUGIN_SDK_NS_GENERAL_STATE_DATA,
   PLUGIN_SDK_NS_REMOTE_API,
   TransportPluginEvent,
@@ -32,7 +31,7 @@ export function PluginApp(props: { platform: TargetPlatform; children: any }) {
         return;
       }
 
-      if (!message.namespace.includes(PLUGIN_SDK_NAMESPACE_BASE_TOKEN)) {
+      if (!message.namespace.includes(__PLUGIN_SDK_NAMESPACE_BASE_TOKEN)) {
         return;
       }
       // endregion validate

From e2c9d891358a0411710a6be19b95c43e761cda37 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:08:48 +0900
Subject: [PATCH 11/36] update code.ts to __code.ts - event registarer

---
 app/lib/pages/tool-box/data-mapper/{code.ts => __code.ts} | 0
 app/lib/pages/tool-box/data-mapper/events.ts              | 1 -
 2 files changed, 1 deletion(-)
 rename app/lib/pages/tool-box/data-mapper/{code.ts => __code.ts} (100%)

diff --git a/app/lib/pages/tool-box/data-mapper/code.ts b/app/lib/pages/tool-box/data-mapper/__code.ts
similarity index 100%
rename from app/lib/pages/tool-box/data-mapper/code.ts
rename to app/lib/pages/tool-box/data-mapper/__code.ts
diff --git a/app/lib/pages/tool-box/data-mapper/events.ts b/app/lib/pages/tool-box/data-mapper/events.ts
index eafbdd56..e75bb374 100644
--- a/app/lib/pages/tool-box/data-mapper/events.ts
+++ b/app/lib/pages/tool-box/data-mapper/events.ts
@@ -8,7 +8,6 @@ export interface _Event_DataMapper_GoodUserInputTransfer {
 }
 
 export function fromApp(data: _Event_DataMapper_GoodUserInputTransfer) {
-  console.log("from app");
   PluginSdk.appEvent(EVKEY, data);
 }
 

From e20bea26541af155c50d49540f99c67ee5889d17 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:09:45 +0900
Subject: [PATCH 12/36] update import

---
 app/lib/utils/plugin-init/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/lib/utils/plugin-init/index.ts b/app/lib/utils/plugin-init/index.ts
index 5e9b1b35..42e5b741 100644
--- a/app/lib/utils/plugin-init/index.ts
+++ b/app/lib/utils/plugin-init/index.ts
@@ -1,2 +1,2 @@
 // DO NOT REMOVE THIS LINE
-import "../../pages/tool-box/data-mapper/code";
+import "../../pages/tool-box/data-mapper/__code";

From e0c7ea713c7990dfd2a2fedc414d7bf54b19cd79 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:16:40 +0900
Subject: [PATCH 13/36] update plugin code thread logic provider naming
 convention

---
 app/lib/lint/__plugin/index.ts                | 20 +++++++++++++++++++
 .../{__code.ts => __plugin/index.ts}          |  6 +++---
 app/lib/utils/plugin-init/index.ts            |  2 +-
 3 files changed, 24 insertions(+), 4 deletions(-)
 create mode 100644 app/lib/lint/__plugin/index.ts
 rename app/lib/pages/tool-box/data-mapper/{__code.ts => __plugin/index.ts} (97%)

diff --git a/app/lib/lint/__plugin/index.ts b/app/lib/lint/__plugin/index.ts
new file mode 100644
index 00000000..2ffcfc6b
--- /dev/null
+++ b/app/lib/lint/__plugin/index.ts
@@ -0,0 +1,20 @@
+// onService(main_cb);
+
+// // main callback
+// function main_cb(evt: _Event_DataMapper_GoodUserInputTransfer) {
+//   const datasourceNode = Figma.figma.getNodeById(
+//     evt.sourceNodeId
+//   ) as Figma.SceneNode;
+//   const targets = evt.targetNodesId.map((id) => Figma.figma.getNodeById(id));
+//   const data = extractDataFromDataSourceNode(datasourceNode);
+
+//   targets.forEach((target) => {
+//     if ("children" in target) {
+//       mapDataToSelection(target as Figma.SceneNode, data);
+//     } else {
+//       PluginSdk.notify(
+//         "ignoring since one of the selection is not a type of frame or group"
+//       );
+//     }
+//   });
+// }
diff --git a/app/lib/pages/tool-box/data-mapper/__code.ts b/app/lib/pages/tool-box/data-mapper/__plugin/index.ts
similarity index 97%
rename from app/lib/pages/tool-box/data-mapper/__code.ts
rename to app/lib/pages/tool-box/data-mapper/__plugin/index.ts
index 1e101b5c..c7c5349b 100644
--- a/app/lib/pages/tool-box/data-mapper/__code.ts
+++ b/app/lib/pages/tool-box/data-mapper/__plugin/index.ts
@@ -1,9 +1,9 @@
 import { utils, keyAnnotations } from "@design-sdk/core";
 import { variant } from "@design-sdk/figma/features";
 import { Figma } from "@design-sdk/figma";
-import { PluginSdk } from "../../../utils/plugin-provider/plugin-app-sdk";
-import { extractDataFromDataSourceNode } from "./data-source-node";
-import { onService, _Event_DataMapper_GoodUserInputTransfer } from "./events";
+import { PluginSdk } from "../../../../utils/plugin-provider/plugin-app-sdk";
+import { extractDataFromDataSourceNode } from "../data-source-node";
+import { onService, _Event_DataMapper_GoodUserInputTransfer } from "../events";
 
 export const TEMPLATE_NODE_PATTERN = "@//template-for-manipulation/*";
 
diff --git a/app/lib/utils/plugin-init/index.ts b/app/lib/utils/plugin-init/index.ts
index 42e5b741..8ca5273f 100644
--- a/app/lib/utils/plugin-init/index.ts
+++ b/app/lib/utils/plugin-init/index.ts
@@ -1,2 +1,2 @@
 // DO NOT REMOVE THIS LINE
-import "../../pages/tool-box/data-mapper/__code";
+import "../../pages/tool-box/data-mapper/__plugin";

From 71b57d1b6f29d182327dfad5690c3122c68d6dfb Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:19:24 +0900
Subject: [PATCH 14/36] init @plugin-sdk/core & migrate _id module

---
 app/lib/utils/plugin-provider/plugin-app-sdk/index.ts        | 2 +-
 app/package.json                                             | 3 ++-
 .../plugin-sdk-core}/_id/index.ts                            | 0
 packages/plugin-sdk-core/index.ts                            | 1 +
 packages/plugin-sdk-core/package.json                        | 5 +++++
 5 files changed, 9 insertions(+), 2 deletions(-)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/_id/index.ts (100%)
 create mode 100644 packages/plugin-sdk-core/index.ts
 create mode 100644 packages/plugin-sdk-core/package.json

diff --git a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
index 3d35fad2..03a71bfc 100644
--- a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
@@ -29,7 +29,7 @@ import {
 import { NotifyRequest } from "../interfaces/notify/notify.requests";
 import { DragAndDropOnCanvasRequest } from "../interfaces/dragdrop/dragdrop.requests";
 import type { ReflectSceneNode } from "@design-sdk/core/nodes";
-import { reqid } from "../_id";
+import { reqid } from "@plugin-sdk/core";
 import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../../constants";
 
 import { _SharedStorageCache } from "./_shared-storage-cache";
diff --git a/app/package.json b/app/package.json
index 19d523d1..69d5227a 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,6 +22,7 @@
         "@reflect-ui/core": "0.0.2-rc.7-local",
         "@reflect-ui/lint": "0.0.5-rc",
         "@reflect.bridged.xyz/ui-generator": "0.0.1",
+        "@plugin-sdk/core": "0.0.0",
         "classnames": "^2.3.1",
         "coli": "0.0.3",
         "copy-to-clipboard": "^3.3.1",
@@ -42,4 +43,4 @@
         "@types/react": "^17.0.3",
         "@types/react-dom": "^16.9.8"
     }
-}
+}
\ No newline at end of file
diff --git a/app/lib/utils/plugin-provider/_id/index.ts b/packages/plugin-sdk-core/_id/index.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/_id/index.ts
rename to packages/plugin-sdk-core/_id/index.ts
diff --git a/packages/plugin-sdk-core/index.ts b/packages/plugin-sdk-core/index.ts
new file mode 100644
index 00000000..ac24dd3e
--- /dev/null
+++ b/packages/plugin-sdk-core/index.ts
@@ -0,0 +1 @@
+export * from "./_id";
diff --git a/packages/plugin-sdk-core/package.json b/packages/plugin-sdk-core/package.json
new file mode 100644
index 00000000..32514192
--- /dev/null
+++ b/packages/plugin-sdk-core/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@plugin-sdk/core",
+    "version": "0.0.0",
+    "private": false
+}
\ No newline at end of file

From 08d4e5f8eeee4b1f92ac5fee166bdfd48e2bdd26 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:26:14 +0900
Subject: [PATCH 15/36] moved plugin sdk event interfaces & imports

---
 app/lib/pages/tool-box/batch-meta-editor/index.tsx    |  4 ++--
 app/lib/utils/draggable/index.tsx                     |  2 +-
 app/lib/utils/plugin-provider/plugin-app-sdk/index.ts | 10 ++++------
 app/lib/utils/plugin-provider/plugin-service/index.ts | 11 ++++++-----
 app/lib/utils/plugin-provider/pugin-app/index.tsx     |  2 +-
 packages/plugin-sdk-core/index.ts                     |  1 +
 .../interfaces/dragdrop/dragdrop.requests.ts          |  0
 .../interfaces/dragdrop/dragdrop.responses.ts         |  0
 .../interfaces/dragdrop/dragdrop.types.ts             |  0
 packages/plugin-sdk-core/interfaces/dragdrop/index.ts |  3 +++
 packages/plugin-sdk-core/interfaces/index.ts          |  5 +++++
 .../plugin-sdk-core}/interfaces/meta/index.ts         |  0
 .../plugin-sdk-core}/interfaces/meta/meta.requests.ts |  0
 .../interfaces/meta/meta.responses.ts                 |  0
 .../plugin-sdk-core}/interfaces/meta/meta.types.ts    |  0
 packages/plugin-sdk-core/interfaces/notify/index.ts   |  1 +
 .../interfaces/notify/notify.requests.ts              |  0
 .../plugin-sdk-core/interfaces/remote-api/index.ts    |  2 ++
 .../interfaces/remote-api/remote-api.requests.ts      |  0
 .../interfaces/remote-api/remote-api.responses.ts     |  0
 .../plugin-sdk-core}/interfaces/storage/index.ts      |  0
 .../interfaces/storage/storage.request.ts             |  0
 .../interfaces/storage/storage.response.ts            |  0
 23 files changed, 26 insertions(+), 15 deletions(-)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/dragdrop/dragdrop.requests.ts (100%)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/dragdrop/dragdrop.responses.ts (100%)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/dragdrop/dragdrop.types.ts (100%)
 create mode 100644 packages/plugin-sdk-core/interfaces/dragdrop/index.ts
 create mode 100644 packages/plugin-sdk-core/interfaces/index.ts
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/meta/index.ts (100%)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/meta/meta.requests.ts (100%)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/meta/meta.responses.ts (100%)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/meta/meta.types.ts (100%)
 create mode 100644 packages/plugin-sdk-core/interfaces/notify/index.ts
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/notify/notify.requests.ts (100%)
 create mode 100644 packages/plugin-sdk-core/interfaces/remote-api/index.ts
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/remote-api/remote-api.requests.ts (100%)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/remote-api/remote-api.responses.ts (100%)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/storage/index.ts (100%)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/storage/storage.request.ts (100%)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/interfaces/storage/storage.response.ts (100%)

diff --git a/app/lib/pages/tool-box/batch-meta-editor/index.tsx b/app/lib/pages/tool-box/batch-meta-editor/index.tsx
index 8493abdd..96c0724e 100644
--- a/app/lib/pages/tool-box/batch-meta-editor/index.tsx
+++ b/app/lib/pages/tool-box/batch-meta-editor/index.tsx
@@ -9,9 +9,9 @@ import Divider from "@material-ui/core/Divider";
 import { PluginSdk } from "../../../utils/plugin-provider/plugin-app-sdk";
 import {
   BatchMetaOperationTargetType,
+  BatchMetaUpdateRequest,
   SupportedBatchMetaOperationTargetTypes,
-} from "../../../utils/plugin-provider/interfaces/meta/meta.types";
-import { BatchMetaUpdateRequest } from "../../../utils/plugin-provider/interfaces/meta/meta.requests";
+} from "@plugin-sdk/core";
 
 export default function BatchMetaEditor() {
   const [targetType, setTargetType] = useState<BatchMetaOperationTargetType>(
diff --git a/app/lib/utils/draggable/index.tsx b/app/lib/utils/draggable/index.tsx
index 884ca6fd..6f6e3acd 100644
--- a/app/lib/utils/draggable/index.tsx
+++ b/app/lib/utils/draggable/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { DragAndDropOnCanvasRequest } from "../plugin-provider/interfaces/dragdrop/dragdrop.requests";
+import { DragAndDropOnCanvasRequest } from "@plugin-sdk/core";
 import { PluginSdk } from "../plugin-provider/plugin-app-sdk";
 
 export function Draggable(props: {
diff --git a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
index 03a71bfc..dcae888e 100644
--- a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
@@ -17,19 +17,17 @@ import {
   TransportPluginEvent,
 } from "../events";
 import {
+  reqid,
   BatchMetaFetchRequest,
   NodeMetaFetchRequest,
   NodeMetaUpdateRequest,
-} from "../interfaces/meta";
-import {
   StorageSetItemRequest,
   StorageGetItemRequest,
   StorageGetItemResponse,
-} from "../interfaces/storage";
-import { NotifyRequest } from "../interfaces/notify/notify.requests";
-import { DragAndDropOnCanvasRequest } from "../interfaces/dragdrop/dragdrop.requests";
+  NotifyRequest,
+  DragAndDropOnCanvasRequest,
+} from "@plugin-sdk/core";
 import type { ReflectSceneNode } from "@design-sdk/core/nodes";
-import { reqid } from "@plugin-sdk/core";
 import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../../constants";
 
 import { _SharedStorageCache } from "./_shared-storage-cache";
diff --git a/app/lib/utils/plugin-provider/plugin-service/index.ts b/app/lib/utils/plugin-provider/plugin-service/index.ts
index 7d703823..18f5c4cf 100644
--- a/app/lib/utils/plugin-provider/plugin-service/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-service/index.ts
@@ -21,14 +21,12 @@ import {
 import {
   DragAndDropHandlerCallback,
   DragAndDropOnCanvasRequest,
-} from "../interfaces/dragdrop/dragdrop.requests";
-import {
   BatchMetaFetchRequest,
   BatchMetaUpdateRequest,
   NodeMetaFetchRequest,
   NodeMetaUpdateRequest,
-} from "../interfaces/meta/meta.requests";
-import { NotifyRequest } from "../interfaces/notify/notify.requests";
+  NotifyRequest,
+} from "@plugin-sdk/core";
 import { WebStorage, FigmaStorage, IStorage } from "../storage";
 
 // TODO - make it universal
@@ -38,7 +36,10 @@ import {
   TargetPlatform,
   TARGET_PLATFORM,
 } from "../../plugin-init/init-target-platform";
-import { StorageGetItemResponse, StorageRequest } from "../interfaces/storage";
+import {
+  StorageGetItemResponse,
+  StorageRequest,
+} from "../../../../../packages/plugin-sdk-core/interfaces/storage";
 interface HanderProps<T = any> {
   id: string;
   key: string;
diff --git a/app/lib/utils/plugin-provider/pugin-app/index.tsx b/app/lib/utils/plugin-provider/pugin-app/index.tsx
index c329fe45..6c57ec5e 100644
--- a/app/lib/utils/plugin-provider/pugin-app/index.tsx
+++ b/app/lib/utils/plugin-provider/pugin-app/index.tsx
@@ -8,7 +8,7 @@ import {
   PLUGIN_SDK_NS_REMOTE_API,
   TransportPluginEvent,
 } from "../events";
-import { NetworkRequest } from "../interfaces/remote-api/remote-api.requests";
+import { NetworkRequest } from "@plugin-sdk/core";
 import { PluginSdk } from "../plugin-app-sdk";
 import { currentlySelectedPrimaryNodeId } from "./states/canvas";
 import {
diff --git a/packages/plugin-sdk-core/index.ts b/packages/plugin-sdk-core/index.ts
index ac24dd3e..bf077b26 100644
--- a/packages/plugin-sdk-core/index.ts
+++ b/packages/plugin-sdk-core/index.ts
@@ -1 +1,2 @@
 export * from "./_id";
+export * from "./interfaces";
diff --git a/app/lib/utils/plugin-provider/interfaces/dragdrop/dragdrop.requests.ts b/packages/plugin-sdk-core/interfaces/dragdrop/dragdrop.requests.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/dragdrop/dragdrop.requests.ts
rename to packages/plugin-sdk-core/interfaces/dragdrop/dragdrop.requests.ts
diff --git a/app/lib/utils/plugin-provider/interfaces/dragdrop/dragdrop.responses.ts b/packages/plugin-sdk-core/interfaces/dragdrop/dragdrop.responses.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/dragdrop/dragdrop.responses.ts
rename to packages/plugin-sdk-core/interfaces/dragdrop/dragdrop.responses.ts
diff --git a/app/lib/utils/plugin-provider/interfaces/dragdrop/dragdrop.types.ts b/packages/plugin-sdk-core/interfaces/dragdrop/dragdrop.types.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/dragdrop/dragdrop.types.ts
rename to packages/plugin-sdk-core/interfaces/dragdrop/dragdrop.types.ts
diff --git a/packages/plugin-sdk-core/interfaces/dragdrop/index.ts b/packages/plugin-sdk-core/interfaces/dragdrop/index.ts
new file mode 100644
index 00000000..1d8040a5
--- /dev/null
+++ b/packages/plugin-sdk-core/interfaces/dragdrop/index.ts
@@ -0,0 +1,3 @@
+export * from "./dragdrop.requests";
+// export * from "./dragdrop.responses";
+// export * from "./dragdrop.types";
diff --git a/packages/plugin-sdk-core/interfaces/index.ts b/packages/plugin-sdk-core/interfaces/index.ts
new file mode 100644
index 00000000..b9b291fd
--- /dev/null
+++ b/packages/plugin-sdk-core/interfaces/index.ts
@@ -0,0 +1,5 @@
+export * from "./dragdrop";
+export * from "./meta";
+export * from "./notify";
+export * from "./remote-api";
+export * from "./storage";
diff --git a/app/lib/utils/plugin-provider/interfaces/meta/index.ts b/packages/plugin-sdk-core/interfaces/meta/index.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/meta/index.ts
rename to packages/plugin-sdk-core/interfaces/meta/index.ts
diff --git a/app/lib/utils/plugin-provider/interfaces/meta/meta.requests.ts b/packages/plugin-sdk-core/interfaces/meta/meta.requests.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/meta/meta.requests.ts
rename to packages/plugin-sdk-core/interfaces/meta/meta.requests.ts
diff --git a/app/lib/utils/plugin-provider/interfaces/meta/meta.responses.ts b/packages/plugin-sdk-core/interfaces/meta/meta.responses.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/meta/meta.responses.ts
rename to packages/plugin-sdk-core/interfaces/meta/meta.responses.ts
diff --git a/app/lib/utils/plugin-provider/interfaces/meta/meta.types.ts b/packages/plugin-sdk-core/interfaces/meta/meta.types.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/meta/meta.types.ts
rename to packages/plugin-sdk-core/interfaces/meta/meta.types.ts
diff --git a/packages/plugin-sdk-core/interfaces/notify/index.ts b/packages/plugin-sdk-core/interfaces/notify/index.ts
new file mode 100644
index 00000000..fd7ecd83
--- /dev/null
+++ b/packages/plugin-sdk-core/interfaces/notify/index.ts
@@ -0,0 +1 @@
+export * from "./notify.requests";
diff --git a/app/lib/utils/plugin-provider/interfaces/notify/notify.requests.ts b/packages/plugin-sdk-core/interfaces/notify/notify.requests.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/notify/notify.requests.ts
rename to packages/plugin-sdk-core/interfaces/notify/notify.requests.ts
diff --git a/packages/plugin-sdk-core/interfaces/remote-api/index.ts b/packages/plugin-sdk-core/interfaces/remote-api/index.ts
new file mode 100644
index 00000000..f8ffbe4c
--- /dev/null
+++ b/packages/plugin-sdk-core/interfaces/remote-api/index.ts
@@ -0,0 +1,2 @@
+export * from "./remote-api.requests";
+// export * from "./remote-api.responses";
diff --git a/app/lib/utils/plugin-provider/interfaces/remote-api/remote-api.requests.ts b/packages/plugin-sdk-core/interfaces/remote-api/remote-api.requests.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/remote-api/remote-api.requests.ts
rename to packages/plugin-sdk-core/interfaces/remote-api/remote-api.requests.ts
diff --git a/app/lib/utils/plugin-provider/interfaces/remote-api/remote-api.responses.ts b/packages/plugin-sdk-core/interfaces/remote-api/remote-api.responses.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/remote-api/remote-api.responses.ts
rename to packages/plugin-sdk-core/interfaces/remote-api/remote-api.responses.ts
diff --git a/app/lib/utils/plugin-provider/interfaces/storage/index.ts b/packages/plugin-sdk-core/interfaces/storage/index.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/storage/index.ts
rename to packages/plugin-sdk-core/interfaces/storage/index.ts
diff --git a/app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts b/packages/plugin-sdk-core/interfaces/storage/storage.request.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/storage/storage.request.ts
rename to packages/plugin-sdk-core/interfaces/storage/storage.request.ts
diff --git a/app/lib/utils/plugin-provider/interfaces/storage/storage.response.ts b/packages/plugin-sdk-core/interfaces/storage/storage.response.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/interfaces/storage/storage.response.ts
rename to packages/plugin-sdk-core/interfaces/storage/storage.response.ts

From 51d431dca50511622d3b0b2f8513fd8d8e7d210d Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:32:56 +0900
Subject: [PATCH 16/36] move plugin events to @plugin-sdk/core, move plugin app
 to plugin-app

---
 app/lib/main/index.tsx                                      | 2 +-
 app/lib/pages/tool-box/batch-meta-editor/index.tsx          | 2 +-
 app/lib/utils/plugin-provider/plugin-app-sdk/index.ts       | 2 --
 app/lib/utils/plugin-provider/plugin-service/index.ts       | 4 ++--
 app/package.json                                            | 1 +
 .../plugin-provider => packages/plugin-sdk-core}/events.ts  | 0
 packages/plugin-sdk-core/index.ts                           | 1 +
 .../utils/plugin-provider => packages}/pugin-app/README.md  | 0
 .../utils/plugin-provider => packages}/pugin-app/index.tsx  | 6 +++---
 packages/pugin-app/package.json                             | 5 +++++
 .../plugin-provider => packages}/pugin-app/states/canvas.ts | 0
 .../plugin-provider => packages}/pugin-app/utils/canvas.ts  | 0
 .../plugin-provider => packages}/pugin-app/utils/index.ts   | 0
 13 files changed, 14 insertions(+), 9 deletions(-)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-core}/events.ts (100%)
 rename {app/lib/utils/plugin-provider => packages}/pugin-app/README.md (100%)
 rename {app/lib/utils/plugin-provider => packages}/pugin-app/index.tsx (94%)
 create mode 100644 packages/pugin-app/package.json
 rename {app/lib/utils/plugin-provider => packages}/pugin-app/states/canvas.ts (100%)
 rename {app/lib/utils/plugin-provider => packages}/pugin-app/utils/canvas.ts (100%)
 rename {app/lib/utils/plugin-provider => packages}/pugin-app/utils/index.ts (100%)

diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx
index 50a169c0..0a0c5130 100644
--- a/app/lib/main/index.tsx
+++ b/app/lib/main/index.tsx
@@ -8,7 +8,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Menu from "@material-ui/core/Menu";
 import KeyboardArrowDown from "@material-ui/icons/KeyboardArrowDown";
 import { EK_SET_APP_MODE } from "../constants/ek.constant";
-import { PluginApp } from "../utils/plugin-provider/pugin-app";
+import { PluginApp } from "plugin-app";
 import BatchMetaEditor from "../pages/tool-box/batch-meta-editor";
 import { BrowserRouter } from "react-router-dom";
 
diff --git a/app/lib/pages/tool-box/batch-meta-editor/index.tsx b/app/lib/pages/tool-box/batch-meta-editor/index.tsx
index 96c0724e..e5d4ca7a 100644
--- a/app/lib/pages/tool-box/batch-meta-editor/index.tsx
+++ b/app/lib/pages/tool-box/batch-meta-editor/index.tsx
@@ -4,7 +4,7 @@ import Button from "@material-ui/core/Button";
 import Select from "@material-ui/core/Select";
 import MenuItem from "@material-ui/core/MenuItem";
 import Typography from "@material-ui/core/Typography";
-import { PLUGIN_SDK_EK_BATCH_META_UPDATE } from "../../../utils/plugin-provider/events";
+import { PLUGIN_SDK_EK_BATCH_META_UPDATE } from "@plugin-sdk/core";
 import Divider from "@material-ui/core/Divider";
 import { PluginSdk } from "../../../utils/plugin-provider/plugin-app-sdk";
 import {
diff --git a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
index dcae888e..ef358fa3 100644
--- a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
@@ -15,8 +15,6 @@ import {
   PLUGIN_SDK_NS_STORAGE,
   PLUGIN_SDK_EK_STORAGE_ALIAS,
   TransportPluginEvent,
-} from "../events";
-import {
   reqid,
   BatchMetaFetchRequest,
   NodeMetaFetchRequest,
diff --git a/app/lib/utils/plugin-provider/plugin-service/index.ts b/app/lib/utils/plugin-provider/plugin-service/index.ts
index 18f5c4cf..000f53d7 100644
--- a/app/lib/utils/plugin-provider/plugin-service/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-service/index.ts
@@ -1,4 +1,5 @@
 import { NS_FILE_ROOT_METADATA } from "../../../constants/ns.constant";
+
 import {
   PLUGIN_SDK_EK_BATCH_META_UPDATE,
   PLUGIN_SDK_EK_DRAG_AND_DROPPED,
@@ -17,8 +18,6 @@ import {
   PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META,
   PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META,
   TransportPluginEvent,
-} from "../events";
-import {
   DragAndDropHandlerCallback,
   DragAndDropOnCanvasRequest,
   BatchMetaFetchRequest,
@@ -27,6 +26,7 @@ import {
   NodeMetaUpdateRequest,
   NotifyRequest,
 } from "@plugin-sdk/core";
+
 import { WebStorage, FigmaStorage, IStorage } from "../storage";
 
 // TODO - make it universal
diff --git a/app/package.json b/app/package.json
index 69d5227a..b42cc72e 100644
--- a/app/package.json
+++ b/app/package.json
@@ -23,6 +23,7 @@
         "@reflect-ui/lint": "0.0.5-rc",
         "@reflect.bridged.xyz/ui-generator": "0.0.1",
         "@plugin-sdk/core": "0.0.0",
+        "plugin-app": "0.0.0",
         "classnames": "^2.3.1",
         "coli": "0.0.3",
         "copy-to-clipboard": "^3.3.1",
diff --git a/app/lib/utils/plugin-provider/events.ts b/packages/plugin-sdk-core/events.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/events.ts
rename to packages/plugin-sdk-core/events.ts
diff --git a/packages/plugin-sdk-core/index.ts b/packages/plugin-sdk-core/index.ts
index bf077b26..cbb9d9b7 100644
--- a/packages/plugin-sdk-core/index.ts
+++ b/packages/plugin-sdk-core/index.ts
@@ -1,2 +1,3 @@
 export * from "./_id";
 export * from "./interfaces";
+export * from "./events";
diff --git a/app/lib/utils/plugin-provider/pugin-app/README.md b/packages/pugin-app/README.md
similarity index 100%
rename from app/lib/utils/plugin-provider/pugin-app/README.md
rename to packages/pugin-app/README.md
diff --git a/app/lib/utils/plugin-provider/pugin-app/index.tsx b/packages/pugin-app/index.tsx
similarity index 94%
rename from app/lib/utils/plugin-provider/pugin-app/index.tsx
rename to packages/pugin-app/index.tsx
index 6c57ec5e..28f4cfb1 100644
--- a/app/lib/utils/plugin-provider/pugin-app/index.tsx
+++ b/packages/pugin-app/index.tsx
@@ -7,14 +7,14 @@ import {
   PLUGIN_SDK_NS_GENERAL_STATE_DATA,
   PLUGIN_SDK_NS_REMOTE_API,
   TransportPluginEvent,
-} from "../events";
+} from "@plugin-sdk/core/events";
 import { NetworkRequest } from "@plugin-sdk/core";
-import { PluginSdk } from "../plugin-app-sdk";
+import { PluginSdk } from "../../app/lib/utils/plugin-provider/plugin-app-sdk";
 import { currentlySelectedPrimaryNodeId } from "./states/canvas";
 import {
   initializeTargetPlatform,
   TargetPlatform,
-} from "../../plugin-init/init-target-platform";
+} from "../../app/lib/utils/plugin-init/init-target-platform";
 
 export function PluginApp(props: { platform: TargetPlatform; children: any }) {
   useEffect(() => {
diff --git a/packages/pugin-app/package.json b/packages/pugin-app/package.json
new file mode 100644
index 00000000..15551ffb
--- /dev/null
+++ b/packages/pugin-app/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "plugin-app",
+    "version": "0.0.0",
+    "private": false
+}
\ No newline at end of file
diff --git a/app/lib/utils/plugin-provider/pugin-app/states/canvas.ts b/packages/pugin-app/states/canvas.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/pugin-app/states/canvas.ts
rename to packages/pugin-app/states/canvas.ts
diff --git a/app/lib/utils/plugin-provider/pugin-app/utils/canvas.ts b/packages/pugin-app/utils/canvas.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/pugin-app/utils/canvas.ts
rename to packages/pugin-app/utils/canvas.ts
diff --git a/app/lib/utils/plugin-provider/pugin-app/utils/index.ts b/packages/pugin-app/utils/index.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/pugin-app/utils/index.ts
rename to packages/pugin-app/utils/index.ts

From e36a63cb93c7ccf9597e6bfb775646a280ffe609 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:36:31 +0900
Subject: [PATCH 17/36] move storage location; fix import error

---
 app/lib/utils/plugin-provider/plugin-service/index.ts        | 2 +-
 .../plugin-provider/{ => plugin-service}/storage/README.md   | 0
 .../{ => plugin-service}/storage/figma.storage.ts            | 0
 .../plugin-provider/{ => plugin-service}/storage/index.ts    | 0
 .../plugin-provider/{ => plugin-service}/storage/istorage.ts | 0
 .../{ => plugin-service}/storage/payload-handle.ts           | 0
 .../{ => plugin-service}/storage/universal.storage.ts        | 0
 .../{ => plugin-service}/storage/web.storage.ts              | 0
 figma/src/code-thread/selection.ts                           | 5 +----
 9 files changed, 2 insertions(+), 5 deletions(-)
 rename app/lib/utils/plugin-provider/{ => plugin-service}/storage/README.md (100%)
 rename app/lib/utils/plugin-provider/{ => plugin-service}/storage/figma.storage.ts (100%)
 rename app/lib/utils/plugin-provider/{ => plugin-service}/storage/index.ts (100%)
 rename app/lib/utils/plugin-provider/{ => plugin-service}/storage/istorage.ts (100%)
 rename app/lib/utils/plugin-provider/{ => plugin-service}/storage/payload-handle.ts (100%)
 rename app/lib/utils/plugin-provider/{ => plugin-service}/storage/universal.storage.ts (100%)
 rename app/lib/utils/plugin-provider/{ => plugin-service}/storage/web.storage.ts (100%)

diff --git a/app/lib/utils/plugin-provider/plugin-service/index.ts b/app/lib/utils/plugin-provider/plugin-service/index.ts
index 000f53d7..e8f7b6e6 100644
--- a/app/lib/utils/plugin-provider/plugin-service/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-service/index.ts
@@ -27,7 +27,7 @@ import {
   NotifyRequest,
 } from "@plugin-sdk/core";
 
-import { WebStorage, FigmaStorage, IStorage } from "../storage";
+import { WebStorage, FigmaStorage, IStorage } from "./storage";
 
 // TODO - make it universal
 import { Figma, figma } from "@design-sdk/figma";
diff --git a/app/lib/utils/plugin-provider/storage/README.md b/app/lib/utils/plugin-provider/plugin-service/storage/README.md
similarity index 100%
rename from app/lib/utils/plugin-provider/storage/README.md
rename to app/lib/utils/plugin-provider/plugin-service/storage/README.md
diff --git a/app/lib/utils/plugin-provider/storage/figma.storage.ts b/app/lib/utils/plugin-provider/plugin-service/storage/figma.storage.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/storage/figma.storage.ts
rename to app/lib/utils/plugin-provider/plugin-service/storage/figma.storage.ts
diff --git a/app/lib/utils/plugin-provider/storage/index.ts b/app/lib/utils/plugin-provider/plugin-service/storage/index.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/storage/index.ts
rename to app/lib/utils/plugin-provider/plugin-service/storage/index.ts
diff --git a/app/lib/utils/plugin-provider/storage/istorage.ts b/app/lib/utils/plugin-provider/plugin-service/storage/istorage.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/storage/istorage.ts
rename to app/lib/utils/plugin-provider/plugin-service/storage/istorage.ts
diff --git a/app/lib/utils/plugin-provider/storage/payload-handle.ts b/app/lib/utils/plugin-provider/plugin-service/storage/payload-handle.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/storage/payload-handle.ts
rename to app/lib/utils/plugin-provider/plugin-service/storage/payload-handle.ts
diff --git a/app/lib/utils/plugin-provider/storage/universal.storage.ts b/app/lib/utils/plugin-provider/plugin-service/storage/universal.storage.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/storage/universal.storage.ts
rename to app/lib/utils/plugin-provider/plugin-service/storage/universal.storage.ts
diff --git a/app/lib/utils/plugin-provider/storage/web.storage.ts b/app/lib/utils/plugin-provider/plugin-service/storage/web.storage.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/storage/web.storage.ts
rename to app/lib/utils/plugin-provider/plugin-service/storage/web.storage.ts
diff --git a/figma/src/code-thread/selection.ts b/figma/src/code-thread/selection.ts
index ecdf513f..51033def 100644
--- a/figma/src/code-thread/selection.ts
+++ b/figma/src/code-thread/selection.ts
@@ -1,7 +1,4 @@
-import {
-  analyzeSelection,
-  SelectionAnalysis,
-} from "app/lib/utils/plugin-provider/pugin-app/utils";
+import { analyzeSelection, SelectionAnalysis } from "plugin-app/utils";
 import { convert } from "@design-sdk/figma";
 import { Logger } from "app/lib/utils";
 import { light } from "@design-sdk/core/nodes";

From a55b96ca319ca42a10f74951d6c217691ae44629 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:40:10 +0900
Subject: [PATCH 18/36] migrate @plugin-sdk/app as package & update imports

---
 .../schema-editor/schema-editor.tsx           |   2 +-
 app/lib/pages/code/code-screen-footer.tsx     |   2 +-
 app/lib/pages/code/code-screen.tsx            |   2 +-
 .../component-view/component-view-screen.tsx  |   2 +-
 .../pages/layout-view/layout-view-screen.tsx  |   1 -
 .../tool-box/batch-meta-editor/index.tsx      |   2 +-
 .../tool-box/data-mapper/__plugin/index.ts    |   2 +-
 app/lib/pages/tool-box/data-mapper/events.ts  |   2 +-
 .../tool-box/exporter/figma-exporter.tsx      |   2 +-
 app/lib/repositories/metadata/index.ts        |   2 +-
 app/lib/utils/draggable/index.tsx             |   2 +-
 app/lib/utils/plugin-hooks/use-meta.ts        |   2 +-
 .../utils/plugin-init/init-target-platform.ts |   2 +-
 .../index.ts                                  |   2 +-
 app/package.json                              |   1 +
 .../plugin-sdk-app}/_shared-storage-cache.ts  |   0
 packages/plugin-sdk-app/index.ts              | 316 ++++++++++++++++++
 packages/plugin-sdk-app/package.json          |   5 +
 packages/pugin-app/index.tsx                  |   2 +-
 19 files changed, 336 insertions(+), 15 deletions(-)
 rename app/lib/utils/plugin-provider/{plugin-app-sdk => plugin-sdk-app}/index.ts (99%)
 rename {app/lib/utils/plugin-provider/plugin-app-sdk => packages/plugin-sdk-app}/_shared-storage-cache.ts (100%)
 create mode 100644 packages/plugin-sdk-app/index.ts
 create mode 100644 packages/plugin-sdk-app/package.json

diff --git a/app/lib/components/schema-editor/schema-editor.tsx b/app/lib/components/schema-editor/schema-editor.tsx
index db46c6e7..a5d64957 100644
--- a/app/lib/components/schema-editor/schema-editor.tsx
+++ b/app/lib/components/schema-editor/schema-editor.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../constants";
 import { useSingleSelection } from "../../utils/plugin-hooks";
-import { PluginSdk } from "../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import {
   SingleLayerPropertyDefinition,
   ISingleLayerProperty,
diff --git a/app/lib/pages/code/code-screen-footer.tsx b/app/lib/pages/code/code-screen-footer.tsx
index 8d9933d9..20f5354a 100644
--- a/app/lib/pages/code/code-screen-footer.tsx
+++ b/app/lib/pages/code/code-screen-footer.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import { Button } from "@material-ui/core";
 import { BlackButton, WhtieButton } from "../../components/style/global-style";
 import { assistant as analytics } from "@analytics.bridged.xyz/internal";
-import { PluginSdk } from "../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import { quickLook } from "../../quicklook";
 
 interface ICodeScreenFooter {
diff --git a/app/lib/pages/code/code-screen.tsx b/app/lib/pages/code/code-screen.tsx
index 658c97f5..c5b03132 100644
--- a/app/lib/pages/code/code-screen.tsx
+++ b/app/lib/pages/code/code-screen.tsx
@@ -17,7 +17,7 @@ import styled from "@emotion/styled";
 import { make_empty_selection_state_text_content } from "./constants";
 import { format } from "./formatter";
 import copy from "copy-to-clipboard";
-import { PluginSdk } from "../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import { CodeScreenFooter } from "./code-screen-footer";
 import { WorkScreen } from "../../navigation";
 import { CodeScreenControl } from "./code-screen-control";
diff --git a/app/lib/pages/component-view/component-view-screen.tsx b/app/lib/pages/component-view/component-view-screen.tsx
index eeb1395f..5b1c5aac 100644
--- a/app/lib/pages/component-view/component-view-screen.tsx
+++ b/app/lib/pages/component-view/component-view-screen.tsx
@@ -7,7 +7,7 @@ import DialogContent from "@material-ui/core/DialogContent/DialogContent";
 import DialogContentText from "@material-ui/core/DialogContentText/DialogContentText";
 import TextField from "@material-ui/core/TextField/TextField";
 import DialogActions from "@material-ui/core/DialogActions/DialogActions";
-import { PluginSdk } from "../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import { Divider, IconButton, Typography } from "@material-ui/core";
 import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../constants";
 import { Edit, Settings } from "@material-ui/icons";
diff --git a/app/lib/pages/layout-view/layout-view-screen.tsx b/app/lib/pages/layout-view/layout-view-screen.tsx
index 60a0fee7..0302cfc3 100644
--- a/app/lib/pages/layout-view/layout-view-screen.tsx
+++ b/app/lib/pages/layout-view/layout-view-screen.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { PluginSdk } from "../../utils/plugin-provider/plugin-app-sdk";
 
 export function LayoutViewScreen() {
   // PluginSdk.selectedNodeId;
diff --git a/app/lib/pages/tool-box/batch-meta-editor/index.tsx b/app/lib/pages/tool-box/batch-meta-editor/index.tsx
index e5d4ca7a..7107a8e2 100644
--- a/app/lib/pages/tool-box/batch-meta-editor/index.tsx
+++ b/app/lib/pages/tool-box/batch-meta-editor/index.tsx
@@ -6,7 +6,7 @@ import MenuItem from "@material-ui/core/MenuItem";
 import Typography from "@material-ui/core/Typography";
 import { PLUGIN_SDK_EK_BATCH_META_UPDATE } from "@plugin-sdk/core";
 import Divider from "@material-ui/core/Divider";
-import { PluginSdk } from "../../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import {
   BatchMetaOperationTargetType,
   BatchMetaUpdateRequest,
diff --git a/app/lib/pages/tool-box/data-mapper/__plugin/index.ts b/app/lib/pages/tool-box/data-mapper/__plugin/index.ts
index c7c5349b..de161339 100644
--- a/app/lib/pages/tool-box/data-mapper/__plugin/index.ts
+++ b/app/lib/pages/tool-box/data-mapper/__plugin/index.ts
@@ -1,7 +1,7 @@
 import { utils, keyAnnotations } from "@design-sdk/core";
 import { variant } from "@design-sdk/figma/features";
 import { Figma } from "@design-sdk/figma";
-import { PluginSdk } from "../../../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import { extractDataFromDataSourceNode } from "../data-source-node";
 import { onService, _Event_DataMapper_GoodUserInputTransfer } from "../events";
 
diff --git a/app/lib/pages/tool-box/data-mapper/events.ts b/app/lib/pages/tool-box/data-mapper/events.ts
index e75bb374..245ab028 100644
--- a/app/lib/pages/tool-box/data-mapper/events.ts
+++ b/app/lib/pages/tool-box/data-mapper/events.ts
@@ -1,4 +1,4 @@
-import { PluginSdk } from "../../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import { PluginSdkService } from "../../../utils/plugin-provider/plugin-service";
 
 const EVKEY = "data-mapper-custom-transport";
diff --git a/app/lib/pages/tool-box/exporter/figma-exporter.tsx b/app/lib/pages/tool-box/exporter/figma-exporter.tsx
index 4a1a574c..5f18dace 100644
--- a/app/lib/pages/tool-box/exporter/figma-exporter.tsx
+++ b/app/lib/pages/tool-box/exporter/figma-exporter.tsx
@@ -3,7 +3,7 @@ import * as FigmaApi from "figma-js";
 import { Button, LinearProgress, TextField, Tooltip } from "@material-ui/core";
 import { useSingleSelection } from "../../../utils/plugin-hooks";
 import { parseFileId } from "@design-sdk/figma-url";
-import { PluginSdk } from "../../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import { downloadFile } from "./export-utils";
 
 const _maybetoken = process.env.FIGMA_PERSONAL_ACCESS_TOKEN;
diff --git a/app/lib/repositories/metadata/index.ts b/app/lib/repositories/metadata/index.ts
index 6747cb85..c75f2268 100644
--- a/app/lib/repositories/metadata/index.ts
+++ b/app/lib/repositories/metadata/index.ts
@@ -4,7 +4,7 @@ import {
   TargetPlatform,
   TARGET_PLATFORM,
 } from "../../utils/plugin-init/init-target-platform";
-import { PluginSdk } from "../../utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 
 export class MetaDataRepositoryFactory {
   static layer(layer: string) {
diff --git a/app/lib/utils/draggable/index.tsx b/app/lib/utils/draggable/index.tsx
index 6f6e3acd..462d16da 100644
--- a/app/lib/utils/draggable/index.tsx
+++ b/app/lib/utils/draggable/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { DragAndDropOnCanvasRequest } from "@plugin-sdk/core";
-import { PluginSdk } from "../plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 
 export function Draggable(props: {
   customData?: object;
diff --git a/app/lib/utils/plugin-hooks/use-meta.ts b/app/lib/utils/plugin-hooks/use-meta.ts
index 2c290cbd..e3e2da7a 100644
--- a/app/lib/utils/plugin-hooks/use-meta.ts
+++ b/app/lib/utils/plugin-hooks/use-meta.ts
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../constants";
-import { PluginSdk } from "../plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 
 export function useMeta() {}
 
diff --git a/app/lib/utils/plugin-init/init-target-platform.ts b/app/lib/utils/plugin-init/init-target-platform.ts
index 9290f916..32d47cb2 100644
--- a/app/lib/utils/plugin-init/init-target-platform.ts
+++ b/app/lib/utils/plugin-init/init-target-platform.ts
@@ -1,4 +1,4 @@
-import { PluginSdk } from "../plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 
 /**
  * Target platform this ui runs on. this gloval variable will be set on initial entry on each platform's main ui import
diff --git a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts b/app/lib/utils/plugin-provider/plugin-sdk-app/index.ts
similarity index 99%
rename from app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
rename to app/lib/utils/plugin-provider/plugin-sdk-app/index.ts
index ef358fa3..00986a3f 100644
--- a/app/lib/utils/plugin-provider/plugin-app-sdk/index.ts
+++ b/app/lib/utils/plugin-provider/plugin-sdk-app/index.ts
@@ -26,7 +26,7 @@ import {
   DragAndDropOnCanvasRequest,
 } from "@plugin-sdk/core";
 import type { ReflectSceneNode } from "@design-sdk/core/nodes";
-import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../../constants";
+import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../app/lib/constants";
 
 import { _SharedStorageCache } from "./_shared-storage-cache";
 
diff --git a/app/package.json b/app/package.json
index b42cc72e..a1b31775 100644
--- a/app/package.json
+++ b/app/package.json
@@ -22,6 +22,7 @@
         "@reflect-ui/core": "0.0.2-rc.7-local",
         "@reflect-ui/lint": "0.0.5-rc",
         "@reflect.bridged.xyz/ui-generator": "0.0.1",
+        "@plugin-sdk/app": "0.0.0",
         "@plugin-sdk/core": "0.0.0",
         "plugin-app": "0.0.0",
         "classnames": "^2.3.1",
diff --git a/app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts b/packages/plugin-sdk-app/_shared-storage-cache.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/plugin-app-sdk/_shared-storage-cache.ts
rename to packages/plugin-sdk-app/_shared-storage-cache.ts
diff --git a/packages/plugin-sdk-app/index.ts b/packages/plugin-sdk-app/index.ts
new file mode 100644
index 00000000..00986a3f
--- /dev/null
+++ b/packages/plugin-sdk-app/index.ts
@@ -0,0 +1,316 @@
+import {
+  BasePluginEvent,
+  PLUGIN_SDK_EK_DRAG_AND_DROPPED,
+  PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_LAYER_META,
+  PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META,
+  PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META,
+  PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META,
+  PLUGIN_SDK_EK_SIMPLE_NOTIFY,
+  PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL,
+  PLUGIN_SDK_NS_DRAG_AND_DROP,
+  PLUGIN_SDK_NS_META_API,
+  PLUGIN_SDK_NS_NOTIFY_API,
+  PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META,
+  PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META,
+  PLUGIN_SDK_NS_STORAGE,
+  PLUGIN_SDK_EK_STORAGE_ALIAS,
+  TransportPluginEvent,
+  reqid,
+  BatchMetaFetchRequest,
+  NodeMetaFetchRequest,
+  NodeMetaUpdateRequest,
+  StorageSetItemRequest,
+  StorageGetItemRequest,
+  StorageGetItemResponse,
+  NotifyRequest,
+  DragAndDropOnCanvasRequest,
+} from "@plugin-sdk/core";
+import type { ReflectSceneNode } from "@design-sdk/core/nodes";
+import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../app/lib/constants";
+
+import { _SharedStorageCache } from "./_shared-storage-cache";
+
+const __main_plugin_sdk_instance_storage_cache = new _SharedStorageCache(
+  "co.grida.assistant"
+);
+export class PluginSdk {
+  static window: Window;
+  static initializeWindow(window: Window) {
+    this.window = window;
+  }
+
+  // region general canvas api
+  static get selectedNodeIds(): readonly string[] {
+    throw "not implemented";
+    return [];
+  }
+
+  static get selectedNodes(): readonly ReflectSceneNode[] {
+    throw "not implemented";
+    return [];
+  }
+
+  static get selectedNodeId(): string {
+    // TODO
+    throw "not implemented";
+    return undefined;
+  }
+
+  static get selectedNode(): ReflectSceneNode {
+    // TODO
+    throw "not implemented";
+    return undefined;
+  }
+
+  // enderegion general canvas api
+
+  // region network api
+  static get(params: any) {
+    throw "not implmtd";
+  }
+
+  static post(params: any) {
+    throw "not implmtd";
+  }
+
+  // endregion network api
+
+  //
+  // region storage api
+  static setItem<T = string>(key: string, value: T) {
+    __main_plugin_sdk_instance_storage_cache.setCache(
+      key,
+      value
+    ); /* 1. set cache */
+
+    /* 2. send set request */
+    this.request({
+      namespace: PLUGIN_SDK_NS_STORAGE,
+      key: PLUGIN_SDK_EK_STORAGE_ALIAS.set,
+      data: <StorageSetItemRequest<T>>{
+        key: key,
+        value: value,
+      },
+    }).finally(() => {
+      __main_plugin_sdk_instance_storage_cache.removeCache(
+        key
+      ); /* 3. remove cache after saving complete */
+    });
+  }
+
+  static async getItem<T = string>(key: string): Promise<T> {
+    const _has_cached = __main_plugin_sdk_instance_storage_cache.hasCache(key);
+    if (_has_cached) {
+      return __main_plugin_sdk_instance_storage_cache.getCache<T>(key);
+    } else {
+      const _resp = await this.request<StorageGetItemResponse<T>>({
+        namespace: PLUGIN_SDK_NS_STORAGE,
+        key: PLUGIN_SDK_EK_STORAGE_ALIAS.get,
+        data: <StorageGetItemRequest<T>>{
+          key: key,
+        },
+      });
+      return _resp.value;
+    }
+  }
+
+  // endregion storage api
+  //
+
+  //
+  // region metadata
+  static updateMetadata(request: NodeMetaUpdateRequest) {
+    return this.request({
+      namespace: PLUGIN_SDK_NS_META_API,
+      key: PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META,
+      data: request,
+    });
+  }
+
+  /**
+   * fetches the metadata with grida default namespace provided.
+   */
+  static async fetchMetadata_grida<T = any>(
+    on: string,
+    key: string
+  ): Promise<T> {
+    return this.fetchMetadata<T>({
+      id: on,
+      key: key,
+      namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE,
+    });
+  }
+
+  static async fetchMetadata<T = any>(
+    request: NodeMetaFetchRequest
+  ): Promise<T> {
+    return this.request<T>({
+      namespace: PLUGIN_SDK_NS_META_API,
+      key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META,
+      data: request,
+    });
+  }
+
+  /**
+   * fetches the master component metadata no matter the input id (node id) was id of master component or a instance.
+   * when instance id was givven it will automatically locate master component to set the metadata
+   * @param request
+   * @returns
+   */
+  static async fetchMainComponentMetadata(request: NodeMetaFetchRequest) {
+    return this.request({
+      namespace: PLUGIN_SDK_NS_META_API,
+      key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META,
+      data: request,
+    });
+  }
+
+  /**
+   * fetches the master component's layer corresponding to givven id. works similar like "fetchMainComponentMetadata"
+   */
+  static async fetchMainComponentLayerMetadata(request: NodeMetaFetchRequest) {
+    throw "not implemented on handler side";
+    return this.request({
+      namespace: PLUGIN_SDK_NS_META_API,
+      key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_LAYER_META,
+      data: request,
+    });
+  }
+
+  /**
+   * updates the main component's meta data.
+   * (this also works for a variant compat component,
+   * but it does't save on variant set's meta,
+   * intead saves on master component of single variant.
+   *  - so you'll need to prevent using this on some case to prevent future confusion)
+   * @param request
+   * @returns
+   */
+  static async updateMainComponentMetadata(request: NodeMetaUpdateRequest) {
+    return this.request({
+      namespace: PLUGIN_SDK_NS_META_API,
+      key: PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META,
+      data: request,
+    });
+  }
+
+  static fetchRootMetadata(key: string): Promise<any> {
+    const data: BatchMetaFetchRequest = {
+      key: key,
+    };
+    return this.request({
+      namespace: PLUGIN_SDK_NS_META_API,
+      key: PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META,
+      data: data,
+    });
+  }
+
+  // endregion metadata
+
+  // region user feedbacks
+  static notify(message: string, duration?: number) {
+    this.request({
+      namespace: PLUGIN_SDK_NS_NOTIFY_API,
+      key: PLUGIN_SDK_EK_SIMPLE_NOTIFY,
+      data: <NotifyRequest>{
+        message: message,
+        duration: duration,
+      },
+    });
+  }
+
+  static notifyCopied() {
+    this.notify("Copied to clipboard", 1);
+  }
+  // endregion user feedbacks
+
+  // region canvas
+  static async dropOnCanvas(data: DragAndDropOnCanvasRequest) {
+    return await this.request({
+      namespace: PLUGIN_SDK_NS_DRAG_AND_DROP,
+      key: PLUGIN_SDK_EK_DRAG_AND_DROPPED,
+      data: data,
+    });
+  }
+  // endregion canvas
+
+  static postMessage(event: TransportPluginEvent) {
+    PluginSdk.window.postMessage(
+      {
+        pluginMessage: event,
+      },
+      "*"
+    );
+  }
+
+  static promises: Map<string, { resolve; reject }> = new Map();
+
+  static request<T = any>(event: BasePluginEvent): Promise<T> {
+    // make id
+    const requestId = this.makeRequetsId(event.key);
+
+    return new Promise<T>((resolve, reject) => {
+      // register to event / response que
+      this.registerToEventQue(requestId, resolve, reject);
+
+      // post message after registration is complete.
+      this.postMessage({
+        type: "request",
+        origin: "app",
+        ...event,
+        id: requestId,
+      });
+    });
+  }
+
+  private static makeRequetsId(key: string): string {
+    return `${key}-${reqid()}`;
+  }
+
+  private static registerToEventQue(requestId: string, resolve, reject) {
+    this.promises.set(requestId, {
+      resolve: resolve,
+      reject: reject,
+    });
+  }
+
+  private static removeFromEventQue(requestId: string) {
+    this.promises.delete(requestId);
+  }
+
+  static handle(event: TransportPluginEvent) {
+    if (event.type == "response") {
+      this.handleResponse(event);
+    }
+  }
+
+  private static handleResponse(event: TransportPluginEvent) {
+    const promise = this.promises.get(event.id);
+    if (!promise) {
+      throw `no promise found to handle from event que with id ${
+        event.id
+      } current promises are.. ${[...this.promises.keys()]}`;
+    }
+
+    if (event.error) {
+      promise.reject(event.error);
+    } else {
+      promise.resolve(event.data);
+    }
+
+    // remove resolved promise from que
+    this.removeFromEventQue(event.id);
+  }
+
+  /**
+   * raises custom app event/request
+   * see PluginSdkService#onAppRequest for more detail
+   */
+  static appEvent(key: string, data: any) {
+    this.request({
+      namespace: PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL,
+      key: key,
+      data: data,
+    });
+  }
+}
diff --git a/packages/plugin-sdk-app/package.json b/packages/plugin-sdk-app/package.json
new file mode 100644
index 00000000..644a1355
--- /dev/null
+++ b/packages/plugin-sdk-app/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@plugin-sdk/app",
+    "version": "0.0.0",
+    "private": false
+}
\ No newline at end of file
diff --git a/packages/pugin-app/index.tsx b/packages/pugin-app/index.tsx
index 28f4cfb1..97bf9507 100644
--- a/packages/pugin-app/index.tsx
+++ b/packages/pugin-app/index.tsx
@@ -9,7 +9,7 @@ import {
   TransportPluginEvent,
 } from "@plugin-sdk/core/events";
 import { NetworkRequest } from "@plugin-sdk/core";
-import { PluginSdk } from "../../app/lib/utils/plugin-provider/plugin-app-sdk";
+import { PluginSdk } from "@plugin-sdk/app";
 import { currentlySelectedPrimaryNodeId } from "./states/canvas";
 import {
   initializeTargetPlatform,

From d6d1a8b6a48cb0abb60805b55f7d85857b14d1ca Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:41:34 +0900
Subject: [PATCH 19/36] rm legacy

---
 .../plugin-provider/plugin-sdk-app/index.ts   | 316 ------------------
 1 file changed, 316 deletions(-)
 delete mode 100644 app/lib/utils/plugin-provider/plugin-sdk-app/index.ts

diff --git a/app/lib/utils/plugin-provider/plugin-sdk-app/index.ts b/app/lib/utils/plugin-provider/plugin-sdk-app/index.ts
deleted file mode 100644
index 00986a3f..00000000
--- a/app/lib/utils/plugin-provider/plugin-sdk-app/index.ts
+++ /dev/null
@@ -1,316 +0,0 @@
-import {
-  BasePluginEvent,
-  PLUGIN_SDK_EK_DRAG_AND_DROPPED,
-  PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_LAYER_META,
-  PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META,
-  PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META,
-  PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META,
-  PLUGIN_SDK_EK_SIMPLE_NOTIFY,
-  PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL,
-  PLUGIN_SDK_NS_DRAG_AND_DROP,
-  PLUGIN_SDK_NS_META_API,
-  PLUGIN_SDK_NS_NOTIFY_API,
-  PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META,
-  PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META,
-  PLUGIN_SDK_NS_STORAGE,
-  PLUGIN_SDK_EK_STORAGE_ALIAS,
-  TransportPluginEvent,
-  reqid,
-  BatchMetaFetchRequest,
-  NodeMetaFetchRequest,
-  NodeMetaUpdateRequest,
-  StorageSetItemRequest,
-  StorageGetItemRequest,
-  StorageGetItemResponse,
-  NotifyRequest,
-  DragAndDropOnCanvasRequest,
-} from "@plugin-sdk/core";
-import type { ReflectSceneNode } from "@design-sdk/core/nodes";
-import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "../../app/lib/constants";
-
-import { _SharedStorageCache } from "./_shared-storage-cache";
-
-const __main_plugin_sdk_instance_storage_cache = new _SharedStorageCache(
-  "co.grida.assistant"
-);
-export class PluginSdk {
-  static window: Window;
-  static initializeWindow(window: Window) {
-    this.window = window;
-  }
-
-  // region general canvas api
-  static get selectedNodeIds(): readonly string[] {
-    throw "not implemented";
-    return [];
-  }
-
-  static get selectedNodes(): readonly ReflectSceneNode[] {
-    throw "not implemented";
-    return [];
-  }
-
-  static get selectedNodeId(): string {
-    // TODO
-    throw "not implemented";
-    return undefined;
-  }
-
-  static get selectedNode(): ReflectSceneNode {
-    // TODO
-    throw "not implemented";
-    return undefined;
-  }
-
-  // enderegion general canvas api
-
-  // region network api
-  static get(params: any) {
-    throw "not implmtd";
-  }
-
-  static post(params: any) {
-    throw "not implmtd";
-  }
-
-  // endregion network api
-
-  //
-  // region storage api
-  static setItem<T = string>(key: string, value: T) {
-    __main_plugin_sdk_instance_storage_cache.setCache(
-      key,
-      value
-    ); /* 1. set cache */
-
-    /* 2. send set request */
-    this.request({
-      namespace: PLUGIN_SDK_NS_STORAGE,
-      key: PLUGIN_SDK_EK_STORAGE_ALIAS.set,
-      data: <StorageSetItemRequest<T>>{
-        key: key,
-        value: value,
-      },
-    }).finally(() => {
-      __main_plugin_sdk_instance_storage_cache.removeCache(
-        key
-      ); /* 3. remove cache after saving complete */
-    });
-  }
-
-  static async getItem<T = string>(key: string): Promise<T> {
-    const _has_cached = __main_plugin_sdk_instance_storage_cache.hasCache(key);
-    if (_has_cached) {
-      return __main_plugin_sdk_instance_storage_cache.getCache<T>(key);
-    } else {
-      const _resp = await this.request<StorageGetItemResponse<T>>({
-        namespace: PLUGIN_SDK_NS_STORAGE,
-        key: PLUGIN_SDK_EK_STORAGE_ALIAS.get,
-        data: <StorageGetItemRequest<T>>{
-          key: key,
-        },
-      });
-      return _resp.value;
-    }
-  }
-
-  // endregion storage api
-  //
-
-  //
-  // region metadata
-  static updateMetadata(request: NodeMetaUpdateRequest) {
-    return this.request({
-      namespace: PLUGIN_SDK_NS_META_API,
-      key: PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META,
-      data: request,
-    });
-  }
-
-  /**
-   * fetches the metadata with grida default namespace provided.
-   */
-  static async fetchMetadata_grida<T = any>(
-    on: string,
-    key: string
-  ): Promise<T> {
-    return this.fetchMetadata<T>({
-      id: on,
-      key: key,
-      namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE,
-    });
-  }
-
-  static async fetchMetadata<T = any>(
-    request: NodeMetaFetchRequest
-  ): Promise<T> {
-    return this.request<T>({
-      namespace: PLUGIN_SDK_NS_META_API,
-      key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META,
-      data: request,
-    });
-  }
-
-  /**
-   * fetches the master component metadata no matter the input id (node id) was id of master component or a instance.
-   * when instance id was givven it will automatically locate master component to set the metadata
-   * @param request
-   * @returns
-   */
-  static async fetchMainComponentMetadata(request: NodeMetaFetchRequest) {
-    return this.request({
-      namespace: PLUGIN_SDK_NS_META_API,
-      key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META,
-      data: request,
-    });
-  }
-
-  /**
-   * fetches the master component's layer corresponding to givven id. works similar like "fetchMainComponentMetadata"
-   */
-  static async fetchMainComponentLayerMetadata(request: NodeMetaFetchRequest) {
-    throw "not implemented on handler side";
-    return this.request({
-      namespace: PLUGIN_SDK_NS_META_API,
-      key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_LAYER_META,
-      data: request,
-    });
-  }
-
-  /**
-   * updates the main component's meta data.
-   * (this also works for a variant compat component,
-   * but it does't save on variant set's meta,
-   * intead saves on master component of single variant.
-   *  - so you'll need to prevent using this on some case to prevent future confusion)
-   * @param request
-   * @returns
-   */
-  static async updateMainComponentMetadata(request: NodeMetaUpdateRequest) {
-    return this.request({
-      namespace: PLUGIN_SDK_NS_META_API,
-      key: PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META,
-      data: request,
-    });
-  }
-
-  static fetchRootMetadata(key: string): Promise<any> {
-    const data: BatchMetaFetchRequest = {
-      key: key,
-    };
-    return this.request({
-      namespace: PLUGIN_SDK_NS_META_API,
-      key: PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META,
-      data: data,
-    });
-  }
-
-  // endregion metadata
-
-  // region user feedbacks
-  static notify(message: string, duration?: number) {
-    this.request({
-      namespace: PLUGIN_SDK_NS_NOTIFY_API,
-      key: PLUGIN_SDK_EK_SIMPLE_NOTIFY,
-      data: <NotifyRequest>{
-        message: message,
-        duration: duration,
-      },
-    });
-  }
-
-  static notifyCopied() {
-    this.notify("Copied to clipboard", 1);
-  }
-  // endregion user feedbacks
-
-  // region canvas
-  static async dropOnCanvas(data: DragAndDropOnCanvasRequest) {
-    return await this.request({
-      namespace: PLUGIN_SDK_NS_DRAG_AND_DROP,
-      key: PLUGIN_SDK_EK_DRAG_AND_DROPPED,
-      data: data,
-    });
-  }
-  // endregion canvas
-
-  static postMessage(event: TransportPluginEvent) {
-    PluginSdk.window.postMessage(
-      {
-        pluginMessage: event,
-      },
-      "*"
-    );
-  }
-
-  static promises: Map<string, { resolve; reject }> = new Map();
-
-  static request<T = any>(event: BasePluginEvent): Promise<T> {
-    // make id
-    const requestId = this.makeRequetsId(event.key);
-
-    return new Promise<T>((resolve, reject) => {
-      // register to event / response que
-      this.registerToEventQue(requestId, resolve, reject);
-
-      // post message after registration is complete.
-      this.postMessage({
-        type: "request",
-        origin: "app",
-        ...event,
-        id: requestId,
-      });
-    });
-  }
-
-  private static makeRequetsId(key: string): string {
-    return `${key}-${reqid()}`;
-  }
-
-  private static registerToEventQue(requestId: string, resolve, reject) {
-    this.promises.set(requestId, {
-      resolve: resolve,
-      reject: reject,
-    });
-  }
-
-  private static removeFromEventQue(requestId: string) {
-    this.promises.delete(requestId);
-  }
-
-  static handle(event: TransportPluginEvent) {
-    if (event.type == "response") {
-      this.handleResponse(event);
-    }
-  }
-
-  private static handleResponse(event: TransportPluginEvent) {
-    const promise = this.promises.get(event.id);
-    if (!promise) {
-      throw `no promise found to handle from event que with id ${
-        event.id
-      } current promises are.. ${[...this.promises.keys()]}`;
-    }
-
-    if (event.error) {
-      promise.reject(event.error);
-    } else {
-      promise.resolve(event.data);
-    }
-
-    // remove resolved promise from que
-    this.removeFromEventQue(event.id);
-  }
-
-  /**
-   * raises custom app event/request
-   * see PluginSdkService#onAppRequest for more detail
-   */
-  static appEvent(key: string, data: any) {
-    this.request({
-      namespace: PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL,
-      key: key,
-      data: data,
-    });
-  }
-}

From c33b9220f4f54b4f9283e8a135502ef96d2bebe0 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 02:46:14 +0900
Subject: [PATCH 20/36] migrate `@plugin-sdk/service` under `packages/` &
 update import ; cleanup - plugin sdk migration final.

---
 app/lib/pages/tool-box/data-mapper/events.ts                | 2 +-
 figma/package.json                                          | 5 +++--
 figma/src/code-thread/default-handler.ts                    | 2 +-
 figma/src/event-handlers/create-icon.ts                     | 2 +-
 .../plugin-sdk-service}/README.md                           | 0
 .../plugin-service => packages/plugin-sdk-service}/index.ts | 6 +++---
 packages/plugin-sdk-service/package.json                    | 5 +++++
 .../plugin-sdk-service}/storage/README.md                   | 0
 .../plugin-sdk-service}/storage/figma.storage.ts            | 0
 .../plugin-sdk-service}/storage/index.ts                    | 0
 .../plugin-sdk-service}/storage/istorage.ts                 | 0
 .../plugin-sdk-service}/storage/payload-handle.ts           | 0
 .../plugin-sdk-service}/storage/universal.storage.ts        | 0
 .../plugin-sdk-service}/storage/web.storage.ts              | 0
 14 files changed, 14 insertions(+), 8 deletions(-)
 rename {app/lib/utils/plugin-provider => packages/plugin-sdk-service}/README.md (100%)
 rename {app/lib/utils/plugin-provider/plugin-service => packages/plugin-sdk-service}/index.ts (98%)
 create mode 100644 packages/plugin-sdk-service/package.json
 rename {app/lib/utils/plugin-provider/plugin-service => packages/plugin-sdk-service}/storage/README.md (100%)
 rename {app/lib/utils/plugin-provider/plugin-service => packages/plugin-sdk-service}/storage/figma.storage.ts (100%)
 rename {app/lib/utils/plugin-provider/plugin-service => packages/plugin-sdk-service}/storage/index.ts (100%)
 rename {app/lib/utils/plugin-provider/plugin-service => packages/plugin-sdk-service}/storage/istorage.ts (100%)
 rename {app/lib/utils/plugin-provider/plugin-service => packages/plugin-sdk-service}/storage/payload-handle.ts (100%)
 rename {app/lib/utils/plugin-provider/plugin-service => packages/plugin-sdk-service}/storage/universal.storage.ts (100%)
 rename {app/lib/utils/plugin-provider/plugin-service => packages/plugin-sdk-service}/storage/web.storage.ts (100%)

diff --git a/app/lib/pages/tool-box/data-mapper/events.ts b/app/lib/pages/tool-box/data-mapper/events.ts
index 245ab028..2b3443d4 100644
--- a/app/lib/pages/tool-box/data-mapper/events.ts
+++ b/app/lib/pages/tool-box/data-mapper/events.ts
@@ -1,5 +1,5 @@
 import { PluginSdk } from "@plugin-sdk/app";
-import { PluginSdkService } from "../../../utils/plugin-provider/plugin-service";
+import { PluginSdkService } from "@plugin-sdk/service";
 
 const EVKEY = "data-mapper-custom-transport";
 export interface _Event_DataMapper_GoodUserInputTransfer {
diff --git a/figma/package.json b/figma/package.json
index 25847f7d..949abecd 100644
--- a/figma/package.json
+++ b/figma/package.json
@@ -12,7 +12,8 @@
   "author": "bridged.xyz by softmarshmallow <woojoo@softmarshmallow.com>",
   "dependencies": {
     "app": "^0.0.1",
-    "figma-js": "^1.13.0"
+    "figma-js": "^1.13.0",
+    "@plugin-sdk/service": "0.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",
@@ -47,4 +48,4 @@
     "build": "webpack -p --mode=production",
     "dev": "webpack --watch"
   }
-}
+}
\ No newline at end of file
diff --git a/figma/src/code-thread/default-handler.ts b/figma/src/code-thread/default-handler.ts
index 4136b266..3ded5dd0 100644
--- a/figma/src/code-thread/default-handler.ts
+++ b/figma/src/code-thread/default-handler.ts
@@ -1,6 +1,6 @@
 import { addMessageHandler } from "./message-handler";
 import { EK_FOCUS_REQUEST } from "app/lib/constants/ek.constant";
-import { PluginSdkService } from "app/lib/utils/plugin-provider/plugin-service";
+import { PluginSdkService } from "@plugin-sdk/service";
 
 const defaultMessageHandler = async (
   msg: { type: string; data: any } | any
diff --git a/figma/src/event-handlers/create-icon.ts b/figma/src/event-handlers/create-icon.ts
index 49a536ca..be35283e 100644
--- a/figma/src/event-handlers/create-icon.ts
+++ b/figma/src/event-handlers/create-icon.ts
@@ -1,6 +1,6 @@
 import { IconConfig } from "@reflect-ui/core";
 import { EK_CREATE_ICON, EK_ICON_DRAG_AND_DROPPED } from "app/lib/constants";
-import { PluginSdkService } from "app/lib/utils/plugin-provider/plugin-service";
+import { PluginSdkService } from "@plugin-sdk/service";
 import { IconPlacement, renderSvgIcon } from "../reflect-render/icons.render";
 import { addEventHandler } from "../code-thread";
 
diff --git a/app/lib/utils/plugin-provider/README.md b/packages/plugin-sdk-service/README.md
similarity index 100%
rename from app/lib/utils/plugin-provider/README.md
rename to packages/plugin-sdk-service/README.md
diff --git a/app/lib/utils/plugin-provider/plugin-service/index.ts b/packages/plugin-sdk-service/index.ts
similarity index 98%
rename from app/lib/utils/plugin-provider/plugin-service/index.ts
rename to packages/plugin-sdk-service/index.ts
index e8f7b6e6..f9b4536e 100644
--- a/app/lib/utils/plugin-provider/plugin-service/index.ts
+++ b/packages/plugin-sdk-service/index.ts
@@ -1,4 +1,4 @@
-import { NS_FILE_ROOT_METADATA } from "../../../constants/ns.constant";
+import { NS_FILE_ROOT_METADATA } from "app/lib/constants/ns.constant";
 
 import {
   PLUGIN_SDK_EK_BATCH_META_UPDATE,
@@ -35,11 +35,11 @@ import {
   __syncTargetPlatformForCodeThread,
   TargetPlatform,
   TARGET_PLATFORM,
-} from "../../plugin-init/init-target-platform";
+} from "../../app/lib/utils/plugin-init/init-target-platform";
 import {
   StorageGetItemResponse,
   StorageRequest,
-} from "../../../../../packages/plugin-sdk-core/interfaces/storage";
+} from "../plugin-sdk-core/interfaces/storage";
 interface HanderProps<T = any> {
   id: string;
   key: string;
diff --git a/packages/plugin-sdk-service/package.json b/packages/plugin-sdk-service/package.json
new file mode 100644
index 00000000..9487e8c5
--- /dev/null
+++ b/packages/plugin-sdk-service/package.json
@@ -0,0 +1,5 @@
+{
+    "name": "@plugin-sdk/service",
+    "version": "0.0.0",
+    "private": false
+}
\ No newline at end of file
diff --git a/app/lib/utils/plugin-provider/plugin-service/storage/README.md b/packages/plugin-sdk-service/storage/README.md
similarity index 100%
rename from app/lib/utils/plugin-provider/plugin-service/storage/README.md
rename to packages/plugin-sdk-service/storage/README.md
diff --git a/app/lib/utils/plugin-provider/plugin-service/storage/figma.storage.ts b/packages/plugin-sdk-service/storage/figma.storage.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/plugin-service/storage/figma.storage.ts
rename to packages/plugin-sdk-service/storage/figma.storage.ts
diff --git a/app/lib/utils/plugin-provider/plugin-service/storage/index.ts b/packages/plugin-sdk-service/storage/index.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/plugin-service/storage/index.ts
rename to packages/plugin-sdk-service/storage/index.ts
diff --git a/app/lib/utils/plugin-provider/plugin-service/storage/istorage.ts b/packages/plugin-sdk-service/storage/istorage.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/plugin-service/storage/istorage.ts
rename to packages/plugin-sdk-service/storage/istorage.ts
diff --git a/app/lib/utils/plugin-provider/plugin-service/storage/payload-handle.ts b/packages/plugin-sdk-service/storage/payload-handle.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/plugin-service/storage/payload-handle.ts
rename to packages/plugin-sdk-service/storage/payload-handle.ts
diff --git a/app/lib/utils/plugin-provider/plugin-service/storage/universal.storage.ts b/packages/plugin-sdk-service/storage/universal.storage.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/plugin-service/storage/universal.storage.ts
rename to packages/plugin-sdk-service/storage/universal.storage.ts
diff --git a/app/lib/utils/plugin-provider/plugin-service/storage/web.storage.ts b/packages/plugin-sdk-service/storage/web.storage.ts
similarity index 100%
rename from app/lib/utils/plugin-provider/plugin-service/storage/web.storage.ts
rename to packages/plugin-sdk-service/storage/web.storage.ts

From 983abe5f195ac16b97672b44f2d348cef6e7f693 Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 02:47:07 +0900
Subject: [PATCH 21/36] add lint list style

---
 app/lib/main/index.tsx                      |   2 +-
 app/lib/pages/lint-screen.tsx               |  85 ------
 app/lib/pages/lint/index.ts                 |   1 +
 app/lib/pages/lint/lint-colors.ts           |   7 +
 app/lib/pages/lint/lint-level-indicator.tsx |  43 +++
 app/lib/pages/lint/lint-screen.tsx          | 295 ++++++++++++++++++++
 6 files changed, 347 insertions(+), 86 deletions(-)
 delete mode 100644 app/lib/pages/lint-screen.tsx
 create mode 100644 app/lib/pages/lint/index.ts
 create mode 100644 app/lib/pages/lint/lint-colors.ts
 create mode 100644 app/lib/pages/lint/lint-level-indicator.tsx
 create mode 100644 app/lib/pages/lint/lint-screen.tsx

diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx
index 50a169c0..16a627f0 100644
--- a/app/lib/main/index.tsx
+++ b/app/lib/main/index.tsx
@@ -18,7 +18,7 @@ import { FontReplacerScreen } from "../pages/tool-box/font-replacer";
 import { ButtonMakerScreen } from "../pages/design/button-maker-screen";
 import { ComponentViewScreen } from "../pages/component-view";
 import { LayoutViewScreen } from "../pages/layout-view";
-import { LintScreen } from "../pages/lint-screen";
+import { LintScreen } from "../pages/lint/lint-screen";
 import { GlobalizationScreen } from "../pages/g11n-screen";
 import { IconsScreen } from "../pages/icons-screen";
 import { CodeScreen } from "../pages/code/code-screen";
diff --git a/app/lib/pages/lint-screen.tsx b/app/lib/pages/lint-screen.tsx
deleted file mode 100644
index d5af3570..00000000
--- a/app/lib/pages/lint-screen.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Button, Typography } from "@material-ui/core";
-import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks";
-import * as React from "react";
-import { Preview } from "../components/preview";
-import { LintTreeView } from "../lint";
-import { EK_FOCUS_REQUEST, EK_LINT_FEEDBACK } from "../constants/ek.constant";
-
-interface State {
-  feedbacks: Array<ReflectLintFeedback>;
-}
-
-export class LintScreen extends React.Component<any, State> {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      feedbacks: [],
-    };
-  }
-
-  componentDidMount() {
-    window.addEventListener("message", (ev: MessageEvent) => {
-      const msg = ev.data.pluginMessage;
-      if (msg.type == EK_LINT_FEEDBACK) {
-        const feedbacks = msg.data as Array<ReflectLintFeedback>;
-        this.setState((state, props) => {
-          return { feedbacks: feedbacks };
-        });
-      }
-    });
-  }
-
-  onFeedbackTap(feedback: ReflectLintFeedback) {
-    const targetNodeId = feedback.node.id;
-    console.log(targetNodeId);
-    // move to target element
-    parent.postMessage(
-      {
-        pluginMessage: {
-          type: EK_FOCUS_REQUEST,
-          data: {
-            id: targetNodeId,
-          },
-        },
-      },
-      "*"
-    );
-  }
-
-  render() {
-    const { feedbacks } = this.state;
-    return (
-      <>
-        <Preview data={undefined} name="selected node name" />
-        <ul>
-          <h1>hi</h1>
-          <LintTreeView
-            ignoredErrorArray={[]}
-            // activeNodeIds={props.activeNodeIds}
-            // selectedListItems={props.selectedListItems}
-            errorArray={[]}
-            onClick={() => {}}
-            key={"elfishefl"}
-            node={[{ name: "hi" }, { name: "hi" }, { name: "hi" }]}
-          />
-          {feedbacks.map((item, i) => {
-            return (
-              <li key={i}>
-                <Typography variant="h6">{item.name}</Typography>
-                <Typography variant="body2">{item.userMessage}</Typography>
-                <Button
-                  onClick={() => {
-                    this.onFeedbackTap(item);
-                  }}
-                >
-                  goto
-                </Button>
-              </li>
-            );
-          })}
-        </ul>
-      </>
-    );
-  }
-}
diff --git a/app/lib/pages/lint/index.ts b/app/lib/pages/lint/index.ts
new file mode 100644
index 00000000..df8c0a77
--- /dev/null
+++ b/app/lib/pages/lint/index.ts
@@ -0,0 +1 @@
+export * from "./lint-screen";
diff --git a/app/lib/pages/lint/lint-colors.ts b/app/lib/pages/lint/lint-colors.ts
new file mode 100644
index 00000000..ad253014
--- /dev/null
+++ b/app/lib/pages/lint/lint-colors.ts
@@ -0,0 +1,7 @@
+export enum LintColor {
+  warn = "warn",
+  error = "error",
+  none = "none",
+  ignore = "ignore",
+  todo = "todo",
+}
diff --git a/app/lib/pages/lint/lint-level-indicator.tsx b/app/lib/pages/lint/lint-level-indicator.tsx
new file mode 100644
index 00000000..da42c046
--- /dev/null
+++ b/app/lib/pages/lint/lint-level-indicator.tsx
@@ -0,0 +1,43 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import * as React from "react";
+import { LintColor } from "./lint-colors";
+
+interface ILintLevelIndicator {
+  color: LintColor;
+}
+
+export function LintLevelIndicator(props: ILintLevelIndicator) {
+  return <Indicator color={props.color} />;
+}
+
+interface IIndicator {
+  color: LintColor;
+}
+
+const Indicator = styled.div<IIndicator>`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+
+  ${(props) =>
+    props.color === LintColor.warn
+      ? css`
+          background: #ffc700;
+        `
+      : props.color === LintColor.error
+      ? css`
+          background: #ff3a3a;
+        `
+      : props.color === LintColor.ignore
+      ? css`
+          background: #c6c6c6;
+        `
+      : props.color === LintColor.todo
+      ? css`
+          background: #000;
+        `
+      : css`
+          background: #fff;
+        `};
+`;
diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx
new file mode 100644
index 00000000..e0f01ad3
--- /dev/null
+++ b/app/lib/pages/lint/lint-screen.tsx
@@ -0,0 +1,295 @@
+import { Button, Typography } from "@material-ui/core";
+import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks";
+import * as React from "react";
+import { Preview } from "../../components/preview";
+import { LintTreeView } from "../../lint";
+import {
+  EK_FOCUS_REQUEST,
+  EK_LINT_FEEDBACK,
+} from "../../constants/ek.constant";
+import styled from "@emotion/styled";
+import { LintLevelIndicator } from "./lint-level-indicator";
+import { LintColor } from "./lint-colors";
+
+interface State {
+  feedbacks: Array<ReflectLintFeedback>;
+}
+
+const TestObj = [
+  {
+    name: "MissingTextStyleWarning",
+    userMessage:
+      'missing text style on text node "“iPhone XS - 3” is not a valid component name"',
+    node: {
+      name: "“iPhone XS - 3” is not a valid component name",
+      type: "TEXT",
+      origin: "TEXT",
+      id: "I2787:3460;2787:3435;61:171",
+      parentReference: {
+        name: "(base) error-line-item",
+        type: "FRAME",
+        origin: "INSTANCE",
+        id: "I2787:3460;2787:3435",
+        children: [
+          {
+            name: "“iPhone XS - 3” is not a valid component name",
+            type: "TEXT",
+            origin: "TEXT",
+            id: "I2787:3460;2787:3435;61:171",
+          },
+          {
+            name: "lint-level-indicator",
+            type: "FRAME",
+            origin: "INSTANCE",
+            id: "I2787:3460;2787:3435;2831:11867",
+          },
+        ],
+      },
+    },
+  },
+  {
+    name: "MissingTextStyleWarning",
+    userMessage:
+      'missing text style on text node "“iPhone XS - 3” is not a valid component name"',
+    node: {
+      name: "“iPhone XS - 3” is not a valid component name",
+      type: "TEXT",
+      origin: "TEXT",
+      id: "I2787:3465;2787:3435;61:171",
+      parentReference: {
+        name: "(base) error-line-item",
+        type: "FRAME",
+        origin: "INSTANCE",
+        id: "I2787:3465;2787:3435",
+        children: [
+          {
+            name: "“iPhone XS - 3” is not a valid component name",
+            type: "TEXT",
+            origin: "TEXT",
+            id: "I2787:3465;2787:3435;61:171",
+          },
+          {
+            name: "lint-level-indicator",
+            type: "FRAME",
+            origin: "INSTANCE",
+            id: "I2787:3465;2787:3435;2831:11867",
+          },
+        ],
+      },
+    },
+  },
+  {
+    name: "MissingTextStyleWarning",
+    userMessage:
+      'missing text style on text node "“iPhone XS - 3” is not a valid component name"',
+    node: {
+      name: "“iPhone XS - 3” is not a valid component name",
+      type: "TEXT",
+      origin: "TEXT",
+      id: "I2787:3470;2787:3435;61:171",
+      parentReference: {
+        name: "(base) error-line-item",
+        type: "FRAME",
+        origin: "INSTANCE",
+        id: "I2787:3470;2787:3435",
+        children: [
+          {
+            name: "“iPhone XS - 3” is not a valid component name",
+            type: "TEXT",
+            origin: "TEXT",
+            id: "I2787:3470;2787:3435;61:171",
+          },
+          {
+            name: "lint-level-indicator",
+            type: "FRAME",
+            origin: "INSTANCE",
+            id: "I2787:3470;2787:3435;2831:11867",
+          },
+        ],
+      },
+    },
+  },
+  {
+    name: "MissingTextStyleWarning",
+    userMessage:
+      'missing text style on text node "“iPhone XS - 3” is not a valid component name"',
+    node: {
+      name: "“iPhone XS - 3” is not a valid component name",
+      type: "TEXT",
+      origin: "TEXT",
+      id: "I2787:3475;2787:3435;61:171",
+      parentReference: {
+        name: "(base) error-line-item",
+        type: "FRAME",
+        origin: "INSTANCE",
+        id: "I2787:3475;2787:3435",
+        children: [
+          {
+            name: "“iPhone XS - 3” is not a valid component name",
+            type: "TEXT",
+            origin: "TEXT",
+            id: "I2787:3475;2787:3435;61:171",
+          },
+          {
+            name: "lint-level-indicator",
+            type: "FRAME",
+            origin: "INSTANCE",
+            id: "I2787:3475;2787:3435;2831:11867",
+          },
+        ],
+      },
+    },
+  },
+  {
+    name: "MissingTextStyleWarning",
+    userMessage:
+      'missing text style on text node "“iPhone XS - 3” is not a valid component name"',
+    node: {
+      name: "“iPhone XS - 3” is not a valid component name",
+      type: "TEXT",
+      origin: "TEXT",
+      id: "I2787:3695;2787:3435;61:171",
+      parentReference: {
+        name: "(base) error-line-item",
+        type: "FRAME",
+        origin: "INSTANCE",
+        id: "I2787:3695;2787:3435",
+        children: [
+          {
+            name: "“iPhone XS - 3” is not a valid component name",
+            type: "TEXT",
+            origin: "TEXT",
+            id: "I2787:3695;2787:3435;61:171",
+          },
+          {
+            name: "lint-level-indicator",
+            type: "FRAME",
+            origin: "INSTANCE",
+            id: "I2787:3695;2787:3435;2831:11867",
+          },
+        ],
+      },
+    },
+  },
+];
+
+export class LintScreen extends React.Component<any, State> {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      feedbacks: [],
+    };
+  }
+
+  componentDidMount() {
+    window.addEventListener("message", (ev: MessageEvent) => {
+      const msg = ev.data.pluginMessage;
+      if (msg.type == EK_LINT_FEEDBACK) {
+        const feedbacks = msg.data as Array<ReflectLintFeedback>;
+        this.setState((state, props) => {
+          return { feedbacks: feedbacks };
+        });
+      }
+    });
+  }
+
+  onFeedbackTap(feedback: ReflectLintFeedback) {
+    const targetNodeId = feedback.node.id;
+    console.log(targetNodeId);
+    // move to target element
+    parent.postMessage(
+      {
+        pluginMessage: {
+          type: EK_FOCUS_REQUEST,
+          data: {
+            id: targetNodeId,
+          },
+        },
+      },
+      "*"
+    );
+  }
+
+  render() {
+    // const { feedbacks } = this.state;
+    const feedbacks = TestObj;
+    return (
+      <>
+        <Preview data={undefined} name="selected node name" />
+
+        {console.log(feedbacks)}
+        <ErrorWrapper>
+          <ErrorTitle>{feedbacks.length} Improvements found</ErrorTitle>
+          <ErrorComent>
+            Across 24 layers, there were <b>4 must-fix errors</b> and 8
+            warnings.
+          </ErrorComent>
+          <ErrorList>
+            {feedbacks.map((item, i) => {
+              return (
+                <List key={i}>
+                  <Label>{item.node.name}</Label>
+                  <LintLevelIndicator color={LintColor.warn} />
+                </List>
+              );
+            })}
+          </ErrorList>
+        </ErrorWrapper>
+      </>
+    );
+  }
+}
+
+const ErrorWrapper = styled.div`
+  margin: 0 8px;
+`;
+
+const ErrorTitle = styled.h6`
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  color: #000;
+  margin: 0;
+  margin-top: 24px;
+`;
+
+const ErrorComent = styled.h6`
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 14px;
+  color: #959595;
+
+  b {
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 15px;
+  }
+`;
+
+const ErrorList = styled.ul`
+  padding: 0;
+`;
+
+const List = styled.li`
+  display: flex;
+  align-items: center;
+
+  margin-bottom: 12px;
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+
+const Label = styled.h6`
+  font-style: normal;
+  font-weight: normal;
+  font-size: 13px;
+  line-height: 16px;
+  list-style-type: none;
+  color: #242424;
+
+  margin: 0;
+  margin-right: auto;
+`;

From dfb1b2ec087a65b931c44c9157893c5ce1c3afe9 Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 02:55:18 +0900
Subject: [PATCH 22/36] qf

---
 webdev/src/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webdev/src/index.tsx b/webdev/src/index.tsx
index 924bbf7e..bf98061a 100644
--- a/webdev/src/index.tsx
+++ b/webdev/src/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import reportWebVitals from "./reportWebVitals";
 import App from "app/lib/main";
-import { PluginSdkService } from "app/lib/utils/plugin-provider/plugin-service";
+import { PluginSdkService } from "@plugin-sdk/service";
 import { TargetPlatform } from "app/lib/utils/plugin-init/init-target-platform";
 
 window.addEventListener("message", (rev) => {

From ac30ed3aadc09e0185cc46cf49cce05c4b2c93b8 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 03:05:01 +0900
Subject: [PATCH 23/36] register lint code thread logics

---
 app/lib/lint/__plugin/events.ts               | 13 ++++++++++
 app/lib/lint/__plugin/index.ts                | 24 +++++--------------
 .../data-mapper/{ => __plugin}/events.ts      |  0
 .../tool-box/data-mapper/__plugin/index.ts    |  2 +-
 .../data-mapper/data-mapper-screen.tsx        |  2 +-
 app/lib/utils/plugin-init/index.ts            |  1 +
 6 files changed, 22 insertions(+), 20 deletions(-)
 create mode 100644 app/lib/lint/__plugin/events.ts
 rename app/lib/pages/tool-box/data-mapper/{ => __plugin}/events.ts (100%)

diff --git a/app/lib/lint/__plugin/events.ts b/app/lib/lint/__plugin/events.ts
new file mode 100644
index 00000000..692b9640
--- /dev/null
+++ b/app/lib/lint/__plugin/events.ts
@@ -0,0 +1,13 @@
+import { PluginSdk } from "@plugin-sdk/app";
+import { PluginSdkService } from "@plugin-sdk/service";
+
+const EVKEY = "lint-runner-custom-transport";
+export interface D {}
+
+export function fromApp(data: D) {
+  PluginSdk.appEvent(EVKEY, data);
+}
+
+export function onService(cb: (data: D) => void) {
+  PluginSdkService.onAppReqquest(EVKEY, cb);
+}
diff --git a/app/lib/lint/__plugin/index.ts b/app/lib/lint/__plugin/index.ts
index 2ffcfc6b..b7b58e0e 100644
--- a/app/lib/lint/__plugin/index.ts
+++ b/app/lib/lint/__plugin/index.ts
@@ -1,20 +1,8 @@
-// onService(main_cb);
+import { onService, D } from "./events";
 
-// // main callback
-// function main_cb(evt: _Event_DataMapper_GoodUserInputTransfer) {
-//   const datasourceNode = Figma.figma.getNodeById(
-//     evt.sourceNodeId
-//   ) as Figma.SceneNode;
-//   const targets = evt.targetNodesId.map((id) => Figma.figma.getNodeById(id));
-//   const data = extractDataFromDataSourceNode(datasourceNode);
+onService(main_cb);
 
-//   targets.forEach((target) => {
-//     if ("children" in target) {
-//       mapDataToSelection(target as Figma.SceneNode, data);
-//     } else {
-//       PluginSdk.notify(
-//         "ignoring since one of the selection is not a type of frame or group"
-//       );
-//     }
-//   });
-// }
+// main callback
+function main_cb(evt: D) {
+  // to logic
+}
diff --git a/app/lib/pages/tool-box/data-mapper/events.ts b/app/lib/pages/tool-box/data-mapper/__plugin/events.ts
similarity index 100%
rename from app/lib/pages/tool-box/data-mapper/events.ts
rename to app/lib/pages/tool-box/data-mapper/__plugin/events.ts
diff --git a/app/lib/pages/tool-box/data-mapper/__plugin/index.ts b/app/lib/pages/tool-box/data-mapper/__plugin/index.ts
index de161339..b34403ba 100644
--- a/app/lib/pages/tool-box/data-mapper/__plugin/index.ts
+++ b/app/lib/pages/tool-box/data-mapper/__plugin/index.ts
@@ -3,7 +3,7 @@ import { variant } from "@design-sdk/figma/features";
 import { Figma } from "@design-sdk/figma";
 import { PluginSdk } from "@plugin-sdk/app";
 import { extractDataFromDataSourceNode } from "../data-source-node";
-import { onService, _Event_DataMapper_GoodUserInputTransfer } from "../events";
+import { onService, _Event_DataMapper_GoodUserInputTransfer } from "./events";
 
 export const TEMPLATE_NODE_PATTERN = "@//template-for-manipulation/*";
 
diff --git a/app/lib/pages/tool-box/data-mapper/data-mapper-screen.tsx b/app/lib/pages/tool-box/data-mapper/data-mapper-screen.tsx
index 9ecea85b..ac5559e8 100644
--- a/app/lib/pages/tool-box/data-mapper/data-mapper-screen.tsx
+++ b/app/lib/pages/tool-box/data-mapper/data-mapper-screen.tsx
@@ -5,7 +5,7 @@ import {
   useRangeSelection,
 } from "../../../utils/plugin-hooks";
 import { findDatasourceNodeAndOthers } from "./data-source-node";
-import { fromApp } from "./events";
+import { fromApp } from "./__plugin/events";
 
 export function DataMapperScreen() {
   const pairSelections = useRangeSelection(2, 5);
diff --git a/app/lib/utils/plugin-init/index.ts b/app/lib/utils/plugin-init/index.ts
index 8ca5273f..0f174b91 100644
--- a/app/lib/utils/plugin-init/index.ts
+++ b/app/lib/utils/plugin-init/index.ts
@@ -1,2 +1,3 @@
 // DO NOT REMOVE THIS LINE
 import "../../pages/tool-box/data-mapper/__plugin";
+import "../../lint/__plugin";

From 6326d4f25398e9165f46c7bf7652afe6ca9e2025 Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 03:24:53 +0900
Subject: [PATCH 24/36] add: lint icons

---
 app/lib/components/assets/mdi-texture.svg               | 3 +++
 app/lib/components/assets/missing-color-style-error.svg | 3 +++
 app/lib/components/assets/missing-text.svg              | 3 +++
 app/lib/components/assets/name-error.svg                | 3 +++
 4 files changed, 12 insertions(+)
 create mode 100644 app/lib/components/assets/mdi-texture.svg
 create mode 100644 app/lib/components/assets/missing-color-style-error.svg
 create mode 100644 app/lib/components/assets/missing-text.svg
 create mode 100644 app/lib/components/assets/name-error.svg

diff --git a/app/lib/components/assets/mdi-texture.svg b/app/lib/components/assets/mdi-texture.svg
new file mode 100644
index 00000000..cff0e7b4
--- /dev/null
+++ b/app/lib/components/assets/mdi-texture.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.51 3.08L3.08 19.51C3.17 19.85 3.35 20.16 3.59 20.41C3.84 20.65 4.15 20.83 4.49 20.92L20.93 4.49C20.74 3.8 20.2 3.26 19.51 3.08ZM11.88 3L3 11.88V14.71L14.71 3H11.88ZM5 3C3.9 3 3 3.9 3 5V7L7 3H5ZM19 21C19.55 21 20.05 20.78 20.41 20.41C20.78 20.05 21 19.55 21 19V17L17 21H19ZM9.29 21H12.12L21 12.12V9.29L9.29 21Z" fill="black"/>
+</svg>
diff --git a/app/lib/components/assets/missing-color-style-error.svg b/app/lib/components/assets/missing-color-style-error.svg
new file mode 100644
index 00000000..e6610c10
--- /dev/null
+++ b/app/lib/components/assets/missing-color-style-error.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.26953L6.34 7.92953C3.22 11.0495 3.22 16.1195 6.34 19.2395C7.9 20.7995 9.95 21.5795 12 21.5795C14.05 21.5795 16.1 20.7995 17.66 19.2395C20.78 16.1195 20.78 11.0495 17.66 7.92953L12 2.26953ZM12 5.09953L7.76 9.34953C6.62 10.4795 6 11.9895 6 13.5895C6 15.1895 6.62 16.6895 7.76 17.8295C8.89 18.9695 10.4 19.5895 12 19.5895C13.6 19.5895 15.11 18.9695 16.24 17.8295C17.38 16.6895 18 15.1895 18 13.5895C18 11.9895 17.38 10.4795 16.24 9.34953L12 5.09953Z" fill="black"/>
+</svg>
diff --git a/app/lib/components/assets/missing-text.svg b/app/lib/components/assets/missing-text.svg
new file mode 100644
index 00000000..c36e8264
--- /dev/null
+++ b/app/lib/components/assets/missing-text.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.5 4V7H7.5V19H10.5V7H15.5V4H2.5ZM21.5 9H12.5V12H15.5V19H18.5V12H21.5V9Z" fill="black"/>
+</svg>
diff --git a/app/lib/components/assets/name-error.svg b/app/lib/components/assets/name-error.svg
new file mode 100644
index 00000000..988dbb3b
--- /dev/null
+++ b/app/lib/components/assets/name-error.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.05033 2.72363H6.41033V17.0036H8.79033V6.50363H8.85033L15.3503 17.0036H17.9903V2.72363H15.6103V13.2436H15.5703L9.05033 2.72363ZM22.2103 20H2.21033V24H22.2103V20Z" fill="black"/>
+</svg>

From 10458c47295e0706929466d14bfc5a397c5d9d0e Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 03:32:43 +0900
Subject: [PATCH 25/36] rename: LintColor to Level

---
 app/lib/pages/lint/lint-colors.ts           |  2 +-
 app/lib/pages/lint/lint-level-indicator.tsx | 14 +++++++-------
 app/lib/pages/lint/lint-screen.tsx          |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/app/lib/pages/lint/lint-colors.ts b/app/lib/pages/lint/lint-colors.ts
index ad253014..93f3bedd 100644
--- a/app/lib/pages/lint/lint-colors.ts
+++ b/app/lib/pages/lint/lint-colors.ts
@@ -1,4 +1,4 @@
-export enum LintColor {
+export enum Level {
   warn = "warn",
   error = "error",
   none = "none",
diff --git a/app/lib/pages/lint/lint-level-indicator.tsx b/app/lib/pages/lint/lint-level-indicator.tsx
index da42c046..4c300c2b 100644
--- a/app/lib/pages/lint/lint-level-indicator.tsx
+++ b/app/lib/pages/lint/lint-level-indicator.tsx
@@ -1,10 +1,10 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import * as React from "react";
-import { LintColor } from "./lint-colors";
+import { Level } from "./lint-colors";
 
 interface ILintLevelIndicator {
-  color: LintColor;
+  color: Level;
 }
 
 export function LintLevelIndicator(props: ILintLevelIndicator) {
@@ -12,7 +12,7 @@ export function LintLevelIndicator(props: ILintLevelIndicator) {
 }
 
 interface IIndicator {
-  color: LintColor;
+  color: Level;
 }
 
 const Indicator = styled.div<IIndicator>`
@@ -21,19 +21,19 @@ const Indicator = styled.div<IIndicator>`
   border-radius: 50%;
 
   ${(props) =>
-    props.color === LintColor.warn
+    props.color === Level.warn
       ? css`
           background: #ffc700;
         `
-      : props.color === LintColor.error
+      : props.color === Level.error
       ? css`
           background: #ff3a3a;
         `
-      : props.color === LintColor.ignore
+      : props.color === Level.ignore
       ? css`
           background: #c6c6c6;
         `
-      : props.color === LintColor.todo
+      : props.color === Level.todo
       ? css`
           background: #000;
         `
diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx
index e0f01ad3..bf8a83d7 100644
--- a/app/lib/pages/lint/lint-screen.tsx
+++ b/app/lib/pages/lint/lint-screen.tsx
@@ -9,7 +9,7 @@ import {
 } from "../../constants/ek.constant";
 import styled from "@emotion/styled";
 import { LintLevelIndicator } from "./lint-level-indicator";
-import { LintColor } from "./lint-colors";
+import { Level } from "./lint-colors";
 
 interface State {
   feedbacks: Array<ReflectLintFeedback>;
@@ -230,7 +230,7 @@ export class LintScreen extends React.Component<any, State> {
               return (
                 <List key={i}>
                   <Label>{item.node.name}</Label>
-                  <LintLevelIndicator color={LintColor.warn} />
+                  <LintLevelIndicator color={Level.warn} />
                 </List>
               );
             })}

From fb6b71fa2060969bd282e183c7f9a45b1735cf63 Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 03:33:25 +0900
Subject: [PATCH 26/36] add: error icon component

---
 app/lib/pages/lint/lint-error-icon.tsx | 33 ++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 app/lib/pages/lint/lint-error-icon.tsx

diff --git a/app/lib/pages/lint/lint-error-icon.tsx b/app/lib/pages/lint/lint-error-icon.tsx
new file mode 100644
index 00000000..17cb24fb
--- /dev/null
+++ b/app/lib/pages/lint/lint-error-icon.tsx
@@ -0,0 +1,33 @@
+import * as React from "react";
+
+export enum LintError {
+  text = "missing-text-style",
+  name = "name-error",
+  mdi = "mdi_texture",
+  color = "missing-color-style-error",
+}
+
+interface Props {
+  id?: LintError;
+}
+
+export function LintErrorIcon(props: Props) {
+  const MdiTextureIcon = require("./assets/mdi-texture.svg") as string;
+  const ColorErrorIcon =
+    require("./assets/missing-color-style-error.svg") as string;
+  const TextErrorIcon = require("./assets/missing-text.svg") as string;
+  const NameErrorIcon = require("./assets/name-error.svg") as string;
+
+  switch (props.id) {
+    case LintError.text:
+      return <TextErrorIcon />;
+    case LintError.name:
+      return <NameErrorIcon />;
+    case LintError.mdi:
+      return <MdiTextureIcon />;
+    case LintError.color:
+      return <ColorErrorIcon />;
+    default:
+      return <></>;
+  }
+}

From 88bbc6e33e6ade657ec5aa2b4d1e9cfab8090ce8 Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 03:36:49 +0900
Subject: [PATCH 27/36] move: ErrorLineItem function

---
 app/lib/pages/lint/lint-screen.tsx | 30 ++++++++++++++++++------------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx
index bf8a83d7..ae6f7b00 100644
--- a/app/lib/pages/lint/lint-screen.tsx
+++ b/app/lib/pages/lint/lint-screen.tsx
@@ -212,29 +212,35 @@ export class LintScreen extends React.Component<any, State> {
   }
 
   render() {
+    function ErrorLineItem() {
+      return (
+        <>
+          <ErrorList>
+            {feedbacks.map((item, i) => {
+              return (
+                <List key={i}>
+                  <Label>{item.node.name}</Label>
+                  <LintLevelIndicator color={Level.warn} />
+                </List>
+              );
+            })}
+          </ErrorList>
+        </>
+      );
+    }
+
     // const { feedbacks } = this.state;
     const feedbacks = TestObj;
     return (
       <>
         <Preview data={undefined} name="selected node name" />
-
-        {console.log(feedbacks)}
         <ErrorWrapper>
           <ErrorTitle>{feedbacks.length} Improvements found</ErrorTitle>
           <ErrorComent>
             Across 24 layers, there were <b>4 must-fix errors</b> and 8
             warnings.
           </ErrorComent>
-          <ErrorList>
-            {feedbacks.map((item, i) => {
-              return (
-                <List key={i}>
-                  <Label>{item.node.name}</Label>
-                  <LintLevelIndicator color={Level.warn} />
-                </List>
-              );
-            })}
-          </ErrorList>
+          {ErrorLineItem()}
         </ErrorWrapper>
       </>
     );

From a13c7f94df01cf33b226560670418516b08b884c Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 03:38:49 +0900
Subject: [PATCH 28/36] add node cache

---
 figma/src/node-cache/README.md         |  6 ++++
 figma/src/node-cache/index.ts          | 47 ++++++++++++++++++++++++++
 figma/src/node-cache/memoize/README.md |  3 ++
 figma/src/node-cache/memoize/config.ts |  6 ++++
 figma/src/node-cache/memoize/index.ts  |  1 +
 5 files changed, 63 insertions(+)
 create mode 100644 figma/src/node-cache/README.md
 create mode 100644 figma/src/node-cache/index.ts
 create mode 100644 figma/src/node-cache/memoize/README.md
 create mode 100644 figma/src/node-cache/memoize/config.ts
 create mode 100644 figma/src/node-cache/memoize/index.ts

diff --git a/figma/src/node-cache/README.md b/figma/src/node-cache/README.md
new file mode 100644
index 00000000..75bc4113
--- /dev/null
+++ b/figma/src/node-cache/README.md
@@ -0,0 +1,6 @@
+# Node cache existing only on figma code thread.
+
+**for last selection**
+
+- Scene node (raw node)
+- Reflect node (converted node)
diff --git a/figma/src/node-cache/index.ts b/figma/src/node-cache/index.ts
new file mode 100644
index 00000000..55638731
--- /dev/null
+++ b/figma/src/node-cache/index.ts
@@ -0,0 +1,47 @@
+import { SceneNode } from "@design-sdk/figma-types";
+import { ReflectSceneNode } from "@design-sdk/core/nodes";
+
+/** Global runtime figma selection & conversion cache repository
+ * @todo: add conversion cache
+ */
+export class FigmaNodeCache {
+  constructor() {}
+
+  private static _lastSelections: string[] = [];
+  static get lastSelections(): string[] {
+    return this._lastSelections;
+  }
+
+  private static _lastConverted: ReflectSceneNode | null = null;
+  static get lastConverted(): ReflectSceneNode | null {
+    return this._lastConverted;
+  }
+
+  static select(...ids: string[]) {
+    this._lastSelections = ids;
+  }
+
+  static setConverted(rnode: ReflectSceneNode) {
+    this._lastConverted = rnode;
+  }
+
+  static get lastId(): string | null {
+    return this._lastSelections[
+      this._lastSelections.length - 1
+    ]; /* TODO: check if last index of selection is truely a last selection as user input seq*/
+  }
+
+  static getLast(): SceneNode | null {
+    if (this._lastSelections) {
+      return figma.getNodeById(this.lastId) as SceneNode;
+    }
+    return null;
+  }
+
+  static getLastConverted(): ReflectSceneNode | null {
+    if (this.lastId == this._lastConverted?.id) {
+      return this._lastConverted;
+    }
+    return null;
+  }
+}
diff --git a/figma/src/node-cache/memoize/README.md b/figma/src/node-cache/memoize/README.md
new file mode 100644
index 00000000..061af5bb
--- /dev/null
+++ b/figma/src/node-cache/memoize/README.md
@@ -0,0 +1,3 @@
+# Node calculation memoization repository.
+
+> Stores cache based on node complexity. e.g. for single layer, no memoization will be enabled.
diff --git a/figma/src/node-cache/memoize/config.ts b/figma/src/node-cache/memoize/config.ts
new file mode 100644
index 00000000..3aa6ea19
--- /dev/null
+++ b/figma/src/node-cache/memoize/config.ts
@@ -0,0 +1,6 @@
+const _CACHE_TIME_OUT_MS = 700;
+
+export const DEFAULT_MEMOIZATION_CONFIG = {
+  timeout: _CACHE_TIME_OUT_MS,
+  complexity: 10,
+};
diff --git a/figma/src/node-cache/memoize/index.ts b/figma/src/node-cache/memoize/index.ts
new file mode 100644
index 00000000..5c62e04f
--- /dev/null
+++ b/figma/src/node-cache/memoize/index.ts
@@ -0,0 +1 @@
+export * from "./config";

From 948a4bb4b9ead67666ef5fb6254cc964137ba8a8 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 03:39:19 +0900
Subject: [PATCH 29/36] update selection thread to provide nodecache a
 selection data

---
 figma/src/code-thread/selection.ts | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/figma/src/code-thread/selection.ts b/figma/src/code-thread/selection.ts
index 51033def..ab559458 100644
--- a/figma/src/code-thread/selection.ts
+++ b/figma/src/code-thread/selection.ts
@@ -3,6 +3,7 @@ import { convert } from "@design-sdk/figma";
 import { Logger } from "app/lib/utils";
 import { light } from "@design-sdk/core/nodes";
 import { runon } from "./runon";
+import { FigmaNodeCache } from "../node-cache";
 
 export let singleFigmaNodeSelection: SceneNode;
 export let targetNodeId: string;
@@ -14,6 +15,9 @@ export function onfigmaselectionchange() {
   const rawSelections = figma.currentPage.selection;
   console.log("selection", rawSelections);
   const selectionType = analyzeSelection(rawSelections);
+  /* unique and only selection setter */ FigmaNodeCache.select(
+    ...rawSelections.map((s) => s.id)
+  ); /* unique and only selection setter */
   switch (selectionType) {
     case SelectionAnalysis.empty:
       // ignore when nothing was selected
@@ -65,8 +69,10 @@ export function onfigmaselectionchange() {
         data: light.makeReference(rnode),
       });
       // endregion
-
+      FigmaNodeCache.setConverted(rnode);
       runon(rnode);
       return;
+    default:
+      break;
   }
 }

From 20af5b2748d1641ff7c305d3cf32f5091100f520 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 03:39:45 +0900
Subject: [PATCH 30/36] migrate lint handler from `runon` to `lint/__plugin` &
 rm event key

---
 app/lib/constants/ek.constant.ts   |  1 -
 app/lib/lint/__plugin/events.ts    | 11 ++++++++---
 app/lib/lint/__plugin/index.ts     | 28 ++++++++++++++++++++++++++--
 app/lib/pages/lint/lint-screen.tsx |  5 +----
 figma/src/code-thread/runon.ts     | 14 --------------
 5 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/app/lib/constants/ek.constant.ts b/app/lib/constants/ek.constant.ts
index 73f592f0..e7b2ac24 100644
--- a/app/lib/constants/ek.constant.ts
+++ b/app/lib/constants/ek.constant.ts
@@ -1,7 +1,6 @@
 /// EK stands for "Event Key"
 /// the event keys constants
 
-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";
diff --git a/app/lib/lint/__plugin/events.ts b/app/lib/lint/__plugin/events.ts
index 692b9640..b6e8f556 100644
--- a/app/lib/lint/__plugin/events.ts
+++ b/app/lib/lint/__plugin/events.ts
@@ -2,12 +2,17 @@ import { PluginSdk } from "@plugin-sdk/app";
 import { PluginSdkService } from "@plugin-sdk/service";
 
 const EVKEY = "lint-runner-custom-transport";
-export interface D {}
+export const _APP_EVENT_LINT_RESULT_EK = "lint-result";
+interface LintRequest {
+  type: "lint-request";
+}
+
+export type _Lint_Event = LintRequest;
 
-export function fromApp(data: D) {
+export function fromApp(data: _Lint_Event) {
   PluginSdk.appEvent(EVKEY, data);
 }
 
-export function onService(cb: (data: D) => void) {
+export function onService(cb: (data: _Lint_Event) => void) {
   PluginSdkService.onAppReqquest(EVKEY, cb);
 }
diff --git a/app/lib/lint/__plugin/index.ts b/app/lib/lint/__plugin/index.ts
index b7b58e0e..31f5d59a 100644
--- a/app/lib/lint/__plugin/index.ts
+++ b/app/lib/lint/__plugin/index.ts
@@ -1,8 +1,32 @@
-import { onService, D } from "./events";
+import { onService, _Lint_Event, _APP_EVENT_LINT_RESULT_EK } from "./events";
+import { runLints } from "@designto/clean";
+import { FigmaNodeCache } from "figma/src/node-cache";
 
 onService(main_cb);
 
 // main callback
-function main_cb(evt: D) {
+function main_cb(evt: _Lint_Event) {
   // to logic
+
+  switch (evt.type) {
+    case "lint-request":
+      _handle_lint_request();
+      break;
+  }
+}
+
+function _handle_lint_request() {
+  //#region  run linter
+  const rnode = FigmaNodeCache.getLastConverted();
+  if (rnode) {
+    const feedbacks = runLints(rnode);
+    console.warn(feedbacks);
+    figma.ui.postMessage({
+      type: _APP_EVENT_LINT_RESULT_EK,
+      data: feedbacks,
+    });
+  } else {
+    console.warn("user requested linting, but non selected to run lint on.");
+  }
+  //#endregion
 }
diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx
index e0f01ad3..cafde246 100644
--- a/app/lib/pages/lint/lint-screen.tsx
+++ b/app/lib/pages/lint/lint-screen.tsx
@@ -3,10 +3,7 @@ import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks";
 import * as React from "react";
 import { Preview } from "../../components/preview";
 import { LintTreeView } from "../../lint";
-import {
-  EK_FOCUS_REQUEST,
-  EK_LINT_FEEDBACK,
-} from "../../constants/ek.constant";
+import { EK_FOCUS_REQUEST } from "../../constants/ek.constant";
 import styled from "@emotion/styled";
 import { LintLevelIndicator } from "./lint-level-indicator";
 import { LintColor } from "./lint-colors";
diff --git a/figma/src/code-thread/runon.ts b/figma/src/code-thread/runon.ts
index 691170bb..20476919 100644
--- a/figma/src/code-thread/runon.ts
+++ b/figma/src/code-thread/runon.ts
@@ -1,10 +1,7 @@
-import { runLints } from "@designto/clean";
-
 import {
   EK_COMPUTE_STARTED,
   EK_GENERATED_CODE_PLAIN,
   EK_IMAGE_ASSET_REPOSITORY_MAP,
-  EK_LINT_FEEDBACK,
   EK_VANILLA_TRANSPORT,
 } from "app/lib/constants/ek.constant";
 import { vanilla, repo_assets } from "@design-sdk/core";
@@ -38,17 +35,6 @@ export async function runon(rnode: ReflectSceneNode) {
     return;
   }
 
-  //#region  run linter
-  if (userInterestUnset() || user_interest == "lint") {
-    const feedbacks = runLints(rnode);
-    console.warn(feedbacks);
-    figma.ui.postMessage({
-      type: EK_LINT_FEEDBACK,
-      data: feedbacks,
-    });
-  }
-  //#endregion
-
   // region make vanilla
   if (user_interest == "g11n" || user_interest == "exporter") {
     const globalizatoinScreen = vanilla.makeVanilla(rnode as ReflectFrameNode);

From c4e7202aaf502a3d51ec7db85b99024f80fa8251 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 03:43:21 +0900
Subject: [PATCH 31/36] disable window messaging from lint screen

---
 app/lib/pages/lint/lint-screen.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx
index 38baafee..59abcaac 100644
--- a/app/lib/pages/lint/lint-screen.tsx
+++ b/app/lib/pages/lint/lint-screen.tsx
@@ -180,15 +180,15 @@ export class LintScreen extends React.Component<any, State> {
   }
 
   componentDidMount() {
-    window.addEventListener("message", (ev: MessageEvent) => {
-      const msg = ev.data.pluginMessage;
-      if (msg.type == EK_LINT_FEEDBACK) {
-        const feedbacks = msg.data as Array<ReflectLintFeedback>;
-        this.setState((state, props) => {
-          return { feedbacks: feedbacks };
-        });
-      }
-    });
+    // window.addEventListener("message", (ev: MessageEvent) => {
+    //   const msg = ev.data.pluginMessage;
+    //   if (msg.type == EK_LINT_FEEDBACK) {
+    //     const feedbacks = msg.data as Array<ReflectLintFeedback>;
+    //     this.setState((state, props) => {
+    //       return { feedbacks: feedbacks };
+    //     });
+    //   }
+    // });
   }
 
   onFeedbackTap(feedback: ReflectLintFeedback) {

From c21244e6c4dcdb40a1d29f53bdf7f10fb1987177 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 03:45:07 +0900
Subject: [PATCH 32/36] deprecated app shared event keys

---
 app/lib/constants/ek.constant.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/lib/constants/ek.constant.ts b/app/lib/constants/ek.constant.ts
index e7b2ac24..bb6b8770 100644
--- a/app/lib/constants/ek.constant.ts
+++ b/app/lib/constants/ek.constant.ts
@@ -10,6 +10,8 @@ export const EK_ICON_DRAG_AND_DROPPED = "assistant/design/icons/add/dropped";
 export const EK_CREATE_ICON = "assistant/design/icons/add/create";
 //
 export const EK_SET_APP_MODE = "EK_SET_APP_MODE";
+/** @deprecated migrate to plugin-sdk */
 export const EK_FOCUS_REQUEST = "EK_FOCUS_REQUEST";
 export const EK_COMPUTE_STARTED = "EK_COMPUTE_STARTED";
+/** @deprecated migrate to custom app event */
 export const EK_REPLACE_FONT = "EK_REPLACE_FONT";

From 6d12a7932c50152e3dcbdb7d221d4c2263cf1d38 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 04:02:43 +0900
Subject: [PATCH 33/36] add lint action for calling from client

---
 app/lib/lint/__plugin/events.ts    |  2 +-
 app/lib/lint/actions/index.ts      | 13 +++++++++++++
 app/lib/pages/lint/lint-screen.tsx | 19 ++++++++++---------
 3 files changed, 24 insertions(+), 10 deletions(-)
 create mode 100644 app/lib/lint/actions/index.ts

diff --git a/app/lib/lint/__plugin/events.ts b/app/lib/lint/__plugin/events.ts
index b6e8f556..205383e5 100644
--- a/app/lib/lint/__plugin/events.ts
+++ b/app/lib/lint/__plugin/events.ts
@@ -3,7 +3,7 @@ import { PluginSdkService } from "@plugin-sdk/service";
 
 const EVKEY = "lint-runner-custom-transport";
 export const _APP_EVENT_LINT_RESULT_EK = "lint-result";
-interface LintRequest {
+export interface LintRequest {
   type: "lint-request";
 }
 
diff --git a/app/lib/lint/actions/index.ts b/app/lib/lint/actions/index.ts
new file mode 100644
index 00000000..80de7a3d
--- /dev/null
+++ b/app/lib/lint/actions/index.ts
@@ -0,0 +1,13 @@
+import { LintRequest, fromApp } from "../__plugin/events";
+/**
+ * this should be called following below conditions.
+ * 1. ensure single node is selected.
+ *
+ * otherwise, it will not respond.
+ * currently it pushes event to code thread without dedicated callback linked to this function. receiving callback shall be handled on view sie with on message.
+ */
+export function requestLintOnCurrentSelection() {
+  fromApp({
+    type: "lint-request",
+  });
+}
diff --git a/app/lib/pages/lint/lint-screen.tsx b/app/lib/pages/lint/lint-screen.tsx
index 59abcaac..435b0392 100644
--- a/app/lib/pages/lint/lint-screen.tsx
+++ b/app/lib/pages/lint/lint-screen.tsx
@@ -7,6 +7,7 @@ import { EK_FOCUS_REQUEST } from "../../constants/ek.constant";
 import styled from "@emotion/styled";
 import { LintLevelIndicator } from "./lint-level-indicator";
 import { Level } from "./lint-colors";
+import { _APP_EVENT_LINT_RESULT_EK } from "../../lint/__plugin/events";
 
 interface State {
   feedbacks: Array<ReflectLintFeedback>;
@@ -180,15 +181,15 @@ export class LintScreen extends React.Component<any, State> {
   }
 
   componentDidMount() {
-    // window.addEventListener("message", (ev: MessageEvent) => {
-    //   const msg = ev.data.pluginMessage;
-    //   if (msg.type == EK_LINT_FEEDBACK) {
-    //     const feedbacks = msg.data as Array<ReflectLintFeedback>;
-    //     this.setState((state, props) => {
-    //       return { feedbacks: feedbacks };
-    //     });
-    //   }
-    // });
+    window.addEventListener("message", (ev: MessageEvent) => {
+      const msg = ev.data.pluginMessage;
+      if (msg.type == _APP_EVENT_LINT_RESULT_EK) {
+        const feedbacks = msg.data as Array<ReflectLintFeedback>;
+        this.setState((state, props) => {
+          return { feedbacks: feedbacks };
+        });
+      }
+    });
   }
 
   onFeedbackTap(feedback: ReflectLintFeedback) {

From 9bdf0ef010476de5b443352a231c704c96eeb837 Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 04:12:58 +0900
Subject: [PATCH 34/36] add lint paginator

---
 .../assets/prev-before-paginator.svg          |  3 ++
 .../components/assets/prev-next-paginator.svg |  3 ++
 app/lib/pages/lint/lint-process-paginator.tsx | 40 +++++++++++++++++++
 3 files changed, 46 insertions(+)
 create mode 100644 app/lib/components/assets/prev-before-paginator.svg
 create mode 100644 app/lib/components/assets/prev-next-paginator.svg
 create mode 100644 app/lib/pages/lint/lint-process-paginator.tsx

diff --git a/app/lib/components/assets/prev-before-paginator.svg b/app/lib/components/assets/prev-before-paginator.svg
new file mode 100644
index 00000000..43f1f806
--- /dev/null
+++ b/app/lib/components/assets/prev-before-paginator.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.41 16.59L10.83 12L15.41 7.41L14 6L8 12L14 18L15.41 16.59Z" fill="black"/>
+</svg>
diff --git a/app/lib/components/assets/prev-next-paginator.svg b/app/lib/components/assets/prev-next-paginator.svg
new file mode 100644
index 00000000..7b8819ed
--- /dev/null
+++ b/app/lib/components/assets/prev-next-paginator.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 6L8.59003 7.41L13.17 12L8.59003 16.59L10 18L16 12L10 6Z" fill="black"/>
+</svg>
diff --git a/app/lib/pages/lint/lint-process-paginator.tsx b/app/lib/pages/lint/lint-process-paginator.tsx
new file mode 100644
index 00000000..a38f678f
--- /dev/null
+++ b/app/lib/pages/lint/lint-process-paginator.tsx
@@ -0,0 +1,40 @@
+import styled from "@emotion/styled";
+import * as React from "react";
+
+interface Props {
+  index: number;
+  total: number;
+}
+const LeftArrow = require("../../../lib/components/assets/pre-before-paginator.svg");
+const RightArrow = require("../../../lib/components/assets/pre-next-paginator.svg");
+
+export function LintProcessPaginator(props?: Props) {
+  return (
+    <Wrapper>
+      <Paginator>
+        {!props ? "--" : `${props.index} of ${props.total}`}
+      </Paginator>
+      <NextArrow disable={props.index === 1} />
+      <BeforeArrow disable={props.index === props.total} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+`;
+
+const Paginator = styled.span`
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 17px;
+`;
+
+const NextArrow = styled(LeftArrow)<{ disable: boolean }>`
+  fill: ${(props) => (props.disable ? "#808080" : "#000")};
+`;
+
+const BeforeArrow = styled(RightArrow)<{ disable: boolean }>`
+  fill: ${(props) => (props.disable ? "#808080" : "#000")};
+`;

From 76c994ee10ba426c4d3ef403cc1d15acdae2bed2 Mon Sep 17 00:00:00 2001
From: You-j <ijyk3061@gmail.com>
Date: Tue, 17 Aug 2021 04:13:50 +0900
Subject: [PATCH 35/36] fix: icon location

---
 app/lib/pages/lint/lint-error-icon.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/lib/pages/lint/lint-error-icon.tsx b/app/lib/pages/lint/lint-error-icon.tsx
index 17cb24fb..0c5bdfc8 100644
--- a/app/lib/pages/lint/lint-error-icon.tsx
+++ b/app/lib/pages/lint/lint-error-icon.tsx
@@ -12,11 +12,14 @@ interface Props {
 }
 
 export function LintErrorIcon(props: Props) {
-  const MdiTextureIcon = require("./assets/mdi-texture.svg") as string;
+  const MdiTextureIcon =
+    require("../../../lib/components/assets/mdi-texture.svg") as string;
   const ColorErrorIcon =
-    require("./assets/missing-color-style-error.svg") as string;
-  const TextErrorIcon = require("./assets/missing-text.svg") as string;
-  const NameErrorIcon = require("./assets/name-error.svg") as string;
+    require("../../../lib/components/assets/missing-color-style-error.svg") as string;
+  const TextErrorIcon =
+    require("../../../lib/components/assets/missing-text.svg") as string;
+  const NameErrorIcon =
+    require("../../../lib/components/assets/name-error.svg") as string;
 
   switch (props.id) {
     case LintError.text:

From 67faa048879739a366a709ede40efb75aead85c2 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Aug 2021 04:31:35 +0900
Subject: [PATCH 36/36] add make summary function

---
 app/lib/lint/actions/index.ts | 34 ++++++++++++++++++++++++++++++++++
 app/package.json              | 10 ++++++----
 packages/lint                 |  2 +-
 yarn.lock                     |  5 +++++
 4 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/app/lib/lint/actions/index.ts b/app/lib/lint/actions/index.ts
index 80de7a3d..276411d7 100644
--- a/app/lib/lint/actions/index.ts
+++ b/app/lib/lint/actions/index.ts
@@ -1,3 +1,8 @@
+import {
+  ReflectLintFeedback,
+  ReflectLintFeedbackLevel,
+} from "@reflect-ui/lint/lib/feedbacks";
+import _ from "lodash";
 import { LintRequest, fromApp } from "../__plugin/events";
 /**
  * this should be called following below conditions.
@@ -11,3 +16,32 @@ export function requestLintOnCurrentSelection() {
     type: "lint-request",
   });
 }
+
+export function makeSummary(lints: ReadonlyArray<ReflectLintFeedback>): {
+  layers: number;
+  errors: number;
+  warnings: number;
+} {
+  try {
+    const _chain = _.chain(lints);
+    const _grouped = _chain
+      // Group the elements of Array based on `color` property
+      .groupBy("level");
+
+    const _e_count = _grouped[<ReflectLintFeedbackLevel>"error"].length;
+    const _w_count = _grouped[<ReflectLintFeedbackLevel>"warning"].length;
+    const _l_count = Object.keys(_.countBy(lints, "node.id")).length;
+
+    return {
+      errors: _e_count,
+      warnings: _w_count,
+      layers: _l_count,
+    };
+  } catch (e) {
+    return {
+      layers: 0,
+      errors: 0,
+      warnings: 0,
+    };
+  }
+}
diff --git a/app/package.json b/app/package.json
index a1b31775..1f7f0eb7 100644
--- a/app/package.json
+++ b/app/package.json
@@ -19,20 +19,21 @@
         "@emotion/styled": "^11.3.0",
         "@material-ui/core": "^4.11.0",
         "@material-ui/icons": "^4.11.2",
+        "@plugin-sdk/app": "0.0.0",
+        "@plugin-sdk/core": "0.0.0",
         "@reflect-ui/core": "0.0.2-rc.7-local",
         "@reflect-ui/lint": "0.0.5-rc",
         "@reflect.bridged.xyz/ui-generator": "0.0.1",
-        "@plugin-sdk/app": "0.0.0",
-        "@plugin-sdk/core": "0.0.0",
-        "plugin-app": "0.0.0",
         "classnames": "^2.3.1",
         "coli": "0.0.3",
         "copy-to-clipboard": "^3.3.1",
         "dart-style": "^1.3.2-dev",
         "firebase": "^7.23.0",
         "framer-motion": "^4.1.17",
+        "lodash": "^4.17.21",
         "nanoid": "^3.1.20",
         "open": "^7.3.0",
+        "plugin-app": "0.0.0",
         "prism-react-renderer": "^1.1.1",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
@@ -42,7 +43,8 @@
         "refractor": "^3.1.0"
     },
     "devDependencies": {
+        "@types/lodash": "^4.14.172",
         "@types/react": "^17.0.3",
         "@types/react-dom": "^16.9.8"
     }
-}
\ No newline at end of file
+}
diff --git a/packages/lint b/packages/lint
index 49427d80..c1a54310 160000
--- a/packages/lint
+++ b/packages/lint
@@ -1 +1 @@
-Subproject commit 49427d80dd49f45821624b7653b2b9498918815b
+Subproject commit c1a54310cc760e2e67a09a0b208fc03e88a205e9
diff --git a/yarn.lock b/yarn.lock
index 8e7ec5e5..443b6570 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2944,6 +2944,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha1-7ihweulOEdK4J7y+UnC86n8+ce4=
 
+"@types/lodash@^4.14.172":
+  version "4.14.172"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.172.tgz#aad774c28e7bfd7a67de25408e03ee5a8c3d028a"
+  integrity sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==
+
 "@types/long@^4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.1.tgz#459c65fa1867dafe6a8f322c4c51695663cc55e9"