@maltjoy/mcp-server 0.1.2 → 0.3.0

package/README.md

@@ -6,6 +6,7 @@ MCP (Model Context Protocol) server for the Joy Design System. This server expos
 
 - 🔍 List all 74 available Joy Vue3 components
 - 📚 Access component documentation (props, events, slots, exposed members)
+- 🏷️ Retrieve TypeScript types definitions for component props (variants, sizes, etc.)
 - 🎨 List 132 design tokens (colors, spacing, typography, etc.)
 - 💅 List 272 CSS utility classes
 - 🤖 AI-friendly interface through MCP protocol
@@ -109,7 +110,35 @@ Retrieves detailed information about a specific Joy Vue3 component including pro
 }
 ```
 
-### 3. `joy_list_design_tokens`
+### 3. `joy_get_component_types`
+
+Retrieves the TypeScript types definition files associated with a specific Joy Vue3 component. These types define the allowed values for props (variants, sizes, etc.).
+
+**Parameters:**
+- `componentName` (string, required): The exact name of the component (e.g., "VJoyButton", "VJoyMenu")
+
+**Returns:**
+```json
+{
+  "componentName": "VJoyButton",
+  "files": [
+    {
+      "filename": "JoyButton.types.ts",
+      "content": "import {TGenericVariants, TPositions, TSizes} from '../../types';\n\nexport type TJoyDefaultButtonVariants = TGenericVariants | 'main' | 'admin' | 'ghost';\nexport type TJoyButtonVariants = TJoyDefaultButtonVariants | ...;\nexport type TJoyButtonSizes = Exclude<TSizes, 'xlarge'>;\nexport type TJoyButtonIconPositions = TPositions;\n"
+    }
+  ]
+}
+```
+
+**Error Response:**
+```json
+{
+  "error": "No types file found for component \"VJoyNonExistent\". Use joy_list_components to get a list of available components."
+}
+```
+
+### 4. `joy_list_design_tokens`
+
 
 Lists all available Joy design tokens (CSS custom properties) organized by domain.
 
@@ -129,7 +158,7 @@ Lists all available Joy design tokens (CSS custom properties) organized by domai
 }
 ```
 
-### 4. `joy_list_css_classes`
+### 5. `joy_list_css_classes`
 
 Lists all available Joy CSS utility classes organized by domain.
 
@@ -192,6 +221,7 @@ joy-mcp-server/
 │   └── tools/
 │       ├── list-components.ts      # Component listing tool
 │       ├── get-component-info.ts   # Component info retrieval tool
+│       ├── get-component-types.ts  # Component types retrieval tool
 │       ├── list-design-tokens.ts   # Design tokens tool
 │       └── list-css-classes.ts     # CSS classes tool
 ├── dist/
@@ -200,7 +230,8 @@ joy-mcp-server/
 │       ├── design-tokens.json      # All design tokens
 │       ├── css-classes.json        # All CSS classes
 │       └── VJoy*/                  # Component directories
-│           └── metadata.json       # Component metadata
+│           ├── metadata.json       # Component metadata
+│           └── *.types.ts          # Component TypeScript types
 ├── package.json
 ├── tsconfig.json
 ├── README.md

package/dist/doc/VJoyAvailability/JoyAvailability.types.ts

@@ -0,0 +1 @@
+export type TJoyAvailabilityStatus = 'AVAILABLE' | 'AVAILABLE_AND_VERIFIED' | 'NOT_AVAILABLE_WITH_DATE' | 'AVAILABLE_SOON' | 'NOT_AVAILABLE';

package/dist/doc/VJoyAvatar/JoyAvatar.types.ts

@@ -0,0 +1,6 @@
+import {TSizes} from '../../types';
+import VJoyAvatar from './VJoyAvatar.vue';
+
+/** AVATAR SIZES */
+export type TJoyAvatarSizes = Exclude<TSizes, 'xxsmall'>;
+export type TJoyAvatarProps = InstanceType<typeof VJoyAvatar>['$props'];

package/dist/doc/VJoyAvatar/metadata.json

@@ -103,7 +103,7 @@
         "key",
         "user-photo",
         "link",
-        "... (200 more)"
+        "... (210 more)"
       ]
     },
     {

package/dist/doc/VJoyBadge/JoyBadge.types.ts

@@ -0,0 +1,3 @@
+import {TJoyDotVariants} from '../JoyDot/VJoyDot.types';
+
+export type TJoyBadgeVariants = TJoyDotVariants;

package/dist/doc/VJoyBadge/metadata.json

@@ -40,15 +40,6 @@
         "dark-blue",
         "yellow"
       ]
-    },
-    {
-      "name": "number",
-      "type": "number | undefined",
-      "required": false,
-      "description": "",
-      "possibleValues": [
-        "number"
-      ]
     }
   ],
   "events": [],
@@ -73,11 +64,6 @@
       "name": "variant",
       "type": "TJoyDotVariants",
       "isMethod": false
-    },
-    {
-      "name": "number",
-      "type": "number | undefined",
-      "isMethod": false
     }
   ],
   "hasVModel": false

package/dist/doc/VJoyBadgeLevel/JoyBadgeLevel.types.ts

@@ -0,0 +1,15 @@
+export enum JoyBadgeLevelEnum {
+    // Should be replaced by JoyBadgeLevelEnum.HIGH_POTENTIAL_AUTO OR JoyBadgeProgramEnum.HIGH_POTENTIAL
+    HIGH_POTENTIAL = 'highpotential',
+    HIGH_POTENTIAL_AUTO = 'high-potential-auto',
+    MALT_LINKER = 'maltlinker',
+    NEW = 'new',
+    SUPER_MALTER = 'supermalter',
+    VERIFIED = 'verified',
+}
+
+export enum JoyBadgeProgramEnum {
+    HIGH_POTENTIAL = 'program_high-potential',
+}
+
+export type TJoyBadges = `${JoyBadgeLevelEnum | JoyBadgeProgramEnum}`;

package/dist/doc/VJoyButton/JoyButton.types.ts

@@ -0,0 +1,10 @@
+import {TGenericVariants, TPositions, TSizes} from '../../types';
+
+export type TJoyDefaultButtonVariants = TGenericVariants | 'main' | 'admin' | 'ghost';
+export type TJoyAIButtonVariants = `${TJoyDefaultButtonVariants}-ai`;
+
+export type TJoyButtonVariants = TJoyDefaultButtonVariants | Exclude<TJoyAIButtonVariants, 'admin-ai'>;
+
+export type TJoyButtonSizes = Exclude<TSizes, 'xlarge'>;
+
+export type TJoyButtonIconPositions = TPositions;

package/dist/doc/VJoyButton/metadata.json

@@ -92,7 +92,7 @@
       "type": "string",
       "required": false,
       "description": "Name of the icon, placed before the text",
-      "possibleValues": "TJoyIconsNames (210 values)"
+      "possibleValues": "TJoyIconsNames (220 values)"
     },
     {
       "name": "id",

package/dist/doc/VJoyCollapseItem/JoyCollapseItem.types.ts

@@ -0,0 +1,8 @@
+import VJoyCollapseItem from './VJoyCollapseItem.vue';
+
+export type TJoyCollapseItemProps = InstanceType<typeof VJoyCollapseItem>['$props'];
+
+export type TJoyCollapseItems = TJoyCollapseItemProps[];
+
+export const COLLAPSE_ITEM_MODES = ['outline', 'default'] as const;
+export type TJoyCollapseItemModes = (typeof COLLAPSE_ITEM_MODES)[number];

package/dist/doc/VJoyCollapseItem/metadata.json

@@ -65,7 +65,7 @@
         "key",
         "user-photo",
         "link",
-        "... (200 more)"
+        "... (210 more)"
       ]
     }
   ],

package/dist/doc/VJoyCompanyAvatar/JoyCompanyAvatar.types.ts

@@ -0,0 +1,3 @@
+import {TSizes} from '../../types';
+
+export type TJoyCompanyAvatarSizes = Extract<TSizes, 'large' | 'medium' | 'small'>;

package/dist/doc/VJoyDialog/JoyDialog.types.ts

@@ -0,0 +1,3 @@
+import {TSizes} from '../../types';
+
+export type TJoyDialogSizes = Extract<TSizes, 'large'> | 'default';

package/dist/doc/VJoyDot/VJoyDot.types.ts

@@ -0,0 +1 @@
+export type TJoyDotVariants = 'info' | 'gray' | 'green' | 'orange' | 'red' | 'teal' | 'pink' | 'dark-blue' | 'yellow';

package/dist/doc/VJoyDot/metadata.json

@@ -2,12 +2,20 @@
   "name": "JoyDot",
   "displayName": "VJoyDot",
   "props": [
+    {
+      "name": "number",
+      "type": "any",
+      "required": false,
+      "default": "undefined",
+      "description": "number: set a number or a string to display inside the dot, for badge-style dots with numbers.",
+      "possibleValues": null
+    },
     {
       "name": "variant",
       "type": "TJoyDotVariants | undefined",
       "required": false,
       "default": "\"info\"",
-      "description": "",
+      "description": "variant: the color variant for the dot. You can use the TJoyDotVariants type.",
       "possibleValues": [
         "info",
         "gray",
@@ -19,28 +27,19 @@
         "dark-blue",
         "yellow"
       ]
-    },
-    {
-      "name": "number",
-      "type": "number | undefined",
-      "required": false,
-      "description": "",
-      "possibleValues": [
-        "number"
-      ]
     }
   ],
   "events": [],
   "slots": [],
   "exposed": [
     {
-      "name": "variant",
-      "type": "TJoyDotVariants",
+      "name": "number",
+      "type": "any",
       "isMethod": false
     },
     {
-      "name": "number",
-      "type": "number | undefined",
+      "name": "variant",
+      "type": "TJoyDotVariants",
       "isMethod": false
     }
   ],

package/dist/doc/VJoyDrawer/JoyDrawer.types.ts

@@ -0,0 +1 @@
+export type TJoyDrawerSizes = 'default' | 'large';

package/dist/doc/VJoyDropdown/JoyDropdown.types.ts

@@ -0,0 +1,21 @@
+import {TPositions} from '../../types';
+
+export type TJoyDropdownDirections = 'up' | 'down';
+
+export type TJoyDropdownJustify = TPositions;
+
+export interface TJoyDropdownOption {
+    id: string;
+    value?: string;
+    label: string;
+    href?: string;
+    /**
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @default false
+     */
+    checked?: boolean;
+    [k: string]: any;
+}

package/dist/doc/VJoyDropdownList/JoyDropdownList.types.ts

@@ -0,0 +1,3 @@
+import {TSizes} from '../../types';
+
+export type TJoyDropdownListSizes = Extract<TSizes, 'xsmall' | 'small' | 'medium'>;

package/dist/doc/VJoyDropzone/metadata.json

@@ -102,6 +102,17 @@
       "possibleValues": [
         "string"
       ]
+    },
+    {
+      "name": "canDelete",
+      "type": "boolean | undefined",
+      "required": false,
+      "default": "true",
+      "description": "Enable delete file button.",
+      "possibleValues": [
+        "false",
+        "true"
+      ]
     }
   ],
   "events": [],

package/dist/doc/VJoyFormError/metadata.json

@@ -13,6 +13,17 @@
         "true"
       ]
     },
+    {
+      "name": "noMargin",
+      "type": "boolean | undefined",
+      "required": false,
+      "default": "false",
+      "description": "Allows to remove any bottom margin on the component",
+      "possibleValues": [
+        "false",
+        "true"
+      ]
+    },
     {
       "name": "noHtmlErrorText",
       "type": "string | undefined",
@@ -51,6 +62,11 @@
       "type": "boolean",
       "isMethod": false
     },
+    {
+      "name": "noMargin",
+      "type": "boolean",
+      "isMethod": false
+    },
     {
       "name": "noHtmlErrorText",
       "type": "string | undefined",

package/dist/doc/VJoyFunnel/JoyFunnel.types.ts

@@ -0,0 +1,5 @@
+import {Profiles, TSizes} from '../../types';
+
+export type TJoyFunnelLayoutWidths = Extract<TSizes, 'medium' | 'large'>;
+
+export type TJoyFunnelProfiles = `${Profiles.STRATEGY}` | `${Profiles.DEFAULT}`;

package/dist/doc/VJoyHighlight/JoyHighlight.types.ts

@@ -0,0 +1,4 @@
+import {TLevels} from '../../types';
+
+export type TJoyHighlightLevels = TLevels;
+export type TJoyHighlightVariants = 'ai' | 'default';

package/dist/doc/VJoyHighlight/metadata.json

@@ -54,7 +54,7 @@
       "type": "string",
       "required": false,
       "description": "Based on maltjoy/icons availabilities. Works in pair with displayIcon boolean prop.",
-      "possibleValues": "TJoyIconsNames (210 values)"
+      "possibleValues": "TJoyIconsNames (220 values)"
     }
   ],
   "events": [],

package/dist/doc/VJoyIcon/JoyIcon.types.ts

@@ -0,0 +1,8 @@
+import type {JoyIconsId} from '@maltjoy/icons';
+import {TSizes, TLevels} from '../../types';
+
+export type TJoyIconsColors = TLevels | 'neutral-50' | 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'brand-primary' | 'brand-secondary' | 'white';
+
+export type TJoyIconSizes = TSizes;
+
+export type TJoyIconsNames = JoyIconsId;

package/dist/doc/VJoyIcon/metadata.json

@@ -65,7 +65,7 @@
         "key",
         "user-photo",
         "link",
-        "... (200 more)"
+        "... (210 more)"
       ]
     },
     {

package/dist/doc/VJoyIndicators/JoyIndicators.types.ts

@@ -0,0 +1 @@
+export type TJoyIndicatorsVariants = 'default' | 'light';

package/dist/doc/VJoyInput/JoyInput.types.ts

@@ -0,0 +1,36 @@
+import {TSizes} from '../../types';
+import {TJoyIconsNames} from '../JoyIcon/JoyIcon.types';
+import {TJoyLabelSizes} from '../JoyLabel/JoyLabel.types';
+
+export type TJoyInputSizes = Extract<TSizes, 'small' | 'medium' | 'large'>;
+
+export interface VJoyInputProps {
+    autofocus?: boolean;
+    modelValue?: string | number | null;
+    disabled?: boolean;
+    id?: string;
+    invalid?: boolean;
+    name?: string;
+    required?: boolean;
+    /** Display a label on top of the element. Handy if you only need to pass a string. If you need more, use the VJoyLabel. */
+    label?: string;
+    /** Overrides the default label size. See JoyLabel stories */
+    labelSize?: TJoyLabelSizes;
+    /** If your component is not required, we can add a label to explicitely tell that it's not mandatory */
+    optionalLabel?: string;
+    /** Depending on context, we can add a "*" after the label to specify it's mandatory. */
+    requiredMark?: boolean;
+    modelModifiers?: Partial<Record<'number' | 'trim' | 'lazy', boolean>>;
+    /** Display a cross icon on the right that enables to clear the field */
+    clearable?: boolean;
+    /** Add a JoyIcon / joy-icon with given name on left-side. */
+    icon?: TJoyIconsNames;
+    size?: TJoyInputSizes;
+    type?: string;
+    /** Adds a legend like symbol on the right of the component. Made for number based values */
+    unit?: string;
+    /** Activates the readonly mode for the input */
+    readonly?: boolean;
+    /** When using the clearable property, you have to specific an aria-label for accessibility. */
+    clearAriaLabel?: string;
+}

package/dist/doc/VJoyInput/metadata.json

@@ -57,10 +57,12 @@
     },
     {
       "name": "name",
-      "type": "string",
-      "required": true,
+      "type": "string | undefined",
+      "required": false,
       "description": "",
-      "possibleValues": null
+      "possibleValues": [
+        "string"
+      ]
     },
     {
       "name": "required",
@@ -140,7 +142,7 @@
       "type": "string",
       "required": false,
       "description": "Add a JoyIcon / joy-icon with given name on left-side.",
-      "possibleValues": "TJoyIconsNames (210 values)"
+      "possibleValues": "TJoyIconsNames (220 values)"
     },
     {
       "name": "size",
@@ -284,7 +286,7 @@
     },
     {
       "name": "name",
-      "type": "string",
+      "type": "string | undefined",
       "isMethod": false
     },
     {

package/dist/doc/VJoyLabel/JoyLabel.types.ts

@@ -0,0 +1,3 @@
+import {TSizes} from '@/types';
+
+export type TJoyLabelSizes = Extract<TSizes, 'small' | 'medium' | 'large'>;

package/dist/doc/VJoyLink/JoyLink.types.ts

@@ -0,0 +1,2 @@
+export type TJoyLinkColors = 'teal' | 'white';
+export type TJoyLinkType = HTMLButtonElement['type'];

package/dist/doc/VJoyLink/metadata.json

@@ -25,7 +25,7 @@
       "type": "string",
       "required": false,
       "description": "",
-      "possibleValues": "TJoyIconsNames (210 values)"
+      "possibleValues": "TJoyIconsNames (220 values)"
     },
     {
       "name": "text",

package/dist/doc/VJoyListItem/metadata.json

@@ -7,7 +7,7 @@
       "type": "string",
       "required": false,
       "description": "",
-      "possibleValues": "TJoyIconsNames (210 values)"
+      "possibleValues": "TJoyIconsNames (220 values)"
     }
   ],
   "events": [

package/dist/doc/VJoyMenu/JoyMenu.types.ts

@@ -0,0 +1,14 @@
+import {JoyIconsId} from '@maltjoy/icons';
+
+export interface IJoyMenuItem {
+    id?: string;
+    label: string;
+    href?: string;
+    icon?: JoyIconsId;
+    current?: boolean;
+    /**
+     * @default false
+     */
+    disabled?: boolean;
+    [k: string]: any;
+}

package/dist/doc/VJoyMenu/metadata.json

@@ -129,9 +129,8 @@
                       "\"bell\"",
                       "\"block-shield\"",
                       "\"bricks\"",
+                      "\"briefcase-hover\"",
                       "\"briefcase\"",
-                      "\"building-column\"",
-                      "\"business-suitcase\"",
                       "\"calendar\"",
                       "\"camcorder\"",
                       "\"camera-device\"",
@@ -163,6 +162,7 @@
                       "\"conditions\"",
                       "\"conference\"",
                       "\"contact\"",
+                      "\"cookie\"",
                       "\"cost-plus\"",
                       "\"creditcard\"",
                       "\"cross\"",
@@ -188,11 +188,11 @@
                       "\"file\"",
                       "\"five-day\"",
                       "\"flag\"",
-                      "\"folder-arrow-down\"",
-                      "\"folder-text\"",
                       "\"freelancer-placeholder\"",
                       "\"fullscren\"",
                       "\"gasoline\"",
+                      "\"globe-hover\"",
+                      "\"globe\"",
                       "\"google\"",
                       "\"granular-report\"",
                       "\"graph-high\"",
@@ -209,6 +209,7 @@
                       "\"home\"",
                       "\"ico-list\"",
                       "\"identity-switch\"",
+                      "\"image\"",
                       "\"info-circle\"",
                       "\"instagram\"",
                       "\"insurance\"",
@@ -217,6 +218,7 @@
                       "\"legal-check\"",
                       "\"legal\"",
                       "\"linkedin\"",
+                      "\"list-file\"",
                       "\"list\"",
                       "\"location\"",
                       "\"lock\"",
@@ -232,14 +234,18 @@
                       "\"money\"",
                       "\"mood-bad\"",
                       "\"mood-good\"",
+                      "\"newspaper\"",
                       "\"open-conversation\"",
                       "\"paperclip\"",
                       "\"pen\"",
                       "\"pencil\"",
                       "\"phone\"",
+                      "\"plane-full\"",
                       "\"plus-circle\"",
                       "\"pound-circle\"",
                       "\"print\"",
+                      "\"profile-picture-hover\"",
+                      "\"profile-picture\"",
                       "\"projectmanager-agile\"",
                       "\"qr-code\"",
                       "\"question-circle\"",
@@ -265,9 +271,12 @@
                       "\"sort-asc\"",
                       "\"sort-desc\"",
                       "\"sparkle\"",
+                      "\"sparkles\"",
                       "\"star-fill\"",
                       "\"star-half\"",
+                      "\"star-message\"",
                       "\"star\"",
+                      "\"super-malter\"",
                       "\"swipe\"",
                       "\"switch\"",
                       "\"sync-reset\"",
@@ -300,6 +309,7 @@
                       "\"wallet\"",
                       "\"warning-triangle\"",
                       "\"warning\"",
+                      "\"waving-hand\"",
                       "\"web-design\"",
                       "\"wench\"",
                       "\"x\"",

package/dist/doc/VJoyMenuItem/metadata.json

@@ -23,7 +23,7 @@
       "type": "string",
       "required": false,
       "description": "",
-      "possibleValues": "TJoyIconsNames (210 values)"
+      "possibleValues": "TJoyIconsNames (220 values)"
     },
     {
       "name": "current",
@@ -50,7 +50,7 @@
       "type": "string",
       "required": false,
       "description": "",
-      "possibleValues": "TJoyIconsNames (210 values)"
+      "possibleValues": "TJoyIconsNames (220 values)"
     },
     {
       "name": "statusColor",

package/dist/doc/VJoyPanel/JoyPanel.types.ts

@@ -0,0 +1,6 @@
+import {TSizes} from '../../types';
+
+export type TJoyPanelSizes = Extract<TSizes, 'small' | 'medium' | 'large'>;
+export type TJoyPanelTitleSizes = Extract<TSizes, 'small' | 'large'>;
+
+export type TJoyPanelVariants = 'default' | 'ai';

package/dist/doc/VJoyProductTour/JoyProductTour.types.ts

@@ -0,0 +1,45 @@
+import {TJoyIconsNames} from '../JoyIcon/JoyIcon.types';
+import VJoyProductTourInner from './VJoyProductTourInner.vue';
+
+export const PRODUCT_TOUR_POSITIONS = ['left', 'right', 'top', 'bottom'] as const;
+export type TJoyProductTourPositions = (typeof PRODUCT_TOUR_POSITIONS)[number];
+
+export interface IJoyProductTourShowParams {
+    highlightSelector?: HTMLElement;
+}
+
+export type TJoyProductTourEvents = {
+    'product-tour:show': string;
+};
+
+export interface VJoyProductTourProps {
+    icon?: TJoyIconsNames;
+    steps?: number;
+    step?: number;
+    position?: TJoyProductTourPositions;
+    open?: boolean;
+    maxWidth?: number;
+    disableOverlay?: boolean;
+    spotlightPadding?: number;
+    spotlightSelector: string;
+    closeButton?: boolean;
+}
+
+export interface VJoyProductTourSlots {
+    /** Allows to inject an image above the title */
+    'product-tour-banner'?: () => any;
+    /** Most of the time we use it to display tags, or short content */
+    'product-tour-preheader'?: () => any;
+    /** Title of the component */
+    'product-tour-header'?: () => any;
+    /** Main content. Put whatever you want here */
+    'product-tour-content'?: () => any;
+    /** The click here will automatically handle slotted VJoyButton with bubbling */
+    'product-tour-dismiss'?: () => any;
+    /** To display the main CTA. Component hiding needs to be made manually */
+    'product-tour-next'?: () => any;
+}
+
+export interface VJoyProductToursEvents {
+    'product-tour:hide': [];
+}