2022W50

CHANGELOG.md

@@ -28,6 +28,12 @@
 - [Flutter] Poligon Node support with XImage (svg)
 - [Lint] Primal naming & grouping linting for better code export quality. this is tracked sperately on [lint](https://github.com/bridgedxyz/lint)
 
+## [2022.12.0.1] - 2022-12-6 (schduled)
+
+- New Icons set added.
+  - Unicon Icons
+  - Radix-ui Icons
+
 ## [2022.4.0.3] - 2022-04-29
 
 - New feature: Publish as website

figma-core/event-handlers/create-icon.ts

@@ -1,4 +1,3 @@
-import { NamedIconConfig } from "@reflect-ui/core";
 import { EK_CREATE_ICON, EK_ICON_DRAG_AND_DROPPED } from "@core/constant";
 import { PluginSdkService } from "@plugin-sdk/service";
 import { IconPlacement, renderSvgIcon } from "../reflect-render/icons.render";
@@ -7,7 +6,12 @@ import { addEventHandler } from "../code-thread";
 interface CreateIconProps {
   key: string;
   svg: string;
-  config: NamedIconConfig;
+  config: {
+    name: string;
+    size: number;
+    variant?: string;
+    package: string;
+  };
 }
 
 function createIcon(

figma-core/reflect-render/icons.render/index.ts

@@ -18,7 +18,7 @@ export function renderSvgIcon(
   data: string,
   color: Color = "#000000",
   placement: IconPlacement = "center",
-  config?: NamedIconConfig
+  config?: { size: number; name: string; package: string; variant?: string }
 ): FrameNode {
   console.log(`inserting icon with name ${name} and data ${data}`);
 
@@ -47,7 +47,7 @@ export function renderSvgIcon(
 
   // operate extra manipulation if config is available.
   if (config) {
-    const size = Number(config.default_size);
+    const size = Number(config.size);
     node.resize(size, size);
   }
 
@@ -62,14 +62,19 @@ export function renderSvgIcon(
 
 export function buildReflectIconNameForRender(
   name: string,
-  config: NamedIconConfig
+  config: { name: string; package: string; variant?: string }
 ): string {
-  if (config.host == "material") {
-    return `icons/mdi_${name}`;
-  } else if (config.host == "ant-design") {
-    return `icons/antd-${name}`;
-  } else {
-    return `icons/${name}`;
+  switch (config.package) {
+    case "material":
+      return `icons/mdi_${name}`;
+    case "ant-design":
+      return `icons/antd-${name}`;
+    case "radix-ui":
+      return `icons/radix-${name}`;
+    case "unicons":
+      return `icons/unicons-${name}`;
+    default:
+      return `icons/${name}`;
   }
 }
 

packages/app-icons-loader/history.ts

@@ -0,0 +1,43 @@
+// save recently used items
+
+import type { Icon } from "./resources";
+
+const _k_store_key = "icons-load-history";
+
+export class IconsLoadHistory {
+  private readonly data: Array<Icon> = [];
+
+  constructor(readonly max: number = 50) {
+    const items = localStorage.getItem(_k_store_key);
+    if (items) {
+      this.data = JSON.parse(items);
+    }
+  }
+
+  list(to: number = Infinity): Array<Icon> {
+    return Array.from(this.data).reverse().slice(0, to);
+  }
+
+  push(item: Icon) {
+    const index = this.data.findIndex(
+      (i) =>
+        i.package === item.package &&
+        i.name === item.name &&
+        i.variant === item.variant
+    );
+    if (index >= 0) {
+      this.data.splice(index, 1);
+    }
+    this.data.push(item);
+
+    if (this.data.length > this.max) {
+      this.data.shift();
+    }
+
+    this.save();
+  }
+
+  private save() {
+    localStorage.setItem(_k_store_key, JSON.stringify(this.data));
+  }
+}

packages/app-icons-loader/icon-item.tsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useRef, useState } from "react";
+import Tooltip from "@material-ui/core/Tooltip";
+import {
+  EK_CREATE_ICON,
+  EK_ICON_DRAG_AND_DROPPED,
+} from "@core/constant/ek.constant";
+import CircularProgress from "@material-ui/core/CircularProgress";
+import { Draggable } from "@plugin-sdk/draggable";
+import { assistant as analytics } from "@analytics.bridged.xyz/internal";
+import styled from "@emotion/styled";
+import { IconMeta, Icon, loadSvg, makeIconUrl, useIcons } from "./resources";
+
+type IconItemProps = Icon & { onClick: () => void };
+
+export function IconItem({ onClick, ...props }: IconItemProps) {
+  const { package: _package, name, variant } = props;
+  const [loading, setLoading] = useState(false);
+  const [loaded, setLoaded] = useState(false);
+  const [downloading, setDownloading] = useState<boolean>(false);
+
+  const _aid = name + " " + variant; // id for analytics
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(!loaded);
+    }, 5);
+  }, [loaded]);
+
+  const _onUserLoadIconToCanvas = () => {
+    // ANALYTICS
+    analytics.event_load_icon({
+      icon_name: _aid,
+    });
+  };
+
+  async function loadData() {
+    _onUserLoadIconToCanvas();
+    try {
+      setDownloading(true);
+      const svg = await loadSvg(props, {
+        disable_cache: true,
+      });
+      const data = {
+        key: name,
+        svg: svg,
+        config: {
+          name: props.name,
+          variant: props.variant,
+          size: props.size,
+          package: props.package,
+        },
+      };
+      return data;
+    } catch (_) {
+      throw _;
+    } finally {
+      setDownloading(false);
+    }
+  }
+
+  const onclick = () => {
+    onClick();
+    _onUserLoadIconToCanvas();
+    loadData().then((d) => {
+      parent.postMessage(
+        {
+          pluginMessage: {
+            type: EK_CREATE_ICON,
+            data: d,
+          },
+        },
+        "*"
+      );
+    });
+  };
+
+  return (
+    <Draggable customDataLoader={loadData} eventKey={EK_ICON_DRAG_AND_DROPPED}>
+      <Tooltip
+        title={`${name} (${variant ?? "default"}) (${_package})`}
+        placement="top"
+        PopperProps={{
+          popperOptions: {
+            modifiers: {
+              offset: {
+                offset: "-1px, -20px",
+              },
+            },
+          },
+        }}
+      >
+        <IconButton onClick={onclick} disabled={downloading}>
+          {downloading ? (
+            <CircularProgress size={24} />
+          ) : (
+            <svg
+              width="24"
+              height="24"
+              style={{
+                borderRadius: 4,
+                background: loading ? "rgba(0, 0, 0, 0.1)" : "none",
+                transition: "background 0.3s",
+              }}
+            >
+              <image
+                className="unicons"
+                xlinkHref={makeIconUrl(props)}
+                onLoad={() => setLoaded(true)}
+                width="24"
+                height="24"
+              />
+            </svg>
+          )}
+        </IconButton>
+      </Tooltip>
+    </Draggable>
+  );
+}
+
+const IconButton = styled.button`
+  background-color: #fff;
+  border: none;
+  height: 48px !important;
+  width: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:hover {
+    background-color: #eeeeee;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: 0.25s;
+  }
+`;