@doccov/fumadocs-adapter 0.0.1

package/src/components/examples.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { useState } from 'react';
+
+export interface ExamplesSectionProps {
+  examples: string[];
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="absolute top-2 right-2 p-1.5 rounded-md bg-fd-secondary hover:bg-fd-accent text-fd-muted-foreground hover:text-fd-foreground transition-colors opacity-0 group-hover:opacity-100"
+      aria-label="Copy code"
+    >
+      {copied ? (
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+        </svg>
+      ) : (
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}
+
+export function ExamplesSection({ examples }: ExamplesSectionProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  if (!examples?.length) return null;
+
+  const showTabs = examples.length > 1;
+
+  return (
+    <div className="my-6">
+      <h3 className="text-lg font-semibold mb-3">Examples</h3>
+
+      {showTabs && (
+        <div className="flex gap-1 mb-2 border-b border-fd-border">
+          {examples.map((_, index) => (
+            <button
+              key={index}
+              type="button"
+              onClick={() => setActiveIndex(index)}
+              className={`px-3 py-1.5 text-sm font-medium transition-colors ${
+                activeIndex === index
+                  ? 'text-fd-primary border-b-2 border-fd-primary -mb-px'
+                  : 'text-fd-muted-foreground hover:text-fd-foreground'
+              }`}
+            >
+              Example {index + 1}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="group relative">
+        <pre className="overflow-x-auto rounded-lg border border-fd-border bg-fd-secondary p-4">
+          <code className="font-mono text-sm text-fd-foreground whitespace-pre">
+            {examples[activeIndex]}
+          </code>
+        </pre>
+        <CopyButton text={examples[activeIndex]} />
+      </div>
+    </div>
+  );
+}
+

package/src/components/expandable-property.tsx

@@ -0,0 +1,240 @@
+'use client';
+
+import { useState } from 'react';
+import type { SpecSignatureParameter, SpecSchema } from '@openpkg-ts/spec';
+
+export interface ExpandablePropertyProps {
+  param: SpecSignatureParameter;
+  depth?: number;
+}
+
+export interface NestedPropertyProps {
+  name: string;
+  schema: SpecSchema;
+  required?: boolean;
+  depth?: number;
+}
+
+// Chevron icon component
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 12 12"
+      fill="none"
+      className={`transition-transform duration-200 ${expanded ? 'rotate-90' : ''}`}
+    >
+      <path
+        d="M4.5 2.5L8 6L4.5 9.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function formatType(schema: SpecSchema): string {
+  if (!schema) return 'unknown';
+  if (typeof schema === 'string') return schema;
+  if (typeof schema === 'object' && schema !== null) {
+    const s = schema as Record<string, unknown>;
+
+    // Use tsType if available (most readable)
+    if (s.tsType && typeof s.tsType === 'string') {
+      const tsType = s.tsType as string;
+      if (tsType.length > 80) {
+        return tsType.slice(0, 77) + '...';
+      }
+      return tsType;
+    }
+
+    // Handle refs
+    if (s.$ref && typeof s.$ref === 'string') {
+      return (s.$ref as string).replace('#/types/', '');
+    }
+
+    // Handle enums
+    if (s.enum && Array.isArray(s.enum)) {
+      const enumVals = (s.enum as unknown[]).map(v => JSON.stringify(v)).join(' | ');
+      if (enumVals.length > 50) return enumVals.slice(0, 47) + '...';
+      return enumVals;
+    }
+
+    // Handle anyOf/oneOf
+    if (s.anyOf && Array.isArray(s.anyOf)) {
+      return (s.anyOf as SpecSchema[]).map(formatType).join(' | ');
+    }
+    if (s.oneOf && Array.isArray(s.oneOf)) {
+      return (s.oneOf as SpecSchema[]).map(formatType).join(' | ');
+    }
+
+    // Handle arrays
+    if (s.type === 'array' && s.items) {
+      return `${formatType(s.items as SpecSchema)}[]`;
+    }
+
+    // Handle basic types
+    if (s.type) return String(s.type);
+  }
+  return 'unknown';
+}
+
+function getNestedProperties(schema: SpecSchema): Record<string, SpecSchema> | null {
+  if (!schema || typeof schema !== 'object') return null;
+  const s = schema as Record<string, unknown>;
+  if (s.type === 'object' && s.properties && typeof s.properties === 'object') {
+    return s.properties as Record<string, SpecSchema>;
+  }
+  return null;
+}
+
+function getRequiredFields(schema: SpecSchema): string[] {
+  if (!schema || typeof schema !== 'object') return [];
+  const s = schema as Record<string, unknown>;
+  if (Array.isArray(s.required)) {
+    return s.required as string[];
+  }
+  return [];
+}
+
+function countProperties(schema: SpecSchema): number {
+  const props = getNestedProperties(schema);
+  return props ? Object.keys(props).length : 0;
+}
+
+/**
+ * Nested property row with expandable nested objects
+ */
+export function NestedProperty({ name, schema, required = false, depth = 0 }: NestedPropertyProps) {
+  const [expanded, setExpanded] = useState(false);
+  const type = formatType(schema);
+  const nestedProps = getNestedProperties(schema);
+  const nestedCount = countProperties(schema);
+  const hasNested = nestedCount > 0;
+
+  // Get description from schema
+  const schemaObj = schema as Record<string, unknown> | null;
+  const description = schemaObj?.description as string | undefined;
+
+  return (
+    <div className="flex flex-col border-b border-fd-border last:border-0">
+      {/* Property row */}
+      <div className="flex flex-row items-start gap-2 py-2.5 px-3">
+        {/* Name and type */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-baseline gap-2 flex-wrap">
+            <span className="font-mono text-sm font-medium text-fd-foreground">
+              {name}
+              {!required && '?'}:
+            </span>
+            <span className="font-mono text-sm text-fd-muted-foreground">
+              {hasNested ? 'object' : type}
+            </span>
+          </div>
+          {description && (
+            <p className="text-sm text-fd-muted-foreground mt-0.5 leading-relaxed">
+              {description}
+            </p>
+          )}
+        </div>
+
+        {/* Expand badge for nested objects */}
+        {hasNested && (
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md
+                       bg-fd-muted text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground
+                       transition-colors cursor-pointer shrink-0"
+          >
+            <ChevronIcon expanded={expanded} />
+            <span>{nestedCount} properties</span>
+          </button>
+        )}
+      </div>
+
+      {/* Expanded nested properties */}
+      {hasNested && expanded && nestedProps && (
+        <div className="mx-3 mb-3 rounded-lg border border-fd-border bg-fd-card/50 overflow-hidden">
+          {Object.entries(nestedProps).map(([propName, propSchema]) => (
+            <NestedProperty
+              key={propName}
+              name={propName}
+              schema={propSchema}
+              required={getRequiredFields(schema).includes(propName)}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Top-level expandable property for method parameters
+ * Entry point for rendering a parameter with progressive disclosure
+ */
+export function ExpandableProperty({ param, depth = 0 }: ExpandablePropertyProps) {
+  const [expanded, setExpanded] = useState(false);
+  const type = formatType(param.schema);
+  const isOptional = param.required === false;
+  const nestedProps = getNestedProperties(param.schema);
+  const nestedCount = countProperties(param.schema);
+  const hasNested = nestedCount > 0;
+
+  return (
+    <div className="flex flex-col border-b border-fd-border last:border-0">
+      {/* Parameter row */}
+      <div className="flex flex-row items-start gap-2 py-3">
+        {/* Name and type */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-baseline gap-2 flex-wrap">
+            <span className="font-mono text-sm font-medium text-fd-foreground">
+              {param.name}
+              {isOptional && '?'}:
+            </span>
+            <span className="font-mono text-sm text-fd-muted-foreground">
+              {hasNested ? 'object' : type}
+            </span>
+          </div>
+          {param.description && (
+            <p className="text-sm text-fd-muted-foreground mt-1 leading-relaxed">
+              {param.description}
+            </p>
+          )}
+        </div>
+
+        {/* Expand badge for nested objects */}
+        {hasNested && (
+          <button
+            onClick={() => setExpanded(!expanded)}
+            className="flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-md
+                       bg-fd-muted text-fd-muted-foreground hover:bg-fd-accent hover:text-fd-accent-foreground
+                       transition-colors cursor-pointer shrink-0"
+          >
+            <ChevronIcon expanded={expanded} />
+            <span>{nestedCount} properties</span>
+          </button>
+        )}
+      </div>
+
+      {/* Expanded nested properties */}
+      {hasNested && expanded && nestedProps && (
+        <div className="ml-4 mb-3 rounded-lg border border-fd-border bg-fd-card/50 overflow-hidden">
+          {Object.entries(nestedProps).map(([propName, propSchema]) => (
+            <NestedProperty
+              key={propName}
+              name={propName}
+              schema={propSchema}
+              required={getRequiredFields(param.schema).includes(propName)}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/function-page.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import type { OpenPkg, SpecExport } from '@openpkg-ts/spec';
+import { ParameterCard } from './parameter-card';
+import { CodeExample } from './code-example';
+import { CoverageBadge } from './coverage-badge';
+
+export interface FunctionPageProps {
+  export: SpecExport;
+  spec: OpenPkg;
+}
+
+function formatSchema(schema: unknown): string {
+  if (!schema) return 'unknown';
+  if (typeof schema === 'string') return schema;
+  if (typeof schema === 'object' && schema !== null) {
+    const s = schema as Record<string, unknown>;
+    if (s.$ref && typeof s.$ref === 'string') {
+      return s.$ref.replace('#/types/', '');
+    }
+    if (s.tsType) return String(s.tsType);
+    if (s.type) return String(s.type);
+  }
+  return 'unknown';
+}
+
+export function FunctionPage({ export: exp, spec }: FunctionPageProps) {
+  const sig = exp.signatures?.[0];
+  const hasExamples = exp.examples && exp.examples.length > 0;
+  const hasParams = sig?.parameters && sig.parameters.length > 0;
+
+  return (
+    <div className="space-y-6 not-prose">
+      {/* Description */}
+      {exp.description && (
+        <p className="text-fd-muted-foreground leading-relaxed">
+          {exp.description}
+        </p>
+      )}
+
+      {/* Returns */}
+      {sig?.returns && (
+        <p className="text-fd-muted-foreground text-sm">
+          <span className="font-medium text-fd-foreground">Returns:</span>{' '}
+          {sig.returns.description || `A ${sig.returns.tsType ?? formatSchema(sig.returns.schema)}`}
+        </p>
+      )}
+
+      {/* Two-column layout - using inline styles to override prose */}
+      <div 
+        className="not-prose"
+        style={{ 
+          display: hasExamples ? 'grid' : 'block',
+          gridTemplateColumns: hasExamples ? 'repeat(2, minmax(0, 1fr))' : undefined,
+          gap: '2rem',
+          alignItems: 'start'
+        }}
+      >
+        {/* Left column: Parameters */}
+        <div className="space-y-6">
+          {hasParams && (
+            <div>
+              <h3 className="text-sm font-semibold uppercase tracking-wide text-fd-muted-foreground mb-4">
+                Parameters
+              </h3>
+              <div className="space-y-3">
+                {sig.parameters!.map((param, index) => (
+                  <ParameterCard key={param.name ?? index} param={param} spec={spec} />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Right column: Examples */}
+        {hasExamples && (
+          <div style={{ position: 'sticky', top: '5rem' }}>
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-fd-muted-foreground mb-4">
+              Example
+            </h3>
+            <CodeExample 
+              code={exp.examples![0]} 
+              filename={`${exp.name.toLowerCase().replace(/[^a-z0-9]/g, '-')}.ts`}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Coverage */}
+      {exp.docs && <CoverageBadge docs={exp.docs} />}
+    </div>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,51 @@
+// Main component
+export { APIPage } from './api-page';
+export type { APIPageProps } from './api-page';
+
+// Page components
+export { FunctionPage } from './function-page';
+export type { FunctionPageProps } from './function-page';
+
+export { ClassPage } from './class-page';
+export type { ClassPageProps } from './class-page';
+
+export { InterfacePage } from './interface-page';
+export type { InterfacePageProps } from './interface-page';
+
+export { EnumPage } from './enum-page';
+export type { EnumPageProps } from './enum-page';
+
+export { VariablePage } from './variable-page';
+export type { VariablePageProps } from './variable-page';
+
+// Shared components
+export { TypeTable } from './type-table';
+export type { TypeTableProps } from './type-table';
+
+export { Signature } from './signature';
+export type { SignatureProps } from './signature';
+
+export { ExamplesSection } from './examples';
+export type { ExamplesSectionProps } from './examples';
+
+export { CoverageBadge } from './coverage-badge';
+export type { CoverageBadgeProps } from './coverage-badge';
+
+export { MembersSection } from './members-section';
+export type { MembersSectionProps } from './members-section';
+
+export { ParameterCard } from './parameter-card';
+export type { ParameterCardProps } from './parameter-card';
+
+export { CodeExample } from './code-example';
+export type { CodeExampleProps } from './code-example';
+
+export { ExpandableProperty, NestedProperty } from './expandable-property';
+export type { ExpandablePropertyProps, NestedPropertyProps } from './expandable-property';
+
+export { CollapsibleMethod } from './collapsible-method';
+export type { CollapsibleMethodProps } from './collapsible-method';
+
+export { MethodSection } from './method-section';
+export type { MethodSectionProps } from './method-section';
+

package/src/components/interface-page.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import type { OpenPkg, SpecExport } from '@openpkg-ts/spec';
+import { Signature } from './signature';
+import { TypeTable } from './type-table';
+import { ExamplesSection } from './examples';
+import { CoverageBadge } from './coverage-badge';
+
+export interface InterfacePageProps {
+  export: SpecExport;
+  spec: OpenPkg;
+}
+
+export function InterfacePage({ export: exp, spec }: InterfacePageProps) {
+  // For interfaces/types, members are the properties
+  const properties = exp.members?.filter(
+    (m) => m.kind === 'property' || m.kind === 'field' || !m.kind
+  );
+  const methods = exp.members?.filter((m) => m.kind === 'method' || m.kind === 'function');
+
+  return (
+    <div className="space-y-6">
+      {/* Description */}
+      {exp.description && (
+        <p className="text-fd-muted-foreground text-base leading-relaxed">{exp.description}</p>
+      )}
+
+      {/* Signature */}
+      <section>
+        <h2 className="text-xl font-semibold mb-2">Declaration</h2>
+        <Signature export={exp} />
+      </section>
+
+      {/* Extends */}
+      {exp.extends && (
+        <section>
+          <h2 className="text-xl font-semibold mb-2">Extends</h2>
+          <div className="rounded-lg border border-fd-border bg-fd-card p-4">
+            <code className="font-mono text-sm text-fd-primary">{exp.extends}</code>
+          </div>
+        </section>
+      )}
+
+      {/* Properties */}
+      {properties && properties.length > 0 && (
+        <section>
+          <h2 className="text-xl font-semibold mb-2">Properties</h2>
+          <TypeTable items={properties} spec={spec} showRequired={true} />
+        </section>
+      )}
+
+      {/* Methods */}
+      {methods && methods.length > 0 && (
+        <section>
+          <h2 className="text-xl font-semibold mb-2">Methods</h2>
+          <div className="space-y-4">
+            {methods.map((method, index) => {
+              const sig = method.signatures?.[0];
+              const params = sig?.parameters ?? [];
+              const returnType = sig?.returns?.tsType ?? 'void';
+
+              return (
+                <div key={method.name ?? index} className="rounded-lg border border-fd-border p-4">
+                  <code className="font-mono text-sm text-fd-primary">
+                    {method.name}(
+                    {params
+                      .map((p) => {
+                        const optional = p.required === false ? '?' : '';
+                        const type =
+                          typeof p.schema === 'string' ? p.schema : (p.schema as any)?.tsType ?? 'any';
+                        return `${p.name}${optional}: ${type}`;
+                      })
+                      .join(', ')}
+                    ): {returnType}
+                  </code>
+                  {method.description && (
+                    <p className="text-sm text-fd-muted-foreground mt-2">{method.description}</p>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </section>
+      )}
+
+      {/* Examples */}
+      {exp.examples && exp.examples.length > 0 && <ExamplesSection examples={exp.examples} />}
+
+      {/* Coverage */}
+      {exp.docs && <CoverageBadge docs={exp.docs} />}
+    </div>
+  );
+}
+