Component catalog - Accordion

packages/mcp/src/catalogs/components/catalog.json

@@ -0,0 +1,136 @@
+{
+  "updatedAt": "2026-07-01T20:25:05.109Z",
+  "components": [
+    {
+      "name": "HdsAccordion",
+      "description": "The `Accordion` component serves as a wrapper to group one or more `Accordion::Item` components.",
+      "args": [
+        {
+          "name": "forceState",
+          "type": "'open' | 'close'",
+          "required": false,
+          "description": "Controls the state of all items within a group. Can be used to expand or collapse all items at once."
+        }
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "required": false,
+          "default": "medium"
+        },
+        {
+          "name": "titleTag",
+          "type": "'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "required": false,
+          "default": "div",
+          "description": "The HTML tag that wraps the content of each Accordion Item \"toggle\" block."
+        },
+        {
+          "name": "type",
+          "type": "'card' | 'flush'",
+          "required": false,
+          "default": "card"
+        }
+      ],
+      "blocks": [
+        {
+          "name": "default",
+          "yields": [
+            {
+              "name": "Item",
+              "type": "WithBoundArgs< typeof HdsAccordionItem, 'titleTag' | 'size' | 'type' | 'forceState' >",
+              "kind": "component",
+              "componentName": "HdsAccordionItem",
+              "boundArgs": [
+                "titleTag",
+                "size",
+                "type",
+                "forceState"
+              ],
+              "description": "`Accordion::Item` yielded as contextual component."
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "name": "HdsAccordionItem",
+      "description": "The `Accordion::Item` component, yielded as contextual component.",
+      "args": [
+        {
+          "name": "ariaLabel",
+          "type": "string",
+          "required": false,
+          "default": "\"Toggle display\"",
+          "description": "Accepts a string. The `ariaLabel` value is applied to the HTML button which controls visibility of the content block content."
+        },
+        {
+          "name": "containsInteractive",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Controls whether the entire toggle block is interactive for toggling the content display or whether only the chevron button itself is interactive which allows for adding other interactive content in the toggle area."
+        },
+        {
+          "name": "forceState",
+          "type": "'open' | 'close'",
+          "required": false,
+          "description": "Controls the state of an `Accordion::Item` after the initial render by overriding its current state."
+        },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Toggles the visibility of the content. To display content on page load, set the value to `true`."
+        },
+        {
+          "name": "isStatic",
+          "type": "boolean",
+          "required": false,
+          "default": "false",
+          "description": "Removes the ability to interact with the toggle and hides the chevron element when set to `true`."
+        },
+        {
+          "name": "onClickToggle",
+          "type": "(event: MouseEvent, ...args: any[]) => void",
+          "required": false,
+          "description": "Callback function invoked when the toggle is clicked."
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "required": false,
+          "default": "medium"
+        },
+        {
+          "name": "titleTag",
+          "type": "'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "required": false,
+          "default": "div"
+        },
+        {
+          "name": "type",
+          "type": "'card' | 'flush'",
+          "required": false,
+          "default": "card"
+        }
+      ],
+      "blocks": [
+        {
+          "name": "content",
+          "yields": [
+            {
+              "name": "close",
+              "type": "(...args: any[]) => void",
+              "kind": "function",
+              "description": "A function to programmatically close the `Accordion::Item`."
+            }
+          ]
+        },
+        {
+          "name": "toggle"
+        }
+      ]
+    }
+  ]
+}

packages/mcp/src/catalogs/components/schema.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright IBM Corp. 2021, 2025
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { z } from "zod";
+
+const catalogArgSchema = z.object({
+  name: z.string().min(1),
+  type: z.string().min(1),
+  required: z.boolean().optional(),
+  description: z.string().optional(),
+  default: z.string().optional(),
+});
+
+const catalogBlockYieldSchema = z.object({
+  name: z.string().min(1),
+  type: z.string().min(1),
+  kind: z.enum(["component", "function", "value"]).optional(),
+  componentName: z.string().min(1).optional(),
+  boundArgs: z.array(z.string().min(1)).optional(),
+  description: z.string().optional(),
+});
+
+const catalogBlockSchema = z.object({
+  name: z.string().min(1),
+  yields: z.array(catalogBlockYieldSchema).optional(),
+});
+
+const catalogDesignSchema = z.object({
+  figmaUrl: z.string().url(),
+  nodeId: z.string().min(1).optional(),
+  fileKey: z.string().min(1).optional(),
+});
+
+const catalogComponentSchema = z.object({
+  name: z.string().min(1),
+  description: z.string().min(1),
+  design: catalogDesignSchema.optional(),
+  args: z.array(catalogArgSchema).optional(),
+  blocks: z.array(catalogBlockSchema).optional(),
+});
+
+export const componentCatalogSchema = z.object({
+  updatedAt: z.string().datetime(),
+  components: z.array(catalogComponentSchema),
+});
+
+export type ComponentCatalog = z.infer<typeof componentCatalogSchema>;
+export type ComponentCatalogComponent = ComponentCatalog["components"][number];