@stainless-api/docs-ui 0.1.0-beta.14 → 0.1.0-beta.15

package/src/components/snippets.tsx

@@ -4,7 +4,7 @@ import { useDeclaration, useHighlight, useLanguage, useSnippet } from '../contex
 import { useComponents } from '../contexts/use-components';
 import style from '../style';
 import clsx from 'clsx';
-import type * as SDKJSON from '~/lib/json-spec-v2/types';
+import type * as SDKJSON from '@stainless/sdk-json';
 import type { TransformRequestSnippetFn } from './sdk';
 import { Button } from '@stainless-api/ui-primitives';
 
@@ -59,15 +59,24 @@ export function Snippet({ requestTitle, method, transformRequestSnippet }: Snipp
   const language = useLanguage();
   const [CopyButtonIcon, setCopyIcon] = React.useState<LucideIcon>(CopyIcon);
 
-  let snippet = useSnippet(method.stainlessPath, null, language === 'http' ? 'curl' : 'default');
-  const decl = useDeclaration(method.stainlessPath);
+  const originalSnippet = useSnippet(
+    method.stainlessPath,
+    undefined,
+    language === 'http' ? 'curl' : 'default',
+  );
+  const decl = useDeclaration(method.stainlessPath, false);
+
+  if (!originalSnippet) {
+    console.warn(`Snippet not found for method '${method.stainlessPath}'`);
+    return null;
+  }
 
-  const signature = 'qualified' in decl ? decl.qualified : undefined;
+  const signature = decl && 'qualified' in decl ? decl.qualified : undefined;
   const responses = method.exampleResponses;
 
-  if (transformRequestSnippet) {
-    snippet = transformRequestSnippet({ snippet, language });
-  }
+  const snippet = transformRequestSnippet
+    ? transformRequestSnippet({ snippet: originalSnippet, language })
+    : originalSnippet;
 
   async function handleCopy() {
     try {
@@ -113,9 +122,15 @@ export function SnippetResponse({ responses }: { responses: SDKJSON.Method['exam
 
   const mappedResponses = Object.keys(responses)
     .map((key) => {
+      const responseContent = responses[key];
+      if (!responseContent) return null;
+
       // Get the first response type ie application/json or text/plain
-      const responseType = Object.keys(responses[key])[0];
-      const response = responses[key][responseType];
+      const responseType = Object.keys(responseContent)[0];
+      if (!responseType) return null;
+
+      const response = responseContent[responseType];
+      if (!response) return null;
 
       const examples = response?.examples;
 
@@ -123,6 +138,8 @@ export function SnippetResponse({ responses }: { responses: SDKJSON.Method['exam
 
       // Get the first example type, ie Example or html
       const exampleType = Object.keys(examples)[0];
+      if (!exampleType) return null;
+
       let value = examples[exampleType]?.value;
 
       if (!value) return null;

package/src/contexts/component-generics.tsx

@@ -1,6 +1,7 @@
 // This file should never import from ../components or ../languages to avoid circular dependencies
 
 import * as React from 'react';
+import { createStrictContext } from '../hooks/use-strict-context';
 
 type DeepPartialMap<L> = { [K in keyof L]?: Partial<L[K]> };
 
@@ -9,13 +10,10 @@ export type ComponentsContextType<C, L> = {
   language: L;
 };
 
-const ComponentContext = React.createContext<ComponentsContextType<any, any> | null>(null);
-ComponentContext.displayName = 'ComponentContext';
+const [Provider, useComponentContext] = createStrictContext<ComponentsContextType<any, any>>('Component');
 
-export function useComponents<C = unknown>() {
-  const ctx = React.useContext(ComponentContext);
-  if (!ctx) throw new Error('useComponents must be used within a ComponentContext.Provider');
-  return ctx.components as C;
+export function useComponents<C = unknown>(): C {
+  return useComponentContext().components as C;
 }
 
 export function customizeComponents<C, L>(
@@ -24,13 +22,10 @@ export function customizeComponents<C, L>(
 ): { components: C; language: L } {
   const mergedComponents = { ...defaults.components, ...(overrides.components ?? {}) } as C;
 
-  const mergedLanguage = Object.keys(defaults.language as Record<string, unknown>).reduce(
-    (acc, key) => {
-      acc[key] = { ...(defaults.language as any)[key], ...(overrides.language?.[key] ?? {}) };
-      return acc;
-    },
-    {} as any as L,
-  );
+  const mergedLanguage = Object.keys(defaults.language as Record<string, unknown>).reduce((acc, key) => {
+    acc[key] = { ...(defaults.language as any)[key], ...((overrides.language as any)?.[key] ?? {}) };
+    return acc;
+  }, {} as any);
 
   return { components: mergedComponents, language: mergedLanguage };
 }
@@ -42,7 +37,7 @@ export function ComponentProvider<C, L>({
   value: ComponentsContextType<C, L>;
   children: React.ReactNode;
 }) {
-  return <ComponentContext.Provider value={value}>{children}</ComponentContext.Provider>;
+  return <Provider value={value}>{children}</Provider>;
 }
 
-export { ComponentContext };
+export { useComponentContext };

package/src/contexts/docs.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Spec, SpecLanguage } from '~/lib/json-spec-v2/types';
+import type { LanguageDeclNodes, SnippetLanguage, Spec, SpecLanguage } from '@stainless/sdk-json';
 
 export type ContentPanelLayout = 'double-pane' | 'single-pane';
 export type PropertySettingsType = {
@@ -40,13 +40,24 @@ export function useSettings() {
 }
 
 export function useSnippet(stainlessPath: string, language?: SpecLanguage, variant?: string) {
-  const snippetLanguage = [language ?? useLanguage(), variant ?? 'default'].join('.');
+  const defaultLanguage = useLanguage();
+  const snippetLanguage = [language ?? defaultLanguage, variant ?? 'default'].join('.') as SnippetLanguage;
 
   return useSpec()?.snippets?.[snippetLanguage]?.[stainlessPath];
 }
 
-export function useDeclaration(stainlessPath: string, language?: SpecLanguage) {
-  return useSpec()?.decls?.[language ?? useLanguage()]?.[stainlessPath];
+type Declaration = LanguageDeclNodes[SpecLanguage];
+export function useDeclaration<Required extends boolean>(
+  stainlessPath: string,
+  required: Required,
+  language?: SpecLanguage,
+): (Required extends true ? never : undefined) | Declaration {
+  const defaultLanguage = useLanguage();
+  const decl = useSpec()?.decls?.[language ?? defaultLanguage]?.[stainlessPath];
+  if (required && !decl) {
+    throw new Error(`Declaration not found for '${stainlessPath}'`);
+  }
+  return decl!;
 }
 
 export function useResource(name: string) {

package/src/contexts/index.tsx

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { ComponentContext } from './component-generics';
 import { useLanguage } from './docs';
 import { LanguageComponentDefinition } from '../languages';
+import { useComponentContext } from './component-generics';
 
 // DO NOT re-export component contexts from here. Only export generics.
 export * from './navigation';
@@ -10,8 +9,12 @@ export * from './component-generics';
 export * from './search';
 export * from './docs';
 
-export function useLanguageComponents() {
+export function useLanguageComponents(): LanguageComponentDefinition {
   const language = useLanguage();
-  const context = React.useContext(ComponentContext);
-  return context.language[language] as LanguageComponentDefinition;
+  const context = useComponentContext();
+  const definition = context.language[language];
+  if (!definition) {
+    throw new Error(`Language component definition not found for language: ${language}`);
+  }
+  return definition;
 }

package/src/contexts/markdown.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { useLanguage } from './docs';
 
-const HighlightLanguageMappings = {
+const HighlightLanguageMappings: Record<string, string> = {
   node: 'typescript',
   http: 'bash',
 };
 
 export type MarkdownContext = {
-  highlight?: (content: string, language?: string) => string | Promise<string>;
-  render?: (content: string) => string;
+  highlight: (content: string, language: string) => string | Promise<string>;
+  render: (content: string) => string;
 };
 
 export const MarkdownContext = React.createContext<MarkdownContext>({
@@ -23,15 +23,16 @@ export function useRenderMarkdown(content?: string) {
   return React.useMemo(() => (content ? render(content) : undefined), [content, render]);
 }
 
-export function useHighlight(content?: string, language?: string) {
+export function useHighlight(content: string, language?: string) {
   const { highlight } = React.useContext(MarkdownContext);
-  const lang = language ?? useLanguage();
+  const defaultLanguage = useLanguage();
+  const lang = language ?? defaultLanguage;
 
   return React.useMemo(() => {
     const highlightLanguage = HighlightLanguageMappings[lang] ?? lang;
     const rendered = highlight(content, highlightLanguage);
     return typeof rendered === 'string' ? rendered : React.use(rendered);
-  }, [content, language, highlight]);
+  }, [content, highlight, lang]);
 }
 
 export type MarkdownProviderProps = MarkdownContext & {

package/src/contexts/search.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { createStrictContext } from '../hooks/use-strict-context';
 import { search } from '../search/providers/algolia';
 import { SearchParams, SearchSettings } from '../search/types';
 
@@ -8,11 +9,9 @@ export type SearchContextType = {
   pageFind?: string;
 };
 
-const SearchContext = React.createContext<SearchContextType>(null);
+const [Provider, useSearchContext] = createStrictContext<SearchContextType>('SearchContext');
 
-export function useSearchContext() {
-  return React.useContext(SearchContext);
-}
+export { useSearchContext };
 
 export function useSearch() {
   const { settings } = useSearchContext();
@@ -24,5 +23,5 @@ export type SearchProviderProps = SearchContextType & {
 };
 
 export function SearchProvider({ children, ...props }: SearchProviderProps) {
-  return <SearchContext value={props}>{children}</SearchContext>;
+  return <Provider value={props}>{children}</Provider>;
 }

package/src/hooks/use-strict-context.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export function createStrictContext<T>(displayName: string) {
+  const Context = React.createContext<T | null>(null);
+  Context.displayName = displayName;
+
+  function useStrictContext(): T {
+    const context = React.useContext(Context);
+    if (context === null) {
+      throw new Error(`use${displayName} must be used within a ${displayName}Provider`);
+    }
+    return context;
+  }
+
+  return [Context.Provider, useStrictContext] as const;
+}

package/src/languages/go.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type * as AST from '~/lib/json-spec-v2/GoAST';
+import { GoAST as AST } from '@stainless/sdk-json';
 
 import { useComponents } from '../contexts/use-components';
 import { useLanguageComponents } from '../contexts';
@@ -43,7 +43,7 @@ export function Type({ type }: TypeProps) {
 
       return (
         <span className={style.Type}>
-          <SDKReference stainlessPath={type.$ref}>{type.typeName}</SDKReference>
+          {type.$ref ? <SDKReference stainlessPath={type.$ref}>{type.typeName}</SDKReference> : type.typeName}
           {params && params.length > 0 ? (
             <>
               <span className={style.TypeBracket}>{'['}</span>
@@ -179,7 +179,7 @@ export function MethodSignature({ decl }: MethodSignatureProps) {
 
 export type PropertyProps = {
   decl: AST.GoDeclaration;
-  children?: PropertyFn;
+  children: PropertyFn;
 };
 
 export function Property({ decl, children }: PropertyProps) {

package/src/languages/http.tsx

@@ -1,4 +1,4 @@
-import type * as AST from '~/lib/json-spec-v2/HttpAST';
+import { HttpAST as AST } from '@stainless/sdk-json';
 import { useDeclaration, useLanguage, useLanguageComponents, useSpec } from '../contexts';
 import { useComponents } from '../contexts/use-components';
 import style from '../style';
@@ -11,7 +11,7 @@ const ComplexTypes: Partial<Record<AST.HttpType['kind'], string>> = {
   HttpTypeIntersection: 'intersection',
 };
 
-const constStyle = {
+const constStyle: Record<string, string> = {
   string: style.LiteralString,
   number: style.LiteralNumeric,
   boolean: style.LiteralBoolean,
@@ -34,17 +34,23 @@ function Identifier({ name }: { name: string }) {
 function TypePreview({ path }: { path: string }) {
   const spec = useSpec();
   const language = useLanguage();
-  const decl = useDeclaration(path);
+  const decl = useDeclaration(path, false);
   const { Join } = useComponents();
 
-  if (!(decl && 'children' in decl && decl.children.length > 0) || decl['type']?.['kind'] === 'HttpTypeUnion')
+  if (
+    !(decl && 'children' in decl && decl.children && decl.children.length > 0) ||
+    ('type' in decl && decl['type'] && 'kind' in decl['type'] && decl['type']['kind'] === 'HttpTypeUnion')
+  )
     return;
 
-  const items = decl.children.map((prop, key) => (
-    <span key={key} className={style.TypePropertyName}>
-      <span className={style.TextIdentifier}>{spec?.decls?.[language]?.[prop]?.['key']}</span>
-    </span>
-  ));
+  const items = decl.children.map((prop, key) => {
+    const decl = spec?.decls?.[language]?.[prop];
+    return (
+      <span key={key} className={style.TypePropertyName}>
+        <span className={style.TextIdentifier}>{decl && 'key' in decl ? decl?.['key'] : null}</span>
+      </span>
+    );
+  });
 
   return (
     <span className={style.TypePreview} data-stldocs-type-preview="properties">
@@ -138,7 +144,7 @@ export function Type({ type }: TypeProps) {
       if (
         name === 'Record' &&
         type.typeParameters?.length === 2 &&
-        type.typeParameters?.at(0).kind === 'HttpTypeString'
+        type.typeParameters?.at(0)!.kind === 'HttpTypeString'
       )
         return (
           <>
@@ -148,7 +154,7 @@ export function Type({ type }: TypeProps) {
 
       return (
         <span className={style.Type}>
-          <SDKReference stainlessPath={type.$ref}>{name}</SDKReference>
+          <SDKReference stainlessPath={type.$ref!}>{name}</SDKReference>
           {params && params.length > 0 && (
             <>
               <span className={style.TypeBracket}>{'<'}</span>
@@ -158,14 +164,14 @@ export function Type({ type }: TypeProps) {
               <span className={style.TypeBracket}>{'>'}</span>
             </>
           )}
-          <TypePreview path={type.$ref} />
+          <TypePreview path={type.$ref!} />
         </span>
       );
     }
 
-    case 'HttpTypeObject':
+    case 'HttpTypeObject': {
       const items = type.members.map(({ ident }) => (
-        <span className={style.TypePropertyName}>
+        <span className={style.TypePropertyName} key={ident}>
           <Identifier name={ident} />
         </span>
       ));
@@ -185,6 +191,7 @@ export function Type({ type }: TypeProps) {
           </span>
         </span>
       );
+    }
   }
 }
 
@@ -193,28 +200,29 @@ export type MethodSignatureProps = {
 };
 
 export function MethodSignature({ decl }: MethodSignatureProps) {
+  void decl;
   return null;
 }
 
 export function MethodInfo({ decl, children }: MethodSignatureProps & { children: React.ReactNode }) {
   const Docs = useComponents();
 
-  const params = Object.entries(decl.paramsChildren)
-    .filter(([_, value]) => value.length)
+  const params = Object.entries(decl.paramsChildren!)
+    .filter(([, value]) => value.length)
     .map(([location, value]) => (
       <React.Fragment key={location}>
         <div className={style.MethodParameters} data-stldocs-property-group={location.at(0)}>
           <h5>
-            {location.at(0).toUpperCase()}
+            {location.at(0)!.toUpperCase()}
             {location.slice(1)} Parameters
-            <PropertyToggle target={location.at(0)} />
+            <PropertyToggle target={location.at(0)!} />
           </h5>
           <Docs.SDKChildren paths={value} />
         </div>
       </React.Fragment>
     ));
 
-  if (decl.bodyParamsChildren?.['application/json']?.length > 0)
+  if ((decl.bodyParamsChildren?.['application/json']?.length ?? 0) > 0)
     params.push(
       <div className={style.MethodInfoSection}>
         <h5>
@@ -222,7 +230,7 @@ export function MethodInfo({ decl, children }: MethodSignatureProps & { children
           <PropertyToggle target="body" />
         </h5>
         <div className={style.MethodParameters} data-stldocs-property-group="body">
-          <Docs.SDKChildren paths={decl.bodyParamsChildren?.['application/json']} />
+          <Docs.SDKChildren paths={decl.bodyParamsChildren?.['application/json'] ?? []} />
         </div>
       </div>,
     );
@@ -231,14 +239,14 @@ export function MethodInfo({ decl, children }: MethodSignatureProps & { children
     <div className={style.MethodInfo}>
       {children && <div className={style.MethodContent}>{children}</div>}
       {params.length > 0 && params}
-      {decl.responseChildren.length > 0 && (
+      {(decl.responseChildren?.length ?? 0) > 0 && (
         <div className={style.MethodInfoSection}>
           <h5>
             Returns
             <PropertyToggle target="returns" />
           </h5>
           <div className={style.MethodReturns} data-stldocs-property-group="returns">
-            <Docs.SDKChildren paths={decl.responseChildren} />
+            <Docs.SDKChildren paths={decl.responseChildren ?? []} />
           </div>
         </div>
       )}
@@ -256,7 +264,7 @@ function renderVariantInfo(type: AST.HttpType) {
 
 export type PropertyProps = {
   decl: AST.HttpDeclaration;
-  children?: PropertyFn;
+  children: PropertyFn;
 };
 
 export function Property({ decl, children }: PropertyProps) {

package/src/languages/index.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-import type { DeclarationNode, Type } from '~/lib/json-spec-v2/types';
+import type { DeclarationNode, Type } from '@stainless/sdk-json';
 
 import * as typescript from './typescript';
 import * as java from './java';
@@ -17,10 +17,10 @@ export const kotlin = java;
 export type PropertyFn = (params: PropertyProps) => ReactNode;
 
 export interface LanguageComponentDefinition {
-  Declaration(props: { decl: DeclarationNode });
-  Property(props: { decl: DeclarationNode; children: PropertyFn });
-  TypeName(props: { type: Type; optional?: boolean });
-  Type(props: { type: Type; optional?: boolean });
-  MethodSignature(props: { decl: DeclarationNode });
-  MethodInfo?(props: { decl: DeclarationNode; children?: ReactNode });
+  Declaration(props: { decl: DeclarationNode }): ReactNode;
+  Property(props: { decl: DeclarationNode; children: PropertyFn }): ReactNode;
+  TypeName(props: { type: Type; optional?: boolean }): ReactNode;
+  Type(props: { type: Type; optional?: boolean }): ReactNode;
+  MethodSignature(props: { decl: DeclarationNode }): ReactNode;
+  MethodInfo?(props: { decl: DeclarationNode; children?: ReactNode }): ReactNode;
 }

package/src/languages/java.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type * as AST from '~/lib/json-spec-v2/JavaAST';
+import { JavaAST as AST } from '@stainless/sdk-json';
 
 import { useLanguage, useLanguageComponents } from '../contexts';
 import { useComponents } from '../contexts/use-components';
@@ -13,7 +13,7 @@ function showFullType(type: AST.JavaType) {
   );
 }
 
-const constStyle = {
+const constStyle: Record<string, string> = {
   string: style.LiteralString,
   number: style.LiteralNumeric,
   boolean: style.LiteralBoolean,
@@ -46,7 +46,7 @@ export function Type({ type, optional }: TypeProps) {
 
       return (
         <span className={style.Type}>
-          <SDKReference stainlessPath={type.$ref}>{name}</SDKReference>
+          <SDKReference stainlessPath={type.$ref!}>{name}</SDKReference>
           {params && params.length > 0 ? (
             <>
               <span className={style.TypeBracket}>{'<'}</span>
@@ -186,7 +186,7 @@ export function MethodSignature({ decl }: MethodSignatureProps) {
 
 export type PropertyProps = {
   decl: AST.JavaDeclaration;
-  children?: PropertyFn;
+  children: PropertyFn;
 };
 
 export function Property({ decl, children }: PropertyProps) {

package/src/languages/python.tsx

@@ -1,19 +1,21 @@
 import * as React from 'react';
-import type * as AST from '~/lib/json-spec-v2/PythonAST';
+import { PythonAST as AST } from '@stainless/sdk-json';
 import { useLanguageComponents } from '../contexts';
 import { useComponents } from '../contexts/use-components';
 import style from '../style';
 import { PropertyFn } from '.';
 
-const constStyle = {
+const constStyle: Record<string, string> = {
   string: style.LiteralString,
   number: style.LiteralNumeric,
   boolean: style.LiteralBoolean,
 };
 
-function showFullType(type: AST.PythonType) {
+function showFullType(type: AST.PythonType): boolean {
   if (type.kind !== 'PythonTypeReference') return false;
-  return type.typeName === 'Optional' ? showFullType(type.typeParameters[0]) : type.typeParameters.length > 0;
+  return type.typeName === 'Optional'
+    ? showFullType(type.typeParameters![0]!)
+    : type.typeParameters!.length > 0;
 }
 
 type TypeProps = {
@@ -26,7 +28,7 @@ export function TypeName({ type }: TypeProps) {
   if (type.kind === 'PythonTypeReference') {
     switch (type.typeName) {
       case 'Optional':
-        return <Lang.TypeName type={type.typeParameters[0]} />;
+        return <Lang.TypeName type={type.typeParameters![0]!} />;
       case 'List':
       case 'Iterable':
       case 'Literal':
@@ -64,7 +66,7 @@ export function Type({ type }: TypeProps) {
     case 'PythonTypeLiteral':
       return (
         <span className={style.Type}>
-          <span className={constStyle[typeof type.literal.value]}>{JSON.stringify(type.literal.value)}</span>
+          <span className={constStyle[typeof type.literal.value]!}>{JSON.stringify(type.literal.value)}</span>
         </span>
       );
 
@@ -97,7 +99,7 @@ export function Type({ type }: TypeProps) {
       return (
         <span className={style.Type}>
           <span className={type.typeName === 'Optional' ? style.TypeArray : ''}>
-            <SDKReference stainlessPath={type.$ref}>{type.typeName}</SDKReference>
+            <SDKReference stainlessPath={type.$ref!}>{type.typeName}</SDKReference>
           </span>
           {params && params.length > 0 && (
             <>
@@ -166,7 +168,7 @@ export function MethodSignature({ decl }: MethodSignatureProps) {
 
 export type PropertyProps = {
   decl: AST.PythonDeclaration;
-  children?: PropertyFn;
+  children: PropertyFn;
 };
 
 export function Property({ decl, children }: PropertyProps) {
@@ -205,7 +207,7 @@ export function Declaration({ decl }: DeclarationProps) {
   if (!decl) return;
 
   switch (decl.kind) {
-    case 'PythonDeclProperty':
+    case 'PythonDeclProperty': {
       const nullable =
         decl.type.kind === 'PythonTypeReference' &&
         decl.type.typeName === 'Optional' &&
@@ -229,6 +231,7 @@ export function Declaration({ decl }: DeclarationProps) {
           )}
         </>
       );
+    }
 
     case 'PythonDeclClass':
       return (

package/src/languages/ruby.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type * as AST from '~/lib/json-spec-v2/RubyAST';
+import { RubyAST as AST } from '@stainless/sdk-json';
 import { useDeclaration, useLanguage, useLanguageComponents, useSpec } from '../contexts';
 import { useComponents } from '../contexts/use-components';
 import style from '../style';
@@ -36,17 +36,23 @@ const VALID_IDENTIFIER = /^[_A-Za-z][_A-Za-z0-9]*$/;
 function TypePreview({ path }: { path: string }) {
   const spec = useSpec();
   const language = useLanguage();
-  const decl = useDeclaration(path);
+  const decl = useDeclaration(path, false);
   const { Join } = useComponents();
 
-  if (!(decl && 'children' in decl && decl.children.length > 0) || decl['type']?.['kind'] === 'RubyTypeUnion')
+  if (
+    !(decl && 'children' in decl && decl.children && decl.children.length > 0) ||
+    ('type' in decl && decl['type'] && 'kind' in decl['type'] && decl['type']?.['kind'] === 'RubyTypeUnion')
+  )
     return;
 
-  const items = decl.children.map((prop, key) => (
-    <span key={key} className={style.TypePropertyName}>
-      <span className={style.TextIdentifier}>{spec?.decls?.[language]?.[prop]?.['ident']}</span>
-    </span>
-  ));
+  const items = decl.children.map((prop, key) => {
+    const p = spec?.decls?.[language]?.[prop];
+    return (
+      <span key={key} className={style.TypePropertyName}>
+        <span className={style.TextIdentifier}>{p && 'ident' in p ? p['ident'] : null}</span>
+      </span>
+    );
+  });
 
   return (
     <span className={style.TypePreview} data-stldocs-type-preview="properties">
@@ -110,6 +116,7 @@ export function Type({ type }: TypeProps) {
             </span>
           );
       }
+      break;
 
     case 'RubyTypeArray':
       return (
@@ -139,8 +146,8 @@ export function Type({ type }: TypeProps) {
       if (!type.typeParameters || type.typeParameters.length === 0)
         return (
           <span className={style.Type}>
-            <SDKReference stainlessPath={type.$ref}>{name}</SDKReference>
-            <TypePreview path={type.$ref} />
+            <SDKReference stainlessPath={type.$ref!}>{name}</SDKReference>
+            <TypePreview path={type.$ref!} />
           </span>
         );
 
@@ -148,13 +155,13 @@ export function Type({ type }: TypeProps) {
 
       return (
         <span className={style.Type}>
-          <SDKReference stainlessPath={type.$ref}>{name}</SDKReference>
+          <SDKReference stainlessPath={type.$ref!}>{name}</SDKReference>
           <span className={style.TypeBracket}>{'<'}</span>
           <Join items={typeParameters}>
             <span className={style.TextOperator}>, </span>
           </Join>
           <span className={style.TypeBracket}>{'>'}</span>
-          <TypePreview path={type.$ref} />
+          <TypePreview path={type.$ref!} />
         </span>
       );
     }
@@ -248,7 +255,7 @@ export function MethodSignature({ decl }: MethodSignatureProps) {
 
 export type PropertyProps = {
   decl: AST.RubyDeclaration;
-  children?: PropertyFn;
+  children: PropertyFn;
 };
 
 export function Property({ decl, children }: PropertyProps) {