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

package/dev/main-preact.tsx

@@ -1,323 +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 } from '@incodetech/core/selfie';
-import { render } from 'preact';
-import type { FC } from 'preact/compat';
-import { useEffect, useState } from 'preact/hooks';
-import { useManager } from '../src/hooks';
-import { getToken } from './getToken';
-
-type SelfieModuleProps = {
-  config: FlowModuleConfig['SELFIE'];
-  onFinish: () => void;
-};
-
-const SelfieModule: FC<SelfieModuleProps> = ({ config, onFinish }) => {
-  const [state, selfieManager] = useManager(() =>
-    createSelfieManager({ config }),
-  );
-  const [tutorialLoading, setTutorialLoading] = useState(false);
-
-  useEffect(() => {
-    if (state.status !== 'tutorial') {
-      setTutorialLoading(false);
-    }
-  }, [state.status]);
-
-  if (state.status === 'loading') {
-    return <p>Loading...</p>;
-  }
-
-  if (state.status === 'tutorial') {
-    return (
-      <div>
-        <h2>Selfie Tutorial</h2>
-        <p>Position your face in the center</p>
-        <button
-          type="button"
-          disabled={tutorialLoading}
-          onClick={() => {
-            setTutorialLoading(true);
-            selfieManager.nextStep();
-          }}
-        >
-          {tutorialLoading ? 'Loading...' : 'Continue'}
-        </button>
-      </div>
-    );
-  }
-  if (state.status === 'permissions') {
-    if (state.permissionStatus === 'idle') {
-      return (
-        <div>
-          <h2>Camera Permission</h2>
-          <p>We need access to your camera</p>
-          <button
-            type="button"
-            onClick={() => selfieManager.requestPermission()}
-          >
-            Allow Camera
-          </button>
-          <button type="button" onClick={() => selfieManager.goToLearnMore()}>
-            Learn More
-          </button>
-        </div>
-      );
-    }
-
-    if (state.permissionStatus === 'requesting') {
-      return <p>Requesting camera access...</p>;
-    }
-
-    if (state.permissionStatus === 'denied') {
-      return (
-        <div>
-          <h2>Permission Denied</h2>
-          <p>Camera access was denied</p>
-          <button type="button" onClick={() => window.location.reload()}>
-            Refresh Browser
-          </button>
-        </div>
-      );
-    }
-
-    if (state.permissionStatus === 'learnMore') {
-      return (
-        <div>
-          <h2>Why we need camera</h2>
-          <p>To verify your identity</p>
-          <button
-            type="button"
-            onClick={() => selfieManager.requestPermission()}
-          >
-            Allow Camera
-          </button>
-          <button type="button" onClick={() => selfieManager.back()}>
-            Back
-          </button>
-          <button type="button" onClick={() => selfieManager.close()}>
-            Quit
-          </button>
-        </div>
-      );
-    }
-  }
-
-  if (state.status === 'capture') {
-    if (state.captureStatus === 'initializing') {
-      return (
-        <div>
-          <h2>Initializing Camera</h2>
-          <p>Please wait...</p>
-        </div>
-      );
-    }
-
-    if (state.captureStatus === 'detecting') {
-      return (
-        <div>
-          <h2>Face Detection</h2>
-          <p>
-            Status: <strong>{state.detectionStatus}</strong>
-          </p>
-          <p>Attempts remaining: {state.attemptsRemaining}</p>
-          {state.stream ? <Video stream={state.stream} /> : null}
-        </div>
-      );
-    }
-
-    if (state.captureStatus === 'capturing') {
-      return (
-        <div>
-          <h2>Capturing</h2>
-          <p>Taking photo...</p>
-        </div>
-      );
-    }
-
-    if (state.captureStatus === 'uploading') {
-      return (
-        <div>
-          <h2>Uploading</h2>
-          <p>Sending selfie to server...</p>
-        </div>
-      );
-    }
-
-    if (state.captureStatus === 'uploadError') {
-      return (
-        <div>
-          <h2>Upload Failed</h2>
-          <p>Error: {state.uploadError}</p>
-          <p>Attempts remaining: {state.attemptsRemaining}</p>
-          {state.attemptsRemaining > 0 ? (
-            <button type="button" onClick={() => selfieManager.retryCapture()}>
-              Retry
-            </button>
-          ) : (
-            <>
-              <p>
-                <strong style={{ color: 'red' }}>
-                  No more attempts available!
-                </strong>
-              </p>
-              <button type="button" onClick={onFinish}>
-                Continue
-              </button>
-            </>
-          )}
-        </div>
-      );
-    }
-
-    if (state.captureStatus === 'success') {
-      return (
-        <div>
-          <h2>Success!</h2>
-          <p>Selfie captured successfully!</p>
-        </div>
-      );
-    }
-  }
-
-  if (state.status === 'finished') {
-    onFinish();
-    return <p>Selfie complete!</p>;
-  }
-
-  if (state.status === 'error') {
-    if (state.error === 'PERMISSION_REFRESH') {
-      window.location.reload();
-      return null;
-    }
-    return (
-      <div>
-        <h2>Process Cancelled</h2>
-        <p>You quit the selfie process</p>
-        <button type="button" onClick={() => selfieManager.reset()}>
-          Try Again
-        </button>
-      </div>
-    );
-  }
-
-  return null;
-};
-
-type VideoProps = {
-  stream: MediaStream;
-};
-
-const Video: FC<VideoProps> = ({ stream }) => {
-  const [videoRef, setVideoRef] = useState<HTMLVideoElement | null>(null);
-
-  useEffect(() => {
-    if (videoRef && stream) {
-      videoRef.srcObject = stream;
-    }
-  }, [videoRef, stream]);
-
-  return (
-    <video
-      ref={setVideoRef}
-      autoplay
-      playsInline
-      muted
-      style={{
-        width: '320px',
-        height: '240px',
-        transform: 'scaleX(-1)',
-        display: 'block',
-        marginTop: '16px',
-      }}
-    />
-  );
-};
-
-const App: FC = () => {
-  const [state, flowManager] = useManager(() => createFlowManager(), {
-    autoLoad: false,
-  });
-
-  useEffect(() => {
-    const init = async () => {
-      const { token } = await getToken();
-      setup({
-        apiURL: 'https://user-service-k8s.stage.incodetest.com/0',
-        token,
-      });
-      flowManager.load();
-    };
-    init();
-  }, [flowManager]);
-
-  if (state.status === 'loading') {
-    return <p>Loading flow...</p>;
-  }
-
-  if (state.status === 'ready') {
-    const { currentStep, config } = state;
-
-    if (!currentStep) {
-      return <p>No current step</p>;
-    }
-
-    if (currentStep === 'TUTORIAL_ID' || currentStep === 'ID') {
-      return (
-        <div>
-          <h1>This is {currentStep}</h1>
-          <p>Hi!</p>
-          <button type="button" onClick={() => flowManager.nextStep()}>
-            Continue
-          </button>
-        </div>
-      );
-    }
-
-    if (currentStep === 'SELFIE') {
-      const selfieConfig = config as FlowModuleConfig['SELFIE'];
-      return (
-        <div>
-          <h1>Selfie Module</h1>
-          <SelfieModule
-            config={selfieConfig}
-            onFinish={() => flowManager.nextStep()}
-          />
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        <h1>Unknown step</h1>
-        <p>step: {currentStep}</p>
-        <button type="button" onClick={() => flowManager.nextStep()}>
-          Continue
-        </button>
-      </div>
-    );
-  }
-
-  if (state.status === 'finished') {
-    return (
-      <div>
-        <h1>Finished</h1>
-        <p>Hi!</p>
-      </div>
-    );
-  }
-
-  if (state.status === 'error') {
-    return <div>{state.error}</div>;
-  }
-
-  return null;
-};
-
-const root = document.getElementById('root');
-if (root) {
-  render(<App />, root);
-}

package/dev/main-simplified.tsx

@@ -1,123 +0,0 @@
-import {
-  createSession,
-  initializeWasmUtil,
-  setup,
-  setWasmConfig,
-  type WasmConfig,
-} from '@incodetech/core';
-import '../src/styles/tokens/index.css';
-import '../src/styles/reset.css';
-import '../src/flow/flow'; // Registers <incode-flow> web component
-import '../src/flow/flowCompleted'; // Registers <incode-flow-completed> web component
-import '../src/flow/styles.css';
-import '../src/phone/styles.css';
-import '../src/types/custom-elements'; // Enables typed DOM access for custom elements
-import { getConfigIdFromUrl } from './getToken';
-
-const API_URL = 'https://user-service-k8s.stage.incodetest.com/0';
-const API_KEY = '5fbc0ab5a652b7808fbec42fffd8b4c9ec248413';
-
-const WASM_CONFIG: WasmConfig = {
-  wasmPath:
-    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.wasm',
-  wasmSimdPath:
-    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLibSimd.wasm',
-  glueCodePath:
-    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.js',
-  modelsBasePath:
-    'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/models',
-  // pipelines will be determined by flow analysis
-};
-
-const root = document.getElementById('root');
-if (root) {
-  const initializeFlow = async () => {
-    try {
-      // Setup SDK with API URL first (required before createSession)
-      await setup({ apiURL: API_URL });
-
-      // Create session externally
-      const configurationId = getConfigIdFromUrl();
-      const session = await createSession(API_KEY, {
-        configurationId,
-        language: 'en-US',
-      });
-
-      // Setup WASM
-      const wasmConfig = {
-        ...WASM_CONFIG,
-        pipelines: ['selfie'],
-      } as WasmConfig;
-      console.log('WASM_CONFIG', wasmConfig);
-      setWasmConfig(wasmConfig);
-      await initializeWasmUtil(wasmConfig);
-
-      // Create element - automatically typed via HTMLElementTagNameMap augmentation
-      const flowElement = document.createElement('incode-flow');
-      flowElement.id = 'flow';
-
-      // Set all properties BEFORE appending to DOM
-      flowElement.apiURL = API_URL;
-      flowElement.token = session.token;
-      flowElement.wasmConfig = WASM_CONFIG;
-      flowElement.lang = 'en-US';
-
-      // Configure the loading spinner (optional customization)
-      // By default, IncodeFlow shows:
-      //   - Initialization: "Setting Up"
-      //   - Between modules: "Hang On" / "Validating"
-      // You can override with custom text:
-      // flowElement.spinnerConfig = {
-      //   title: 'Verifying your identity',
-      //   subtitle: 'This will only take a moment...',
-      //   size: 'medium',
-      // };
-
-      const startTime = performance.now();
-
-      flowElement.onComplete = (result) => {
-        const totalTime = performance.now() - startTime;
-        console.log(
-          `[Lazy Load] Flow complete in ${totalTime.toFixed(0)}ms`,
-          result,
-        );
-
-        // Remove the flow element and show the completed screen
-        flowElement.remove();
-
-        // Create and show the flow-completed component
-        const completedElement = document.createElement(
-          'incode-flow-completed',
-        );
-        completedElement.setAttribute('action', result.action);
-        completedElement.setAttribute('score-status', result.scoreStatus);
-        if (result.redirectionUrl) {
-          completedElement.setAttribute(
-            'redirection-url',
-            result.redirectionUrl,
-          );
-          completedElement.setAttribute('redirect-delay', '5000');
-        }
-        root.appendChild(completedElement);
-      };
-      flowElement.onError = (error) => {
-        console.error('[Lazy Load] Flow error:', error);
-        alert(`Flow error: ${error}`);
-      };
-
-      console.log(
-        '[Lazy Load] Demo initialized - watch Network tab for chunk loading',
-      );
-
-      // Now append to DOM - component will mount with all props set
-      root.appendChild(flowElement);
-    } catch (error) {
-      console.error('[Lazy Load] Failed to initialize:', error);
-      alert(
-        `Failed to initialize: ${error instanceof Error ? error.message : 'Unknown error'}`,
-      );
-    }
-  };
-
-  initializeFlow();
-}

package/dev/main-web-component.tsx

@@ -1,256 +0,0 @@
-import '../src/styles/tokens/index.css';
-import '../src/selfie/selfie';
-import '../src/selfie/styles.css';
-import '../src/phone/phone';
-import '../src/phone/styles.css';
-import '../src/email/email';
-import '../src/email/styles.css';
-import type { FlowModuleConfig } from '@incodetech/core/flow';
-import { createFlowManager } from '@incodetech/core/flow';
-import { render } from 'preact';
-import type { FC } from 'preact/compat';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { useManager } from '../src/hooks';
-import { setup } from '../src/setup';
-import { getToken } from './getToken';
-
-declare module 'preact' {
-  namespace JSX {
-    interface IntrinsicElements {
-      'incode-selfie': preact.JSX.HTMLAttributes<HTMLElement>;
-      'incode-phone': preact.JSX.HTMLAttributes<HTMLElement>;
-      'incode-email': preact.JSX.HTMLAttributes<HTMLElement>;
-    }
-  }
-}
-
-type SelfieElement = HTMLElement & {
-  config: FlowModuleConfig['SELFIE'];
-  onFinish: () => void;
-  onError: (error: string | undefined) => void;
-};
-
-type SelfieWebComponentProps = {
-  config: FlowModuleConfig['SELFIE'];
-  onFinish: () => void;
-  onError: (error: string | undefined) => void;
-};
-
-const SelfieWebComponent: FC<SelfieWebComponentProps> = ({
-  config,
-  onFinish,
-  onError,
-}) => {
-  const ref = useRef<SelfieElement>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.config = config;
-      ref.current.onFinish = onFinish;
-      ref.current.onError = onError;
-    }
-  }, [config, onFinish, onError]);
-
-  return <incode-selfie ref={ref} />;
-};
-
-type PhoneElement = HTMLElement & {
-  config: FlowModuleConfig['PHONE'];
-  onFinish: () => void;
-  onError: (error: string | undefined) => void;
-};
-
-const PhoneWebComponent: FC<{
-  config: FlowModuleConfig['PHONE'];
-  onFinish: () => void;
-  onError: (error: string | undefined) => void;
-}> = ({ config, onFinish, onError }) => {
-  const ref = useRef<PhoneElement>(null);
-
-  useEffect(() => {
-    if (ref.current) {
-      ref.current.config = config;
-      ref.current.onFinish = onFinish;
-      ref.current.onError = onError;
-    }
-  }, [config, onFinish, onError]);
-
-  return <incode-phone ref={ref} />;
-};
-
-type EmailConfig = {
-  otpVerification: boolean;
-  otpExpirationInMinutes: number;
-  prefill: boolean;
-  maxOtpAttempts?: number;
-};
-
-type EmailElement = HTMLElement & {
-  config: EmailConfig;
-  onFinish: () => void;
-  onError: (error: string | undefined) => void;
-};
-
-const EmailWebComponent: FC<{
-  config: FlowModuleConfig['EMAIL'];
-  onFinish: () => void;
-  onError: (error: string | undefined) => void;
-}> = ({ config, onFinish, onError }) => {
-  const ref = useRef<EmailElement>(null);
-  const [isReady, setIsReady] = useState(false);
-
-  useEffect(() => {
-    if (ref.current && !isReady) {
-      // Map FlowModuleConfig['EMAIL'] to full EmailConfig
-      ref.current.config = {
-        ...config,
-        prefill: false,
-        maxOtpAttempts: 3,
-      };
-      ref.current.onFinish = onFinish;
-      ref.current.onError = onError;
-      // Trigger re-render to pick up the config
-      setIsReady(true);
-    }
-  }, [config, onFinish, onError, isReady]);
-
-  return <incode-email ref={ref} />;
-};
-
-const App: FC = () => {
-  const [state, flowManager] = useManager(() => createFlowManager(), {
-    autoLoad: false,
-  });
-
-  useEffect(() => {
-    const init = async () => {
-      const { token } = await getToken();
-      await setup({
-        apiURL: 'https://user-service-k8s.stage.incodetest.com/0',
-        token,
-        wasm: {
-          wasmPath:
-            'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.wasm',
-          wasmSimdPath:
-            'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLibSimd.wasm',
-          glueCodePath:
-            'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/webLib.js',
-          modelsBasePath:
-            'https://d3vv997wtl2myz.cloudfront.net/webcamera/onnx-backend-wasm/v2.12.47/models',
-          pipelines: ['selfie'],
-        },
-        i18n: {
-          lang: 'en',
-        },
-      });
-      flowManager.load();
-    };
-    init();
-  }, [flowManager]);
-
-  if (state.status === 'loading') {
-    return <p>Loading flow...</p>;
-  }
-
-  if (state.status === 'ready') {
-    const { currentStep, config } = state;
-
-    if (!currentStep) {
-      return <p>No current step</p>;
-    }
-
-    if (currentStep === 'TUTORIAL_ID' || currentStep === 'ID') {
-      return (
-        <div>
-          <h1>This is {currentStep}</h1>
-          <p>Hi!</p>
-          <button type="button" onClick={() => flowManager.nextStep()}>
-            Continue
-          </button>
-        </div>
-      );
-    }
-
-    if (currentStep === 'SELFIE') {
-      const selfieConfig = config as FlowModuleConfig['SELFIE'];
-      return (
-        <div style={{ width: '100%', height: '100%' }}>
-          <SelfieWebComponent
-            config={selfieConfig}
-            onFinish={() => flowManager.nextStep()}
-            onError={(error) => {
-              console.error('Selfie error:', error);
-              if (error === 'PERMISSION_REFRESH') {
-                window.location.reload();
-                return;
-              }
-              alert(`Selfie error: ${error}`);
-            }}
-          />
-        </div>
-      );
-    }
-
-    if (currentStep === 'PHONE') {
-      const phoneConfig = config as FlowModuleConfig['PHONE'];
-      return (
-        <div style={{ width: '100%', height: '100%' }}>
-          <PhoneWebComponent
-            config={phoneConfig}
-            onFinish={() => flowManager.nextStep()}
-            onError={(error) => {
-              console.error('Phone error:', error);
-              alert(`Phone error: ${error}`);
-            }}
-          />
-        </div>
-      );
-    }
-
-    if (currentStep === 'EMAIL') {
-      const emailConfig = config as FlowModuleConfig['EMAIL'];
-      return (
-        <div style={{ width: '100%', height: '100%' }}>
-          <EmailWebComponent
-            config={emailConfig}
-            onFinish={() => flowManager.nextStep()}
-            onError={(error) => {
-              console.error('Email error:', error);
-              alert(`Email error: ${error}`);
-            }}
-          />
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        <h1>Unknown step</h1>
-        <p>step: {currentStep}</p>
-        <button type="button" onClick={() => flowManager.nextStep()}>
-          Continue
-        </button>
-      </div>
-    );
-  }
-
-  if (state.status === 'finished') {
-    return (
-      <div>
-        <h1>Finished</h1>
-        <p>Hi!</p>
-      </div>
-    );
-  }
-
-  if (state.status === 'error') {
-    return <div>{state.error}</div>;
-  }
-
-  return null;
-};
-
-const root = document.getElementById('root');
-if (root) {
-  render(<App />, root);
-}