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

package/src/shared/countries/countries.ts

@@ -1,139 +0,0 @@
-import { type CountryCode, getCountryCallingCode } from 'libphonenumber-js';
-
-export type CountryData = {
-  code: CountryCode;
-  emoji: string;
-  name: string;
-  callingCode: string;
-};
-
-const countryDefinitions: Partial<
-  Record<CountryCode, { emoji: string; name: string }>
-> = {
-  MX: { emoji: '🇲🇽', name: 'Mexico' },
-  US: { emoji: '🇺🇸', name: 'United States' },
-  CA: { emoji: '🇨🇦', name: 'Canada' },
-  GB: { emoji: '🇬🇧', name: 'United Kingdom' },
-  DE: { emoji: '🇩🇪', name: 'Germany' },
-  FR: { emoji: '🇫🇷', name: 'France' },
-  ES: { emoji: '🇪🇸', name: 'Spain' },
-  IT: { emoji: '🇮🇹', name: 'Italy' },
-  BR: { emoji: '🇧🇷', name: 'Brazil' },
-  AR: { emoji: '🇦🇷', name: 'Argentina' },
-  CO: { emoji: '🇨🇴', name: 'Colombia' },
-  CL: { emoji: '🇨🇱', name: 'Chile' },
-  PE: { emoji: '🇵🇪', name: 'Peru' },
-  AU: { emoji: '🇦🇺', name: 'Australia' },
-  NZ: { emoji: '🇳🇿', name: 'New Zealand' },
-  JP: { emoji: '🇯🇵', name: 'Japan' },
-  KR: { emoji: '🇰🇷', name: 'South Korea' },
-  CN: { emoji: '🇨🇳', name: 'China' },
-  IN: { emoji: '🇮🇳', name: 'India' },
-  RU: { emoji: '🇷🇺', name: 'Russia' },
-  ZA: { emoji: '🇿🇦', name: 'South Africa' },
-  NG: { emoji: '🇳🇬', name: 'Nigeria' },
-  EG: { emoji: '🇪🇬', name: 'Egypt' },
-  AE: { emoji: '🇦🇪', name: 'United Arab Emirates' },
-  SA: { emoji: '🇸🇦', name: 'Saudi Arabia' },
-  IL: { emoji: '🇮🇱', name: 'Israel' },
-  TR: { emoji: '🇹🇷', name: 'Turkey' },
-  NL: { emoji: '🇳🇱', name: 'Netherlands' },
-  BE: { emoji: '🇧🇪', name: 'Belgium' },
-  CH: { emoji: '🇨🇭', name: 'Switzerland' },
-  AT: { emoji: '🇦🇹', name: 'Austria' },
-  SE: { emoji: '🇸🇪', name: 'Sweden' },
-  NO: { emoji: '🇳🇴', name: 'Norway' },
-  DK: { emoji: '🇩🇰', name: 'Denmark' },
-  FI: { emoji: '🇫🇮', name: 'Finland' },
-  PL: { emoji: '🇵🇱', name: 'Poland' },
-  PT: { emoji: '🇵🇹', name: 'Portugal' },
-  IE: { emoji: '🇮🇪', name: 'Ireland' },
-  GR: { emoji: '🇬🇷', name: 'Greece' },
-  CZ: { emoji: '🇨🇿', name: 'Czechia' },
-  HU: { emoji: '🇭🇺', name: 'Hungary' },
-  RO: { emoji: '🇷🇴', name: 'Romania' },
-  UA: { emoji: '🇺🇦', name: 'Ukraine' },
-  PH: { emoji: '🇵🇭', name: 'Philippines' },
-  ID: { emoji: '🇮🇩', name: 'Indonesia' },
-  MY: { emoji: '🇲🇾', name: 'Malaysia' },
-  SG: { emoji: '🇸🇬', name: 'Singapore' },
-  TH: { emoji: '🇹🇭', name: 'Thailand' },
-  VN: { emoji: '🇻🇳', name: 'Vietnam' },
-  PK: { emoji: '🇵🇰', name: 'Pakistan' },
-  BD: { emoji: '🇧🇩', name: 'Bangladesh' },
-  HK: { emoji: '🇭🇰', name: 'Hong Kong' },
-  TW: { emoji: '🇹🇼', name: 'Taiwan' },
-  VE: { emoji: '🇻🇪', name: 'Venezuela' },
-  EC: { emoji: '🇪🇨', name: 'Ecuador' },
-  GT: { emoji: '🇬🇹', name: 'Guatemala' },
-  CR: { emoji: '🇨🇷', name: 'Costa Rica' },
-  PA: { emoji: '🇵🇦', name: 'Panama' },
-  DO: { emoji: '🇩🇴', name: 'Dominican Republic' },
-  PR: { emoji: '🇵🇷', name: 'Puerto Rico' },
-  CU: { emoji: '🇨🇺', name: 'Cuba' },
-  JM: { emoji: '🇯🇲', name: 'Jamaica' },
-  HN: { emoji: '🇭🇳', name: 'Honduras' },
-  SV: { emoji: '🇸🇻', name: 'El Salvador' },
-  NI: { emoji: '🇳🇮', name: 'Nicaragua' },
-  BO: { emoji: '🇧🇴', name: 'Bolivia' },
-  PY: { emoji: '🇵🇾', name: 'Paraguay' },
-  UY: { emoji: '🇺🇾', name: 'Uruguay' },
-  KE: { emoji: '🇰🇪', name: 'Kenya' },
-  GH: { emoji: '🇬🇭', name: 'Ghana' },
-  MA: { emoji: '🇲🇦', name: 'Morocco' },
-  TN: { emoji: '🇹🇳', name: 'Tunisia' },
-  KW: { emoji: '🇰🇼', name: 'Kuwait' },
-  QA: { emoji: '🇶🇦', name: 'Qatar' },
-  BH: { emoji: '🇧🇭', name: 'Bahrain' },
-  OM: { emoji: '🇴🇲', name: 'Oman' },
-  JO: { emoji: '🇯🇴', name: 'Jordan' },
-  LB: { emoji: '🇱🇧', name: 'Lebanon' },
-  RS: { emoji: '🇷🇸', name: 'Serbia' },
-  HR: { emoji: '🇭🇷', name: 'Croatia' },
-  SK: { emoji: '🇸🇰', name: 'Slovakia' },
-  SI: { emoji: '🇸🇮', name: 'Slovenia' },
-  BG: { emoji: '🇧🇬', name: 'Bulgaria' },
-  LT: { emoji: '🇱🇹', name: 'Lithuania' },
-  LV: { emoji: '🇱🇻', name: 'Latvia' },
-  EE: { emoji: '🇪🇪', name: 'Estonia' },
-  IS: { emoji: '🇮🇸', name: 'Iceland' },
-  LU: { emoji: '🇱🇺', name: 'Luxembourg' },
-  MT: { emoji: '🇲🇹', name: 'Malta' },
-  CY: { emoji: '🇨🇾', name: 'Cyprus' },
-};
-
-function getCallingCode(code: CountryCode): string {
-  try {
-    return `+${getCountryCallingCode(code)}`;
-  } catch {
-    return '';
-  }
-}
-
-export const countries: CountryData[] = Object.entries(countryDefinitions)
-  .map(([code, data]) => ({
-    code: code as CountryCode,
-    emoji: data.emoji,
-    name: data.name,
-    callingCode: getCallingCode(code as CountryCode),
-  }))
-  .filter((c) => c.callingCode !== '')
-  .sort((a, b) => a.name.localeCompare(b.name));
-
-export function getCountryByCode(
-  code: string | undefined,
-): CountryData | undefined {
-  if (!code) return undefined;
-  return countries.find(
-    (c) => c.code === code || c.code === code.toUpperCase(),
-  );
-}
-
-export function getCountryByCallingCode(
-  callingCode: string,
-): CountryData | undefined {
-  const normalized = callingCode.startsWith('+')
-    ? callingCode
-    : `+${callingCode}`;
-  return countries.find((c) => c.callingCode === normalized);
-}

package/src/shared/countries/index.ts

@@ -1,6 +0,0 @@
-export {
-  type CountryData,
-  countries,
-  getCountryByCallingCode,
-  getCountryByCode,
-} from './countries';

package/src/shared/icons/chevronDown.tsx

@@ -1,22 +0,0 @@
-import type { FC } from 'preact/compat';
-
-type ChevronDownProps = {
-  class?: string;
-};
-
-export const ChevronDown: FC<ChevronDownProps> = ({ class: className }) => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    class={className}
-    aria-hidden="true"
-  >
-    <path
-      d="M4.76734 9.18066C4.39163 8.77605 4.41468 8.14342 4.8191 7.76758C5.22371 7.39187 5.85635 7.41491 6.23219 7.81934L11.9998 14.0312L17.7673 7.81934L17.8406 7.74805C18.2212 7.41355 18.8011 7.41532 19.1804 7.76758C19.5849 8.14341 19.6079 8.77605 19.2322 9.18066L12.7322 16.1807C12.543 16.3842 12.2777 16.5 11.9998 16.5C11.7218 16.5 11.4565 16.3842 11.2673 16.1807L4.76734 9.18066Z"
-      fill="currentColor"
-    />
-  </svg>
-);

package/src/shared/icons/index.ts

@@ -1,2 +0,0 @@
-export { ChevronDown } from './chevronDown';
-export { SuccessIcon } from './successIcon';

package/src/shared/icons/successIcon.css

@@ -1,5 +0,0 @@
-@reference "../../styles/tailwind.css";
-
-.IncodeSuccessIcon {
-  @apply flex-shrink-0;
-}

package/src/shared/icons/successIcon.test.tsx

@@ -1,40 +0,0 @@
-import { render } from '@testing-library/preact';
-import { describe, expect, it, vi } from 'vitest';
-import { SuccessIcon } from './successIcon';
-
-vi.mock('./successIcon.css', () => ({}));
-
-describe('SuccessIcon', () => {
-  it('renders with default size', () => {
-    const { container } = render(<SuccessIcon />);
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('width')).toBe('64');
-    expect(svg?.getAttribute('height')).toBe('64');
-  });
-
-  it('renders with custom number size', () => {
-    const { container } = render(<SuccessIcon size={32} />);
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('width')).toBe('32');
-    expect(svg?.getAttribute('height')).toBe('32');
-  });
-
-  it('renders with custom string size', () => {
-    const { container } = render(<SuccessIcon size="48px" />);
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('width')).toBe('48px');
-    expect(svg?.getAttribute('height')).toBe('48px');
-  });
-
-  it('has IncodeSuccessIcon class', () => {
-    const { container } = render(<SuccessIcon />);
-    const svg = container.querySelector('.IncodeSuccessIcon');
-    expect(svg).toBeTruthy();
-  });
-
-  it('has aria-hidden attribute', () => {
-    const { container } = render(<SuccessIcon />);
-    const svg = container.querySelector('svg');
-    expect(svg?.getAttribute('aria-hidden')).toBe('true');
-  });
-});

package/src/shared/icons/successIcon.tsx

@@ -1,26 +0,0 @@
-import type { FC } from 'preact/compat';
-import './successIcon.css';
-
-type SuccessIconProps = {
-  size?: number | string;
-};
-
-export const SuccessIcon: FC<SuccessIconProps> = ({ size = 64 }) => {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 16 17"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      class="IncodeSuccessIcon"
-      aria-hidden="true"
-    >
-      <title>status</title>
-      <path
-        d="M8 0.5C12.4182 0.500064 16 4.0818 16 8.5C16 12.9182 12.4181 16.4999 8 16.5C3.58181 16.5 3.68521e-05 12.9182 0 8.5C0 4.08176 3.58179 0.5 8 0.5ZM11.1748 6.11621C10.9423 5.88373 10.5747 5.86781 10.3242 6.06934L10.3203 6.07324L10.2764 6.1123L6.85742 9.53125L5.72656 8.40039C5.47758 8.1514 5.0732 8.1514 4.82422 8.40039C4.59169 8.63292 4.57673 9.00038 4.77832 9.25098L4.78125 9.25488L4.82031 9.29883L6.40625 10.8848C6.63867 11.117 7.00542 11.1319 7.25586 10.9307L7.26074 10.9277L7.30371 10.8877L11.1748 7.01758C11.4235 6.76863 11.4234 6.36521 11.1748 6.11621Z"
-        fill="var(--icon-status-positive-static)"
-      />
-    </svg>
-  );
-};

package/src/shared/loader/loadingIcon.css

@@ -1,28 +0,0 @@
-@reference "../../styles/tailwind.css";
-
-.IncodeLoadingIcon {
-  @apply relative inline-block animate-spin;
-}
-
-.IncodeLoadingIconPrimary {
-  @apply absolute inset-0 flex items-center justify-center;
-}
-
-.IncodeLoadingIconSecondary {
-  @apply absolute inset-0 flex items-center justify-center;
-}
-
-.IncodeLoadingIconPrimaryIcon {
-  @apply fill-spinner-surface-primary;
-}
-
-.IncodeLoadingIconSecondaryIcon {
-  @apply fill-spinner-surface-secondary;
-}
-
-.IncodeCaptureUploadingIconContainer {
-  @apply flex items-center justify-center;
-}
-
-/* primaryColor={tokens.button.primary.text.default}
-secondaryColor={tokens.color.surface.primary['400']} */

package/src/shared/loader/loadingIcon.tsx

@@ -1,67 +0,0 @@
-import { cn } from '@/styles/cn';
-import './loadingIcon.css';
-
-type LoadingIconProps = {
-  size?: number;
-  primaryClass?: string;
-  secondaryClass?: string;
-};
-
-const SpinnerPrimary = ({
-  size,
-  className,
-}: {
-  size: number;
-  className?: string;
-}) => {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 31 31"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      class={cn('IncodeLoadingIconPrimaryIcon', className)}
-    >
-      <title>Spinner Inner part</title>
-      <path d="M28.1614 15.2837C29.453 15.2837 30.5186 14.2304 30.3181 12.9545C30.1344 11.7862 29.8129 10.6411 29.3582 9.54344C28.6044 7.72356 27.4995 6.06997 26.1066 4.67709C24.7137 3.28421 23.0601 2.17932 21.2403 1.4255C20.1426 0.970841 18.9974 0.649265 17.8292 0.46563C16.5533 0.265073 15.5 1.33073 15.5 2.62232C15.5 3.91391 16.5601 4.93461 17.8187 5.22473C18.3748 5.35291 18.9206 5.52729 19.4503 5.74672C20.7028 6.26548 21.8407 7.02585 22.7993 7.98441C23.7578 8.94296 24.5182 10.0809 25.037 11.3333C25.2564 11.8631 25.4308 12.4089 25.559 12.965C25.8491 14.2236 26.8698 15.2837 28.1614 15.2837Z" />
-    </svg>
-  );
-};
-
-const SpinnerSecondary = ({
-  size,
-  className,
-}: {
-  size: number;
-  className?: string;
-}) => {
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 31 31"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      class={cn('IncodeLoadingIconSecondaryIcon', className)}
-    >
-      <title>Spinner Outer part</title>
-      <path d="M30.5 15.2837C30.5 23.568 23.7843 30.2837 15.5 30.2837C7.21573 30.2837 0.5 23.568 0.5 15.2837C0.5 6.99942 7.21573 0.283691 15.5 0.283691C23.7843 0.283691 30.5 6.99942 30.5 15.2837ZM5.17725 15.2837C5.17725 20.9848 9.7989 25.6064 15.5 25.6064C21.2011 25.6064 25.8227 20.9848 25.8227 15.2837C25.8227 9.5826 21.2011 4.96095 15.5 4.96095C9.7989 4.96095 5.17725 9.5826 5.17725 15.2837Z" />
-    </svg>
-  );
-};
-
-export const LoadingIcon = ({
-  size = 30,
-  secondaryClass,
-  primaryClass,
-}: LoadingIconProps) => {
-  return (
-    <div class="IncodeLoadingIcon">
-      <SpinnerSecondary size={size} className={secondaryClass} />
-      <div class="IncodeLoadingIconPrimary">
-        <SpinnerPrimary size={size} className={primaryClass} />
-      </div>
-    </div>
-  );
-};

package/src/shared/lottie/lottie.tsx

@@ -1,108 +0,0 @@
-import type { CSSProperties } from 'preact';
-import { useEffect, useRef } from 'preact/hooks';
-
-export type LottieAnimationData = {
-  fr: number;
-  v: string;
-  ip: number;
-  op: number;
-  w: number;
-  h: number;
-};
-
-type LottieInstance = {
-  loadAnimation: (options: {
-    container: HTMLElement | null;
-    renderer: string;
-    loop: boolean;
-    autoplay: boolean;
-    animationData: LottieAnimationData;
-  }) => {
-    addEventListener: (event: string, callback: () => void) => void;
-    removeEventListener: (event: string, callback: () => void) => void;
-    destroy: () => void;
-  };
-};
-
-declare global {
-  interface Window {
-    lottie: LottieInstance;
-  }
-}
-
-let lottiePromise: Promise<LottieInstance> | null = null;
-function loadLottie() {
-  if (lottiePromise) return lottiePromise;
-
-  lottiePromise = new Promise((resolve, reject) => {
-    const script = document.createElement('script');
-    script.src =
-      'https://cdn.jsdelivr.net/npm/lottie-web@5.13.0/build/player/lottie_light.min.js';
-    script.onload = () => resolve(window.lottie);
-    script.onerror = reject;
-    document.head.appendChild(script);
-  });
-
-  return lottiePromise;
-}
-
-type LottieProps = {
-  animationData: LottieAnimationData;
-  loop?: boolean;
-  autoplay?: boolean;
-  style?: CSSProperties;
-  className?: string;
-  onComplete?: () => void;
-};
-
-export function Lottie({
-  animationData,
-  loop = true,
-  autoplay = true,
-  style,
-  className,
-  onComplete,
-}: LottieProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const animationOptionsRef = useRef({
-    container: containerRef.current,
-    renderer: 'svg',
-    loop,
-    autoplay,
-    animationData,
-  });
-
-  useEffect(() => {
-    animationOptionsRef.current = {
-      container: containerRef.current,
-      renderer: 'svg',
-      loop,
-      autoplay,
-      animationData,
-    };
-  }, [animationData, loop, autoplay]);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    let anim: ReturnType<LottieInstance['loadAnimation']>;
-
-    loadLottie().then((lottie) => {
-      anim = lottie.loadAnimation(animationOptionsRef.current);
-      if (onComplete) {
-        anim.addEventListener('complete', onComplete);
-      }
-    });
-
-    return () => {
-      if (anim) {
-        if (onComplete) {
-          anim.removeEventListener('complete', onComplete);
-        }
-        anim.destroy();
-      }
-    };
-  }, [onComplete]);
-
-  return <div ref={containerRef} style={style} className={className} />;
-}

package/src/shared/otpInput/otpInput.css

@@ -1,85 +0,0 @@
-@reference "../../styles/tailwind.css";
-
-.IncodeOtpInput {
-  @apply flex flex-col items-center w-full flex-1;
-}
-
-.IncodeOtpInputContainer {
-  @apply flex flex-col items-center w-full;
-}
-
-/* Individual digit boxes container */
-.IncodeOtpInputBoxes {
-  @apply flex justify-center gap-4 max-w-full;
-}
-
-@media (min-width: 400px) {
-  .IncodeOtpInputBoxes {
-    @apply gap-12;
-  }
-}
-
-/* Individual digit box - base styles (must come before higher specificity selectors) */
-.IncodeOtpInputBox {
-  @apply w-[48px] h-[48px] shrink-0;
-  @apply text-center text-24 font-bold;
-  @apply border border-input-border-default rounded-small;
-  @apply bg-input-surface-default text-input-text-field-default;
-  @apply outline-none transition-colors duration-200;
-  font-family: inherit;
-}
-
-@media (min-width: 400px) {
-  .IncodeOtpInputBox {
-    @apply w-[56px] h-[56px];
-  }
-}
-
-/* Synchronized focus - when any input is focused, all show active styling */
-.IncodeOtpInputBoxes:focus-within .IncodeOtpInputBox {
-  @apply border-2 border-input-border-active bg-input-surface-active;
-}
-
-/* Error state for all boxes */
-.IncodeOtpInputBoxes.IncodeOtpInputBoxesError .IncodeOtpInputBox {
-  @apply border-input-border-negative;
-}
-
-.IncodeOtpInputBox::placeholder {
-  @apply text-input-text-field-placeholder;
-}
-
-.IncodeOtpInputBox:disabled {
-  @apply bg-input-surface-disabled border-input-border-disabled;
-  @apply text-input-text-field-disabled cursor-not-allowed;
-}
-
-.IncodeOtpInputError {
-  @apply text-input-text-helper-negative text-14 text-center m-0 font-medium;
-}
-
-.IncodeOtpInputActions {
-  @apply flex flex-col items-center w-full;
-}
-
-.IncodeOtpInputTimer {
-  @apply text-text-body-tertiary text-18 m-0 font-normal text-center;
-}
-
-.IncodeOtpInputResendText {
-  @apply text-text-body-primary text-18 m-0 font-medium text-center;
-}
-
-.IncodeOtpInputLink {
-  @apply bg-transparent border-none p-0 m-0 cursor-pointer;
-  @apply text-button-primary-surface-default text-18 font-medium underline;
-  font-family: inherit;
-}
-
-.IncodeOtpInputLink:hover {
-  @apply text-button-primary-surface-default;
-}
-
-.IncodeOtpInputLink:disabled {
-  @apply text-text-body-tertiary cursor-not-allowed;
-}