@czi-sds/mcp 0.2.2 → 0.4.0

package/dist/stdio.js

@@ -81,48 +81,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 +192,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 = {
@@ -632,11 +540,203 @@ var getTailwindTokensTool = {
     );
   }
 };
+var filename2 = fileURLToPath(import.meta.url);
+var dirname2 = path.dirname(filename2);
+function mapComponentToFile(componentName, exportedFiles) {
+  const componentToFileMap = {
+    // Button components
+    Button: "Buttons",
+    ButtonDropdown: "Buttons",
+    ButtonIcon: "Buttons",
+    ButtonToggle: "Buttons",
+    // Table components
+    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",
+    // Dropdown components
+    Dropdown: "Dropdown-Menu",
+    DropdownMenu: "Dropdown-Menu",
+    // Content components
+    ContentCard: "Content-Card",
+    LoadingIndicator: "Loading-Indicator",
+    // Navigation components
+    NavigationFooter: "Navigation",
+    NavigationHeader: "Navigation",
+    NavigationJumpTo: "Navigation",
+    // Control components
+    SegmentedControl: "Segmented-Control",
+    // List and menu components
+    List: "Lists",
+    Menu: "Dropdown-Menu",
+    MenuItem: "Dropdown-Menu",
+    MenuSelect: "Dropdown-Menu",
+    // Tag components
+    Tag: "Tags",
+    TagFilter: "Tags",
+    // Tooltip components
+    Tooltip: "Tooltips",
+    TooltipCondensed: "Tooltips",
+    TooltipTable: "Tooltips",
+    // Table Cell components
+    CellBasic: "Table",
+    CellComponent: "Table",
+    CellHeader: "Table",
+    // Filter components
+    ComplexFilter: "Filters",
+    // Other components
+    Icon: "Icons",
+    Chip: "Tags",
+    // Chips are often similar to tags
+    Pagination: "Navigation"
+    // Pagination is often part of navigation
+  };
+  const mappedFile = componentToFileMap[componentName];
+  if (mappedFile && exportedFiles.includes(mappedFile)) {
+    return `${mappedFile}.md`;
+  }
+  if (exportedFiles.includes(componentName)) {
+    return `${componentName}.md`;
+  }
+  return null;
+}
+function getExportedFiles() {
+  try {
+    const possiblePaths = [
+      path.join(dirname2, "../../data/zeroheight-exports"),
+      // From src/lib in dev
+      path.join(dirname2, "../data/zeroheight-exports"),
+      // From dist in prod
+      path.join(process.cwd(), "data/zeroheight-exports")
+      // From current working directory
+    ];
+    let exportDir = "";
+    for (const p of possiblePaths) {
+      if (fs.existsSync(p)) {
+        exportDir = p;
+        break;
+      }
+    }
+    if (!exportDir) {
+      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", ""));
+    return files;
+  } catch (error) {
+    console.warn("Could not read exported files:", error);
+    return [];
+  }
+}
+function getComponentsWithDocs(allComponents, exportedFiles) {
+  return allComponents.filter((component) => {
+    const mappedFile = mapComponentToFile(component, exportedFiles);
+    return mappedFile !== null;
+  });
+}
+var getComponentDocsTool = {
+  name: "get_component_docs",
+  description: "Get design system documentation for a specific component. Retrieves the corresponding Zeroheight documentation file for the given component name. Supports all SDS components and maps them to their appropriate documentation files.",
+  async ctx() {
+    try {
+      const componentList = await getAllComponentNames();
+      const allComponents = [
+        ...componentList.components,
+        ...componentList["data-viz"]
+      ];
+      const exportedFiles = getExportedFiles();
+      const componentsWithDocs = getComponentsWithDocs(
+        allComponents,
+        exportedFiles
+      );
+      return {
+        componentsWithDocs,
+        exportedFiles
+      };
+    } catch (error) {
+      throw new Error(
+        `Failed to initialize get component docs tool: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    }
+  },
+  exec(server2, { ctx, name, description }) {
+    server2.tool(
+      name,
+      description,
+      {
+        component: z.enum(ctx.componentsWithDocs).describe("The name of the SDS component to get documentation for")
+      },
+      async ({ component }) => {
+        try {
+          const mappedFile = mapComponentToFile(component, ctx.exportedFiles);
+          if (!mappedFile) {
+            return {
+              content: [
+                {
+                  type: "text",
+                  text: `No documentation found for component '${component}'. This component may not have design system documentation available.`
+                }
+              ]
+            };
+          }
+          const possiblePaths = [
+            path.join(dirname2, "../../data/zeroheight-exports", mappedFile),
+            // From src/lib in dev
+            path.join(dirname2, "../data/zeroheight-exports", mappedFile),
+            // From dist in prod
+            path.join(process.cwd(), "data/zeroheight-exports", mappedFile)
+            // From current working directory
+          ];
+          let filePath = "";
+          for (const p of possiblePaths) {
+            if (fs.existsSync(p)) {
+              filePath = p;
+              break;
+            }
+          }
+          if (!filePath) {
+            throw new Error(`Documentation file ${mappedFile} not found`);
+          }
+          const documentation = fs.readFileSync(filePath, "utf8");
+          return {
+            content: [
+              {
+                type: "text",
+                text: `# Documentation for ${component}
+
+Source: ${mappedFile}
+
+${documentation}`
+              }
+            ]
+          };
+        } catch (error) {
+          return {
+            content: [
+              {
+                type: "text",
+                text: `Error reading documentation file for '${component}': ${error instanceof Error ? error.message : "Unknown error"}`
+              }
+            ]
+          };
+        }
+      }
+    );
+  }
+};
 
 // src/tools/index.ts
 var tools = [
   getComponentPropsTool,
-  getComponentPropsStorybookTool,
+  getComponentDocsTool,
   listComponentsTool,
   getTailwindTokensTool
 ];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@czi-sds/mcp",
   "description": "The official MCP server for SDS",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "main": "dist/stdio.js",
   "files": [
     "dist",
@@ -22,8 +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:all": "yarn generate:tailwind-tokens && yarn generate:components-list && yarn generate:component-props && yarn generate:component-props-storybook",
+    "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:zeroheight-export",
     "prebuild": "yarn generate:all",
     "build": "yarn prebuild && tsup && chmod 755 dist/stdio.js",
     "dev": "tsup --watch",
@@ -62,5 +62,5 @@
     "tsx": "^4.20.3",
     "typescript": "^5.9.2"
   },
-  "gitHead": "34691ada3ef3cc877dcf1e2eef0f09efab53e668"
+  "gitHead": "1545afb7ac457bc1dab40856fe5d5b7e22186318"
 }

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"
-      }
-    }
-  }
-}

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

@@ -1,67 +0,0 @@
-{
-  "Autocomplete": {
-    "props": {
-      "groupBy": {
-        "type": "string",
-        "isRequired": false
-      },
-      "intent": {
-        "type": "\"default\" | \"negative\" | \"notice\" | \"positive\"",
-        "isRequired": false,
-        "options": [
-          "default",
-          "negative",
-          "notice",
-          "positive"
-        ]
-      },
-      "keepSearchOnSelect": {
-        "type": "boolean",
-        "isRequired": false
-      },
-      "label": {
-        "type": "string",
-        "isRequired": false
-      },
-      "multiple": {
-        "type": "boolean",
-        "isRequired": false
-      },
-      "onChange": {
-        "type": "string",
-        "isRequired": false
-      },
-      "options": {
-        "type": "\"0\" | \"1\" | \"2\" | \"3\" | \"4\"",
-        "isRequired": false,
-        "options": [
-          "0",
-          "1",
-          "2",
-          "3",
-          "4"
-        ]
-      },
-      "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"
-      }
-    }
-  }
-}