@clidey/dory 0.1.0

package/src/mdx/api.tsx

@@ -0,0 +1,354 @@
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import classNames from 'classnames'
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+import { Tag } from './tag'
+
+const languageNames: Record<string, string> = {
+  js: 'JavaScript',
+  ts: 'TypeScript',
+  javascript: 'JavaScript',
+  typescript: 'TypeScript',
+  php: 'PHP',
+  python: 'Python',
+  ruby: 'Ruby',
+  go: 'Go',
+}
+
+function getPanelTitle({
+  title,
+  language,
+}: {
+  title?: string
+  language?: string
+}) {
+  if (title) {
+    return title
+  }
+  if (language && language in languageNames) {
+    return languageNames[language]
+  }
+  return 'API'
+}
+
+function ClipboardIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg viewBox="0 0 20 20" aria-hidden="true" {...props}>
+      <path
+        strokeWidth="0"
+        d="M5.5 13.5v-5a2 2 0 0 1 2-2l.447-.894A2 2 0 0 1 9.737 4.5h.527a2 2 0 0 1 1.789 1.106l.447.894a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2Z"
+      />
+      <path
+        fill="none"
+        strokeLinejoin="round"
+        d="M12.5 6.5a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2m5 0-.447-.894a2 2 0 0 0-1.79-1.106h-.527a2 2 0 0 0-1.789 1.106L7.5 6.5m5 0-1 1h-3l-1-1"
+      />
+    </svg>
+  )
+}
+
+function CopyButton({ code }: { code: string }) {
+  const [copyCount, setCopyCount] = useState(0)
+  const copied = copyCount > 0
+
+  useEffect(() => {
+    if (copyCount > 0) {
+      const timeout = setTimeout(() => setCopyCount(0), 1000)
+      return () => {
+        clearTimeout(timeout)
+      }
+    }
+  }, [copyCount])
+
+  return (
+    <button
+      type="button"
+      className={classNames(
+        'group/button absolute top-3.5 right-4 overflow-hidden rounded-full py-1 pr-3 pl-2 text-2xs font-medium opacity-0 backdrop-blur-sm transition group-hover:opacity-100 focus:opacity-100',
+        copied
+          ? 'bg-sky-400/10 ring-1 ring-sky-400/20 ring-inset'
+          : 'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5',
+      )}
+      onClick={() => {
+        window.navigator.clipboard.writeText(code).then(() => {
+          setCopyCount((count) => count + 1)
+        })
+      }}
+    >
+      <span
+        aria-hidden={copied}
+        className={classNames(
+          'pointer-events-none flex items-center gap-0.5 text-zinc-400 transition duration-300',
+          copied && '-translate-y-1.5 opacity-0',
+        )}
+      >
+        <ClipboardIcon className="h-5 w-5 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
+        Copy
+      </span>
+      <span
+        aria-hidden={!copied}
+        className={classNames(
+          'pointer-events-none absolute inset-0 flex items-center justify-center text-sky-400 transition duration-300',
+          !copied && 'translate-y-1.5 opacity-0',
+        )}
+      >
+        Copied!
+      </span>
+    </button>
+  )
+}
+
+function APIPanelHeader({ tag, label }: { tag?: string; label?: string }) {
+  if (!tag && !label) {
+    return null
+  }
+
+  return (
+    <div className="flex h-9 items-center gap-2 border-y border-t-transparent border-b-white/7.5 bg-zinc-900 px-4 dark:border-b-white/5 dark:bg-white/1">
+      {tag && (
+        <div className="dark flex">
+          <Tag variant="small">{tag}</Tag>
+        </div>
+      )}
+      {tag && label && (
+        <span className="h-0.5 w-0.5 rounded-full bg-zinc-500" />
+      )}
+      {label && (
+        <span className="font-mono text-xs text-zinc-400">{label}</span>
+      )}
+    </div>
+  )
+}
+
+function APIPanel({
+  children,
+  tag,
+  label,
+  code,
+}: {
+  children: React.ReactNode
+  tag?: string
+  label?: string
+  code?: string
+}) {
+  const child = Children.only(children)
+
+  if (isValidElement(child)) {
+    // @ts-expect-error child.props is not typed
+    tag = child.props.tag ?? tag
+    // @ts-expect-error child.props is not typed
+    label = child.props.label ?? label
+    // @ts-expect-error child.props is not typed
+    code = child.props.code ?? code
+  }
+
+  return (
+    <div className="group dark:bg-white/2.5">
+      <APIPanelHeader tag={tag} label={label} />
+      <div className="relative">
+        <pre className="overflow-x-auto p-4 text-xs text-white">{children}</pre>
+        {/* @ts-expect-error code is not typed */}
+        <CopyButton code={code} />
+      </div>
+    </div>
+  )
+}
+
+function APIGroupHeader({
+  title,
+  children,
+  selectedIndex,
+}: {
+  title: string
+  children: React.ReactNode
+  selectedIndex: number
+}) {
+  const hasTabs = Children.count(children) > 1
+
+  if (!title && !hasTabs) {
+    return null
+  }
+
+  return (
+    <div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
+      {title && (
+        <h3 className="mr-auto pt-3 text-xs font-semibold text-white">
+          {title}
+        </h3>
+      )}
+      {hasTabs && (
+        <TabList className="-mb-px flex gap-4 text-xs font-medium">
+          {Children.map(children, (child, childIndex) => (
+            <Tab
+              className={classNames(
+                'border-b py-3 transition data-selected:not-data-focus:outline-hidden',
+                childIndex === selectedIndex
+                  ? 'border-sky-500 text-sky-400'
+                  : 'border-transparent text-zinc-400 hover:text-zinc-300',
+              )}
+            >
+              {/* @ts-expect-error child.props is not typed */}
+              {getPanelTitle(isValidElement(child) ? child.props : {})}
+            </Tab>
+          ))}
+        </TabList>
+      )}
+    </div>
+  )
+}
+
+function APIGroupPanels({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof APIPanel>) {
+  const hasTabs = Children.count(children) > 1
+
+  if (hasTabs) {
+    return (
+      <TabPanels>
+        {Children.map(children, (child) => (
+          <TabPanel>
+            <APIPanel {...props}>{child}</APIPanel>
+          </TabPanel>
+        ))}
+      </TabPanels>
+    )
+  }
+
+  return <APIPanel {...props}>{children}</APIPanel>
+}
+function usePreventLayoutShift() {
+  const positionRef = useRef<HTMLElement>(null)
+  const rafRef = useRef<number>()
+
+  useEffect(() => {
+    return () => {
+      if (typeof rafRef.current !== 'undefined') {
+        window.cancelAnimationFrame(rafRef.current)
+      }
+    }
+  }, [])
+
+  return {
+    positionRef,
+    preventLayoutShift(callback: () => void) {
+      if (!positionRef.current) {
+        return
+      }
+
+      const initialTop = positionRef.current.getBoundingClientRect().top
+
+      callback()
+
+      rafRef.current = window.requestAnimationFrame(() => {
+        const newTop =
+          positionRef.current?.getBoundingClientRect().top ?? initialTop
+        window.scrollBy(0, newTop - initialTop)
+      })
+    },
+  }
+}
+
+function useTabGroupProps(availableLanguages: Array<string>) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+  const [preferredLanguages, setPreferredLanguages] = useState<string[]>([])
+  
+  const activeLanguage = [...availableLanguages].sort(
+    (a, z) => preferredLanguages.indexOf(z) - preferredLanguages.indexOf(a),
+  )[0]
+  const languageIndex = availableLanguages.indexOf(activeLanguage)
+  const newSelectedIndex = languageIndex === -1 ? selectedIndex : languageIndex
+  
+  if (newSelectedIndex !== selectedIndex) {
+    setSelectedIndex(newSelectedIndex)
+  }
+
+  const { positionRef, preventLayoutShift } = usePreventLayoutShift()
+
+  return {
+    as: 'div' as const,
+    ref: positionRef,
+    selectedIndex,
+    onChange: (newSelectedIndex: number) => {
+      preventLayoutShift(() => {
+        const newLanguage = availableLanguages[newSelectedIndex]
+        setPreferredLanguages(prev => [
+          ...prev.filter(lang => lang !== newLanguage),
+          newLanguage
+        ])
+      })
+    },
+  }
+}
+
+const APIGroupContext = createContext(false)
+
+export function APIGroup({
+  children,
+  title,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof APIGroupPanels> & { title: string }) {
+  const languages =
+    Children.map(children, (child) =>
+      // @ts-expect-error child.props is not typed
+      getPanelTitle(isValidElement(child) ? child.props : {}),
+    ) ?? []
+  const tabGroupProps = useTabGroupProps(languages)
+  const hasTabs = Children.count(children) > 1
+
+  const containerClassName =
+    'my-6 overflow-hidden rounded-2xl bg-zinc-900 shadow-md dark:ring-1 dark:ring-white/10 w-full'
+  const header = (
+    <APIGroupHeader title={title} selectedIndex={tabGroupProps.selectedIndex}>
+      {children}
+    </APIGroupHeader>
+  )
+  const panels = <APIGroupPanels {...props}>{children}</APIGroupPanels>
+
+  return (
+    <APIGroupContext.Provider value={true}>
+      {hasTabs ? (
+        <TabGroup {...tabGroupProps} className={containerClassName}>
+          <div className="not-prose">
+            {header}
+            {panels}
+          </div>
+        </TabGroup>
+      ) : (
+        <div className={containerClassName}>
+          <div className="not-prose">
+            {header}
+            {panels}
+          </div>
+        </div>
+      )}
+    </APIGroupContext.Provider>
+  )
+}
+
+export function API({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'code'>) {
+  const isGrouped = useContext(APIGroupContext)
+
+  if (isGrouped) {
+    if (typeof children !== 'string') {
+      throw new Error(
+        '`API` children must be a string when nested inside a `APIGroup`.',
+      )
+    }
+    return <code {...props}>
+      {children}
+    </code>
+  }
+
+  return <code {...props}>{children}</code>
+}

package/src/mdx/callout.tsx

@@ -0,0 +1,80 @@
+import classNames from "classnames"
+import { Icon } from "./icon"
+
+const styles = {
+  note: {
+    container: 'my-6 flex gap-2.5 rounded-2xl border border-emerald-500/20 bg-emerald-50/50 p-4 text-sm/6 text-emerald-900 dark:border-emerald-500/30 dark:bg-emerald-500/5 dark:text-emerald-200 dark:[--tw-prose-links-hover:var(--color-emerald-300)] dark:[--tw-prose-links:var(--color-white)]',
+    title: 'text-emerald-900 dark:text-emerald-200',
+    body: 'text-emerald-900 dark:text-emerald-200',
+  },
+  warning: {
+    container: 'my-6 flex gap-2.5 rounded-2xl border border-amber-500/20 bg-amber-50/50 p-4 text-sm/6 text-amber-900 dark:border-amber-500/30 dark:bg-amber-500/5 dark:text-amber-200 dark:[--tw-prose-links-hover:var(--color-amber-300)] dark:[--tw-prose-links:var(--color-white)]',
+    title: 'text-amber-900 dark:text-amber-200',
+    body: 'text-amber-900 dark:text-amber-200',
+  },
+  info: {
+    container: 'my-6 flex gap-2.5 rounded-2xl border border-blue-500/20 bg-blue-50/50 p-4 text-sm/6 text-blue-900 dark:border-blue-500/30 dark:bg-blue-500/5 dark:text-blue-200 dark:[--tw-prose-links-hover:var(--color-blue-300)] dark:[--tw-prose-links:var(--color-white)]',
+    title: 'text-blue-900 dark:text-blue-200',
+    body: 'text-blue-900 dark:text-blue-200',
+  },
+  tip: {
+    container: 'my-6 flex gap-2.5 rounded-2xl border border-green-500/20 bg-green-50/50 p-4 text-sm/6 text-green-900 dark:border-green-500/30 dark:bg-green-500/5 dark:text-green-200 dark:[--tw-prose-links-hover:var(--color-green-300)] dark:[--tw-prose-links:var(--color-white)]',
+    title: 'text-green-900 dark:text-green-200',
+    body: 'text-green-900 dark:text-green-200',
+  },
+  check: {
+    container: 'my-6 flex gap-2.5 rounded-2xl border border-purple-500/20 bg-purple-50/50 p-4 text-sm/6 text-purple-900 dark:border-purple-500/30 dark:bg-purple-500/5 dark:text-purple-200 dark:[--tw-prose-links-hover:var(--color-purple-300)] dark:[--tw-prose-links:var(--color-white)]',
+    title: 'text-purple-900 dark:text-purple-200',
+    body: 'text-purple-900 dark:text-purple-200',
+  },
+}
+
+const icons = {
+  note: (props: { className?: string }) => <Icon icon="InfoCircle" {...props} />,
+  warning: (props: { className?: string }) => <Icon icon="AlertTriangle" {...props} />,
+  info: (props: { className?: string }) => <Icon icon="InfoCircle" {...props} />,
+  tip: (props: { className?: string }) => <Icon icon="Lightbulb" {...props} />,
+  check: (props: { className?: string }) => <Icon icon="CheckCircle" {...props} />,
+}
+
+export function Callout({
+  title,
+  children,
+  type = 'note',
+}: {
+  title: string
+  children: React.ReactNode
+  type?: keyof typeof styles
+}) {
+  const IconComponent = icons[type]
+
+  return (
+    <div className={classNames(styles[type].container)}>
+      <IconComponent className="mt-1 h-4 w-4 flex-none" />
+      <div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
+        <div className={styles[type].title}>{title}</div>
+        <div className={styles[type].body}>{children}</div>
+      </div>
+    </div>
+  )
+}
+
+export function Note({ children }: { children: React.ReactNode }) {
+  return <Callout type="note" title="Note">{children}</Callout>
+}
+
+export function Warning({ children }: { children: React.ReactNode }) {
+  return <Callout type="warning" title="Warning">{children}</Callout>
+}
+
+export function Info({ children }: { children: React.ReactNode }) {
+  return <Callout type="info" title="Info">{children}</Callout>
+}
+
+export function Tip({ children }: { children: React.ReactNode }) {
+  return <Callout type="tip" title="Tip">{children}</Callout>
+}
+
+export function Check({ children }: { children: React.ReactNode }) {
+  return <Callout type="check" title="Check">{children}</Callout>
+}

package/src/mdx/card.tsx

@@ -0,0 +1,48 @@
+import classNames from "classnames";
+import { Icon } from "./icon";
+import type { ComponentChildren } from "preact";
+
+export function CardGroup({ children, cols = 2 }: { children: React.ReactNode; cols?: number }) {
+  return (
+    <div className={classNames(
+      'not-prose my-12 grid grid-cols-1 gap-6',
+      cols === 2 && 'sm:grid-cols-2',
+      cols === 3 && 'sm:grid-cols-3',
+      cols === 4 && 'sm:grid-cols-4'
+    )}>
+      {children}
+    </div>
+  )
+}
+
+export function Card({
+  title,
+  description,
+  href,
+  icon,
+  children,
+}: {
+  title: string
+  description: string
+  href: string
+  icon: string
+  children?: ComponentChildren
+}) {
+  return (
+    <div className="group relative rounded-xl border border-slate-200 dark:border-slate-700">
+      <div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,var(--color-sky-50)),var(--quick-links-hover-bg,var(--color-sky-50)))_padding-box,linear-gradient(to_top,var(--color-indigo-400),var(--color-cyan-400),var(--color-sky-500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:var(--color-slate-800)]" />
+      <div className="relative overflow-hidden rounded-xl p-6 flex gap-2 items-center">
+        <Icon icon={icon} className="h-8 w-8" />
+        <h2 className="mt-4 font-display text-base text-slate-900 dark:text-white">
+          <a href={href}>
+            <span className="absolute -inset-px rounded-xl" />
+            {title}
+          </a>
+        </h2>
+        <div className="text-sm text-slate-700 dark:text-slate-400 leading-tight [&>p]:mb-0">
+          {description ?? children}
+        </div>
+      </div>
+    </div>
+  )
+}