@triptease/design-system-mcp 0.0.3

package/src/tools/listComponents/__snapshots__/handler.test.ts.snap

@@ -0,0 +1,12 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`listComponents tool > should list all components within the manifest 1`] = `
+{
+  "content": [
+    {
+      "text": "{"components":[{"key":"button","name":"Button","description":"Interactive button component with multiple themes and states","element":"button"},{"key":"textinput","name":"Text Input","description":"Text input field for single-line text entry with automatic validation styling","element":"input"},{"key":"numberinput","name":"Number Input","description":"Number input field with browser-provided increment/decrement controls","element":"input[type='number']"},{"key":"textarea","name":"Textarea","description":"Multi-line text input field","element":"textarea"},{"key":"select","name":"Select Input","description":"Dropdown list for selecting a single option","element":"select"},{"key":"checkbox","name":"Checkbox","description":"Checkbox input for multiple selections","element":"input[type='checkbox']"},{"key":"radio","name":"Radio","description":"Radio button for selecting exactly one option from mutually exclusive choices","element":"input[type='radio']"},{"key":"toggle","name":"Toggle","description":"Toggle switch for binary on/off states with immediate effect","element":"input[type='checkbox'][data-theme='toggle']"},{"key":"badge","name":"Badge","description":"Status indicator or label badge for highlighting small pieces of information","element":"span"},{"key":"card","name":"Card","description":"Container component that groups related content and actions in a visually distinct area","element":"div"},{"key":"table","name":"Table","description":"Organize and display data in rows and columns","element":"table"},{"key":"typography","name":"Typography","description":"Text styling using semantic HTML elements and utility classes","element":"h1-h4, p, strong, a"},{"key":"dialog","name":"Dialog - Web Component","description":"Dialog component that displays content in a layer above the page","element":"tt-dialog"},{"key":"combobox","name":"Combobox","description":"Searchable dropdown that combines a text input with a list, available as both React component and Web Component","element":"Combobox (React) / tt-combobox (Web Component)"},{"key":"date-picker","name":"Date Picker","description":"Date picker for selecting a single date, available as both React component and Web Component","element":"DatePicker (React) / tt-date-picker (Web Component)"},{"key":"date-range-picker","name":"Date Range Picker","description":"Date range picker for selecting start and end dates, available as both React component and Web Component","element":"DateRangePicker (React) / tt-date-range-picker (Web Component)"},{"key":"bar-chart","name":"Bar Chart - Web Component","description":"Bar chart for comparing values across categories","element":"tt-bar-chart"},{"key":"line-chart","name":"Line Chart - Web Component","description":"Line chart for visualizing trends over continuous data","element":"tt-line-chart"}]}",
+      "type": "text",
+    },
+  ],
+}
+`;

package/src/tools/listComponents/handler.test.ts

@@ -0,0 +1,9 @@
+import handler from './handler.js';
+import { describe, expect, it } from 'vitest';
+
+describe('listComponents tool', () => {
+  it('should list all components within the manifest', () => {
+    const result = handler();
+    expect(result).toMatchSnapshot();
+  });
+});

package/src/tools/listComponents/handler.ts

@@ -0,0 +1,20 @@
+import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+import { componentManifest } from '@/manifests/components/index.js';
+
+export default (): CallToolResult => {
+  const components = Object.entries(componentManifest).map(([key, comp]) => ({
+    key,
+    name: comp.name,
+    description: comp.description,
+    element: comp.element,
+  }));
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify({ components }),
+      },
+    ],
+  };
+};

package/src/tools/listComponents/index.ts

@@ -0,0 +1,12 @@
+import handler from './handler.js';
+
+const toolDefinition = {
+  name: 'list_components',
+  config: {
+    description: 'List all available design system componentManifest',
+    inputSchema: {},
+  },
+  handler,
+};
+
+export default toolDefinition;

package/src/tools/searchComponents/__snapshots__/handler.test.ts.snap

@@ -0,0 +1,23 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`searchComponents tool > should return an empty response if no components match the query 1`] = `
+{
+  "content": [
+    {
+      "text": "{"query":"doctorwhoisthebestshowintheworld","count":0,"results":[]}",
+      "type": "text",
+    },
+  ],
+}
+`;
+
+exports[`searchComponents tool > should search for components by keyword 1`] = `
+{
+  "content": [
+    {
+      "text": "{"query":"button","count":2,"results":[{"key":"button","name":"Button","description":"Interactive button component with multiple themes and states","element":"button"},{"key":"radio","name":"Radio","description":"Radio button for selecting exactly one option from mutually exclusive choices","element":"input[type='radio']"}]}",
+      "type": "text",
+    },
+  ],
+}
+`;

package/src/tools/searchComponents/handler.test.ts

@@ -0,0 +1,14 @@
+import handler from './handler.js';
+import { describe, expect, it } from 'vitest';
+
+describe('searchComponents tool', () => {
+  it('should search for components by keyword', () => {
+    const result = handler({ query: 'button' });
+    expect(result).toMatchSnapshot();
+  });
+
+  it('should return an empty response if no components match the query', () => {
+    const result = handler({ query: 'DoctorWhoIsTheBestShowInTheWorld' });
+    expect(result).toMatchSnapshot();
+  });
+});

package/src/tools/searchComponents/handler.ts

@@ -0,0 +1,36 @@
+import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
+import { componentManifest } from '@/manifests/components/index.js';
+
+export interface SearchComponentsArgs {
+  query: string;
+}
+
+export default (args: SearchComponentsArgs): CallToolResult => {
+  const query = args.query.toLowerCase();
+  const results = [];
+
+  for (const [key, comp] of Object.entries(componentManifest)) {
+    const searchText = `${key} ${comp.name} ${comp.description}`.toLowerCase();
+    if (searchText.includes(query)) {
+      results.push({
+        key,
+        name: comp.name,
+        description: comp.description,
+        element: comp.element,
+      });
+    }
+  }
+
+  return {
+    content: [
+      {
+        type: 'text',
+        text: JSON.stringify({
+          query,
+          count: results.length,
+          results,
+        }),
+      },
+    ],
+  };
+};

package/src/tools/searchComponents/index.ts

@@ -0,0 +1,15 @@
+import handler from './handler.js';
+import { z } from 'zod';
+
+const toolDefinition = {
+  name: 'search_components',
+  config: {
+    description: 'Search for componentManifest by keyword or usage',
+    inputSchema: {
+      query: z.string().describe('Search query'),
+    },
+  },
+  handler,
+};
+
+export default toolDefinition;

package/src/utils/buildCDNUrls.ts

@@ -0,0 +1,7 @@
+const buildCDNUrl = (componentName: string, version: string) => {
+  return `https://cdn.design-system.triptease.io/${componentName}/${version}/${componentName}.js`;
+};
+
+const buildMajorVersion = (version: string) => `${version.split('.')[0]}.x.x`
+
+export { buildCDNUrl, buildMajorVersion };

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.packages.json",
+  "compilerOptions": {
+    "rootDir": "./",
+    "outDir": "dist",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules", "dist", "**/vitest.*", "**/*.test.*", "**/*.spec.*"]
+}

package/vitest.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [tsconfigPaths()],
+});