@hubspot/ui-extensions-sdk-api-metadata 0.12.0 → 0.12.1

package/dist/internal/get-type-source.js

@@ -8,6 +8,378 @@ const componentSourceLookup = {
         exportName: 'AccordionProps',
         exportPath: '.',
     },
+    Alert: {
+        exportName: 'AlertProps',
+        exportPath: '.',
+    },
+    AutoGrid: {
+        exportName: 'AutoGridProps',
+        exportPath: '.',
+    },
+    BarChart: {
+        exportName: 'BarChartProps',
+        exportPath: '.',
+    },
+    Box: {
+        exportName: 'BoxProps',
+        exportPath: '.',
+    },
+    Button: {
+        exportName: 'ButtonProps',
+        exportPath: '.',
+    },
+    ButtonRow: {
+        exportName: 'ButtonRowProps',
+        exportPath: '.',
+    },
+    Card: {
+        exportName: 'CardProps',
+        exportPath: '.',
+    },
+    Center: {
+        exportName: 'CenterProps',
+        exportPath: './experimental',
+    },
+    Checkbox: {
+        exportName: 'CheckboxProps',
+        exportPath: '.',
+    },
+    CrmActionButton: {
+        exportName: 'CrmActionButtonProps',
+        exportPath: './crm',
+    },
+    CrmActionLink: {
+        exportName: 'CrmActionLinkProps',
+        exportPath: './crm',
+    },
+    CrmAssociationPivot: {
+        exportName: 'CrmAssociationPivotProps',
+        exportPath: './crm',
+    },
+    CrmAssociationPropertyList: {
+        exportName: 'CrmAssociationPropertyListProps',
+        exportPath: './crm',
+    },
+    CrmAssociationStageTracker: {
+        exportName: 'CrmAssociationStageTrackerProps',
+        exportPath: './crm',
+    },
+    CrmAssociationTable: {
+        exportName: 'CrmAssociationTableProps',
+        exportPath: './crm',
+    },
+    CrmCardActions: {
+        exportName: 'CrmCardActionsProps',
+        exportPath: './crm',
+    },
+    CrmDataHighlight: {
+        exportName: 'CrmDataHighlightProps',
+        exportPath: './crm',
+    },
+    CrmPropertyList: {
+        exportName: 'CrmPropertyListProps',
+        exportPath: './crm',
+    },
+    CrmReport: {
+        exportName: 'CrmReportProps',
+        exportPath: './crm',
+    },
+    CrmSimpleDeadline: {
+        exportName: 'CrmSimpleDeadlineProps',
+        exportPath: './crm',
+    },
+    CrmStageTracker: {
+        exportName: 'CrmStageTrackerProps',
+        exportPath: './crm',
+    },
+    CrmStatistics: {
+        exportName: 'CrmStatisticsProps',
+        exportPath: './crm',
+    },
+    CurrencyInput: {
+        exportName: 'CurrencyInputProps',
+        exportPath: '.',
+    },
+    DateInput: {
+        exportName: 'DateInputProps',
+        exportPath: '.',
+    },
+    DescriptionList: {
+        exportName: 'DescriptionListProps',
+        exportPath: '.',
+    },
+    DescriptionListItem: {
+        exportName: 'DescriptionListItemProps',
+        exportPath: '.',
+    },
+    Divider: {
+        exportName: 'DividerProps',
+        exportPath: '.',
+    },
+    Dropdown: {
+        exportName: 'DropdownProps',
+        exportPath: '.',
+    },
+    DropdownButtonItem: {
+        exportName: 'DropdownButtonItemProps',
+        exportPath: '.',
+    },
+    EmptyState: {
+        exportName: 'EmptyStateProps',
+        exportPath: '.',
+    },
+    ErrorState: {
+        exportName: 'ErrorStateProps',
+        exportPath: '.',
+    },
+    ExpandableText: {
+        exportName: 'ExpandableTextProps',
+        exportPath: './experimental',
+    },
+    FileInput: {
+        exportName: 'FileInputProps',
+        exportPath: './experimental',
+    },
+    Flex: {
+        exportName: 'FlexProps',
+        exportPath: '.',
+    },
+    Form: {
+        exportName: 'FormProps',
+        exportPath: '.',
+    },
+    Grid: {
+        exportName: 'GridProps',
+        exportPath: './experimental',
+    },
+    GridItem: {
+        exportName: 'GridItemProps',
+        exportPath: './experimental',
+    },
+    HeaderActions: {
+        exportName: 'HeaderActionsProps',
+        exportPath: '.',
+    },
+    Heading: {
+        exportName: 'HeadingProps',
+        exportPath: '.',
+    },
+    Icon: {
+        exportName: 'IconProps',
+        exportPath: '.',
+    },
+    Iframe: {
+        exportName: 'IframeProps',
+        exportPath: '.',
+    },
+    Illustration: {
+        exportName: 'IllustrationProps',
+        exportPath: '.',
+    },
+    Image: {
+        exportName: 'ImageProps',
+        exportPath: '.',
+    },
+    Inline: {
+        exportName: 'InlineProps',
+        exportPath: '.',
+    },
+    Input: {
+        exportName: 'InputProps',
+        exportPath: '.',
+    },
+    LineChart: {
+        exportName: 'LineChartProps',
+        exportPath: '.',
+    },
+    Link: {
+        exportName: 'LinkProps',
+        exportPath: '.',
+    },
+    List: {
+        exportName: 'ListProps',
+        exportPath: '.',
+    },
+    LoadingButton: {
+        exportName: 'LoadingButtonProps',
+        exportPath: '.',
+    },
+    LoadingSpinner: {
+        exportName: 'LoadingSpinnerProps',
+        exportPath: '.',
+    },
+    MediaObject: {
+        exportName: 'MediaObjectProps',
+        exportPath: './experimental',
+    },
+    Modal: {
+        exportName: 'ModalProps',
+        exportPath: '.',
+    },
+    ModalBody: {
+        exportName: 'ModalBodyProps',
+        exportPath: '.',
+    },
+    ModalFooter: {
+        exportName: 'ModalFooterProps',
+        exportPath: '.',
+    },
+    MultiSelect: {
+        exportName: 'MultiSelectProps',
+        exportPath: '.',
+    },
+    NumberInput: {
+        exportName: 'NumberInputProps',
+        exportPath: '.',
+    },
+    Panel: {
+        exportName: 'PanelProps',
+        exportPath: '.',
+    },
+    PanelBody: {
+        exportName: 'PanelBodyProps',
+        exportPath: '.',
+    },
+    PanelFooter: {
+        exportName: 'PanelFooterProps',
+        exportPath: '.',
+    },
+    PanelSection: {
+        exportName: 'PanelSectionProps',
+        exportPath: '.',
+    },
+    Popover: {
+        exportName: 'PopoverProps',
+        exportPath: './experimental',
+    },
+    PrimaryHeaderActionButton: {
+        exportName: 'HeaderActionButtonProps',
+        exportPath: '.',
+    },
+    ProgressBar: {
+        exportName: 'ProgressBarProps',
+        exportPath: '.',
+    },
+    RadioButton: {
+        exportName: 'RadioButtonProps',
+        exportPath: '.',
+    },
+    ScoreCircle: {
+        exportName: 'ScoreProps',
+        exportPath: '.',
+    },
+    SearchInput: {
+        exportName: 'SearchInputProps',
+        exportPath: '.',
+    },
+    SecondaryHeaderActionButton: {
+        exportName: 'HeaderActionButtonProps',
+        exportPath: '.',
+    },
+    Select: {
+        exportName: 'SelectProps',
+        exportPath: '.',
+    },
+    SettingsView: {
+        exportName: 'SettingsViewProps',
+        exportPath: './experimental',
+    },
+    Stack2: {
+        exportName: 'Stack2Props',
+        exportPath: './experimental',
+    },
+    Statistics: {
+        exportName: 'StatisticsProps',
+        exportPath: '.',
+    },
+    StatisticsItem: {
+        exportName: 'StatisticsItemProps',
+        exportPath: '.',
+    },
+    StatisticsTrend: {
+        exportName: 'StatisticsTrendProps',
+        exportPath: '.',
+    },
+    StatusTag: {
+        exportName: 'StatusTagProps',
+        exportPath: '.',
+    },
+    StepIndicator: {
+        exportName: 'StepIndicatorProps',
+        exportPath: '.',
+    },
+    StepperInput: {
+        exportName: 'StepperInputProps',
+        exportPath: '.',
+    },
+    Tab: {
+        exportName: 'TabProps',
+        exportPath: '.',
+    },
+    Table: {
+        exportName: 'TableProps',
+        exportPath: '.',
+    },
+    TableBody: {
+        exportName: 'TableElementProps',
+        exportPath: '.',
+    },
+    TableCell: {
+        exportName: 'TableCellProps',
+        exportPath: '.',
+    },
+    TableFooter: {
+        exportName: 'TableElementProps',
+        exportPath: '.',
+    },
+    TableHead: {
+        exportName: 'TableElementProps',
+        exportPath: '.',
+    },
+    TableHeader: {
+        exportName: 'TableHeaderProps',
+        exportPath: '.',
+    },
+    TableRow: {
+        exportName: 'TableElementProps',
+        exportPath: '.',
+    },
+    Tabs: {
+        exportName: 'TabsProps',
+        exportPath: '.',
+    },
+    Tag: {
+        exportName: 'TagProps',
+        exportPath: '.',
+    },
+    Text: {
+        exportName: 'TextProps',
+        exportPath: '.',
+    },
+    TextArea: {
+        exportName: 'TextAreaProps',
+        exportPath: '.',
+    },
+    Tile: {
+        exportName: 'TileProps',
+        exportPath: '.',
+    },
+    TimeInput: {
+        exportName: 'TimeInputProps',
+        exportPath: '.',
+    },
+    Toggle: {
+        exportName: 'ToggleProps',
+        exportPath: '.',
+    },
+    ToggleGroup: {
+        exportName: 'ToggleGroupProps',
+        exportPath: '.',
+    },
+    Tooltip: {
+        exportName: 'TooltipProps',
+        exportPath: '.',
+    },
 };
 /**
  * Gets the type source for a component.

package/dist/internal/render-prop-type.d.ts

@@ -4,12 +4,12 @@ import { AnalyzeResultReader, ApiNode } from '@hubspot/ts-export-types-reader';
  *
  * This context maintains state needed for rendering types correctly:
  * - typesReader: The reader for looking up referenced types
- * - foundTypeIds: A set of type IDs that have already been rendered, used to
- *                 prevent infinite recursion when rendering circular type references
+ * - typePath: An array tracking the current path of type nodes being rendered,
+ *             used to detect actual circular references (not just repeated types)
  */
 export interface RenderTypeContext {
     typesReader: AnalyzeResultReader;
-    foundTypeIds: Set<string>;
+    typePath: ApiNode[];
 }
 /**
  * Renders a prop's type as an HTML string.
@@ -28,4 +28,4 @@ export interface RenderTypeContext {
  * renderPropTypeToHtml(context, unionNode) // Returns: "<code>boolean</code> | <code>number</code> | <code>string</code>"
  * ```
  */
-export declare const renderPropTypeToHtml: (context: RenderTypeContext, propType: ApiNode) => string;
+export declare const renderPropTypeToJsx: (context: RenderTypeContext, propType: ApiNode) => string;

package/dist/internal/render-prop-type.js

@@ -1,10 +1,35 @@
-import { isBuiltInTypeReferenceNode, isExternalTypeReferenceNode, isFunctionNode, isInlinedTypeReferenceNode, isLiteralNode, isObjectNode, isPrimitiveNode, isTypeReferenceNode, isUnionNode, } from '@hubspot/ts-export-types-reader';
-import { wrapCodeInHtmlCodeTags } from "./utils/html-utils.js";
+import { isArrayNode, isBuiltInTypeReferenceNode, isExternalTypeReferenceNode, isFunctionNode, isIntersectionNode, isLiteralNode, isObjectNode, isPrimitiveNode, isTupleNode, isTypeReferenceNode, isUnionNode, } from '@hubspot/ts-export-types-reader';
+import { wrapCodeInHtmlCodeTags } from "./utils/jsx-utils.js";
+/**
+ * Renders an index signature node as a string representation.
+ *
+ * Converts an IndexSignatureNode into a TypeScript-like index signature string, e.g.:
+ * `[key: string]: any` or `readonly [key: number]: string`
+ *
+ * @param context - The rendering context containing the types reader
+ * @param indexSignature - The index signature node to render
+ * @returns A string representation of the index signature
+ *
+ * @example
+ * ```typescript
+ * renderIndexSignature(context, indexSignatureNode)
+ * // Returns: "[key: string]: any"
+ * // Returns: "readonly [key: number]: string"
+ * ```
+ */
+const renderIndexSignature = (context, indexSignature) => {
+    const readonly = indexSignature.isReadonly ? 'readonly ' : '';
+    const keyType = renderType(context, indexSignature.keyType);
+    const valueType = renderType(context, indexSignature.valueType);
+    return `${readonly}[key: ${keyType}]: ${valueType}`;
+};
 /**
  * Renders an object type node as a string representation.
  *
  * Converts an ObjectNode into a TypeScript-like object type string, e.g.:
- * `{ name: string, age: number }`
+ * `{ name: string, age: number }` or `{ [key: string]: any, name: string }`
+ *
+ * If the object has index signatures, they are rendered before regular properties.
  *
  * @param context - The rendering context containing the types reader
  * @param objectTypeNode - The object type node to render
@@ -14,19 +39,97 @@ import { wrapCodeInHtmlCodeTags } from "./utils/html-utils.js";
  * ```typescript
  * renderObjectType(context, objectNode)
  * // Returns: "{ name: string, age: number }"
+ * // Returns: "{ [key: string]: any }"
+ * // Returns: "{ readonly [key: number]: string, [name: string]: string, regularProperty: hello }"
  * ```
  */
 const renderObjectType = (context, objectTypeNode) => {
-    const { properties } = objectTypeNode;
+    const { properties, indexSignatures } = objectTypeNode;
+    const hasIndexSignatures = indexSignatures && indexSignatures.length > 0;
+    const hasProperties = properties.length > 0;
     // Empty object types render as just {}
-    if (properties.length === 0) {
+    if (!hasIndexSignatures && !hasProperties) {
         return `{}`;
     }
-    // Map each property to "name: type" format and join with commas
-    const propertyParts = properties.map((property) => {
-        return `${property.name}: ${renderType(context, property.type)}`;
+    const parts = [];
+    // Render index signatures first
+    if (hasIndexSignatures) {
+        const indexParts = indexSignatures.map((indexSig) => renderIndexSignature(context, indexSig));
+        parts.push(...indexParts);
+    }
+    // Then render regular properties
+    if (hasProperties) {
+        const propertyParts = properties.map((property) => {
+            return `${property.name}: ${renderType(context, property.type)}`;
+        });
+        parts.push(...propertyParts);
+    }
+    return `{ ${parts.join(', ')} }`;
+};
+/**
+ * Renders an array type node as a string representation.
+ *
+ * Converts an ArrayNode into a TypeScript array type string, e.g.:
+ * `string[]` or `Array<string>`
+ *
+ * @param context - The rendering context containing the types reader
+ * @param arrayNode - The array type node to render
+ * @returns A string representation of the array type
+ *
+ * @example
+ * ```typescript
+ * renderArrayType(context, arrayNode)
+ * // Returns: "string[]" for simple types
+ * // Returns: "Array<"a" | "b">" for union types
+ * // Returns: "Array<A & B>" for intersection types
+ * // Returns: "Array<[string, number]>" for tuple types
+ * ```
+ */
+const renderArrayType = (context, arrayNode) => {
+    const elementType = arrayNode.elementType;
+    const targetElementType = getTargetTypeNode(context, elementType);
+    // Use Array<T> syntax for union/intersection/tuple types to avoid ambiguity with operator precedence
+    // e.g., Array<"red" | "green" | "blue"> instead of ("red" | "green" | "blue")[]
+    // e.g., Array<A & B> instead of A & B[]
+    // e.g., Array<[string, number]> instead of [string, number][]
+    if (isUnionNode(targetElementType) ||
+        isIntersectionNode(targetElementType) ||
+        isTupleNode(targetElementType)) {
+        return `Array<${renderType(context, elementType)}>`;
+    }
+    // Use T[] syntax for simple types
+    return `${renderType(context, elementType)}[]`;
+};
+/**
+ * Renders a tuple type node as a string representation.
+ *
+ * Converts a TupleNode into a TypeScript tuple type string, e.g.:
+ * `[string, number]` or `[string, number, ...boolean[]]`
+ *
+ * @param context - The rendering context containing the types reader
+ * @param tupleNode - The tuple type node to render
+ * @returns A string representation of the tuple type
+ *
+ * @example
+ * ```typescript
+ * renderTupleType(context, tupleNode)
+ * // Returns: "[string, number]"
+ * ```
+ */
+const renderTupleType = (context, tupleNode) => {
+    const elementParts = tupleNode.elements.map((element) => {
+        const renderedType = renderType(context, element.type);
+        // Handle rest elements (e.g., ...string[])
+        if (element.isRest) {
+            return `...${renderedType}`;
+        }
+        // Handle optional elements (e.g., string?)
+        if (element.isOptional) {
+            return `${renderedType}?`;
+        }
+        return renderedType;
     });
-    return `{ ${propertyParts.join(', ')} }`;
+    return `[${elementParts.join(', ')}]`;
 };
 /**
  * Renders a function type node as a string representation.
@@ -67,10 +170,12 @@ const renderFunction = (context, functionNode) => {
  * - Type references (aliases and interfaces)
  * - Union types
  *
- * The function uses the context to track already-seen type IDs to prevent
- * infinite recursion when rendering circular type references.
+ * The function uses the context to track the current path of type nodes being rendered,
+ * which allows it to detect actual circular references (where a type references itself
+ * in its own definition) while still expanding types that appear multiple times in
+ * different parts of the type tree.
  *
- * @param context - The rendering context containing the types reader and found type IDs
+ * @param context - The rendering context containing the types reader and current type path
  * @param typeNode - The API node representing the type to render
  * @returns A string representation of the type (e.g., "string", "Array<number>", "string | number")
  */
@@ -88,6 +193,14 @@ const renderType = (context, typeNode) => {
     if (isExternalTypeReferenceNode(typeNode)) {
         return typeNode.typeString;
     }
+    // Handle array types
+    if (isArrayNode(typeNode)) {
+        return renderArrayType(context, typeNode);
+    }
+    // Handle tuple types
+    if (isTupleNode(typeNode)) {
+        return renderTupleType(context, typeNode);
+    }
     // Handle function types
     if (isFunctionNode(typeNode)) {
         return renderFunction(context, typeNode);
@@ -96,10 +209,6 @@ const renderType = (context, typeNode) => {
     if (isObjectNode(typeNode)) {
         return renderObjectType(context, typeNode);
     }
-    // Handle inlined type references - recursively render the inner type
-    if (isInlinedTypeReferenceNode(typeNode)) {
-        return renderType(context, typeNode.type);
-    }
     // Handle built-in generic types (Array<T>, Promise<T>, etc.)
     if (isBuiltInTypeReferenceNode(typeNode)) {
         const { name, typeArguments } = typeNode;
@@ -113,24 +222,29 @@ const renderType = (context, typeNode) => {
     }
     // Handle type references (aliases, interfaces, etc.)
     if (isTypeReferenceNode(typeNode)) {
-        // Check if we've already seen this type ID to prevent infinite recursion
-        // If we have, return the type string representation instead of expanding
-        if (context.foundTypeIds.has(typeNode.typeId)) {
+        // Look up the referenced type definition
+        const referencedNode = context.typesReader.findReferencedTypeById(typeNode.typeId);
+        // Check if this type node is already in the current path (actual recursion)
+        // If yes, return the type string instead of expanding to prevent infinite loop
+        if (context.typePath.includes(referencedNode)) {
             return typeNode.typeString;
         }
-        // Mark this type as found before recursing
-        context.foundTypeIds.add(typeNode.typeId);
-        // Look up the referenced type definition and render it
-        const referencedNode = context.typesReader.findReferencedTypeById(typeNode.typeId);
-        return renderType(context, referencedNode);
+        // Add to path before descending
+        context.typePath.push(referencedNode);
+        // Render the referenced type (may recurse through many paths)
+        const result = renderType(context, referencedNode);
+        // Remove from path after returning (ensures we pop even if renderType took complex paths)
+        context.typePath.pop();
+        return result;
     }
-    // Handle union types (e.g., string | number | boolean)
-    if (isUnionNode(typeNode)) {
-        // Render each type in the union
-        const renderedUnionParts = typeNode.types.map((unionType) => renderType(context, unionType));
-        // Sort union parts alphabetically for consistent output
-        renderedUnionParts.sort((a, b) => a.localeCompare(b));
-        return renderedUnionParts.join(' \\| ');
+    // Handle union and intersection types (e.g., (string | number | boolean) and (A & B & C))
+    if (isUnionNode(typeNode) || isIntersectionNode(typeNode)) {
+        // Render each type in the union or intersection
+        const renderedParts = typeNode.types.map((type) => renderType(context, type));
+        // Sort parts alphabetically for consistent output
+        renderedParts.sort((a, b) => a.localeCompare(b));
+        const separator = isUnionNode(typeNode) ? '|' : '&';
+        return renderedParts.join(` ${separator} `);
     }
     throw new Error(`Unsupported type node: ${typeNode.kind}`);
 };
@@ -165,11 +279,6 @@ const hasTypeArgs = (typeNode) => isNonEmptyArray(typeNode.typeArguments);
  * @returns The resolved target type node
  */
 const getTargetTypeNode = (context, typeNode) => {
-    // For inlined type references, preserve the node if it has type args (generics)
-    // Otherwise, resolve to the inner type
-    if (isInlinedTypeReferenceNode(typeNode)) {
-        return hasTypeArgs(typeNode) ? typeNode : typeNode.type;
-    }
     // For type references, preserve the node if it has type args (generics)
     // Otherwise, look up and return the referenced type definition
     if (isTypeReferenceNode(typeNode)) {
@@ -180,6 +289,20 @@ const getTargetTypeNode = (context, typeNode) => {
     // For other node types, return as-is
     return typeNode;
 };
+const renderPropTypeToJsxHelper = (context, propType) => {
+    // Resolve references to other types to the actual type node
+    // This handles type aliases and ensures generics are preserved
+    const targetPropType = getTargetTypeNode(context, propType);
+    // Special handling for union types: render each member recursively and sort
+    // This ensures nested unions are properly formatted
+    if (isUnionNode(targetPropType)) {
+        const renderedUnionTypes = targetPropType.types.map((currentType) => renderPropTypeToJsxHelper(context, currentType));
+        // Sort union parts alphabetically for consistent output
+        renderedUnionTypes.sort((a, b) => a.localeCompare(b));
+        return renderedUnionTypes.join(' | ');
+    }
+    return wrapCodeInHtmlCodeTags(renderType(context, targetPropType));
+};
 /**
  * Renders a prop's type as an HTML string.
  *
@@ -197,17 +320,6 @@ const getTargetTypeNode = (context, typeNode) => {
  * renderPropTypeToHtml(context, unionNode) // Returns: "<code>boolean</code> | <code>number</code> | <code>string</code>"
  * ```
  */
-export const renderPropTypeToHtml = (context, propType) => {
-    // Resolve references to other types to the actual type node
-    // This handles type aliases and ensures generics are preserved
-    const targetPropType = getTargetTypeNode(context, propType);
-    // Special handling for union types: render each member recursively and sort
-    // This ensures nested unions are properly formatted
-    if (isUnionNode(targetPropType)) {
-        const renderedUnionTypes = targetPropType.types.map((currentType) => renderPropTypeToHtml(context, currentType));
-        // Sort union parts alphabetically for consistent output
-        renderedUnionTypes.sort((a, b) => a.localeCompare(b));
-        return renderedUnionTypes.join(' | ');
-    }
-    return wrapCodeInHtmlCodeTags(renderType(context, targetPropType));
+export const renderPropTypeToJsx = (context, propType) => {
+    return `<>${renderPropTypeToJsxHelper(context, propType)}</>`;
 };