@triptease/design-system-mcp 1.0.19 → 1.0.21
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/dist/index.js +28985 -0
- package/package.json +20 -13
- package/CHANGELOG.md +0 -192
- package/dist/package.json +0 -44
- package/dist/src/index.d.ts +0 -2
- package/dist/src/index.js +0 -66
- package/dist/src/index.js.map +0 -1
- package/dist/src/manifests/components/entries/badge.d.ts +0 -27
- package/dist/src/manifests/components/entries/badge.js +0 -43
- package/dist/src/manifests/components/entries/badge.js.map +0 -1
- package/dist/src/manifests/components/entries/banner.d.ts +0 -23
- package/dist/src/manifests/components/entries/banner.js +0 -68
- package/dist/src/manifests/components/entries/banner.js.map +0 -1
- package/dist/src/manifests/components/entries/barChart.d.ts +0 -74
- package/dist/src/manifests/components/entries/barChart.js +0 -128
- package/dist/src/manifests/components/entries/barChart.js.map +0 -1
- package/dist/src/manifests/components/entries/button.d.ts +0 -40
- package/dist/src/manifests/components/entries/button.js +0 -59
- package/dist/src/manifests/components/entries/button.js.map +0 -1
- package/dist/src/manifests/components/entries/card.d.ts +0 -25
- package/dist/src/manifests/components/entries/card.js +0 -42
- package/dist/src/manifests/components/entries/card.js.map +0 -1
- package/dist/src/manifests/components/entries/checkbox.d.ts +0 -31
- package/dist/src/manifests/components/entries/checkbox.js +0 -64
- package/dist/src/manifests/components/entries/checkbox.js.map +0 -1
- package/dist/src/manifests/components/entries/combobox.d.ts +0 -65
- package/dist/src/manifests/components/entries/combobox.js +0 -177
- package/dist/src/manifests/components/entries/combobox.js.map +0 -1
- package/dist/src/manifests/components/entries/datePicker.d.ts +0 -35
- package/dist/src/manifests/components/entries/datePicker.js +0 -68
- package/dist/src/manifests/components/entries/datePicker.js.map +0 -1
- package/dist/src/manifests/components/entries/dateRangePicker.d.ts +0 -35
- package/dist/src/manifests/components/entries/dateRangePicker.js +0 -111
- package/dist/src/manifests/components/entries/dateRangePicker.js.map +0 -1
- package/dist/src/manifests/components/entries/dialog.d.ts +0 -39
- package/dist/src/manifests/components/entries/dialog.js +0 -74
- package/dist/src/manifests/components/entries/dialog.js.map +0 -1
- package/dist/src/manifests/components/entries/lineChart.d.ts +0 -87
- package/dist/src/manifests/components/entries/lineChart.js +0 -166
- package/dist/src/manifests/components/entries/lineChart.js.map +0 -1
- package/dist/src/manifests/components/entries/numberinput.d.ts +0 -52
- package/dist/src/manifests/components/entries/numberinput.js +0 -64
- package/dist/src/manifests/components/entries/numberinput.js.map +0 -1
- package/dist/src/manifests/components/entries/radio.d.ts +0 -31
- package/dist/src/manifests/components/entries/radio.js +0 -50
- package/dist/src/manifests/components/entries/radio.js.map +0 -1
- package/dist/src/manifests/components/entries/select.d.ts +0 -16
- package/dist/src/manifests/components/entries/select.js +0 -23
- package/dist/src/manifests/components/entries/select.js.map +0 -1
- package/dist/src/manifests/components/entries/statistic.d.ts +0 -21
- package/dist/src/manifests/components/entries/statistic.js +0 -69
- package/dist/src/manifests/components/entries/statistic.js.map +0 -1
- package/dist/src/manifests/components/entries/table.d.ts +0 -16
- package/dist/src/manifests/components/entries/table.js +0 -43
- package/dist/src/manifests/components/entries/table.js.map +0 -1
- package/dist/src/manifests/components/entries/textarea.d.ts +0 -40
- package/dist/src/manifests/components/entries/textarea.js +0 -54
- package/dist/src/manifests/components/entries/textarea.js.map +0 -1
- package/dist/src/manifests/components/entries/textinput.d.ts +0 -40
- package/dist/src/manifests/components/entries/textinput.js +0 -53
- package/dist/src/manifests/components/entries/textinput.js.map +0 -1
- package/dist/src/manifests/components/entries/toggle.d.ts +0 -23
- package/dist/src/manifests/components/entries/toggle.js +0 -30
- package/dist/src/manifests/components/entries/toggle.js.map +0 -1
- package/dist/src/manifests/components/entries/typography.d.ts +0 -23
- package/dist/src/manifests/components/entries/typography.js +0 -32
- package/dist/src/manifests/components/entries/typography.js.map +0 -1
- package/dist/src/manifests/components/index.d.ts +0 -2
- package/dist/src/manifests/components/index.js +0 -43
- package/dist/src/manifests/components/index.js.map +0 -1
- package/dist/src/manifests/components/types.d.ts +0 -57
- package/dist/src/manifests/components/types.js +0 -2
- package/dist/src/manifests/components/types.js.map +0 -1
- package/dist/src/resources/components/get.d.ts +0 -7
- package/dist/src/resources/components/get.js +0 -29
- package/dist/src/resources/components/get.js.map +0 -1
- package/dist/src/resources/components/index.d.ts +0 -2
- package/dist/src/resources/components/index.js +0 -3
- package/dist/src/resources/components/index.js.map +0 -1
- package/dist/src/resources/components/list.d.ts +0 -7
- package/dist/src/resources/components/list.js +0 -19
- package/dist/src/resources/components/list.js.map +0 -1
- package/dist/src/resources/guides/index.d.ts +0 -2
- package/dist/src/resources/guides/index.js +0 -3
- package/dist/src/resources/guides/index.js.map +0 -1
- package/dist/src/resources/guides/principles.d.ts +0 -60
- package/dist/src/resources/guides/principles.js +0 -158
- package/dist/src/resources/guides/principles.js.map +0 -1
- package/dist/src/resources/guides/setup.d.ts +0 -7
- package/dist/src/resources/guides/setup.js +0 -54
- package/dist/src/resources/guides/setup.js.map +0 -1
- package/dist/src/resources/index.d.ts +0 -3
- package/dist/src/resources/index.js +0 -4
- package/dist/src/resources/index.js.map +0 -1
- package/dist/src/resources/tokens/get.d.ts +0 -7
- package/dist/src/resources/tokens/get.js +0 -30
- package/dist/src/resources/tokens/get.js.map +0 -1
- package/dist/src/resources/tokens/index.d.ts +0 -2
- package/dist/src/resources/tokens/index.js +0 -3
- package/dist/src/resources/tokens/index.js.map +0 -1
- package/dist/src/resources/tokens/list.d.ts +0 -7
- package/dist/src/resources/tokens/list.js +0 -21
- package/dist/src/resources/tokens/list.js.map +0 -1
- package/dist/src/tools/getCSSTokens/handler.d.ts +0 -6
- package/dist/src/tools/getCSSTokens/handler.js +0 -29
- package/dist/src/tools/getCSSTokens/handler.js.map +0 -1
- package/dist/src/tools/getCSSTokens/index.d.ts +0 -12
- package/dist/src/tools/getCSSTokens/index.js +0 -14
- package/dist/src/tools/getCSSTokens/index.js.map +0 -1
- package/dist/src/tools/getCSSTokens/utils.d.ts +0 -5
- package/dist/src/tools/getCSSTokens/utils.js +0 -25
- package/dist/src/tools/getCSSTokens/utils.js.map +0 -1
- package/dist/src/tools/getComponentDocs/handler.d.ts +0 -6
- package/dist/src/tools/getComponentDocs/handler.js +0 -27
- package/dist/src/tools/getComponentDocs/handler.js.map +0 -1
- package/dist/src/tools/getComponentDocs/index.d.ts +0 -12
- package/dist/src/tools/getComponentDocs/index.js +0 -14
- package/dist/src/tools/getComponentDocs/index.js.map +0 -1
- package/dist/src/tools/getSetupGuide/handler.d.ts +0 -6
- package/dist/src/tools/getSetupGuide/handler.js +0 -50
- package/dist/src/tools/getSetupGuide/handler.js.map +0 -1
- package/dist/src/tools/getSetupGuide/index.d.ts +0 -12
- package/dist/src/tools/getSetupGuide/index.js +0 -17
- package/dist/src/tools/getSetupGuide/index.js.map +0 -1
- package/dist/src/tools/getSetupGuide/setupGuides.d.ts +0 -12
- package/dist/src/tools/getSetupGuide/setupGuides.js +0 -49
- package/dist/src/tools/getSetupGuide/setupGuides.js.map +0 -1
- package/dist/src/tools/listCSSTokens/handler.d.ts +0 -3
- package/dist/src/tools/listCSSTokens/handler.js +0 -20
- package/dist/src/tools/listCSSTokens/handler.js.map +0 -1
- package/dist/src/tools/listCSSTokens/index.d.ts +0 -8
- package/dist/src/tools/listCSSTokens/index.js +0 -10
- package/dist/src/tools/listCSSTokens/index.js.map +0 -1
- package/dist/src/tools/listComponents/handler.d.ts +0 -3
- package/dist/src/tools/listComponents/handler.js +0 -18
- package/dist/src/tools/listComponents/handler.js.map +0 -1
- package/dist/src/tools/listComponents/index.d.ts +0 -9
- package/dist/src/tools/listComponents/index.js +0 -11
- package/dist/src/tools/listComponents/index.js.map +0 -1
- package/dist/src/utils/buildCDNUrls.d.ts +0 -3
- package/dist/src/utils/buildCDNUrls.js +0 -6
- package/dist/src/utils/buildCDNUrls.js.map +0 -1
- package/src/index.ts +0 -127
- package/src/manifests/components/entries/badge.ts +0 -45
- package/src/manifests/components/entries/banner.ts +0 -69
- package/src/manifests/components/entries/barChart.ts +0 -135
- package/src/manifests/components/entries/button.ts +0 -61
- package/src/manifests/components/entries/card.ts +0 -43
- package/src/manifests/components/entries/checkbox.ts +0 -68
- package/src/manifests/components/entries/combobox.ts +0 -185
- package/src/manifests/components/entries/datePicker.ts +0 -74
- package/src/manifests/components/entries/dateRangePicker.ts +0 -119
- package/src/manifests/components/entries/dialog.ts +0 -78
- package/src/manifests/components/entries/lineChart.ts +0 -177
- package/src/manifests/components/entries/numberinput.ts +0 -66
- package/src/manifests/components/entries/radio.ts +0 -53
- package/src/manifests/components/entries/select.ts +0 -24
- package/src/manifests/components/entries/statistic.ts +0 -72
- package/src/manifests/components/entries/table.ts +0 -44
- package/src/manifests/components/entries/textarea.ts +0 -56
- package/src/manifests/components/entries/textinput.ts +0 -55
- package/src/manifests/components/entries/toggle.ts +0 -31
- package/src/manifests/components/entries/typography.ts +0 -33
- package/src/manifests/components/index.ts +0 -45
- package/src/manifests/components/types.ts +0 -65
- package/src/resources/components/get.test.ts +0 -39
- package/src/resources/components/get.ts +0 -35
- package/src/resources/components/index.ts +0 -2
- package/src/resources/components/list.test.ts +0 -40
- package/src/resources/components/list.ts +0 -20
- package/src/resources/guides/index.ts +0 -2
- package/src/resources/guides/principles.ts +0 -160
- package/src/resources/guides/setup.test.ts +0 -72
- package/src/resources/guides/setup.ts +0 -66
- package/src/resources/index.ts +0 -3
- package/src/resources/tokens/get.test.ts +0 -41
- package/src/resources/tokens/get.ts +0 -36
- package/src/resources/tokens/index.ts +0 -2
- package/src/resources/tokens/list.test.ts +0 -42
- package/src/resources/tokens/list.ts +0 -31
- package/src/tools/getCSSTokens/__snapshots__/handler.test.ts.snap +0 -78
- package/src/tools/getCSSTokens/handler.test.ts +0 -39
- package/src/tools/getCSSTokens/handler.ts +0 -36
- package/src/tools/getCSSTokens/index.ts +0 -15
- package/src/tools/getCSSTokens/utils.ts +0 -31
- package/src/tools/getComponentDocs/__snapshots__/handler.test.ts.snap +0 -23
- package/src/tools/getComponentDocs/handler.test.ts +0 -14
- package/src/tools/getComponentDocs/handler.ts +0 -34
- package/src/tools/getComponentDocs/index.ts +0 -15
- package/src/tools/getSetupGuide/__snapshots__/handler.test.ts.snap +0 -34
- package/src/tools/getSetupGuide/handler.test.ts +0 -20
- package/src/tools/getSetupGuide/handler.ts +0 -59
- package/src/tools/getSetupGuide/index.ts +0 -20
- package/src/tools/getSetupGuide/setupGuides.ts +0 -62
- package/src/tools/listCSSTokens/__snapshots__/handler.test.ts.snap +0 -12
- package/src/tools/listCSSTokens/handler.test.ts +0 -9
- package/src/tools/listCSSTokens/handler.ts +0 -32
- package/src/tools/listCSSTokens/index.ts +0 -12
- package/src/tools/listComponents/__snapshots__/handler.test.ts.snap +0 -12
- package/src/tools/listComponents/handler.test.ts +0 -9
- package/src/tools/listComponents/handler.ts +0 -20
- package/src/tools/listComponents/index.ts +0 -12
- package/src/utils/buildCDNUrls.ts +0 -7
- package/tsconfig.json +0 -12
- package/vitest.config.ts +0 -6
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { setupGuides } from './setupGuides.js';
|
|
2
|
-
export default (args) => {
|
|
3
|
-
if (!args.type) {
|
|
4
|
-
const allGuides = Object.entries(setupGuides).map(([key, guide]) => ({
|
|
5
|
-
type: key,
|
|
6
|
-
name: guide.name,
|
|
7
|
-
description: guide.description,
|
|
8
|
-
guide,
|
|
9
|
-
}));
|
|
10
|
-
return {
|
|
11
|
-
content: [
|
|
12
|
-
{
|
|
13
|
-
type: 'text',
|
|
14
|
-
text: JSON.stringify({
|
|
15
|
-
message: 'Multiple setup options available. Choose based on user preference or project requirements.',
|
|
16
|
-
options: allGuides,
|
|
17
|
-
}),
|
|
18
|
-
},
|
|
19
|
-
],
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
|
-
const guideType = args.type.toLowerCase();
|
|
23
|
-
const guide = setupGuides[guideType];
|
|
24
|
-
if (!guide) {
|
|
25
|
-
return {
|
|
26
|
-
content: [
|
|
27
|
-
{
|
|
28
|
-
type: 'text',
|
|
29
|
-
text: JSON.stringify({
|
|
30
|
-
error: `Setup guide '${guideType}' not found`,
|
|
31
|
-
available: Object.keys(setupGuides).map((key) => ({
|
|
32
|
-
key,
|
|
33
|
-
name: setupGuides[key].name,
|
|
34
|
-
description: setupGuides[key].description,
|
|
35
|
-
})),
|
|
36
|
-
}),
|
|
37
|
-
},
|
|
38
|
-
],
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
return {
|
|
42
|
-
content: [
|
|
43
|
-
{
|
|
44
|
-
type: 'text',
|
|
45
|
-
text: JSON.stringify(guide, null, 2),
|
|
46
|
-
},
|
|
47
|
-
],
|
|
48
|
-
};
|
|
49
|
-
};
|
|
50
|
-
//# sourceMappingURL=handler.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"handler.js","sourceRoot":"","sources":["../../../../src/tools/getSetupGuide/handler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,eAAe,CAAC,IAAuB,EAAkB,EAAE;IACzD,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;QACf,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,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;wBACnB,OAAO,EAAE,4FAA4F;wBACrG,OAAO,EAAE,SAAS;qBACnB,CAAC;iBACH;aACF;SACF,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;IAC1C,MAAM,KAAK,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;IAErC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO;YACL,OAAO,EAAE;gBACP;oBACE,IAAI,EAAE,MAAM;oBACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC;wBACnB,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,CAAC;iBACH;aACF;SACF,CAAC;IACJ,CAAC;IAED,OAAO;QACL,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;aACrC;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { setupGuides } from './setupGuides.js';\nimport { CallToolResult } from '@modelcontextprotocol/sdk/types.js';\n\nexport interface GetSetupGuideArgs {\n type?: string;\n}\n\nexport default (args: GetSetupGuideArgs): CallToolResult => {\n if (!args.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 content: [\n {\n type: 'text',\n text: JSON.stringify({\n message: 'Multiple setup options available. Choose based on user preference or project requirements.',\n options: allGuides,\n }),\n },\n ],\n };\n }\n\n const guideType = args.type.toLowerCase();\n const guide = setupGuides[guideType];\n\n if (!guide) {\n return {\n content: [\n {\n type: 'text',\n text: JSON.stringify({\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 },\n ],\n };\n }\n\n return {\n content: [\n {\n type: 'text',\n text: JSON.stringify(guide, null, 2),\n },\n ],\n };\n};\n"]}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
declare const toolDefinition: {
|
|
3
|
-
name: string;
|
|
4
|
-
config: {
|
|
5
|
-
description: string;
|
|
6
|
-
inputSchema: {
|
|
7
|
-
type: z.ZodOptional<z.ZodUnion<readonly [z.ZodLiteral<"npm">, z.ZodLiteral<"cdn">]>>;
|
|
8
|
-
};
|
|
9
|
-
};
|
|
10
|
-
handler: (args: import("./handler.js").GetSetupGuideArgs) => import("@modelcontextprotocol/sdk/types.js").CallToolResult;
|
|
11
|
-
};
|
|
12
|
-
export default toolDefinition;
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { z } from 'zod';
|
|
2
|
-
import handler from './handler.js';
|
|
3
|
-
const toolDefinition = {
|
|
4
|
-
name: 'get_setup_guide',
|
|
5
|
-
config: {
|
|
6
|
-
description: 'Get setup and installation instructions for integrating the design system into your project',
|
|
7
|
-
inputSchema: {
|
|
8
|
-
type: z
|
|
9
|
-
.union([z.literal('npm'), z.literal('cdn')])
|
|
10
|
-
.optional()
|
|
11
|
-
.describe('Optional: npm for npm/yarn/bun installation, cdn for CDN link. If omitted, returns both options so you can present them to the user.'),
|
|
12
|
-
},
|
|
13
|
-
},
|
|
14
|
-
handler: handler,
|
|
15
|
-
};
|
|
16
|
-
export default toolDefinition;
|
|
17
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tools/getSetupGuide/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,OAAO,MAAM,cAAc,CAAC;AAEnC,MAAM,cAAc,GAAG;IACrB,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE;QACN,WAAW,EAAE,6FAA6F;QAC1G,WAAW,EAAE;YACX,IAAI,EAAE,CAAC;iBACJ,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;iBAC3C,QAAQ,EAAE;iBACV,QAAQ,CACP,sIAAsI,CACvI;SACJ;KACF;IACD,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import { z } from 'zod';\nimport handler from './handler.js';\n\nconst toolDefinition = {\n name: 'get_setup_guide',\n config: {\n description: 'Get setup and installation instructions for integrating the design system into your project',\n inputSchema: {\n type: z\n .union([z.literal('npm'), z.literal('cdn')])\n .optional()\n .describe(\n 'Optional: npm for npm/yarn/bun installation, cdn for CDN link. If omitted, returns both options so you can present them to the user.'\n ),\n },\n },\n handler: handler,\n};\n\nexport default toolDefinition;\n"]}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export interface SetupGuide {
|
|
2
|
-
name: string;
|
|
3
|
-
description: string;
|
|
4
|
-
steps: Array<{
|
|
5
|
-
title: string;
|
|
6
|
-
description?: string;
|
|
7
|
-
code?: string;
|
|
8
|
-
language?: string;
|
|
9
|
-
}>;
|
|
10
|
-
notes?: string[];
|
|
11
|
-
}
|
|
12
|
-
export declare const setupGuides: Record<string, SetupGuide>;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import packageJson from '../../../package.json' with { type: 'json' };
|
|
2
|
-
const stylesheetVersion = packageJson.dependencies['@triptease/stylesheet'];
|
|
3
|
-
export const setupGuides = {
|
|
4
|
-
npm: {
|
|
5
|
-
name: 'NPM Stylesheet Setup',
|
|
6
|
-
description: 'Setup instructions for using the stylesheet package via npm.',
|
|
7
|
-
steps: [
|
|
8
|
-
{
|
|
9
|
-
title: 'Install the stylesheet package',
|
|
10
|
-
description: 'Choose your package manager:',
|
|
11
|
-
code: `# NPM
|
|
12
|
-
npm install @triptease/stylesheet
|
|
13
|
-
|
|
14
|
-
# Yarn
|
|
15
|
-
yarn add @triptease/stylesheet
|
|
16
|
-
|
|
17
|
-
# Bun
|
|
18
|
-
bun add @triptease/stylesheet`,
|
|
19
|
-
language: 'bash',
|
|
20
|
-
},
|
|
21
|
-
{
|
|
22
|
-
title: 'Import the stylesheet',
|
|
23
|
-
description: 'Add this import to your application entry point:',
|
|
24
|
-
code: `import '@triptease/stylesheet';`,
|
|
25
|
-
language: 'typescript',
|
|
26
|
-
},
|
|
27
|
-
],
|
|
28
|
-
notes: [`Current version: @triptease/stylesheet@${stylesheetVersion}`],
|
|
29
|
-
},
|
|
30
|
-
cdn: {
|
|
31
|
-
name: 'CDN Stylesheet Setup',
|
|
32
|
-
description: 'Setup instructions for using the stylesheet via CDN.',
|
|
33
|
-
steps: [
|
|
34
|
-
{
|
|
35
|
-
title: 'Add stylesheet link to HTML',
|
|
36
|
-
description: 'Include this in the <head> of your HTML document:',
|
|
37
|
-
code: `<head>
|
|
38
|
-
<!-- Specific version (recommended) -->
|
|
39
|
-
<link rel="stylesheet" href="https://cdn.design-system.triptease.io/${stylesheetVersion}/triptease.css">
|
|
40
|
-
|
|
41
|
-
<!-- Or, latest version (dangerous - breaking changes may occur) -->
|
|
42
|
-
<link rel="stylesheet" href="https://cdn.design-system.triptease.io/triptease.css">
|
|
43
|
-
</head>`,
|
|
44
|
-
language: 'html',
|
|
45
|
-
},
|
|
46
|
-
],
|
|
47
|
-
},
|
|
48
|
-
};
|
|
49
|
-
//# sourceMappingURL=setupGuides.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"setupGuides.js","sourceRoot":"","sources":["../../../../src/tools/getSetupGuide/setupGuides.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,mBAAmB,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAElE,MAAM,iBAAiB,GAAG,WAAW,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;AAc5E,MAAM,CAAC,MAAM,WAAW,GAA+B;IACrD,GAAG,EAAE;QACH,IAAI,EAAE,sBAAsB;QAC5B,WAAW,EAAE,8DAA8D;QAC3E,KAAK,EAAE;YACL;gBACE,KAAK,EAAE,gCAAgC;gBACvC,WAAW,EAAE,8BAA8B;gBAC3C,IAAI,EAAE;;;;;;;8BAOgB;gBACtB,QAAQ,EAAE,MAAM;aACjB;YACD;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,WAAW,EAAE,kDAAkD;gBAC/D,IAAI,EAAE,iCAAiC;gBACvC,QAAQ,EAAE,YAAY;aACvB;SACF;QACD,KAAK,EAAE,CAAC,0CAA0C,iBAAiB,EAAE,CAAC;KACvE;IACD,GAAG,EAAE;QACH,IAAI,EAAE,sBAAsB;QAC5B,WAAW,EAAE,sDAAsD;QACnE,KAAK,EAAE;YACL;gBACE,KAAK,EAAE,6BAA6B;gBACpC,WAAW,EAAE,mDAAmD;gBAChE,IAAI,EAAE;;0EAE4D,iBAAiB;;;;QAInF;gBACA,QAAQ,EAAE,MAAM;aACjB;SACF;KACF;CACF,CAAC","sourcesContent":["import packageJson from '@/../package.json' with { type: 'json' };\n\nconst stylesheetVersion = packageJson.dependencies['@triptease/stylesheet'];\n\nexport interface SetupGuide {\n name: string;\n description: string;\n steps: Array<{\n title: string;\n description?: string;\n code?: string;\n language?: string;\n }>;\n notes?: string[];\n}\n\nexport const setupGuides: Record<string, SetupGuide> = {\n npm: {\n name: 'NPM Stylesheet Setup',\n description: 'Setup instructions for using the stylesheet package via npm.',\n steps: [\n {\n title: 'Install the stylesheet package',\n description: 'Choose your package manager:',\n code: `# NPM\nnpm install @triptease/stylesheet\n\n# Yarn\nyarn add @triptease/stylesheet\n\n# Bun\nbun add @triptease/stylesheet`,\n language: 'bash',\n },\n {\n title: 'Import the stylesheet',\n description: 'Add this import to your application entry point:',\n code: `import '@triptease/stylesheet';`,\n language: 'typescript',\n },\n ],\n notes: [`Current version: @triptease/stylesheet@${stylesheetVersion}`],\n },\n cdn: {\n name: 'CDN Stylesheet Setup',\n description: 'Setup instructions for using the stylesheet via CDN.',\n steps: [\n {\n title: 'Add stylesheet link to HTML',\n description: 'Include this in the <head> of your HTML document:',\n code: `<head>\n <!-- Specific version (recommended) -->\n <link rel=\"stylesheet\" href=\"https://cdn.design-system.triptease.io/${stylesheetVersion}/triptease.css\">\n\n <!-- Or, latest version (dangerous - breaking changes may occur) -->\n <link rel=\"stylesheet\" href=\"https://cdn.design-system.triptease.io/triptease.css\">\n</head>`,\n language: 'html',\n },\n ],\n },\n};\n"]}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import designTokens from '@triptease/stylesheet/tokens' with { type: 'json' };
|
|
2
|
-
import { buildTokens } from '../../tools/getCSSTokens/utils.js';
|
|
3
|
-
export default () => {
|
|
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
|
-
content: [
|
|
13
|
-
{
|
|
14
|
-
type: 'text',
|
|
15
|
-
text: JSON.stringify(result),
|
|
16
|
-
},
|
|
17
|
-
],
|
|
18
|
-
};
|
|
19
|
-
};
|
|
20
|
-
//# sourceMappingURL=handler.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"handler.js","sourceRoot":"","sources":["../../../../src/tools/listCSSTokens/handler.ts"],"names":[],"mappings":"AACA,OAAO,YAAY,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAC;AAU5D,eAAe,GAAmB,EAAE;IAClC,MAAM,MAAM,GAAG,WAAW,CAAC,YAAY,CAAC,CAAC;IAEzC,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,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC;aAC7B;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';\nimport 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 default (): CallToolResult => {\n const tokens = buildTokens(designTokens);\n\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 content: [\n {\n type: 'text',\n text: JSON.stringify(result),\n },\n ],\n };\n};\n"]}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import handler from './handler.js';
|
|
2
|
-
const toolDefinition = {
|
|
3
|
-
name: 'list_css_tokens',
|
|
4
|
-
config: {
|
|
5
|
-
description: 'Returns a summary of all available CSS tokens with a count of how many tokens exist in each category. Category names are used when using the get_css_tokens tool.',
|
|
6
|
-
},
|
|
7
|
-
handler: handler,
|
|
8
|
-
};
|
|
9
|
-
export default toolDefinition;
|
|
10
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tools/listCSSTokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,cAAc,CAAC;AAEnC,MAAM,cAAc,GAAG;IACrB,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE;QACN,WAAW,EACT,mKAAmK;KACtK;IACD,OAAO,EAAE,OAAO;CACjB,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import handler from './handler.js';\n\nconst toolDefinition = {\n name: 'list_css_tokens',\n config: {\n description:\n 'Returns a summary of all available CSS tokens with a count of how many tokens exist in each category. Category names are used when using the get_css_tokens tool.',\n },\n handler: handler,\n};\n\nexport default toolDefinition;\n"]}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { componentManifest } from '../../manifests/components/index.js';
|
|
2
|
-
export default () => {
|
|
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
|
-
content: [
|
|
11
|
-
{
|
|
12
|
-
type: 'text',
|
|
13
|
-
text: JSON.stringify({ components }),
|
|
14
|
-
},
|
|
15
|
-
],
|
|
16
|
-
};
|
|
17
|
-
};
|
|
18
|
-
//# sourceMappingURL=handler.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"handler.js","sourceRoot":"","sources":["../../../../src/tools/listComponents/handler.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpE,eAAe,GAAmB,EAAE;IAClC,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,OAAO,EAAE;YACP;gBACE,IAAI,EAAE,MAAM;gBACZ,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EAAE,UAAU,EAAE,CAAC;aACrC;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { CallToolResult } from '@modelcontextprotocol/sdk/types.js';\nimport { componentManifest } from '@/manifests/components/index.js';\n\nexport default (): CallToolResult => {\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 content: [\n {\n type: 'text',\n text: JSON.stringify({ components }),\n },\n ],\n };\n};\n"]}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import handler from './handler.js';
|
|
2
|
-
const toolDefinition = {
|
|
3
|
-
name: 'list_components',
|
|
4
|
-
config: {
|
|
5
|
-
description: 'List all available design system componentManifest',
|
|
6
|
-
inputSchema: {},
|
|
7
|
-
},
|
|
8
|
-
handler,
|
|
9
|
-
};
|
|
10
|
-
export default toolDefinition;
|
|
11
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/tools/listComponents/index.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,cAAc,CAAC;AAEnC,MAAM,cAAc,GAAG;IACrB,IAAI,EAAE,iBAAiB;IACvB,MAAM,EAAE;QACN,WAAW,EAAE,oDAAoD;QACjE,WAAW,EAAE,EAAE;KAChB;IACD,OAAO;CACR,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import handler from './handler.js';\n\nconst toolDefinition = {\n name: 'list_components',\n config: {\n description: 'List all available design system componentManifest',\n inputSchema: {},\n },\n handler,\n};\n\nexport default toolDefinition;\n"]}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
const buildCDNUrl = (componentName, version) => {
|
|
2
|
-
return `https://cdn.design-system.triptease.io/${componentName}/${version}/${componentName}.js`;
|
|
3
|
-
};
|
|
4
|
-
const buildMajorVersion = (version) => `${version.split('.')[0]}.x.x`;
|
|
5
|
-
export { buildCDNUrl, buildMajorVersion };
|
|
6
|
-
//# sourceMappingURL=buildCDNUrls.js.map
|
|
@@ -1 +0,0 @@
|
|
|
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/src/index.ts
DELETED
|
@@ -1,127 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
import { McpServer, ResourceTemplate } from '@modelcontextprotocol/sdk/server/mcp.js';
|
|
3
|
-
import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
|
|
4
|
-
import packageJson from '@/../package.json' with { type: 'json' };
|
|
5
|
-
|
|
6
|
-
import {
|
|
7
|
-
listComponents,
|
|
8
|
-
getComponentDocs,
|
|
9
|
-
listCSSTokens,
|
|
10
|
-
getCSSTokens,
|
|
11
|
-
getSetupGuide,
|
|
12
|
-
getPrinciplesGuide,
|
|
13
|
-
} from '@/resources/index.js';
|
|
14
|
-
|
|
15
|
-
// Initialize MCP server
|
|
16
|
-
const server = new McpServer(
|
|
17
|
-
{
|
|
18
|
-
name: 'Triptease Design System MCP Server',
|
|
19
|
-
version: packageJson.version,
|
|
20
|
-
description: packageJson.description,
|
|
21
|
-
},
|
|
22
|
-
{
|
|
23
|
-
capabilities: {
|
|
24
|
-
resources: {},
|
|
25
|
-
tools: {},
|
|
26
|
-
},
|
|
27
|
-
}
|
|
28
|
-
);
|
|
29
|
-
|
|
30
|
-
// Register resources
|
|
31
|
-
server.registerResource(
|
|
32
|
-
'list_components',
|
|
33
|
-
'designsystem://components',
|
|
34
|
-
{
|
|
35
|
-
description: 'List all available design system components',
|
|
36
|
-
mimeType: 'application/json',
|
|
37
|
-
},
|
|
38
|
-
listComponents
|
|
39
|
-
);
|
|
40
|
-
|
|
41
|
-
server.registerResource(
|
|
42
|
-
'get_component_docs',
|
|
43
|
-
new ResourceTemplate('designsystem://components/{name}', { list: undefined }),
|
|
44
|
-
{
|
|
45
|
-
description: 'Get documentation for a specific component',
|
|
46
|
-
mimeType: 'application/json',
|
|
47
|
-
},
|
|
48
|
-
async (_uri, { name }) => {
|
|
49
|
-
return getComponentDocs(name as string);
|
|
50
|
-
}
|
|
51
|
-
);
|
|
52
|
-
|
|
53
|
-
server.registerResource(
|
|
54
|
-
'list_css_tokens',
|
|
55
|
-
'designsystem://tokens',
|
|
56
|
-
{
|
|
57
|
-
description: 'List all CSS token categories with counts',
|
|
58
|
-
mimeType: 'application/json',
|
|
59
|
-
},
|
|
60
|
-
listCSSTokens
|
|
61
|
-
);
|
|
62
|
-
|
|
63
|
-
server.registerResource(
|
|
64
|
-
'get_css_tokens',
|
|
65
|
-
new ResourceTemplate('designsystem://tokens/{category}', { list: undefined }),
|
|
66
|
-
{
|
|
67
|
-
description: 'Get CSS tokens for a specific category',
|
|
68
|
-
mimeType: 'application/json',
|
|
69
|
-
},
|
|
70
|
-
async (_uri, { category }) => {
|
|
71
|
-
return getCSSTokens(category as string);
|
|
72
|
-
}
|
|
73
|
-
);
|
|
74
|
-
|
|
75
|
-
server.registerResource(
|
|
76
|
-
'setup_guide_all',
|
|
77
|
-
'designsystem://guides/setup',
|
|
78
|
-
{
|
|
79
|
-
description: 'Get all setup and installation instructions',
|
|
80
|
-
mimeType: 'application/json',
|
|
81
|
-
},
|
|
82
|
-
async () => getSetupGuide()
|
|
83
|
-
);
|
|
84
|
-
|
|
85
|
-
server.registerResource(
|
|
86
|
-
'setup_guide_npm',
|
|
87
|
-
'designsystem://guides/setup/npm',
|
|
88
|
-
{
|
|
89
|
-
description: 'Get NPM setup and installation instructions',
|
|
90
|
-
mimeType: 'application/json',
|
|
91
|
-
},
|
|
92
|
-
async () => getSetupGuide('npm')
|
|
93
|
-
);
|
|
94
|
-
|
|
95
|
-
server.registerResource(
|
|
96
|
-
'setup_guide_cdn',
|
|
97
|
-
'designsystem://guides/setup/cdn',
|
|
98
|
-
{
|
|
99
|
-
description: 'Get CDN setup and installation instructions',
|
|
100
|
-
mimeType: 'application/json',
|
|
101
|
-
},
|
|
102
|
-
async () => getSetupGuide('cdn')
|
|
103
|
-
);
|
|
104
|
-
|
|
105
|
-
server.registerResource(
|
|
106
|
-
'principles_guide',
|
|
107
|
-
'designsystem://guides/principles',
|
|
108
|
-
{
|
|
109
|
-
description: 'Get design system usage principles and best practices',
|
|
110
|
-
mimeType: 'application/json',
|
|
111
|
-
},
|
|
112
|
-
getPrinciplesGuide
|
|
113
|
-
);
|
|
114
|
-
|
|
115
|
-
// Start the server
|
|
116
|
-
async function main() {
|
|
117
|
-
const transport = new StdioServerTransport();
|
|
118
|
-
await server.connect(transport);
|
|
119
|
-
console.info(`[${packageJson.name}]: Server started`);
|
|
120
|
-
console.info(`[${packageJson.name}]: Current version: ${packageJson.version}`);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
main().catch((error) => {
|
|
124
|
-
const errorMessage = error instanceof Error ? error.message : String(error);
|
|
125
|
-
console.error(errorMessage);
|
|
126
|
-
process.exit(1);
|
|
127
|
-
});
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { ComponentManifest } from '@/manifests/components/types.js';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
badge: {
|
|
5
|
-
name: 'Badge',
|
|
6
|
-
description: 'Status indicator or label badge for highlighting small pieces of information',
|
|
7
|
-
element: 'span',
|
|
8
|
-
usageGuidance: {
|
|
9
|
-
whenToUse: [
|
|
10
|
-
'Display notification counts or unread items',
|
|
11
|
-
'Show status (new, updated, beta)',
|
|
12
|
-
'Label or categorize content',
|
|
13
|
-
'Highlight key metrics or data points',
|
|
14
|
-
],
|
|
15
|
-
avoid: [
|
|
16
|
-
'For interactive elements (use buttons instead)',
|
|
17
|
-
'As primary navigation (consider tabs or links)',
|
|
18
|
-
'For lengthy text (keep content brief)',
|
|
19
|
-
],
|
|
20
|
-
},
|
|
21
|
-
classes: {
|
|
22
|
-
badge: 'Base badge class (required)',
|
|
23
|
-
},
|
|
24
|
-
dataAttributes: {
|
|
25
|
-
'data-theme': {
|
|
26
|
-
type: 'enum',
|
|
27
|
-
values: ['primary', 'success', 'danger', 'warning', 'info', 'subtle'],
|
|
28
|
-
description:
|
|
29
|
-
'Badge color theme with semantic meaning. Use success for positive states (active, completed), danger for errors or destructive actions, warning for caution, info for neutral information, subtle for de-emphasized content.',
|
|
30
|
-
},
|
|
31
|
-
},
|
|
32
|
-
examples: [
|
|
33
|
-
{
|
|
34
|
-
title: 'Status badges',
|
|
35
|
-
description: 'Use semantic themes to indicate status or state',
|
|
36
|
-
code: `<div>
|
|
37
|
-
<span class="badge" data-theme="success">Active</span>
|
|
38
|
-
<span class="badge" data-theme="danger">Failed</span>
|
|
39
|
-
<span class="badge" data-theme="warning">Pending</span>
|
|
40
|
-
<span class="badge" data-theme="info">Draft</span>
|
|
41
|
-
</div>`,
|
|
42
|
-
},
|
|
43
|
-
],
|
|
44
|
-
},
|
|
45
|
-
} satisfies ComponentManifest;
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import { ComponentManifest } from '@/manifests/components/types.js';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
banner: {
|
|
5
|
-
name: 'Banner',
|
|
6
|
-
description: 'Banners prominently display information to users and sometimes prompt them to take action.',
|
|
7
|
-
element: 'div',
|
|
8
|
-
usageGuidance: {
|
|
9
|
-
whenToUse: [
|
|
10
|
-
"To display information that requires the users' immediate attention.",
|
|
11
|
-
'To capture the users attention and prompt them to take action.',
|
|
12
|
-
],
|
|
13
|
-
avoid: [
|
|
14
|
-
"To display non-important information that does not require the users' immediate attention.",
|
|
15
|
-
'To advertise new features, services or updates.',
|
|
16
|
-
'To display form validation errors (place an error message beneath, or as close as is possible to, the input instead).',
|
|
17
|
-
"To display lengthy information (consider a dialog or put the information on a separate page and use a banner to draw the users' attention to it instead).'",
|
|
18
|
-
],
|
|
19
|
-
},
|
|
20
|
-
dataAttributes: {
|
|
21
|
-
'data-theme': {
|
|
22
|
-
type: 'enum',
|
|
23
|
-
values: ['alert', 'warning'],
|
|
24
|
-
description: 'Shows info variant when data-theme is not set',
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
examples: [
|
|
28
|
-
{
|
|
29
|
-
title: 'Basic usage',
|
|
30
|
-
code: `
|
|
31
|
-
<div class="banner">
|
|
32
|
-
<p class="banner--body">Content inside banner</p>
|
|
33
|
-
</div>`,
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
title: 'With title',
|
|
37
|
-
code: `
|
|
38
|
-
<div class="banner">
|
|
39
|
-
<p class="banner--title">Banner title</p>
|
|
40
|
-
<p class="banner--body">Content inside banner</p>
|
|
41
|
-
</div>`,
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
title: 'With Action',
|
|
45
|
-
code: `
|
|
46
|
-
<div class="banner">
|
|
47
|
-
<p class="banner--body">Content inside banner</p>
|
|
48
|
-
<button class="banner--action small" data-theme="tertiary">
|
|
49
|
-
Action
|
|
50
|
-
</button>
|
|
51
|
-
</div>`,
|
|
52
|
-
},
|
|
53
|
-
{
|
|
54
|
-
title: 'Warning',
|
|
55
|
-
code: `
|
|
56
|
-
<div class="banner" data-theme="warning">
|
|
57
|
-
<p class="banner--body">Content inside banner</p>
|
|
58
|
-
</div>`,
|
|
59
|
-
},
|
|
60
|
-
{
|
|
61
|
-
title: 'Alert',
|
|
62
|
-
code: `
|
|
63
|
-
<div class="banner" data-theme="alert">
|
|
64
|
-
<p class="banner--body">Content inside banner</p>
|
|
65
|
-
</div>`,
|
|
66
|
-
},
|
|
67
|
-
],
|
|
68
|
-
},
|
|
69
|
-
} satisfies ComponentManifest;
|