impact-ui-mcp-server 1.0.0

package/src/parsers/storybookParser.js

@@ -0,0 +1,140 @@
+import { readFile } from "../utils/fileReader.js";
+
+/**
+ * Parse Storybook story file to extract component metadata
+ */
+export function parseStorybookStory(filePath, componentName) {
+  const content = readFile(filePath);
+  if (!content) {
+    return null;
+  }
+
+  const metadata = {
+    name: componentName,
+    description: "",
+    props: {},
+    examples: [],
+    category: "Components",
+  };
+
+  // Extract component description
+  const descriptionMatch = content.match(
+    /description:\s*{\s*component:\s*["']([^"']+)["']/s
+  );
+  if (descriptionMatch) {
+    metadata.description = descriptionMatch[1]
+      .replace(/\\n/g, "\n")
+      .trim();
+  }
+
+  // Extract title to determine category
+  const titleMatch = content.match(/title:\s*["']([^"']+)["']/);
+  if (titleMatch) {
+    const title = titleMatch[1];
+    if (title.startsWith("Patterns/")) {
+      metadata.category = "Patterns";
+    } else if (title.startsWith("Components/")) {
+      metadata.category = "Components";
+    }
+  }
+
+  // Extract argTypes
+  const argTypesMatch = content.match(/argTypes:\s*{([\s\S]*?)},?\s*(?:};|export)/);
+  if (argTypesMatch) {
+    metadata.props = parseArgTypes(argTypesMatch[1]);
+  }
+
+  // Extract story examples
+  const storyExports = content.match(/export const (\w+)\s*=\s*Template\.bind\(/g);
+  if (storyExports) {
+    metadata.examples = storyExports.map((match) => {
+      const nameMatch = match.match(/export const (\w+)/);
+      return nameMatch ? nameMatch[1] : null;
+    }).filter(Boolean);
+  }
+
+  return metadata;
+}
+
+/**
+ * Parse argTypes object from Storybook story
+ */
+function parseArgTypes(argTypesContent) {
+  const props = {};
+  
+  // Match each property definition
+  const propRegex = /(\w+):\s*{([^}]+(?:{[^}]*}[^}]*)*)}/g;
+  let match;
+
+  while ((match = propRegex.exec(argTypesContent)) !== null) {
+    const propName = match[1];
+    const propContent = match[2];
+
+    const propInfo = {
+      description: "",
+      type: "unknown",
+      defaultValue: undefined,
+      options: undefined,
+      required: false,
+    };
+
+    // Extract description
+    const descriptionMatch = propContent.match(
+      /description:\s*["']([^"']+)["']|description:\s*`([^`]+)`/
+    );
+    if (descriptionMatch) {
+      propInfo.description = (descriptionMatch[1] || descriptionMatch[2])
+        .replace(/\\n/g, "\n")
+        .trim();
+    }
+
+    // Extract type
+    const typeMatch = propContent.match(
+      /type:\s*{\s*summary:\s*["']([^"']+)["']/
+    );
+    if (typeMatch) {
+      propInfo.type = typeMatch[1];
+    }
+
+    // Extract default value
+    const defaultValueMatch = propContent.match(
+      /defaultValue:\s*{\s*summary:\s*["']([^"']+)["']|defaultValue:\s*{\s*summary:\s*([^}]+)}/
+    );
+    if (defaultValueMatch) {
+      const defaultValue = defaultValueMatch[1] || defaultValueMatch[2];
+      try {
+        // Try to parse as JSON if it looks like an object/array
+        if (defaultValue.startsWith("[") || defaultValue.startsWith("{")) {
+          propInfo.defaultValue = JSON.parse(defaultValue);
+        } else {
+          propInfo.defaultValue = defaultValue;
+        }
+      } catch {
+        propInfo.defaultValue = defaultValue;
+      }
+    }
+
+    // Extract options (for enum-like props)
+    const optionsMatch = propContent.match(/options:\s*\[([^\]]+)\]/);
+    if (optionsMatch) {
+      try {
+        propInfo.options = JSON.parse(`[${optionsMatch[1]}]`);
+      } catch {
+        // If parsing fails, try to extract string values
+        const stringValues = optionsMatch[1].match(/["']([^"']+)["']/g);
+        if (stringValues) {
+          propInfo.options = stringValues.map((s) => s.replace(/["']/g, ""));
+        }
+      }
+    }
+
+    // Check if required (no defaultValue usually means required)
+    if (!defaultValueMatch && !propContent.includes("optional")) {
+      propInfo.required = true;
+    }
+
+    props[propName] = propInfo;
+  }
+
+  return props;
+}

package/src/tools/codeExample.js

@@ -0,0 +1,81 @@
+/**
+ * Generate a code example for a component
+ */
+export function generateCodeExample(componentRegistry, componentName, props = {}) {
+  const component = componentRegistry[componentName];
+  
+  if (!component) {
+    return {
+      error: `Component '${componentName}' not found.`,
+    };
+  }
+
+  // Build props string
+  const propStrings = [];
+  
+  // Add props from the request
+  for (const [key, value] of Object.entries(props)) {
+    if (value !== undefined && value !== null) {
+      if (typeof value === "string") {
+        propStrings.push(`  ${key}="${value}"`);
+      } else if (typeof value === "boolean") {
+        propStrings.push(`  ${key}={${value}}`);
+      } else if (typeof value === "number") {
+        propStrings.push(`  ${key}={${value}}`);
+      } else if (Array.isArray(value)) {
+        propStrings.push(`  ${key}={${JSON.stringify(value)}}`);
+      } else if (typeof value === "object") {
+        propStrings.push(`  ${key}={${JSON.stringify(value)}}`);
+      } else {
+        propStrings.push(`  ${key}={${value}}`);
+      }
+    }
+  }
+
+  const propsSection = propStrings.length > 0 
+    ? `\n${propStrings.join("\n")}\n` 
+    : "";
+
+  // Generate the example
+  const example = `import { ${componentName} } from 'impact-ui';
+
+function Example() {
+  return (
+    <${componentName}${propsSection} />
+  );
+}
+
+export default Example;`;
+
+  // Generate with state if needed (for components that typically need state)
+  const statefulComponents = ["Modal", "Panel", "BottomSheet", "Popover", "Select"];
+  if (statefulComponents.includes(componentName)) {
+    const statefulExample = `import { useState } from 'react';
+import { ${componentName} } from 'impact-ui';
+
+function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button onClick={() => setOpen(true)}>Open ${componentName}</button>
+      <${componentName}
+        open={open}
+        onClose={() => setOpen(false)}${propsSection}
+      />
+    </>
+  );
+}
+
+export default Example;`;
+
+    return {
+      example: statefulExample,
+      basicExample: example,
+    };
+  }
+
+  return {
+    example,
+  };
+}

package/src/tools/componentInfo.js

@@ -0,0 +1,26 @@
+/**
+ * Get detailed information about a component
+ */
+export function getComponentInfo(componentRegistry, componentName) {
+  const component = componentRegistry[componentName];
+  
+  if (!component) {
+    return {
+      found: false,
+      message: `Component '${componentName}' not found. Use list_components to see available components.`,
+    };
+  }
+
+  return {
+    found: true,
+    component: {
+      name: component.name,
+      category: component.category,
+      description: component.description,
+      props: component.props,
+      examples: component.examples,
+      storyFile: component.storyFile,
+      componentFile: component.componentFile,
+    },
+  };
+}

package/src/utils/fileReader.js

@@ -0,0 +1,91 @@
+import { readFileSync, existsSync } from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
+
+/**
+ * Read a file and return its contents as a string
+ */
+export function readFile(filePath) {
+  try {
+    if (!existsSync(filePath)) {
+      return null;
+    }
+    return readFileSync(filePath, "utf-8");
+  } catch (error) {
+    console.error(`Error reading file ${filePath}:`, error.message);
+    return null;
+  }
+}
+
+/**
+ * Get the project root directory (frontend folder or impact-ui package root)
+ * Supports multiple deployment scenarios:
+ * 
+ * Priority order:
+ * 1. Auto-detect from node_modules (if impact-ui package includes source files) - BEST for Option 1
+ * 2. IMPACT_UI_FRONTEND_PATH env var (direct frontend path)
+ * 3. IMPACT_UI_PATH env var (Impact UI repository root, will append /frontend)
+ * 4. IMPACT_UI_NODE_MODULES env var (explicit path to node_modules/impact-ui)
+ * 5. Relative path from mcp-server (default, for local development)
+ * 
+ * IMPACT_UI_PATH explanation:
+ * - This is the path to the CLONED Impact UI git repository (e.g., /path/to/impact-ui)
+ * - NOT the npm package path
+ * - NOT node_modules/impact-ui
+ * - Only needed if teams clone the repository instead of using npm package
+ */
+export function getProjectRoot() {
+  // Priority 1: Auto-detect from node_modules (works when source files are included in npm package)
+  // This is the BEST option when using Option 1 (source files in package)
+  const possibleNodeModulesPaths = [
+    join(process.cwd(), "node_modules", "impact-ui"),
+    join(process.cwd(), "..", "node_modules", "impact-ui"),
+    join(process.cwd(), "..", "..", "node_modules", "impact-ui"),
+    // Also check if mcp-server is installed in node_modules
+    join(process.cwd(), "node_modules", "@impact-analytics", "impact-ui-mcp-server", "..", "..", "impact-ui"),
+  ];
+  
+  for (const path of possibleNodeModulesPaths) {
+    const srcPath = join(path, "src");
+    const storiesPath = join(srcPath, "stories");
+    if (existsSync(storiesPath)) {
+      console.error(`Auto-detected Impact UI from node_modules: ${path}`);
+      return path;
+    }
+  }
+  
+  // Priority 2: Direct frontend path via environment variable
+  if (process.env.IMPACT_UI_FRONTEND_PATH) {
+    return process.env.IMPACT_UI_FRONTEND_PATH;
+  }
+  
+  // Priority 3: Impact UI repository root path (will append /frontend)
+  // IMPACT_UI_PATH = path to cloned git repository (e.g., /Users/team/projects/impact-ui)
+  if (process.env.IMPACT_UI_PATH) {
+    const frontendPath = join(process.env.IMPACT_UI_PATH, "frontend");
+    if (existsSync(frontendPath)) {
+      return frontendPath;
+    }
+    // If no frontend folder, assume IMPACT_UI_PATH is already the frontend path
+    if (existsSync(process.env.IMPACT_UI_PATH)) {
+      return process.env.IMPACT_UI_PATH;
+    }
+  }
+  
+  // Priority 4: Explicit node_modules path
+  if (process.env.IMPACT_UI_NODE_MODULES) {
+    const nodeModulesPath = process.env.IMPACT_UI_NODE_MODULES;
+    const srcPath = join(nodeModulesPath, "src");
+    if (existsSync(srcPath)) {
+      return nodeModulesPath;
+    }
+  }
+  
+  // Priority 5: Default - relative path from mcp-server (local development)
+  const __filename = fileURLToPath(import.meta.url);
+  const __dirname = dirname(__filename);
+  
+  // Assuming mcp-server is at impact-ui/mcp-server
+  // and frontend is at impact-ui/frontend
+  return join(__dirname, "../../../frontend");
+}