Combinations import done

packages/figma-plugin/src/figma.ts

@@ -1,11 +1,14 @@
 import { defaultFont, getDropOffset, addLayersToFrame } from 'html-figma/figma';
+import { FigmaImportMessage, FigmaImportVariantsMessage, FigmaImportVariantsNode, FigmaMessageType } from './modules/FigmaMessageType';
 import FigmaRequestListener from './modules/figmaStorage/FigmaRequestListener';
+import { importSingle } from './modules/importFunctions/importSingle';
+import { importVariants } from './modules/importFunctions/importVariants';
 
 const figmaRequestListener = new FigmaRequestListener(figma);
 
 figma.showUI(__html__, {
-  width: 750,
-  height: 600,
+  width: 1125,
+  height: 900,
 })
 
 figma.ui.onmessage = async (message) => {
@@ -14,25 +17,23 @@ figma.ui.onmessage = async (message) => {
   if(data) {
     await processAddonMessage(message)
   } else {
-    await figmaRequestListener.processPossibleRequest(message);
+    await figmaRequestListener.processPossibleMessage(message);
   }
 }
 
-async function processAddonMessage(message : any) : Promise<void> {
+async function processAddonMessage(message : FigmaImportMessage | FigmaImportVariantsMessage) : Promise<void> {
   await figma.loadFontAsync(defaultFont);
 
   let baseFrame: PageNode | FrameNode = figma.currentPage;
 
-  const { data } = message;
-  let { nodes, type } = data;
+  const { data, type } = message;
+  let { nodes } = data;
 
-  for (const { id, layer, position, componentData } of nodes) {
-    if (position) {
-      const { x, y } = getDropOffset(position);
-      layer.x = x;
-      layer.y = y;
-    }
-
-    await addLayersToFrame([layer], baseFrame);
+  if(type === FigmaMessageType.IMPORT) {
+    importSingle(nodes, baseFrame)
+  } else if(type === FigmaMessageType.IMPORT_VARIANTS) {
+    importVariants(nodes as FigmaImportVariantsNode[], baseFrame)
+  } else {
+    console.warn("Unknown message type :" + type)
   }
 }

packages/figma-plugin/src/modules/FigmaMessageType.ts

@@ -0,0 +1,95 @@
+import { PlainLayerNode } from 'html-figma/types';
+
+export enum FigmaMessageType {
+    IMPORT,
+    UPDATE,
+    RENDER,
+    IMPORT_VARIANTS,
+    APPLY_TOKEN,
+    APPLY_TOKENS,
+    SELECT_NODE,
+    CLEAR_SELECTION,
+    RENDER_TOKENS_SYNC,
+}
+
+type FigmaImportTypes = 'variants' | 'single';
+
+type LayerPosition = {
+    dropPosition: { clientX: number; clientY: number };
+    offset: {
+        x: number;
+        y: number;
+    };
+    windowSize: { width: number; height: number };
+};
+
+type FigmaMessageImportPayload = {
+    nodes: {
+        layer: PlainLayerNode;
+        componentData: { name: string; props: unknown };
+        id?: string;
+        position?: LayerPosition;
+    }[];
+    type: FigmaImportTypes
+};
+export interface FigmaImportMessage {
+    type: FigmaMessageType.IMPORT;
+    data: FigmaMessageImportPayload;
+}
+
+export interface FigmaImportVariantsMessage {
+    type: FigmaMessageType.IMPORT_VARIANTS;
+    data: {
+        nodes: FigmaImportVariantsNode[];
+    };
+}
+
+export interface FigmaImportVariantsNode {
+    layer: PlainLayerNode;
+    componentData: { name: string; props: any[] };
+}
+
+export interface FigmaRenderMessage {
+    type: FigmaMessageType.RENDER;
+    data: {
+        blocks: { figmaId?: string; name: string; props: unknown }[];
+        position?: LayerPosition;
+        type: FigmaImportTypes
+    };
+}
+
+export interface FigmaRenderTokenSyncMessage {
+    type: FigmaMessageType.RENDER_TOKENS_SYNC;
+    data: Record<string, string>;
+}
+
+export interface FigmaApplyAllTokensMessagePayload {
+    tokens: Record<string, string>;
+}
+
+export interface FigmaApplyAllTokensMessage {
+    type: FigmaMessageType.APPLY_TOKENS;
+    data: FigmaApplyAllTokensMessagePayload;
+}
+
+export interface FigmaClearSelectionMessage {
+    type: FigmaMessageType.CLEAR_SELECTION;
+}
+
+export type FigmaMessages =
+    | FigmaImportMessage
+    | FigmaImportVariantsMessage
+    | FigmaApplyAllTokensMessage
+    | FigmaRenderMessage
+    | FigmaRenderTokenSyncMessage;
+
+export type FigmaPluginMessages =
+    | FigmaClearSelectionMessage;
+
+export interface PluginMessageEvent extends MessageEvent {
+    data: FigmaMessages;
+}
+
+export interface FigmaMessageEvent extends MessageEvent {
+    data: FigmaPluginMessages;
+}

packages/figma-plugin/src/modules/figmaStorage/FigmaRequestListener.ts

@@ -1,5 +1,5 @@
-import FigmaRequest from "./FigmaRequest";
-import RequestType from "./requestType";
+import { FigmaStorageRequest, FigmaStorageSetRequest, FigmaStorageGetRequest } from "./FigmaStorageRequest";
+import { RequestType } from "./RequestType";
 
 export default class FigmaRequestListener {
     private figma : PluginAPI;
@@ -8,32 +8,32 @@ export default class FigmaRequestListener {
         this.figma = figma;
     }
 
-    async processPossibleRequest(request : any) {
-        if (request?.type === undefined) return;
+    async processPossibleMessage(message : FigmaStorageRequest) {
+        if (message?.type === undefined) return;
 
-        if (request.type === RequestType.GET) {
-            await this.processGetRequest(request);
-        } else if(request.type === RequestType.SET) {
-            await this.processSetRequest(request);
+        if (message.type === RequestType.GET) {
+            await this.processGetMessage(message);
+        } else if (message.type === RequestType.SET) {
+            await this.processSetMessage(message);
         }
     }
 
-    private async processGetRequest(request: FigmaRequest) {
+    private async processGetMessage(request: FigmaStorageGetRequest) {
         let key = request.payload;
 
-        let readResult = await this.figma.clientStorage.getAsync(key);
+        let readResult = await this.figma.clientStorage.getAsync(key) as unknown;
 
         this.sendResponceForRequest(request, readResult);
     }
 
-    private async processSetRequest(request: FigmaRequest) {
+    private async processSetMessage(request: FigmaStorageSetRequest) {
         let { key, value } = request.payload;
 
         await this.figma.clientStorage.setAsync(key, value);
         this.sendResponceForRequest(request, "OK");
     }
 
-    private sendResponceForRequest(request: FigmaRequest, result: any) {
+    private sendResponceForRequest(request: FigmaStorageRequest, result: unknown) {
        let responce = {
             timestamp: request.timestamp,
             result: result,

packages/figma-plugin/src/modules/figmaStorage/FigmaStorage.ts

@@ -2,34 +2,42 @@
     FigmaStorage provides a WebStorage-like API to save
     data to Figma's clientStorage.
 */
-import FigmaRequest from "./FigmaRequest";
-import RequestType from "./requestType";
+import { FigmaStorageGetRequest, FigmaStorageRequest, FigmaStorageSetRequest } from "./FigmaStorageRequest";
+import { RequestType } from "./RequestType";
 
 export default class FigmaStorage {
-    getItem(key : string) : Promise<any | undefined> {
-        let request = new FigmaRequest(RequestType.GET, key);
+    getItem(key : string) : Promise<unknown | undefined> {
+        let request = {
+            type : RequestType.GET,
+            timestamp: Date.now(),
+            payload: key,
+        } as FigmaStorageGetRequest;
 
         return sendRequestAndExpectResult(request);
     }
 
-    setItem(key : string, value : any) : Promise<void> {
-        let request = new FigmaRequest(RequestType.SET, {key, value});
+    setItem(key : string, value : unknown) : Promise<void> {
+        let request = {
+            type: RequestType.SET,
+            timestamp: Date.now(),
+            payload: { key, value },
+        } as FigmaStorageSetRequest;
 
-        return sendRequestAndExpectResult(request);
+        return sendRequestAndExpectResult(request) as Promise<void>;
     }
 }
 
-async function sendRequestAndExpectResult(request : FigmaRequest) : Promise<any | undefined> {
+async function sendRequestAndExpectResult(request: FigmaStorageRequest): Promise<unknown | undefined> {
     sendRequest(request);
 
     return createPromiseForRequestResult(request)
 }
 
-async function sendRequest(request : FigmaRequest) {
+async function sendRequest(request: FigmaStorageRequest) {
     window.parent.postMessage({ pluginMessage: request }, "https://www.figma.com");
 }
 
-function createPromiseForRequestResult(request: FigmaRequest): Promise<any> {
+function createPromiseForRequestResult(request: FigmaStorageRequest): Promise<any> {
     return new Promise((resolve, reject) => {
         window.addEventListener('message', (e) => {
             let responce = e.data.pluginMessage;

packages/figma-plugin/src/modules/figmaStorage/FigmaStorageRequest.ts

@@ -0,0 +1,17 @@
+import { RequestType } from "./RequestType";
+
+type KeyValuePair = { key: string, value: unknown | undefined};
+
+export type FigmaStorageRequest = FigmaStorageSetRequest | FigmaStorageGetRequest
+
+export interface FigmaStorageSetRequest {
+    type: RequestType.SET,
+    timestamp: number,
+    payload: KeyValuePair,
+}
+
+export interface FigmaStorageGetRequest {
+    type: RequestType.GET,
+    timestamp: number,
+    payload: string,
+}

packages/figma-plugin/src/modules/figmaStorage/RequestType.ts

@@ -1,6 +1,4 @@
-enum RequestType {
+export enum RequestType {
     GET,
     SET
-}
-
-export default RequestType;
+};

packages/figma-plugin/src/modules/importFunctions/importSingle.ts

@@ -0,0 +1,13 @@
+import { addLayersToFrame, getDropOffset } from "html-figma/figma";
+
+export const importSingle = async (nodes : any[], baseFrame : PageNode | FrameNode) => {
+    for (const { id, layer, position, componentData } of nodes) {
+        if (position) {
+            const { x, y } = getDropOffset(position);
+            layer.x = x;
+            layer.y = y;
+        }
+
+        await addLayersToFrame([layer], baseFrame);
+    }
+}

packages/figma-plugin/src/modules/importFunctions/importVariants.ts

@@ -0,0 +1,46 @@
+import { addLayersToFrame, getDropOffset } from "html-figma/figma";
+import { FigmaImportVariantsNode } from "../FigmaMessageType";
+
+export const importVariants = async (nodes: FigmaImportVariantsNode[], baseFrame: PageNode | FrameNode) => {
+    let addedNodes: SceneNode[] = [];
+
+    for(let { layer, componentData } of nodes) {
+        const componentLayer = {
+            ...layer,
+            type: "COMPONENT",
+        } as any;
+
+        await addLayersToFrame([componentLayer], baseFrame, ({ node, parent }) => {
+            if (!parent) {
+                node.setPluginData('componentData', JSON.stringify(componentData));
+                addedNodes.push(node);
+            }
+        });
+    }
+
+    addCoordinatesToNodes(addedNodes);
+    figma.combineAsVariants(addedNodes as ComponentNode[], baseFrame);
+
+    addedNodes.forEach((node, index) => {
+        node.name = getVariantNameFromProps(nodes[index].componentData.props as any)
+    });
+} 
+
+const addCoordinatesToNodes = (nodes : any[]) => {
+    const { x, y } = figma.viewport.center;
+    let failsafeHeight = 100;
+    let gap = 10;
+
+    let offsetTop = 0;
+    for (let i = 0; i < nodes.length; i++) {
+        nodes[i].x = x;
+        nodes[i].y = y + offsetTop;
+        offsetTop += (nodes[i].height || failsafeHeight) + gap;
+    }
+}
+const getVariantNameFromProps = (props: Record<string, string>) => {
+    return Object.keys(props)
+        .filter((key) => key !== 'children')
+        .map((key) => `${key}=${props[key]}`)
+        .join(', ');
+};

packages/figma-plugin/src/modules/storybook/StorybookStorage.ts

@@ -18,8 +18,8 @@ export default class StorybookStorage {
     }
 
     async requestStorybooks() : Promise<void> {
-        this.storybooks = await this.figmaStorage.getItem("storybooks");
-        this.selectedId = await this.figmaStorage.getItem("selectedId");
+        this.storybooks = await this.figmaStorage.getItem("storybooks") as Storybook[];
+        this.selectedId = await this.figmaStorage.getItem("selectedId") as string;
     }
 
     awaitForRequest() {

packages/figma-plugin/src/modules/ui/Iframe.ts

@@ -38,8 +38,6 @@ export default class Iframe {
     }
 
     private setPlaceholderActive(active : boolean) {
-        console.log(active);
-
         document.getElementById("iframe_placeholder").style.display = active ? "flex"   : "none";
         document.getElementById("storybook_iframe").style.display   = active ? "none"   : "inline";
     }