@clidey/dory 0.29.0 → 0.30.0

package/src/mdx/callout.tsx

@@ -1,64 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,289 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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 />;