@stainless-api/docs-ui 0.1.0-beta.8 → 0.1.0-beta.80

package/src/components/snippets.tsx

@@ -1,180 +0,0 @@
-import * as React from 'react';
-import { CheckIcon, CircleAlertIcon, CopyIcon, LucideIcon } from 'lucide-react';
-import { useDeclaration, useHighlight, useLanguage, useSnippet } from '../contexts';
-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 { TransformRequestSnippetFn } from './sdk';
-import { Button } from '@stainless-api/ui-primitives';
-
-export type SnippetCodeProps = {
-  content: string;
-  signature?: string;
-  language?: string;
-};
-
-export function SnippetCode({ content, language }: SnippetCodeProps) {
-  const lang = useLanguage();
-  const highlighted = useHighlight(content, language || lang);
-
-  return (
-    <div className={style.SnippetCode}>
-      <pre className={style.SnippetCodeContent} data-stldocs-copy-content>
-        <code
-          className={(language as string) === 'json' ? 'snippet-json' : 'snippet'}
-          dangerouslySetInnerHTML={{ __html: highlighted }}
-        />
-      </pre>
-    </div>
-  );
-}
-
-export type SnippetProps = {
-  method: SDKJSON.Method;
-  requestTitle?: React.ReactNode;
-  transformRequestSnippet?: TransformRequestSnippetFn;
-};
-
-export type SnippetContainerProps = {
-  children: React.ReactNode;
-  signature?: string;
-};
-
-export function SnippetContainer({ children }: SnippetContainerProps) {
-  return <div className={clsx(style.Snippet)}>{children}</div>;
-}
-
-export type SnippetRequestContainerProps = {
-  children?: React.ReactNode;
-  signature?: string;
-};
-
-export function SnippetRequestContainer({ children }: SnippetRequestContainerProps) {
-  return <div>{children}</div>;
-}
-
-export function Snippet({ requestTitle, method, transformRequestSnippet }: SnippetProps) {
-  const Docs = useComponents();
-  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 signature = 'qualified' in decl ? decl.qualified : undefined;
-  const responses = method.exampleResponses;
-
-  if (transformRequestSnippet) {
-    snippet = transformRequestSnippet({ snippet, language });
-  }
-
-  async function handleCopy() {
-    try {
-      await navigator.clipboard.writeText(snippet);
-      setCopyIcon(CheckIcon);
-    } catch {
-      setCopyIcon(CircleAlertIcon);
-    }
-
-    setTimeout(() => setCopyIcon(CopyIcon), 1000);
-  }
-
-  return (
-    <Docs.SnippetContainer signature={signature}>
-      {snippet && (
-        <Docs.SnippetRequestContainer signature={signature}>
-          <div className={style.SnippetRequest} data-stldocs-copy-parent>
-            <div className={style.SnippetRequestTitle}>
-              <div className={style.SnippetRequestTitleMethod}>
-                <Docs.MethodRoute httpMethod={method.httpMethod} iconOnly />
-                <h5>{method.summary}</h5>
-              </div>
-              <div className={style.SnippetRequestTitleContent}>{requestTitle}</div>
-              <Button variant="ghost" data-stldocs-snippet-copy>
-                <CopyButtonIcon size={16} className={style.Icon} onClick={handleCopy} />
-              </Button>
-            </div>
-            <Docs.SnippetCode content={snippet} signature={signature} />
-          </div>
-        </Docs.SnippetRequestContainer>
-      )}
-      {responses && <Docs.SnippetResponse responses={responses} />}
-    </Docs.SnippetContainer>
-  );
-}
-
-export function SnippetResponse({ responses }: { responses: SDKJSON.Method['exampleResponses'] }) {
-  const { SnippetCode } = useComponents();
-
-  if (!responses) {
-    return null;
-  }
-
-  const mappedResponses = Object.keys(responses)
-    .map((key) => {
-      // Get the first response type ie application/json or text/plain
-      const responseType = Object.keys(responses[key])[0];
-      const response = responses[key][responseType];
-
-      const examples = response?.examples;
-
-      if (!examples) return null;
-
-      // Get the first example type, ie Example or html
-      const exampleType = Object.keys(examples)[0];
-      let value = examples[exampleType]?.value;
-
-      if (!value) return null;
-
-      if (responseType === 'application/json') {
-        value = JSON.stringify(value, null, 2);
-      }
-
-      return {
-        responseCode: key,
-        content: value,
-      };
-    })
-    .filter(Boolean);
-
-  if (mappedResponses.length === 0) return null;
-
-  return (
-    <div className={style.SnippetMultiResponse}>
-      <div className={clsx(style.Snippet)}>
-        <div
-          className={clsx(
-            style.SnippetResponseTab,
-            mappedResponses.length === 1 && style.SnippetResponseTabSingleReturn,
-          )}
-        >
-          {mappedResponses.map(({ responseCode }, index) => (
-            <button
-              className={clsx(
-                style.SnippetResponseTabItem,
-                index === 0 && style.SnippetResponseTabItemActive,
-              )}
-              key={`snippet-response-tab-item-${responseCode}-${index}`}
-              data-snippet-response-tab-id={`snippet-response-tab-${responseCode}-${index}`}
-              disabled={mappedResponses.length === 1}
-            >
-              {responseCode} example
-            </button>
-          ))}
-        </div>
-        {mappedResponses.map(({ responseCode, content }, index) => {
-          return (
-            <div
-              className={clsx(style.SnippetResponsePane, index === 0 && style.SnippetResponsePaneActive)}
-              key={`snippet-response-${responseCode}-${index}`}
-              data-snippet-response-pane-id={`snippet-response-tab-${responseCode}-${index}`}
-            >
-              <SnippetCode content={content} language="json" />
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}

package/src/contexts/component-generics.tsx

@@ -1,48 +0,0 @@
-// This file should never import from ../components or ../languages to avoid circular dependencies
-
-import * as React from 'react';
-
-type DeepPartialMap<L> = { [K in keyof L]?: Partial<L[K]> };
-
-export type ComponentsContextType<C, L> = {
-  components: C;
-  language: L;
-};
-
-const ComponentContext = React.createContext<ComponentsContextType<any, any> | null>(null);
-ComponentContext.displayName = 'ComponentContext';
-
-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 customizeComponents<C, L>(
-  defaults: { components: C; language: L },
-  overrides: { components?: Partial<C>; language?: DeepPartialMap<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,
-  );
-
-  return { components: mergedComponents, language: mergedLanguage };
-}
-
-export function ComponentProvider<C, L>({
-  value,
-  children,
-}: {
-  value: ComponentsContextType<C, L>;
-  children: React.ReactNode;
-}) {
-  return <ComponentContext.Provider value={value}>{children}</ComponentContext.Provider>;
-}
-
-export { ComponentContext };

package/src/contexts/component-types.tsx

@@ -1,5 +0,0 @@
-import type * as DefaultComponents from '../components';
-import type * as DefaultLanguage from '../languages';
-
-export type AppComponents = typeof DefaultComponents;
-export type AppLanguage = typeof DefaultLanguage;

package/src/contexts/component.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import * as DefaultComponents from '../components';
-import * as DefaultLanguage from '../languages';
-import {
-  ComponentProvider as GenericComponentProvider,
-  customizeComponents,
-  type ComponentsContextType,
-} from './component-generics';
-
-export type AppComponents = typeof DefaultComponents;
-export type AppLanguage = typeof DefaultLanguage;
-
-export const defaultContextValue: ComponentsContextType<AppComponents, AppLanguage> = {
-  components: DefaultComponents,
-  language: DefaultLanguage,
-};
-
-export function ComponentProvider({
-  components,
-  language,
-  children,
-}: {
-  components?: Partial<AppComponents>;
-  language?: { [K in keyof AppLanguage]?: Partial<AppLanguage[K]> };
-  children: React.ReactNode;
-}) {
-  const value = React.useMemo(
-    () => customizeComponents(defaultContextValue, { components, language }),
-    [components, language],
-  );
-  return <GenericComponentProvider value={value}>{children}</GenericComponentProvider>;
-}

package/src/contexts/docs.tsx

@@ -1,75 +0,0 @@
-import * as React from 'react';
-import type { Spec, SpecLanguage } from '~/lib/json-spec-v2/types';
-
-export type ContentPanelLayout = 'double-pane' | 'single-pane';
-export type PropertySettingsType = {
-  types?: 'simple' | 'rich';
-  includeModelProperties?: boolean;
-  collapseDescription?: boolean;
-  expandDepth?: number;
-};
-
-export type DocsContextType = {
-  language: SpecLanguage;
-  spec: Spec | null;
-  settings?: {
-    properties?: PropertySettingsType;
-    contentPanelLayout?: ContentPanelLayout;
-    virtualExpanders?: boolean;
-  };
-};
-
-const DocsContextDefaults: DocsContextType = {
-  settings: {},
-  language: 'node',
-  spec: null,
-};
-
-const DocsContext = React.createContext<DocsContextType>(DocsContextDefaults);
-
-export function useDocs() {
-  return React.useContext(DocsContext);
-}
-
-export function useSpec() {
-  return useDocs().spec;
-}
-
-export function useSettings() {
-  return useDocs().settings;
-}
-
-export function useSnippet(stainlessPath: string, language?: SpecLanguage, variant?: string) {
-  const snippetLanguage = [language ?? useLanguage(), variant ?? 'default'].join('.');
-
-  return useSpec()?.snippets?.[snippetLanguage]?.[stainlessPath];
-}
-
-export function useDeclaration(stainlessPath: string, language?: SpecLanguage) {
-  return useSpec()?.decls?.[language ?? useLanguage()]?.[stainlessPath];
-}
-
-export function useResource(name: string) {
-  return useSpec()?.resources?.[name];
-}
-
-export function useLanguage() {
-  return useDocs().language;
-}
-
-export function useContentPanelLayout() {
-  return useDocs().settings?.contentPanelLayout ?? 'double-pane';
-}
-
-export type DocsProviderProps = DocsContextType & { children: React.ReactNode };
-
-export function DocsProvider({ spec, language, settings, children }: DocsProviderProps) {
-  const value = {
-    ...DocsContextDefaults,
-    spec,
-    settings: settings ?? DocsContextDefaults.settings,
-    language: language ?? DocsContextDefaults.language,
-  };
-
-  return <DocsContext.Provider value={value}>{children}</DocsContext.Provider>;
-}

package/src/contexts/index.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { ComponentContext } from './component-generics';
-import { useLanguage } from './docs';
-import { LanguageComponentDefinition } from '../languages';
-
-// DO NOT re-export component contexts from here. Only export generics.
-export * from './navigation';
-export * from './markdown';
-export * from './component-generics';
-export * from './search';
-export * from './docs';
-
-export function useLanguageComponents() {
-  const language = useLanguage();
-  const context = React.useContext(ComponentContext);
-  return context.language[language] as LanguageComponentDefinition;
-}

package/src/contexts/markdown.tsx

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

package/src/contexts/navigation.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import { DocsLanguage } from '../routing';
-
-export type NavigationHandler = (
-  ev: React.MouseEvent | null,
-  opts: {
-    href: string;
-    language: DocsLanguage;
-    stainlessPath: string;
-    scroll: boolean;
-  },
-) => void;
-
-export type NavigationContextType = {
-  basePath?: string;
-  selectedPath?: string;
-  navigationPath?: string[];
-  onNavigate?: NavigationHandler;
-};
-
-const Defaults: NavigationContextType = {
-  basePath: '/',
-};
-
-const NavigationContext = React.createContext<NavigationContextType>(Defaults);
-
-export function useNavigation() {
-  return React.useContext(NavigationContext);
-}
-
-export type NavigationProviderProps = NavigationContextType & {
-  children: React.ReactNode;
-};
-
-export function NavigationProvider({
-  basePath,
-  selectedPath,
-  onNavigate,
-  children,
-}: NavigationProviderProps) {
-  const value = { ...Defaults, onNavigate, basePath, selectedPath };
-
-  return <NavigationContext.Provider value={value}>{children}</NavigationContext.Provider>;
-}

package/src/contexts/search.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { search } from '../search/providers/algolia';
-import { SearchParams, SearchSettings } from '../search/types';
-
-export type SearchContextType = {
-  settings: SearchSettings;
-  onSelect?: (stainlessPath: string) => void;
-  pageFind?: string;
-};
-
-const SearchContext = React.createContext<SearchContextType>(null);
-
-export function useSearchContext() {
-  return React.useContext(SearchContext);
-}
-
-export function useSearch() {
-  const { settings } = useSearchContext();
-  return (params: SearchParams) => search({ settings, params });
-}
-
-export type SearchProviderProps = SearchContextType & {
-  children: React.ReactNode;
-};
-
-export function SearchProvider({ children, ...props }: SearchProviderProps) {
-  return <SearchContext value={props}>{children}</SearchContext>;
-}

package/src/contexts/use-components.tsx

@@ -1,4 +0,0 @@
-import { useComponents as base } from './component-generics';
-import type { AppComponents } from './component-types';
-
-export const useComponents = () => base<AppComponents>();

package/src/index.ts

@@ -1,6 +0,0 @@
-export * as contexts from './contexts';
-export * as components from './components';
-export * as languages from './languages';
-export * as routing from './routing';
-export * as utils from './utils';
-export { default as style } from './style';