list-components

Instructions

Implementation Reference

• src/tools/list-components.ts:6-38 (handler)

  Handler function that registers and implements the 'list-components' tool. Filters DS_COMPONENTS by optional category and returns a JSON summary of id, name, selector, description, and category.

  export function registerListComponents(server: McpServer): void {
    server.registerTool(
      'list-components',
      {
        description: 'Lista todos os componentes disponíveis no Design System, com filtro opcional por categoria.',
        inputSchema: z.object({
          category: z
            .enum(['form', 'layout', 'navigation', 'feedback', 'data-display', 'overlay'])
            .optional()
            .describe('Filtrar componentes por categoria'),
        }),
      },
      async ({ category }) => {
        let results = DS_COMPONENTS;
  
        if (category) {
          results = results.filter((c) => c.category === (category as ComponentCategory));
        }
  
        const summary = results.map((c) => ({
          id: c.id,
          name: c.name,
          selector: c.selector,
          description: c.description,
          category: c.category,
        }));
  
        return {
          content: [{ type: 'text', text: JSON.stringify(summary, null, 2) }],
        };
      }
    );
  }

• src/tools/list-components.ts:11-16 (schema)

  Input schema for the tool: optional category parameter using Zod enum validation.

  inputSchema: z.object({
    category: z
      .enum(['form', 'layout', 'navigation', 'feedback', 'data-display', 'overlay'])
      .optional()
      .describe('Filtrar componentes por categoria'),
  }),

• src/tools/list-components.ts:7-8 (registration)

  Registration of the 'list-components' tool with the MCP server via server.registerTool().

  server.registerTool(
    'list-components',

• src/tools/index.ts:7-12 (registration)

  Aggregate registration: registerAllTools calls registerListComponents which wires up the 'list-components' tool.

  export function registerAllTools(server: McpServer): void {
    registerListComponents(server);
    registerGetComponent(server);
    registerSearchComponents(server);
    registerGetComponentUsage(server);
  }

• src/data/components.ts:1-67 (helper)

  DS_COMPONENTS constant: the data array filtered and returned by the list-components handler.

  import { DsComponent } from '../models/mcp-server.model.js';
  
  export const DS_COMPONENTS: DsComponent[] = [
    {
      id: 'button',
      name: 'Button',
      description: 'Botão reutilizável com variantes de estilo, tamanho e estados (loading, disabled).',
      category: 'form',
      selector: 'bunge-button',
      inputs: [
        { name: 'label', type: 'string', required: true, description: 'Texto exibido no botão.' },
        { name: 'variant', type: "'primary' | 'secondary' | 'outline' | 'ghost'", required: false, default: "'primary'", description: 'Estilo visual do botão.' },
        { name: 'size', type: "'sm' | 'md' | 'lg'", required: false, default: "'md'", description: 'Tamanho do botão.' },
        { name: 'disabled', type: 'boolean', required: false, default: 'false', description: 'Desabilita interações.' },
        { name: 'loading', type: 'boolean', required: false, default: 'false', description: 'Exibe spinner e desabilita clique.' },
        { name: 'icon', type: 'string', required: false, description: 'Nome do ícone a exibir antes do label.' },
      ],
      outputs: [
        { name: 'clicked', type: 'EventEmitter<void>', required: false, description: 'Emitido ao clicar no botão.' },
      ],
      usage: `<bunge-button label="Salvar" variant="primary" (clicked)="onSave()"></bunge-button>
  
  <bunge-button label="Cancelar" variant="outline" (clicked)="onCancel()"></bunge-button>
  
  <bunge-button label="Processando..." [loading]="true"></bunge-button>`,
      importExample: `import { BungeButtonComponent } from '@bunge/ds-components';
  
  @NgModule({
    imports: [BungeButtonComponent]
  })`,
      tags: ['button', 'form', 'action', 'cta'],
    },
    {
      id: 'list',
      name: 'List',
      description: 'Componente de lista para exibir coleções de itens com suporte a seleção, ações e virtualização.',
      category: 'data-display',
      selector: 'bunge-list',
      inputs: [
        { name: 'items', type: 'any[]', required: true, description: 'Array de itens a exibir.' },
        { name: 'selectable', type: 'boolean', required: false, default: 'false', description: 'Permite seleção de itens.' },
        { name: 'multiSelect', type: 'boolean', required: false, default: 'false', description: 'Permite seleção múltipla.' },
        { name: 'emptyMessage', type: 'string', required: false, default: "'Nenhum item encontrado'", description: 'Mensagem quando a lista está vazia.' },
        { name: 'virtualScroll', type: 'boolean', required: false, default: 'false', description: 'Ativa virtualização para listas grandes.' },
        { name: 'itemTemplate', type: 'TemplateRef<any>', required: false, description: 'Template customizado para cada item.' },
      ],
      outputs: [
        { name: 'selectionChange', type: 'EventEmitter<any[]>', required: false, description: 'Emitido quando a seleção muda.' },
        { name: 'itemClick', type: 'EventEmitter<any>', required: false, description: 'Emitido ao clicar em um item.' },
      ],
      usage: `<bunge-list [items]="users" [selectable]="true" (selectionChange)="onSelect($event)">
  </bunge-list>
  
  <!-- Com template customizado -->
  <bunge-list [items]="products">
    <ng-template #itemTemplate let-item>
      <div class="product-row">{{ item.name }} - {{ item.price | currency }}</div>
    </ng-template>
  </bunge-list>`,
      importExample: `import { BungeListComponent } from '@bunge/ds-components';
  
  @NgModule({
    imports: [BungeListComponent]
  })`,
      tags: ['list', 'data', 'collection', 'selection', 'virtual-scroll'],
    },
  ];