npm package: @hubspot/ui-extensions-sdk-api-metadata
Description: UI Extensions SDK API Metadata
Latest version: 0.13.0

# @hubspot/ui-extensions-sdk-api-metadata

[![npm version](https://img.shields.io/npm/v/@hubspot/ui-extensions-sdk-api-metadata.svg)](https://www.npmjs.com/package/@hubspot/ui-extensions-sdk-api-metadata)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)

This package provides structured component props documentation for the [HubSpot UI Extensions SDK](https://www.npmjs.com/package/@hubspot/ui-extensions). It extracts TypeScript type information from SDK components and converts it into a documentation-friendly format with rendered HTML suitable for embedding in documentation sites.

## ⚠️ Internal Use Only

**This package is intended for internal HubSpot tooling and is not designed for direct use by extension developers.** If you're building UI extensions for HubSpot, please use the [`@hubspot/ui-extensions`](https://www.npmjs.com/package/@hubspot/ui-extensions) package instead.

## Purpose

This package serves as a data source for documentation generation tools, providing structured documentation for component props including type information, descriptions, default values, and related links.

## Installation

```bash
npm install @hubspot/ui-extensions-sdk-api-metadata
```

## Usage

```typescript
import {
  getComponentPropsDocumentation,
  ComponentName,
} from '@hubspot/ui-extensions-sdk-api-metadata';

// Get documentation for a specific component's props
const accordionPropsDocs = getComponentPropsDocumentation(
  ComponentName.Accordion
);

// Each prop documentation includes:
accordionPropsDocs.forEach((propDoc) => {
  console.log(propDoc.name); // Prop name (e.g., "open")
  console.log(propDoc.required); // Whether the prop is required
  console.log(propDoc.typeJsx); // Type as JSX string (e.g., "<><code>boolean</code></>")
  console.log(propDoc.descriptionJsx); // Description as JSX string
  console.log(propDoc.defaultValueJsx); // Optional default value as JSX string
  console.log(propDoc.seeJsxItems); // Optional array of related links as JSX strings
});
```

## API

### `getComponentPropsDocumentation(componentName: ComponentName): ComponentPropDocumentation[]`

Retrieves structured documentation for all props of the specified component.

**Parameters:**
- `componentName` - The component to get documentation for (from the `ComponentName` enum)

**Returns:** An array of `ComponentPropDocumentation` objects, sorted with required props first, then alphabetically by name.

### `ComponentPropDocumentation`

Interface for component prop documentation:

| Property | Type | Description |
|----------|------|-------------|
| `name` | `string` | The name of the prop |
| `required` | `boolean` | Whether the prop is required |
| `typeJsx` | `string` | The type rendered as JSX-embeddable HTML |
| `descriptionJsx` | `string` | The description rendered as JSX-embeddable HTML |
| `defaultValueJsx?` | `string` | Optional default value rendered as JSX-embeddable HTML |
| `seeJsxItems?` | `string[]` | Optional array of related links rendered as JSX-embeddable HTML |

### `ComponentName`

Enum of available component names in the SDK (e.g., `ComponentName.Accordion`).

## Related Packages

- [`@hubspot/ui-extensions`](https://www.npmjs.com/package/@hubspot/ui-extensions) — The main SDK for building HubSpot UI extensions
- [`@hubspot/ts-export-types-reader`](https://www.npmjs.com/package/@hubspot/ts-export-types-reader) — Runtime reader for extracted type metadata

## License

MIT © HubSpot