@stainless-api/docs-ui 0.1.0-beta.6 → 0.1.0-beta.61

package/dist/styles/snippets.css

@@ -1,132 +0,0 @@
-@layer docs-ui {
-  .stldocs-root {
-    .snippet {
-      color: #d8d8d8;
-      --orange: 24 76% 51%;
-      --teal: 208 100% 66%;
-      --magenta: 324 54% 48.6%;
-      --purple: 274 41% 47%;
-    }
-
-    .hljs-comment,
-    .hljs-quote {
-      color: #adadad;
-    }
-
-    .hljs-doctag,
-    .hljs-keyword,
-    .hljs-formula {
-      color: #fb8f44;
-    }
-
-    .hljs-section,
-    .hljs-name,
-    .hljs-selector-tag,
-    .hljs-deletion,
-    .hljs-subst {
-      color: #f7585c;
-    }
-
-    .hjs-literal,
-    .hljs-string,
-    .hljs-regexp,
-    .hljs-addition,
-    .hljs-attribute,
-    .hljs-meta .hljs-string {
-      color: #54aeff;
-    }
-
-    .hljs-attr,
-    .hljs-variable,
-    .hljs-template-variable,
-    .hljs-type,
-    .hljs-selector-class,
-    .hljs-selector-attr,
-    .hljs-selector-pseudo,
-    .hljs-number {
-      color: #4ac26b;
-    }
-
-    .hljs-symbol,
-    .hljs-bullet,
-    .hljs-link,
-    .hljs-meta,
-    .hljs-selector-id,
-    .hljs-title,
-    .hljs-built_in,
-    .hljs-title.class_,
-    .hljs-class .hljs-title {
-      color: #b68eff;
-    }
-
-    .hljs-emphasis {
-      font-style: italic;
-    }
-
-    .hljs-strong {
-      font-weight: bold;
-    }
-
-    .hljs-link {
-      text-decoration: underline;
-    }
-
-    .snippet-json {
-      color: #a5a5ac;
-
-      .hljs-comment,
-      .hljs-quote {
-        color: #adadad;
-      }
-
-      .hljs-doctag,
-      .hljs-keyword,
-      .hljs-formula,
-      .hljs-number {
-        color: var(--stldocs-syntax-color-orange);
-      }
-
-      .hljs-section,
-      .hljs-name,
-      .hljs-selector-tag,
-      .hljs-deletion,
-      .hljs-subst {
-        color: var(--stldocs-syntax-color-red);
-      }
-
-      .hjs-literal,
-      .hljs-string,
-      .hljs-regexp,
-      .hljs-addition,
-      .hljs-attribute,
-      .hljs-meta .hljs-string {
-        color: var(--stldocs-syntax-color-green);
-      }
-
-      .hljs-attr,
-      .hljs-variable,
-      .hljs-template-variable,
-      .hljs-type,
-      .hljs-selector-class,
-      .hljs-selector-attr,
-      .hljs-selector-pseudo {
-        color: var(--stldocs-color-text);
-      }
-
-      .hljs-symbol,
-      .hljs-bullet,
-      .hljs-link,
-      .hljs-meta,
-      .hljs-selector-id,
-      .hljs-title {
-        color: var(--stldocs-syntax-color-purple);
-      }
-
-      .hljs-built_in,
-      .hljs-title.class_,
-      .hljs-class .hljs-title {
-        color: var(--stldocs-syntax-color-blue);
-      }
-    }
-  }
-}

package/src/components/breadcrumbs.tsx

@@ -1,94 +0,0 @@
-import type * as SDKJSON from '~/lib/json-spec-v2/types';
-import { Languages } from '../routing';
-import { ChevronRight } from 'lucide-react';
-import style from '../style';
-import { Join } from './primitives';
-
-type Breadcrumb = { title: string; href: string };
-
-type BreadcrumbConfig = {
-  includeCurrentPage?: boolean;
-};
-
-function generateApiBreadcrumbs(fullPath: string, spec: any, basePath: string): Breadcrumb[] | null {
-  // Normalize paths. Mostly for basePath since it's configurable and may have trailing slashes
-  const cleanBasePath = basePath.replace(/\/+$/, '');
-  const cleanPath = fullPath.replace(/\/+$/, '');
-
-  if (!cleanPath.startsWith(cleanBasePath)) return null;
-
-  // Slice off the basePath
-  const rest = cleanPath.slice(cleanBasePath.length).split('/').filter(Boolean);
-
-  const breadcrumbs: Breadcrumb[] = [];
-  let href = cleanBasePath;
-  let i = 0;
-
-  // Handle sdk language prefix
-  if (Languages.includes(rest[0] as (typeof Languages)[number])) {
-    href += `/${rest[0]}`;
-    i++;
-  }
-
-  // Always start with API Reference
-  breadcrumbs.push({ title: 'API Reference', href });
-
-  let currentSpec = spec;
-
-  while (i < rest.length) {
-    const idType = rest[i];
-    const idValue = rest[i + 1];
-    if (!idType || !idValue || !currentSpec?.[idType]?.[idValue]) break;
-
-    currentSpec = currentSpec[idType][idValue];
-    href += `/${idType}/${idValue}`;
-
-    // This should always exist, but just in case fallback to the raw url value
-    const title = (idType === 'methods' ? currentSpec.summary : currentSpec.title) ?? idValue;
-
-    breadcrumbs.push({
-      title,
-      href,
-    });
-
-    i += 2;
-  }
-
-  return breadcrumbs;
-}
-
-export function SDKBreadcrumbs({
-  spec,
-  currentPath,
-  basePath = '/api',
-  config = { includeCurrentPage: false },
-}: {
-  spec: SDKJSON.Spec;
-  currentPath: string;
-  basePath?: string;
-  config?: BreadcrumbConfig | null;
-}) {
-  const breadcrumbs = generateApiBreadcrumbs(currentPath, spec, basePath);
-
-  if (!breadcrumbs || breadcrumbs.length === 0) return null;
-
-  if (!config?.includeCurrentPage) {
-    breadcrumbs.pop();
-  }
-
-  const items = breadcrumbs.map((crumb, index) => (
-    <div key={index} className={style.BreadcrumbsItem}>
-      <a href={crumb.href} className={style.BreadcrumbsLink}>
-        {crumb.title}
-      </a>
-    </div>
-  ));
-
-  return (
-    <div className={style.Breadcrumbs}>
-      <Join limit={breadcrumbs.length} items={items}>
-        <ChevronRight />
-      </Join>
-    </div>
-  );
-}

package/src/components/chat.tsx

@@ -1,154 +0,0 @@
-import * as React from 'react';
-import { useChat } from 'ai/react';
-import { ArrowUpIcon, BotMessageSquareIcon, LoaderCircleIcon, SquareIcon, TrashIcon } from 'lucide-react';
-import { useLanguage, useSearchContext } from '../contexts';
-import { Markdown } from './primitives';
-import type { SearchSettings } from '../search/types';
-import type { UIMessage } from 'ai';
-import style from '../style';
-
-const BASEURL = 'https://askai.algolia.com';
-
-function buildFetch({ appId, searchKey, indexName, assistant }: SearchSettings) {
-  const headers = {
-    'X-Algolia-Application-Id': appId,
-    'X-Algolia-API-Key': searchKey,
-    'X-Algolia-Index-Name': `${indexName}-chat`,
-    'X-Algolia-Assistant-Id': assistant,
-  };
-
-  return async (input, init) => {
-    const response = await fetch(`${BASEURL}/chat/token`, { method: 'POST', headers });
-    const data = await response.json();
-    return fetch(input, {
-      ...init,
-      headers: {
-        ...init.headers,
-        ...headers,
-        Authorization: `TOKEN ${data['token']}`,
-      },
-    });
-  };
-}
-
-function RenderMessage({ message }: { message: UIMessage }) {
-  return message.parts
-    .filter((part) => part.type === 'text')
-    .map((part, key) => <Markdown key={key} content={part['text']} />);
-}
-
-export function Chat() {
-  const language = useLanguage();
-  const { settings } = useSearchContext();
-  const messageListRef = React.useRef<HTMLDivElement>(null);
-
-  const { messages, setMessages, status, input, setInput, append, stop } = useChat({
-    body: { searchParameters: { filters: `language:${language ?? 'http'}` } },
-    sendExtraMessageFields: true,
-    fetch: buildFetch(settings),
-    api: `${BASEURL}/chat`,
-  });
-
-  React.useEffect(() => {
-    const content = sessionStorage.getItem('stldocs-chat-messages');
-    if (!content) return;
-
-    setMessages(JSON.parse(content));
-    setTimeout(() => {
-      if (!messageListRef.current) return;
-      messageListRef.current.scrollTop = messageListRef.current.scrollHeight;
-    }, 10);
-  }, [setMessages]);
-
-  React.useEffect(() => {
-    if (status !== 'submitted') return;
-    const messageElements = messageListRef?.current.querySelectorAll('[data-stldocs-chat-message]');
-    [...messageElements].at(-1)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
-  }, [status]);
-
-  React.useEffect(() => {
-    sessionStorage.setItem('stldocs-chat-messages', JSON.stringify(messages));
-  }, [messages]);
-
-  function handleSend() {
-    append({ role: 'user', content: input });
-    setInput('');
-  }
-
-  function handleKeyUp(ev) {
-    if (ev.key === 'Enter' && !ev.shiftKey) {
-      ev.preventDefault();
-      handleSend();
-    }
-  }
-
-  return (
-    <>
-      <div className={style.ChatMessages} ref={messageListRef}>
-        {messages.map((message) => (
-          <div key={message.id} className={style.ChatMessage} data-stldocs-chat-message={message.role}>
-            <RenderMessage message={message} />
-          </div>
-        ))}
-
-        {status === 'submitted' && (
-          <div className={style.LoadingSpinner}>
-            <LoaderCircleIcon />
-          </div>
-        )}
-
-        {['submitted', 'streaming'].includes(status) && <div style={{ height: '800px' }}></div>}
-      </div>
-      <div className={style.ChatInput}>
-        <textarea
-          value={input}
-          placeholder="Ask a question"
-          onKeyUp={handleKeyUp}
-          onChange={(ev) => setInput(ev.target.value)}
-          autoFocus
-        />
-
-        <div className={style.ChatInputButtons}>
-          {status === 'submitted' ? (
-            <button onClick={stop}>
-              <SquareIcon />
-            </button>
-          ) : (
-            <button onClick={handleSend} disabled={input.length < 1}>
-              <ArrowUpIcon />
-            </button>
-          )}
-
-          <button onClick={() => setMessages([])}>
-            <TrashIcon />
-          </button>
-        </div>
-      </div>
-    </>
-  );
-}
-
-export type ChatModalProps = {
-  id?: string;
-  open?: boolean;
-};
-
-export function ChatModal({ id, open: isOpen }: ChatModalProps) {
-  const [open, setOpen] = React.useState<boolean>(isOpen);
-
-  return (
-    <div
-      id={id}
-      onToggle={(ev) => setOpen(ev.newState === 'open')}
-      className={style.SearchModal}
-      popover="auto"
-      data-stldocs-modal-open={open}
-    >
-      <div className={style.ChatHeader}>
-        <BotMessageSquareIcon />
-        <h5>Docs Assistant</h5>
-      </div>
-      {open && <Chat />}
-    </div>
-  );
-}

package/src/components/dropdown.tsx

@@ -1,91 +0,0 @@
-import * as React from 'react';
-import style from '../style';
-import { ChevronsUpDown } from 'lucide-react';
-import clsx from 'clsx';
-
-export const Dropdown = ({ className, children, ...rest }: React.HTMLProps<HTMLDivElement>) => {
-  return (
-    <div {...rest} className={`${style.Dropdown} ${className ?? ''}`}>
-      {children}
-    </div>
-  );
-};
-
-export const DropdownTrigger = ({
-  children,
-  withChevron,
-  className,
-  isIcon,
-  ...rest
-}: {
-  children: React.ReactNode;
-  withChevron?: boolean;
-  isIcon?: boolean;
-} & (React.HTMLProps<HTMLButtonElement> & {
-  type?: 'submit' | 'reset' | 'button';
-})) => {
-  return (
-    <button
-      className={`${style.Button} ${style.ButtonSecondary} ${style.DropdownTrigger} ${isIcon ? style.ButtonIcon : ''} ${className ?? ''}`}
-      aria-haspopup="listbox"
-      {...rest}
-    >
-      <div className={style.DropdownTriggerContent}>{children}</div>
-      {withChevron && (
-        <span className={style.DropdownChevron}>
-          <ChevronsUpDown size={16} />
-        </span>
-      )}
-    </button>
-  );
-};
-
-export const DropdownMenu = ({
-  position,
-  className,
-  children,
-  ...rest
-}: { position?: 'below' } & React.HTMLProps<HTMLUListElement>) => {
-  return (
-    <ul className={`${style.DropdownMenu} ${position ?? ''} ${className ?? ''}`} {...rest}>
-      {children}
-    </ul>
-  );
-};
-
-export const DropdownItem = ({
-  children,
-  className,
-  value,
-  selected,
-  href,
-}: React.HTMLProps<HTMLLIElement> & { value?: string; selected?: boolean; href?: string }) => {
-  const inner = (
-    <>
-      {children}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        className="lucide lucide-check-icon lucide-check"
-      >
-        <path d="M20 6 9 17l-5-5" />
-      </svg>
-    </>
-  );
-  return (
-    <li
-      className={clsx(style.DropdownItem, className, selected && 'selected', href && style.DropdownItemLink)}
-      role="option"
-      data-dropdown-value={value}
-    >
-      {href ? <a href={href}>{inner}</a> : inner}
-    </li>
-  );
-};