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

package/src/components/method.tsx

@@ -1,144 +0,0 @@
-import * as React from 'react';
-import type { ReactNode } from 'react';
-import { useComponents } from '../contexts/use-components';
-import { X, ArrowDownLeft, ArrowUpRight, LucideIcon } from 'lucide-react';
-import style from '../style';
-import clsx from 'clsx';
-import { PropertyToggle } from './properties';
-
-export const HttpMethods = ['get', 'head', 'put', 'delete', 'post', 'patch'];
-export type HTTPMethod = (typeof HttpMethods)[number];
-
-export const HttpMethodIcons: Record<HTTPMethod, LucideIcon> = {
-  get: ArrowDownLeft,
-  put: ArrowUpRight,
-  post: ArrowUpRight,
-  patch: ArrowUpRight,
-  delete: X,
-};
-
-export type MethodIconProps = {
-  httpMethod: string;
-  showName?: boolean;
-};
-
-export function MethodIconBadge({ httpMethod, showName }: MethodIconProps) {
-  if (!HttpMethods.includes(httpMethod)) return null;
-
-  return (
-    <span
-      className={clsx(style.MethodRouteHttpMethod, style.MethodRouteHttpMethodIconOnly)}
-      data-method={httpMethod}
-    >
-      {React.createElement(HttpMethodIcons[httpMethod], {
-        size: 14,
-        strokeWidth: 3,
-        className: style.Icon,
-      })}
-      {showName && httpMethod}
-    </span>
-  );
-}
-
-export type MethodHeaderProps = {
-  title: ReactNode;
-  signature?: ReactNode;
-  badges?: ReactNode;
-  children?: ReactNode;
-};
-
-export function MethodHeader({ title, badges, signature, children }: MethodHeaderProps) {
-  return (
-    <div className={style.MethodHeader}>
-      <h5 className={style.MethodTitle}>{title}</h5>
-      {badges && <div className={style.MethodBadges}>{badges}</div>}
-      {signature}
-      {children}
-    </div>
-  );
-}
-
-export type MethodRouteProps = {
-  httpMethod?: string;
-  endpoint?: string | ReactNode;
-  iconOnly?: boolean;
-};
-
-export function MethodRoute({ httpMethod, endpoint, iconOnly }: MethodRouteProps) {
-  return (
-    <div className={style.MethodRoute}>
-      <MethodIconBadge httpMethod={httpMethod} showName={!iconOnly} />
-      {endpoint && <span className={style.MethodRouteEndpoint}>{endpoint}</span>}
-    </div>
-  );
-}
-
-export type MethodDescriptionProps = {
-  description?: string;
-};
-
-export function MethodDescription({ description }: MethodDescriptionProps) {
-  const { Markdown } = useComponents();
-
-  if (description)
-    return (
-      <div className={style.MethodDescription}>
-        <Markdown content={description} />
-      </div>
-    );
-}
-
-export type MethodInfoProps = {
-  children?: ReactNode;
-  parameters?: ReactNode;
-  returns?: ReactNode;
-};
-
-export function MethodInfo({ children, parameters, returns }: MethodInfoProps) {
-  return (
-    <div className={style.MethodInfo}>
-      {children && <div className={style.MethodContent}>{children}</div>}
-
-      {parameters && (
-        <div className={style.MethodInfoSection}>
-          <h5>
-            Parameters
-            <PropertyToggle target="parameters" />
-          </h5>
-          <div className={style.MethodParameters} data-stldocs-property-group="parameters">
-            {parameters}
-          </div>
-        </div>
-      )}
-
-      {returns && (
-        <div className={style.MethodInfoSection}>
-          <h5>
-            Returns
-            <PropertyToggle target="returns" />
-          </h5>
-          <div className={style.MethodReturns} data-stldocs-property-group="returns">
-            {returns}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export type MethodProps = {
-  id?: string;
-  header?: ReactNode;
-  children?: ReactNode;
-} & React.HTMLProps<HTMLDivElement>;
-
-export function Method({ id, header, children, className, ...props }: MethodProps) {
-  const Docs = useComponents();
-
-  return (
-    <div id={id} className={clsx(style.Method, className)} tabIndex={0} {...props}>
-      {header}
-      <div className={style.MethodBody}>{children}</div>
-    </div>
-  );
-}

package/src/components/overview.tsx

@@ -1,159 +0,0 @@
-import * as React from 'react';
-import { ChevronRight } from 'lucide-react';
-import type * as SDKJSON from '~/lib/json-spec-v2/types';
-
-import { flatResources, getResourceFromSpec } from '../utils';
-import { useDeclaration, useLanguage, useLanguageComponents, useSpec } from '../contexts';
-import { useComponents } from '../contexts/use-components';
-
-import style from '../style';
-import { PropertyToggle } from './properties';
-import { Markdown } from './primitives';
-import { parseStainlessPath } from '../routing';
-
-export type SDKResourceProps = {
-  resource: SDKJSON.Resource;
-  parents?: SDKJSON.Resource[];
-};
-
-export function SDKResourceHeader({ resource, parents }: SDKResourceProps) {
-  // const language = useLanguage();
-
-  const segments = parents?.map((parent, index) => (
-    <span className={style.ResourceTitleSegment} key={parent.stainlessPath}>
-      {parent.title}
-      {index < parents.length && <ChevronRight size={16} className={style.Icon} />}
-    </span>
-  ));
-
-  if (!segments && !resource.description) {
-    return null;
-  }
-
-  return (
-    <div className={style.ResourceHeader}>
-      {segments && (
-        <h4 id={resource.stainlessPath} className={style.ResourceTitle}>
-          {segments}
-          <span className={style.ResourceTitleSegment}>{resource.title}</span>
-        </h4>
-      )}
-      {resource.description && (
-        <div className={style.ResourceDescription}>
-          <Markdown content={resource.description} />
-        </div>
-      )}
-    </div>
-  );
-}
-
-export type SDKMethodSummaryProps = {
-  method: SDKJSON.Method;
-};
-
-export function SDKMethodSummary({ method }: SDKMethodSummaryProps) {
-  const Docs = useComponents();
-  const Lang = useLanguageComponents();
-  const decl = useDeclaration(method.stainlessPath);
-
-  return (
-    <Docs.MethodHeader
-      title={<Docs.Link stainlessPath={method.stainlessPath}>{method.summary ?? method.title}</Docs.Link>}
-      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)} />
-      {/* Removing temporarily per design review */}
-      {/* <Docs.MethodDescription description={method.description} /> */}
-    </Docs.MethodHeader>
-  );
-}
-
-export function SDKResource({ resource, parents, showModels }: SDKResourceProps & { showModels?: boolean }) {
-  const Docs = useComponents();
-  const language = useLanguage();
-  const spec = useSpec();
-
-  const methods = Object.values(resource.methods).filter(
-    (method) => spec.decls?.[language]?.[method.stainlessPath],
-  );
-
-  const models = Object.values(resource.models).filter(
-    (model) => spec.decls?.[language]?.[`${model.stainlessPath} > (schema)`],
-  );
-
-  return (
-    <div className={style.Resource}>
-      <div className={style.ResourceContent}>
-        <Docs.SDKResourceHeader resource={resource} parents={parents} />
-        {methods.length > 0 && (
-          <div className={style.ResourceContentGroup}>
-            {methods
-              .toSorted((first, second) => first.name.localeCompare(second.name))
-              .map((method) => (
-                <div className={style.MethodSummary} key={method.stainlessPath}>
-                  <Docs.SDKMethodSummary method={method} />
-                </div>
-              ))}
-          </div>
-        )}
-
-        {showModels !== false && models.length > 0 && (
-          <div className={style.ResourceContentGroup} data-stldocs-property-group="models">
-            <h5 className={style.ResourceContentGroupModelTitle}>
-              Models
-              <PropertyToggle target="models" />
-            </h5>
-            {models.map((model) => (
-              <Docs.SDKModel model={model} key={model.stainlessPath} />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export type SDKOverviewProps = {
-  resource: SDKJSON.Resource;
-};
-
-export function SDKOverview({ resource }: SDKOverviewProps) {
-  const { SDKResource } = useComponents();
-
-  const nested = React.useMemo(() => flatResources(resource.subresources, [resource]), [resource]);
-
-  return (
-    <div className={style.Overview}>
-      <div className={style.OverviewHeader}>
-        <h1>{resource.title}</h1>
-      </div>
-      <SDKResource resource={resource} />
-      {nested.map((props, index) => (
-        <SDKResource {...props} key={index} />
-      ))}
-    </div>
-  );
-}
-
-export type SDKRootProps = {
-  stainlessPath: string;
-};
-
-export function SDKRoot({ stainlessPath }: SDKRootProps) {
-  const spec = useSpec();
-  const Docs = useComponents();
-
-  const parsed = parseStainlessPath(stainlessPath);
-  const resource = getResourceFromSpec(stainlessPath, spec);
-
-  if (!resource || !parsed) return null;
-
-  const content = parsed.method ? (
-    <Docs.SDKMethod method={resource.methods[parsed.method]} />
-  ) : (
-    <Docs.SDKOverview resource={resource} />
-  );
-
-  return <div className={style.Root}>{content}</div>;
-}

package/src/components/primitives.tsx

@@ -1,284 +0,0 @@
-import * as React from 'react';
-import { ReactNode, Fragment, useState } from 'react';
-import { useLanguage, useRenderMarkdown, useNavigation, useSettings } from '../contexts';
-import { generateRoute } from '../routing';
-import style from '../style';
-import { MinusIcon, PlusIcon } from 'lucide-react';
-
-type JoinProps = { items: ReactNode[]; limit?: number; children: ReactNode };
-
-export function Join({ items, limit, children }: JoinProps) {
-  const arr =
-    limit && items.length > limit + 1
-      ? [...items.slice(0, limit), <span className={style.Truncation}>{items.length - limit} more</span>]
-      : items;
-
-  return arr.map((item, index) => (
-    <Fragment key={`iterator:${index}`}>
-      {!!index && children}
-      {item}
-    </Fragment>
-  ));
-}
-
-type ExpanderProps = {
-  id?: string;
-  open?: boolean;
-  summary: ReactNode;
-  virtual?: boolean;
-  muted?: boolean;
-  children?: ReactNode;
-};
-
-export function Expander({ id, open, summary, virtual, muted, children }: ExpanderProps) {
-  const { virtualExpanders } = useSettings();
-
-  if (virtual || virtualExpanders)
-    return (
-      <VirtualExpander summary={summary} open={open} muted={muted} id={id}>
-        {children}
-      </VirtualExpander>
-    );
-
-  return (
-    <details
-      className={style.Expander}
-      open={open}
-      data-stldocs-expander-muted={muted}
-      data-stldocs-expander-initial-state={open}
-    >
-      <summary className={style.ExpanderSummary}>
-        <div className={style.ExpanderSummaryIcon}>
-          <PlusIcon size={16} strokeWidth={1} className={style.Icon} />
-          <MinusIcon size={16} strokeWidth={1} className={style.Icon} />
-        </div>
-        <div className={style.ExpanderSummaryContent}>{summary}</div>
-      </summary>
-      <div className={style.ExpanderContent} id={id}>
-        {children}
-      </div>
-    </details>
-  );
-}
-
-export function VirtualExpander({
-  id,
-  open: isOpen,
-  muted,
-  summary,
-  children,
-}: Omit<ExpanderProps, 'virtual'>) {
-  const [open, setOpen] = useState(isOpen);
-
-  React.useEffect(() => {
-    if (isOpen) setOpen(true);
-  }, [isOpen]);
-
-  return (
-    <div
-      className={style.Expander}
-      data-open={open}
-      data-stldocs-expander-muted={muted}
-      data-stldocs-expander-initial-state={open}
-    >
-      <div className={style.ExpanderSummary} onClick={() => setOpen(!open)}>
-        <div className={style.ExpanderSummaryIcon}>
-          <PlusIcon size={16} className={style.Icon} />
-          <MinusIcon size={16} className={style.Icon} />
-        </div>
-        <div className={style.ExpanderSummaryContent}>{summary}</div>
-      </div>
-      {open && (
-        <div className={style.ExpanderContent} id={id}>
-          {children}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function Markdown({ content }: { content: string }) {
-  const rendered = useRenderMarkdown(content);
-
-  return (
-    rendered && (
-      <div className={`${style.Markdown} ${style.Content}`} dangerouslySetInnerHTML={{ __html: rendered }} />
-    )
-  );
-}
-
-type BadgeProps = {
-  id: string;
-  children?: ReactNode;
-};
-
-export function Badge({ id, children }: BadgeProps) {
-  return (
-    <span className={style.Badge} data-badge-id={id}>
-      {children ?? id}
-    </span>
-  );
-}
-
-const TooltipNestingContext = React.createContext<boolean>(false);
-
-type TooltipProps = {
-  content: ReactNode;
-  children: ReactNode;
-};
-
-export function Tooltip({ content, children }: TooltipProps) {
-  const nested = React.useContext(TooltipNestingContext);
-
-  if (nested) return children;
-
-  return (
-    <span className={style.Tooltip}>
-      <span className={style.TooltipContent}>
-        <TooltipNestingContext.Provider value={true}>{content}</TooltipNestingContext.Provider>
-      </span>
-      <span className={style.TooltipHost}>{children}</span>
-    </span>
-  );
-}
-
-type LinkProps = {
-  stainlessPath: string;
-  scroll?: boolean;
-  children?: ReactNode;
-} & React.HTMLProps<HTMLAnchorElement>;
-
-export function Link({ stainlessPath, scroll = true, children, ...props }: LinkProps) {
-  const { basePath, onNavigate } = useNavigation();
-  const language = useLanguage();
-
-  const href = React.useMemo(() => {
-    if (props.href) return props.href;
-    if (stainlessPath) return generateRoute(basePath, language, stainlessPath);
-  }, [basePath, language, stainlessPath]);
-
-  const handleClick = React.useCallback(
-    (e: React.MouseEvent<HTMLAnchorElement>) => {
-      if (props.onClick) props.onClick(e);
-      if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-      if (href) onNavigate?.(e, { href, language, stainlessPath, scroll });
-    },
-    [href, scroll, onNavigate],
-  );
-
-  if (!href) return children;
-
-  return (
-    <a href={href} onClick={handleClick} {...props}>
-      {children}
-    </a>
-  );
-}
-
-export type InputProps = {
-  left?: ReactNode;
-  right?: ReactNode;
-} & React.InputHTMLAttributes<HTMLInputElement>;
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(({ left, right, ...props }, ref) => {
-  return (
-    <div className={style.Input}>
-      {left}
-      <input {...props} ref={ref} className={style.InputTextField} />
-      {right}
-    </div>
-  );
-});
-
-export type ToggleButtonProps = {
-  children?: ReactNode;
-  selected?: boolean;
-} & React.ButtonHTMLAttributes<HTMLButtonElement>;
-
-export const ToggleButton = React.forwardRef<HTMLButtonElement, ToggleButtonProps>(
-  ({ children, selected, ...props }, ref) => {
-    return (
-      <button {...props} ref={ref} className={style.ToggleButton} data-stldocs-toggle-selected={selected}>
-        {children}
-      </button>
-    );
-  },
-);
-
-export type ListViewProps<TItem> = {
-  items: Array<TItem>;
-  itemDelegate: (item: TItem, selected: boolean) => React.ReactNode;
-  onSelectListItem?: (item: TItem) => void;
-} & React.HTMLAttributes<HTMLDivElement>;
-
-export function ListView<TItem>({ items, itemDelegate, onSelectListItem, ...rest }: ListViewProps<TItem>) {
-  const [selectedIndex, setSelectedIndex] = React.useState<number>(0);
-  const [keyboardIndex, setKeyboardIndex] = React.useState<number>(0);
-  const listRef = React.useRef<HTMLDivElement>(null);
-  const itemRef = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    setSelectedIndex(0);
-    setKeyboardIndex(0);
-  }, [items]);
-
-  React.useEffect(() => {
-    function handleKeyPress(ev: KeyboardEvent) {
-      switch (ev.key) {
-        case 'ArrowUp': {
-          ev.preventDefault();
-          const value = Math.max(0, selectedIndex - 1);
-          setSelectedIndex(value);
-          setKeyboardIndex(value);
-          break;
-        }
-
-        case 'ArrowDown': {
-          ev.preventDefault();
-          const value = Math.min(items.length, selectedIndex + 1);
-          setSelectedIndex(value);
-          setKeyboardIndex(value);
-          break;
-        }
-
-        case 'Enter':
-          ev.preventDefault();
-          onSelectListItem?.(items[selectedIndex]);
-          break;
-      }
-    }
-
-    addEventListener('keydown', handleKeyPress);
-    return () => removeEventListener('keydown', handleKeyPress);
-  }, [items, selectedIndex]);
-
-  React.useEffect(() => {
-    if (!keyboardIndex) {
-      listRef?.current?.scroll(0, 0);
-      return;
-    }
-
-    const selectedBounds = itemRef.current.getBoundingClientRect();
-    const listBounds = listRef.current.getBoundingClientRect();
-    const needsScroll = selectedBounds.top < listBounds.top || selectedBounds.bottom > listBounds.bottom;
-
-    if (needsScroll) itemRef.current.scrollIntoView({ block: 'nearest' });
-  }, [keyboardIndex, items, listRef]);
-
-  return (
-    <div ref={listRef} className={style.ListView} tabIndex={0} {...rest}>
-      {items.map((item, index) => (
-        <div
-          key={index}
-          ref={index === selectedIndex ? itemRef : null}
-          className={style.ListViewItem}
-          data-stldocs-listview-selected={index === selectedIndex}
-          onClick={() => onSelectListItem?.(items[selectedIndex])}
-          onMouseMove={() => setSelectedIndex(index)}
-        >
-          {itemDelegate(item, index === selectedIndex)}
-        </div>
-      ))}
-    </div>
-  );
-}