@czi-sds/mcp 0.3.0 → 0.5.0

package/dist/stdio.js

@@ -2,8 +2,8 @@
 import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
 import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
 import { z } from 'zod';
-import fs from 'fs';
-import path from 'path';
+import fs, { readFileSync } from 'fs';
+import path, { dirname as dirname$1, join } from 'path';
 import { fileURLToPath } from 'url';
 
 var server = new McpServer({
@@ -11,7 +11,10 @@ var server = new McpServer({
   version: "0.1.0",
   capabilities: {
     prompts: {},
-    resources: {},
+    resources: {
+      subscribe: true,
+      listChanged: true
+    },
     tools: {}
   }
 });
@@ -81,48 +84,6 @@ async function fetchComponentProps(component) {
     );
   }
 }
-async function fetchComponentPropsStorybook(component) {
-  try {
-    const propsPaths = [
-      path.join(
-        dirname,
-        `../../data/component-props-storybook/${component}-storybook.json`
-      ),
-      // From src/lib in dev
-      path.join(
-        dirname,
-        `../data/component-props-storybook/${component}-storybook.json`
-      ),
-      // From dist in prod
-      path.join(
-        process.cwd(),
-        `data/component-props-storybook/${component}-storybook.json`
-      )
-      // From current working directory
-    ];
-    let propsPath = "";
-    for (const p of propsPaths) {
-      if (fs.existsSync(p)) {
-        propsPath = p;
-        break;
-      }
-    }
-    if (!propsPath) {
-      return {
-        [component]: {
-          message: "Props information not available for this component. Run 'yarn generate:component-props' to generate props data.",
-          props: {}
-        }
-      };
-    }
-    const fileContent = fs.readFileSync(propsPath, "utf-8");
-    return JSON.parse(fileContent);
-  } catch (error) {
-    throw new Error(
-      `Failed to load props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`
-    );
-  }
-}
 async function fetchTailwindTokens() {
   try {
     const possiblePaths = [
@@ -234,56 +195,6 @@ var listComponentsTool = {
     });
   }
 };
-var getComponentPropsStorybookTool = {
-  name: "get_component_props_storybook",
-  description: "Get detailed properties of a specific SDS component using Storybook analysis. Unlike the regular get-component-props tool, which uses TypeScript analysis, this tool retrieves the properties, attributes, design related props for a component (like sdsStyle, sdsType, sdsSize, etc.), and configuration options available for a given SDS component from Storybook.",
-  async ctx() {
-    try {
-      const componentList = await getAllComponentNames();
-      return {
-        componentList: [
-          ...componentList.components,
-          ...componentList["data-viz"]
-        ]
-      };
-    } catch (error) {
-      throw new Error(
-        `Failed to initialize component props tool: ${error instanceof Error ? error.message : "Unknown error"}`
-      );
-    }
-  },
-  exec(server2, { ctx, name, description }) {
-    server2.tool(
-      name,
-      description,
-      {
-        component: z.enum(ctx.componentList).describe("The name of the SDS component to get properties for")
-      },
-      async ({ component }) => {
-        try {
-          const json = await fetchComponentPropsStorybook(component);
-          return {
-            content: [
-              {
-                type: "text",
-                text: JSON.stringify(json)
-              }
-            ]
-          };
-        } catch (error) {
-          return {
-            content: [
-              {
-                type: "text",
-                text: `Failed to get component props for ${component}: ${error instanceof Error ? error.message : "Unknown error"}`
-              }
-            ]
-          };
-        }
-      }
-    );
-  }
-};
 
 // src/lib/tailwind-guidance.ts
 var TAILWIND_TOKEN_GUIDANCE = {
@@ -637,56 +548,56 @@ var dirname2 = path.dirname(filename2);
 function mapComponentToFile(componentName, exportedFiles) {
   const componentToFileMap = {
     // Button components
-    "Button": "Buttons",
-    "ButtonDropdown": "Buttons",
-    "ButtonIcon": "Buttons",
-    "ButtonToggle": "Buttons",
+    Button: "Buttons",
+    ButtonDropdown: "Buttons",
+    ButtonIcon: "Buttons",
+    ButtonToggle: "Buttons",
     // Table components
-    "TableHeader": "Table",
-    "TableRow": "Table",
+    TableHeader: "Table",
+    TableRow: "Table",
     // Input components
-    "InputCheckbox": "Control-Inputs",
-    "InputRadio": "Control-Inputs",
-    "InputToggle": "Control-Inputs",
-    "InputText": "Field-Inputs",
-    "InputDropdown": "Dropdown-Input",
-    "InputSearch": "Search-Input",
-    "InputSlider": "Control-Inputs",
+    InputCheckbox: "Control-Inputs",
+    InputRadio: "Control-Inputs",
+    InputToggle: "Control-Inputs",
+    InputText: "Field-Inputs",
+    InputDropdown: "Dropdown-Input",
+    InputSearch: "Search-Input",
+    InputSlider: "Control-Inputs",
     // Dropdown components
-    "Dropdown": "Dropdown-Menu",
-    "DropdownMenu": "Dropdown-Menu",
+    Dropdown: "Dropdown-Menu",
+    DropdownMenu: "Dropdown-Menu",
     // Content components
-    "ContentCard": "Content-Card",
-    "LoadingIndicator": "Loading-Indicator",
+    ContentCard: "Content-Card",
+    LoadingIndicator: "Loading-Indicator",
     // Navigation components
-    "NavigationFooter": "Navigation",
-    "NavigationHeader": "Navigation",
-    "NavigationJumpTo": "Navigation",
+    NavigationFooter: "Navigation",
+    NavigationHeader: "Navigation",
+    NavigationJumpTo: "Navigation",
     // Control components
-    "SegmentedControl": "Segmented-Control",
+    SegmentedControl: "Segmented-Control",
     // List and menu components
-    "List": "Lists",
-    "Menu": "Dropdown-Menu",
-    "MenuItem": "Dropdown-Menu",
-    "MenuSelect": "Dropdown-Menu",
+    List: "Lists",
+    Menu: "Dropdown-Menu",
+    MenuItem: "Dropdown-Menu",
+    MenuSelect: "Dropdown-Menu",
     // Tag components
-    "Tag": "Tags",
-    "TagFilter": "Tags",
+    Tag: "Tags",
+    TagFilter: "Tags",
     // Tooltip components
-    "Tooltip": "Tooltips",
-    "TooltipCondensed": "Tooltips",
-    "TooltipTable": "Tooltips",
+    Tooltip: "Tooltips",
+    TooltipCondensed: "Tooltips",
+    TooltipTable: "Tooltips",
     // Table Cell components
-    "CellBasic": "Table",
-    "CellComponent": "Table",
-    "CellHeader": "Table",
+    CellBasic: "Table",
+    CellComponent: "Table",
+    CellHeader: "Table",
     // Filter components
-    "ComplexFilter": "Filters",
+    ComplexFilter: "Filters",
     // Other components
-    "Icon": "Icons",
-    "Chip": "Tags",
+    Icon: "Icons",
+    Chip: "Tags",
     // Chips are often similar to tags
-    "Pagination": "Navigation"
+    Pagination: "Navigation"
     // Pagination is often part of navigation
   };
   const mappedFile = componentToFileMap[componentName];
@@ -716,7 +627,9 @@ function getExportedFiles() {
       }
     }
     if (!exportDir) {
-      console.warn("Export directory not found in any expected location. Please run Zeroheight export first.");
+      console.warn(
+        "Export directory not found in any expected location. Please run Zeroheight export first."
+      );
       return [];
     }
     const files = fs.readdirSync(exportDir).filter((file) => file.endsWith(".md") && file !== "README.md").map((file) => file.replace(".md", ""));
@@ -743,7 +656,10 @@ var getComponentDocsTool = {
         ...componentList["data-viz"]
       ];
       const exportedFiles = getExportedFiles();
-      const componentsWithDocs = getComponentsWithDocs(allComponents, exportedFiles);
+      const componentsWithDocs = getComponentsWithDocs(
+        allComponents,
+        exportedFiles
+      );
       return {
         componentsWithDocs,
         exportedFiles
@@ -823,7 +739,6 @@ ${documentation}`
 // src/tools/index.ts
 var tools = [
   getComponentPropsTool,
-  getComponentPropsStorybookTool,
   getComponentDocsTool,
   listComponentsTool,
   getTailwindTokensTool
@@ -847,10 +762,96 @@ var initializeTools = async (server2, config) => {
     })
   );
 };
+var FILENAME = fileURLToPath(import.meta.url);
+var DIRNAME = dirname$1(FILENAME);
+var dataDir = join(DIRNAME, "../../data/resources");
+var MIME_TYPE_MARKDOWN = "text/markdown";
+var UNKNOWN_ERROR = "Unknown error";
+function initializeResources(server2) {
+  server2.resource(
+    "Figma to Code Translation Rules",
+    "sds://rules/figma",
+    {
+      mimeType: MIME_TYPE_MARKDOWN,
+      description: "Rules for translating Figma designs to SDS code"
+    },
+    async () => {
+      try {
+        const filePath = join(dataDir, "figma-rules.md");
+        const content = readFileSync(filePath, "utf-8");
+        return {
+          contents: [
+            {
+              uri: "sds://rules/figma",
+              mimeType: MIME_TYPE_MARKDOWN,
+              text: content
+            }
+          ]
+        };
+      } catch (err) {
+        const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
+        throw new Error("Failed to read Figma rules: " + message);
+      }
+    }
+  );
+  server2.resource(
+    "SDS Component Usage Rules",
+    "sds://rules/components",
+    {
+      mimeType: MIME_TYPE_MARKDOWN,
+      description: "Guidelines for using SDS components correctly"
+    },
+    async () => {
+      try {
+        const filePath = join(dataDir, "sds-component-rules.md");
+        const content = readFileSync(filePath, "utf-8");
+        return {
+          contents: [
+            {
+              uri: "sds://rules/components",
+              mimeType: MIME_TYPE_MARKDOWN,
+              text: content
+            }
+          ]
+        };
+      } catch (err) {
+        const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
+        throw new Error("Failed to read component rules: " + message);
+      }
+    }
+  );
+  server2.resource(
+    "Zeroheight Documentation Rules",
+    "sds://rules/zeroheight",
+    {
+      mimeType: MIME_TYPE_MARKDOWN,
+      description: "Rules for following Zeroheight documentation"
+    },
+    async () => {
+      try {
+        const filePath = join(dataDir, "zeroheight-rules.md");
+        const content = readFileSync(filePath, "utf-8");
+        return {
+          contents: [
+            {
+              uri: "sds://rules/zeroheight",
+              mimeType: MIME_TYPE_MARKDOWN,
+              text: content
+            }
+          ]
+        };
+      } catch (err) {
+        const message = err instanceof Error ? err.message : UNKNOWN_ERROR;
+        throw new Error("Failed to read Zeroheight rules: " + message);
+      }
+    }
+  );
+}
 
 // src/stdio.ts
 async function main() {
   await initializeTools(server, {});
+  initializeResources(server);
   const transport = new StdioServerTransport();
   await server.connect(transport);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@czi-sds/mcp",
   "description": "The official MCP server for SDS",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "main": "dist/stdio.js",
   "files": [
     "dist",
@@ -22,9 +22,8 @@
     "generate:tailwind-tokens": "mkdir -p data && cp ../components/src/common/styles-dictionary/json/tailwind.json data/tailwind.json && echo '✓ Copied tailwind.json to data folder'",
     "generate:components-list": "tsx scripts/generate-component-list.ts",
     "generate:component-props": "tsx scripts/generate-component-props.ts",
-    "generate:component-props-storybook": "tsx scripts/generate-component-props-from-storybook.ts",
     "generate:zeroheight-export": "tsx scripts/export-zeroheight-pages.ts",
-    "generate:all": "yarn generate:tailwind-tokens && yarn generate:components-list && yarn generate:component-props && yarn generate:component-props-storybook && yarn generate:zeroheight-export",
+    "generate:all": "yarn generate:tailwind-tokens && yarn generate:components-list && yarn generate:component-props && yarn generate:zeroheight-export",
     "prebuild": "yarn generate:all",
     "build": "yarn prebuild && tsup && chmod 755 dist/stdio.js",
     "dev": "tsup --watch",
@@ -63,5 +62,5 @@
     "tsx": "^4.20.3",
     "typescript": "^5.9.2"
   },
-  "gitHead": "c4bbb6751f8efd89ff5b6e560d8aea687cf8a84c"
+  "gitHead": "0d113d49faf2a30e2a557450cf2deaecf830656b"
 }

package/data/component-props/Chip.json

@@ -1,73 +0,0 @@
-{
-  "Chip": {
-    "props": {
-      "size": {
-        "type": "\"small\" | \"medium\"",
-        "isRequired": false,
-        "description": "The size of the component.",
-        "defaultValue": "medium"
-      },
-      "status": {
-        "type": "\"success\" | \"error\" | \"warning\" | \"info\" | \"pending\" | \"beta\"",
-        "isRequired": false
-      },
-      "isRounded": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
-      },
-      "children": {
-        "type": "null",
-        "isRequired": false,
-        "description": "This prop isn't supported.\nUse the `component` prop if you need to change the children structure."
-      },
-      "color": {
-        "type": "\"success\" | \"error\" | \"warning\" | \"info\" | \"default\" | \"primary\" | \"secondary\"",
-        "isRequired": false,
-        "description": "The color of the component.\nIt supports both default and custom theme colors, which can be added as shown in the\n[palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).",
-        "defaultValue": "default"
-      },
-      "disabled": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false,
-        "description": "If `true`, the component is disabled.",
-        "defaultValue": false
-      },
-      "icon": {
-        "type": "ReactElement",
-        "isRequired": false,
-        "description": "Icon element."
-      },
-      "label": {
-        "type": "ReactNode",
-        "isRequired": false,
-        "description": "The content of the component."
-      },
-      "variant": {
-        "type": "\"filled\" | \"outlined\"",
-        "isRequired": false,
-        "description": "The variant to use.",
-        "defaultValue": "filled"
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "id": {
-        "type": "string",
-        "isRequired": false
-      },
-      "onChange": {
-        "type": "FormEventHandler<HTMLDivElement>",
-        "isRequired": false
-      },
-      "onClick": {
-        "type": "function",
-        "isRequired": false
-      }
-    }
-  }
-}

package/data/component-props/List.json

@@ -1,43 +0,0 @@
-{
-  "List": {
-    "props": {
-      "component": {
-        "type": "\"symbol\" | \"object\" | \"style\" | \"ul\" | \"a\" | \"abbr\" | \"address\" | \"area\" | \"article\" | \"aside\" | \"audio\" | \"b\" | \"base\" | \"bdi\" | \"bdo\" | \"big\" | \"blockquote\" | \"body\" | \"br\" | \"button\" | \"canvas\" | \"caption\" | \"center\" | \"cite\" | \"code\" | \"col\" | \"colgroup\" | \"data\" | \"datalist\" | \"dd\" | \"del\" | \"details\" | \"dfn\" | \"dialog\" | \"div\" | \"dl\" | \"dt\" | \"em\" | \"embed\" | \"fieldset\" | \"figcaption\" | \"figure\" | \"footer\" | \"form\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" | \"head\" | \"header\" | \"hgroup\" | \"hr\" | \"html\" | \"i\" | \"iframe\" | \"img\" | \"input\" | \"ins\" | \"kbd\" | \"keygen\" | \"label\" | \"legend\" | \"li\" | \"link\" | \"main\" | \"map\" | \"mark\" | \"menu\" | \"menuitem\" | \"meta\" | \"meter\" | \"nav\" | \"noindex\" | \"noscript\" | \"ol\" | \"optgroup\" | \"option\" | \"output\" | \"p\" | \"param\" | \"picture\" | \"pre\" | \"progress\" | \"q\" | \"rp\" | \"rt\" | \"ruby\" | \"s\" | \"samp\" | \"search\" | \"slot\" | \"script\" | \"section\" | \"select\" | \"small\" | \"source\" | \"span\" | \"strong\" | \"sub\" | \"summary\" | \"sup\" | \"table\" | \"template\" | \"tbody\" | \"td\" | \"textarea\" | \"tfoot\" | \"th\" | \"thead\" | \"time\" | \"title\" | \"tr\" | \"track\" | \"u\" | \"var\" | \"video\" | \"wbr\" | \"webview\" | \"svg\" | \"animate\" | \"animateMotion\" | \"animateTransform\" | \"circle\" | \"clipPath\" | \"defs\" | \"desc\" | \"ellipse\" | \"feBlend\" | \"feColorMatrix\" | \"feComponentTransfer\" | \"feComposite\" | \"feConvolveMatrix\" | \"feDiffuseLighting\" | \"feDisplacementMap\" | \"feDistantLight\" | \"feDropShadow\" | \"feFlood\" | \"feFuncA\" | \"feFuncB\" | \"feFuncG\" | \"feFuncR\" | \"feGaussianBlur\" | \"feImage\" | \"feMerge\" | \"feMergeNode\" | \"feMorphology\" | \"feOffset\" | \"fePointLight\" | \"feSpecularLighting\" | \"feSpotLight\" | \"feTile\" | \"feTurbulence\" | \"filter\" | \"foreignObject\" | \"g\" | \"image\" | \"line\" | \"linearGradient\" | \"marker\" | \"mask\" | \"metadata\" | \"mpath\" | \"path\" | \"pattern\" | \"polygon\" | \"polyline\" | \"radialGradient\" | \"rect\" | \"set\" | \"stop\" | \"switch\" | \"text\" | \"textPath\" | \"tspan\" | \"use\" | \"view\" | \"ComponentClass",
-        "isRequired": false
-      },
-      "marginBottom": {
-        "type": "\"s\" | \"xxxs\" | \"xxs\" | \"xs\" | \"m\" | \"l\"",
-        "isRequired": false
-      },
-      "ordered": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": false
-      },
-      "children": {
-        "type": "ReactNode",
-        "isRequired": false,
-        "description": "The content of the component."
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "id": {
-        "type": "string",
-        "isRequired": false
-      },
-      "onChange": {
-        "type": "FormEventHandler<HTMLUListElement>",
-        "isRequired": false
-      },
-      "onClick": {
-        "type": "function",
-        "isRequired": false
-      }
-    }
-  }
-}

package/data/component-props/Menu.json

@@ -1,48 +0,0 @@
-{
-  "Menu": {
-    "props": {
-      "children": {
-        "type": "ReactNode",
-        "isRequired": false,
-        "description": "Menu contents, normally `MenuItem`s."
-      },
-      "onClose": {
-        "type": "\"backdropClick\" | \"escapeKeyDown\"",
-        "isRequired": false,
-        "description": "Callback fired when the component requests to be closed.\n@param event The event source of the callback.\n@param reason Can be: `\"escapeKeyDown\"`, `\"backdropClick\"`, `\"tabKeyDown\"`."
-      },
-      "open": {
-        "type": "\"false\" | \"true\"",
-        "isRequired": true,
-        "description": "If `true`, the component is shown."
-      },
-      "variant": {
-        "type": "\"menu\" | \"selectedMenu\"",
-        "isRequired": false,
-        "description": "The variant to use. Use `menu` to prevent selected items from impacting the initial focus.",
-        "defaultValue": "selectedMenu"
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false,
-        "description": "@ignore"
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "id": {
-        "type": "string",
-        "isRequired": false
-      },
-      "onChange": {
-        "type": "FormEventHandler<HTMLDivElement>",
-        "isRequired": false
-      },
-      "onClick": {
-        "type": "function",
-        "isRequired": false
-      }
-    }
-  }
-}

package/data/component-props/Table.json

@@ -1,26 +0,0 @@
-{
-  "Table": {
-    "props": {
-      "className": {
-        "type": "string",
-        "isRequired": false
-      },
-      "id": {
-        "type": "string",
-        "isRequired": false
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false
-      },
-      "onChange": {
-        "type": "FormEventHandler<HTMLTableElement>",
-        "isRequired": false
-      },
-      "onClick": {
-        "type": "function",
-        "isRequired": false
-      }
-    }
-  }
-}

package/data/component-props-storybook/Accordion-storybook.json

@@ -1,45 +0,0 @@
-{
-  "Accordion": {
-    "props": {
-      "defaultExpanded": {
-        "type": "boolean",
-        "isRequired": false
-      },
-      "id": {
-        "type": "string",
-        "isRequired": true
-      },
-      "subtitle": {
-        "type": "string",
-        "isRequired": false
-      },
-      "togglePosition": {
-        "type": "\"right\" | \"left\"",
-        "isRequired": false,
-        "options": [
-          "right",
-          "left"
-        ]
-      },
-      "useDivider": {
-        "type": "boolean",
-        "isRequired": false
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false,
-        "description": "Standard React className prop"
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false,
-        "description": "Standard React style prop"
-      },
-      "children": {
-        "type": "ReactNode",
-        "isRequired": false,
-        "description": "Standard React children prop"
-      }
-    }
-  }
-}

package/data/component-props-storybook/Alert-storybook.json

@@ -1,30 +0,0 @@
-{
-  "Alert": {
-    "props": {
-      "text": {
-        "type": "string",
-        "isRequired": true
-      },
-      "className": {
-        "type": "string",
-        "isRequired": false,
-        "description": "Standard React className prop"
-      },
-      "style": {
-        "type": "CSSProperties",
-        "isRequired": false,
-        "description": "Standard React style prop"
-      },
-      "children": {
-        "type": "ReactNode",
-        "isRequired": false,
-        "description": "Standard React children prop"
-      },
-      "id": {
-        "type": "string",
-        "isRequired": false,
-        "description": "Standard React id prop"
-      }
-    }
-  }
-}