@triptease/design-system-mcp 1.0.0 → 1.0.2

package/src/resources/guides/setup.ts

@@ -0,0 +1,66 @@
+import { setupGuides } from '@/tools/getSetupGuide/setupGuides.js';
+
+export const getSetupGuide = async (type?: string) => {
+  // Return both guides if no type specified
+  if (!type) {
+    const allGuides = Object.entries(setupGuides).map(([key, guide]) => ({
+      type: key,
+      name: guide.name,
+      description: guide.description,
+      guide,
+    }));
+
+    return {
+      contents: [
+        {
+          uri: 'designsystem://guides/setup',
+          mimeType: 'application/json',
+          text: JSON.stringify(
+            {
+              message: 'Multiple setup options available. Choose based on user preference or project requirements.',
+              options: allGuides,
+            },
+            null,
+            2
+          ),
+        },
+      ],
+    };
+  }
+
+  const guideType = type.toLowerCase();
+  const guide = setupGuides[guideType];
+
+  if (!guide) {
+    return {
+      contents: [
+        {
+          uri: `designsystem://guides/setup/${type}`,
+          mimeType: 'application/json',
+          text: JSON.stringify(
+            {
+              error: `Setup guide '${guideType}' not found`,
+              available: Object.keys(setupGuides).map((key) => ({
+                key,
+                name: setupGuides[key].name,
+                description: setupGuides[key].description,
+              })),
+            },
+            null,
+            2
+          ),
+        },
+      ],
+    };
+  }
+
+  return {
+    contents: [
+      {
+        uri: `designsystem://guides/setup/${type}`,
+        mimeType: 'application/json',
+        text: JSON.stringify(guide, null, 2),
+      },
+    ],
+  };
+};

package/src/resources/index.ts

@@ -0,0 +1,3 @@
+export * from './components/index.js';
+export * from './tokens/index.js';
+export * from './guides/index.js';

package/src/resources/tokens/get.test.ts

@@ -0,0 +1,41 @@
+import { getCSSTokens } from './get.js';
+import { describe, expect, it } from 'vitest';
+
+describe('getCSSTokens resource', () => {
+  it('should return error for invalid category', async () => {
+    const result = await getCSSTokens('invalid');
+    const data = JSON.parse(result.contents[0].text);
+
+    expect(data.error).toBe("Invalid category 'invalid'");
+    expect(data.available).toBeDefined();
+    expect(Array.isArray(data.available)).toBe(true);
+  });
+
+  it('should return tokens array for valid category', async () => {
+    const result = await getCSSTokens('color');
+    const data = JSON.parse(result.contents[0].text);
+
+    expect(Array.isArray(data)).toBe(true);
+    expect(data.length).toBeGreaterThan(0);
+  });
+
+  it('should return tokens with token and value properties', async () => {
+    const result = await getCSSTokens('color');
+    const data = JSON.parse(result.contents[0].text);
+    const firstToken = data[0];
+
+    expect(firstToken).toHaveProperty('token');
+    expect(firstToken).toHaveProperty('value');
+    expect(typeof firstToken.token).toBe('string');
+    expect(typeof firstToken.value).toBe('string');
+  });
+
+  it('should return contents with correct URI and mimeType', async () => {
+    const result = await getCSSTokens('color');
+
+    expect(result.contents).toBeDefined();
+    expect(result.contents).toHaveLength(1);
+    expect(result.contents[0].uri).toBe('designsystem://tokens/color');
+    expect(result.contents[0].mimeType).toBe('application/json');
+  });
+});

package/src/resources/tokens/get.ts

@@ -0,0 +1,36 @@
+import designTokens from '@triptease/stylesheet/tokens' with { type: 'json' };
+import { buildTokens } from '@/tools/getCSSTokens/utils.js';
+
+export const getCSSTokens = async (category: string) => {
+  const tokens = buildTokens(designTokens);
+  const categories = Object.keys(tokens);
+
+  if (!categories.includes(category)) {
+    return {
+      contents: [
+        {
+          uri: `designsystem://tokens/${category}`,
+          mimeType: 'application/json',
+          text: JSON.stringify(
+            {
+              error: `Invalid category '${category}'`,
+              available: categories,
+            },
+            null,
+            2
+          ),
+        },
+      ],
+    };
+  }
+
+  return {
+    contents: [
+      {
+        uri: `designsystem://tokens/${category}`,
+        mimeType: 'application/json',
+        text: JSON.stringify(tokens[category], null, 2),
+      },
+    ],
+  };
+};

package/src/resources/tokens/index.ts

@@ -0,0 +1,2 @@
+export { listCSSTokens } from './list.js';
+export { getCSSTokens } from './get.js';

package/src/resources/tokens/list.test.ts

@@ -0,0 +1,42 @@
+import { listCSSTokens } from './list.js';
+import { describe, expect, it } from 'vitest';
+
+describe('listCSSTokens resource', () => {
+  it('should return contents with correct URI and mimeType', async () => {
+    const result = await listCSSTokens();
+
+    expect(result.contents).toBeDefined();
+    expect(result.contents).toHaveLength(1);
+    expect(result.contents[0].uri).toBe('designsystem://tokens');
+    expect(result.contents[0].mimeType).toBe('application/json');
+  });
+
+  it('should return token categories as an object', async () => {
+    const result = await listCSSTokens();
+    const data = JSON.parse(result.contents[0].text);
+
+    expect(typeof data).toBe('object');
+    expect(data).not.toBeNull();
+  });
+
+  it('should include count property for each category', async () => {
+    const result = await listCSSTokens();
+    const data = JSON.parse(result.contents[0].text);
+    const categories = Object.keys(data);
+
+    expect(categories.length).toBeGreaterThan(0);
+    categories.forEach((category) => {
+      expect(data[category]).toHaveProperty('count');
+      expect(typeof data[category].count).toBe('number');
+      expect(data[category].count).toBeGreaterThan(0);
+    });
+  });
+
+  it('should include color category', async () => {
+    const result = await listCSSTokens();
+    const data = JSON.parse(result.contents[0].text);
+
+    expect(data).toHaveProperty('color');
+    expect(data.color.count).toBeGreaterThan(0);
+  });
+});

package/src/resources/tokens/list.ts

@@ -0,0 +1,31 @@
+import designTokens from '@triptease/stylesheet/tokens' with { type: 'json' };
+import { buildTokens } from '@/tools/getCSSTokens/utils.js';
+
+interface Summary {
+  count: number;
+}
+
+interface SummaryMap {
+  [category: string]: Summary;
+}
+
+export const listCSSTokens = async () => {
+  const tokens = buildTokens(designTokens);
+  const categories = Object.keys(tokens);
+  const result: SummaryMap = {};
+
+  for (const category of categories) {
+    const tokenCount = tokens[category].length;
+    result[category] = { count: tokenCount };
+  }
+
+  return {
+    contents: [
+      {
+        uri: 'designsystem://tokens',
+        mimeType: 'application/json',
+        text: JSON.stringify(result, null, 2),
+      },
+    ],
+  };
+};

package/src/utils/buildCDNUrls.ts

@@ -2,6 +2,6 @@ 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`
+const buildMajorVersion = (version: string) => `${version.split('.')[0]}.x.x`;
 
 export { buildCDNUrl, buildMajorVersion };

package/dist/src/tools/searchComponents/handler.d.ts

@@ -1,6 +0,0 @@
-import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';
-export interface SearchComponentsArgs {
-    query: string;
-}
-declare const _default: (args: SearchComponentsArgs) => CallToolResult;
-export default _default;

package/dist/src/tools/searchComponents/handler.js

@@ -1,29 +0,0 @@
-import { componentManifest } from '../../manifests/components/index.js';
-export default (args) => {
-    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,
-                }),
-            },
-        ],
-    };
-};
-//# sourceMappingURL=handler.js.map

package/dist/src/tools/searchComponents/handler.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"handler.js","sourceRoot":"","sources":["../../../../src/tools/searchComponents/handler.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAMpE,eAAe,CAAC,IAA0B,EAAkB,EAAE;IAC5D,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;IACvC,MAAM,OAAO,GAAG,EAAE,CAAC;IAEnB,KAAK,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE,CAAC;QAC5D,MAAM,UAAU,GAAG,GAAG,GAAG,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC,WAAW,EAAE,CAAC;QAC3E,IAAI,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;YAC/B,OAAO,CAAC,IAAI,CAAC;gBACX,GAAG;gBACH,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,WAAW,EAAE,IAAI,CAAC,WAAW;gBAC7B,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED,OAAO;QACL,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;oBACnB,KAAK;oBACL,KAAK,EAAE,OAAO,CAAC,MAAM;oBACrB,OAAO;iBACR,CAAC;aACH;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';\nimport { componentManifest } from '@/manifests/components/index.js';\n\nexport interface SearchComponentsArgs {\n  query: string;\n}\n\nexport default (args: SearchComponentsArgs): CallToolResult => {\n  const query = args.query.toLowerCase();\n  const results = [];\n\n  for (const [key, comp] of Object.entries(componentManifest)) {\n    const searchText = `${key} ${comp.name} ${comp.description}`.toLowerCase();\n    if (searchText.includes(query)) {\n      results.push({\n        key,\n        name: comp.name,\n        description: comp.description,\n        element: comp.element,\n      });\n    }\n  }\n\n  return {\n    content: [\n      {\n        type: 'text',\n        text: JSON.stringify({\n          query,\n          count: results.length,\n          results,\n        }),\n      },\n    ],\n  };\n};\n"]}

package/dist/src/tools/searchComponents/index.d.ts

@@ -1,12 +0,0 @@
-import { z } from 'zod';
-declare const toolDefinition: {
-    name: string;
-    config: {
-        description: string;
-        inputSchema: {
-            query: z.ZodString;
-        };
-    };
-    handler: (args: import("./handler.js").SearchComponentsArgs) => import("@modelcontextprotocol/sdk/types.js").CallToolResult;
-};
-export default toolDefinition;

package/dist/src/tools/searchComponents/index.js

@@ -1,14 +0,0 @@
-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;
-//# sourceMappingURL=index.js.map

package/dist/src/tools/searchComponents/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tools/searchComponents/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,cAAc,CAAC;AACnC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAExB,MAAM,cAAc,GAAG;IACrB,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE;QACN,WAAW,EAAE,kDAAkD;QAC/D,WAAW,EAAE;YACX,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC;SAC3C;KACF;IACD,OAAO;CACR,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import handler from './handler.js';\nimport { z } from 'zod';\n\nconst toolDefinition = {\n  name: 'search_components',\n  config: {\n    description: 'Search for componentManifest by keyword or usage',\n    inputSchema: {\n      query: z.string().describe('Search query'),\n    },\n  },\n  handler,\n};\n\nexport default toolDefinition;\n"]}

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

@@ -1,23 +0,0 @@
-// 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

@@ -1,14 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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;