supabase/apps/docs/features/docs/Reference.ui.client.tsx

'use client'

import { ReferenceContentInitiallyScrolledContext } from '~/features/docs/Reference.navigation.client'
import { safeHistoryReplaceState } from '~/lib/historyUtils'
import { XCircle } from 'lucide-react'
import type { HTMLAttributes, PropsWithChildren } from 'react'
import { useContext, useEffect, useRef, useState } from 'react'
import { useInView } from 'react-intersection-observer'
import {
  cn,
  CollapsibleTrigger,
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from 'ui'

import { type IApiEndPoint } from './Reference.api.utils'
import { API_REFERENCE_REQUEST_BODY_SCHEMA_DATA_ATTRIBUTES } from './Reference.ui.shared'

/**
 * Wrap a reference section with client-side functionality:
 *
 * - Intersection observer to auto-update the URL when the user scrolls the page
 * - An ID to scroll to programmatically. This is on the entire section rather
 *   than the heading to avoid problems with scroll-to position when the heading
 *   is sticky.
 */
export function ReferenceSectionWrapper({
  id,
  link,
  children,
  className,
}: PropsWithChildren<{ id: string; link: string; className?: string }> &
  HTMLAttributes<HTMLElement>) {
  const initialScrollHappened = useContext(ReferenceContentInitiallyScrolledContext)

  const { ref } = useInView({
    threshold: 0,
    rootMargin: '-10% 0% -50% 0%',
    onChange: (inView) => {
      if (
        inView &&
        initialScrollHappened &&
        window.scrollY > 0 /* Don't update on first navigation to introduction */
      ) {
        safeHistoryReplaceState(link)
      }
    },
  })

  return (
    <section
      ref={ref}
      id={id}
      className={cn('scroll-mt-[calc(var(--header-height)+4rem)]', className)}
    >
      {children}
    </section>
  )
}

export function ApiOperationBodySchemeSelector({
  requestBody,
  className,
}: {
  requestBody: IApiEndPoint['requestBody']
  className?: string
}) {
  const availableSchemes = Object.keys(requestBody?.content || {}) as Array<
    'application/json' | 'application/x-www-form-urlencoded'
  >
  const [selectedScheme, setSelectedScheme] = useState(availableSchemes[0])

  const containerRef = useRef<HTMLDivElement>(null)
  const allSchemeDetails = useRef<HTMLUListElement[]>([])
  useEffect(() => {
    const elements = containerRef.current?.querySelectorAll(
      `[${API_REFERENCE_REQUEST_BODY_SCHEMA_DATA_ATTRIBUTES.KEY}]`
    )
    allSchemeDetails.current = elements ? (Array.from(elements) as HTMLUListElement[]) : []
  }, [])

  useEffect(() => {
    allSchemeDetails.current?.forEach((schemeDetails) => {
      schemeDetails.hidden =
        schemeDetails.getAttribute(API_REFERENCE_REQUEST_BODY_SCHEMA_DATA_ATTRIBUTES.KEY) !==
        selectedScheme
    })
  }, [selectedScheme])

  return (
    <div ref={containerRef} className={cn('flex items-center justify-between gap-2', className)}>
      <h3 className="text-base text-foreground">Body</h3>
      <Select
        value={selectedScheme}
        onValueChange={(value) =>
          setSelectedScheme(value as 'application/json' | 'application/x-www-form-urlencoded')
        }
      >
        <SelectTrigger className="w-48 [&>span]:w-full [&>span]:truncate">
          <SelectValue />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            {availableSchemes.map((scheme) => (
              <SelectItem key={scheme} value={scheme}>
                {scheme}
              </SelectItem>
            ))}
          </SelectGroup>
        </SelectContent>
      </Select>
    </div>
  )
}

export function DetailsTrigger({ label, className }: { label: string; className?: string }) {
  return (
    <CollapsibleTrigger className={cn('group reference-details-trigger', className)}>
      <XCircle size={14} aria-hidden="true" className="reference-details-trigger-icon" />
      {label}
    </CollapsibleTrigger>
  )
}