@idealyst/mcp-server 1.0.87 → 1.0.88

package/examples/components/View.examples.tsx

@@ -0,0 +1,307 @@
+/**
+ * View Component Examples
+ *
+ * These examples are type-checked against the actual ViewProps interface
+ * to ensure accuracy and correctness.
+ */
+
+import React from 'react';
+import { View, Text } from '@idealyst/components';
+
+// Example 1: Basic View
+export function BasicView() {
+  return (
+    <View>
+      <Text>This is a basic view container</Text>
+    </View>
+  );
+}
+
+// Example 2: View with Spacing
+export function ViewWithSpacing() {
+  return (
+    <View spacing="none">
+      <Text>No spacing</Text>
+      <View spacing="xs">
+        <Text>Extra small spacing</Text>
+      </View>
+      <View spacing="sm">
+        <Text>Small spacing</Text>
+      </View>
+      <View spacing="md">
+        <Text>Medium spacing</Text>
+      </View>
+      <View spacing="lg">
+        <Text>Large spacing</Text>
+      </View>
+      <View spacing="xl">
+        <Text>Extra large spacing</Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 3: View with Background
+export function ViewWithBackground() {
+  return (
+    <View spacing="md">
+      <View background="primary" spacing="md">
+        <Text>Primary surface</Text>
+      </View>
+      <View background="secondary" spacing="md">
+        <Text>Secondary surface</Text>
+      </View>
+      <View background="tertiary" spacing="md">
+        <Text>Tertiary surface</Text>
+      </View>
+      <View background="transparent" spacing="md">
+        <Text>Transparent background</Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 4: View with Border Radius
+export function ViewWithRadius() {
+  return (
+    <View spacing="md">
+      <View background="primary" radius="none" spacing="md">
+        <Text>No radius</Text>
+      </View>
+      <View background="primary" radius="xs" spacing="md">
+        <Text>XS radius</Text>
+      </View>
+      <View background="primary" radius="sm" spacing="md">
+        <Text>Small radius</Text>
+      </View>
+      <View background="primary" radius="md" spacing="md">
+        <Text>Medium radius</Text>
+      </View>
+      <View background="primary" radius="lg" spacing="md">
+        <Text>Large radius</Text>
+      </View>
+      <View background="primary" radius="xl" spacing="md">
+        <Text>XL radius</Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 5: View with Borders
+export function ViewWithBorders() {
+  return (
+    <View spacing="md">
+      <View border="none" spacing="md">
+        <Text>No border</Text>
+      </View>
+      <View border="thin" spacing="md">
+        <Text>Thin border</Text>
+      </View>
+      <View border="thick" spacing="md">
+        <Text>Thick border</Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 6: View with Custom Colors
+export function ViewWithCustomColors() {
+  return (
+    <View spacing="md">
+      <View backgroundColor="blue" spacing="md" radius="md">
+        <Text >Blue background</Text>
+      </View>
+      <View backgroundColor="green" spacing="md" radius="md">
+        <Text >Green background</Text>
+      </View>
+      <View backgroundColor="red" spacing="md" radius="md">
+        <Text >Red background</Text>
+      </View>
+      <View
+        border="thin"
+        borderColor="purple"
+        spacing="md"
+        radius="md"
+      >
+        <Text>Purple border</Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 7: View with Custom Sizes
+export function ViewWithCustomSizes() {
+  return (
+    <View spacing="md">
+      <View padding={8} borderRadius={4} backgroundColor="gray.100">
+        <Text>Custom padding: 8</Text>
+      </View>
+      <View padding={16} borderRadius={8} backgroundColor="gray.100">
+        <Text>Custom padding: 16</Text>
+      </View>
+      <View padding={24} borderRadius={12} backgroundColor="gray.100">
+        <Text>Custom padding: 24</Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 8: Nested Views
+export function NestedViews() {
+  return (
+    <View spacing="lg" background="primary" radius="lg">
+      <Text weight="bold" size="lg">
+        Outer View
+      </Text>
+      <View spacing="md" background="secondary" radius="md">
+        <Text weight="semibold">Middle View</Text>
+        <View spacing="sm" background="tertiary" radius="sm">
+          <Text>Inner View</Text>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+// Example 9: Card-like Layout
+export function CardLayout() {
+  return (
+    <View spacing="md">
+      <View
+        background="primary"
+        spacing="lg"
+        radius="lg"
+        border="thin"
+      >
+        <Text size="lg" weight="bold">
+          Card Title
+        </Text>
+        <Text size="md" >
+          This is a card-like layout created using the View component with background, spacing,
+          radius, and border properties.
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 10: View with Margin
+export function ViewWithMargin() {
+  return (
+    <View spacing="md">
+      <View
+        background="primary"
+        spacing="md"
+        marginVariant="none"
+      >
+        <Text>No margin</Text>
+      </View>
+      <View
+        background="primary"
+        spacing="md"
+        marginVariant="sm"
+      >
+        <Text>Small margin</Text>
+      </View>
+      <View
+        background="primary"
+        spacing="md"
+        marginVariant="md"
+      >
+        <Text>Medium margin</Text>
+      </View>
+      <View
+        background="primary"
+        spacing="md"
+        marginVariant="lg"
+      >
+        <Text>Large margin</Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 11: Profile Card
+export function ProfileCard() {
+  return (
+    <View
+      background="primary"
+      spacing="lg"
+      radius="lg"
+      border="thin"
+    >
+      <View spacing="md">
+        <Text size="xl" weight="bold">
+          John Doe
+        </Text>
+        <Text size="md" >
+          Software Engineer
+        </Text>
+      </View>
+      <View spacing="sm">
+        <Text size="sm" >
+          Email: john.doe@example.com
+        </Text>
+        <Text size="sm" >
+          Location: San Francisco, CA
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+// Example 12: Dashboard Grid
+export function DashboardGrid() {
+  return (
+    <View spacing="md">
+      <View spacing="md">
+        <View
+          background="primary"
+          spacing="md"
+          radius="md"
+          border="thin"
+        >
+          <Text weight="semibold">Card 1</Text>
+          <Text size="sm" >
+            Content goes here
+          </Text>
+        </View>
+        <View
+          background="primary"
+          spacing="md"
+          radius="md"
+          border="thin"
+        >
+          <Text weight="semibold">Card 2</Text>
+          <Text size="sm" >
+            Content goes here
+          </Text>
+        </View>
+      </View>
+      <View spacing="md">
+        <View
+          background="primary"
+          spacing="md"
+          radius="md"
+          border="thin"
+        >
+          <Text weight="semibold">Card 3</Text>
+          <Text size="sm" >
+            Content goes here
+          </Text>
+        </View>
+        <View
+          background="primary"
+          spacing="md"
+          radius="md"
+          border="thin"
+        >
+          <Text weight="semibold">Card 4</Text>
+          <Text size="sm" >
+            Content goes here
+          </Text>
+        </View>
+      </View>
+    </View>
+  );
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idealyst/mcp-server",
-  "version": "1.0.87",
+  "version": "1.0.88",
   "description": "MCP server providing documentation and examples for the Idealyst framework",
   "main": "dist/index.js",
   "bin": {
@@ -8,7 +8,11 @@
   },
   "type": "module",
   "scripts": {
-    "build": "tsc && chmod +x dist/index.js",
+    "extract-types": "tsx scripts/extract-types.ts",
+    "validate-examples": "tsx scripts/validate-examples.ts",
+    "test": "tsx scripts/test-examples.ts",
+    "prebuild": "yarn extract-types && yarn validate-examples",
+    "build": "tsc && chmod +x dist/index.js && mkdir -p dist/generated && cp -r src/generated/* dist/generated/",
     "dev": "tsc --watch",
     "start": "node dist/index.js"
   },
@@ -25,10 +29,19 @@
   "author": "Idealyst",
   "license": "MIT",
   "dependencies": {
+    "@idealyst/components": "^1.0.88",
+    "@idealyst/navigation": "^1.0.88",
+    "@idealyst/theme": "^1.0.88",
     "@modelcontextprotocol/sdk": "^1.0.4"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
+    "@types/react": "^19.1.0",
+    "chalk": "^5.3.0",
+    "react": "^19.1.0",
+    "react-native": "^0.80.1",
+    "ts-morph": "^21.0.1",
+    "tsx": "^4.7.0",
     "typescript": "^5.0.0"
   }
 }

package/scripts/extract-types.ts

@@ -0,0 +1,71 @@
+#!/usr/bin/env tsx
+
+/**
+ * Extract Types Script
+ *
+ * Extracts TypeScript type information from @idealyst packages
+ * and generates a JSON file for use by the MCP server.
+ */
+
+import { TypeExtractor } from './type-extractor.js';
+import * as fs from 'fs';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function main() {
+  console.log('🔍 Extracting types from Idealyst packages...\n');
+
+  const extractor = new TypeExtractor();
+
+  // Extract all component types
+  console.log('📦 Extracting component types...');
+  const components = extractor.extractAllComponents();
+  console.log(`   Found ${Object.keys(components).length} components\n`);
+
+  // Extract theme types
+  console.log('🎨 Extracting theme types...');
+  const themeTypes = extractor.extractThemeTypes();
+  console.log(`   Found ${Object.keys(themeTypes).length} theme types\n`);
+
+  // Extract navigation types
+  console.log('🧭 Extracting navigation types...');
+  const navigationTypes = extractor.extractNavigationTypes();
+  console.log(`   Found ${Object.keys(navigationTypes).length} navigation types\n`);
+
+  // Create output structure
+  const output = {
+    version: '1.0.88',
+    extractedAt: new Date().toISOString(),
+    components,
+    theme: themeTypes,
+    navigation: navigationTypes,
+  };
+
+  // Ensure output directory exists
+  const outputDir = path.join(__dirname, '../src/generated');
+  if (!fs.existsSync(outputDir)) {
+    fs.mkdirSync(outputDir, { recursive: true });
+  }
+
+  // Write JSON file
+  const outputPath = path.join(outputDir, 'types.json');
+  fs.writeFileSync(outputPath, JSON.stringify(output, null, 2));
+
+  console.log(`✅ Type extraction complete!`);
+  console.log(`   Output: ${outputPath}\n`);
+
+  // Print summary
+  console.log('📊 Summary:');
+  console.log(`   Components: ${Object.keys(components).length}`);
+  console.log(`   Theme Types: ${Object.keys(themeTypes).length}`);
+  console.log(`   Navigation Types: ${Object.keys(navigationTypes).length}`);
+  console.log(`   Total Props: ${Object.values(components).reduce((sum, c) => sum + c.props.length, 0)}`);
+}
+
+main().catch(error => {
+  console.error('❌ Type extraction failed:', error);
+  process.exit(1);
+});

package/scripts/type-extractor.ts

@@ -0,0 +1,286 @@
+/**
+ * Type Extractor Utility
+ *
+ * Uses TypeScript Compiler API (via ts-morph) to extract type information
+ * from @idealyst packages at build time.
+ */
+
+import { Project, SourceFile, InterfaceDeclaration, TypeAliasDeclaration, EnumDeclaration } from 'ts-morph';
+import * as path from 'path';
+import * as fs from 'fs';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export interface PropInfo {
+  name: string;
+  type: string;
+  required: boolean;
+  description?: string;
+  default?: string;
+}
+
+export interface ComponentTypeInfo {
+  name: string;
+  propsInterface: string;
+  props: PropInfo[];
+  typeDefinition: string;
+  relatedTypes: Record<string, string>;
+}
+
+export interface ThemeTypeInfo {
+  name: string;
+  definition: string;
+  values?: string[];
+}
+
+export class TypeExtractor {
+  private project: Project;
+  private componentsPath: string;
+  private themePath: string;
+  private navigationPath: string;
+
+  constructor() {
+    this.project = new Project({
+      tsConfigFilePath: path.join(__dirname, '../tsconfig.json'),
+      skipAddingFilesFromTsConfig: true,
+    });
+
+    // Resolve paths to the actual packages in the monorepo
+    const monorepoRoot = path.resolve(__dirname, '../../..');
+    this.componentsPath = path.join(monorepoRoot, 'packages/components/src');
+    this.themePath = path.join(monorepoRoot, 'packages/theme/src');
+    this.navigationPath = path.join(monorepoRoot, 'packages/navigation/src');
+  }
+
+  /**
+   * Extract component type information
+   */
+  extractComponentTypes(componentName: string): ComponentTypeInfo | null {
+    const typesFilePath = path.join(
+      this.componentsPath,
+      componentName,
+      'types.ts'
+    );
+
+    if (!fs.existsSync(typesFilePath)) {
+      console.warn(`Types file not found for ${componentName}: ${typesFilePath}`);
+      return null;
+    }
+
+    const sourceFile = this.project.addSourceFileAtPath(typesFilePath);
+
+    // Find the main props interface (e.g., ButtonProps)
+    const propsInterfaceName = `${componentName}Props`;
+    const propsInterface = sourceFile.getInterface(propsInterfaceName);
+
+    if (!propsInterface) {
+      console.warn(`Props interface not found: ${propsInterfaceName}`);
+      return null;
+    }
+
+    const props = this.extractPropsFromInterface(propsInterface);
+    const relatedTypes = this.extractRelatedTypes(sourceFile);
+
+    return {
+      name: componentName,
+      propsInterface: propsInterfaceName,
+      props,
+      typeDefinition: propsInterface.getText(),
+      relatedTypes,
+    };
+  }
+
+  /**
+   * Extract props from an interface
+   */
+  private extractPropsFromInterface(interfaceDecl: InterfaceDeclaration): PropInfo[] {
+    const props: PropInfo[] = [];
+
+    for (const prop of interfaceDecl.getProperties()) {
+      const name = prop.getName();
+      const type = prop.getType().getText();
+      const required = !prop.hasQuestionToken();
+
+      // Extract JSDoc comments for description
+      const jsDocs = prop.getJsDocs();
+      const description = jsDocs.length > 0
+        ? jsDocs[0].getDescription().trim()
+        : undefined;
+
+      props.push({
+        name,
+        type,
+        required,
+        description,
+      });
+    }
+
+    return props;
+  }
+
+  /**
+   * Extract related type definitions from a source file
+   */
+  private extractRelatedTypes(sourceFile: SourceFile): Record<string, string> {
+    const types: Record<string, string> = {};
+
+    // Extract type aliases
+    for (const typeAlias of sourceFile.getTypeAliases()) {
+      const name = typeAlias.getName();
+      const definition = typeAlias.getText();
+      types[name] = definition;
+    }
+
+    // Extract enums
+    for (const enumDecl of sourceFile.getEnums()) {
+      const name = enumDecl.getName();
+      const definition = enumDecl.getText();
+      types[name] = definition;
+    }
+
+    // Extract other interfaces
+    for (const interfaceDecl of sourceFile.getInterfaces()) {
+      const name = interfaceDecl.getName();
+      if (!name.endsWith('Props')) {
+        const definition = interfaceDecl.getText();
+        types[name] = definition;
+      }
+    }
+
+    return types;
+  }
+
+  /**
+   * Extract theme types (Size, Intent, Color, etc.)
+   */
+  extractThemeTypes(): Record<string, ThemeTypeInfo> {
+    const themeTypes: Record<string, ThemeTypeInfo> = {};
+
+    // Extract Size type
+    const sizeFile = path.join(this.themePath, 'theme/size.ts');
+    if (fs.existsSync(sizeFile)) {
+      const sourceFile = this.project.addSourceFileAtPath(sizeFile);
+      const sizeType = sourceFile.getTypeAlias('Size');
+      if (sizeType) {
+        const definition = sizeType.getText();
+        const values = this.extractUnionValues(sizeType);
+        themeTypes.Size = { name: 'Size', definition, values };
+      }
+    }
+
+    // Extract Intent type
+    const intentFile = path.join(this.themePath, 'theme/intent.ts');
+    if (fs.existsSync(intentFile)) {
+      const sourceFile = this.project.addSourceFileAtPath(intentFile);
+      const intentType = sourceFile.getTypeAlias('Intent');
+      if (intentType) {
+        const definition = intentType.getText();
+        const values = this.extractUnionValues(intentType);
+        themeTypes.Intent = { name: 'Intent', definition, values };
+      }
+    }
+
+    // Extract Color types
+    const colorFile = path.join(this.themePath, 'theme/color.ts');
+    if (fs.existsSync(colorFile)) {
+      const sourceFile = this.project.addSourceFileAtPath(colorFile);
+
+      const palletType = sourceFile.getTypeAlias('Pallet');
+      if (palletType) {
+        const definition = palletType.getText();
+        const values = this.extractUnionValues(palletType);
+        themeTypes.Pallet = { name: 'Pallet', definition, values };
+      }
+
+      const shadeType = sourceFile.getTypeAlias('Shade');
+      if (shadeType) {
+        const definition = shadeType.getText();
+        const values = this.extractUnionValues(shadeType);
+        themeTypes.Shade = { name: 'Shade', definition, values };
+      }
+
+      const colorType = sourceFile.getTypeAlias('Color');
+      if (colorType) {
+        const definition = colorType.getText();
+        themeTypes.Color = { name: 'Color', definition };
+      }
+    }
+
+    return themeTypes;
+  }
+
+  /**
+   * Extract values from a union type
+   */
+  private extractUnionValues(typeAlias: TypeAliasDeclaration): string[] {
+    const type = typeAlias.getType();
+    if (type.isUnion()) {
+      return type.getUnionTypes().map(t => {
+        const text = t.getText();
+        // Remove quotes from string literals
+        return text.replace(/^["']|["']$/g, '');
+      });
+    }
+    return [];
+  }
+
+  /**
+   * Extract navigation types
+   */
+  extractNavigationTypes(): Record<string, string> {
+    const navTypes: Record<string, string> = {};
+
+    const typesFile = path.join(this.navigationPath, 'routing/types.ts');
+    if (fs.existsSync(typesFile)) {
+      const sourceFile = this.project.addSourceFileAtPath(typesFile);
+
+      // Extract all type aliases and interfaces
+      for (const typeAlias of sourceFile.getTypeAliases()) {
+        navTypes[typeAlias.getName()] = typeAlias.getText();
+      }
+
+      for (const interfaceDecl of sourceFile.getInterfaces()) {
+        navTypes[interfaceDecl.getName()] = interfaceDecl.getText();
+      }
+    }
+
+    return navTypes;
+  }
+
+  /**
+   * Get all available components
+   */
+  getAvailableComponents(): string[] {
+    if (!fs.existsSync(this.componentsPath)) {
+      return [];
+    }
+
+    const entries = fs.readdirSync(this.componentsPath, { withFileTypes: true });
+    return entries
+      .filter(entry => entry.isDirectory())
+      .filter(entry => {
+        const typesFile = path.join(this.componentsPath, entry.name, 'types.ts');
+        return fs.existsSync(typesFile);
+      })
+      .map(entry => entry.name);
+  }
+
+  /**
+   * Extract all component types
+   */
+  extractAllComponents(): Record<string, ComponentTypeInfo> {
+    const components = this.getAvailableComponents();
+    const result: Record<string, ComponentTypeInfo> = {};
+
+    for (const componentName of components) {
+      const typeInfo = this.extractComponentTypes(componentName);
+      if (typeInfo) {
+        result[componentName] = typeInfo;
+      }
+    }
+
+    return result;
+  }
+}