@adyen/bento-mcp 0.3.0 → 0.4.0

package/dist/assets/tailwind/README.md

@@ -3,12 +3,13 @@
 This package provides a convenient [Tailwind CSS](https://tailwindcss.com/) preset designed to seamlessly integrate
 Adyen's Bento design system into your projects through the use of utility classes.
 
-By using this preset, you get the best of both worlds:
+By using this preset, you get:
 
-1.  **Full Tailwind Power:** Access to **all** the default Tailwind CSS utility classes you know and love. Nothing is
-    removed or fundamentally changed from the standard Tailwind experience.
-2.  **Bento Integration:** Adds utility classes derived from Bento's alias tokens—covering colors, spacing, animations,
-    borders, shadows, and more enabling you to apply Bento's defined styles using familiar Tailwind syntax.
+1.  **Bento-First Utilities:** Utility classes derived from Bento's alias tokens — covering colors, spacing, animations,
+    borders, shadows, and more — enabling you to apply Bento's defined styles using familiar Tailwind syntax.
+2.  **Tailwind Utilities:** Access to Tailwind CSS utility classes for layout, flexbox, grid, and other non-themed
+    categories. Categories that are fully managed by Bento (see below) have their Tailwind defaults removed to prevent
+    conflicts.
 
 **Important:** This preset is designed to **complement**, not replace, the primary Bento UI component library (e.g.,
 `@adyen/bento-vue2`, `@adyen/bento-vue3`).
@@ -23,6 +24,30 @@ Think of these utilities as tools for:
 For implementing standard interface patterns (buttons, inputs, cards, etc.), using the pre-built components from the
 main Bento library is generally recommended for consistency and accessibility.
 
+### What's customized?
+
+This preset removes default Tailwind values for categories that are fully managed by Bento:
+
+| Category                                                                                       | Tailwind defaults removed        | Bento alternative                                                | Example utility classes                                               |
+| ---------------------------------------------------------------------------------------------- | -------------------------------- | ---------------------------------------------------------------- | --------------------------------------------------------------------- |
+| Colors                                                                                         | `red-500`, `blue-300`, etc.      | `colors` and `backgroundColor` from `@adyen/bento-design-tokens` | `text-label-primary`, `bg-secondary-active`, `border-outline-primary` |
+| Spacing                                                                                        | `1`, `2`, `4`, `8`, etc.         | `spacer` from `@adyen/bento-design-tokens`                       | `p-070`, `m-040`, `gap-060`                                           |
+| Border radius                                                                                  | `rounded-sm`, `rounded-md`, etc. | `borderRadius` from `@adyen/bento-design-tokens`                 | `rounded-s`, `rounded-m`, `rounded-l`                                 |
+| Border width                                                                                   | `border`, `border-2`, etc.       | `borderWidth` from `@adyen/bento-design-tokens`                  | `border-s`, `border-m`, `border-attention`                            |
+| Box shadows                                                                                    | `shadow-sm`, `shadow-lg`, etc.   | `shadow` from `@adyen/bento-design-tokens`                       | `shadow-low`, `shadow-medium`, `shadow-high`                          |
+| Breakpoints                                                                                    | `sm`, `md`, `lg`, `xl`, `2xl`    | `screens` from `@adyen/bento-design-tokens`                      | `xs-min:`, `s-min:`, `m-min:`, `l-min:`, `xl-min:`                    |
+| Typography (font-size, font-weight, font-family, line-height, letter-spacing, text-decoration) | All removed                      | Managed by the `bento-typography` component                      | N/A                                                                   |
+
+The following categories are **extended** with Bento tokens while keeping Tailwind defaults available:
+
+| Category            | Bento tokens added                                    | Example utility classes                               |
+| ------------------- | ----------------------------------------------------- | ----------------------------------------------------- |
+| Transition duration | `animationDuration` from `@adyen/bento-design-tokens` | `duration-slow`, `duration-moderate`, `duration-fast` |
+| Transition timing   | `animationEasing` from `@adyen/bento-design-tokens`   | `ease-standard`, `ease-enter`, `ease-exit`            |
+| Z-index             | `zIndex` from `@adyen/bento-design-tokens`            | `z-global-elevated`, `z-global-navigation`            |
+
+All other Tailwind utilities (layout, flexbox, grid, transforms, etc.) remain available with their defaults.
+
 ## Installation
 
 Install the package using npm (or your preferred package manager):
@@ -87,3 +112,18 @@ colors like `bg-secondary-active`, spacing units, etc.), please explore our
 **Default Tailwind Utilities:** For documentation on the standard utility classes like `flex`, `grid`, `pt-4`,
 `text-center`, `rounded-lg`, etc., which are all included and work as expected, please refer to the official
 **[Tailwind CSS Documentation](https://v3.tailwindcss.com/docs/utility-first)**.
+
+## Migrating from Tailwind CSS v3
+
+If you are migrating from a previous version that used Tailwind CSS v3, see the [MIGRATION.md](./MIGRATION.md) file for
+a full list of breaking changes and before/after mappings.
+
+To automate the migration, use the `@adyen/eslint-plugin-bento` Tailwind config:
+
+```javascript
+const bento = require('@adyen/eslint-plugin-bento');
+
+module.exports = [...bento.configs['tailwind']];
+```
+
+Then run `eslint --fix` to auto-migrate Tailwind v3 classes to their Bento equivalents.

package/dist/main.js

@@ -30400,7 +30400,7 @@ function addGetIcons(server) {
 var package_default = {
   name: "@adyen/bento-mcp",
   mcpName: "io.github.adyen/bento-mcp",
-  version: "0.3.0",
+  version: "0.4.0",
   type: "module",
   description: "A Model Context Protocol server implementation for Bento",
   license: "MIT",
@@ -30451,8 +30451,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:"
   }
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adyen/bento-mcp",
   "mcpName": "io.github.adyen/bento-mcp",
-  "version": "0.3.0",
+  "version": "0.4.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" />