From 2449741fda92ed0747f2b93ef95478309949b90f Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Nov 2020 10:38:59 +0900
Subject: [PATCH 1/5] added designer's icon loader

---
 .vscode/settings.json                     |  3 +++
 figma/src/app/components/dev-tools.tsx    |  2 ++
 figma/src/app/components/icons-loader.tsx | 23 +++++++++++++++++++++++
 3 files changed, 28 insertions(+)
 create mode 100644 .vscode/settings.json
 create mode 100644 figma/src/app/components/icons-loader.tsx

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..3b664107
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "git.ignoreLimitWarning": true
+}
\ No newline at end of file
diff --git a/figma/src/app/components/dev-tools.tsx b/figma/src/app/components/dev-tools.tsx
index f82683c2..ce346100 100644
--- a/figma/src/app/components/dev-tools.tsx
+++ b/figma/src/app/components/dev-tools.tsx
@@ -1,4 +1,5 @@
 import * as React from "react";
+import { IconsLoader } from "./icons-loader";
 
 
 
@@ -34,6 +35,7 @@ export class DevTools extends React.Component {
             <button onClick={this.hideAllOnlyText}>hide only text</button>
             <button onClick={this.onClickRandomize}>randomize</button>
             <button onClick={this.onClickOpenConsole}>open in console</button>
+            <div><IconsLoader /></div>
         </div>
     }
 }
\ No newline at end of file
diff --git a/figma/src/app/components/icons-loader.tsx b/figma/src/app/components/icons-loader.tsx
new file mode 100644
index 00000000..36b50182
--- /dev/null
+++ b/figma/src/app/components/icons-loader.tsx
@@ -0,0 +1,23 @@
+import React, { useEffect, useState } from "react"
+
+const CONFIG_JSON_S3 = "https://reflect-icons.s3-us-west-1.amazonaws.com/material/config.json"
+
+interface IconConfig {
+    default_size: string
+    variant: "outlined" | "outlined" | "twotone" | "default" | "default" | "sharp"
+    family?: string
+    host: "material"
+}
+
+export function IconsLoader() {
+    const [config, setConfig] = useState<Array<IconConfig>>(undefined);
+
+
+    fetch(CONFIG_JSON_S3)
+        .then((response) => response.json())
+        .then((json) => {
+            setConfig(json)
+        })
+
+    return (<p>a</p>)
+}
\ No newline at end of file

From 84bfbeffcf2defae5d5ee6d2258ae3ae3f18eb57 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Nov 2020 12:30:52 +0900
Subject: [PATCH 2/5] initiallized icons-loader component

---
 figma/src/app/components/icons-loader.tsx | 65 ++++++++++++++++++-----
 packages/client-sdk                       |  2 +-
 2 files changed, 53 insertions(+), 14 deletions(-)

diff --git a/figma/src/app/components/icons-loader.tsx b/figma/src/app/components/icons-loader.tsx
index 36b50182..21c9b87a 100644
--- a/figma/src/app/components/icons-loader.tsx
+++ b/figma/src/app/components/icons-loader.tsx
@@ -1,23 +1,62 @@
 import React, { useEffect, useState } from "react"
-
+import { IconConfig } from "@bridged.xyz/client-sdk/lib"
 const CONFIG_JSON_S3 = "https://reflect-icons.s3-us-west-1.amazonaws.com/material/config.json"
 
-interface IconConfig {
-    default_size: string
-    variant: "outlined" | "outlined" | "twotone" | "default" | "default" | "sharp"
-    family?: string
-    host: "material"
+function makeIconUrl(name: string, config: IconConfig): string {
+    return `https://reflect-icons.s3-us-west-1.amazonaws.com/${config.host}/${name}.svg`
 }
 
 export function IconsLoader() {
-    const [config, setConfig] = useState<Array<IconConfig>>(undefined);
+    const [config, setConfig] = useState<Map<string, IconConfig>>(undefined);
+
+    useEffect(() => {
+        fetch(CONFIG_JSON_S3)
+            .then((response) => response.json())
+            .then((json) => {
+                setConfig(json)
+            })
+    }, []);
+
+    const list = config ? <IconList configs={config} /> : <p>loading configuration...</p>
+
+    return (
+        <>
+            {list}
+        </>
+    )
+
+}
+
+function IconSearch() {
+    return <input>type</input>
+}
 
 
-    fetch(CONFIG_JSON_S3)
-        .then((response) => response.json())
-        .then((json) => {
-            setConfig(json)
-        })
+function IconList(props: {
+    configs: Map<string, IconConfig>
+}) {
+    const { configs } = props
+    const keys = Object.keys(configs).slice(0, 100)
+    return <>
+        {
+            keys.map((k) => {
+                const item = configs[k] as IconConfig
+                return <IconItem key={k} name={k} config={item} />
+
+            })
+        }
+    </>
+}
 
-    return (<p>a</p>)
+function IconItem(props: {
+    name: string,
+    config: IconConfig
+}) {
+    const { name, config } = props
+    return <div>
+        <svg width="24" height="24">
+            <image xlinkHref={makeIconUrl(name, config)} width="24" height="24" />
+        </svg>
+        <p> {config.host}</p>
+    </div>
 }
\ No newline at end of file
diff --git a/packages/client-sdk b/packages/client-sdk
index a9e16e29..7af55ced 160000
--- a/packages/client-sdk
+++ b/packages/client-sdk
@@ -1 +1 @@
-Subproject commit a9e16e2974532ecb2dfe02eb6914b9f2a24ddde1
+Subproject commit 7af55cedd9292377cdfa56711762c53136499f12

From 11225869b6103839a226bee6304a76d517612ce4 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Nov 2020 17:33:34 +0900
Subject: [PATCH 3/5] icons loader added to dev-tools

---
 .../app/components/box-directory-input.tsx    |   3 +-
 figma/src/app/components/box-tab.tsx          |  10 +-
 figma/src/app/components/highlight.css        |   7 +-
 figma/src/app/components/highlight.tsx        |   5 +-
 figma/src/app/components/icons-loader.tsx     | 133 ++++++++++++++----
 figma/src/app/constants/ek.constant.ts        |   3 +-
 figma/src/app/screens/code-screen.tsx         |   9 +-
 .../icons-generator/index.ts                  |  42 +++++-
 figma/src/code.ts                             |  12 +-
 figma/src/ui.css                              |  27 ----
 packages/design-sdk                           |   2 +-
 packages/flutter-builder                      |   2 +-
 packages/reflect-detection                    |   2 +-
 13 files changed, 177 insertions(+), 80 deletions(-)

diff --git a/figma/src/app/components/box-directory-input.tsx b/figma/src/app/components/box-directory-input.tsx
index 10915227..c29c5721 100644
--- a/figma/src/app/components/box-directory-input.tsx
+++ b/figma/src/app/components/box-directory-input.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ReactBoxSnippetGenerator } from "@bridged.xyz/box";
+import Button from "@material-ui/core/Button";
 
 function buildFolderSelector(): HTMLInputElement {
     const fileSelector = document.createElement('input');
@@ -57,7 +58,7 @@ export class BoxDirectoryInput extends React.Component {
     render() {
         return <>
             {/* <input type="file" name="file" multiple /> */}
-            <button onClick={this.handleFileSelect}>Select src dir</button>
+            <Button onClick={this.handleFileSelect}>Select src dir</Button>
         </>
     }
 }
\ No newline at end of file
diff --git a/figma/src/app/components/box-tab.tsx b/figma/src/app/components/box-tab.tsx
index 4f1e61b7..2184036c 100644
--- a/figma/src/app/components/box-tab.tsx
+++ b/figma/src/app/components/box-tab.tsx
@@ -1,5 +1,5 @@
+import Button from '@material-ui/core/Button'
 import * as React from 'react'
-import { EK_GENERATED_CODE_PLAIN, EK_PREVIEW_SOURCE } from '../constants/ek.constant'
 import { BoxDirectoryInput } from './box-directory-input'
 
 
@@ -34,12 +34,12 @@ export class BoxTab extends React.Component {
                 <h6>Box section start</h6>
                 <p>currently selected component is... { }</p>
                 <div />
-                <button onClick={this.onClickOpenStorybook}>
+                <Button onClick={this.onClickOpenStorybook}>
                     open in storybook
-                </button>
-                <button onClick={this.onClickOpenGithub}>
+                </Button>
+                <Button onClick={this.onClickOpenGithub}>
                     open in github
-                </button>
+                </Button>
                 <BoxDirectoryInput />
                 <div />
                 <h6>Box section end</h6>
diff --git a/figma/src/app/components/highlight.css b/figma/src/app/components/highlight.css
index 3fc06f19..8544582b 100644
--- a/figma/src/app/components/highlight.css
+++ b/figma/src/app/components/highlight.css
@@ -1,18 +1,17 @@
-
-code{
+code {
   width: max-content;
   height: auto;
 }
 
 
 pre {
-  margin-left:-16px;
+  margin-left: -16px;
   margin-right: -16px;
   padding: 8px;
   overflow: scroll;
 }
 
-.copy{
+.sticky-actions {
   position: sticky;
   right: 4px;
   top: 4px;
diff --git a/figma/src/app/components/highlight.tsx b/figma/src/app/components/highlight.tsx
index 43016449..c3c2af60 100644
--- a/figma/src/app/components/highlight.tsx
+++ b/figma/src/app/components/highlight.tsx
@@ -11,6 +11,7 @@ import { EK_COPIED } from '../constants/ek.constant';
 import { quickLook } from '../../quicklook';
 import { Widget } from '@bridged.xyz/flutter-builder/lib';
 import { notify } from '@bridged.xyz/design-sdk/lib/figma';
+import Button from '@material-ui/core/Button';
 dartLang(Prism);
 // endregion
 
@@ -63,8 +64,8 @@ export default class Highlight extends React.Component<Props, State> {
     render() {
         return <code>
             <div>
-                <button className="copy" onClick={this.onCopyClicked}>copy code</button>
-                <button className="quick look" disabled={this.state.isLaunchingConsole} onClick={this.onQuickLookClicked}>{this.state.isLaunchingConsole ? 'launching..' : 'quick look'}</button>
+                <Button className="sticky-actions" onClick={this.onCopyClicked}>copy code</Button>
+                <Button className="sticky-actions" disabled={this.state.isLaunchingConsole} onClick={this.onQuickLookClicked}>{this.state.isLaunchingConsole ? 'launching..' : 'quick look'}</Button>
             </div>
             <PrismHighlight {...defaultProps} Prism={Prism} code={this.props.code} language={this.props.language}>
                 {({ className, style, tokens, getLineProps, getTokenProps }) => (
diff --git a/figma/src/app/components/icons-loader.tsx b/figma/src/app/components/icons-loader.tsx
index 21c9b87a..ea25a583 100644
--- a/figma/src/app/components/icons-loader.tsx
+++ b/figma/src/app/components/icons-loader.tsx
@@ -1,50 +1,109 @@
 import React, { useEffect, useState } from "react"
 import { IconConfig } from "@bridged.xyz/client-sdk/lib"
+import Tooltip from "@material-ui/core/Tooltip";
+import IconButton from "@material-ui/core/IconButton";
+import GridList from "@material-ui/core/GridList";
+import GridListTile from "@material-ui/core/GridListTile";
+import { EK_CREATE_ICON } from "../constants/ek.constant";
+import { loadSvg, makeIconUrl } from "../../assets-repository/icons-generator";
+import TextField from "@material-ui/core/TextField";
 const CONFIG_JSON_S3 = "https://reflect-icons.s3-us-west-1.amazonaws.com/material/config.json"
 
-function makeIconUrl(name: string, config: IconConfig): string {
-    return `https://reflect-icons.s3-us-west-1.amazonaws.com/${config.host}/${name}.svg`
-}
 
+// cached icons configs
+let CONFIGS: Map<string, IconConfig>
 export function IconsLoader() {
-    const [config, setConfig] = useState<Map<string, IconConfig>>(undefined);
+    const [configs, setConfigs] = useState<Map<string, IconConfig>>(undefined);
+    const [queryTerm, setQueryTerm] = useState<string>(undefined);
 
     useEffect(() => {
-        fetch(CONFIG_JSON_S3)
-            .then((response) => response.json())
-            .then((json) => {
-                setConfig(json)
-            })
+        if (CONFIGS) {
+            setConfigs(CONFIGS)
+        } else {
+            fetch(CONFIG_JSON_S3)
+                .then((response) => response.json())
+                .then((json) => {
+                    CONFIGS = json
+                    setConfigs(json)
+                })
+        }
     }, []);
 
-    const list = config ? <IconList configs={config} /> : <p>loading configuration...</p>
+
+    let list;
+    if (configs) {
+        const MAX_PER_LOAD = 100
+        const validQueryTerm = queryTerm !== undefined && queryTerm.length >= 2
+        const searchOnlyDefaults: boolean = !validQueryTerm
+        const defaultIcons = filterIcons(configs, {
+            onlyDefault: searchOnlyDefaults,
+            includes: validQueryTerm ? queryTerm : undefined
+        }).slice(0, MAX_PER_LOAD)
+        list = <IconList icons={defaultIcons} />
+    } else {
+        list = <p>loading configuration...</p>
+    }
 
     return (
         <>
+            <IconSearch onChange={setQueryTerm} />
             {list}
         </>
     )
-
 }
 
-function IconSearch() {
-    return <input>type</input>
+function IconSearch(props: {
+    onChange: (value: string) => void
+}) {
+    return (
+        <TextField id="standard-basic" label="search with icon name" onChange={(e) => props.onChange(e.target.value)} />
+    )
 }
 
+function filterIcons(configs: Map<string, IconConfig>, options: {
+    onlyDefault: boolean,
+    includes?: string
+}): [string, IconConfig][] {
+    const keys = Object.keys(configs)
+    const defaultIcons = keys.map<[string, IconConfig]>((k) => {
+        const item = configs[k] as IconConfig
+        if (options.onlyDefault) {
+            if (item.variant != 'default') {
+                return undefined
+            }
+        }
+
+        if (options.includes) {
+            if (k.includes(options.includes)) {
+                return [k, item]
+            } else {
+                return
+            }
+        }
+        return [k, item]
+
+    }).filter((k) => k !== undefined)
+    console.log('default icons', defaultIcons.length)
+    return defaultIcons
+}
 
 function IconList(props: {
-    configs: Map<string, IconConfig>
+    icons: [string, IconConfig][]
 }) {
-    const { configs } = props
-    const keys = Object.keys(configs).slice(0, 100)
-    return <>
-        {
-            keys.map((k) => {
-                const item = configs[k] as IconConfig
-                return <IconItem key={k} name={k} config={item} />
+    const { icons } = props
 
-            })
-        }
+    return <>
+        <GridList cellHeight={160} cols={5}>
+            {
+                icons.map((i) => {
+                    const key = i[0]
+                    const config = i[1]
+                    return <GridListTile key={key}>
+                        <IconItem key={key} name={key} config={config} />
+                    </GridListTile>
+                })
+            }
+        </GridList>
     </>
 }
 
@@ -53,10 +112,30 @@ function IconItem(props: {
     config: IconConfig
 }) {
     const { name, config } = props
+
+    const onClick = () => {
+        console.log(name, 'clicked')
+        loadSvg(name, config).then((s) => {
+            console.log('postmessage', EK_CREATE_ICON)
+            parent.postMessage({
+                pluginMessage: {
+                    type: EK_CREATE_ICON,
+                    data: {
+                        key: name,
+                        svg: s
+                    }
+                }
+            }, "*")
+        })
+    }
+
     return <div>
-        <svg width="24" height="24">
-            <image xlinkHref={makeIconUrl(name, config)} width="24" height="24" />
-        </svg>
-        <p> {config.host}</p>
+        <Tooltip title={`${name} (${config.variant})`}>
+            <IconButton aria-label="delete" onClick={onClick}>
+                <svg width="24" height="24">
+                    <image xlinkHref={makeIconUrl(name, config)} width="24" height="24" />
+                </svg>
+            </IconButton>
+        </Tooltip>
     </div>
 }
\ No newline at end of file
diff --git a/figma/src/app/constants/ek.constant.ts b/figma/src/app/constants/ek.constant.ts
index 1f889110..c0584560 100644
--- a/figma/src/app/constants/ek.constant.ts
+++ b/figma/src/app/constants/ek.constant.ts
@@ -5,4 +5,5 @@ 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_PREVIEW_SOURCE = "EK_PREVIEW_SOURCE"
 export const EK_COPIED = "EK_COPIED";
-export const EK_FOCUS_REQUEST = "EK_FOCUS_REQUEST"
\ No newline at end of file
+export const EK_FOCUS_REQUEST = "EK_FOCUS_REQUEST"
+export const EK_CREATE_ICON = "EK_CREATE_ICON"
\ No newline at end of file
diff --git a/figma/src/app/screens/code-screen.tsx b/figma/src/app/screens/code-screen.tsx
index ae39baec..8f3c49ec 100644
--- a/figma/src/app/screens/code-screen.tsx
+++ b/figma/src/app/screens/code-screen.tsx
@@ -1,4 +1,5 @@
 import { Widget } from "@bridged.xyz/flutter-builder/lib";
+import Button from "@material-ui/core/Button";
 import * as React from "react";
 import { TransportableImageRepository } from "../../assets-repository";
 import { ImageHostingRepository } from "../../assets-repository/hosting";
@@ -73,12 +74,8 @@ export class CodeScreen extends React.Component<any, State> {
         return <div>
             <Preview data={(this.state as any).previewImage} name={(this.state as any).name}></Preview>
             <Highlight language="dart" app={this.state.app} code={(this.state).code} widget={(this.state).widget} ></Highlight>
-            <button onClick={this.onClickReportIssue}>
-                report issue
-      </button>
-            <button onClick={this.onClickVisitWebsite}>
-                visit website
-      </button>
+            <Button onClick={this.onClickReportIssue}>report issue</Button>
+            <Button onClick={this.onClickVisitWebsite}>visit website</Button>
         </div>
     }
 }
diff --git a/figma/src/assets-repository/icons-generator/index.ts b/figma/src/assets-repository/icons-generator/index.ts
index 72a4a908..ffa07acd 100644
--- a/figma/src/assets-repository/icons-generator/index.ts
+++ b/figma/src/assets-repository/icons-generator/index.ts
@@ -1,5 +1,41 @@
+import { IconConfig } from "@bridged.xyz/client-sdk/lib"
+import Axios from "axios"
+export function insertMaterialIcon(name: string, data: string): FrameNode {
+    console.log(`inserting icon with name ${name} and data ${data}`)
 
-export function insertMaterialIcon(name: string): FrameNode {
-    const svg = "" // todo load via name
-    return figma.createNodeFromSvg(svg)
+    const currentViewportLocation = figma.viewport.center
+    const node = figma.createNodeFromSvg(data)
+    // todo replace naming creation with reflect core
+    node.name = `icons/mdi_${name}`
+    node.setSharedPluginData('icon', 'key', name)
+    node.x = currentViewportLocation.x
+    node.y = currentViewportLocation.y
+    return node
 }
+
+
+export async function loadSvg(key: string, config: IconConfig): Promise<string> {
+    // let header = new Headers({
+    //     'Access-Control-Allow-Origin':'*',
+    //     'Content-Type': 'multipart/form-data'
+    // });
+    // let sentData={
+    //     method:'GET',
+    //     mode: 'cors',
+    //     header: header,
+    // };
+
+    const url = makeIconUrl(key, config)
+    const raw = await (await Axios.get(url, {
+        headers: {
+            'Access-Control-Allow-Origin': '*',
+        }
+    })).data
+    // const raw = await (await fetch(, sentData)).text()
+    console.log(`icon raw data loaded for ${key}, length of ${raw.length}`)
+    return raw
+}
+
+export function makeIconUrl(name: string, config: IconConfig): string {
+    return `https://reflect-icons.s3-us-west-1.amazonaws.com/${config.host}/${name}.svg`
+}
\ No newline at end of file
diff --git a/figma/src/code.ts b/figma/src/code.ts
index b6c7142e..605ca280 100644
--- a/figma/src/code.ts
+++ b/figma/src/code.ts
@@ -3,10 +3,11 @@ import { buildApp } from "./flutter";
 import { retrieveFlutterColors } from "./flutter/utils/fetch-colors";
 import { hideAllExcept, hideAllOnly } from "./dev-tools/hide-all";
 import { runLints } from "./lint/lint";
-import { EK_COPIED, EK_FOCUS_REQUEST, EK_GENERATED_CODE_PLAIN, EK_IMAGE_ASSET_REPOSITORY_MAP, EK_LINT_FEEDBACK, EK_PREVIEW_SOURCE } from "./app/constants/ek.constant";
+import { EK_COPIED, EK_CREATE_ICON, EK_FOCUS_REQUEST, EK_GENERATED_CODE_PLAIN, EK_IMAGE_ASSET_REPOSITORY_MAP, EK_LINT_FEEDBACK, EK_PREVIEW_SOURCE } from "./app/constants/ek.constant";
 import { handleNotify } from "@bridged.xyz/design-sdk/lib/figma";
 import { makeApp } from "./flutter/make/app.make";
 import { ImageRepositories } from "./assets-repository";
+import { insertMaterialIcon } from "./assets-repository/icons-generator";
 
 
 let parentNodeId: string;
@@ -146,6 +147,7 @@ figma.on("selectionchange", () => {
 // efficient? No. Works? Yes.
 // todo pass data instead of relying in types
 figma.ui.onmessage = (msg) => {
+    console.log('event received', msg)
     handleNotify(msg)
     // region test
     if (msg.type === 'create-rectangles') {
@@ -169,6 +171,14 @@ figma.ui.onmessage = (msg) => {
         figma.viewport.scrollAndZoomIntoView([target]);
     }
 
+    else if (msg.type == EK_CREATE_ICON) {
+
+        const icon_key = msg.data.key
+        const svgData = msg.data.svg
+        const inserted = insertMaterialIcon(icon_key, svgData)
+        figma.viewport.scrollAndZoomIntoView([inserted])
+    }
+
     else if (msg.type == "randomize-selection") {
         randimizeText()
     }
diff --git a/figma/src/ui.css b/figma/src/ui.css
index 737aca81..9a95288e 100644
--- a/figma/src/ui.css
+++ b/figma/src/ui.css
@@ -3,16 +3,6 @@
   text-align: left;
   margin: 16;
 } */
-button {
-  border-radius: 4px;
-  background: white;
-  color: black;
-  border: 2px;
-  padding: 8px 15px;
-  margin: 0 5px;
-  box-shadow: inset 0 0 0 1px black;
-  outline: none;
-}
 
 #create {
   box-shadow: none;
@@ -20,28 +10,11 @@ button {
   color: white;
 }
 
-input {
-  border: none;
-  outline: none;
-  padding: 8px;
-}
-
-input:hover {
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
-}
-
-button:focus {
-  box-shadow: inset 0 0 0 2px #18A0FB;
-}
 
 #create:focus {
   box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3);
 }
 
-input:focus {
-  box-shadow: inset 0 0 0 2px #18A0FB;
-}
-
 h1,
 h2,
 h3,
diff --git a/packages/design-sdk b/packages/design-sdk
index 0162785b..7eb36f49 160000
--- a/packages/design-sdk
+++ b/packages/design-sdk
@@ -1 +1 @@
-Subproject commit 0162785bb6192c12291ca62f357bc68e05921037
+Subproject commit 7eb36f49deeac545134dbf57e297086edd783933
diff --git a/packages/flutter-builder b/packages/flutter-builder
index 668effde..e54cb818 160000
--- a/packages/flutter-builder
+++ b/packages/flutter-builder
@@ -1 +1 @@
-Subproject commit 668effdedac74d50700681ed7004151e7748c960
+Subproject commit e54cb818e40198b3dcda93feb70a8225a2834f35
diff --git a/packages/reflect-detection b/packages/reflect-detection
index e8b62c0f..ef8a3e6b 160000
--- a/packages/reflect-detection
+++ b/packages/reflect-detection
@@ -1 +1 @@
-Subproject commit e8b62c0f6e2bc4f7c5199ba35e62c990ade69b94
+Subproject commit ef8a3e6b11ad801e1273f19f6337d4db019ffa3b

From 03d7a290de7a7e29cc320412cbc03c26a9efab84 Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Nov 2020 20:38:43 +0900
Subject: [PATCH 4/5] fixed icon mdi name extraction, added icon loader to
 production

---
 figma/src/app/components/highlight.css        |  1 +
 figma/src/app/components/highlight.tsx        |  6 +-
 figma/src/app/components/icons-loader.tsx     |  3 +-
 figma/src/app/screens/icons-screen.tsx        |  5 ++
 .../flutter/interpreter/icon.interpreter.ts   |  7 +-
 figma/src/flutter/make/icon.make.ts           |  4 +-
 figma/src/ui.tsx                              | 86 ++++++++++++++-----
 packages/lint                                 |  2 +-
 packages/reflect-detection                    |  2 +-
 9 files changed, 84 insertions(+), 32 deletions(-)
 create mode 100644 figma/src/app/screens/icons-screen.tsx

diff --git a/figma/src/app/components/highlight.css b/figma/src/app/components/highlight.css
index 8544582b..b0b52022 100644
--- a/figma/src/app/components/highlight.css
+++ b/figma/src/app/components/highlight.css
@@ -14,5 +14,6 @@ pre {
 .sticky-actions {
   position: sticky;
   right: 4px;
+  margin-right: 16px;
   top: 4px;
 }
\ No newline at end of file
diff --git a/figma/src/app/components/highlight.tsx b/figma/src/app/components/highlight.tsx
index c3c2af60..2e002d8e 100644
--- a/figma/src/app/components/highlight.tsx
+++ b/figma/src/app/components/highlight.tsx
@@ -58,14 +58,14 @@ export default class Highlight extends React.Component<Props, State> {
             setLoadingState(false)
             notify(parent, "compile failed. view console for details.", 2)
         })
-
     }
 
     render() {
         return <code>
             <div>
-                <Button className="sticky-actions" onClick={this.onCopyClicked}>copy code</Button>
-                <Button className="sticky-actions" disabled={this.state.isLaunchingConsole} onClick={this.onQuickLookClicked}>{this.state.isLaunchingConsole ? 'launching..' : 'quick look'}</Button>
+                <div style={{ height: "24px" }} />
+                <Button variant="outlined" size="medium" className="sticky-actions" onClick={this.onCopyClicked}>copy code</Button>
+                <Button variant="outlined" size="medium" className="sticky-actions" disabled={this.state.isLaunchingConsole} onClick={this.onQuickLookClicked}>{this.state.isLaunchingConsole ? 'launching..' : 'quick look'}</Button>
             </div>
             <PrismHighlight {...defaultProps} Prism={Prism} code={this.props.code} language={this.props.language}>
                 {({ className, style, tokens, getLineProps, getTokenProps }) => (
diff --git a/figma/src/app/components/icons-loader.tsx b/figma/src/app/components/icons-loader.tsx
index ea25a583..cb68a68a 100644
--- a/figma/src/app/components/icons-loader.tsx
+++ b/figma/src/app/components/icons-loader.tsx
@@ -7,6 +7,7 @@ import GridListTile from "@material-ui/core/GridListTile";
 import { EK_CREATE_ICON } from "../constants/ek.constant";
 import { loadSvg, makeIconUrl } from "../../assets-repository/icons-generator";
 import TextField from "@material-ui/core/TextField";
+import LinearProgress from "@material-ui/core/LinearProgress";
 const CONFIG_JSON_S3 = "https://reflect-icons.s3-us-west-1.amazonaws.com/material/config.json"
 
 
@@ -41,7 +42,7 @@ export function IconsLoader() {
         }).slice(0, MAX_PER_LOAD)
         list = <IconList icons={defaultIcons} />
     } else {
-        list = <p>loading configuration...</p>
+        list = <LinearProgress />
     }
 
     return (
diff --git a/figma/src/app/screens/icons-screen.tsx b/figma/src/app/screens/icons-screen.tsx
new file mode 100644
index 00000000..6bfe36c7
--- /dev/null
+++ b/figma/src/app/screens/icons-screen.tsx
@@ -0,0 +1,5 @@
+import React from "react"
+import { IconsLoader } from "../components/icons-loader"
+export function IconsScreen() {
+    return <IconsLoader />
+}
\ No newline at end of file
diff --git a/figma/src/flutter/interpreter/icon.interpreter.ts b/figma/src/flutter/interpreter/icon.interpreter.ts
index 95ef726f..ae22ad57 100644
--- a/figma/src/flutter/interpreter/icon.interpreter.ts
+++ b/figma/src/flutter/interpreter/icon.interpreter.ts
@@ -6,8 +6,11 @@ import { ImageRepositories, TemporaryImageAsset } from "../../assets-repository"
 export function interpretIcon(node: ReflectSceneNode): IconData | TemporaryImageAsset {
 
     try {
-        const name = node.name.match(/(?<=mdi_)(.*?)*/g)[0]
-        console.log('mdi matching name found', name)
+        // regex is valid, but does not work at this point. inspect this, make it live again.
+        // const re = /(?<=mdi_)(.*?)*/g // finds **mdi_** pattern
+        const splits = node.name.split('mdi_')
+        const name = splits[splits.length - 1]
+        console.log(`mdi matching name found, ${JSON.stringify(name)}`)
         const mdicon = Icons.fromName(name)
         return mdicon
     } catch (e) {
diff --git a/figma/src/flutter/make/icon.make.ts b/figma/src/flutter/make/icon.make.ts
index 04f27dcd..6e5c011a 100644
--- a/figma/src/flutter/make/icon.make.ts
+++ b/figma/src/flutter/make/icon.make.ts
@@ -15,7 +15,9 @@ export function makeDynamicIcon(node: ReflectSceneNode): Icon | Image {
             width: node.width,
             height: node.height,
             fit: BoxFit.cover as Snippet
-        }).addComment(`FIXME: Check your design. this is an icon of node ${node.toString()}. we couldn't any matching flutter native icon, so we uploaded the asset to the cloud, load from it.`)
+        })
+            .addComment('Detected as Icon')
+            .addComment(`FIXME: Check your design. this is an icon of node ${node.toString()}. we couldn't any matching flutter native icon, so we uploaded the asset to the cloud, load from it.`)
     }
 }
 
diff --git a/figma/src/ui.tsx b/figma/src/ui.tsx
index 0c9c732c..0ca1464d 100644
--- a/figma/src/ui.tsx
+++ b/figma/src/ui.tsx
@@ -8,36 +8,37 @@ import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import { CodeScreen } from './app/screens/code-screen';
 import { LintScreen } from './app/screens/lint-screen';
+import { IconsScreen } from './app/screens/icons-screen';
 
 interface TabPanelProps {
   children?: React.ReactNode;
-  index: any;
-  value: any;
+  type: AppMode;
+  value: AppMode;
 }
 
 function TabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
+  const { children, value, type, ...other } = props;
 
 
   return (
     <div
       role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
+      hidden={value !== type}
+      id={`app-tab-${type}`}
+      // aria-labelledby={`tab-${type}`}
       {...other}
     >
-      {value === index && (
+      {value === type && (
         <>{props.children}</>
       )}
     </div>
   );
 }
 
-function a11yProps(index: any) {
+function a11yProps(mode: AppMode) {
   return {
-    id: `simple-tab-${index}`,
-    'aria-controls': `simple-tabpanel-${index}`,
+    id: `app-tab-${mode}`,
+    // 'aria-controls': `tab-${mode}`,
   };
 }
 
@@ -48,12 +49,36 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
 }));
 
+
+enum AppMode {
+  code = 0,
+  icon = 1,
+  lint = 2,
+  slot = 3,
+  dev = 4
+}
+
+function appModeToName(appMode: AppMode): string {
+  switch (appMode) {
+    case AppMode.code:
+      return "code"
+    case AppMode.dev:
+      return "tools"
+    case AppMode.icon:
+      return "icon"
+    case AppMode.lint:
+      return "lint"
+    case AppMode.slot:
+      return "slots"
+  }
+}
+
 export default function App() {
   const classes = useStyles();
-  const [value, setValue] = React.useState(0);
+  const [mode, setMode] = React.useState<AppMode>(AppMode.code);
 
-  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {
-    setValue(newValue);
+  const handleChange = (event: React.ChangeEvent<{}>, newValue: AppMode) => {
+    setMode(newValue);
   };
 
   // init firebase
@@ -64,26 +89,41 @@ export default function App() {
   }
 
   if (process.env.NODE_ENV == "production") {
-    return <CodeScreen />
+    return <div>
+      <Tabs value={mode} onChange={handleChange} aria-label="primary tab">
+        <Tab label={appModeToName(AppMode.code)} {...a11yProps(AppMode.code)} />
+        <Tab label={appModeToName(AppMode.icon)} {...a11yProps(AppMode.icon)} />
+      </Tabs>
+      <TabPanel value={mode} type={AppMode.code}>
+        <CodeScreen />
+      </TabPanel>
+      <TabPanel value={mode} type={AppMode.icon}>
+        <IconsScreen />
+      </TabPanel>
+    </div>
   } else {
     return (
       <div>
-        <Tabs value={value} onChange={handleChange} aria-label="primary tab">
-          <Tab label="code" {...a11yProps(0)} />
-          <Tab label="lint" {...a11yProps(1)} />
-          <Tab label="slots" {...a11yProps(2)} />
-          <Tab label="devtool" {...a11yProps(3)} />
+        <Tabs value={mode} onChange={handleChange} aria-label="primary tab">
+          <Tab label={appModeToName(AppMode.code)} {...a11yProps(AppMode.code)} />
+          <Tab label={appModeToName(AppMode.lint)} {...a11yProps(AppMode.lint)} />
+          <Tab label={appModeToName(AppMode.slot)} {...a11yProps(AppMode.slot)} />
+          <Tab label={appModeToName(AppMode.dev)} {...a11yProps(AppMode.dev)} />
+          <Tab label={appModeToName(AppMode.icon)} {...a11yProps(AppMode.icon)} />
         </Tabs>
-        <TabPanel value={value} index={0}>
+        <TabPanel value={mode} type={AppMode.code}>
           <CodeScreen />
         </TabPanel>
-        <TabPanel value={value} index={1}>
+        <TabPanel value={mode} type={AppMode.icon}>
+          <IconsScreen />
+        </TabPanel>
+        <TabPanel value={mode} type={AppMode.lint}>
           <LintScreen />
         </TabPanel>
-        <TabPanel value={value} index={2}>
+        <TabPanel value={mode} type={AppMode.slot}>
           slots
       </TabPanel>
-        <TabPanel value={value} index={3}>
+        <TabPanel value={mode} type={AppMode.dev}>
           <DevTools />
         </TabPanel>
       </div>
diff --git a/packages/lint b/packages/lint
index d482f74b..0faec81d 160000
--- a/packages/lint
+++ b/packages/lint
@@ -1 +1 @@
-Subproject commit d482f74b5baaec0d1a7bc0f1624ebe07c58275b8
+Subproject commit 0faec81da8e703b7cc44b9e9eaff53aee7807920
diff --git a/packages/reflect-detection b/packages/reflect-detection
index ef8a3e6b..8f831a97 160000
--- a/packages/reflect-detection
+++ b/packages/reflect-detection
@@ -1 +1 @@
-Subproject commit ef8a3e6b11ad801e1273f19f6337d4db019ffa3b
+Subproject commit 8f831a976b760e21c1860cafd6db2e9d1fff02b4

From 8e9137b1a4a7222c78ab5c6d9174d9fd81d0a71e Mon Sep 17 00:00:00 2001
From: softmarshmallow <woojoo@softmarshmallow.com>
Date: Tue, 17 Nov 2020 20:47:25 +0900
Subject: [PATCH 5/5] meged conflicts

---
 yarn.lock | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index c6d0400f..1465b9dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2900,11 +2900,6 @@ cocoascript-class@^0.1.2:
   resolved "https://registry.yarnpkg.com/cocoascript-class/-/cocoascript-class-0.1.2.tgz#dab25f20389946d9986c1812b88ac3783eec42d3"
   integrity sha1-2rJfIDiZRtmYbBgSuIrDeD7sQtM=
 
-coli@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/coli/-/coli-0.0.1.tgz#039d81bb8a45fc53ac51a640e4e8e9f3db6d3acf"
-  integrity sha512-0H1UGi0qix1aRTbAT/jP/ZtqrErb0gIWzSR5UXCnbBwL6YXkzXhiJ9M/gFhKLqjBuedCPk/wk1ev0ws5HPPYNg==
-
 collect-v8-coverage@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz#cc2c8e94fc18bbdffe64d6534570c8a673b27f59"