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

package/src/phone/phoneInput.test.tsx

@@ -1,275 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/preact';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { PhoneInput } from './phoneInput';
-
-describe('PhoneInput', () => {
-  const defaultProps = {
-    countryCode: 'US',
-    phonePrefix: '+1',
-    onPhoneChange: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('renders phone input field', () => {
-      render(<PhoneInput {...defaultProps} />);
-
-      const input = screen.getByTestId('phone-input');
-      expect(input).toBeTruthy();
-    });
-
-    it('renders country selector button', () => {
-      render(<PhoneInput {...defaultProps} />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      expect(selector).toBeTruthy();
-    });
-
-    it('renders with initial country code', () => {
-      render(<PhoneInput {...defaultProps} countryCode="MX" />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      expect(selector.textContent).toContain('+52');
-    });
-
-    it('renders US flag emoji for US country', () => {
-      render(<PhoneInput {...defaultProps} countryCode="US" />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      expect(selector.textContent).toContain('🇺🇸');
-    });
-  });
-
-  describe('Phone input', () => {
-    it('calls onPhoneChange when input changes', () => {
-      const onPhoneChange = vi.fn();
-      render(<PhoneInput {...defaultProps} onPhoneChange={onPhoneChange} />);
-
-      const input = screen.getByTestId('phone-input');
-      fireEvent.input(input, { target: { value: '4155551234' } });
-
-      expect(onPhoneChange).toHaveBeenCalled();
-    });
-
-    it('formats phone number as user types', () => {
-      render(<PhoneInput {...defaultProps} />);
-
-      const input = screen.getByTestId('phone-input') as HTMLInputElement;
-      fireEvent.input(input, { target: { value: '4155551234' } });
-
-      // Should be formatted with AsYouType
-      expect(input.value).toMatch(/[\d\s()-]+/);
-    });
-
-    it('validates phone number and reports validity', () => {
-      const onPhoneChange = vi.fn();
-      render(<PhoneInput {...defaultProps} onPhoneChange={onPhoneChange} />);
-
-      const input = screen.getByTestId('phone-input');
-
-      // Invalid phone (too short)
-      fireEvent.input(input, { target: { value: '123' } });
-      expect(onPhoneChange).toHaveBeenLastCalledWith(expect.any(String), false);
-
-      // Valid US phone
-      fireEvent.input(input, { target: { value: '4155551234' } });
-      expect(onPhoneChange).toHaveBeenLastCalledWith(expect.any(String), true);
-    });
-  });
-
-  describe('Country selector', () => {
-    it('opens dropdown on click', () => {
-      render(<PhoneInput {...defaultProps} />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      fireEvent.click(selector);
-
-      // Dropdown should be visible
-      const dropdown = document.querySelector('.IncodePhoneCountryDropdown');
-      expect(dropdown).toBeTruthy();
-    });
-
-    it('closes dropdown when clicking outside', () => {
-      render(<PhoneInput {...defaultProps} />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      fireEvent.click(selector);
-
-      // Click outside
-      fireEvent.mouseDown(document.body);
-
-      const dropdown = document.querySelector('.IncodePhoneCountryDropdown');
-      expect(dropdown).toBeFalsy();
-    });
-
-    it('shows list of countries in dropdown', () => {
-      render(<PhoneInput {...defaultProps} />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      fireEvent.click(selector);
-
-      const options = document.querySelectorAll('.IncodePhoneCountryOption');
-      expect(options.length).toBeGreaterThan(0);
-    });
-
-    it('changes country when option is selected', () => {
-      const onPhoneChange = vi.fn();
-      render(<PhoneInput {...defaultProps} onPhoneChange={onPhoneChange} />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      fireEvent.click(selector);
-
-      // Find and click Mexico option
-      const options = document.querySelectorAll('.IncodePhoneCountryOption');
-      const mxOption = Array.from(options).find((opt) =>
-        opt.textContent?.includes('Mexico'),
-      );
-
-      if (mxOption) {
-        fireEvent.click(mxOption);
-      }
-
-      // Dropdown should close and country should change
-      expect(selector.textContent).toContain('+52');
-    });
-
-    it('does not open dropdown when disabled', () => {
-      render(<PhoneInput {...defaultProps} disabled />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      fireEvent.click(selector);
-
-      const dropdown = document.querySelector('.IncodePhoneCountryDropdown');
-      expect(dropdown).toBeFalsy();
-    });
-  });
-
-  describe('Prefilled phone', () => {
-    it('populates input with prefilled phone', () => {
-      render(<PhoneInput {...defaultProps} prefilledPhone="+14155551234" />);
-
-      const input = screen.getByTestId('phone-input') as HTMLInputElement;
-      expect(input.value).toBeTruthy();
-    });
-
-    it('calls onPhoneChange with prefilled phone', () => {
-      const onPhoneChange = vi.fn();
-      render(
-        <PhoneInput
-          {...defaultProps}
-          prefilledPhone="+14155551234"
-          onPhoneChange={onPhoneChange}
-        />,
-      );
-
-      // Should have called onPhoneChange with the prefilled value
-      expect(onPhoneChange).toHaveBeenCalledWith('+14155551234', true);
-    });
-  });
-
-  describe('Error state', () => {
-    it('displays error message when phoneError is set', () => {
-      render(
-        <PhoneInput {...defaultProps} phoneError="Invalid phone number" />,
-      );
-
-      expect(screen.getByTestId('phone-error')).toBeTruthy();
-      expect(screen.getByText('Invalid phone number')).toBeTruthy();
-    });
-
-    it('shows error styling on input wrapper', () => {
-      const { container } = render(
-        <PhoneInput {...defaultProps} phoneError="Error" />,
-      );
-
-      const wrapper = container.querySelector('.IncodePhoneInputWrapperError');
-      expect(wrapper).toBeTruthy();
-    });
-  });
-
-  describe('Opt-in checkbox', () => {
-    it('does not show opt-in when optinEnabled is false', () => {
-      render(<PhoneInput {...defaultProps} optinEnabled={false} />);
-
-      expect(screen.queryByTestId('phone-optin')).toBeNull();
-    });
-
-    it('shows opt-in checkbox when optinEnabled is true', () => {
-      render(<PhoneInput {...defaultProps} optinEnabled />);
-
-      expect(screen.getByTestId('phone-optin')).toBeTruthy();
-    });
-
-    it('calls onOptInChange when checkbox is toggled', () => {
-      const onOptInChange = vi.fn();
-      render(
-        <PhoneInput
-          {...defaultProps}
-          optinEnabled
-          onOptInChange={onOptInChange}
-        />,
-      );
-
-      const checkbox = screen.getByTestId('phone-optin');
-      fireEvent.change(checkbox, { target: { checked: true } });
-
-      expect(onOptInChange).toHaveBeenCalledWith(true);
-    });
-  });
-
-  describe('Disabled state', () => {
-    it('disables input when disabled prop is true', () => {
-      render(<PhoneInput {...defaultProps} disabled />);
-
-      const input = screen.getByTestId('phone-input') as HTMLInputElement;
-      expect(input.disabled).toBe(true);
-    });
-
-    it('disables country selector when disabled', () => {
-      render(<PhoneInput {...defaultProps} disabled />);
-
-      const button = screen.getByTestId('phone-country-selector');
-      expect(button.hasAttribute('disabled')).toBe(true);
-    });
-
-    it('shows disabled styling', () => {
-      const { container } = render(<PhoneInput {...defaultProps} disabled />);
-
-      const wrapper = container.querySelector(
-        '.IncodePhoneInputWrapperDisabled',
-      );
-      expect(wrapper).toBeTruthy();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('country selector button is accessible', () => {
-      render(<PhoneInput {...defaultProps} />);
-
-      // Button should be accessible - it contains flag and country code
-      const button = screen.getByTestId('phone-country-selector');
-      expect(button.tagName.toLowerCase()).toBe('button');
-      expect(button.textContent).toContain('+1'); // Country code is visible
-    });
-
-    it('has aria-expanded attribute on country selector', () => {
-      render(<PhoneInput {...defaultProps} />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      expect(selector.getAttribute('aria-expanded')).toBe('false');
-
-      fireEvent.click(selector);
-      expect(selector.getAttribute('aria-expanded')).toBe('true');
-    });
-
-    it('has aria-haspopup attribute on country selector', () => {
-      render(<PhoneInput {...defaultProps} />);
-
-      const selector = screen.getByTestId('phone-country-selector');
-      expect(selector.getAttribute('aria-haspopup')).toBe('listbox');
-    });
-  });
-});

package/src/phone/phoneInput.tsx

@@ -1,249 +0,0 @@
-import {
-  AsYouType,
-  type CountryCode,
-  parsePhoneNumberFromString,
-} from 'libphonenumber-js';
-import type { FC } from 'preact/compat';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import {
-  type CountryData,
-  countries,
-  getCountryByCode,
-} from '../shared/countries';
-import { ChevronDown } from '../shared/icons';
-import { Spacer } from '../shared/spacer/spacer';
-import './styles.css';
-
-export type PhoneInputProps = {
-  countryCode: string;
-  phonePrefix: string;
-  prefilledPhone?: string;
-  phoneError?: string;
-  optinEnabled?: boolean;
-  disabled?: boolean;
-  onPhoneChange: (phone: string, isValid: boolean) => void;
-  onOptInChange?: (granted: boolean) => void;
-};
-
-export const PhoneInput: FC<PhoneInputProps> = ({
-  countryCode,
-  prefilledPhone,
-  phoneError,
-  optinEnabled = false,
-  disabled = false,
-  onPhoneChange,
-  onOptInChange,
-}) => {
-  const [selectedCountry, setSelectedCountry] = useState<CountryData | null>(
-    null,
-  );
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [phone, setPhone] = useState('');
-  const [optInGranted, setOptInGranted] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
-
-  // Initialize selected country from countryCode prop
-  useEffect(() => {
-    const country = getCountryByCode(countryCode);
-    if (country) {
-      setSelectedCountry(country);
-    } else {
-      // Default to US if not found
-      setSelectedCountry(
-        countries.find((c) => c.code === 'US') || countries[0],
-      );
-    }
-  }, [countryCode]);
-
-  // Handle prefilled phone
-  useEffect(() => {
-    if (prefilledPhone && selectedCountry) {
-      // Parse the prefilled phone to extract national number
-      const phoneToFormat = prefilledPhone.startsWith('+')
-        ? prefilledPhone
-        : `+${prefilledPhone}`;
-      const parsed = parsePhoneNumberFromString(phoneToFormat);
-
-      if (parsed?.isValid()) {
-        // Update country if different
-        if (parsed.country && parsed.country !== selectedCountry.code) {
-          const newCountry = getCountryByCode(parsed.country);
-          if (newCountry) {
-            setSelectedCountry(newCountry);
-          }
-        }
-        // Format and set the national number
-        const formatter = new AsYouType(parsed.country);
-        const formatted = formatter.input(parsed.nationalNumber);
-        setPhone(formatted);
-        onPhoneChange(phoneToFormat, true);
-      }
-    }
-  }, [prefilledPhone, selectedCountry]);
-
-  // Close dropdown when clicking outside
-  useEffect(() => {
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        dropdownRef.current &&
-        !dropdownRef.current.contains(e.target as Node)
-      ) {
-        setIsDropdownOpen(false);
-      }
-    };
-
-    if (isDropdownOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-    }
-    return () => document.removeEventListener('mousedown', handleClickOutside);
-  }, [isDropdownOpen]);
-
-  const validateAndNotify = (nationalNumber: string, country: CountryData) => {
-    const fullNumber = `${country.callingCode}${nationalNumber.replace(/\D/g, '')}`;
-    try {
-      const parsed = parsePhoneNumberFromString(
-        fullNumber,
-        country.code as CountryCode,
-      );
-      const valid = parsed?.isValid() ?? false;
-      onPhoneChange(fullNumber, valid);
-    } catch {
-      onPhoneChange(fullNumber, false);
-    }
-  };
-
-  const handlePhoneChange = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    const rawValue = target.value;
-
-    if (selectedCountry) {
-      // Format as user types
-      const formatter = new AsYouType(selectedCountry.code);
-      const formatted = formatter.input(rawValue);
-      setPhone(formatted);
-      validateAndNotify(rawValue, selectedCountry);
-    } else {
-      setPhone(rawValue);
-    }
-  };
-
-  const handleCountrySelect = (country: CountryData) => {
-    setSelectedCountry(country);
-    setIsDropdownOpen(false);
-
-    // Revalidate with new country
-    if (phone) {
-      validateAndNotify(phone, country);
-    }
-  };
-
-  const handleOptInChange = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    const granted = target.checked;
-    setOptInGranted(granted);
-    onOptInChange?.(granted);
-  };
-
-  const toggleDropdown = () => {
-    if (!disabled) {
-      setIsDropdownOpen(!isDropdownOpen);
-    }
-  };
-
-  return (
-    <div class="IncodePhoneInput">
-      <div class="IncodePhoneInputContainer">
-        <div class="IncodePhoneInputRow">
-          {/* Country Selector */}
-          <div
-            class={`IncodePhoneCountrySelector ${isDropdownOpen ? 'IncodePhoneCountrySelectorOpen' : ''} ${disabled ? 'IncodePhoneCountrySelectorDisabled' : ''}`}
-            ref={dropdownRef}
-          >
-            <button
-              type="button"
-              class="IncodePhoneCountryButton"
-              onClick={toggleDropdown}
-              disabled={disabled}
-              aria-expanded={isDropdownOpen}
-              aria-haspopup="listbox"
-              data-testid="phone-country-selector"
-            >
-              <span class="IncodePhoneCountryFlag" aria-hidden="true">
-                {selectedCountry?.emoji}
-              </span>
-              <span class="IncodePhoneCountryCode">
-                {selectedCountry?.callingCode}
-              </span>
-              <ChevronDown
-                class={`IncodePhoneCountryArrow ${isDropdownOpen ? 'IncodePhoneCountryArrowUp' : ''}`}
-              />
-            </button>
-
-            {/* Country Dropdown */}
-            {isDropdownOpen && (
-              <div class="IncodePhoneCountryDropdown">
-                {countries.map((country) => (
-                  <button
-                    key={country.code}
-                    type="button"
-                    class={`IncodePhoneCountryOption ${selectedCountry?.code === country.code ? 'IncodePhoneCountryOptionSelected' : ''}`}
-                    onClick={() => handleCountrySelect(country)}
-                  >
-                    <span class="IncodePhoneCountryFlag" aria-hidden="true">
-                      {country.emoji}
-                    </span>
-                    <span class="IncodePhoneCountryOptionCode">
-                      {country.callingCode}
-                    </span>
-                    <span class="IncodePhoneCountryOptionName">
-                      {country.name}
-                    </span>
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-
-          {/* Phone Input */}
-          <div
-            class={`IncodePhoneInputWrapper ${phoneError ? 'IncodePhoneInputWrapperError' : ''} ${disabled ? 'IncodePhoneInputWrapperDisabled' : ''}`}
-          >
-            <input
-              type="tel"
-              value={phone}
-              onInput={handlePhoneChange}
-              placeholder="(123) 456-7890"
-              disabled={disabled}
-              class="IncodePhoneInputField"
-              data-testid="phone-input"
-            />
-          </div>
-        </div>
-
-        {phoneError && (
-          <>
-            <Spacer size={8} />
-            <p class="IncodePhoneInputError" data-testid="phone-error">
-              {phoneError}
-            </p>
-          </>
-        )}
-
-        {optinEnabled && (
-          <>
-            <Spacer size={16} />
-            <label class="IncodePhoneInputOptIn">
-              <input
-                type="checkbox"
-                checked={optInGranted}
-                onChange={handleOptInChange}
-                data-testid="phone-optin"
-              />
-              <span>I agree to receive SMS notifications</span>
-            </label>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/phone/styles.css

@@ -1,158 +0,0 @@
-@reference "../styles/tailwind.css";
-
-/* Phone Page Layout */
-.IncodePhonePage .IncodePageContent {
-  @apply pt-32 pb-16;
-}
-
-.IncodePhoneInput {
-  @apply flex flex-col items-center w-full;
-}
-
-.IncodePhoneInputContainer {
-  @apply flex flex-col items-center w-full;
-}
-
-/* Row container for country selector and input */
-.IncodePhoneInputRow {
-  @apply relative flex items-stretch gap-8 w-full max-w-[340px];
-}
-
-/* Phone Input Wrapper (separate box) */
-.IncodePhoneInputWrapper {
-  @apply flex-1 flex items-center border border-input-border-default rounded-small bg-input-surface-default transition-colors duration-200;
-}
-
-.IncodePhoneInputWrapper:focus-within {
-  @apply border-input-border-active;
-}
-
-.IncodePhoneInputWrapper.IncodePhoneInputWrapperError {
-  @apply border-input-border-negative;
-}
-
-.IncodePhoneInputWrapper.IncodePhoneInputWrapperDisabled {
-  @apply border-input-border-disabled bg-input-surface-disabled;
-}
-
-/* Country Selector (separate box) */
-.IncodePhoneCountrySelector {
-  @apply static shrink-0 w-[124px];
-  @apply border border-input-border-default rounded-small bg-input-surface-default;
-  @apply transition-colors duration-200;
-}
-
-.IncodePhoneCountrySelector.IncodePhoneCountrySelectorOpen {
-  @apply border-input-border-active;
-}
-
-.IncodePhoneCountrySelector.IncodePhoneCountrySelectorDisabled {
-  @apply border-input-border-disabled bg-input-surface-disabled;
-}
-
-.IncodePhoneCountryButton {
-  @apply flex items-center justify-center w-full h-full;
-  @apply p-8 pl-16;
-  @apply bg-transparent border-none cursor-pointer;
-  @apply text-18 font-medium text-text-body-primary;
-  @apply rounded-small;
-  font-family: inherit;
-}
-
-.IncodePhoneCountryButton:disabled {
-  @apply cursor-not-allowed text-input-text-field-disabled;
-}
-
-.IncodePhoneCountryButton:focus {
-  @apply outline-none;
-}
-
-.IncodePhoneCountryFlag {
-  @apply text-24 leading-none;
-}
-
-.IncodePhoneCountryCode {
-  @apply text-18 font-medium whitespace-nowrap text-text-body-primary ml-4;
-}
-
-.IncodePhoneCountryArrow {
-  @apply w-24 h-24 text-icon-neutral-500 transition-transform duration-200 ml-8;
-}
-
-.IncodePhoneCountryArrowUp {
-  @apply rotate-180;
-}
-
-.IncodePhoneCountryButton:disabled .IncodePhoneCountryArrow {
-  @apply text-icon-neutral-300;
-}
-
-/* Country Dropdown */
-.IncodePhoneCountryDropdown {
-  @apply absolute top-full left-0 right-0 z-50 mt-8;
-  @apply max-h-[320px] overflow-y-auto;
-  @apply bg-surface-neutral-0 border border-input-border-default rounded-small;
-  @apply p-8;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
-}
-
-.IncodePhoneCountryOption {
-  @apply w-full flex items-center gap-12 py-12 px-12 cursor-pointer rounded-small;
-  @apply text-16 font-medium text-text-body-primary;
-  @apply bg-transparent border-none text-left;
-  font-family: inherit;
-}
-
-.IncodePhoneCountryOption:hover {
-  @apply bg-surface-neutral-100;
-}
-
-.IncodePhoneCountryOption:focus {
-  @apply outline-none bg-surface-neutral-100;
-}
-
-.IncodePhoneCountryOptionSelected {
-  @apply bg-surface-brand-50;
-}
-
-.IncodePhoneCountryOptionSelected:hover {
-  @apply bg-surface-brand-50;
-}
-
-.IncodePhoneCountryOptionCode {
-  @apply text-16 text-text-body-secondary min-w-[52px];
-}
-
-.IncodePhoneCountryOptionName {
-  @apply text-16 text-text-body-primary flex-1 truncate;
-}
-
-/* Phone Input Field */
-.IncodePhoneInputField {
-  @apply w-full py-16 px-16 text-18 font-medium border-none outline-none bg-transparent text-input-text-field-default;
-  @apply rounded-small;
-}
-
-.IncodePhoneInputField::placeholder {
-  @apply text-input-text-field-placeholder font-medium;
-}
-
-.IncodePhoneInputField:disabled {
-  @apply cursor-not-allowed text-input-text-field-disabled;
-}
-
-.IncodePhoneInputError {
-  @apply text-input-text-helper-negative text-14 text-center m-0 font-medium;
-}
-
-.IncodePhoneInputOptIn {
-  @apply flex items-center gap-8 text-14 text-checkbox-text-default cursor-pointer;
-}
-
-.IncodePhoneInputOptIn input[type="checkbox"] {
-  @apply w-[18px] h-[18px] cursor-pointer accent-checkbox-surface-selected rounded-checkbox;
-}
-
-.IncodePhoneInputOptIn span {
-  @apply select-none font-medium;
-}

package/src/selfie/cameraButton.css

@@ -1,13 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeCameraButton {
-  @apply flex items-center justify-center;
-
-  .IncodeCameraButtonPath {
-    @apply fill-border-brand-500;
-  }
-
-  .IncodeCameraButtonBackground {
-    @apply fill-surface-brand-50;
-  }
-}