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

package/src/email/emailInput.test.tsx

@@ -1,264 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/preact';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { EmailInput } from './emailInput';
-
-describe('EmailInput', () => {
-  const defaultProps = {
-    onEmailChange: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('renders email input field', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input');
-      expect(input).toBeTruthy();
-    });
-
-    it('renders with placeholder text', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input') as HTMLInputElement;
-      expect(input.placeholder).toBe('Email');
-    });
-
-    it('renders label for accessibility', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const label = screen.getByText('Email');
-      expect(label).toBeTruthy();
-    });
-
-    it('input has correct type', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input') as HTMLInputElement;
-      expect(input.type).toBe('email');
-    });
-  });
-
-  describe('Email input behavior', () => {
-    it('calls onEmailChange when input changes', () => {
-      const onEmailChange = vi.fn();
-      render(<EmailInput {...defaultProps} onEmailChange={onEmailChange} />);
-
-      const input = screen.getByTestId('email-input');
-      fireEvent.input(input, { target: { value: 'user@example.com' } });
-
-      expect(onEmailChange).toHaveBeenCalled();
-    });
-
-    it('validates valid email and reports isValid as true', () => {
-      const onEmailChange = vi.fn();
-      render(<EmailInput {...defaultProps} onEmailChange={onEmailChange} />);
-
-      const input = screen.getByTestId('email-input');
-      fireEvent.input(input, { target: { value: 'user@example.com' } });
-
-      expect(onEmailChange).toHaveBeenCalledWith('user@example.com', true);
-    });
-
-    it('validates invalid email and reports isValid as false', () => {
-      const onEmailChange = vi.fn();
-      render(<EmailInput {...defaultProps} onEmailChange={onEmailChange} />);
-
-      const input = screen.getByTestId('email-input');
-      fireEvent.input(input, { target: { value: 'invalid-email' } });
-
-      expect(onEmailChange).toHaveBeenCalledWith('invalid-email', false);
-    });
-
-    it('validates email without @ as invalid', () => {
-      const onEmailChange = vi.fn();
-      render(<EmailInput {...defaultProps} onEmailChange={onEmailChange} />);
-
-      const input = screen.getByTestId('email-input');
-      fireEvent.input(input, { target: { value: 'userexample.com' } });
-
-      expect(onEmailChange).toHaveBeenCalledWith('userexample.com', false);
-    });
-
-    it('validates email without domain as invalid', () => {
-      const onEmailChange = vi.fn();
-      render(<EmailInput {...defaultProps} onEmailChange={onEmailChange} />);
-
-      const input = screen.getByTestId('email-input');
-      fireEvent.input(input, { target: { value: 'user@' } });
-
-      expect(onEmailChange).toHaveBeenCalledWith('user@', false);
-    });
-
-    it('trims whitespace from email', () => {
-      const onEmailChange = vi.fn();
-      render(<EmailInput {...defaultProps} onEmailChange={onEmailChange} />);
-
-      const input = screen.getByTestId('email-input');
-      fireEvent.input(input, { target: { value: '  user@example.com  ' } });
-
-      expect(onEmailChange).toHaveBeenCalledWith('user@example.com', true);
-    });
-
-    it('empty email is invalid', () => {
-      const onEmailChange = vi.fn();
-      render(<EmailInput {...defaultProps} onEmailChange={onEmailChange} />);
-
-      const input = screen.getByTestId('email-input');
-      fireEvent.input(input, { target: { value: '' } });
-
-      expect(onEmailChange).toHaveBeenCalledWith('', false);
-    });
-  });
-
-  describe('Prefilled email', () => {
-    it('populates input with prefilled email', () => {
-      render(
-        <EmailInput {...defaultProps} prefilledEmail="prefilled@example.com" />,
-      );
-
-      const input = screen.getByTestId('email-input') as HTMLInputElement;
-      expect(input.value).toBe('prefilled@example.com');
-    });
-
-    it('calls onEmailChange with prefilled email on mount', () => {
-      const onEmailChange = vi.fn();
-      render(
-        <EmailInput
-          {...defaultProps}
-          prefilledEmail="prefilled@example.com"
-          onEmailChange={onEmailChange}
-        />,
-      );
-
-      expect(onEmailChange).toHaveBeenCalledWith('prefilled@example.com', true);
-    });
-
-    it('validates prefilled email', () => {
-      const onEmailChange = vi.fn();
-      render(
-        <EmailInput
-          {...defaultProps}
-          prefilledEmail="invalid-prefilled"
-          onEmailChange={onEmailChange}
-        />,
-      );
-
-      expect(onEmailChange).toHaveBeenCalledWith('invalid-prefilled', false);
-    });
-  });
-
-  describe('Error state', () => {
-    it('displays error message when emailError is set', () => {
-      render(
-        <EmailInput {...defaultProps} emailError="Invalid email address" />,
-      );
-
-      expect(screen.getByTestId('email-error')).toBeTruthy();
-      expect(screen.getByText('Invalid email address')).toBeTruthy();
-    });
-
-    it('shows error styling on input wrapper', () => {
-      const { container } = render(
-        <EmailInput {...defaultProps} emailError="Error" />,
-      );
-
-      const wrapper = container.querySelector('.IncodeEmailInputWrapperError');
-      expect(wrapper).toBeTruthy();
-    });
-
-    it('does not show error element when no error', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      expect(screen.queryByTestId('email-error')).toBeNull();
-    });
-
-    it('sets aria-invalid to true when error is present', () => {
-      render(<EmailInput {...defaultProps} emailError="Error" />);
-
-      const input = screen.getByTestId('email-input');
-      expect(input.getAttribute('aria-invalid')).toBe('true');
-    });
-
-    it('sets aria-invalid to false when no error', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input');
-      expect(input.getAttribute('aria-invalid')).toBe('false');
-    });
-  });
-
-  describe('Disabled state', () => {
-    it('disables input when disabled prop is true', () => {
-      render(<EmailInput {...defaultProps} disabled />);
-
-      const input = screen.getByTestId('email-input') as HTMLInputElement;
-      expect(input.disabled).toBe(true);
-    });
-
-    it('shows disabled styling', () => {
-      const { container } = render(<EmailInput {...defaultProps} disabled />);
-
-      const wrapper = container.querySelector(
-        '.IncodeEmailInputWrapperDisabled',
-      );
-      expect(wrapper).toBeTruthy();
-    });
-
-    it('does not disable input by default', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input') as HTMLInputElement;
-      expect(input.disabled).toBe(false);
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has aria-label for screen readers', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input');
-      expect(input.getAttribute('aria-label')).toBe('Email address');
-    });
-
-    it('has aria-describedby when error is present', () => {
-      render(<EmailInput {...defaultProps} emailError="Error message" />);
-
-      const input = screen.getByTestId('email-input');
-      expect(input.getAttribute('aria-describedby')).toBe('email-error');
-    });
-
-    it('does not have aria-describedby when no error', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input');
-      expect(input.getAttribute('aria-describedby')).toBeNull();
-    });
-
-    it('error message has role="alert"', () => {
-      render(<EmailInput {...defaultProps} emailError="Error" />);
-
-      const error = screen.getByTestId('email-error');
-      expect(error.getAttribute('role')).toBe('alert');
-    });
-
-    it('has autocomplete attribute for email', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input');
-      expect(input.getAttribute('autocomplete')).toBe('email');
-    });
-
-    it('label is associated with input', () => {
-      render(<EmailInput {...defaultProps} />);
-
-      const input = screen.getByTestId('email-input');
-      expect(input.getAttribute('id')).toBe('email-input');
-
-      const label = document.querySelector('label[for="email-input"]');
-      expect(label).toBeTruthy();
-    });
-  });
-});

package/src/email/emailInput.tsx

@@ -1,85 +0,0 @@
-import type { FC } from 'preact/compat';
-import { useEffect, useState } from 'preact/hooks';
-import { Spacer } from '../shared/spacer/spacer';
-import './styles.css';
-
-const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-
-export type EmailInputProps = {
-  prefilledEmail?: string;
-  emailError?: string;
-  disabled?: boolean;
-  onEmailChange: (email: string, isValid: boolean) => void;
-};
-
-export const EmailInput: FC<EmailInputProps> = ({
-  prefilledEmail,
-  emailError,
-  disabled = false,
-  onEmailChange,
-}) => {
-  const [email, setEmail] = useState('');
-
-  // Handle prefilled email
-  useEffect(() => {
-    if (prefilledEmail) {
-      setEmail(prefilledEmail);
-      const isValid = EMAIL_REGEX.test(prefilledEmail.trim());
-      onEmailChange(prefilledEmail.trim(), isValid);
-    }
-  }, [prefilledEmail, onEmailChange]);
-
-  const handleEmailChange = (e: Event) => {
-    const target = e.target as HTMLInputElement;
-    const value = target.value;
-    setEmail(value);
-
-    const trimmedValue = value.trim();
-    const isValid = trimmedValue.length > 0 && EMAIL_REGEX.test(trimmedValue);
-    onEmailChange(trimmedValue, isValid);
-  };
-
-  const errorId = emailError ? 'email-error' : undefined;
-
-  return (
-    <div class="IncodeEmailInput">
-      <div class="IncodeEmailInputContainer">
-        <div
-          class={`IncodeEmailInputWrapper ${emailError ? 'IncodeEmailInputWrapperError' : ''} ${disabled ? 'IncodeEmailInputWrapperDisabled' : ''}`}
-        >
-          <label for="email-input" class="IncodeEmailInputLabel">
-            Email
-          </label>
-          <input
-            id="email-input"
-            type="email"
-            value={email}
-            onInput={handleEmailChange}
-            placeholder="Email"
-            disabled={disabled}
-            class="IncodeEmailInputField"
-            data-testid="email-input"
-            aria-label="Email address"
-            aria-invalid={emailError ? 'true' : 'false'}
-            aria-describedby={errorId}
-            autocomplete="email"
-          />
-        </div>
-
-        {emailError && (
-          <>
-            <Spacer size={8} />
-            <p
-              id={errorId}
-              class="IncodeEmailInputError"
-              data-testid="email-error"
-              role="alert"
-            >
-              {emailError}
-            </p>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/email/styles.css

@@ -1,59 +0,0 @@
-@reference "../styles/tailwind.css";
-
-/* Email Page Layout */
-.IncodeEmailPage .IncodePageContent {
-  @apply pt-32 pb-16;
-}
-
-.IncodeEmailInput {
-  @apply flex flex-col items-center w-full;
-}
-
-.IncodeEmailInputContainer {
-  @apply flex flex-col items-center w-full;
-}
-
-/* Email Input Wrapper */
-.IncodeEmailInputWrapper {
-  @apply flex flex-col w-full max-w-[340px];
-  @apply border border-input-border-default rounded-small bg-input-surface-default transition-colors duration-200;
-}
-
-.IncodeEmailInputWrapper:focus-within {
-  @apply border-input-border-active;
-}
-
-.IncodeEmailInputWrapper.IncodeEmailInputWrapperError {
-  @apply border-input-border-negative;
-}
-
-.IncodeEmailInputWrapper.IncodeEmailInputWrapperDisabled {
-  @apply border-input-border-disabled bg-input-surface-disabled;
-}
-
-/* Email Input Label */
-.IncodeEmailInputLabel {
-  @apply sr-only;
-}
-
-/* Email Input Field */
-.IncodeEmailInputField {
-  @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;
-}
-
-.IncodeEmailInputField::placeholder {
-  @apply text-input-text-field-placeholder font-medium;
-}
-
-.IncodeEmailInputField:disabled {
-  @apply cursor-not-allowed text-input-text-field-disabled;
-}
-
-.IncodeEmailInputField:focus {
-  @apply outline-none;
-}
-
-.IncodeEmailInputError {
-  @apply text-input-text-helper-negative text-14 text-center m-0 font-medium;
-}