@ject-5-fe/figma-plugin 0.1.5 → 0.2.0

package/dist/server/server.cjs

@@ -1,14 +1,10 @@
-#!/usr/bin/env node
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
@@ -25,20 +21,116 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/server.ts
-var server_exports = {};
-__export(server_exports, {
-  compressData: () => compressData
-});
-module.exports = __toCommonJS(server_exports);
 var import_mcp = require("@modelcontextprotocol/sdk/server/mcp.js");
 var import_stdio = require("@modelcontextprotocol/sdk/server/stdio.js");
+var import_fs = __toESM(require("fs"), 1);
+var import_path = __toESM(require("path"), 1);
+var import_zod = require("zod");
+
+// src/figmaClient.ts
 var import_uuid = require("uuid");
 var import_ws = __toESM(require("ws"), 1);
-var import_zlib = require("zlib");
-var import_zod = require("zod");
+function createFigmaClient({
+  logger: logger2,
+  serverUrl: serverUrl2,
+  wsUrlBase
+}) {
+  let ws = null;
+  const pendingRequests = /* @__PURE__ */ new Map();
+  function connectToFigma2(port = 3055) {
+    if (ws && ws.readyState === import_ws.default.OPEN) {
+      logger2.info("Already connected to Figma");
+      return;
+    }
+    const wsUrl = serverUrl2 === "localhost" ? `${wsUrlBase}:${port}` : wsUrlBase;
+    logger2.info(`Connecting to Figma socket server at ${wsUrl}...`);
+    ws = new import_ws.default(wsUrl);
+    ws.on("open", () => {
+      logger2.info("Connected to Figma socket server");
+    });
+    ws.on("message", (data) => {
+      try {
+        const json = JSON.parse(data);
+        const myResponse = json.message;
+        logger2.debug(`Received message: ${JSON.stringify(myResponse)}`);
+        logger2.log("myResponse" + JSON.stringify(myResponse));
+        if (myResponse.id && pendingRequests.has(myResponse.id) && myResponse.result) {
+          const request = pendingRequests.get(myResponse.id);
+          clearTimeout(request.timeout);
+          if (myResponse.error) {
+            logger2.error(`Error from Figma: ${myResponse.error}`);
+            request.reject(new Error(myResponse.error));
+          } else if (myResponse.result) {
+            request.resolve(myResponse.result);
+          }
+          pendingRequests.delete(myResponse.id);
+        } else {
+          logger2.info(
+            `Received broadcast message: ${JSON.stringify(myResponse)}`
+          );
+        }
+      } catch (error) {
+        logger2.error(
+          `Error parsing message: ${error instanceof Error ? error.message : String(error)}`
+        );
+      }
+    });
+    ws.on("error", (error) => {
+      logger2.error(`Socket error: ${error}`);
+    });
+    ws.on("close", () => {
+      logger2.info("Disconnected from Figma socket server");
+      ws = null;
+      for (const [id, request] of pendingRequests.entries()) {
+        clearTimeout(request.timeout);
+        request.reject(new Error("Connection closed"));
+        pendingRequests.delete(id);
+      }
+      logger2.info("Attempting to reconnect in 2 seconds...");
+      setTimeout(() => connectToFigma2(port), 2e3);
+    });
+  }
+  function sendCommandToFigma2(command, params = {}) {
+    return new Promise((resolve, reject) => {
+      if (!ws || ws.readyState !== import_ws.default.OPEN) {
+        connectToFigma2();
+        reject(new Error("Not connected to Figma. Attempting to connect..."));
+        return;
+      }
+      const id = (0, import_uuid.v4)();
+      const request = {
+        id,
+        type: "message",
+        message: {
+          id,
+          command,
+          params: {
+            ...params
+          }
+        }
+      };
+      const timeout = setTimeout(() => {
+        if (pendingRequests.has(id)) {
+          pendingRequests.delete(id);
+          logger2.error(`Request ${id} to Figma timed out after 30 seconds`);
+          reject(new Error("Request to Figma timed out"));
+        }
+      }, 3e4);
+      pendingRequests.set(id, { resolve, reject, timeout });
+      logger2.info(`Sending command to Figma: ${command}`);
+      logger2.debug(`Request details: ${JSON.stringify(request)}`);
+      ws.send(JSON.stringify(request));
+    });
+  }
+  return {
+    connectToFigma: connectToFigma2,
+    sendCommandToFigma: sendCommandToFigma2
+  };
+}
+
+// src/server.ts
 var logger = {
   info: (message) => process.stderr.write(`[INFO] ${message}
 `),
@@ -51,38 +143,95 @@ var logger = {
   log: (message) => process.stderr.write(`[LOG] ${message}
 `)
 };
-function compressData(data) {
-  const jsonString = JSON.stringify(data);
-  const compressed = (0, import_zlib.gzipSync)(jsonString);
-  const base64 = compressed.toString("base64");
-  const originalBytes = Buffer.byteLength(jsonString, "utf8");
-  console.info(
-    `Compression: ${originalBytes} bytes -> ${compressed.length} bytes (ratio ${(compressed.length / originalBytes * 100).toFixed(1)}%)`
+var BASE_DIR = import_path.default.join(__dirname, "../../", "rules");
+function levenshtein(a, b) {
+  const m = a.length;
+  const n = b.length;
+  if (m === 0) return n;
+  if (n === 0) return m;
+  const dp = Array.from(
+    { length: m + 1 },
+    () => Array(n + 1).fill(0)
   );
-  return base64;
+  for (let i = 0; i <= m; i++) dp[i][0] = i;
+  for (let j = 0; j <= n; j++) dp[0][j] = j;
+  for (let i = 1; i <= m; i++) {
+    for (let j = 1; j <= n; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      dp[i][j] = Math.min(
+        dp[i - 1][j] + 1,
+        // 삭제
+        dp[i][j - 1] + 1,
+        // 삽입
+        dp[i - 1][j - 1] + cost
+        // 교체
+      );
+    }
+  }
+  return dp[m][n];
 }
-var ws = null;
-var pendingRequests = /* @__PURE__ */ new Map();
-var server = new import_mcp.McpServer({
-  name: "@jongh/figma-plugin",
-  version: "1.0.0"
-});
+function getSimilarityScore(target, candidate) {
+  if (target === candidate) return 100;
+  if (candidate.startsWith(target) || target.startsWith(candidate)) return 95;
+  if (candidate.includes(target) || target.includes(candidate)) return 85;
+  const distance = levenshtein(target, candidate);
+  const maxLen = Math.max(target.length, candidate.length);
+  const normalized = 1 - distance / maxLen;
+  const score = Math.floor(normalized * 80);
+  return score > 0 ? score : 0;
+}
+var STORIES_EXT = ".stories.mdx";
+function findSimilarStoriesFiles(baseDir, componentName) {
+  const compName = componentName.toLowerCase();
+  const files = import_fs.default.readdirSync(baseDir).filter((file) => file.toLowerCase().endsWith(STORIES_EXT));
+  const scored = files.map((file) => {
+    const baseName = file.toLowerCase().replace(new RegExp(`${STORIES_EXT.replace(".", "\\.")}$`), "");
+    return {
+      file,
+      baseName,
+      score: getSimilarityScore(compName, baseName)
+    };
+  }).filter(({ score }) => score > 0).sort((a, b) => b.score - a.score);
+  return scored;
+}
+var server = new import_mcp.McpServer(
+  {
+    name: "@jongh/figma-plugin",
+    version: "1.0.0"
+  },
+  {
+    capabilities: {
+      logging: logger,
+      resources: {
+        subscribe: true,
+        listChanged: true
+      }
+    }
+  }
+);
 var args = process.argv.slice(2);
 var serverArg = args.find((arg) => arg.startsWith("--server="));
 var serverUrl = serverArg ? serverArg.split("=")[1] : "localhost";
 var WS_URL = serverUrl === "localhost" ? `ws://${serverUrl}` : `wss://${serverUrl}`;
-server.tool(
-  "get_document_info",
-  "Get detailed information about the current Figma document",
-  {},
+var { connectToFigma, sendCommandToFigma } = createFigmaClient({
+  logger,
+  serverUrl,
+  wsUrlBase: WS_URL
+});
+server.registerTool(
+  "get_selection",
+  {
+    description: "Get information about the current selection in Figma",
+    inputSchema: {}
+  },
   async () => {
     try {
-      const result = await sendCommandToFigma("get_document_info");
+      const result = await sendCommandToFigma("get_selection");
       return {
         content: [
           {
             type: "text",
-            text: JSON.stringify(result)
+            text: `${result}`
           }
         ]
       };
@@ -91,119 +240,113 @@ server.tool(
         content: [
           {
             type: "text",
-            text: `Error getting document info: ${error instanceof Error ? error.message : String(error)}`
+            text: `Error getting selection: ${error instanceof Error ? error.message : String(error)}`
           }
         ]
       };
     }
   }
 );
-server.registerResource(
-  "figma-selection",
-  new import_mcp.ResourceTemplate("figma://selection/{sessionId}", { list: void 0 }),
+server.registerPrompt(
+  "design system components",
   {
-    title: "Figma Selection Result",
-    description: "Stores the full Figma selection data when it's too large to return inline"
+    description: "help analyze design system common components"
   },
-  async (uri) => {
-    const result = await sendCommandToFigma("get_selection");
+  () => {
     return {
-      contents: [
+      messages: [
         {
-          uri: uri.href,
-          mimeType: "application/json",
-          text: typeof result === "string" ? result : JSON.stringify(result, null, 2)
+          role: "assistant",
+          content: {
+            type: "text",
+            text: `\uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uAD6C\uD604 \uC815\uBCF4\uB97C \uD30C\uC545\uD558\uC5EC \uCF54\uB4DC \uC81C\uC791\uC5D0 \uD65C\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4. \uCF54\uB4DC \uC0AC\uC6A9 \uC608\uC2DC, \uC124\uBA85 \uB4F1\uC744 \uC815\uD655\uD558\uAC8C \uD30C\uC545\uD558\uC5EC \uC2E4\uC81C \uCF54\uB4DC \uC81C\uC791\uC5D0 \uC815\uD655\uD558\uAC8C \uD65C\uC6A9\uD560 \uC218 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.  
+            \uD2B9\uD788 Figma \uC778\uD130\uD398\uC774\uC2A4\uC640 \uCF54\uB4DC \uAC04\uC758 \uAD6C\uD604 \uCC28\uC774\uB97C \uC815\uD655\uD558\uAC8C \uD30C\uC545\uD558\uACE0 \uCF54\uB4DC\uC5D0 \uB9DE\uAC8C \uD65C\uC6A9\uD574\uC57C \uD569\uB2C8\uB2E4.`
+          }
         }
-      ]
+      ],
+      description: "Troubleshooting guide for connection issues between Figma plugin and MCP server"
     };
   }
 );
-server.tool(
-  "get_selection",
-  "Get information about the current selection in Figma",
-  {},
-  async () => {
-    const resourceUri = "figma://selection/current";
+server.registerTool(
+  "get_rule_of_components",
+  {
+    title: "Rule of design system component",
+    description: [
+      "\uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC5D0\uC11C \uC0AC\uC6A9\uD558\uB294 \uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uAD6C\uD604 \uADDC\uCE59(\uAD6C\uC870, props, \uC2A4\uD0C0\uC77C \uB4F1)\uC744 \uC870\uD68C\uD558\uB294 MCP \uB3C4\uAD6C\uC785\uB2C8\uB2E4.",
+      "Figma \uB514\uC790\uC778\uC5D0\uC11C \uC0AC\uC6A9\uB41C \uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uC774\uB984\uC744 componentName \uC778\uC790\uB85C \uB118\uACA8 \uD638\uCD9C\uD558\uBA74,",
+      "\uD574\uB2F9 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uAD6C\uD604 \uC815\uBCF4\uB97C \uBC18\uD658\uD558\uC5EC \u2018MCP\uB97C \uD1B5\uD574 \uC0AC\uC6A9\uB41C \uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8\uC758 \uAD6C\uD604 \uC815\uBCF4\uB97C \uD30C\uC545\uD55C \uB4A4\u2019 \uD398\uC774\uC9C0 \uCF54\uB4DC\uB97C \uC791\uC131\uD560 \uB54C \uC0AC\uC6A9\uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.",
+      "\uC608: Figma\uC5D0\uC11C Button \uCEF4\uD3EC\uB10C\uD2B8\uAC00 \uC4F0\uC600\uB2E4\uBA74 componentName\uC5D0 'button'\uC744 \uB123\uC5B4 \uC774 \uB3C4\uAD6C\uB97C \uD638\uCD9C\uD574 \uAD6C\uD604 \uADDC\uCE59\uC744 \uC870\uD68C\uD558\uC138\uC694."
+    ].join(" "),
+    inputSchema: import_zod.z.object({
+      componentName: import_zod.z.string().describe(
+        "Figma/\uB514\uC790\uC778 \uC2DC\uC2A4\uD15C\uC5D0\uC11C \uC0AC\uC6A9\uB41C \uACF5\uD1B5 \uCEF4\uD3EC\uB10C\uD2B8 \uC774\uB984 (\uC608: 'button', 'input', 'modal')"
+      )
+    })
+  },
+  async ({ componentName }) => {
+    const similarFiles = findSimilarStoriesFiles(BASE_DIR, componentName);
+    const compName = componentName.toLocaleLowerCase();
+    const texts = similarFiles.map(
+      ({ file }) => import_fs.default.readFileSync(import_path.default.join(BASE_DIR, file), "utf-8")
+    );
     return {
       content: [
         {
-          // 큰 데이터를 안 넣고, 링크만 넘겨줍니다
-          type: "resource_link",
-          uri: resourceUri,
-          name: "Current Figma Selection",
-          mimeType: "application/json",
-          description: "Full raw selection JSON from Figma"
+          type: "text",
+          text: `${texts.join("")}`
         }
       ]
     };
   }
 );
-server.tool(
-  "get_node_info",
-  "Get detailed information about a specific node in Figma",
-  {
-    nodeId: import_zod.z.string().describe("The ID of the node to get information about")
-  },
-  async ({ nodeId }) => {
-    try {
-      const result = await sendCommandToFigma("get_node_info", { nodeId });
-      return {
-        content: [
-          {
-            type: "text",
-            text: JSON.stringify(result)
-          }
-        ]
-      };
-    } catch (error) {
+server.registerResource(
+  "file",
+  // 리소스 ID
+  new import_mcp.ResourceTemplate("file://{path}/", {
+    list: async () => {
+      const paths = import_fs.default.readdirSync(BASE_DIR);
       return {
-        content: [
-          {
-            type: "text",
-            text: `Error getting node info: ${error instanceof Error ? error.message : String(error)}`
+        resources: paths.map((path2) => ({
+          uri: `file://${path2}`,
+          name: path2,
+          title: path2,
+          description: "local file from design-rules",
+          mimeType: "text/plain",
+          // 필요시 확장자 보고 바꾸셔도 됩니다
+          _meta: {
+            filePath: path2
           }
-        ]
+        }))
       };
     }
-  }
-);
-server.prompt(
-  "connection_troubleshooting",
-  "Help users troubleshoot connection issues",
-  () => {
+  }),
+  {
+    title: "design rule",
+    description: "important rules and guidelines for resolving design data"
+  },
+  // resources/read 핸들러
+  async (uri, props) => {
+    const text = import_fs.default.readFileSync(
+      import_path.default.join(BASE_DIR, props.path),
+      "utf-8"
+    );
     return {
-      messages: [
+      contents: [
         {
-          role: "assistant",
-          content: {
-            type: "text",
-            text: `When users report connection issues, ask them to check:
-
-1. Figma Plugin Connection:
-  - Did you click the "Connect" button in the Figma plugin?
-  - Is the Figma plugin running and showing a connected status?
-  - Try refreshing the plugin or restarting it if needed
-
-2. MCP Connection in Cursor:
-  - Go to Cursor Settings/Preferences
-  - Check if the MCP server connection is properly configured(green light)
-  - Verify the MCP server is running and connected
-  - Look for any connection error messages in the settings
-
-If both are properly connected and issues persist, try:
-- Restarting both the Figma plugin and Cursor
-- Checking if the WebSocket connection is blocked by firewall
-- Verifying the correct server URL and port configuration`
-          }
+          uri: uri.href,
+          mimeType: "text/plain",
+          text
         }
-      ],
-      description: "Troubleshooting guide for connection issues between Figma plugin and MCP server"
+      ]
     };
   }
 );
-server.prompt(
+server.registerPrompt(
   "data_analysis_strategy",
-  "Best practices for analyzing Figma design data",
+  {
+    description: "Best practices for analyzing Figma design data"
+  },
   () => {
     return {
       messages: [
@@ -229,6 +372,8 @@ server.prompt(
             - Identify responsive design patterns
             - Note alignment and positioning strategies
 
+            
+
 
             `
           }
@@ -238,91 +383,6 @@ server.prompt(
     };
   }
 );
-function connectToFigma(port = 3055) {
-  if (ws && ws.readyState === import_ws.default.OPEN) {
-    logger.info("Already connected to Figma");
-    return;
-  }
-  const wsUrl = serverUrl === "localhost" ? `${WS_URL}:${port}` : WS_URL;
-  logger.info(`Connecting to Figma socket server at ${wsUrl}...`);
-  ws = new import_ws.default(wsUrl);
-  ws.on("open", () => {
-    logger.info("Connected to Figma socket server");
-  });
-  ws.on("message", (data) => {
-    try {
-      const json = JSON.parse(data);
-      const myResponse = json.message;
-      logger.debug(`Received message: ${JSON.stringify(myResponse)}`);
-      logger.log("myResponse" + JSON.stringify(myResponse));
-      if (myResponse.id && pendingRequests.has(myResponse.id) && myResponse.result) {
-        const request = pendingRequests.get(myResponse.id);
-        clearTimeout(request.timeout);
-        if (myResponse.error) {
-          logger.error(`Error from Figma: ${myResponse.error}`);
-          request.reject(new Error(myResponse.error));
-        } else {
-          if (myResponse.result) {
-            request.resolve(myResponse.result);
-          }
-        }
-        pendingRequests.delete(myResponse.id);
-      } else {
-        logger.info(`Received broadcast message: ${JSON.stringify(myResponse)}`);
-      }
-    } catch (error) {
-      logger.error(
-        `Error parsing message: ${error instanceof Error ? error.message : String(error)}`
-      );
-    }
-  });
-  ws.on("error", (error) => {
-    logger.error(`Socket error: ${error}`);
-  });
-  ws.on("close", () => {
-    logger.info("Disconnected from Figma socket server");
-    ws = null;
-    for (const [id, request] of pendingRequests.entries()) {
-      clearTimeout(request.timeout);
-      request.reject(new Error("Connection closed"));
-      pendingRequests.delete(id);
-    }
-    logger.info("Attempting to reconnect in 2 seconds...");
-    setTimeout(() => connectToFigma(port), 2e3);
-  });
-}
-function sendCommandToFigma(command, params = {}) {
-  return new Promise((resolve, reject) => {
-    if (!ws || ws.readyState !== import_ws.default.OPEN) {
-      connectToFigma();
-      reject(new Error("Not connected to Figma. Attempting to connect..."));
-      return;
-    }
-    const id = (0, import_uuid.v4)();
-    const request = {
-      id,
-      type: "message",
-      message: {
-        id,
-        command,
-        params: {
-          ...params
-        }
-      }
-    };
-    const timeout = setTimeout(() => {
-      if (pendingRequests.has(id)) {
-        pendingRequests.delete(id);
-        logger.error(`Request ${id} to Figma timed out after 30 seconds`);
-        reject(new Error("Request to Figma timed out"));
-      }
-    }, 3e4);
-    pendingRequests.set(id, { resolve, reject, timeout });
-    logger.info(`Sending command to Figma: ${command}`);
-    logger.debug(`Request details: ${JSON.stringify(request)}`);
-    ws.send(JSON.stringify(request));
-  });
-}
 async function main() {
   try {
     connectToFigma();
@@ -342,7 +402,3 @@ main().catch((error) => {
   );
   process.exit(1);
 });
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  compressData
-});

package/package.json

@@ -1,20 +1,21 @@
 {
   "name": "@ject-5-fe/figma-plugin",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "plugma dev",
     "socket": "tsx src/socket.ts",
     "start": "concurrently \"yarn run socket\" \"yarn run dev\" --names \"SOCKET,MCP\" --prefix-colors \"blue,green\"",
-    "build:server": "tsup"
+    "build:server": "tsup",
+    "export-icons": "tsx src/cli/exportIcons.ts"
   },
   "bin": "dist/server/server.cjs",
   "files": [
     "dist/server/server.cjs"
   ],
   "dependencies": {
-    "@modelcontextprotocol/sdk": "^1",
-    "es-toolkit": "^1.41.0",
+    "@modelcontextprotocol/sdk": "^1.24",
+    "es-toolkit": "^1.39.10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "uuid": "^11",