feat(react): component improvements and MCP server package (#76)

* docs: add MCP server design spec for @tiny-design/mcp

* docs: add @tiny-design/mcp implementation plan

* feat(mcp): scaffold @tiny-design/mcp package

* feat(mcp): add icon extractor

* feat(mcp): add token extractor

* feat(mcp): add component extractor with ts-morph

* feat(mcp): add extraction orchestrator

Ties the three extractors together, writing components.json, tokens.json,
and icons.json to src/data/. Also fixes __dirname usage in all extractor
scripts by adding ESM-compatible fileURLToPath shims (package uses type=module).

* fix(mcp): fix ESM/CJS compatibility for jest and tsx

* feat(mcp): add component tool handlers

* feat(mcp): add token tool handler

* feat(mcp): add icon tool handlers

* feat(mcp): add MCP server entry point with 6 tools

* fix(mcp): inline JSON data via static imports for self-contained bundle

Switch tool handlers from readFileSync to static JSON imports so tsup
inlines the data into dist/index.js. Also read version from package.json
to prevent drift.

* chore: add changeset for component improvements and MCP server

* chore: update docs

* chore: remove plan files

Author: wangdicoder

.changeset/component-improvements-and-mcp-server.md

@@ -0,0 +1,5 @@
+---
+"@tiny-design/react": patch
+---
+
+Improve color-picker, slider, split, popup, and input-otp components; add @tiny-design/mcp server package with component, token, and icon tools

packages/mcp/.gitignore

@@ -0,0 +1,2 @@
+src/data/
+dist/

packages/mcp/README.md

@@ -0,0 +1,93 @@
+# @tiny-design/mcp
+
+MCP (Model Context Protocol) server that gives AI assistants structured access to the [Tiny Design](https://wangdicoder.github.io/tiny-design/) component library, design tokens, and icon catalog.
+
+## Setup
+
+Add to your MCP client config:
+
+### Claude Code
+
+```json
+// .claude/settings.json
+{
+  "mcpServers": {
+    "tiny-design": {
+      "command": "npx",
+      "args": ["@tiny-design/mcp"]
+    }
+  }
+}
+```
+
+### VS Code (GitHub Copilot)
+
+```json
+// .vscode/mcp.json
+{
+  "mcpServers": {
+    "tiny-design": {
+      "command": "npx",
+      "args": ["@tiny-design/mcp"]
+    }
+  }
+}
+```
+
+### Cursor
+
+```json
+// .cursor/mcp.json
+{
+  "mcpServers": {
+    "tiny-design": {
+      "command": "npx",
+      "args": ["@tiny-design/mcp"]
+    }
+  }
+}
+```
+
+## Available Tools
+
+| Tool | Description |
+|------|-------------|
+| `list_components` | List all 80+ components. Filter by category: Foundation, Layout, Navigation, Data Display, Form, Feedback, Miscellany. |
+| `get_component_props` | Get the full props interface for a component — types, required flags, descriptions. |
+| `get_component_example` | Get usage examples (demo code) for a component. |
+| `get_design_tokens` | Get design tokens (SCSS variables) — colors, typography, spacing, breakpoints, shadows. |
+| `list_icons` | List all 240+ icon names. Filter by search term. |
+| `get_icon` | Get details and usage example for a specific icon. |
+
+## Examples
+
+Ask your AI assistant:
+
+- "List all form components in Tiny Design"
+- "What props does the Modal component accept?"
+- "Show me an example of using the Select component"
+- "What colors are available in Tiny Design's design tokens?"
+- "Find icons related to arrows"
+
+## Development
+
+```bash
+# Install dependencies (from monorepo root)
+pnpm install
+
+# Run extraction + build
+pnpm --filter @tiny-design/mcp build
+
+# Run tests
+pnpm --filter @tiny-design/mcp test
+```
+
+### How It Works
+
+1. **Build time:** Extraction scripts parse component `types.ts` files (via `ts-morph`), SCSS token variables (via regex), and icon barrel exports to produce static JSON.
+2. **Bundle time:** `tsup` bundles the server code with inlined JSON data into a single self-contained `dist/index.js`.
+3. **Runtime:** The MCP server loads the inlined data and serves it via 6 tools over stdio transport using `@modelcontextprotocol/sdk`.
+
+## License
+
+MIT

packages/mcp/__tests__/extract-components.test.ts

@@ -0,0 +1,45 @@
+import { extractComponents } from '../scripts/extract-components';
+
+describe('extractComponents', () => {
+  let components: ReturnType<typeof extractComponents>;
+
+  beforeAll(() => {
+    components = extractComponents();
+  });
+
+  it('extracts all components', () => {
+    expect(components.length).toBeGreaterThan(80);
+  });
+
+  it('extracts Button component correctly', () => {
+    const button = components.find((c) => c.name === 'Button');
+    expect(button).toBeDefined();
+    expect(button!.category).toBe('Foundation');
+    expect(button!.description).toBe('To trigger an operation.');
+
+    const btnType = button!.props.find((p) => p.name === 'btnType');
+    expect(btnType).toBeDefined();
+    expect(btnType!.required).toBe(false);
+    expect(btnType!.type).toContain('primary');
+
+    const style = button!.props.find((p) => p.name === 'style');
+    expect(style).toBeDefined();
+  });
+
+  it('extracts demo files', () => {
+    const button = components.find((c) => c.name === 'Button');
+    expect(button!.demos.length).toBeGreaterThan(0);
+    expect(button!.demos[0].name).toBeDefined();
+    expect(button!.demos[0].code).toContain('import');
+  });
+
+  it('assigns categories to all components', () => {
+    const validCategories = [
+      'Foundation', 'Layout', 'Navigation', 'Data Display',
+      'Form', 'Feedback', 'Miscellany',
+    ];
+    components.forEach((c) => {
+      expect(validCategories).toContain(c.category);
+    });
+  });
+});

packages/mcp/__tests__/extract-icons.test.ts

@@ -0,0 +1,26 @@
+import { extractIcons } from '../scripts/extract-icons';
+
+describe('extractIcons', () => {
+  it('returns icon names and shared props', () => {
+    const result = extractIcons();
+
+    // Check structure
+    expect(result.props).toEqual({
+      size: { type: 'string | number', default: '"1em"' },
+      color: { type: 'string', default: '"currentColor"' },
+    });
+
+    // Check icons array is populated
+    expect(result.icons.length).toBeGreaterThan(200);
+
+    // Check specific known icons exist
+    expect(result.icons).toContain('IconPlus');
+    expect(result.icons).toContain('IconClose');
+    expect(result.icons).toContain('IconHeart');
+
+    // All entries should start with "Icon"
+    result.icons.forEach((name) => {
+      expect(name).toMatch(/^Icon[A-Z]/);
+    });
+  });
+});

packages/mcp/__tests__/extract-tokens.test.ts

@@ -0,0 +1,51 @@
+import { extractTokens } from '../scripts/extract-tokens';
+
+describe('extractTokens', () => {
+  it('extracts tokens grouped by category', () => {
+    const result = extractTokens();
+
+    // Should have known categories
+    expect(Object.keys(result)).toEqual(
+      expect.arrayContaining(['colors', 'typography', 'spacing', 'breakpoints', 'shadows'])
+    );
+  });
+
+  it('extracts color tokens', () => {
+    const result = extractTokens();
+
+    expect(result.colors['primary-color']).toEqual({
+      variable: '$primary-color',
+      value: '#6e41bf',
+    });
+
+    expect(result.colors['info-color']).toEqual({
+      variable: '$info-color',
+      value: '#1890ff',
+    });
+  });
+
+  it('extracts typography tokens', () => {
+    const result = extractTokens();
+
+    expect(result.typography['font-size-base']).toEqual({
+      variable: '$font-size-base',
+      value: '1rem',
+    });
+  });
+
+  it('extracts breakpoint tokens', () => {
+    const result = extractTokens();
+
+    expect(result.breakpoints['size-xs']).toEqual({
+      variable: '$size-xs',
+      value: '480px',
+    });
+  });
+
+  it('extracts shadow tokens', () => {
+    const result = extractTokens();
+
+    expect(result.shadows).toBeDefined();
+    expect(result.shadows['box-shadow-sm']).toBeDefined();
+  });
+});

packages/mcp/__tests__/tool-components.test.ts

@@ -0,0 +1,63 @@
+import { listComponents, getComponentProps, getComponentExample } from '../src/tools/components';
+
+describe('listComponents', () => {
+  it('returns all components', () => {
+    const result = listComponents();
+    expect(result.length).toBeGreaterThan(80);
+    expect(result[0]).toHaveProperty('name');
+    expect(result[0]).toHaveProperty('category');
+    expect(result[0]).toHaveProperty('description');
+    expect(result[0]).not.toHaveProperty('props');
+    expect(result[0]).not.toHaveProperty('demos');
+  });
+
+  it('filters by category', () => {
+    const result = listComponents('Foundation');
+    expect(result.length).toBeGreaterThan(0);
+    result.forEach((c) => expect(c.category).toBe('Foundation'));
+  });
+
+  it('returns empty array for unknown category', () => {
+    expect(listComponents('Unknown')).toEqual([]);
+  });
+});
+
+describe('getComponentProps', () => {
+  it('returns props for a known component', () => {
+    const result = getComponentProps('Button');
+    expect(result).not.toBeNull();
+    expect(result!.name).toBe('Button');
+    expect(result!.props.length).toBeGreaterThan(0);
+    expect(result!.props.find((p) => p.name === 'btnType')).toBeDefined();
+  });
+
+  it('is case-insensitive', () => {
+    const result = getComponentProps('button');
+    expect(result).not.toBeNull();
+    expect(result!.name).toBe('Button');
+  });
+
+  it('returns null for unknown component', () => {
+    expect(getComponentProps('FooBar')).toBeNull();
+  });
+});
+
+describe('getComponentExample', () => {
+  it('returns all demos for a component', () => {
+    const result = getComponentExample('Button');
+    expect(result).not.toBeNull();
+    expect(result!.length).toBeGreaterThan(0);
+    expect(result![0].code).toContain('import');
+  });
+
+  it('returns specific demo by name', () => {
+    const result = getComponentExample('Button', 'Type');
+    expect(result).not.toBeNull();
+    expect(result!.length).toBe(1);
+    expect(result![0].name).toBe('Type');
+  });
+
+  it('returns null for unknown component', () => {
+    expect(getComponentExample('FooBar')).toBeNull();
+  });
+});

packages/mcp/__tests__/tool-icons.test.ts

@@ -0,0 +1,39 @@
+import { listIcons, getIcon } from '../src/tools/icons';
+
+describe('listIcons', () => {
+  it('returns all icons', () => {
+    const result = listIcons();
+    expect(result.length).toBeGreaterThan(200);
+  });
+
+  it('filters by search term', () => {
+    const result = listIcons('arrow');
+    expect(result.length).toBeGreaterThan(0);
+    result.forEach((name) => {
+      expect(name.toLowerCase()).toContain('arrow');
+    });
+  });
+
+  it('returns empty for no matches', () => {
+    expect(listIcons('zzzznotanicon')).toEqual([]);
+  });
+});
+
+describe('getIcon', () => {
+  it('returns icon details', () => {
+    const result = getIcon('IconPlus');
+    expect(result).not.toBeNull();
+    expect(result!.name).toBe('IconPlus');
+    expect(result!.props).toBeDefined();
+    expect(result!.usage).toContain('IconPlus');
+  });
+
+  it('is case-insensitive', () => {
+    const result = getIcon('iconplus');
+    expect(result).not.toBeNull();
+  });
+
+  it('returns null for unknown icon', () => {
+    expect(getIcon('IconFooBar')).toBeNull();
+  });
+});

packages/mcp/__tests__/tool-tokens.test.ts

@@ -0,0 +1,21 @@
+import { getDesignTokens } from '../src/tools/tokens';
+
+describe('getDesignTokens', () => {
+  it('returns all token categories', () => {
+    const result = getDesignTokens();
+    expect(Object.keys(result)).toEqual(
+      expect.arrayContaining(['colors', 'typography', 'spacing', 'breakpoints', 'shadows'])
+    );
+  });
+
+  it('filters by category', () => {
+    const result = getDesignTokens('colors');
+    expect(Object.keys(result)).toEqual(['colors']);
+    expect(Object.keys(result.colors).length).toBeGreaterThan(0);
+  });
+
+  it('returns empty object for unknown category', () => {
+    const result = getDesignTokens('unknown');
+    expect(result).toEqual({});
+  });
+});

packages/mcp/jest.config.cjs

@@ -0,0 +1,22 @@
+/** @type {import('jest').Config} */
+module.exports = {
+  testEnvironment: 'node',
+  roots: ['<rootDir>/__tests__'],
+  extensionsToTreatAsEsm: ['.ts'],
+  transform: {
+    '^.+\\.tsx?$': ['ts-jest', {
+      useESM: true,
+      tsconfig: {
+        module: 'ESNext',
+        moduleResolution: 'bundler',
+        target: 'ES2022',
+        esModuleInterop: true,
+        resolveJsonModule: true,
+        strict: true,
+      },
+    }],
+  },
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+};