@incodetech/web 2.0.0-alpha.2 → 2.0.0-alpha.4

package/dev/main.tsx

@@ -1,332 +0,0 @@
-import '../src/styles/tokens/index.css';
-import '../src/selfie/selfie';
-import { setup } from '@incodetech/core';
-import type { FlowModuleConfig } from '@incodetech/core/flow';
-import { createFlowManager } from '@incodetech/core/flow';
-import { createSelfieManager, type SelfieState } from '@incodetech/core/selfie';
-import { getToken } from './getToken';
-
-const app = async () => {
-  const { token } = await getToken();
-  setup({
-    apiURL: 'https://user-service-k8s.stage.incodetest.com/0',
-    token,
-  });
-  const flowManager = createFlowManager();
-  flowManager.load();
-  flowManager.subscribe((state) => {
-    const root = document.getElementById('root');
-    if (!root) return;
-    root.innerText = '';
-    console.log(state, 'state changed!');
-    if (state.status === 'ready') {
-      console.log(state.flow, 'current flow');
-
-      const { currentStep, config } = state;
-      if (currentStep) {
-        console.log(config, 'module config');
-        document.title = currentStep;
-        if (currentStep === 'TUTORIAL_ID' || currentStep === 'ID') {
-          const idElement = document.createElement('div');
-          const button = document.createElement('button');
-          button.innerHTML = 'Continue';
-          button.addEventListener('click', () => {
-            flowManager.nextStep();
-          });
-          idElement.innerHTML = `<h1>This is ${currentStep}</h1><p>Hi!</p>`;
-          idElement.appendChild(button);
-          document.getElementById('root')?.appendChild(idElement);
-          return;
-        }
-
-        if (currentStep === 'SELFIE') {
-          const selfieConfig = config as FlowModuleConfig['SELFIE'];
-
-          const selfieManager = createSelfieManager({ config: selfieConfig });
-          selfieManager.load();
-
-          let videoElement: HTMLVideoElement | null = null;
-          let currentStream: MediaStream | null = null;
-          let isLoadingButton = false;
-
-          const renderSelfieUI = (selfieState: SelfieState) => {
-            const selfieRoot = document.getElementById('selfie-root');
-            if (!selfieRoot) return;
-
-            const isDetecting =
-              selfieState.status === 'capture' &&
-              selfieState.captureStatus === 'detecting';
-
-            if (isDetecting) {
-              const statusEl = document.getElementById('detection-status');
-              if (statusEl) {
-                statusEl.innerHTML = `
-                  <p>Status: <strong>${selfieState.detectionStatus}</strong></p>
-                  <p>Attempts remaining: ${selfieState.attemptsRemaining}</p>
-                `;
-                return;
-              }
-            } else {
-              videoElement = null;
-              currentStream = null;
-            }
-
-            if (selfieState.status !== 'tutorial') {
-              isLoadingButton = false;
-            }
-
-            selfieRoot.innerHTML = '';
-            console.log(selfieState, 'selfieState');
-
-            if (selfieState.status === 'loading') {
-              selfieRoot.innerHTML = '<p>Loading...</p>';
-              return;
-            }
-
-            if (selfieState.status === 'tutorial') {
-              const tutorialDiv = document.createElement('div');
-              tutorialDiv.innerHTML =
-                '<h2>Selfie Tutorial</h2><p>Position your face in the center</p>';
-              const continueBtn = document.createElement('button');
-
-              if (isLoadingButton) {
-                continueBtn.textContent = 'Loading...';
-                continueBtn.disabled = true;
-              } else {
-                continueBtn.textContent = 'Continue';
-                continueBtn.disabled = false;
-                continueBtn.addEventListener('click', () => {
-                  isLoadingButton = true;
-                  selfieManager.nextStep();
-                  renderSelfieUI(selfieManager.getState());
-                });
-              }
-
-              tutorialDiv.appendChild(continueBtn);
-              selfieRoot.appendChild(tutorialDiv);
-              return;
-            }
-
-            if (selfieState.status === 'permissions') {
-              const permDiv = document.createElement('div');
-
-              if (selfieState.permissionStatus === 'idle') {
-                permDiv.innerHTML =
-                  '<h2>Camera Permission</h2><p>We need access to your camera</p>';
-                const allowBtn = document.createElement('button');
-                allowBtn.textContent = 'Allow Camera';
-                allowBtn.addEventListener('click', () =>
-                  selfieManager.requestPermission(),
-                );
-                const learnMoreBtn = document.createElement('button');
-                learnMoreBtn.textContent = 'Learn More';
-                learnMoreBtn.addEventListener('click', () =>
-                  selfieManager.goToLearnMore(),
-                );
-                permDiv.appendChild(allowBtn);
-                permDiv.appendChild(learnMoreBtn);
-              }
-
-              if (selfieState.permissionStatus === 'requesting') {
-                permDiv.innerHTML = '<p>Requesting camera access...</p>';
-              }
-
-              if (selfieState.permissionStatus === 'denied') {
-                permDiv.innerHTML =
-                  '<h2>Permission Denied</h2><p>Camera access was denied. Please refresh your browser to grant permissions.</p>';
-                const refreshBtn = document.createElement('button');
-                refreshBtn.textContent = 'Refresh Browser';
-                refreshBtn.addEventListener('click', () => {
-                  window.location.reload();
-                });
-                permDiv.appendChild(refreshBtn);
-              }
-
-              if (selfieState.permissionStatus === 'learnMore') {
-                permDiv.innerHTML =
-                  '<h2>Why we need camera</h2><p>To verify your identity</p>';
-                const allowBtn = document.createElement('button');
-                allowBtn.textContent = 'Allow Camera';
-                allowBtn.addEventListener('click', () =>
-                  selfieManager.requestPermission(),
-                );
-                const backBtn = document.createElement('button');
-                backBtn.textContent = 'Back';
-                backBtn.addEventListener('click', () => selfieManager.back());
-                const quitBtn = document.createElement('button');
-                quitBtn.textContent = 'Quit';
-                quitBtn.addEventListener('click', () => selfieManager.close());
-                permDiv.appendChild(allowBtn);
-                permDiv.appendChild(backBtn);
-                permDiv.appendChild(quitBtn);
-              }
-
-              selfieRoot.appendChild(permDiv);
-              return;
-            }
-
-            if (selfieState.status === 'capture') {
-              const captureDiv = document.createElement('div');
-
-              if (selfieState.captureStatus === 'initializing') {
-                captureDiv.innerHTML = `
-                  <h2>Initializing Camera</h2>
-                  <div style="display: flex; justify-content: center; align-items: center; margin: 20px 0;">
-                    <div style="border: 4px solid #f3f3f3; border-top: 4px solid #3498db; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite;"></div>
-                  </div>
-                  <p>Please wait...</p>
-                  <style>
-                    @keyframes spin {
-                      0% { transform: rotate(0deg); }
-                      100% { transform: rotate(360deg); }
-                    }
-                  </style>
-                `;
-              }
-
-              if (selfieState.captureStatus === 'detecting') {
-                captureDiv.innerHTML = '<h2>Face Detection</h2>';
-
-                const statusDiv = document.createElement('div');
-                statusDiv.id = 'detection-status';
-                statusDiv.innerHTML = `
-                  <p>Status: <strong>${selfieState.detectionStatus}</strong></p>
-                  <p>Attempts remaining: ${selfieState.attemptsRemaining}</p>
-                `;
-                captureDiv.appendChild(statusDiv);
-
-                if (
-                  selfieState.stream &&
-                  selfieState.stream !== currentStream
-                ) {
-                  currentStream = selfieState.stream;
-                  videoElement = document.createElement('video');
-                  videoElement.srcObject = selfieState.stream;
-                  videoElement.autoplay = true;
-                  videoElement.playsInline = true;
-                  videoElement.muted = true;
-                  videoElement.style.width = '320px';
-                  videoElement.style.height = '240px';
-                  videoElement.style.transform = 'scaleX(-1)';
-                  videoElement.style.display = 'block';
-                  videoElement.style.marginTop = '16px';
-                }
-
-                if (videoElement) {
-                  captureDiv.appendChild(videoElement);
-                }
-              }
-
-              if (selfieState.captureStatus === 'capturing') {
-                captureDiv.innerHTML =
-                  '<h2>Capturing</h2><p>Taking photo...</p>';
-              }
-
-              if (selfieState.captureStatus === 'uploading') {
-                captureDiv.innerHTML =
-                  '<h2>Uploading</h2><p>Sending selfie to server...</p>';
-              }
-
-              if (selfieState.captureStatus === 'uploadError') {
-                captureDiv.innerHTML = `
-                  <h2>Upload Failed</h2>
-                  <p>Error: ${selfieState.uploadError}</p>
-                  <p>Attempts remaining: ${selfieState.attemptsRemaining}</p>
-                `;
-                if (selfieState.attemptsRemaining > 0) {
-                  const retryBtn = document.createElement('button');
-                  retryBtn.textContent = 'Retry';
-                  retryBtn.addEventListener('click', () =>
-                    selfieManager.retryCapture(),
-                  );
-                  captureDiv.appendChild(retryBtn);
-                } else {
-                  const noAttemptsMsg = document.createElement('p');
-                  noAttemptsMsg.innerHTML =
-                    '<strong style="color: red;">No more attempts available!</strong>';
-                  captureDiv.appendChild(noAttemptsMsg);
-                  const continueBtn = document.createElement('button');
-                  continueBtn.textContent = 'Continue';
-                  continueBtn.addEventListener('click', () =>
-                    flowManager.nextStep(),
-                  );
-                  captureDiv.appendChild(continueBtn);
-                }
-              }
-
-              if (selfieState.captureStatus === 'success') {
-                captureDiv.innerHTML =
-                  '<h2>Success!</h2><p>Selfie captured successfully!</p>';
-              }
-
-              selfieRoot.appendChild(captureDiv);
-              return;
-            }
-
-            if (selfieState.status === 'finished') {
-              selfieRoot.innerHTML = '<p>Selfie complete!</p>';
-              flowManager.nextStep();
-              return;
-            }
-
-            if (selfieState.status === 'closed') {
-              const errorDiv = document.createElement('div');
-              errorDiv.innerHTML =
-                '<h2>Process Cancelled</h2><p>You quit the selfie process</p>';
-              selfieRoot.appendChild(errorDiv);
-              return;
-            }
-
-            if (selfieState.status === 'error') {
-              const errorDiv = document.createElement('div');
-              errorDiv.innerHTML = `<h2>Error</h2><p>${selfieState.error}</p>`;
-              const resetBtn = document.createElement('button');
-              resetBtn.textContent = 'Try Again';
-              resetBtn.addEventListener('click', () => selfieManager.reset());
-              errorDiv.appendChild(resetBtn);
-              selfieRoot.appendChild(errorDiv);
-              return;
-            }
-          };
-
-          const selfieElement = document.createElement('div');
-          selfieElement.innerHTML = '<h1>Selfie Module</h1>';
-          const selfieRoot = document.createElement('div');
-          selfieRoot.id = 'selfie-root';
-          selfieElement.appendChild(selfieRoot);
-          document.getElementById('root')?.appendChild(selfieElement);
-
-          selfieManager.subscribe(renderSelfieUI);
-          renderSelfieUI(selfieManager.getState());
-          return;
-        }
-        document.title = 'Unknown step';
-        const unknownStepElement = document.createElement('div');
-        const button = document.createElement('button');
-        button.innerHTML = 'Continue';
-        button.addEventListener('click', () => {
-          flowManager.nextStep();
-        });
-        unknownStepElement.innerHTML = `<h1>Unknown step</h1><p>step: ${currentStep}</p>`;
-        unknownStepElement.appendChild(button);
-        document.getElementById('root')?.appendChild(unknownStepElement);
-        return;
-      }
-    }
-
-    if (state.status === 'finished') {
-      console.log(state.flow, 'finished');
-      const finishedElement = document.createElement('div');
-      finishedElement.innerHTML = `<h1>Finished</h1><p>Hi!</p>`;
-      document.getElementById('root')?.appendChild(finishedElement);
-    }
-    if (state.status === 'error') {
-      console.log(state.error);
-      const errorElement = document.createElement('div');
-      errorElement.innerHTML = state.error;
-      document.getElementById('root')?.appendChild(errorElement);
-    }
-  });
-};
-
-app();

package/dev/manual.html

@@ -1,27 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Incode Flow - Manual Control</title>
-    <style>
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
-      #root {
-        width: 100%;
-        height: 100%;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./main-web-component.tsx"></script>
-  </body>
-</html>
-

package/dev/orchestrated-flow.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Incode Flow - Orchestrated</title>
-    <style>
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
-      #root {
-        width: 100%;
-        height: 100%;
-      }
-
-      /*
-       * ============================================================================
-       * SPINNER CSS VARIABLE OVERRIDES
-       * ============================================================================
-       * You can customize the SDK's Spinner component appearance using CSS variables.
-       * These variables control the spinner icon colors, text colors, and overlay.
-       * 
-       * Available variables:
-       *   --spinner-surface-primary     - Primary spinner icon color (rotating part)
-       *   --spinner-surface-secondary   - Secondary/track color
-       *   --spinner-text-title          - Title text color
-       *   --spinner-text-subtitle       - Subtitle text color
-       *   --spinner-surface-overlay     - Full-screen overlay background color
-       *   --spinner-surface-overlay-opacity - Overlay opacity (0-1)
-       * ============================================================================
-       */
-      :root {
-        /* Example: Blue & Gold themed spinner */
-        --spinner-surface-primary: #f59e0b;    /* Gold primary */
-        --spinner-surface-secondary: #1e3a5f;  /* Dark blue track */
-        --spinner-text-title: #1e3a5f;         /* Dark blue title */
-        --spinner-text-subtitle: #64748b;      /* Gray subtitle */
-        --spinner-surface-overlay: #f8fafc;    /* Light gray background */
-        --spinner-surface-overlay-opacity: 1;
-      }
-
-      /*
-       * You can also directly target spinner CSS classes for advanced customization:
-       *
-       *   .IncodeSpinner           - Base spinner container
-       *   .IncodeSpinnerFullScreen - Applied when fullScreen={true}
-       *   .IncodeSpinnerContent    - Inner content wrapper
-       *   .IncodeSpinnerText       - Text container
-       *   .IncodeSpinnerTitle      - Title element
-       *   .IncodeSpinnerSubtitle   - Subtitle element
-       */
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./main-orchestrated-flow.tsx"></script>
-  </body>
-</html>
-

package/dev/simplified.html

@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Incode Flow - Simplified</title>
-    <style>
-      html,
-      body {
-        width: 100%;
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        overflow: hidden;
-      }
-      #root {
-        width: 100%;
-        height: 100%;
-      }
-      incode-flow {
-        display: block;
-        width: 100%;
-        height: 100%;
-      }
-
-      /*
-       * ============================================================================
-       * SPINNER CUSTOMIZATION VIA CSS VARIABLES
-       * ============================================================================
-       * The IncodeFlow component uses a Spinner during loading states.
-       * Customize its appearance by overriding these CSS variables:
-       * ============================================================================
-       */
-      :root {
-        /* Spinner icon colors */
-        --spinner-surface-primary: #3b82f6;    /* Primary blue */
-        --spinner-surface-secondary: #dbeafe;  /* Light blue track */
-        
-        /* Text colors */
-        --spinner-text-title: #1e293b;         /* Dark slate */
-        --spinner-text-subtitle: #64748b;      /* Medium slate */
-        
-        /* Full-screen overlay */
-        --spinner-surface-overlay: #ffffff;    /* White background */
-        --spinner-surface-overlay-opacity: 1;
-      }
-
-      /*
-       * For advanced styling, you can also target spinner classes directly:
-       * 
-       *   .IncodeSpinner           - Container element
-       *   .IncodeSpinnerFullScreen - Applied for full-screen mode
-       *   .IncodeSpinnerContent    - Inner content wrapper
-       *   .IncodeSpinnerTitle      - Title text
-       *   .IncodeSpinnerSubtitle   - Subtitle text
-       */
-    </style>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./main-simplified.tsx"></script>
-  </body>
-</html>
-

package/dev/tiktok-logo.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo
-Mixer Tools -->
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 512 512" id="icons"
-  xmlns="http://www.w3.org/2000/svg">
-  <path
-    d="M412.19,118.66a109.27,109.27,0,0,1-9.45-5.5,132.87,132.87,0,0,1-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14,23.9,350,16,350.13,16H267.69V334.78c0,4.28,0,8.51-.18,12.69,0,.52-.05,1-.08,1.56,0,.23,0,.47-.05.71,0,.06,0,.12,0,.18a70,70,0,0,1-35.22,55.56,68.8,68.8,0,0,1-34.11,9c-38.41,0-69.54-31.32-69.54-70s31.13-70,69.54-70a68.9,68.9,0,0,1,21.41,3.39l.1-83.94a153.14,153.14,0,0,0-118,34.52,161.79,161.79,0,0,0-35.3,43.53c-3.48,6-16.61,30.11-18.2,69.24-1,22.21,5.67,45.22,8.85,54.73v.2c2,5.6,9.75,24.71,22.38,40.82A167.53,167.53,0,0,0,115,470.66v-.2l.2.2C155.11,497.78,199.36,496,199.36,496c7.66-.31,33.32,0,62.46-13.81,32.32-15.31,50.72-38.12,50.72-38.12a158.46,158.46,0,0,0,27.64-45.93c7.46-19.61,9.95-43.13,9.95-52.53V176.49c1,.6,14.32,9.41,14.32,9.41s19.19,12.3,49.13,20.31c21.48,5.7,50.42,6.9,50.42,6.9V131.27C453.86,132.37,433.27,129.17,412.19,118.66Z" />
-</svg>

package/dist/asset-manifest.json

@@ -1,18 +0,0 @@
-{
-  "shared/page/incode-logo.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/incode-logo-ed68c8e9.svg",
-  "permissions/assets/safari-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/safari-icon-7823d73d.svg",
-  "permissions/assets/camera-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/camera-icon-b2fc4c1c.svg",
-  "permissions/assets/android-settings-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/android-settings-icon-8bd49c8d.svg",
-  "permissions/assets/chrome-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/chrome-icon-4c3b130c.svg",
-  "permissions/assets/android-dots-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/android-dots-icon-846d605c.svg",
-  "permissions/assets/warning-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/warning-icon-f3eadd0b.svg",
-  "permissions/assets/toggle-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/toggle-icon-351f86ce.svg",
-  "permissions/assets/bank-card-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/bank-card-icon-6af62350.svg",
-  "permissions/assets/android-toggle-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/android-toggle-icon-03e22d7a.svg",
-  "permissions/assets/camera-ios.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/camera-ios-9eac3be1.svg",
-  "permissions/assets/settings-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/settings-icon-9743cbda.svg",
-  "permissions/assets/check-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/check-icon-b1d1ddd8.svg",
-  "permissions/assets/permissions-img.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/permissions-img-83924a96.svg",
-  "permissions/assets/password-icon.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/password-icon-f5257b0b.svg",
-  "flow/incode-logo.svg": "https://assets.incode.com/@incodetech/ui/2.0.0-alpha.2/assets/incode-logo-00b4a3b0.svg"
-}

package/src/defineCustomElement.tsx

@@ -1,30 +0,0 @@
-import type { ComponentType } from 'preact';
-import register from 'preact-custom-element';
-
-type DefineCustomElementOptions<
-  T extends Record<string, unknown>,
-  TTagName extends string,
-> = {
-  component: ComponentType<T>;
-  tagName: TTagName;
-  attributes?: (keyof T)[];
-};
-
-export function defineCustomElement<
-  T extends Record<string, unknown>,
-  TTagName extends string,
->({
-  component,
-  tagName,
-  attributes = [],
-}: DefineCustomElementOptions<T, TTagName>) {
-  if (!customElements.get(tagName)) {
-    register(component, tagName, attributes as string[]);
-  }
-
-  return {
-    component,
-    tagName,
-    attributes,
-  };
-}