@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dev/README.md

@@ -1,163 +0,0 @@
-# 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

@@ -1,36 +0,0 @@
-// 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();
-};