@doccov/fumadocs-adapter 0.0.1

package/src/components/members-section.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import type { SpecMember, OpenPkg } from '@openpkg-ts/spec';
+import { TypeTable } from './type-table';
+
+export interface MembersSectionProps {
+  members: SpecMember[];
+  spec?: OpenPkg;
+  title?: string;
+}
+
+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';
+}
+
+interface MemberGroups {
+  constructors: SpecMember[];
+  properties: SpecMember[];
+  methods: SpecMember[];
+  accessors: SpecMember[];
+  other: SpecMember[];
+}
+
+function groupMembersByKind(members: SpecMember[]): MemberGroups {
+  const groups: MemberGroups = {
+    constructors: [],
+    properties: [],
+    methods: [],
+    accessors: [],
+    other: [],
+  };
+
+  for (const member of members) {
+    const kind = member.kind?.toLowerCase() ?? 'other';
+    if (kind === 'constructor') {
+      groups.constructors.push(member);
+    } else if (kind === 'property' || kind === 'field') {
+      groups.properties.push(member);
+    } else if (kind === 'method' || kind === 'function') {
+      groups.methods.push(member);
+    } else if (kind === 'getter' || kind === 'setter' || kind === 'accessor') {
+      groups.accessors.push(member);
+    } else {
+      groups.other.push(member);
+    }
+  }
+
+  return groups;
+}
+
+function MemberRow({ member }: { member: SpecMember }) {
+  const visibility = member.visibility ?? 'public';
+  const isStatic = member.flags?.static;
+  const isAbstract = member.flags?.abstract;
+  const isReadonly = member.flags?.readonly;
+
+  const badges: string[] = [];
+  if (visibility !== 'public') badges.push(visibility);
+  if (isStatic) badges.push('static');
+  if (isAbstract) badges.push('abstract');
+  if (isReadonly) badges.push('readonly');
+
+  const type = formatSchema(member.schema);
+
+  // For methods, show signature
+  const sig = member.signatures?.[0];
+  let signature = '';
+  if (sig) {
+    const params = sig.parameters?.map((p) => {
+      const optional = p.required === false ? '?' : '';
+      return `${p.name}${optional}: ${formatSchema(p.schema)}`;
+    }) ?? [];
+    const returnType = sig.returns?.tsType ?? formatSchema(sig.returns?.schema) ?? 'void';
+    signature = `(${params.join(', ')}): ${returnType}`;
+  }
+
+  return (
+    <div className="py-3 border-b border-fd-border last:border-0">
+      <div className="flex items-start gap-2">
+        <code className="font-mono text-sm text-fd-primary">
+          {member.name}
+          {signature}
+        </code>
+        {badges.length > 0 && (
+          <div className="flex gap-1">
+            {badges.map((badge) => (
+              <span
+                key={badge}
+                className="text-xs px-1.5 py-0.5 rounded bg-fd-secondary text-fd-muted-foreground"
+              >
+                {badge}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+      {!signature && type !== 'unknown' && (
+        <code className="text-xs text-fd-muted-foreground font-mono mt-1 block">{type}</code>
+      )}
+      {member.description && (
+        <p className="text-sm text-fd-muted-foreground mt-1">{member.description}</p>
+      )}
+    </div>
+  );
+}
+
+export function MembersSection({ members, spec, title = 'Members' }: MembersSectionProps) {
+  if (!members?.length) return null;
+
+  const groups = groupMembersByKind(members);
+
+  return (
+    <div className="my-6">
+      <h3 className="text-lg font-semibold mb-3">{title}</h3>
+
+      {groups.constructors.length > 0 && (
+        <div className="mb-6">
+          <h4 className="text-sm font-medium text-fd-muted-foreground mb-2 uppercase tracking-wide">
+            Constructor
+          </h4>
+          <div className="rounded-lg border border-fd-border bg-fd-card">
+            {groups.constructors.map((member, index) => (
+              <MemberRow key={member.name ?? index} member={member} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {groups.properties.length > 0 && (
+        <div className="mb-6">
+          <h4 className="text-sm font-medium text-fd-muted-foreground mb-2 uppercase tracking-wide">
+            Properties
+          </h4>
+          <div className="rounded-lg border border-fd-border bg-fd-card">
+            {groups.properties.map((member, index) => (
+              <MemberRow key={member.name ?? index} member={member} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {groups.methods.length > 0 && (
+        <div className="mb-6">
+          <h4 className="text-sm font-medium text-fd-muted-foreground mb-2 uppercase tracking-wide">
+            Methods
+          </h4>
+          <div className="rounded-lg border border-fd-border bg-fd-card">
+            {groups.methods.map((member, index) => (
+              <MemberRow key={member.name ?? index} member={member} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {groups.accessors.length > 0 && (
+        <div className="mb-6">
+          <h4 className="text-sm font-medium text-fd-muted-foreground mb-2 uppercase tracking-wide">
+            Accessors
+          </h4>
+          <div className="rounded-lg border border-fd-border bg-fd-card">
+            {groups.accessors.map((member, index) => (
+              <MemberRow key={member.name ?? index} member={member} />
+            ))}
+          </div>
+        </div>
+      )}
+
+      {groups.other.length > 0 && (
+        <div className="mb-6">
+          <h4 className="text-sm font-medium text-fd-muted-foreground mb-2 uppercase tracking-wide">
+            Other
+          </h4>
+          <div className="rounded-lg border border-fd-border bg-fd-card">
+            {groups.other.map((member, index) => (
+              <MemberRow key={member.name ?? index} member={member} />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/method-section.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import type { SpecMember } from '@openpkg-ts/spec';
+import { CollapsibleMethod } from './collapsible-method';
+
+export interface MethodSectionProps {
+  member: SpecMember;
+  /** @deprecated Use CollapsibleMethod directly with defaultExpanded */
+  defaultExpanded?: boolean;
+}
+
+/**
+ * Method display section with collapsible behavior
+ * @deprecated Use CollapsibleMethod directly for more control
+ */
+export function MethodSection({ member, defaultExpanded = false }: MethodSectionProps) {
+  return <CollapsibleMethod member={member} defaultExpanded={defaultExpanded} />;
+}

package/src/components/parameter-card.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import type { OpenPkg, SpecSignatureParameter } from '@openpkg-ts/spec';
+
+export interface ParameterCardProps {
+  param: SpecSignatureParameter;
+  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 ParameterCard({ param, spec }: ParameterCardProps) {
+  const type = formatSchema(param.schema);
+  const isRequired = param.required !== false;
+
+  return (
+    <div className="rounded-lg border border-fd-border bg-fd-card/50 p-4">
+      {/* Header row: name + badge */}
+      <div className="flex items-center gap-2 mb-1">
+        <span className="font-mono text-sm text-fd-foreground">{param.name}</span>
+        {isRequired && (
+          <span className="text-[10px] font-semibold px-1.5 py-0.5 rounded border border-fd-border bg-fd-muted text-fd-muted-foreground uppercase tracking-wide">
+            Required
+          </span>
+        )}
+      </div>
+
+      {/* Type */}
+      <div className="text-sm text-fd-muted-foreground font-mono">
+        {type}
+      </div>
+
+      {/* Description */}
+      {param.description && (
+        <p className="text-sm text-fd-muted-foreground mt-2">
+          {param.description}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/signature.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import { ClientDocsKitCode } from '@doccov/ui/docskit';
+import type { SpecExport, SpecSignature, SpecTypeParameter } from '@openpkg-ts/spec';
+import type { RawCode } from 'codehike/code';
+
+export interface SignatureProps {
+  export: SpecExport;
+  signatureIndex?: number;
+}
+
+function formatTypeParameters(typeParams?: SpecTypeParameter[]): string {
+  if (!typeParams?.length) return '';
+  const params = typeParams.map((tp) => {
+    let str = tp.name;
+    if (tp.constraint) str += ` extends ${tp.constraint}`;
+    if (tp.default) str += ` = ${tp.default}`;
+    return str;
+  });
+  return `<${params.join(', ')}>`;
+}
+
+function formatParameters(sig?: SpecSignature): string {
+  if (!sig?.parameters?.length) return '()';
+  const params = sig.parameters.map((p) => {
+    const optional = p.required === false ? '?' : '';
+    const type = formatSchema(p.schema);
+    return `${p.name}${optional}: ${type}`;
+  });
+  return `(${params.join(', ')})`;
+}
+
+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';
+}
+
+function formatReturnType(sig?: SpecSignature): string {
+  if (!sig?.returns) return 'void';
+  if (sig.returns.tsType) return sig.returns.tsType;
+  return formatSchema(sig.returns.schema);
+}
+
+function buildSignatureString(exp: SpecExport, sigIndex = 0): string {
+  const sig = exp.signatures?.[sigIndex];
+  const typeParams = formatTypeParameters(exp.typeParameters || sig?.typeParameters);
+
+  switch (exp.kind) {
+    case 'function': {
+      const params = formatParameters(sig);
+      const returnType = formatReturnType(sig);
+      return `function ${exp.name}${typeParams}${params}: ${returnType}`;
+    }
+    case 'class': {
+      const ext = exp.extends ? ` extends ${exp.extends}` : '';
+      const impl = exp.implements?.length ? ` implements ${exp.implements.join(', ')}` : '';
+      return `class ${exp.name}${typeParams}${ext}${impl}`;
+    }
+    case 'interface': {
+      const ext = exp.extends ? ` extends ${exp.extends}` : '';
+      return `interface ${exp.name}${typeParams}${ext}`;
+    }
+    case 'type': {
+      const typeValue = typeof exp.type === 'string' ? exp.type : formatSchema(exp.schema);
+      return `type ${exp.name}${typeParams} = ${typeValue}`;
+    }
+    case 'enum': {
+      return `enum ${exp.name}`;
+    }
+    case 'variable': {
+      const typeValue = typeof exp.type === 'string' ? exp.type : formatSchema(exp.schema);
+      return `const ${exp.name}: ${typeValue}`;
+    }
+    default:
+      return exp.name;
+  }
+}
+
+export function Signature({ export: exp, signatureIndex = 0 }: SignatureProps) {
+  const signature = buildSignatureString(exp, signatureIndex);
+
+  // Build RawCode for syntax highlighting
+  const codeblock: RawCode = {
+    value: signature,
+    lang: 'typescript',
+    meta: 'c', // copyButton flag
+  };
+
+  return (
+    <div className="not-prose">
+      <ClientDocsKitCode codeblock={codeblock} />
+      {exp.deprecated && (
+        <div className="mt-2 rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400">
+          <strong>Deprecated:</strong> This export is deprecated.
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/type-table.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import type { OpenPkg, SpecSignatureParameter, SpecMember } from '@openpkg-ts/spec';
+
+export interface TypeTableProps {
+  items: (SpecSignatureParameter | SpecMember)[];
+  spec?: OpenPkg;
+  showRequired?: boolean;
+}
+
+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>;
+    // Handle $ref
+    if (s.$ref && typeof s.$ref === 'string') {
+      const refName = s.$ref.replace('#/types/', '');
+      return refName;
+    }
+    // Handle type
+    if (s.type) return String(s.type);
+    // Handle tsType
+    if (s.tsType) return String(s.tsType);
+  }
+  return 'unknown';
+}
+
+function isParameter(item: SpecSignatureParameter | SpecMember): item is SpecSignatureParameter {
+  return 'required' in item;
+}
+
+export function TypeTable({ items, showRequired = true }: TypeTableProps) {
+  if (!items?.length) return null;
+
+  return (
+    <div className="my-4 overflow-x-auto">
+      <table className="w-full text-sm border-collapse">
+        <thead>
+          <tr className="border-b border-fd-border">
+            <th className="text-left py-2 px-3 font-medium text-fd-muted-foreground">Name</th>
+            <th className="text-left py-2 px-3 font-medium text-fd-muted-foreground">Type</th>
+            <th className="text-left py-2 px-3 font-medium text-fd-muted-foreground">Description</th>
+          </tr>
+        </thead>
+        <tbody>
+          {items.map((item, index) => {
+            const name = item.name ?? `arg${index}`;
+            const type = formatSchema(item.schema);
+            const description = item.description ?? '';
+            const required = isParameter(item) ? item.required : true;
+
+            return (
+              <tr key={name} className="border-b border-fd-border last:border-0">
+                <td className="py-2 px-3 align-top">
+                  <code className="text-fd-primary font-mono text-xs bg-fd-secondary px-1.5 py-0.5 rounded">
+                    {name}
+                  </code>
+                  {showRequired && required && (
+                    <span className="ml-1 text-red-500 text-xs">*</span>
+                  )}
+                  {showRequired && !required && (
+                    <span className="ml-1 text-fd-muted-foreground text-xs">?</span>
+                  )}
+                </td>
+                <td className="py-2 px-3 align-top">
+                  <code className="font-mono text-xs text-fd-muted-foreground">{type}</code>
+                </td>
+                <td className="py-2 px-3 align-top text-fd-muted-foreground">
+                  {description}
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+

package/src/components/variable-page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import type { OpenPkg, SpecExport } from '@openpkg-ts/spec';
+import { CodeExample } from './code-example';
+import { CoverageBadge } from './coverage-badge';
+
+export interface VariablePageProps {
+  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 VariablePage({ export: exp, spec }: VariablePageProps) {
+  const typeValue = typeof exp.type === 'string' ? exp.type : formatSchema(exp.schema);
+  const hasExamples = exp.examples && exp.examples.length > 0;
+
+  return (
+    <div className="space-y-8">
+      {/* Description */}
+      {exp.description && (
+        <p className="text-fd-muted-foreground text-lg leading-relaxed">
+          {exp.description}
+        </p>
+      )}
+
+      {/* Declaration */}
+      <div className="rounded-lg border border-fd-border bg-fd-muted/30 p-4 overflow-x-auto">
+        <code className="font-mono text-sm text-fd-foreground whitespace-pre">
+          const {exp.name}: {typeValue}
+        </code>
+      </div>
+
+      {/* Two-column layout */}
+      <div className={`grid gap-8 ${hasExamples ? 'lg:grid-cols-2' : 'grid-cols-1'}`}>
+        {/* Left column: Type info */}
+        <div className="space-y-6">
+          <div>
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-fd-muted-foreground mb-3">
+              Type
+            </h3>
+            <div className="rounded-lg border border-fd-border bg-fd-card p-4">
+              <code className="font-mono text-sm text-fd-primary">{typeValue}</code>
+            </div>
+          </div>
+        </div>
+
+        {/* Right column: Examples */}
+        {hasExamples && (
+          <div>
+            <h3 className="text-sm font-semibold uppercase tracking-wide text-fd-muted-foreground mb-3">
+              {exp.name} usage
+            </h3>
+            <CodeExample 
+              code={exp.examples![0]} 
+              filename={`${exp.name.toLowerCase()}.ts`}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Coverage */}
+      {exp.docs && <CoverageBadge docs={exp.docs} />}
+    </div>
+  );
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+// Server
+export { createOpenPkg } from './server';
+export type { OpenPkgInstance, OpenPkgOptions } from './server';
+
+// Components
+export { APIPage } from './components/api-page';
+export type { APIPageProps } from './components/api-page';
+

package/src/server.ts

@@ -0,0 +1,80 @@
+import * as fs from 'node:fs';
+import type { OpenPkg, SpecExport, SpecExportKind, SpecType } from '@openpkg-ts/spec';
+
+export interface OpenPkgOptions {
+  /** Path to openpkg.json file or the spec object directly */
+  input: string | OpenPkg;
+}
+
+export interface OpenPkgInstance {
+  /** The parsed OpenPkg spec */
+  spec: OpenPkg;
+  /** Get an export by its ID */
+  getExport(id: string): SpecExport | undefined;
+  /** Get a type definition by its ID */
+  getType(id: string): SpecType | undefined;
+  /** Get all exports of a specific kind */
+  getExportsByKind(kind: SpecExportKind): SpecExport[];
+  /** Get all exports */
+  getAllExports(): SpecExport[];
+  /** Get all type definitions */
+  getAllTypes(): SpecType[];
+}
+
+/**
+ * Creates an OpenPkg instance for use with Fumadocs components.
+ *
+ * @example
+ * ```ts
+ * // From file path
+ * const openpkg = createOpenPkg({ input: './openpkg.json' });
+ *
+ * // From spec object
+ * import spec from './openpkg.json';
+ * const openpkg = createOpenPkg({ input: spec });
+ * ```
+ */
+export function createOpenPkg(options: OpenPkgOptions): OpenPkgInstance {
+  const spec: OpenPkg =
+    typeof options.input === 'string'
+      ? JSON.parse(fs.readFileSync(options.input, 'utf-8'))
+      : options.input;
+
+  const exportsById = new Map<string, SpecExport>();
+  const typesById = new Map<string, SpecType>();
+
+  for (const exp of spec.exports) {
+    exportsById.set(exp.id, exp);
+  }
+
+  if (spec.types) {
+    for (const type of spec.types) {
+      typesById.set(type.id, type);
+    }
+  }
+
+  return {
+    spec,
+
+    getExport(id: string): SpecExport | undefined {
+      return exportsById.get(id);
+    },
+
+    getType(id: string): SpecType | undefined {
+      return typesById.get(id);
+    },
+
+    getExportsByKind(kind: SpecExportKind): SpecExport[] {
+      return spec.exports.filter((exp) => exp.kind === kind);
+    },
+
+    getAllExports(): SpecExport[] {
+      return spec.exports;
+    },
+
+    getAllTypes(): SpecType[] {
+      return spec.types ?? [];
+    },
+  };
+}
+