@triptease/design-system-mcp 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +16 -0
- package/README.md +35 -41
- package/dist/package.json +3 -3
- package/dist/src/index.js +40 -14
- package/dist/src/index.js.map +1 -1
- package/dist/src/manifests/components/entries/barChart.js +3 -3
- package/dist/src/manifests/components/entries/barChart.js.map +1 -1
- package/dist/src/manifests/components/entries/card.d.ts +7 -2
- package/dist/src/manifests/components/entries/card.js +10 -2
- package/dist/src/manifests/components/entries/card.js.map +1 -1
- package/dist/src/manifests/components/entries/combobox.js +1 -1
- package/dist/src/manifests/components/entries/combobox.js.map +1 -1
- package/dist/src/manifests/components/entries/datePicker.js +1 -1
- package/dist/src/manifests/components/entries/datePicker.js.map +1 -1
- package/dist/src/manifests/components/entries/dateRangePicker.js +1 -1
- package/dist/src/manifests/components/entries/dateRangePicker.js.map +1 -1
- package/dist/src/manifests/components/entries/dialog.js +1 -1
- package/dist/src/manifests/components/entries/dialog.js.map +1 -1
- package/dist/src/manifests/components/entries/lineChart.js +1 -1
- package/dist/src/manifests/components/entries/lineChart.js.map +1 -1
- package/dist/src/resources/components/get.d.ts +7 -0
- package/dist/src/resources/components/get.js +29 -0
- package/dist/src/resources/components/get.js.map +1 -0
- package/dist/src/resources/components/index.d.ts +2 -0
- package/dist/src/resources/components/index.js +3 -0
- package/dist/src/resources/components/index.js.map +1 -0
- package/dist/src/resources/components/list.d.ts +7 -0
- package/dist/src/resources/components/list.js +19 -0
- package/dist/src/resources/components/list.js.map +1 -0
- package/dist/src/resources/guides/index.d.ts +2 -0
- package/dist/src/resources/guides/index.js +3 -0
- package/dist/src/resources/guides/index.js.map +1 -0
- package/dist/src/resources/guides/principles.d.ts +60 -0
- package/dist/src/resources/guides/principles.js +158 -0
- package/dist/src/resources/guides/principles.js.map +1 -0
- package/dist/src/resources/guides/setup.d.ts +7 -0
- package/dist/src/resources/guides/setup.js +54 -0
- package/dist/src/resources/guides/setup.js.map +1 -0
- package/dist/src/resources/index.d.ts +3 -0
- package/dist/src/resources/index.js +4 -0
- package/dist/src/resources/index.js.map +1 -0
- package/dist/src/resources/tokens/get.d.ts +7 -0
- package/dist/src/resources/tokens/get.js +30 -0
- package/dist/src/resources/tokens/get.js.map +1 -0
- package/dist/src/resources/tokens/index.d.ts +2 -0
- package/dist/src/resources/tokens/index.js +3 -0
- package/dist/src/resources/tokens/index.js.map +1 -0
- package/dist/src/resources/tokens/list.d.ts +7 -0
- package/dist/src/resources/tokens/list.js +21 -0
- package/dist/src/resources/tokens/list.js.map +1 -0
- package/dist/src/utils/buildCDNUrls.js.map +1 -1
- package/package.json +3 -3
- package/src/index.ts +94 -14
- package/src/manifests/components/entries/barChart.ts +3 -3
- package/src/manifests/components/entries/card.ts +10 -2
- package/src/manifests/components/entries/combobox.ts +1 -1
- package/src/manifests/components/entries/datePicker.ts +1 -1
- package/src/manifests/components/entries/dateRangePicker.ts +1 -1
- package/src/manifests/components/entries/dialog.ts +1 -1
- package/src/manifests/components/entries/lineChart.ts +1 -1
- package/src/resources/components/get.test.ts +39 -0
- package/src/resources/components/get.ts +35 -0
- package/src/resources/components/index.ts +2 -0
- package/src/resources/components/list.test.ts +40 -0
- package/src/resources/components/list.ts +20 -0
- package/src/resources/guides/index.ts +2 -0
- package/src/resources/guides/principles.ts +160 -0
- package/src/resources/guides/setup.test.ts +72 -0
- package/src/resources/guides/setup.ts +66 -0
- package/src/resources/index.ts +3 -0
- package/src/resources/tokens/get.test.ts +41 -0
- package/src/resources/tokens/get.ts +36 -0
- package/src/resources/tokens/index.ts +2 -0
- package/src/resources/tokens/list.test.ts +42 -0
- package/src/resources/tokens/list.ts +31 -0
- package/src/utils/buildCDNUrls.ts +1 -1
- package/dist/src/tools/searchComponents/handler.d.ts +0 -6
- package/dist/src/tools/searchComponents/handler.js +0 -29
- package/dist/src/tools/searchComponents/handler.js.map +0 -1
- package/dist/src/tools/searchComponents/index.d.ts +0 -12
- package/dist/src/tools/searchComponents/index.js +0 -14
- package/dist/src/tools/searchComponents/index.js.map +0 -1
- package/src/tools/searchComponents/__snapshots__/handler.test.ts.snap +0 -23
- package/src/tools/searchComponents/handler.test.ts +0 -14
- package/src/tools/searchComponents/handler.ts +0 -36
- package/src/tools/searchComponents/index.ts +0 -15
|
@@ -42,7 +42,7 @@ export default {
|
|
|
42
42
|
name: 'tt-dataset',
|
|
43
43
|
includesTypes: false,
|
|
44
44
|
optional: false,
|
|
45
|
-
moduleFormat:
|
|
45
|
+
moduleFormat: 'esm',
|
|
46
46
|
pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),
|
|
47
47
|
pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),
|
|
48
48
|
latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"lineChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/lineChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\nimport { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nconst latestLineChartVersion = packageJson.dependencies['@triptease/tt-line-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\nconst latestHighlightVersion = packageJson.dependencies['@triptease/tt-highlight'];\n\nexport default {\n 'line-chart': {\n name: 'Line Chart - Web Component',\n description: 'Line chart for visualizing trends over continuous data',\n ssrSafe: true,\n element: 'tt-line-chart',\n usageGuidance: {\n whenToUse: [\n 'To visualize trends along a continuous x-axis',\n 'To compare how multiple datasets for the same measure change relative to each other',\n ],\n avoid: [\n 'When the x-axis does not represent a continuous range (use a bar chart instead)',\n 'When there are too few data points to form a meaningful trend (use a bar chart instead)',\n 'When comparing datasets that do not have a meaningful or explainable relationship',\n ],\n },\n installationOptions: {\n npm: [\n { name: '@triptease/tt-line-chart', includesTypes: true, optional: false },\n { name: '@triptease/tt-dataset', includesTypes: true, optional: false },\n { name: '@triptease/tt-data-point', includesTypes: true, optional: false },\n { name: '@triptease/tt-highlight', includesTypes: true, optional: true },\n ],\n cdn: [\n {\n name: 'tt-line-chart',\n includesTypes: false,\n optional: false,\n pinnedVersionUrl: buildCDNUrl('tt-line-chart', latestLineChartVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-line-chart', buildMajorVersion(latestLineChartVersion)),\n latestVersionUrl: buildCDNUrl('tt-line-chart', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-dataset',\n includesTypes: false,\n optional: false,\n moduleFormat: \"esm\",\n pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),\n latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-data-point',\n includesTypes: false,\n optional: false,\n pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),\n latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-highlight',\n includesTypes: false,\n optional: true,\n pinnedVersionUrl: buildCDNUrl('tt-highlight', latestHighlightVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-highlight', buildMajorVersion(latestHighlightVersion)),\n latestVersionUrl: buildCDNUrl('tt-highlight', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n ],\n },\n attributes: {\n width: {\n type: 'string',\n description: 'Width of chart (any CSS value). Defaults to 100% to fill container.',\n },\n height: {\n type: 'string',\n description: 'Height of chart (any CSS value). Defaults to 100% to fill container.',\n },\n 'x-axis-title': {\n type: 'string',\n description: 'Title for x-axis. Use to clarify units of measurement. Keep concise.',\n },\n 'y-axis-title': {\n type: 'string',\n description: 'Title for y-axis. Use to clarify units of measurement. Keep concise.',\n },\n loading: {\n type: 'boolean',\n description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n },\n 'hide-numbers': {\n type: 'boolean',\n description:\n 'Hide y-axis numbers and tooltips. Use when numbers could mislead. Removes ARIA labels, so provide trend description.',\n },\n },\n examples: [\n {\n title: 'Basic line chart',\n code: `import '@triptease/tt-line-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-line-chart id=\"basic-chart\">\n <tt-dataset label=\"2024\">\n <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n <tt-data-point label=\"Jan 3\" value={52}></tt-data-point>\n </tt-dataset>\n</tt-line-chart>`,\n },\n {\n title: 'Multiple datasets',\n description:\n 'Use multiple datasets to compare trends of the same measure for different groups. Limit datasets to a maximum of 4, as more datasets make the chart difficult to read and compare. The component automatically uses symbols to help identify each dataset without relying on color.',\n code: `<tt-line-chart id=\"multiple-datasets\" height=\"20rem\">\n <tt-dataset label=\"2025\">\n <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n </tt-dataset>\n <tt-dataset label=\"2024\">\n <tt-data-point label=\"Jan 1\" value={42}></tt-data-point>\n <tt-data-point label=\"Jan 2\" value={44}></tt-data-point>\n </tt-dataset>\n</tt-line-chart>`,\n },\n {\n title: 'With highlighted regions',\n description:\n 'Use highlighted regions to draw attention to and label significant intervals. Only use when something significant occurs that may have affected the data. Use sparingly and highlight only the most important intervals to avoid clutter. Avoid overlapping regions as this can make it difficult to see where each interval starts and ends. Do not use when displaying multiple datasets if the highlight applies to only one dataset, as users may assume it applies to all.',\n code: `import '@triptease/tt-highlight';\n\n<tt-line-chart id=\"highlighted-chart\" height=\"20rem\">\n <tt-dataset label=\"2025\">\n <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n </tt-dataset>\n <tt-highlight label=\"Easter Boost\" from=\"15 Mar\" to=\"5 Apr\"></tt-highlight>\n</tt-line-chart>;`,\n },\n ],\n },\n} satisfies ComponentManifest;\n"]}
|
|
1
|
+
{"version":3,"file":"lineChart.js","sourceRoot":"","sources":["../../../../../src/manifests/components/entries/lineChart.ts"],"names":[],"mappings":"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","sourcesContent":["import { ComponentManifest } from '@/manifests/components/types.js';\nimport { buildCDNUrl, buildMajorVersion } from '@/utils/buildCDNUrls.js';\nimport packageJson from '@/../package.json' with { type: 'json' };\n\nconst latestLineChartVersion = packageJson.dependencies['@triptease/tt-line-chart'];\nconst latestDatasetVersion = packageJson.dependencies['@triptease/tt-dataset'];\nconst latestDataPointVersion = packageJson.dependencies['@triptease/tt-data-point'];\nconst latestHighlightVersion = packageJson.dependencies['@triptease/tt-highlight'];\n\nexport default {\n 'line-chart': {\n name: 'Line Chart - Web Component',\n description: 'Line chart for visualizing trends over continuous data',\n ssrSafe: true,\n element: 'tt-line-chart',\n usageGuidance: {\n whenToUse: [\n 'To visualize trends along a continuous x-axis',\n 'To compare how multiple datasets for the same measure change relative to each other',\n ],\n avoid: [\n 'When the x-axis does not represent a continuous range (use a bar chart instead)',\n 'When there are too few data points to form a meaningful trend (use a bar chart instead)',\n 'When comparing datasets that do not have a meaningful or explainable relationship',\n ],\n },\n installationOptions: {\n npm: [\n { name: '@triptease/tt-line-chart', includesTypes: true, optional: false },\n { name: '@triptease/tt-dataset', includesTypes: true, optional: false },\n { name: '@triptease/tt-data-point', includesTypes: true, optional: false },\n { name: '@triptease/tt-highlight', includesTypes: true, optional: true },\n ],\n cdn: [\n {\n name: 'tt-line-chart',\n includesTypes: false,\n optional: false,\n pinnedVersionUrl: buildCDNUrl('tt-line-chart', latestLineChartVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-line-chart', buildMajorVersion(latestLineChartVersion)),\n latestVersionUrl: buildCDNUrl('tt-line-chart', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-dataset',\n includesTypes: false,\n optional: false,\n moduleFormat: 'esm',\n pinnedVersionUrl: buildCDNUrl('tt-dataset', latestDatasetVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-dataset', buildMajorVersion(latestDatasetVersion)),\n latestVersionUrl: buildCDNUrl('tt-dataset', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-data-point',\n includesTypes: false,\n optional: false,\n pinnedVersionUrl: buildCDNUrl('tt-data-point', latestDataPointVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-data-point', buildMajorVersion(latestDataPointVersion)),\n latestVersionUrl: buildCDNUrl('tt-data-point', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n {\n name: 'tt-highlight',\n includesTypes: false,\n optional: true,\n pinnedVersionUrl: buildCDNUrl('tt-highlight', latestHighlightVersion),\n pinnedMajorVersionUrl: buildCDNUrl('tt-highlight', buildMajorVersion(latestHighlightVersion)),\n latestVersionUrl: buildCDNUrl('tt-highlight', 'latest'),\n guidance:\n 'Prefer pinned major version URL to avoid unexpected breaking changes. Do not use latest version URL in production code.',\n },\n ],\n },\n attributes: {\n width: {\n type: 'string',\n description: 'Width of chart (any CSS value). Defaults to 100% to fill container.',\n },\n height: {\n type: 'string',\n description: 'Height of chart (any CSS value). Defaults to 100% to fill container.',\n },\n 'x-axis-title': {\n type: 'string',\n description: 'Title for x-axis. Use to clarify units of measurement. Keep concise.',\n },\n 'y-axis-title': {\n type: 'string',\n description: 'Title for y-axis. Use to clarify units of measurement. Keep concise.',\n },\n loading: {\n type: 'boolean',\n description: 'Show loading state while data fetches. Component handles aria-busy automatically.',\n },\n 'hide-numbers': {\n type: 'boolean',\n description:\n 'Hide y-axis numbers and tooltips. Use when numbers could mislead. Removes ARIA labels, so provide trend description.',\n },\n },\n examples: [\n {\n title: 'Basic line chart',\n code: `import '@triptease/tt-line-chart';\nimport '@triptease/tt-dataset';\nimport '@triptease/tt-data-point';\n\n<tt-line-chart id=\"basic-chart\">\n <tt-dataset label=\"2024\">\n <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n <tt-data-point label=\"Jan 3\" value={52}></tt-data-point>\n </tt-dataset>\n</tt-line-chart>`,\n },\n {\n title: 'Multiple datasets',\n description:\n 'Use multiple datasets to compare trends of the same measure for different groups. Limit datasets to a maximum of 4, as more datasets make the chart difficult to read and compare. The component automatically uses symbols to help identify each dataset without relying on color.',\n code: `<tt-line-chart id=\"multiple-datasets\" height=\"20rem\">\n <tt-dataset label=\"2025\">\n <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n </tt-dataset>\n <tt-dataset label=\"2024\">\n <tt-data-point label=\"Jan 1\" value={42}></tt-data-point>\n <tt-data-point label=\"Jan 2\" value={44}></tt-data-point>\n </tt-dataset>\n</tt-line-chart>`,\n },\n {\n title: 'With highlighted regions',\n description:\n 'Use highlighted regions to draw attention to and label significant intervals. Only use when something significant occurs that may have affected the data. Use sparingly and highlight only the most important intervals to avoid clutter. Avoid overlapping regions as this can make it difficult to see where each interval starts and ends. Do not use when displaying multiple datasets if the highlight applies to only one dataset, as users may assume it applies to all.',\n code: `import '@triptease/tt-highlight';\n\n<tt-line-chart id=\"highlighted-chart\" height=\"20rem\">\n <tt-dataset label=\"2025\">\n <tt-data-point label=\"Jan 1\" value={45}></tt-data-point>\n <tt-data-point label=\"Jan 2\" value={48}></tt-data-point>\n </tt-dataset>\n <tt-highlight label=\"Easter Boost\" from=\"15 Mar\" to=\"5 Apr\"></tt-highlight>\n</tt-line-chart>;`,\n },\n ],\n },\n} satisfies ComponentManifest;\n"]}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { componentManifest } from '../../manifests/components/index.js';
|
|
2
|
+
export const getComponentDocs = async (name) => {
|
|
3
|
+
const componentName = name.toLowerCase();
|
|
4
|
+
const component = componentManifest[componentName];
|
|
5
|
+
if (!component) {
|
|
6
|
+
return {
|
|
7
|
+
contents: [
|
|
8
|
+
{
|
|
9
|
+
uri: `designsystem://components/${name}`,
|
|
10
|
+
mimeType: 'application/json',
|
|
11
|
+
text: JSON.stringify({
|
|
12
|
+
error: `Component '${componentName}' not found`,
|
|
13
|
+
available: Object.keys(componentManifest),
|
|
14
|
+
}, null, 2),
|
|
15
|
+
},
|
|
16
|
+
],
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
return {
|
|
20
|
+
contents: [
|
|
21
|
+
{
|
|
22
|
+
uri: `designsystem://components/${name}`,
|
|
23
|
+
mimeType: 'application/json',
|
|
24
|
+
text: JSON.stringify(component, null, 2),
|
|
25
|
+
},
|
|
26
|
+
],
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=get.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get.js","sourceRoot":"","sources":["../../../../src/resources/components/get.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpE,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,EAAE,IAAY,EAAE,EAAE;IACrD,MAAM,aAAa,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACzC,MAAM,SAAS,GAAG,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAEnD,IAAI,CAAC,SAAS,EAAE,CAAC;QACf,OAAO;YACL,QAAQ,EAAE;gBACR;oBACE,GAAG,EAAE,6BAA6B,IAAI,EAAE;oBACxC,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,CAClB;wBACE,KAAK,EAAE,cAAc,aAAa,aAAa;wBAC/C,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC;qBAC1C,EACD,IAAI,EACJ,CAAC,CACF;iBACF;aACF;SACF,CAAC;IACJ,CAAC;IAED,OAAO;QACL,QAAQ,EAAE;YACR;gBACE,GAAG,EAAE,6BAA6B,IAAI,EAAE;gBACxC,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;aACzC;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { componentManifest } from '@/manifests/components/index.js';\n\nexport const getComponentDocs = async (name: string) => {\n const componentName = name.toLowerCase();\n const component = componentManifest[componentName];\n\n if (!component) {\n return {\n contents: [\n {\n uri: `designsystem://components/${name}`,\n mimeType: 'application/json',\n text: JSON.stringify(\n {\n error: `Component '${componentName}' not found`,\n available: Object.keys(componentManifest),\n },\n null,\n 2\n ),\n },\n ],\n };\n }\n\n return {\n contents: [\n {\n uri: `designsystem://components/${name}`,\n mimeType: 'application/json',\n text: JSON.stringify(component, null, 2),\n },\n ],\n };\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/resources/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { listComponents } from './list.js';\nexport { getComponentDocs } from './get.js';\n"]}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { componentManifest } from '../../manifests/components/index.js';
|
|
2
|
+
export const listComponents = async () => {
|
|
3
|
+
const components = Object.entries(componentManifest).map(([key, comp]) => ({
|
|
4
|
+
key,
|
|
5
|
+
name: comp.name,
|
|
6
|
+
description: comp.description,
|
|
7
|
+
element: comp.element,
|
|
8
|
+
}));
|
|
9
|
+
return {
|
|
10
|
+
contents: [
|
|
11
|
+
{
|
|
12
|
+
uri: 'designsystem://components',
|
|
13
|
+
mimeType: 'application/json',
|
|
14
|
+
text: JSON.stringify({ components }, null, 2),
|
|
15
|
+
},
|
|
16
|
+
],
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../src/resources/components/list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpE,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,IAAI,EAAE;IACvC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC;QACzE,GAAG;QACH,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,WAAW,EAAE,IAAI,CAAC,WAAW;QAC7B,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC,CAAC,CAAC;IAEJ,OAAO;QACL,QAAQ,EAAE;YACR;gBACE,GAAG,EAAE,2BAA2B;gBAChC,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,UAAU,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;aAC9C;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { componentManifest } from '@/manifests/components/index.js';\n\nexport const listComponents = async () => {\n const components = Object.entries(componentManifest).map(([key, comp]) => ({\n key,\n name: comp.name,\n description: comp.description,\n element: comp.element,\n }));\n\n return {\n contents: [\n {\n uri: 'designsystem://components',\n mimeType: 'application/json',\n text: JSON.stringify({ components }, null, 2),\n },\n ],\n };\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/resources/guides/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC","sourcesContent":["export { getSetupGuide } from './setup.js';\nexport { getPrinciplesGuide } from './principles.js';\n"]}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
export declare const designSystemPrinciples: {
|
|
2
|
+
overview: {
|
|
3
|
+
corePrinciple: string;
|
|
4
|
+
philosophy: string;
|
|
5
|
+
};
|
|
6
|
+
cssClassUsage: {
|
|
7
|
+
defaultApproach: string;
|
|
8
|
+
do: string[];
|
|
9
|
+
dont: string[];
|
|
10
|
+
};
|
|
11
|
+
verificationWorkflow: {
|
|
12
|
+
description: string;
|
|
13
|
+
steps: string[];
|
|
14
|
+
};
|
|
15
|
+
whenToWriteCustomCSS: {
|
|
16
|
+
description: string;
|
|
17
|
+
scenarios: string[];
|
|
18
|
+
notValidReasons: string[];
|
|
19
|
+
};
|
|
20
|
+
compositionPatterns: {
|
|
21
|
+
description: string;
|
|
22
|
+
patterns: {
|
|
23
|
+
pattern: string;
|
|
24
|
+
example: string;
|
|
25
|
+
explanation: string;
|
|
26
|
+
}[];
|
|
27
|
+
};
|
|
28
|
+
designTokens: {
|
|
29
|
+
description: string;
|
|
30
|
+
principle: string;
|
|
31
|
+
examples: {
|
|
32
|
+
wrong: string;
|
|
33
|
+
right: string;
|
|
34
|
+
why: string;
|
|
35
|
+
}[];
|
|
36
|
+
};
|
|
37
|
+
commonMistakes: {
|
|
38
|
+
description: string;
|
|
39
|
+
mistakes: {
|
|
40
|
+
mistake: string;
|
|
41
|
+
problem: string;
|
|
42
|
+
solution: string;
|
|
43
|
+
prevention: string;
|
|
44
|
+
}[];
|
|
45
|
+
};
|
|
46
|
+
resources: {
|
|
47
|
+
description: string;
|
|
48
|
+
available: {
|
|
49
|
+
resource: string;
|
|
50
|
+
purpose: string;
|
|
51
|
+
}[];
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
export declare const getPrinciplesGuide: () => Promise<{
|
|
55
|
+
contents: {
|
|
56
|
+
uri: string;
|
|
57
|
+
mimeType: string;
|
|
58
|
+
text: string;
|
|
59
|
+
}[];
|
|
60
|
+
}>;
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
export const designSystemPrinciples = {
|
|
2
|
+
overview: {
|
|
3
|
+
corePrinciple: 'Trust the design system. Components and classes are fully styled and production-ready. Use them as-is.',
|
|
4
|
+
philosophy: 'The design system handles styling, spacing, colors, and layouts. Your role is to compose components, not recreate their styling.',
|
|
5
|
+
},
|
|
6
|
+
cssClassUsage: {
|
|
7
|
+
defaultApproach: 'Use existing classes without writing additional CSS',
|
|
8
|
+
do: [
|
|
9
|
+
'Use classes as-is without extra styling (e.g., <div class="card">)',
|
|
10
|
+
'Check component documentation BEFORE writing any custom CSS',
|
|
11
|
+
'Compose with multiple classes when needed (e.g., class="card stat-card")',
|
|
12
|
+
'Override using CSS variables when provided (e.g., style="--card-padding: var(--space-scale-4)")',
|
|
13
|
+
'Trust that design system classes include ALL necessary styling (layout, spacing, colors, shadows)',
|
|
14
|
+
],
|
|
15
|
+
dont: [
|
|
16
|
+
"Don't duplicate CSS that classes already provide (border, background, padding, etc.)",
|
|
17
|
+
"Don't create new classes without checking if design system has it",
|
|
18
|
+
"Don't assume classes need additional styling - verify in docs first",
|
|
19
|
+
"Don't override design tokens with hardcoded values (use CSS variables instead)",
|
|
20
|
+
"Don't add wrapper divs just to style - compose classes directly",
|
|
21
|
+
],
|
|
22
|
+
},
|
|
23
|
+
verificationWorkflow: {
|
|
24
|
+
description: 'Follow this workflow BEFORE writing any custom CSS',
|
|
25
|
+
steps: [
|
|
26
|
+
'1. Check: Does the design system have this component? (Query designsystem://components)',
|
|
27
|
+
'2. Read: What does the component provide? (Check component docs)',
|
|
28
|
+
'3. Use: Apply the class without custom CSS first',
|
|
29
|
+
'4. Test: Does it work as-is? (Usually yes!)',
|
|
30
|
+
'5. Customize: Only if truly needed, use CSS variables or add modifier classes',
|
|
31
|
+
],
|
|
32
|
+
},
|
|
33
|
+
whenToWriteCustomCSS: {
|
|
34
|
+
description: 'Write custom CSS only in these scenarios',
|
|
35
|
+
scenarios: [
|
|
36
|
+
'User explicitly requests custom/unique styling',
|
|
37
|
+
'Design system genuinely lacks the needed component',
|
|
38
|
+
'Truly unique layout requirements that cannot be solved with existing classes or composition',
|
|
39
|
+
'Dashboard-specific or app-specific layout patterns (grids, specialized containers)',
|
|
40
|
+
],
|
|
41
|
+
notValidReasons: [
|
|
42
|
+
'Not valid: "I need a card with padding" - .card already has padding',
|
|
43
|
+
'Not valid: "I need a button with a border" - button already has borders',
|
|
44
|
+
'Not valid: "I need spacing between elements" - use design system spacing tokens',
|
|
45
|
+
],
|
|
46
|
+
},
|
|
47
|
+
compositionPatterns: {
|
|
48
|
+
description: 'How to combine design system classes effectively',
|
|
49
|
+
patterns: [
|
|
50
|
+
{
|
|
51
|
+
pattern: 'Base + Modifier',
|
|
52
|
+
example: '<div class="card stat-card">',
|
|
53
|
+
explanation: 'Use base design system class (card) + your modifier class (stat-card) for extensions',
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
pattern: 'CSS Variable Override',
|
|
57
|
+
example: '<div class="card" style="--card-padding: var(--space-scale-5)">',
|
|
58
|
+
explanation: 'Override CSS variables for customization without duplicating styles',
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
pattern: 'Multiple Design System Classes',
|
|
62
|
+
example: '<button class="primary large">',
|
|
63
|
+
explanation: 'Compose multiple utility/variant classes from design system',
|
|
64
|
+
},
|
|
65
|
+
],
|
|
66
|
+
},
|
|
67
|
+
designTokens: {
|
|
68
|
+
description: 'Use design tokens instead of hardcoded values',
|
|
69
|
+
principle: 'All spacing, colors, typography should use CSS custom properties (--*)',
|
|
70
|
+
examples: [
|
|
71
|
+
{
|
|
72
|
+
wrong: 'padding: 24px',
|
|
73
|
+
right: 'padding: var(--space-scale-3)',
|
|
74
|
+
why: 'Tokens ensure consistency and enable theming',
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
wrong: 'color: #DA0707',
|
|
78
|
+
right: 'color: var(--color-alert-400)',
|
|
79
|
+
why: 'Semantic tokens communicate intent and adapt to themes',
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
wrong: 'font-size: 16px',
|
|
83
|
+
right: 'font-size: var(--font-size-300)',
|
|
84
|
+
why: 'Typography scale ensures visual hierarchy',
|
|
85
|
+
},
|
|
86
|
+
],
|
|
87
|
+
},
|
|
88
|
+
commonMistakes: {
|
|
89
|
+
description: 'Common mistakes developers make (and how to avoid them)',
|
|
90
|
+
mistakes: [
|
|
91
|
+
{
|
|
92
|
+
mistake: 'Recreating .card styling',
|
|
93
|
+
problem: 'Duplicating background, border, padding, shadows that .card already provides',
|
|
94
|
+
solution: 'Use <div class="card"> directly. It includes everything.',
|
|
95
|
+
prevention: 'Read component docs BEFORE writing CSS',
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
mistake: 'Adding wrapper divs for styling',
|
|
99
|
+
problem: '<div class="my-wrapper"><div class="card">...</div></div>',
|
|
100
|
+
solution: 'Style the card directly: <div class="card my-modifier">',
|
|
101
|
+
prevention: 'Compose classes instead of wrapping',
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
mistake: 'Hardcoding spacing values',
|
|
105
|
+
problem: 'margin: 16px; gap: 12px;',
|
|
106
|
+
solution: 'margin: var(--space-scale-2); gap: var(--space-scale-1-5);',
|
|
107
|
+
prevention: 'Query designsystem://tokens/space for available values',
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
mistake: 'Assuming classes are incomplete',
|
|
111
|
+
problem: 'Adding display: flex, border: 1px solid, etc. to classes that already have these',
|
|
112
|
+
solution: "Trust the design system. Check docs to see what's included.",
|
|
113
|
+
prevention: 'Default assumption: classes are complete, not partial',
|
|
114
|
+
},
|
|
115
|
+
],
|
|
116
|
+
},
|
|
117
|
+
resources: {
|
|
118
|
+
description: 'MCP resources for discovering design system capabilities',
|
|
119
|
+
available: [
|
|
120
|
+
{
|
|
121
|
+
resource: 'designsystem://components',
|
|
122
|
+
purpose: 'List all available components',
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
resource: 'designsystem://components/{name}',
|
|
126
|
+
purpose: 'Get detailed component documentation',
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
resource: 'designsystem://tokens',
|
|
130
|
+
purpose: 'List all token categories',
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
resource: 'designsystem://tokens/{category}',
|
|
134
|
+
purpose: 'Get tokens for specific category (color, space, font, etc.)',
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
resource: 'designsystem://guides/setup',
|
|
138
|
+
purpose: 'Installation instructions',
|
|
139
|
+
},
|
|
140
|
+
{
|
|
141
|
+
resource: 'designsystem://guides/principles',
|
|
142
|
+
purpose: 'This guide - design system usage principles',
|
|
143
|
+
},
|
|
144
|
+
],
|
|
145
|
+
},
|
|
146
|
+
};
|
|
147
|
+
export const getPrinciplesGuide = async () => {
|
|
148
|
+
return {
|
|
149
|
+
contents: [
|
|
150
|
+
{
|
|
151
|
+
uri: 'designsystem://guides/principles',
|
|
152
|
+
mimeType: 'application/json',
|
|
153
|
+
text: JSON.stringify(designSystemPrinciples, null, 2),
|
|
154
|
+
},
|
|
155
|
+
],
|
|
156
|
+
};
|
|
157
|
+
};
|
|
158
|
+
//# sourceMappingURL=principles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"principles.js","sourceRoot":"","sources":["../../../../src/resources/guides/principles.ts"],"names":[],"mappings":"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","sourcesContent":["export const designSystemPrinciples = {\n overview: {\n corePrinciple:\n 'Trust the design system. Components and classes are fully styled and production-ready. Use them as-is.',\n philosophy:\n 'The design system handles styling, spacing, colors, and layouts. Your role is to compose components, not recreate their styling.',\n },\n cssClassUsage: {\n defaultApproach: 'Use existing classes without writing additional CSS',\n do: [\n 'Use classes as-is without extra styling (e.g., <div class=\"card\">)',\n 'Check component documentation BEFORE writing any custom CSS',\n 'Compose with multiple classes when needed (e.g., class=\"card stat-card\")',\n 'Override using CSS variables when provided (e.g., style=\"--card-padding: var(--space-scale-4)\")',\n 'Trust that design system classes include ALL necessary styling (layout, spacing, colors, shadows)',\n ],\n dont: [\n \"Don't duplicate CSS that classes already provide (border, background, padding, etc.)\",\n \"Don't create new classes without checking if design system has it\",\n \"Don't assume classes need additional styling - verify in docs first\",\n \"Don't override design tokens with hardcoded values (use CSS variables instead)\",\n \"Don't add wrapper divs just to style - compose classes directly\",\n ],\n },\n verificationWorkflow: {\n description: 'Follow this workflow BEFORE writing any custom CSS',\n steps: [\n '1. Check: Does the design system have this component? (Query designsystem://components)',\n '2. Read: What does the component provide? (Check component docs)',\n '3. Use: Apply the class without custom CSS first',\n '4. Test: Does it work as-is? (Usually yes!)',\n '5. Customize: Only if truly needed, use CSS variables or add modifier classes',\n ],\n },\n whenToWriteCustomCSS: {\n description: 'Write custom CSS only in these scenarios',\n scenarios: [\n 'User explicitly requests custom/unique styling',\n 'Design system genuinely lacks the needed component',\n 'Truly unique layout requirements that cannot be solved with existing classes or composition',\n 'Dashboard-specific or app-specific layout patterns (grids, specialized containers)',\n ],\n notValidReasons: [\n 'Not valid: \"I need a card with padding\" - .card already has padding',\n 'Not valid: \"I need a button with a border\" - button already has borders',\n 'Not valid: \"I need spacing between elements\" - use design system spacing tokens',\n ],\n },\n compositionPatterns: {\n description: 'How to combine design system classes effectively',\n patterns: [\n {\n pattern: 'Base + Modifier',\n example: '<div class=\"card stat-card\">',\n explanation: 'Use base design system class (card) + your modifier class (stat-card) for extensions',\n },\n {\n pattern: 'CSS Variable Override',\n example: '<div class=\"card\" style=\"--card-padding: var(--space-scale-5)\">',\n explanation: 'Override CSS variables for customization without duplicating styles',\n },\n {\n pattern: 'Multiple Design System Classes',\n example: '<button class=\"primary large\">',\n explanation: 'Compose multiple utility/variant classes from design system',\n },\n ],\n },\n designTokens: {\n description: 'Use design tokens instead of hardcoded values',\n principle: 'All spacing, colors, typography should use CSS custom properties (--*)',\n examples: [\n {\n wrong: 'padding: 24px',\n right: 'padding: var(--space-scale-3)',\n why: 'Tokens ensure consistency and enable theming',\n },\n {\n wrong: 'color: #DA0707',\n right: 'color: var(--color-alert-400)',\n why: 'Semantic tokens communicate intent and adapt to themes',\n },\n {\n wrong: 'font-size: 16px',\n right: 'font-size: var(--font-size-300)',\n why: 'Typography scale ensures visual hierarchy',\n },\n ],\n },\n commonMistakes: {\n description: 'Common mistakes developers make (and how to avoid them)',\n mistakes: [\n {\n mistake: 'Recreating .card styling',\n problem: 'Duplicating background, border, padding, shadows that .card already provides',\n solution: 'Use <div class=\"card\"> directly. It includes everything.',\n prevention: 'Read component docs BEFORE writing CSS',\n },\n {\n mistake: 'Adding wrapper divs for styling',\n problem: '<div class=\"my-wrapper\"><div class=\"card\">...</div></div>',\n solution: 'Style the card directly: <div class=\"card my-modifier\">',\n prevention: 'Compose classes instead of wrapping',\n },\n {\n mistake: 'Hardcoding spacing values',\n problem: 'margin: 16px; gap: 12px;',\n solution: 'margin: var(--space-scale-2); gap: var(--space-scale-1-5);',\n prevention: 'Query designsystem://tokens/space for available values',\n },\n {\n mistake: 'Assuming classes are incomplete',\n problem: 'Adding display: flex, border: 1px solid, etc. to classes that already have these',\n solution: \"Trust the design system. Check docs to see what's included.\",\n prevention: 'Default assumption: classes are complete, not partial',\n },\n ],\n },\n resources: {\n description: 'MCP resources for discovering design system capabilities',\n available: [\n {\n resource: 'designsystem://components',\n purpose: 'List all available components',\n },\n {\n resource: 'designsystem://components/{name}',\n purpose: 'Get detailed component documentation',\n },\n {\n resource: 'designsystem://tokens',\n purpose: 'List all token categories',\n },\n {\n resource: 'designsystem://tokens/{category}',\n purpose: 'Get tokens for specific category (color, space, font, etc.)',\n },\n {\n resource: 'designsystem://guides/setup',\n purpose: 'Installation instructions',\n },\n {\n resource: 'designsystem://guides/principles',\n purpose: 'This guide - design system usage principles',\n },\n ],\n },\n};\n\nexport const getPrinciplesGuide = async () => {\n return {\n contents: [\n {\n uri: 'designsystem://guides/principles',\n mimeType: 'application/json',\n text: JSON.stringify(designSystemPrinciples, null, 2),\n },\n ],\n };\n};\n"]}
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { setupGuides } from '../../tools/getSetupGuide/setupGuides.js';
|
|
2
|
+
export const getSetupGuide = async (type) => {
|
|
3
|
+
// Return both guides if no type specified
|
|
4
|
+
if (!type) {
|
|
5
|
+
const allGuides = Object.entries(setupGuides).map(([key, guide]) => ({
|
|
6
|
+
type: key,
|
|
7
|
+
name: guide.name,
|
|
8
|
+
description: guide.description,
|
|
9
|
+
guide,
|
|
10
|
+
}));
|
|
11
|
+
return {
|
|
12
|
+
contents: [
|
|
13
|
+
{
|
|
14
|
+
uri: 'designsystem://guides/setup',
|
|
15
|
+
mimeType: 'application/json',
|
|
16
|
+
text: JSON.stringify({
|
|
17
|
+
message: 'Multiple setup options available. Choose based on user preference or project requirements.',
|
|
18
|
+
options: allGuides,
|
|
19
|
+
}, null, 2),
|
|
20
|
+
},
|
|
21
|
+
],
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
const guideType = type.toLowerCase();
|
|
25
|
+
const guide = setupGuides[guideType];
|
|
26
|
+
if (!guide) {
|
|
27
|
+
return {
|
|
28
|
+
contents: [
|
|
29
|
+
{
|
|
30
|
+
uri: `designsystem://guides/setup/${type}`,
|
|
31
|
+
mimeType: 'application/json',
|
|
32
|
+
text: JSON.stringify({
|
|
33
|
+
error: `Setup guide '${guideType}' not found`,
|
|
34
|
+
available: Object.keys(setupGuides).map((key) => ({
|
|
35
|
+
key,
|
|
36
|
+
name: setupGuides[key].name,
|
|
37
|
+
description: setupGuides[key].description,
|
|
38
|
+
})),
|
|
39
|
+
}, null, 2),
|
|
40
|
+
},
|
|
41
|
+
],
|
|
42
|
+
};
|
|
43
|
+
}
|
|
44
|
+
return {
|
|
45
|
+
contents: [
|
|
46
|
+
{
|
|
47
|
+
uri: `designsystem://guides/setup/${type}`,
|
|
48
|
+
mimeType: 'application/json',
|
|
49
|
+
text: JSON.stringify(guide, null, 2),
|
|
50
|
+
},
|
|
51
|
+
],
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=setup.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"setup.js","sourceRoot":"","sources":["../../../../src/resources/guides/setup.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AAEnE,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,EAAE,IAAa,EAAE,EAAE;IACnD,0CAA0C;IAC1C,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,CAAC;YACnE,IAAI,EAAE,GAAG;YACT,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,WAAW,EAAE,KAAK,CAAC,WAAW;YAC9B,KAAK;SACN,CAAC,CAAC,CAAC;QAEJ,OAAO;YACL,QAAQ,EAAE;gBACR;oBACE,GAAG,EAAE,6BAA6B;oBAClC,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,CAClB;wBACE,OAAO,EAAE,4FAA4F;wBACrG,OAAO,EAAE,SAAS;qBACnB,EACD,IAAI,EACJ,CAAC,CACF;iBACF;aACF;SACF,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;IACrC,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAErC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO;YACL,QAAQ,EAAE;gBACR;oBACE,GAAG,EAAE,+BAA+B,IAAI,EAAE;oBAC1C,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,CAClB;wBACE,KAAK,EAAE,gBAAgB,SAAS,aAAa;wBAC7C,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;4BAChD,GAAG;4BACH,IAAI,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI;4BAC3B,WAAW,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,WAAW;yBAC1C,CAAC,CAAC;qBACJ,EACD,IAAI,EACJ,CAAC,CACF;iBACF;aACF;SACF,CAAC;IACJ,CAAC;IAED,OAAO;QACL,QAAQ,EAAE;YACR;gBACE,GAAG,EAAE,+BAA+B,IAAI,EAAE;gBAC1C,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;aACrC;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { setupGuides } from '@/tools/getSetupGuide/setupGuides.js';\n\nexport const getSetupGuide = async (type?: string) => {\n // Return both guides if no type specified\n if (!type) {\n const allGuides = Object.entries(setupGuides).map(([key, guide]) => ({\n type: key,\n name: guide.name,\n description: guide.description,\n guide,\n }));\n\n return {\n contents: [\n {\n uri: 'designsystem://guides/setup',\n mimeType: 'application/json',\n text: JSON.stringify(\n {\n message: 'Multiple setup options available. Choose based on user preference or project requirements.',\n options: allGuides,\n },\n null,\n 2\n ),\n },\n ],\n };\n }\n\n const guideType = type.toLowerCase();\n const guide = setupGuides[guideType];\n\n if (!guide) {\n return {\n contents: [\n {\n uri: `designsystem://guides/setup/${type}`,\n mimeType: 'application/json',\n text: JSON.stringify(\n {\n error: `Setup guide '${guideType}' not found`,\n available: Object.keys(setupGuides).map((key) => ({\n key,\n name: setupGuides[key].name,\n description: setupGuides[key].description,\n })),\n },\n null,\n 2\n ),\n },\n ],\n };\n }\n\n return {\n contents: [\n {\n uri: `designsystem://guides/setup/${type}`,\n mimeType: 'application/json',\n text: JSON.stringify(guide, null, 2),\n },\n ],\n };\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/resources/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './components/index.js';\nexport * from './tokens/index.js';\nexport * from './guides/index.js';\n"]}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import designTokens from '@triptease/stylesheet/tokens' with { type: 'json' };
|
|
2
|
+
import { buildTokens } from '../../tools/getCSSTokens/utils.js';
|
|
3
|
+
export const getCSSTokens = async (category) => {
|
|
4
|
+
const tokens = buildTokens(designTokens);
|
|
5
|
+
const categories = Object.keys(tokens);
|
|
6
|
+
if (!categories.includes(category)) {
|
|
7
|
+
return {
|
|
8
|
+
contents: [
|
|
9
|
+
{
|
|
10
|
+
uri: `designsystem://tokens/${category}`,
|
|
11
|
+
mimeType: 'application/json',
|
|
12
|
+
text: JSON.stringify({
|
|
13
|
+
error: `Invalid category '${category}'`,
|
|
14
|
+
available: categories,
|
|
15
|
+
}, null, 2),
|
|
16
|
+
},
|
|
17
|
+
],
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
return {
|
|
21
|
+
contents: [
|
|
22
|
+
{
|
|
23
|
+
uri: `designsystem://tokens/${category}`,
|
|
24
|
+
mimeType: 'application/json',
|
|
25
|
+
text: JSON.stringify(tokens[category], null, 2),
|
|
26
|
+
},
|
|
27
|
+
],
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
//# sourceMappingURL=get.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"get.js","sourceRoot":"","sources":["../../../../src/resources/tokens/get.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,EAAE,QAAgB,EAAE,EAAE;IACrD,MAAM,MAAM,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAEvC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QACnC,OAAO;YACL,QAAQ,EAAE;gBACR;oBACE,GAAG,EAAE,yBAAyB,QAAQ,EAAE;oBACxC,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,CAClB;wBACE,KAAK,EAAE,qBAAqB,QAAQ,GAAG;wBACvC,SAAS,EAAE,UAAU;qBACtB,EACD,IAAI,EACJ,CAAC,CACF;iBACF;aACF;SACF,CAAC;IACJ,CAAC;IAED,OAAO;QACL,QAAQ,EAAE;YACR;gBACE,GAAG,EAAE,yBAAyB,QAAQ,EAAE;gBACxC,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;aAChD;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import designTokens from '@triptease/stylesheet/tokens' with { type: 'json' };\nimport { buildTokens } from '@/tools/getCSSTokens/utils.js';\n\nexport const getCSSTokens = async (category: string) => {\n const tokens = buildTokens(designTokens);\n const categories = Object.keys(tokens);\n\n if (!categories.includes(category)) {\n return {\n contents: [\n {\n uri: `designsystem://tokens/${category}`,\n mimeType: 'application/json',\n text: JSON.stringify(\n {\n error: `Invalid category '${category}'`,\n available: categories,\n },\n null,\n 2\n ),\n },\n ],\n };\n }\n\n return {\n contents: [\n {\n uri: `designsystem://tokens/${category}`,\n mimeType: 'application/json',\n text: JSON.stringify(tokens[category], null, 2),\n },\n ],\n };\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/resources/tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { listCSSTokens } from './list.js';\nexport { getCSSTokens } from './get.js';\n"]}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import designTokens from '@triptease/stylesheet/tokens' with { type: 'json' };
|
|
2
|
+
import { buildTokens } from '../../tools/getCSSTokens/utils.js';
|
|
3
|
+
export const listCSSTokens = async () => {
|
|
4
|
+
const tokens = buildTokens(designTokens);
|
|
5
|
+
const categories = Object.keys(tokens);
|
|
6
|
+
const result = {};
|
|
7
|
+
for (const category of categories) {
|
|
8
|
+
const tokenCount = tokens[category].length;
|
|
9
|
+
result[category] = { count: tokenCount };
|
|
10
|
+
}
|
|
11
|
+
return {
|
|
12
|
+
contents: [
|
|
13
|
+
{
|
|
14
|
+
uri: 'designsystem://tokens',
|
|
15
|
+
mimeType: 'application/json',
|
|
16
|
+
text: JSON.stringify(result, null, 2),
|
|
17
|
+
},
|
|
18
|
+
],
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
//# sourceMappingURL=list.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"list.js","sourceRoot":"","sources":["../../../../src/resources/tokens/list.ts"],"names":[],"mappings":"AAAA,OAAO,YAAY,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAU5D,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,IAAI,EAAE;IACtC,MAAM,MAAM,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IACzC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACvC,MAAM,MAAM,GAAe,EAAE,CAAC;IAE9B,KAAK,MAAM,QAAQ,IAAI,UAAU,EAAE,CAAC;QAClC,MAAM,UAAU,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC;QAC3C,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,EAAE,UAAU,EAAE,CAAC;IAC3C,CAAC;IAED,OAAO;QACL,QAAQ,EAAE;YACR;gBACE,GAAG,EAAE,uBAAuB;gBAC5B,QAAQ,EAAE,kBAAkB;gBAC5B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;aACtC;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import designTokens from '@triptease/stylesheet/tokens' with { type: 'json' };\nimport { buildTokens } from '@/tools/getCSSTokens/utils.js';\n\ninterface Summary {\n count: number;\n}\n\ninterface SummaryMap {\n [category: string]: Summary;\n}\n\nexport const listCSSTokens = async () => {\n const tokens = buildTokens(designTokens);\n const categories = Object.keys(tokens);\n const result: SummaryMap = {};\n\n for (const category of categories) {\n const tokenCount = tokens[category].length;\n result[category] = { count: tokenCount };\n }\n\n return {\n contents: [\n {\n uri: 'designsystem://tokens',\n mimeType: 'application/json',\n text: JSON.stringify(result, null, 2),\n },\n ],\n };\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buildCDNUrls.js","sourceRoot":"","sources":["../../../src/utils/buildCDNUrls.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG,CAAC,aAAqB,EAAE,OAAe,EAAE,EAAE;IAC7D,OAAO,0CAA0C,aAAa,IAAI,OAAO,IAAI,aAAa,KAAK,CAAC;AAClG,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"buildCDNUrls.js","sourceRoot":"","sources":["../../../src/utils/buildCDNUrls.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,GAAG,CAAC,aAAqB,EAAE,OAAe,EAAE,EAAE;IAC7D,OAAO,0CAA0C,aAAa,IAAI,OAAO,IAAI,aAAa,KAAK,CAAC;AAClG,CAAC,CAAC;AAEF,MAAM,iBAAiB,GAAG,CAAC,OAAe,EAAE,EAAE,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC","sourcesContent":["const buildCDNUrl = (componentName: string, version: string) => {\n return `https://cdn.design-system.triptease.io/${componentName}/${version}/${componentName}.js`;\n};\n\nconst buildMajorVersion = (version: string) => `${version.split('.')[0]}.x.x`;\n\nexport { buildCDNUrl, buildMajorVersion };\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@triptease/design-system-mcp",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "MCP server for Triptease design system documentation",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/src/index.js",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"@triptease/tt-date-picker": "6.1.2",
|
|
28
28
|
"@triptease/tt-date-range-picker": "6.2.3",
|
|
29
29
|
"@triptease/tt-dialog": "5.1.1",
|
|
30
|
-
"@triptease/tt-highlight": "1.0.
|
|
31
|
-
"@triptease/tt-line-chart": "1.0.
|
|
30
|
+
"@triptease/tt-highlight": "1.0.2",
|
|
31
|
+
"@triptease/tt-line-chart": "1.0.9",
|
|
32
32
|
"zod": "^4.3.6"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|