@openpkg-ts/react 0.2.5 → 0.3.1

package/README.md

@@ -28,6 +28,14 @@ import {
   ParamRow,
   Signature,
   TypeTable,
+  // Section components
+  FunctionSection,
+  ClassSection,
+  InterfaceSection,
+  EnumSection,
+  VariableSection,
+  ExportCard,
+  ExportIndexPage,
 } from '@openpkg-ts/react';
 ```
 
@@ -43,6 +51,13 @@ import {
 | `ParamRow` | Single parameter row |
 | `Signature` | Type signature renderer |
 | `TypeTable` | Type properties table |
+| `FunctionSection` | Function export section |
+| `ClassSection` | Class export section |
+| `InterfaceSection` | Interface export section |
+| `EnumSection` | Enum export section |
+| `VariableSection` | Variable/constant section |
+| `ExportCard` | Single export card |
+| `ExportIndexPage` | Index page for all exports |
 
 ### Styled Components
 
@@ -50,7 +65,27 @@ Pre-styled with Tailwind v4.
 
 ```tsx
 import {
-  // Full pages
+  // Stripe/Supabase-style layout (NEW)
+  StripeAPIReferencePage,
+  APIReferenceLayout,
+  SyncScrollProvider,
+  MethodSection,
+  MethodSectionFromSpec,
+
+  // Parameter components (Stripe-style)
+  APIParameterItem,
+  NestedParameterToggle,
+  NestedParameterContainer,
+  ExpandableParameter,
+  EnumValuesSection,
+
+  // Code example components
+  ExampleChips,
+  CodePanel,
+  CollapsiblePanel,
+  ExampleSection,
+
+  // Full pages (original)
   APIPage,
   FunctionPage,
   ClassPage,
@@ -78,7 +113,54 @@ import {
 
 ## Usage
 
-### Full API Page
+### Stripe/Supabase-Style API Reference (NEW)
+
+Two-column layout with synchronized scrolling:
+
+```tsx
+import { StripeAPIReferencePage } from '@openpkg-ts/react/styled';
+import spec from './openpkg.json';
+
+export default function APIReference() {
+  return <StripeAPIReferencePage spec={spec} />;
+}
+```
+
+Features:
+- Two-column layout (docs left, code examples right)
+- Sticky right panel with synchronized scrolling
+- Stripe-style nested parameters with expandable containers
+- Rose Pine syntax highlighting
+- Collapsible accordion panels
+
+### Custom Stripe-Style Layout
+
+```tsx
+import {
+  APIReferenceLayout,
+  SyncScrollProvider,
+  MethodSectionFromSpec,
+  ExampleSection,
+} from '@openpkg-ts/react/styled';
+
+export default function CustomAPIPage({ spec }) {
+  return (
+    <SyncScrollProvider>
+      <APIReferenceLayout
+        examples={<ExamplesColumn spec={spec} />}
+        leftWidth="55%"
+        rightWidth="45%"
+      >
+        {spec.exports.map(exp => (
+          <MethodSectionFromSpec key={exp.name} spec={spec} export={exp} />
+        ))}
+      </APIReferenceLayout>
+    </SyncScrollProvider>
+  );
+}
+```
+
+### Full API Page (Original)
 
 ```tsx
 import { FullAPIReferencePage } from '@openpkg-ts/react/styled';
@@ -128,12 +210,36 @@ Convert spec data to component props:
 
 ```tsx
 import {
+  // Original adapters
   specParamToAPIParam,
   specSchemaToAPISchema,
   specExamplesToCodeExamples,
   buildImportStatement,
   getLanguagesFromExamples,
+
+  // New Stripe-style adapters
+  specParamToNestedParam,
+  specParamsToNestedParams,
+  resolveSchemaRef,
+  specExampleToCodeExample,
+  generateDefaultExample,
+} from '@openpkg-ts/react/styled';
+```
+
+## Hooks
+
+Extract method data from spec:
+
+```tsx
+import {
+  useMethodFromSpec,
+  useMethodsFromSpec,
+  extractMethodData,
 } from '@openpkg-ts/react/styled';
+
+// In component
+const method = useMethodFromSpec(spec, 'createClient');
+// Returns: { title, signature, description, parameters, examples, returnType, isAsync }
 ```
 
 ## Headless Utilities
@@ -148,6 +254,50 @@ import {
 } from '@openpkg-ts/react';
 ```
 
+## Component Registry
+
+Install components via CLI (shadcn-compatible):
+
+```bash
+# List available components
+openpkg docs list
+
+# Add Stripe-style components
+openpkg docs add stripe-api-reference-page
+openpkg docs add method-section-from-spec
+openpkg docs add api-reference-layout sync-scroll-provider
+openpkg docs add api-parameter-item expandable-property
+openpkg docs add example-chips code-panel collapsible-panel
+
+# Add original section components
+openpkg docs add function-section class-section interface-section
+```
+
+29 components available:
+- **Stripe-style Layouts**: `api-reference-layout`, `sync-scroll-provider`, `method-section`, `stripe-api-reference-page`, `method-section-from-spec`
+- **Parameter Components**: `api-parameter-item`, `nested-parameter-toggle`, `nested-parameter-container`, `expandable-property`, `enum-values-section`
+- **Code Examples**: `example-chips`, `code-panel`, `collapsible-panel`, `example-section`
+- **Original Sections**: `function-section`, `class-section`, `interface-section`, `enum-section`, `variable-section`
+- **Primitives**: `export-card`, `param-table`, `signature`, `members-table`, `type-table`
+
+## React Layout Generation
+
+Generate a single layout file that uses registry components:
+
+```bash
+openpkg docs generate spec.json -f react -o ./app/api
+```
+
+Creates:
+- `layout.tsx` - Main layout with navigation
+- `spec.json` - Bundled spec data
+
+Then add components:
+
+```bash
+openpkg docs add function-section class-section
+```
+
 ## License
 
 MIT

package/dist/index.d.ts

@@ -1,15 +1,15 @@
-import { SpecMember } from "@openpkg-ts/spec";
+import { SpecMember as SpecMember2 } from "@openpkg-ts/spec";
 interface CollapsibleMethodProps {
 	/** Method member to display */
-	member: SpecMember;
+	member: SpecMember2;
 	/** Default expanded state */
 	defaultExpanded?: boolean;
 	/** Custom className */
 	className?: string;
 	/** Custom header renderer */
-	renderHeader?: (member: SpecMember, expanded: boolean, toggle: () => void) => React.ReactNode;
+	renderHeader?: (member: SpecMember2, expanded: boolean, toggle: () => void) => React.ReactNode;
 	/** Custom content renderer */
-	renderContent?: (member: SpecMember) => React.ReactNode;
+	renderContent?: (member: SpecMember2) => React.ReactNode;
 }
 /**
 * Headless collapsible method component.
@@ -100,30 +100,30 @@ declare function NestedProperty({ name, schema, required, depth }: NestedPropert
 * ```
 */
 declare function ExpandableProperty({ param, depth, className }: ExpandablePropertyProps): React.ReactNode;
-import { SpecMember as SpecMember2 } from "@openpkg-ts/spec";
+import { SpecMember as SpecMember5 } from "@openpkg-ts/spec";
 interface MembersTableProps {
 	/** Members to display */
-	members: SpecMember2[];
+	members: SpecMember5[];
 	/** Custom className */
 	className?: string;
 	/** Group by kind (constructor, property, method) */
 	groupByKind?: boolean;
 	/** Custom member renderer */
-	renderMember?: (member: SpecMember2, index: number) => React.ReactNode;
+	renderMember?: (member: SpecMember5, index: number) => React.ReactNode;
 }
 interface MemberGroups {
-	constructors: SpecMember2[];
-	properties: SpecMember2[];
-	methods: SpecMember2[];
-	accessors: SpecMember2[];
-	other: SpecMember2[];
+	constructors: SpecMember5[];
+	properties: SpecMember5[];
+	methods: SpecMember5[];
+	accessors: SpecMember5[];
+	other: SpecMember5[];
 }
 /**
 * Group members by their kind.
 */
-declare function groupMembersByKind(members: SpecMember2[]): MemberGroups;
+declare function groupMembersByKind(members: SpecMember5[]): MemberGroups;
 interface MemberRowProps {
-	member: SpecMember2;
+	member: SpecMember5;
 }
 /**
 * Individual member row.
@@ -138,19 +138,19 @@ declare function MemberRow({ member }: MemberRowProps): React.ReactNode;
 * ```
 */
 declare function MembersTable({ members, className, groupByKind, renderMember }: MembersTableProps): React.ReactNode;
-import { SpecMember as SpecMember3, SpecSignatureParameter as SpecSignatureParameter2 } from "@openpkg-ts/spec";
+import { SpecMember as SpecMember6, SpecSignatureParameter as SpecSignatureParameter3 } from "@openpkg-ts/spec";
 interface ParamTableProps {
 	/** Parameters or members to display */
-	items: (SpecSignatureParameter2 | SpecMember3)[];
+	items: (SpecSignatureParameter3 | SpecMember6)[];
 	/** Show required indicator */
 	showRequired?: boolean;
 	/** Custom className */
 	className?: string;
 	/** Render custom row */
-	renderRow?: (item: SpecSignatureParameter2 | SpecMember3, index: number) => React.ReactNode;
+	renderRow?: (item: SpecSignatureParameter3 | SpecMember6, index: number) => React.ReactNode;
 }
 interface ParamRowProps {
-	item: SpecSignatureParameter2 | SpecMember3;
+	item: SpecSignatureParameter3 | SpecMember6;
 	showRequired?: boolean;
 }
 /**
@@ -172,10 +172,10 @@ declare function ParamRow({ item, showRequired }: ParamRowProps): React.ReactNod
 * ```
 */
 declare function ParamTable({ items, showRequired, className, renderRow }: ParamTableProps): React.ReactNode;
-import { SpecExport } from "@openpkg-ts/spec";
+import { SpecExport as SpecExport6 } from "@openpkg-ts/spec";
 interface SignatureProps {
 	/** The to render signature for */
-	export: SpecExport;
+	export: SpecExport6;
 	/** Index of signature to render (for overloaded functions) */
 	signatureIndex?: number;
 	/** Custom className */
@@ -198,16 +198,16 @@ interface SignatureProps {
 * ```
 */
 declare function Signature({ export: exp, signatureIndex, className, children }: SignatureProps): React.ReactNode;
-import { SpecMember as SpecMember4, SpecSignatureParameter as SpecSignatureParameter3 } from "@openpkg-ts/spec";
+import { SpecMember as SpecMember7, SpecSignatureParameter as SpecSignatureParameter4 } from "@openpkg-ts/spec";
 interface TypeTableProps {
 	/** Members or parameters to display */
-	items: (SpecSignatureParameter3 | SpecMember4)[];
+	items: (SpecSignatureParameter4 | SpecMember7)[];
 	/** Show required indicator */
 	showRequired?: boolean;
 	/** Custom className */
 	className?: string;
 	/** Render custom row */
-	renderRow?: (item: SpecSignatureParameter3 | SpecMember4, index: number) => React.ReactNode;
+	renderRow?: (item: SpecSignatureParameter4 | SpecMember7, index: number) => React.ReactNode;
 }
 /**
 * Headless type table for displaying interface/type members.

package/dist/index.js

@@ -14,7 +14,7 @@ import {
   getExampleLanguage,
   getExampleTitle,
   groupMembersByKind
-} from "./shared/chunk-j3c78zxw.js";
+} from "./shared/chunk-2t4e6p1b.js";
 export {
   groupMembersByKind,
   getExampleTitle,

package/dist/shared/{chunk-j3c78zxw.js → chunk-2t4e6p1b.js}

@@ -18,7 +18,7 @@ var __toESM = (mod, isNodeMode, target) => {
 var __commonJS = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 
 // src/components/headless/CollapsibleMethod.tsx
-import { formatReturnType, formatSchema, getMemberBadges } from "@openpkg-ts/sdk";
+import { formatReturnType, formatSchema, getMemberBadges } from "@openpkg-ts/sdk/browser";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -91,7 +91,7 @@ function CollapsibleMethod({
           member.description && /* @__PURE__ */ jsx("p", {
             children: member.description
           }),
-          hasParams && /* @__PURE__ */ jsxs("div", {
+          hasParams && sig?.parameters && /* @__PURE__ */ jsxs("div", {
             "data-params-section": true,
             children: [
               /* @__PURE__ */ jsx("h4", {
@@ -220,7 +220,7 @@ function ExampleBlock({
 }
 
 // src/components/headless/ExpandableProperty.tsx
-import { formatSchema as formatSchema2 } from "@openpkg-ts/sdk";
+import { formatSchema as formatSchema2 } from "@openpkg-ts/sdk/browser";
 import { useState as useState3 } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 
@@ -365,7 +365,7 @@ function ExpandableProperty({
 }
 
 // src/components/headless/MembersTable.tsx
-import { formatSchema as formatSchema3, getMemberBadges as getMemberBadges2 } from "@openpkg-ts/sdk";
+import { formatSchema as formatSchema3, getMemberBadges as getMemberBadges2 } from "@openpkg-ts/sdk/browser";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 
 function groupMembersByKind(members) {
@@ -502,7 +502,7 @@ function MembersTable({
 }
 
 // src/components/headless/ParamTable.tsx
-import { formatSchema as formatSchema4 } from "@openpkg-ts/sdk";
+import { formatSchema as formatSchema4 } from "@openpkg-ts/sdk/browser";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 
 function isParameter(item) {
@@ -576,7 +576,7 @@ function ParamTable({
 }
 
 // src/components/headless/Signature.tsx
-import { buildSignatureString } from "@openpkg-ts/sdk";
+import { buildSignatureString } from "@openpkg-ts/sdk/browser";
 import { jsx as jsx6 } from "react/jsx-runtime";
 
 function Signature({
@@ -596,7 +596,7 @@ function Signature({
 }
 
 // src/components/headless/TypeTable.tsx
-import { formatSchema as formatSchema5 } from "@openpkg-ts/sdk";
+import { formatSchema as formatSchema5 } from "@openpkg-ts/sdk/browser";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 
 function isParameter2(item) {
@@ -667,4 +667,31 @@ function TypeTable({
     ]
   });
 }
+
+// src/components/headless/ClassSection.tsx
+import { formatSchema as formatSchema6 } from "@openpkg-ts/sdk/browser";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/components/headless/EnumSection.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// src/components/headless/ExportCard.tsx
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/components/headless/ExportIndexPage.tsx
+import { useMemo, useState as useState4 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// src/components/headless/FunctionSection.tsx
+import { formatSchema as formatSchema7 } from "@openpkg-ts/sdk/browser";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// src/components/headless/InterfaceSection.tsx
+import { formatSchema as formatSchema8 } from "@openpkg-ts/sdk/browser";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+
+// src/components/headless/VariableSection.tsx
+import { formatSchema as formatSchema9 } from "@openpkg-ts/sdk/browser";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+
 export { __toESM, __commonJS, CollapsibleMethod, getExampleCode, getExampleTitle, getExampleLanguage, cleanCode, ExampleBlock, NestedProperty, ExpandableProperty, groupMembersByKind, MemberRow, MembersTable, ParamRow, ParamTable, Signature, TypeTable };