@clidey/dory 0.30.0 → 0.31.0

package/src/mdx/callout.tsx

@@ -0,0 +1,64 @@
+import { Alert, AlertTitle, AlertDescription } from '@clidey/ux'
+import { Icon } from "./icon"
+
+const typeToVariant = {
+  note: 'default',
+  warning: 'destructive',
+  info: 'default',
+  tip: 'default',
+  check: 'default',
+} as const
+
+const icons = {
+  note: 'InfoCircle',
+  warning: 'AlertTriangle',
+  info: 'InfoCircle',
+  tip: 'Lightbulb',
+  check: 'CheckCircle',
+} as const
+
+const typeColors = {
+  note: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200',
+  warning: 'border-amber-500/30 bg-amber-500/10 text-amber-900 dark:text-amber-200 *:data-[slot=alert-description]:text-inherit dark:data-[slot=alert-description]:text-inherit',
+  info: 'border-blue-500/30 bg-blue-500/10 text-blue-900 dark:text-blue-200',
+  tip: 'border-green-500/30 bg-green-500/10 text-green-900 dark:text-green-200',
+  check: 'border-purple-500/30 bg-purple-500/10 text-purple-900 dark:text-purple-200',
+}
+
+export function Callout({
+  title,
+  children,
+  type = 'note',
+}: {
+  title: string
+  children: React.ReactNode
+  type?: keyof typeof icons
+}) {
+  return (
+    <Alert variant={typeToVariant[type]} className={`my-6 ${typeColors[type]}`}>
+      <Icon icon={icons[type]} className="h-4 w-4" />
+      <AlertTitle>{title}</AlertTitle>
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  )
+}
+
+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,54 @@
+import classNames from "classnames";
+import {
+  Card as UXCard,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent
+} from '@clidey/ux'
+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 (
+    <UXCard className="group relative border-ring border-1 border-black/10 dark:border-white/10">
+      {href && <a href={href} className="absolute inset-0 z-10" aria-label={title} />}
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          {icon && <Icon icon={icon} className="h-8 w-8" />}
+          <CardTitle className="text-base">{title}</CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <CardDescription className="text-sm leading-tight">
+          {description ?? children}
+        </CardDescription>
+      </CardContent>
+    </UXCard>
+  )
+}

package/src/mdx/code.tsx

@@ -0,0 +1,289 @@
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react'
+import { ClipboardIcon } from '@heroicons/react/24/outline'
+import classNames from 'classnames'
+import {
+  Children,
+  createContext,
+  isValidElement,
+  useEffect,
+  useState
+} from 'react'
+import { Tag } from './tag'
+import { toTitleCase } from '../utils/functions'
+import { Button, Card } from '@clidey/ux'
+import { CheckIcon } from 'lucide-react'
+
+export const supportedLanguages = {
+  'python': 'Python',
+  'py': 'Python',
+  'javascript': 'JavaScript',
+  'js': 'JavaScript',
+  'typescript': 'TypeScript',
+  'ts': 'TypeScript',
+  'java': 'Java',
+  'c': 'C',
+  'cpp': 'C++',
+  'csharp': 'C#',
+  'cs': 'C#',
+  'rust': 'Rust',
+  'go': 'Go',
+  'ruby': 'Ruby',
+  'php': 'PHP',
+  'swift': 'Swift',
+  'kotlin': 'Kotlin',
+  'scala': 'Scala',
+  'haskell': 'Haskell',
+  'erlang': 'Erlang',
+  'elixir': 'Elixir',
+  'markdown': 'Markdown',
+  'md': 'Markdown',
+  'html': 'HTML',
+  'css': 'CSS',
+  'json': 'JSON',
+  'yaml': 'YAML',
+  'yml': 'YAML',
+  'toml': 'TOML',
+  'bash': 'Bash',
+  'markup': 'Markup',
+  'xml': 'XML',
+  'jsx': 'JSX',
+  'tsx': 'TSX',
+  'objectivec': 'Objective-C',
+  'js-extras': 'JavaScript Extras',
+  'reason': 'Reason',
+  'graphql': 'GraphQL',
+}
+
+function getPanelTitle(props: { className?: string }) {
+  const { className } = props
+  if (className) {
+    const language = className.replace('language-', '') as keyof typeof supportedLanguages;
+    return supportedLanguages[language] || toTitleCase(language)
+  }
+  return 'Code'
+}
+
+function CopyButton({ code }: { code: string }) {
+  const [copyCount, setCopyCount] = useState(0)
+  const copied = copyCount > 0
+
+  useEffect(() => {
+    if (copied) {
+      const timeout = setTimeout(() => setCopyCount(0), 1000)
+      return () => clearTimeout(timeout)
+    }
+  }, [copied])
+
+  return (
+    <Button
+      className={classNames(
+        'group/button absolute top-1 right-2 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',
+        {
+          'bg-emerald-400/10 ring-1 ring-emerald-400/20 ring-inset': copied,
+          'bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5': !copied,
+        }
+      )}
+      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 text-sm',
+          copied && '-translate-y-1.5 opacity-0',
+        )}
+      >
+        <ClipboardIcon className="h-4 w-4 fill-zinc-500/20 stroke-zinc-500 transition-colors group-hover/button:stroke-zinc-400" />
+      </span>
+      <span
+        aria-hidden={!copied}
+        className={classNames(
+          'pointer-events-none absolute inset-0 flex items-center justify-center text-emerald-400 transition duration-300 text-sm',
+          !copied && 'translate-y-1.5 opacity-0',
+        )}
+      >
+        <CheckIcon className="h-4 w-4" />
+      </span>
+    </Button>
+  )
+}
+
+function CodePanelHeader({ 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-white/2.5 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 CodePanel({
+  children,
+  tag,
+  label,
+  code,
+}: {
+  children: React.ReactNode
+  tag?: string
+  label?: string
+  code?: string
+}) {
+  const child = Children.only(children)
+
+  if (isValidElement(child)) {
+    // @ts-expect-error
+    tag = child.props.tag ?? tag
+    // @ts-expect-error
+    label = child.props.label ?? label
+    // @ts-expect-error
+    code = child.props.code ?? code
+  }
+
+  if (!code) {
+    // @ts-expect-error
+    code = child.props.children
+  }
+
+  return (
+    <div className="group dark:bg-white/2.5">
+      <CodePanelHeader tag={tag} label={label} />
+      <div className="relative">
+        <pre className="overflow-x-auto p-4 text-xs">{children}</pre>
+        <CopyButton code={code ?? ''} />
+      </div>
+    </div>
+  )
+}
+
+function CodeGroupHeader({
+  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 flex-wrap items-start gap-x-4 px-4 pb-2">
+      {title && (
+        <p className="mr-auto pt-3 text-xs font-semibold">
+          {title}
+        </p>
+      )}
+      {hasTabs && (
+        <TabList className="-mb-px flex gap-4 text-xs font-medium">
+          {Children.map(children, (child, index) => {
+            if (!isValidElement(child)) return null
+
+            const childProps = (child as preact.JSX.Element).props?.children?.props ?? {}
+            const panelTitle = getPanelTitle(childProps)
+
+            return (
+              <Tab
+                key={index}
+                className={classNames(
+                  'pt-2 transition data-selected:not-data-focus:outline-hidden',
+                  index === selectedIndex
+                    ? 'border-emerald-500 text-emerald-400'
+                    : 'border-transparent text-zinc-400 hover:text-zinc-300',
+                )}
+              >
+                {panelTitle}
+              </Tab>
+            )
+          })}
+        </TabList>
+      )}
+    </div>
+  )
+}
+
+function CodeGroupPanels({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CodePanel>) {
+  const hasTabs = Children.count(children) > 1
+
+  if (hasTabs) {
+    return (
+      <TabPanels>
+        {Children.map(children, (child, index) => (
+          <TabPanel key={index}>
+            <CodePanel {...props}>{child}</CodePanel>
+          </TabPanel>
+        ))}
+      </TabPanels>
+    )
+  }
+
+  return <CodePanel {...props}>{children}</CodePanel>
+}
+
+export const CodeGroupContext = createContext(false)
+
+export function CodeGroup({
+  children,
+  title,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  const childrenArray = Children.toArray(children)
+
+  const hasTabs = childrenArray.length > 1
+
+  const header = (
+    <CodeGroupHeader title={title} selectedIndex={selectedIndex}>
+      {children}
+    </CodeGroupHeader>
+  )
+  const panels = <CodeGroupPanels {...props}>{children}</CodeGroupPanels>
+
+  return (
+    <CodeGroupContext.Provider value={true}>
+      {hasTabs ? (
+        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
+          <TabGroup
+            as="div"
+            selectedIndex={selectedIndex}
+            onChange={setSelectedIndex}
+          >
+            <div className="not-prose">
+              {header}
+              {panels}
+            </div>
+          </TabGroup>
+        </Card>
+      ) : (
+        <Card className="py-0 border-black/10 bg-none overflow-hidden mb-4">
+          <div className="not-prose">
+            {header}
+            {panels}
+          </div>
+        </Card>
+      )}
+    </CodeGroupContext.Provider>
+  )
+}
+
+export function Code({
+  children,
+  ...props
+}: React.ComponentPropsWithoutRef<'code'>) {
+  return <code className={classNames('dory-mdx-code rounded-md py-1 text-sm px-2', props.className)} {...props}>{children}</code>
+}

package/src/mdx/expandable.tsx

@@ -0,0 +1,36 @@
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from "@clidey/ux";
+import { Icon } from './icon';
+
+export function Expandable({
+  title,
+  children,
+  icon,
+}: {
+  title: string
+  children: React.ReactNode
+  icon?: React.ComponentProps<typeof Icon>['icon']
+}) {
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className="my-6 rounded-xl border border-slate-200 dark:border-slate-700"
+    >
+      <AccordionItem value="expandable">
+        <AccordionTrigger className="group flex w-full items-start justify-between text-left text-slate-900 dark:text-white p-6">
+          <div className="flex items-center gap-2">
+            {icon && <Icon icon={icon} className="h-8 w-8" />}
+            <span className="text-base font-display text-slate-900 dark:text-white">{title}</span>
+          </div>
+        </AccordionTrigger>
+        <AccordionContent asChild>
+          <dd className="px-6 pb-6">
+            <div className="text-sm text-slate-700 dark:text-slate-400 leading-tight [&>p]:mb-0">
+              {children}
+            </div>
+          </dd>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

package/src/mdx/fence.tsx

@@ -0,0 +1,74 @@
+import { Fragment, Suspense, useContext } from 'preact/compat'
+import { Highlight, themes } from 'prism-react-renderer'
+import { Code, CodeGroup, CodeGroupContext, supportedLanguages } from './code'
+import { MermaidRenderer } from './mermaid'
+import { Loading } from '../components/loading'
+import { useTheme } from '@clidey/ux'
+import classNames from 'classnames'
+
+
+export function Fence({
+  children,
+  language,
+}: {
+  children: string
+  language: string
+}) {
+  const isDark = useTheme().theme === 'dark';
+
+  if (language === 'mermaid') {
+    return (
+      <div className="mermaid-container">
+        <Suspense fallback={<Loading />}>
+          <MermaidRenderer content={children} />
+        </Suspense>
+      </div>
+    )
+  }
+
+  const supportedLanguage = supportedLanguages[language as keyof typeof supportedLanguages] ?? language
+
+  return (
+    <Highlight
+      code={children.trimEnd()}
+      language={supportedLanguage}
+      theme={isDark ? themes.vsDark : themes.vsLight}>
+      {({ className, style, tokens, getTokenProps }) => (
+        <pre>
+          <Code className={classNames(className, "whitespace-pre-wrap")} style={style} title={supportedLanguage}>
+            {tokens.map((line, lineIndex) => (
+              <Fragment key={lineIndex}>
+                {line
+                  .filter((token) => !token.empty)
+                  .map((token, tokenIndex) => (
+                    <span key={tokenIndex} {...getTokenProps({ token })} />
+                  ))}
+                {'\n'}
+              </Fragment>
+            ))}
+          </Code>
+        </pre>
+      )}
+    </Highlight>
+  )
+}
+export function Pre(props: { children: { props: { className?: string; children?: string } } }) {
+  const child = props.children?.props
+  
+  // Safely handle className that might not be a string
+  const className = child?.className || ''
+  const language = supportedLanguages[className.replace('language-', '') as keyof typeof supportedLanguages] ?? className.replace('language-', '')
+  const code = child?.children || ''
+
+  // Check if we're inside a CodeGroup context
+  const isInCodeGroup = useContext(CodeGroupContext);
+
+  const fence = <Fence language={language}>{code}</Fence>
+
+  // If we're not in a CodeGroup, wrap the Fence in one
+  if (!isInCodeGroup && language !== 'mermaid') {
+    return <CodeGroup title={language}>{fence}</CodeGroup>
+  }
+
+  return fence
+}

package/src/mdx/icon.tsx

@@ -0,0 +1,73 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import * as solidIcons from '@fortawesome/free-solid-svg-icons'
+import * as regularIcons from '@fortawesome/free-regular-svg-icons'
+import * as brandIcons from '@fortawesome/free-brands-svg-icons'
+import classNames from 'classnames'
+import * as LucideIcons from 'lucide-react'
+
+// Map types to icon sets and FontAwesome prefixes
+const iconSets = {
+  solid: solidIcons,
+  regular: regularIcons,
+  brands: brandIcons,
+}
+
+const prefixes = {
+  solid: 'fas',
+  regular: 'far',
+  brands: 'fab',
+} as const
+
+export function Icon({
+  icon,
+  iconType = 'solid',
+  color = '',
+  size = 24,
+  className,
+  ...rest
+}: {
+  icon: string
+  iconType?: keyof typeof iconSets
+  color?: string
+  size?: number
+} & Omit<React.ComponentPropsWithoutRef<'svg'>, 'color'>) {
+  // Convert kebab-case or snake_case to PascalCase (for Lucide and FA variable names)
+  const pascalCase = icon
+    .replace(/[-_](.)/g, (_, group1) => group1.toUpperCase())
+    .replace(/^(.)/, (_, group1) => group1.toUpperCase())
+
+  // --- Try Lucide First ---
+  const LucideComponent = LucideIcons[pascalCase as keyof typeof LucideIcons] as any
+  if (LucideComponent) {
+    return (
+      <LucideComponent
+        className={classNames("stroke-black dark:stroke-white", className)}
+        color={color}
+        size={size}
+        {...rest}
+      />
+    )
+  }
+
+  // --- Try Font Awesome ---
+  const faSet = iconSets[iconType] ?? solidIcons
+  const iconKey = `fa${pascalCase}` as keyof typeof faSet
+  const faIcon = faSet[iconKey]
+
+  if (faIcon && typeof faIcon === 'object' && 'iconName' in faIcon) {
+    library.add(faIcon)
+    return (
+      <FontAwesomeIcon
+        icon={[prefixes[iconType] || 'fas', faIcon.iconName] as any}
+        className={classNames("stroke-black dark:stroke-white", className)}
+        color={color as any}
+        size={size as any}
+        {...rest as any}
+      />
+    )
+  }
+
+  console.warn(`⚠️ Icon not found: "${icon}" (converted to ${iconKey}) in ${iconType}`)
+  return null // or return a default/fallback icon if preferred
+}

package/src/mdx/latex.tsx

@@ -0,0 +1,26 @@
+import { useEffect, useRef } from 'react'
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+
+interface LatexProps {
+  children: string
+}
+
+export function Latex({ children }: LatexProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (containerRef.current) {
+      try {
+        katex.render(children, containerRef.current, {
+          displayMode: true,
+          throwOnError: false,
+        })
+      } catch (error) {
+        console.error('Error rendering LaTeX:', error)
+      }
+    }
+  }, [children])
+
+  return <div ref={containerRef} className="my-4" />
+}

package/src/mdx/list.tsx

@@ -0,0 +1,7 @@
+import type { JSX } from 'preact/jsx-runtime';
+
+export const UnorderedList = (props: JSX.IntrinsicElements['ul']) => <ul className="list-disc list-inside my-2" {...props} />;
+
+export const OrderedList = (props: JSX.IntrinsicElements['ol']) => <ol className="list-decimal list-inside my-2" {...props} />;
+
+export const ListItem = (props: JSX.IntrinsicElements['li']) => <li className="ml-4 mt-2" {...props} />;

package/src/mdx/mdx.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from 'preact/hooks';
+import { usePathname } from 'wouter-preact/use-browser-location';
+import { completeFrontMatter } from '../components/store';
+
+export { h1, h2, h3, h4, h5, h6, p, Row, Col, Anchor as a, Image as img } from './text';
+export { Code as code, CodeGroup } from './code';
+export * from './tag';
+export { Pre as pre } from './fence';
+export { Accordion, AccordionGroup } from './accordion';
+export { Icon } from './icon';
+export { Card, CardGroup } from './card';
+export { Callout, Note, Warning, Info, Tip, Check } from './callout';
+export { Latex } from './latex';
+export { API } from './api';
+export { Expandable } from './expandable';
+export { ResponseField, Properties, Property } from './open-api';
+export { Steps, Step } from './step';
+export { Table as table, Th as th, Td as td } from './table';
+export { UnorderedList as ul, OrderedList as ol, ListItem as li } from './list';
+export { APIPlayground } from './api-playground';
+export { WebSocketPlayground } from './websocket-playground';
+export { AsyncAPI } from './async-api';
+export { Source } from './source';
+
+export const wrapper = ({ children }: { children: preact.ComponentChildren }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (ref.current) {
+      // Hide the first h1 if it matches the title
+      // This is to avoid having the same title twice in the navigation
+      const title = completeFrontMatter.find(fm => fm.path === pathname)?.title;
+      const h1 = ref.current.querySelector('h1') as HTMLHeadingElement;
+      if (h1) {
+        h1.hidden = title === h1.innerText;
+      }
+    }
+  }, [pathname]);
+
+  return <div className="flex flex-col w-full" ref={ref}>{children}</div>;
+};
+
+
+export const hr = () => <hr className="my-4 text-gray-500/25 dark:text-gray-200/25" />;
+
+export const br = () => <br />;