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

package/src/selfie/styles.css

@@ -1 +0,0 @@
-@import "../styles/tailwind.css";

package/src/selfie/tutorial.test.tsx

@@ -1,200 +0,0 @@
-import type { SelfieManager } from '@incodetech/core/selfie';
-import { render, screen, waitFor } from '@testing-library/preact';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { Tutorial } from './tutorial';
-
-const mockAnimationData = {
-  v: '5.5.7',
-  fr: 60,
-  ip: 0,
-  op: 240,
-  w: 296,
-  h: 296,
-};
-
-vi.mock('@/i18n', () => ({
-  useTranslation: () => ({
-    t: (key: string) => key,
-    ready: true,
-  }),
-}));
-
-vi.mock('./selfieTutorial.json', () => ({
-  default: mockAnimationData,
-}));
-
-vi.mock('@/shared/baseTutorial/baseTutorial', () => ({
-  default: ({
-    title,
-    subtitle,
-    buttonText,
-    disclaimerText,
-    onContinue,
-    isLoading,
-    animationData,
-  }: {
-    title: string;
-    subtitle: string;
-    buttonText: string;
-    disclaimerText: string;
-    onContinue: () => void;
-    isLoading?: boolean;
-    animationData: unknown;
-  }) => (
-    <div
-      data-testid="base-tutorial"
-      data-is-loading={isLoading}
-      data-has-animation={!!animationData}
-    >
-      <div data-testid="title">{title}</div>
-      <div data-testid="subtitle">{subtitle}</div>
-      <div data-testid="button-text">{buttonText}</div>
-      <div data-testid="disclaimer">{disclaimerText}</div>
-      <button type="button" onClick={onContinue} data-testid="continue-button">
-        {buttonText}
-      </button>
-    </div>
-  ),
-}));
-
-describe('Tutorial', () => {
-  const mockNextStep = vi.fn();
-  const mockManager = {
-    nextStep: mockNextStep,
-  } as unknown as SelfieManager;
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('rendering', () => {
-    it('returns null when animationData is not loaded', async () => {
-      vi.resetModules();
-      vi.doUnmock('./selfieTutorial.json');
-      let resolveAnimation:
-        | ((value: typeof mockAnimationData) => void)
-        | undefined;
-      const animationPromise = new Promise<typeof mockAnimationData>(
-        (resolve) => {
-          resolveAnimation = resolve;
-        },
-      );
-      vi.doMock('./selfieTutorial.json', () => ({
-        default: animationPromise,
-      }));
-      const { Tutorial: TutorialComponent } = await import('./tutorial');
-      const { container } = render(<TutorialComponent manager={mockManager} />);
-      expect(container.firstChild).toBeNull();
-      if (resolveAnimation) {
-        resolveAnimation(mockAnimationData);
-      }
-      await waitFor(
-        () => {
-          expect(screen.getByTestId('base-tutorial')).toBeTruthy();
-        },
-        { timeout: 1000 },
-      );
-    });
-
-    it('renders BaseTutorial component', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('base-tutorial')).toBeTruthy();
-      });
-    });
-
-    it('passes animation data to BaseTutorial', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('base-tutorial').dataset.hasAnimation).toBe(
-          'true',
-        );
-      });
-    });
-  });
-
-  describe('translations', () => {
-    it('passes correct title translation key', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('title').textContent).toBe(
-          'face.tutorial.title',
-        );
-      });
-    });
-
-    it('passes correct subtitle translation key', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('subtitle').textContent).toBe(
-          'face.tutorial.subtitle',
-        );
-      });
-    });
-
-    it('passes correct button text translation key', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('button-text').textContent).toBe(
-          'face.tutorial.startCapture',
-        );
-      });
-    });
-
-    it('passes correct disclaimer translation key', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('disclaimer').textContent).toBe(
-          'face.tutorial.autoCapture',
-        );
-      });
-    });
-  });
-
-  describe('onContinue callback', () => {
-    it('calls manager.nextStep when button is clicked', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('continue-button')).toBeTruthy();
-      });
-      screen.getByTestId('continue-button').click();
-      expect(mockNextStep).toHaveBeenCalledTimes(1);
-    });
-
-    it('calls manager.nextStep multiple times on multiple clicks', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('continue-button')).toBeTruthy();
-      });
-      const button = screen.getByTestId('continue-button');
-      button.click();
-      button.click();
-      expect(mockNextStep).toHaveBeenCalledTimes(2);
-    });
-  });
-
-  describe('isLoading prop', () => {
-    it('passes isLoading=false by default', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('base-tutorial').dataset.isLoading).toBe(
-          'false',
-        );
-      });
-    });
-
-    it('passes isLoading=true after button click', async () => {
-      render(<Tutorial manager={mockManager} />);
-      await waitFor(() => {
-        expect(screen.getByTestId('continue-button')).toBeTruthy();
-      });
-      const button = screen.getByTestId('continue-button');
-      button.click();
-      await waitFor(() => {
-        expect(screen.getByTestId('base-tutorial').dataset.isLoading).toBe(
-          'true',
-        );
-      });
-    });
-  });
-});

package/src/selfie/tutorial.tsx

@@ -1,43 +0,0 @@
-import type { SelfieManager } from '@incodetech/core/selfie';
-import { useEffect, useState } from 'preact/hooks';
-import { useTranslation } from '@/i18n';
-import BaseTutorial from '@/shared/baseTutorial/baseTutorial';
-import type { LottieAnimationData } from '@/shared/lottie/lottie';
-
-type TutorialProps = {
-  manager: SelfieManager;
-};
-
-export const Tutorial = ({ manager }: TutorialProps) => {
-  const { t } = useTranslation();
-  const [isLoading, setIsLoading] = useState(false);
-  const [animationData, setAnimationData] =
-    useState<LottieAnimationData | null>(null);
-
-  useEffect(() => {
-    import('./selfieTutorial.json').then((module) => {
-      setAnimationData(module.default);
-    });
-  }, []);
-
-  const handleContinue = () => {
-    setIsLoading(true);
-    manager.nextStep();
-  };
-
-  if (!animationData) {
-    return null;
-  }
-
-  return (
-    <BaseTutorial
-      animationData={animationData}
-      title={t('face.tutorial.title')}
-      subtitle={t('face.tutorial.subtitle')}
-      onContinue={handleContinue}
-      buttonText={t('face.tutorial.startCapture')}
-      disclaimerText={t('face.tutorial.autoCapture')}
-      isLoading={isLoading}
-    />
-  );
-};

package/src/setup.ts

@@ -1,33 +0,0 @@
-import type { WasmConfig } from '@incodetech/core';
-import { setup as coreSetup } from '@incodetech/core';
-import { createI18n, type I18nOptions, setI18nInstance } from './i18n';
-import type { UiConfig } from './shared/uiConfig/uiConfig';
-import { setUiConfig } from './shared/uiConfig/uiConfig';
-
-type SetupOptions = {
-  apiURL: string;
-  token: string;
-  customHeaders?: Record<string, string>;
-  timeout?: number;
-  wasm?: WasmConfig;
-  i18n?: I18nOptions;
-  uiConfig?: UiConfig;
-};
-
-export async function setup({
-  apiURL,
-  token,
-  customHeaders,
-  timeout,
-  wasm,
-  i18n,
-  uiConfig,
-}: SetupOptions): Promise<void> {
-  if (uiConfig) {
-    setUiConfig(uiConfig);
-  }
-  await coreSetup({ apiURL, token, customHeaders, timeout, wasm });
-
-  const i18nInstance = createI18n(i18n);
-  setI18nInstance(i18nInstance);
-}

package/src/shared/baseTutorial/baseTutorial.css

@@ -1,21 +0,0 @@
-@reference "../../styles/tailwind.css";
-
-.IncodeBaseTutorialContainer {
-  @apply flex flex-col justify-between flex-1 m-auto;
-}
-
-.IncodeBaseTutorialAnimationContainer {
-  @apply h-full px-24 m-auto max-w-[400px];
-}
-
-.IncodeBaseTutorialDisclaimer {
-  @apply text-base text-center text-text-body-secondary leading-[114%] font-medium tracking-[-0.5px] text-18 py-12;
-}
-
-.IncodeBaseTutorialButtonContainer {
-  @apply px-8 py-16 m-auto;
-}
-
-.IncodeBaseTutorialAnimation {
-  @apply h-full;
-}

package/src/shared/baseTutorial/baseTutorial.test.tsx

@@ -1,184 +0,0 @@
-import { render, screen } from '@testing-library/preact';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import BaseTutorial from './baseTutorial';
-import { getCssVariableAsHex, replaceLottieColor } from './replaceBaseTutorial';
-
-vi.mock('./replaceBaseTutorial', () => ({
-  getCssVariableAsHex: vi.fn(() => '#006aff'),
-  replaceLottieColor: vi.fn((json) => json),
-}));
-
-vi.mock('../lottie/lottie', () => ({
-  Lottie: ({ animationData }: { animationData: unknown }) => (
-    <div data-testid="lottie-animation">{JSON.stringify(animationData)}</div>
-  ),
-}));
-
-const mockAnimationData = {
-  fr: 30,
-  v: '5.5.7',
-  ip: 0,
-  op: 60,
-  w: 100,
-  h: 100,
-};
-
-describe('BaseTutorial', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders title and subtitle', () => {
-    render(
-      <BaseTutorial
-        animationData={mockAnimationData}
-        title="Test Title"
-        subtitle="Test Subtitle"
-        onContinue={() => {}}
-        buttonText="Continue"
-        disclaimerText="Test disclaimer"
-      />,
-    );
-
-    expect(screen.getByText('Test Title')).toBeTruthy();
-    expect(screen.getByText('Test Subtitle')).toBeTruthy();
-  });
-
-  it('renders disclaimer text', () => {
-    render(
-      <BaseTutorial
-        animationData={mockAnimationData}
-        title="Title"
-        subtitle="Subtitle"
-        onContinue={() => {}}
-        buttonText="Continue"
-        disclaimerText="Test disclaimer text"
-      />,
-    );
-
-    expect(screen.getByText('Test disclaimer text')).toBeTruthy();
-  });
-
-  it('renders button with correct text', () => {
-    render(
-      <BaseTutorial
-        animationData={mockAnimationData}
-        title="Title"
-        subtitle="Subtitle"
-        onContinue={() => {}}
-        buttonText="Start Now"
-        disclaimerText="Disclaimer"
-      />,
-    );
-
-    expect(screen.getByText('Start Now')).toBeTruthy();
-  });
-
-  it('calls onContinue when button is clicked', () => {
-    const handleContinue = vi.fn();
-    render(
-      <BaseTutorial
-        animationData={mockAnimationData}
-        title="Title"
-        subtitle="Subtitle"
-        onContinue={handleContinue}
-        buttonText="Continue"
-        disclaimerText="Disclaimer"
-      />,
-    );
-
-    const button = screen.getByRole('button');
-    button.click();
-    expect(handleContinue).toHaveBeenCalledTimes(1);
-  });
-
-  it('renders Lottie animation', () => {
-    render(
-      <BaseTutorial
-        animationData={mockAnimationData}
-        title="Title"
-        subtitle="Subtitle"
-        onContinue={() => {}}
-        buttonText="Continue"
-        disclaimerText="Disclaimer"
-      />,
-    );
-
-    expect(screen.getByTestId('lottie-animation')).toBeTruthy();
-  });
-
-  it('shows loading state on button when isLoading is true', () => {
-    render(
-      <BaseTutorial
-        animationData={mockAnimationData}
-        title="Title"
-        subtitle="Subtitle"
-        onContinue={() => {}}
-        buttonText="Continue"
-        disclaimerText="Disclaimer"
-        isLoading
-      />,
-    );
-
-    const button = screen.getByRole('button');
-    expect(button.hasAttribute('disabled')).toBe(true);
-    expect(button.classList.contains('IncodeButtonLoading')).toBe(true);
-  });
-
-  it('does not show loading state when isLoading is false', () => {
-    render(
-      <BaseTutorial
-        animationData={mockAnimationData}
-        title="Title"
-        subtitle="Subtitle"
-        onContinue={() => {}}
-        buttonText="Continue"
-        disclaimerText="Disclaimer"
-        isLoading={false}
-      />,
-    );
-
-    const button = screen.getByRole('button');
-    expect(button.classList.contains('IncodeButtonLoading')).toBe(false);
-  });
-
-  it('uses default brand color when CSS variable is not available', () => {
-    vi.mocked(getCssVariableAsHex).mockReturnValue(null);
-
-    render(
-      <BaseTutorial
-        animationData={mockAnimationData}
-        title="Title"
-        subtitle="Subtitle"
-        onContinue={() => {}}
-        buttonText="Continue"
-        disclaimerText="Disclaimer"
-      />,
-    );
-
-    expect(replaceLottieColor).toHaveBeenCalledWith(
-      mockAnimationData,
-      '#006aff',
-    );
-  });
-
-  it('uses CSS variable color when available', () => {
-    vi.mocked(getCssVariableAsHex).mockReturnValue('#ff0000');
-
-    render(
-      <BaseTutorial
-        animationData={mockAnimationData}
-        title="Title"
-        subtitle="Subtitle"
-        onContinue={() => {}}
-        buttonText="Continue"
-        disclaimerText="Disclaimer"
-      />,
-    );
-
-    expect(replaceLottieColor).toHaveBeenCalledWith(
-      mockAnimationData,
-      '#ff0000',
-    );
-  });
-});

package/src/shared/baseTutorial/baseTutorial.tsx

@@ -1,55 +0,0 @@
-import { Button } from '../button/button';
-import { Lottie, type LottieAnimationData } from '../lottie/lottie';
-import { Page } from '../page/page';
-import './baseTutorial.css';
-import { getCssVariableAsHex, replaceLottieColor } from './replaceBaseTutorial';
-
-type BaseTutorialProps = {
-  animationData: LottieAnimationData;
-  title: string;
-  subtitle: string;
-  onContinue: () => void;
-  buttonText: string;
-  disclaimerText: string;
-  isLoading?: boolean;
-};
-const BaseTutorial = ({
-  animationData,
-  title,
-  subtitle,
-  onContinue,
-  buttonText,
-  disclaimerText,
-  isLoading,
-}: BaseTutorialProps) => {
-  const brandColor = getCssVariableAsHex('--surface-brand-500');
-  return (
-    <Page className="IncodeTutorialPage" title={title} subtitle={subtitle}>
-      <div class="IncodeBaseTutorialContainer">
-        <div class="IncodeBaseTutorialAnimationContainer">
-          <Lottie
-            animationData={replaceLottieColor(
-              animationData,
-              brandColor ?? '#006aff',
-            )}
-            className="IncodeBaseTutorialAnimation"
-          />
-        </div>
-      </div>
-      <div>
-        <p class="IncodeBaseTutorialDisclaimer">{disclaimerText}</p>
-        <div class="IncodeBaseTutorialButtonContainer">
-          <Button
-            onClick={onContinue}
-            class="max-w-[420px] m-auto"
-            isLoading={isLoading}
-          >
-            {buttonText}
-          </Button>
-        </div>
-      </div>
-    </Page>
-  );
-};
-
-export default BaseTutorial;