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

package/src/selfie/loadingBorder.tsx

@@ -1,77 +0,0 @@
-import type { FC } from 'preact/compat';
-import { useId } from 'preact/hooks';
-import './loadingBorder.css';
-import { cn } from '@/styles/cn';
-
-export type BorderState =
-  | 'idle'
-  | 'loading'
-  | 'capturing'
-  | 'success'
-  | 'error';
-
-type LoadingBorderProps = {
-  borderState?: BorderState;
-};
-
-const getColor = (borderState: BorderState): string => {
-  switch (borderState) {
-    case 'success':
-    case 'capturing':
-      return 'var(--surface-status-positive-600)';
-    case 'loading':
-      return 'var(--surface-brand-500)';
-    case 'error':
-      return 'var(--surface-status-negative-600)';
-    case 'idle':
-      return 'var(--surface-neutral-100)';
-  }
-};
-
-export const LoadingBorder: FC<LoadingBorderProps> = ({
-  borderState = 'idle',
-}) => {
-  const gradientId = useId();
-  const isLoadingOrCapturing =
-    borderState === 'loading' || borderState === 'capturing';
-  const color = getColor(borderState);
-  const fill = isLoadingOrCapturing ? `url(#${gradientId})` : color;
-
-  return (
-    <div
-      class={cn('IncodeLoadingBorder', {
-        IncodeLoadingBorderSpinning: isLoadingOrCapturing,
-      })}
-    >
-      <svg
-        width="100%"
-        height="100%"
-        viewBox="0 0 335 335"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title>Loading Border</title>
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M335 167.5C335 260.008 260.008 335 167.5 335C74.9923 335 0 260.008 0 167.5C0 74.9923 74.9923 0 167.5 0C260.008 0 335 74.9923 335 167.5ZM167.5 325C254.485 325 325 254.485 325 167.5C325 80.5152 254.485 10 167.5 10C80.5152 10 10 80.5152 10 167.5C10 254.485 80.5152 325 167.5 325Z"
-          class="IncodeLoadingBorderPath"
-          fill={fill}
-        />
-        <defs>
-          <radialGradient
-            id={gradientId}
-            cx="0"
-            cy="0"
-            r="1"
-            gradientUnits="userSpaceOnUse"
-            gradientTransform="translate(240.418 17.4369) rotate(115.674) scale(167.087)"
-          >
-            <stop stop-color={color} />
-            <stop offset="1" stop-color={color} stop-opacity="0" />
-          </radialGradient>
-        </defs>
-      </svg>
-    </div>
-  );
-};

package/src/selfie/manualCaptureButton.css

@@ -1,13 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeManualCaptureButton {
-  @apply flex flex-col items-center gap-16 max-w-[275px];
-}
-
-.IncodeManualCaptureButtonText {
-  @apply text-center text-base font-medium leading-[1.14] text-text-body-primary;
-}
-
-.IncodeManualCaptureButtonButton {
-  @apply p-0;
-}

package/src/selfie/manualCaptureButton.tsx

@@ -1,35 +0,0 @@
-import type { FC } from 'preact/compat';
-import { useTranslation } from '@/i18n';
-import { Button } from '@/shared/button/button';
-import { CameraButton } from './cameraButton';
-import './manualCaptureButton.css';
-
-type ManualCaptureButtonProps = {
-  onClick: () => void;
-  disabled: boolean;
-};
-
-export const ManualCaptureButton: FC<ManualCaptureButtonProps> = ({
-  onClick,
-  disabled,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <div class="IncodeManualCaptureButton" data-testid="manual-capture-button">
-      <p class="IncodeManualCaptureButtonText">
-        {t('selfiev2.manualCapture.instructions')}
-      </p>
-      <div>
-        <Button
-          variant="link"
-          onClick={onClick}
-          disabled={disabled}
-          class="IncodeManualCaptureButtonButton"
-        >
-          <CameraButton />
-        </Button>
-      </div>
-    </div>
-  );
-};

package/src/selfie/noMoreAttemptsModal.tsx

@@ -1,44 +0,0 @@
-import type { FC } from 'preact/compat';
-import { useTranslation } from '@/i18n';
-import { ErrorModalContent } from './errorModalContent';
-
-const ErrorIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-  >
-    <title>Error</title>
-    <path
-      d="M16 0C24.8219 0 32 7.17642 32 16C32 24.8219 24.8219 32 16 32C7.17811 32 0 24.8219 0 16C0 7.17642 7.17811 0 16 0ZM13.1553 11.3701C12.6618 10.8767 11.8636 10.8767 11.3701 11.3701C10.8767 11.8636 10.8767 12.6618 11.3701 13.1553L14.4053 16.1924L11.3721 19.2256C10.8803 19.7191 10.8803 20.5173 11.3721 21.0107C11.8656 21.504 12.6658 21.5041 13.1592 21.0107L16.1924 17.9775L19.2334 21.0205C19.481 21.2664 19.8029 21.3916 20.1279 21.3916C20.4513 21.3916 20.7746 21.2664 21.0205 21.0205C21.514 20.527 21.514 19.7269 21.0205 19.2334L17.9775 16.1924L21.0107 13.1572C21.5041 12.6638 21.504 11.8639 21.0107 11.3721C20.5173 10.8786 19.7191 10.8786 19.2256 11.3721L16.1904 14.4053L13.1553 11.3701Z"
-      fill="var(--surface-status-negative-600)"
-    />
-  </svg>
-);
-
-type NoMoreAttemptsModalProps = {
-  title: string;
-  onContinue: () => void;
-};
-
-export const NoMoreAttemptsModal: FC<NoMoreAttemptsModalProps> = ({
-  title,
-  onContinue,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <ErrorModalContent
-      title={title}
-      description={t('notifications.selfieCaptureFailedDescription')}
-      attemptsText={
-        t('notifications.noAttemptsRemaining') ?? 'No attempts remaining'
-      }
-      buttonText={t('common.continue') ?? 'Continue'}
-      icon={<ErrorIcon />}
-      onButtonClick={onContinue}
-    />
-  );
-};

package/src/selfie/notification.css

@@ -1,9 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeNotification {
-  @apply flex flex-col items-center;
-}
-
-.IncodeNotificationText {
-  @apply text-2xl text-center leading-[1.2] font-bold text-text-body-primary;
-}

package/src/selfie/notification.tsx

@@ -1,36 +0,0 @@
-import type { DetectionStatus } from '@incodetech/core/selfie';
-import type { FC } from 'preact/compat';
-import { useTranslation } from '@/i18n';
-import './notification.css';
-
-type NotificationProps = {
-  detectionState: DetectionStatus;
-};
-
-export const Notification: FC<NotificationProps> = ({ detectionState }) => {
-  const { t } = useTranslation();
-  const notificationTexts: Partial<Record<DetectionStatus, string>> = {
-    noFace: t('notifications.faceNotFound'),
-    tooManyFaces: t('notifications.tooManyFaces'),
-    tooClose: t('notifications.moveAway'),
-    tooFar: t('notifications.moveCloser'),
-    blur: t('notifications.onBlur'),
-    dark: t('notifications.onDark'),
-    faceAngle: t('notifications.onFaceAngleV2'),
-    headWear: t('notifications.removeHeadwear'),
-    lenses: t('notifications.removeLenses'),
-    eyesClosed: t('notifications.eyesClosed'),
-    faceMask: t('notifications.mask'),
-    centerFace: t('notifications.centerFaceV2'),
-    getReady: t('notifications.getReady'),
-  };
-
-  const text = notificationTexts[detectionState];
-  if (!text) return null;
-
-  return (
-    <div class="IncodeNotification">
-      <p class="IncodeNotificationText">{text}</p>
-    </div>
-  );
-};

package/src/selfie/retryErrorModal.tsx

@@ -1,56 +0,0 @@
-import type { FC } from 'preact/compat';
-import { useTranslation } from '@/i18n';
-import { ErrorModalContent } from './errorModalContent';
-
-const WarningIcon = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="32"
-    height="32"
-    viewBox="0 0 32 32"
-    fill="none"
-  >
-    <title>Warning</title>
-    <g clipPath="url(#clip0)">
-      <path
-        d="M16 0C24.848 0 32 7.1696 32 16C32 24.8336 24.848 32 16 32C7.168 32 0 24.8336 0 16C0 7.1696 7.168 0 16 0ZM16 20.6896C15.232 20.6896 14.608 21.3136 14.608 22.0816C14.608 22.8496 15.232 23.4896 16.016 23.4896C16.784 23.4896 17.408 22.8496 17.408 22.0816C17.408 21.3136 16.784 20.6896 16 20.6896ZM16 8.528C15.232 8.528 14.592 9.1696 14.592 9.936V17.008C14.592 17.7776 15.232 18.4 16 18.4C16.768 18.4 17.392 17.7776 17.392 17.008V9.936C17.392 9.1696 16.768 8.528 16 8.528Z"
-        fill="var(--surface-status-warning-500)"
-      />
-    </g>
-    <defs>
-      <clipPath id="clip0">
-        <rect width="32" height="32" fill="white" />
-      </clipPath>
-    </defs>
-  </svg>
-);
-
-type RetryErrorModalProps = {
-  title: string;
-  description: string;
-  attemptsRemaining: number;
-  onTryAgain: () => void;
-};
-
-export const RetryErrorModal: FC<RetryErrorModalProps> = ({
-  title,
-  description,
-  attemptsRemaining,
-  onTryAgain,
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <ErrorModalContent
-      title={title}
-      description={t(description)}
-      attemptsText={
-        t('common.attemptsRemaining', { count: attemptsRemaining }) ??
-        `Attempts remaining: ${attemptsRemaining}`
-      }
-      buttonText={t('common.tryAgain') ?? 'Try Again'}
-      icon={<WarningIcon />}
-      onButtonClick={onTryAgain}
-    />
-  );
-};