Component catalog - Accordion

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

@@ -0,0 +1,138 @@
+{
+  "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 the accordion group, allowing all items to be expanded or collapsed simultaneously."
+        },
+        {
+          "name": "size",
+          "type": "'small' | 'medium' | 'large'",
+          "required": false,
+          "default": "medium",
+          "description": "Specifies the size of the accordion."
+        },
+        {
+          "name": "titleTag",
+          "type": "'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
+          "required": false,
+          "default": "div",
+          "description": "Specifies the HTML tag used to wrap the content of each Accordion Item's toggle block."
+        },
+        {
+          "name": "type",
+          "type": "'card' | 'flush'",
+          "required": false,
+          "default": "card",
+          "description": "Determines the style of the accordion."
+        }
+      ],
+      "blocks": [
+        {
+          "name": "default",
+          "yields": [
+            {
+              "name": "Item",
+              "type": "WithBoundArgs< typeof HdsAccordionItem, 'titleTag' | 'size' | 'type' | 'forceState' >",
+              "kind": "component",
+              "componentName": "HdsAccordionItem",
+              "boundArgs": [
+                "titleTag",
+                "size",
+                "type",
+                "forceState"
+              ],
+              "description": "The `Accordion::Item` component, 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];