@incodetech/web 2.0.0-alpha.1

package/dev/README.md

@@ -0,0 +1,163 @@
+# UI Dev Demos
+
+This folder contains various demo files to test and demonstrate different integration patterns for the Incode Web SDK.
+
+## Running the Demos
+
+```bash
+cd packages/ui
+pnpm dev
+```
+
+Then open the landing page at `/dev/index.html` to see all available demos.
+
+### Landing Page
+
+The landing page (`/dev/index.html`) provides:
+- Overview of all integration patterns
+- Config ID input field (persisted to localStorage)
+- Quick links to each demo with configId passed as query parameter
+
+---
+
+## Demo Scenarios
+
+### 1. Simplified Flow (`/dev/simplified.html`)
+
+**Files:** `simplified.html`, `main-simplified.tsx`
+
+**Pattern:** Drop-in `<incode-flow>` web component
+
+**Best for:** Customers who want the simplest integration with minimal code.
+
+```html
+<incode-flow id="flow"></incode-flow>
+
+<script type="module">
+  import '@incodetech/ui/flow';
+
+  const flow = document.getElementById('flow');
+  flow.token = 'your-session-token';
+  flow.onComplete = (result) => {
+    console.log('Done!', result);
+  };
+</script>
+```
+
+**What it demonstrates:**
+- Single web component handles everything
+- No manual flow management needed
+- Automatic module orchestration
+
+---
+
+### 2. Orchestrated Flow with Custom UI (`/dev/orchestrated-flow.html`)
+
+**Files:** `orchestrated-flow.html`, `main-orchestrated-flow.tsx`
+
+**Pattern:** `createOrchestratedFlowManager` with custom UI components
+
+**Best for:** Customers who want orchestration benefits but need custom UI.
+
+```tsx
+const [state, flowManager] = useManager(() =>
+  createOrchestratedFlowManager({
+    modules: { PHONE: phoneMachine },
+  })
+);
+
+// Render your own UI, signal completion when done
+<Phone
+  config={config}
+  onFinish={() => flowManager.completeModule()}
+/>
+```
+
+**What it demonstrates:**
+- Using the orchestrator directly
+- Custom UI rendering based on flow state
+- Signaling module completion with `completeModule()`
+- Access to `finishStatus` when flow completes
+
+---
+
+### 3. Manual Flow Control (`/dev/manual.html`)
+
+**Files:** `manual.html`, `main-web-component.tsx`
+
+**Pattern:** `createFlowManager` with manual `nextStep()` calls
+
+**Best for:** Legacy pattern or customers needing full manual control.
+
+```tsx
+const [state, flowManager] = useManager(() => createFlowManager());
+
+// Manually advance the flow
+<Phone
+  config={config}
+  onFinish={() => flowManager.nextStep()}
+/>
+```
+
+**What it demonstrates:**
+- Original flow manager (non-orchestrated)
+- Manual step advancement
+- Full control over flow progression
+
+---
+
+### 4. Headless Demo (`/dev/headless.html`)
+
+**Files:** `headless.html`, `main-headless.tsx`
+
+**Pattern:** Core SDK only, custom vanilla UI
+
+**Best for:** Customers building completely custom UIs (React, Vue, vanilla JS, etc.)
+
+```ts
+import { createPhoneManager } from '@incodetech/core/phone';
+
+const manager = createPhoneManager({ config });
+
+// Subscribe to state changes
+manager.subscribe((state) => {
+  // Render your own UI based on state
+  renderCustomUI(state);
+});
+
+// Call manager methods
+manager.setPhoneNumber('+1234567890', true);
+manager.submit();
+```
+
+**What it demonstrates:**
+- Using Core SDK without any Incode UI components
+- Building custom UI with vanilla JavaScript (or any framework)
+- Full state machine visibility and control
+- Manager pattern API
+
+---
+
+## Comparison Chart
+
+| Demo | Flow Manager | UI Components | Complexity | Use Case |
+|------|--------------|---------------|------------|----------|
+| Simplified | Orchestrated (internal) | `<incode-flow>` | ⭐ Lowest | Drop-in integration |
+| Orchestrated | `createOrchestratedFlowManager` | Incode UI | ⭐⭐ Medium | Custom flow, Incode UI |
+| Manual | `createFlowManager` | Incode UI | ⭐⭐⭐ Higher | Full manual control |
+| Headless | None | Custom | ⭐⭐⭐⭐ Highest | Fully custom UI |
+
+---
+
+## Architecture Layers
+
+All demos follow the three-layer architecture:
+
+```
+Layer 2 (UI)     → Preact components, CSS, web components
+Layer 1 (Core)   → State machines, managers, business logic
+Layer 0 (Infra)  → Browser APIs, WASM, utilities
+```
+
+See `/docs/ARCHITECTURE_GOALS.md` for full details.
+

package/dev/getToken.ts

@@ -0,0 +1,36 @@
+// this never will be export or use in production, this is for development purposes only
+
+const DEFAULT_CONFIG_ID = '67ddc65d36b9814a930c4dff';
+
+export function getConfigIdFromUrl(): string {
+  const params = new URLSearchParams(window.location.search);
+  return params.get('configId') ?? DEFAULT_CONFIG_ID;
+}
+
+type GetTokenOptions = {
+  configId?: string;
+};
+
+export const getToken = async (options: GetTokenOptions = {}) => {
+  const configId = options.configId ?? getConfigIdFromUrl();
+
+  const response = await fetch(
+    'https://user-service-k8s.stage.incodetest.com/omni/start',
+    {
+      headers: {
+        'x-api-key': '5fbc0ab5a652b7808fbec42fffd8b4c9ec248413',
+        'api-version': '1.0',
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify({
+        configurationId: configId,
+        uuid: null,
+        interviewId: null,
+        language: 'en-US',
+      }),
+      method: 'POST',
+    },
+  );
+  return response.json();
+};