@openpkg-ts/react 0.2.5 → 0.3.0

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.js

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

package/dist/shared/{chunk-j3c78zxw.js → chunk-kpvq09pv.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";
 
@@ -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,30 @@ function TypeTable({
     ]
   });
 }
+// src/components/headless/FunctionSection.tsx
+import { formatSchema as formatSchema6 } from "@openpkg-ts/sdk/browser";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+
+// src/components/headless/ClassSection.tsx
+import { formatSchema as formatSchema7 } from "@openpkg-ts/sdk/browser";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+
+// src/components/headless/InterfaceSection.tsx
+import { formatSchema as formatSchema8 } from "@openpkg-ts/sdk/browser";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+
+// src/components/headless/VariableSection.tsx
+import { formatSchema as formatSchema9 } from "@openpkg-ts/sdk/browser";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+
+// src/components/headless/EnumSection.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+
+// src/components/headless/ExportCard.tsx
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+
+// src/components/headless/ExportIndexPage.tsx
+import { useMemo, useState as useState4 } from "react";
+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 };