@maltjoy/mcp-server 0.2.0 → 0.3.1

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

@@ -10,6 +10,7 @@
       "description": "",
       "possibleValues": [
         "medium",
+        "xxlarge",
         "xlarge",
         "large",
         "small",
@@ -103,7 +104,7 @@
         "key",
         "user-photo",
         "link",
-        "... (207 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 = Extract<TSizes, 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large'>;
+
+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 (217 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",
-        "... (207 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/VJoyFormGroup/metadata.json

@@ -0,0 +1,14 @@
+{
+  "name": "JoyFormGroup",
+  "displayName": "VJoyFormGroup",
+  "props": [],
+  "events": [],
+  "slots": [
+    {
+      "name": "default",
+      "description": "Use it to render the content of the form group. Most of the time JoyLabel, any form component, and JoyFormError."
+    }
+  ],
+  "exposed": [],
+  "hasVModel": false
+}

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 (217 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 = Extract<TSizes, 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'>;
+
+export type TJoyIconsNames = JoyIconsId;

package/dist/doc/VJoyIcon/metadata.json

@@ -4,7 +4,7 @@
   "props": [
     {
       "name": "size",
-      "type": "TSizes | undefined",
+      "type": "TJoyIconSizes | undefined",
       "required": false,
       "default": "\"xsmall\"",
       "description": "Use `TJoyIconSizes`",
@@ -65,7 +65,7 @@
         "key",
         "user-photo",
         "link",
-        "... (207 more)"
+        "... (210 more)"
       ]
     },
     {
@@ -101,7 +101,7 @@
   "exposed": [
     {
       "name": "size",
-      "type": "TSizes",
+      "type": "TJoyIconSizes",
       "isMethod": false
     },
     {

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,40 @@
+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;
+    /**
+     * @deprecated Password mode is deprecated on VJoyInput.
+     * Use VJoyInputPassword for password fields and toggle behavior.
+     */
+    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

@@ -140,7 +140,7 @@
       "type": "string",
       "required": false,
       "description": "Add a JoyIcon / joy-icon with given name on left-side.",
-      "possibleValues": "TJoyIconsNames (217 values)"
+      "possibleValues": "TJoyIconsNames (220 values)"
     },
     {
       "name": "size",
@@ -204,6 +204,10 @@
     {
       "name": "default",
       "description": "DEPRECATED. Default slot to display a label on top of the element. You can use label property as well"
+    },
+    {
+      "name": "right-action",
+      "description": "Slot used to inject a custom action on the right side of the input wrapper."
     }
   ],
   "exposed": [

package/dist/doc/VJoyInputDigit/JoyInputDigit.types.ts

@@ -0,0 +1,14 @@
+export interface VJoyInputDigitProps {
+    /** Joined value of all input slots. */
+    modelValue?: string;
+    /** Number of displayed input slots. */
+    length?: number;
+    /** Applies invalid visual state on every slot. */
+    invalid?: boolean;
+    /** Disables all input slots. */
+    disabled?: boolean;
+    /** Name prefix used for each generated input. */
+    name?: string;
+    /** Base aria-label used for each input, indexed automatically (e.g. "Digit 1 of 6"). */
+    inputAriaLabel?: string;
+}

package/dist/doc/VJoyInputDigit/metadata.json

@@ -0,0 +1,154 @@
+{
+  "name": "JoyInputDigit",
+  "displayName": "VJoyInputDigit",
+  "props": [
+    {
+      "name": "modelValue",
+      "type": "string | undefined",
+      "required": false,
+      "default": "\"\"",
+      "description": "Joined value of all input slots.",
+      "possibleValues": [
+        "string"
+      ]
+    },
+    {
+      "name": "length",
+      "type": "number | undefined",
+      "required": false,
+      "default": "6",
+      "description": "Number of displayed input slots.",
+      "possibleValues": [
+        "number"
+      ]
+    },
+    {
+      "name": "invalid",
+      "type": "boolean | undefined",
+      "required": false,
+      "default": "false",
+      "description": "Applies invalid visual state on every slot.",
+      "possibleValues": [
+        "false",
+        "true"
+      ]
+    },
+    {
+      "name": "disabled",
+      "type": "boolean | undefined",
+      "required": false,
+      "default": "false",
+      "description": "Disables all input slots.",
+      "possibleValues": [
+        "false",
+        "true"
+      ]
+    },
+    {
+      "name": "name",
+      "type": "string | undefined",
+      "required": false,
+      "default": "\"joy-input-digit\"",
+      "description": "Name prefix used for each generated input.",
+      "possibleValues": [
+        "string"
+      ]
+    },
+    {
+      "name": "inputAriaLabel",
+      "type": "string | undefined",
+      "required": false,
+      "default": "\"Digit\"",
+      "description": "Base aria-label used for each input, indexed automatically (e.g. \"Digit 1 of 6\").",
+      "possibleValues": [
+        "string"
+      ]
+    }
+  ],
+  "events": [
+    {
+      "name": "blur",
+      "description": "",
+      "signature": "(event: \"blur\", event: FocusEvent): void"
+    },
+    {
+      "name": "change",
+      "description": "",
+      "signature": "(event: \"change\", value: string, event: Event): void"
+    },
+    {
+      "name": "focus",
+      "description": "",
+      "signature": "(event: \"focus\", event: FocusEvent): void"
+    },
+    {
+      "name": "update:modelValue",
+      "description": "",
+      "signature": "(event: \"update:modelValue\", value: string): void"
+    }
+  ],
+  "slots": [],
+  "exposed": [
+    {
+      "name": "invalid",
+      "type": "boolean",
+      "isMethod": false
+    },
+    {
+      "name": "length",
+      "type": "number",
+      "isMethod": false
+    },
+    {
+      "name": "disabled",
+      "type": "boolean",
+      "isMethod": false
+    },
+    {
+      "name": "name",
+      "type": "string",
+      "isMethod": false
+    },
+    {
+      "name": "modelValue",
+      "type": "string",
+      "isMethod": false
+    },
+    {
+      "name": "inputAriaLabel",
+      "type": "string",
+      "isMethod": false
+    },
+    {
+      "name": "onBlur",
+      "type": "((event: FocusEvent) => any) | undefined",
+      "isMethod": true
+    },
+    {
+      "name": "onFocus",
+      "type": "((event: FocusEvent) => any) | undefined",
+      "isMethod": true
+    },
+    {
+      "name": "onUpdate:modelValue",
+      "type": "((value: string) => any) | undefined",
+      "isMethod": true
+    },
+    {
+      "name": "onChange",
+      "type": "((value: string, event: Event) => any) | undefined",
+      "isMethod": true
+    },
+    {
+      "name": "focusInput",
+      "type": "(index: number) => void",
+      "isMethod": true
+    },
+    {
+      "name": "tokens",
+      "type": "string[]",
+      "isMethod": false
+    }
+  ],
+  "hasVModel": true
+}