@appfunnel-dev/sdk 0.1.0

package/README.md

@@ -0,0 +1,91 @@
+# @appfunnel-dev/sdk
+
+Headless SDK for building AppFunnel pages with React. Write funnel pages as React components while the SDK handles payments, tracking, navigation, and variable state.
+
+## Installation
+
+```bash
+npm install @appfunnel-dev/sdk
+```
+
+## Quick Start
+
+### 1. Define your config
+
+```ts
+// appfunnel.config.ts
+import { defineConfig } from '@appfunnel-dev/sdk'
+
+export default defineConfig({
+  projectId: 'clxxx...',
+  name: 'My Onboarding Funnel',
+  pages: {
+    index:    { name: 'Landing',  type: 'default' },
+    quiz:     { name: 'Quiz',     type: 'default' },
+    checkout: { name: 'Checkout', type: 'checkout' },
+    success:  { name: 'Success',  type: 'finish' },
+  },
+  routes: {
+    index:    [{ to: 'quiz' }],
+    quiz:     [
+      { to: 'checkout', when: { variable: 'plan', equals: 'premium' } },
+      { to: 'success' },
+    ],
+    checkout: [{ to: 'success' }],
+  },
+  variables: {
+    email: { type: 'string' },
+    plan:  { type: 'string', default: 'free' },
+  },
+  products: {
+    items: [
+      { id: 'monthly', name: 'Monthly Plan', storePriceId: 'clyyy...' },
+      { id: 'yearly',  name: 'Yearly Plan',  storePriceId: 'clzzz...' },
+    ],
+    defaultId: 'yearly',
+  },
+})
+```
+
+### 2. Write pages
+
+```tsx
+// pages/index.tsx
+import { useVariable, useNavigation } from '@appfunnel-dev/sdk'
+
+export default function Landing() {
+  const [email, setEmail] = useVariable<string>('email')
+  const { goToNextPage } = useNavigation()
+
+  return (
+    <div>
+      <h1>Start your journey</h1>
+      <input
+        type="email"
+        value={email}
+        onChange={e => setEmail(e.target.value)}
+      />
+      <button onClick={goToNextPage}>Continue</button>
+    </div>
+  )
+}
+```
+
+## Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useVariable(id)` | Read/write a single variable with typed actions |
+| `useVariables()` | Read all variables (read-only) |
+| `useNavigation()` | Page navigation, progress, history |
+| `useProducts()` | Product list, selection |
+| `useTracking()` | Event tracking, user identification |
+| `usePayment()` | Payment state (card details, loading, errors) |
+| `useFunnel()` | Convenience — combines all hooks above |
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `<PaymentForm>` | Stripe Elements wrapper for card collection & payment |
+| `<PaddleCheckout>` | Paddle checkout (overlay or inline) |