@stainless-api/docs-ui 0.1.0-beta.5 → 0.1.0-beta.51

package/src/components/properties.tsx

@@ -1,130 +0,0 @@
-import React, { type ReactNode } from 'react';
-import { useLanguage, useSettings } from '../contexts';
-import { useComponents } from '../contexts/use-components';
-import style from '../style';
-import { ArrowDownWideNarrowIcon, ArrowUpNarrowWideIcon } from 'lucide-react';
-
-export type PropertyToggleProps = {
-  target: string;
-};
-
-export function PropertyToggle({ target }: PropertyToggleProps) {
-  return (
-    <span
-      className={style.ExpandToggle}
-      data-stldocs-property-toggle-expanded="false"
-      data-stldocs-property-toggle-target={target}
-    >
-      <span className={style.ExpandToggleContent}>
-        Expand <ArrowDownWideNarrowIcon className={style.Icon} size={16} />
-      </span>
-      <span className={style.ExpandToggleContent}>
-        Collapse <ArrowUpNarrowWideIcon className={style.Icon} size={16} />
-      </span>
-    </span>
-  );
-}
-
-export type PropertyDescriptionProps = {
-  description?: string;
-};
-
-export function PropertyDescription({ description }: PropertyDescriptionProps) {
-  const { Markdown } = useComponents();
-
-  if (description)
-    return (
-      <div className={style.PropertyDescription}>
-        <Markdown content={description} />
-      </div>
-    );
-}
-
-export type PropertyProps = {
-  id?: string;
-  name?: ReactNode;
-  typeName?: ReactNode;
-  badges?: ReactNode;
-  type?: ReactNode;
-  description?: string;
-  expand?: boolean;
-  deprecated?: boolean | string;
-  additional?: ReactNode;
-  declaration?: ReactNode;
-  constraints?: ReactNode;
-  children?: ReactNode;
-};
-
-export function Property({
-  id,
-  name,
-  typeName,
-  badges,
-  type,
-  declaration,
-  description,
-  deprecated,
-  expand,
-  additional,
-  constraints,
-  children,
-}: PropertyProps) {
-  const Docs = useComponents();
-  const language = useLanguage();
-
-  const { collapseDescription, types } = useSettings().properties ?? {};
-
-  const textContent = (
-    <>
-      {typeof deprecated === 'string' && <div className={style.PropertyDeprecatedMessage}>{deprecated}</div>}
-      {description && <Docs.PropertyDescription description={description} />}
-      {constraints && <div className={style.PropertyContent}>{constraints}</div>}
-    </>
-  );
-
-  const rich = (
-    <>
-      <div className={style.PropertyDeclaration}>
-        {deprecated && <span className={style.PropertyDeprecated}>Deprecated</span>}
-        {declaration}
-        {badges && <span className={style.PropertyBadges}>{badges}</span>}
-      </div>
-      {collapseDescription === false ? textContent : null}
-    </>
-  );
-
-  const simple = (
-    <>
-      {name && (
-        <div className={style.PropertyHeader}>
-          {deprecated && <span className={style.PropertyDeprecated}>Deprecated</span>}
-          {name && <span className={style.PropertyName}>{name}</span>}
-          {typeName && <span className={style.PropertyTypeName}>{typeName}</span>}
-          {badges && <span className={style.PropertyBadges}>{badges}</span>}
-        </div>
-      )}
-      {type && <div className={style.PropertyType}>{type}</div>}
-      {collapseDescription === false ? textContent : null}
-    </>
-  );
-
-  const content = (
-    <div id={id} className={style.PropertyInfo}>
-      {types === 'simple' ? simple : rich}
-    </div>
-  );
-
-  return (
-    <div className={style.Property} data-stldocs-language={language}>
-      {children || (collapseDescription !== false && description) ? (
-        <Docs.Expander summary={content} muted={!children} open={expand}>
-          {collapseDescription !== false ? textContent : null}
-          {additional}
-          {children && <div className={style.PropertyChildren}>{children}</div>}
-        </Docs.Expander>
-      ) : (
-        content
-      )}
-    </div>
-  );
-}

package/src/components/scripts/dropdown.ts

@@ -1,78 +0,0 @@
-export function initDropdown({
-  dropdownId,
-  onSelect,
-  isFixed,
-}: {
-  dropdownId: string;
-  onSelect?: (value: string) => void;
-  isFixed?: boolean;
-}) {
-  const dropdown = document.getElementById(dropdownId);
-  if (!dropdown) return;
-
-  const button = dropdown.querySelector('button');
-  const menu = dropdown.querySelector('.stldocs-dropdown-menu');
-
-  if (!button || !menu) return;
-
-  let isOpen = false;
-
-  function toggleDropdown() {
-    if (!button || !menu) return;
-
-    isOpen = !isOpen;
-
-    if (isOpen) {
-      if (isFixed) {
-        // Calculate position for fixed dropdown
-        const buttonRect = button.getBoundingClientRect();
-        (menu as HTMLElement).style.top = `${buttonRect.bottom}px`;
-        (menu as HTMLElement).style.left = `${buttonRect.left}px`;
-      }
-      menu.classList.add('open');
-      button.setAttribute('aria-expanded', 'true');
-    } else {
-      menu.classList.remove('open');
-      button.setAttribute('aria-expanded', 'false');
-    }
-  }
-
-  function closeDropdown() {
-    if (!button || !menu) return;
-
-    isOpen = false;
-    menu.classList.remove('open');
-    button.setAttribute('aria-expanded', 'false');
-  }
-
-  // Toggle dropdown on button click
-  button.addEventListener('click', (e) => {
-    toggleDropdown();
-  });
-
-  // Close dropdown when clicking outside
-  document.addEventListener('click', (e) => {
-    if (!dropdown.contains(e.target as Node)) {
-      closeDropdown();
-    }
-  });
-
-  // Close dropdown when pressing Escape
-  document.addEventListener('keydown', (e) => {
-    if (e.key === 'Escape' && isOpen) {
-      closeDropdown();
-    }
-  });
-
-  // Close dropdown when clicking on dropdown items
-  const dropdownItems = menu.querySelectorAll('.stldocs-dropdown-item');
-  dropdownItems.forEach((item) => {
-    item.addEventListener('click', () => {
-      closeDropdown();
-      const selectedValue = item.getAttribute('data-dropdown-value');
-      if (selectedValue && onSelect) {
-        onSelect(selectedValue);
-      }
-    });
-  });
-}

package/src/components/sdk.tsx

@@ -1,402 +0,0 @@
-import * as React from 'react';
-import type * as SDKJSON from '~/lib/json-spec-v2/types';
-import { useComponents } from '../contexts/use-components';
-import {
-  useLanguageComponents,
-  useDeclaration,
-  useLanguage,
-  useSpec,
-  useContentPanelLayout,
-  useSettings,
-  useNavigation,
-} from '../contexts';
-import style from '../style';
-import { DocsLanguage, getLanguageSnippet } from '../routing';
-import { BookOpen, Copy, Github } from 'lucide-react';
-import clsx from 'clsx';
-import {
-  GoIcon,
-  JavaIcon,
-  KotlinIcon,
-  PythonIcon,
-  RubyIcon,
-  TerraformIcon,
-  TypescriptIcon,
-  CurlIcon,
-  PowershellIcon,
-} from './icons';
-import { Button } from '@stainless-api/ui-primitives';
-
-export type PropertyModelContextType = {
-  modelPath?: string;
-  propertyPath?: string;
-};
-
-export const PropertyModelContext = React.createContext<PropertyModelContextType>(null);
-export function usePropertyModel() {
-  return React.useContext(PropertyModelContext);
-}
-
-export type ReferenceNestingContextType = string[];
-export const ReferenceNestingContext = React.createContext<ReferenceNestingContextType>([]);
-export function useReferenceNesting() {
-  return React.useContext(ReferenceNestingContext);
-}
-
-export type SDKSnippetLanguagesType = Record<SDKJSON.SnippetLanguage, { name: string; icon: string }>;
-
-export const SDKSnippetLanguages: SDKSnippetLanguagesType = {
-  'node.default': { name: 'TypeScript', icon: 'typescript' },
-  'typescript.default': { name: 'TypeScript', icon: 'typescript' },
-  'python.default': { name: 'Python', icon: 'python' },
-  'go.default': { name: 'Go', icon: 'go' },
-  'java.default': { name: 'Java', icon: 'java' },
-  'kotlin.default': { name: 'Kotlin', icon: 'kotlin' },
-  'http.curl': { name: 'cURL', icon: 'http' },
-  'http.powershell': { name: 'Powershell', icon: 'powershell' },
-  'terraform.default': { name: 'Terraform', icon: 'terraform' },
-  'ruby.default': { name: 'Ruby', icon: 'ruby' },
-};
-
-export type TransformRequestSnippetFn = ({
-  snippet,
-  language,
-}: {
-  snippet: string;
-  language: DocsLanguage;
-}) => string;
-
-type SDKChildrenProps = {
-  paths: SDKJSON.ID[];
-  expand?: boolean;
-  depth?: number;
-};
-
-export function SDKChildren({ paths, expand, depth }: SDKChildrenProps) {
-  const Docs = useComponents();
-
-  return (
-    <div className={style.Properties}>
-      {paths.map((path, i) => (
-        <Docs.SDKDeclaration path={path} key={i} expand={expand} depth={depth} />
-      ))}
-    </div>
-  );
-}
-
-type SDKDeclarationProps = {
-  path: string;
-  expand?: boolean;
-  depth?: number;
-};
-
-export function SDKDeclaration({ path, expand, depth = 0 }: SDKDeclarationProps) {
-  const Lang = useLanguageComponents();
-  const Docs = useComponents();
-  const decl = useDeclaration(path);
-  const settings = useSettings();
-  const model = usePropertyModel();
-  const nesting = useReferenceNesting();
-  const { selectedPath } = useNavigation();
-
-  if (!decl) return null;
-
-  if (decl.kind.endsWith('Reference')) {
-    const refId = decl['type']['$ref'];
-    if (refId && refId !== path && !nesting.includes(refId)) {
-      return (
-        <ReferenceNestingContext.Provider value={[...nesting, refId]}>
-          <SDKDeclaration path={refId} expand={expand} depth={depth} />
-        </ReferenceNestingContext.Provider>
-      );
-    }
-  }
-
-  const isUnion = 'childrenParentSchema' in decl && ['enum', 'union'].includes(decl.childrenParentSchema);
-  const id = model?.propertyPath ? `${model.propertyPath} + ${path}` : path;
-  const shouldExpand =
-    (selectedPath.startsWith(path) && nesting.length < 1) ||
-    (settings.properties?.expandDepth && depth <= settings.properties?.expandDepth && !isUnion) ||
-    expand;
-
-  const content = (
-    <Lang.Property decl={decl}>
-      {({ ...props }) => (
-        <Docs.Property
-          id={id}
-          expand={shouldExpand}
-          constraints={decl['constraints'] && <Docs.SDKConstraints constraints={decl['constraints']} />}
-          declaration={<Lang.Declaration decl={decl} />}
-          description={decl['docstring']}
-          deprecated={decl.deprecated}
-          {...props}
-        >
-          {'children' in decl &&
-            decl.children.length > 0 &&
-            (settings.properties?.includeModelProperties !== false || !('modelPath' in decl)) && (
-              <>
-                {isUnion && <div className={style.PropertyAnnotation}>Accepts one of the following:</div>}
-                <Docs.SDKChildren paths={decl.children} depth={depth + 1} />
-              </>
-            )}
-        </Docs.Property>
-      )}
-    </Lang.Property>
-  );
-
-  if ('modelPath' in decl) {
-    const value = { modelPath: decl.modelPath, propertyPath: decl.stainlessPath };
-    return <PropertyModelContext.Provider value={value}>{content}</PropertyModelContext.Provider>;
-  }
-
-  return content;
-}
-
-export type SDKConstraintsProps = {
-  constraints?: Record<string, any>;
-};
-
-export function SDKConstraints({ constraints }: SDKConstraintsProps) {
-  if (constraints)
-    return (
-      <div className={style.PropertyConstraints}>
-        {Object.entries(constraints).map(([name, value]) => (
-          <div className={style.PropertyConstraint} key={name}>
-            <span className={style.PropertyConstraintName}>{name}</span>
-            <span className={style.PropertyConstraintValue}>{value}</span>
-          </div>
-        ))}
-      </div>
-    );
-}
-
-type SDKIconProps = {
-  language: SDKJSON.SnippetLanguage;
-  size?: number;
-};
-
-const snippetIcons: Record<
-  SDKJSON.SnippetLanguage,
-  ({ className }: { className?: string }) => React.JSX.Element
-> = {
-  'node.default': TypescriptIcon,
-  'typescript.default': TypescriptIcon,
-  'go.default': GoIcon,
-  'python.default': PythonIcon,
-  'terraform.default': TerraformIcon,
-  'http.curl': CurlIcon,
-  'http.powershell': PowershellIcon,
-  'ruby.default': RubyIcon,
-  'java.default': JavaIcon,
-  'kotlin.default': KotlinIcon,
-};
-
-export function SDKIcon({ language }: SDKIconProps) {
-  const LangIcon = snippetIcons[language];
-  if (!LangIcon) return null;
-  return <LangIcon className={clsx(style.Icon, language.split('.').shift())} />;
-}
-
-export type SDKRequestTitleProps = {
-  snippetLanguage: SDKJSON.SnippetLanguage;
-};
-
-export function SDKRequestTitle({ snippetLanguage }: SDKRequestTitleProps) {
-  const languageName = SDKSnippetLanguages[snippetLanguage]?.name;
-
-  return (
-    <span className={style.SnippetRequestTitleLanguage}>
-      <SDKIcon language={snippetLanguage} /> {languageName}
-    </span>
-  );
-}
-
-type SDKExampleProps = {
-  method: SDKJSON.Method;
-  transformRequestSnippet?: TransformRequestSnippetFn;
-};
-
-export function SDKExample({ method, transformRequestSnippet }: SDKExampleProps) {
-  // TODO: support language variants in snippets
-  const Docs = useComponents();
-  const language = useLanguage();
-  const snippetLanguage = getLanguageSnippet(language);
-
-  return (
-    <Docs.Snippet
-      requestTitle={<Docs.SDKRequestTitle snippetLanguage={snippetLanguage} />}
-      method={method}
-      transformRequestSnippet={transformRequestSnippet}
-    />
-  );
-}
-
-export type SDKMethodProps = {
-  method: SDKJSON.Method;
-  transformRequestSnippet?: TransformRequestSnippetFn;
-};
-
-export function SDKMethodHeader({ method }: SDKMethodProps) {
-  const Docs = useComponents();
-  const Lang = useLanguageComponents();
-  const decl = useDeclaration(method.stainlessPath);
-
-  return (
-    <Docs.MethodHeader
-      title={method.summary ?? method.title}
-      signature={<Lang.MethodSignature decl={decl} />}
-      badges={method.deprecated && <Docs.Badge id="deprecated">Deprecated</Docs.Badge>}
-    >
-      <Docs.MethodRoute httpMethod={method.httpMethod} endpoint={method.endpoint.split(' ', 2).at(-1)} />
-    </Docs.MethodHeader>
-  );
-}
-
-export function SDKMethodInfo({ method }: SDKMethodProps) {
-  const Docs = useComponents();
-  const Lang = useLanguageComponents();
-  const decl = useDeclaration(method.stainlessPath);
-  const spec = useSpec();
-  const language = useLanguage();
-
-  if (Lang.MethodInfo) return <Lang.MethodInfo decl={decl} />;
-
-  function shouldExpand(items: SDKJSON.ID[]) {
-    if (items.length > 1) return false;
-    const decl = spec?.decls?.[language]?.[items[0]];
-    return decl && 'children' in decl && decl.children.length > 0;
-  }
-
-  return (
-    <Docs.MethodInfo
-      parameters={
-        'paramsChildren' in decl &&
-        Array.isArray(decl.paramsChildren) &&
-        decl.paramsChildren.length > 0 && (
-          <Docs.SDKChildren expand={shouldExpand(decl.paramsChildren)} paths={decl.paramsChildren} />
-        )
-      }
-      returns={
-        'responseChildren' in decl &&
-        decl.responseChildren.length > 0 && (
-          <Docs.SDKChildren expand={shouldExpand(decl.responseChildren)} paths={decl.responseChildren} />
-        )
-      }
-    />
-  );
-}
-
-export function SDKMethod({ method, transformRequestSnippet }: SDKMethodProps) {
-  const Docs = useComponents();
-  const decl = useDeclaration(method?.stainlessPath);
-  const layout = useContentPanelLayout();
-
-  if (!decl) return;
-
-  return (
-    <Docs.Method
-      id={method.stainlessPath}
-      header={<Docs.SDKMethodHeader method={method} />}
-      className={clsx({
-        [style.MethodSinglePane]: layout === 'single-pane',
-        [style.MethodDoublePane]: layout === 'double-pane',
-      })}
-    >
-      <div className={style.MethodContentColumn}>
-        <Docs.MethodDescription description={method.description} />
-        <Docs.SDKMethodInfo method={method} />
-      </div>
-      <div className={style.MethodExample + ' not-content'}>
-        <Docs.SDKExample method={method} transformRequestSnippet={transformRequestSnippet} />
-      </div>
-      <div className={style.MethodResponseColumn}>
-        <h5>Returns Examples</h5>
-        <Docs.SnippetResponse responses={method.exampleResponses} />
-      </div>
-    </Docs.Method>
-  );
-}
-
-export type SDKModelProps = {
-  model: SDKJSON.Model;
-};
-
-export function SDKModel({ model }: SDKModelProps) {
-  const Docs = useComponents();
-  const decl = useDeclaration(`${model.stainlessPath} > (schema)`);
-
-  if (!decl) return null;
-
-  return (
-    <div className={style.Model} tabIndex={0}>
-      <div className={style.ResourceContentProperties}>
-        <Docs.SDKDeclaration path={`${model.stainlessPath} > (schema)`} />
-      </div>
-    </div>
-  );
-}
-
-type SDKReferenceProps = {
-  stainlessPath: string;
-  children?: React.ReactNode;
-};
-
-export function SDKReference({ stainlessPath, children }: SDKReferenceProps) {
-  const Docs = useComponents();
-
-  if (!stainlessPath || !stainlessPath.endsWith('(schema)')) return children;
-
-  const link = (
-    <span className={style.TypeReference}>
-      <Docs.Link stainlessPath={stainlessPath}>{children}</Docs.Link>
-    </span>
-  );
-
-  return link;
-}
-
-type SDKLanguageBlockProps = {
-  language: DocsLanguage;
-  version: string;
-  install: string;
-  links: {
-    repo: string;
-    docs: string;
-  };
-};
-
-export function SDKLanguageBlock({ language, version, install, links }: SDKLanguageBlockProps) {
-  const Docs = useComponents();
-  const lang = `${language}.default` as SDKJSON.SnippetLanguage;
-
-  return (
-    <div className={style.LanguageBlock}>
-      <div className={style.LanguageBlockContent}>
-        <div className={style.LanguageBlockContentIcon}>
-          <Docs.SDKIcon language={lang} size={24} />
-        </div>
-        <div className={style.LanguageBlockContentInfo}>
-          <div className={style.LanguageBlockContentInfoLanguage}>{Docs.SDKSnippetLanguages[lang].name}</div>
-          <div className={style.LanguageBlockContentInfoVersion}>{version}</div>
-        </div>
-      </div>
-
-      <div className={style.LanguageBlockInstall} data-stldocs-copy-parent>
-        <pre data-stldocs-copy-content>{install}</pre>{' '}
-        <button data-stldocs-snippet-copy>
-          <Copy size={16} className={style.Icon} />
-        </button>
-      </div>
-
-      <div className={style.LanguageBlockLinks}>
-        <Button href={links.repo} variant="outline">
-          <Button.Icon icon={Github} />
-        </Button>
-        <Button href={links.docs} variant="outline">
-          <Button.Icon icon={BookOpen} />
-          <Button.Label>Read Docs</Button.Label>
-        </Button>
-      </div>
-    </div>
-  );
-}

package/src/components/sidebar.tsx

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import type * as SDKJSON from '~/lib/json-spec-v2/types';
-import { useNavigation } from '../contexts';
-import { useComponents } from '../contexts/use-components';
-import { ChevronDown, ChevronRight } from 'lucide-react';
-import style from '../style';
-import { MethodIconBadge } from './method';
-import { isResourceEmpty } from '../utils';
-
-type SidebarExpanderProps = {
-  open?: boolean;
-  summary: React.ReactNode;
-  children?: React.ReactNode;
-};
-
-export function SidebarExpander({ open, summary, children }: SidebarExpanderProps) {
-  return (
-    <details className={style.SidebarExpander} open={open}>
-      <summary className={style.ExpanderSummary}>
-        <div className={style.ExpanderSummaryContent}>{summary}</div>
-        <div className={style.ExpanderSummaryIcon}>
-          <ChevronRight size={16} strokeWidth={1} className={style.Icon} />
-          <ChevronDown size={16} strokeWidth={1} className={style.Icon} />
-        </div>
-      </summary>
-      <div className={style.ExpanderContent}>{children}</div>
-    </details>
-  );
-}
-
-export type SidebarMethodProps = {
-  method: SDKJSON.Method;
-};
-
-export function SidebarMethod({ method }: SidebarMethodProps) {
-  const Docs = useComponents();
-  const { selectedPath } = useNavigation();
-
-  return (
-    <div className={style.SidebarMethod} data-selected={method.stainlessPath === selectedPath}>
-      <MethodIconBadge httpMethod={method.httpMethod} />
-      <Docs.Link stainlessPath={method.stainlessPath}>{method.summary}</Docs.Link>
-    </div>
-  );
-}
-
-export type SidebarResourceProps = {
-  resource: SDKJSON.Resource;
-};
-
-export function SidebarResource({ resource }: SidebarResourceProps) {
-  const Docs = useComponents();
-  const { selectedPath, navigationPath } = useNavigation();
-  const subresources = Object.values(resource.subresources).map((sub) => (
-    <SidebarResource resource={sub} key={sub.stainlessPath} />
-  ));
-
-  const methods = Object.values(resource.methods).map((method) => (
-    <SidebarMethod method={method} key={method.stainlessPath} />
-  ));
-
-  const hasChildren = subresources.length > 0 || methods.length > 0;
-
-  const title = (
-    <div className={style.SidebarResourceTitle}>
-      <Docs.Link stainlessPath={resource.stainlessPath}>{resource.title}</Docs.Link>
-    </div>
-  );
-
-  return (
-    <div className={style.SidebarResource} data-selected={resource.stainlessPath === selectedPath}>
-      {hasChildren ? (
-        <SidebarExpander summary={title} open={true}>
-          {methods}
-          {subresources}
-        </SidebarExpander>
-      ) : (
-        title
-      )}
-    </div>
-  );
-}
-
-export type SidebarProps = {
-  resources: SDKJSON.Resource[];
-  selectedPath?: string;
-};
-
-export function Sidebar({ resources }: SidebarProps) {
-  return (
-    <div className={`${style.Root} ${style.Sidebar}`}>
-      {resources
-        .filter((resource) => !isResourceEmpty(resource))
-        .map((resource) => (
-          <SidebarResource resource={resource} key={resource.stainlessPath} />
-        ))}
-    </div>
-  );
-}