@adyen/bento-mcp 0.3.0 → 0.5.0

package/dist/main.js

@@ -30396,11 +30396,61 @@ function addGetIcons(server) {
   );
 }
 
+// packages/mcp/src/tools/find-component-usage.ts
+function addFindComponentUsage(server) {
+  server.registerTool(
+    "find_component_usage",
+    {
+      description: `
+            Finds all files in the Bento library where a specific component is used.
+            This helps in understanding real-world implementation examples of a component.
+
+            Args:
+                componentName (string): The name of the component (e.g., "button", "modal").
+
+            Returns:
+                str: A list of file paths where the component is referenced.
+        `,
+      inputSchema: {
+        componentName: zod_default.string().describe("The name of the component")
+      }
+    },
+    async ({ componentName }) => {
+      const usageDataRaw = getFile("usage.json");
+      let usageData = {};
+      try {
+        usageData = JSON.parse(usageDataRaw);
+      } catch (error48) {
+        console.error("Error parsing usage.json:", error48);
+        return {
+          content: [{ type: "text", text: "Error: Could not load usage registry." }]
+        };
+      }
+      const usage = usageData[componentName] || [];
+      if (usage.length === 0) {
+        return {
+          content: [{ type: "text", text: `No usage found for component "${componentName}".` }]
+        };
+      }
+      return {
+        content: [
+          {
+            type: "text",
+            text: `Component "${componentName}" is used in the following files:
+
+${usage.map((f) => `- ${f}`).join("\n")}`
+          }
+        ]
+      };
+    }
+  );
+}
+
 // packages/mcp/package.json
 var package_default = {
   name: "@adyen/bento-mcp",
   mcpName: "io.github.adyen/bento-mcp",
-  version: "0.3.0",
+  version: "0.5.0",
   type: "module",
   description: "A Model Context Protocol server implementation for Bento",
   license: "MIT",
@@ -30451,8 +30501,7 @@ var package_default = {
     "@modelcontextprotocol/inspector": "0.21.1",
     "@playwright/test": "catalog:",
     "@nx/playwright": "catalog:nx",
-    "@swc/cli": "0.8.0",
-    "@swc/core": "^1.15.0"
+    "@swc/core": "catalog:"
   }
 };
 
@@ -30470,6 +30519,7 @@ async function main() {
   addGetDesignTokens(server);
   addGetUtilityClasses(server);
   addGetIcons(server);
+  addFindComponentUsage(server);
   const transport = new StdioServerTransport();
   await server.connect(transport);
   console.error("Bento MCP Server running on stdio");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adyen/bento-mcp",
   "mcpName": "io.github.adyen/bento-mcp",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "description": "A Model Context Protocol server implementation for Bento",
   "license": "MIT",
@@ -46,8 +46,7 @@
     "@modelcontextprotocol/inspector": "0.21.1",
     "@playwright/test": "1.42.1",
     "@nx/playwright": "22.4.0",
-    "@swc/cli": "0.8.0",
-    "@swc/core": "^1.15.0"
+    "@swc/core": "^1.15.11"
   },
   "scripts": {
     "add-skill": "node bin/add-skill.js",

package/dist/assets/components/draggable-handle/draggable-handle.stories.ts

@@ -1 +0,0 @@
-import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoDraggableHandle from './draggable-handle.vue'; import DraggableHandleDefaultExample from './__tests__/draggable-handle-default-example.vue?raw'; const meta: Meta = { title: 'Draggable handle', component: BentoDraggableHandle, argTypes: { condensed: { control: 'boolean', }, }, }; export default meta; type Story = StoryObj<typeof BentoDraggableHandle>; const DEFAULT_LABEL = 'Draggable element'; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDraggableHandle }, props: Object.keys(argTypes), template: ` <bento-draggable-handle v-bind="args" @move-up="clickedAction('move-up')" @move-down="clickedAction('move-down')" @move-right="clickedAction('move-right')" @move-left="clickedAction('move-left')" @move-top="clickedAction('move-top')" @move-bottom="clickedAction('move-bottom')" /> `, setup(props) { const clickedAction = (actionName: string) => action(actionName)(); return { // Values args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { label: DEFAULT_LABEL, }, parameters: storybookDocsParameter(DraggableHandleDefaultExample), }; 

package/dist/assets/components/draggable-handle/draggable-handle.types.ts

@@ -1 +0,0 @@
-import { type BentoMenuProps } from '../menu/menu.types'; export interface BentoDraggableHandleProps { /** * Reduces the size of the handle * @default false */ condensed?: BentoMenuProps['button']['condensed']; /** * Allows to disable the menus individually * @default {} */ disabledMenus?: { bottom?: boolean; down?: boolean; left?: boolean; right?: boolean; top?: boolean; up?: boolean; }; /** * Title or label used to describe the element being dragged. * Used for accessibility. */ label: string; /** * Determines the set of directional actions available in the handle's context menu. * * - `'all-directions'`: Includes 'Move up', 'Move down', 'Move left', 'Move right', 'Move to top', and 'Move to bottom'. * - `'up-and-down'`: Includes 'Move up', 'Move down', 'Move to top', and 'Move to bottom'. * * @default 'up-and-down' */ variant?: 'all-directions' | 'up-and-down'; } 

package/dist/assets/components/draggable-handle/draggable-handle.vue

@@ -1 +0,0 @@
-<template> <bento-menu class="b-draggable-handle" :data="menuData" :menu-width="250" :button="buttonComputedProps"> <template #iconLeft> <span class="b-draggable-handle__icon"> <grab-icon aria-hidden="true" /> </span> </template> </bento-menu> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoMenu, type BentoMenuItem, type BentoMenuProps } from '@/components/menu'; import { type BentoDraggableHandleProps } from './draggable-handle.types'; import { useI18n } from '@/utils/ts/i18n'; import GrabIcon from '@adyen/ui-assets-icons-16/vue/grab'; import ArrowTopIcon from '@adyen/ui-assets-icons-16/vue/arrow-top'; import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left'; import ArrowRightIcon from '@adyen/ui-assets-icons-16/vue/arrow-right'; import ArrowBottomIcon from '@adyen/ui-assets-icons-16/vue/arrow-bottom'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoDraggableHandleProps>(), { condensed: false, disabledMenus: () => ({}), variant: 'up-and-down', }); const emit = defineEmits<{ /** * Emitted when the "Move to bottom" action is fired. */ (e: 'move-bottom'): void; /** * Emitted when the "Move down" action is fired. */ (e: 'move-down'): void; /** * Emitted when the "Move left" action is fired. (Only in `all-directions` variant) */ (e: 'move-left'): void; /** * Emitted when the "Move right" action is fired. (Only in `all-directions` variant) */ (e: 'move-right'): void; /** * Emitted when the "Move to top" action is fired. */ (e: 'move-top'): void; /** * Emitted when the "Move up" action is fired. */ (e: 'move-up'): void; }>(); const buttonComputedProps = computed( () => ({ 'aria-label': t('reorderLabel', { label: props.label }), condensed: props.condensed, variant: 'tertiary', }) as BentoMenuProps['button'] ); /** * Renders the menus for the draggable handle. */ const menuData = computed(() => { const MENUS: { [key: string]: BentoMenuItem; } = { up: { text: t('moveUp'), handler: () => emit('move-up'), disabled: props.disabledMenus.up, icon: ArrowTopIcon, }, down: { text: t('moveDown'), handler: () => emit('move-down'), disabled: props.disabledMenus.down, icon: ArrowBottomIcon, }, left: { text: t('moveLeft'), handler: () => emit('move-left'), disabled: props.disabledMenus.left, icon: ArrowLeftIcon, }, right: { text: t('moveRight'), handler: () => emit('move-right'), disabled: props.disabledMenus.right, icon: ArrowRightIcon, }, top: { text: t('moveToTheTop'), handler: () => emit('move-top'), disabled: props.disabledMenus.top, icon: ArrowTopIcon, }, bottom: { text: t('moveToTheBottom'), handler: () => emit('move-bottom'), disabled: props.disabledMenus.bottom, icon: ArrowBottomIcon, }, }; // Render the menus and dividers according to the variant return props.variant === 'up-and-down' ? [ MENUS.up, // Divider added after "Move down" { ...MENUS.down, addDivider: true, }, MENUS.top, MENUS.bottom, ] : [ MENUS.up, MENUS.down, MENUS.left, // Divider added after "Move right" { ...MENUS.right, addDivider: true, }, MENUS.top, MENUS.bottom, ]; }); </script> <script lang="ts"> /** * Bento drag and drop handle component. * * @example * import { BentoDraggableHandle } from '@adyen/bento-vue2'; * * export default { * components: { BentoDraggableHandle }, * template: ` * <bento-draggable-handle * bottom * condensed * down * left * right * top * up * \@move-bottom="moveBottom(index)" * \@move-down="moveDown(index)" * \@move-left="moveLeft(index)" * \@move-right="moveRight(index)" * \@move-top="moveTop(index)" * \@move-up="moveUp(index)" * /> * `, * setup() { * const moveBottom = () => {} * const moveDown = () => {} * const moveLeft = () => {} * const moveRight = () => {} * const moveTop = () => {} * const moveUp = () => {} * } * } */ export default { i18n: { messages }, name: 'bento-draggable-handle', }; </script> <style lang="scss" scoped src="./draggable-handle.scss" />