@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/InputPhone/input-phone.test.tsx

@@ -0,0 +1,148 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+
+import { InputPhone } from './input-phone';
+
+describe('<InputPhone />', () => {
+  it('renders with default country (Brazil)', () => {
+    render(<InputPhone data-testid="phone-input" />);
+
+    const select = screen.getByTestId('country-select');
+    expect(select).toBeInTheDocument();
+    expect(screen.getByText('+55')).toBeInTheDocument();
+  });
+
+  it('renders with custom default country', () => {
+    render(<InputPhone defaultCountry="+1" data-testid="phone-input" />);
+
+    const select = screen.getByTestId('country-select');
+    expect(select).toBeInTheDocument();
+    expect(screen.getByText('+1')).toBeInTheDocument();
+  });
+
+  it('calls onChange when phone number changes', async () => {
+    const handleChange = vi.fn();
+    render(
+      <InputPhone
+        onChange={handleChange}
+        data-testid="phone-input"
+      />
+    );
+
+    const input = screen.getByTestId('phone-input');
+    await userEvent.type(input, '11987654321');
+
+    expect(handleChange).toHaveBeenCalledWith('(11) 9 8765-4321', '+55');
+  });
+
+  it('calls onCountryChange when country is selected', async () => {
+    const handleCountryChange = vi.fn();
+    render(
+      <InputPhone
+        onCountryChange={handleCountryChange}
+        data-testid="phone-input"
+      />
+    );
+
+    const select = screen.getByTestId('country-select');
+    fireEvent.click(select);
+
+    const usOption = await screen.findByText('US');
+    fireEvent.click(usOption);
+
+    expect(handleCountryChange).toHaveBeenCalledWith(expect.objectContaining({
+      code: '+1',
+      country: 'US',
+      mask: expect.any(String),
+    }));
+  });
+
+  it('filters available countries when provided', () => {
+    render(
+      <InputPhone
+        availableCountries={[ '+55', '+1' ]}
+        data-testid="phone-input"
+      />
+    );
+
+    const select = screen.getByTestId('country-select');
+    fireEvent.click(select);
+
+    const brs = screen.getAllByText('BR');
+    const uss = screen.getAllByText('US');
+    expect(brs.length).toBeGreaterThan(0);
+    expect(uss.length).toBeGreaterThan(0);
+  });
+
+  it('applies error styling when error prop is true', () => {
+    render(<InputPhone error data-testid="phone-input" />);
+
+    const input = screen.getByTestId('phone-input');
+    const container = input.closest('div');
+    expect(container).toHaveClass('border-error-500');
+  });
+
+  it('applies success styling when success prop is true', () => {
+    render(<InputPhone success data-testid="phone-input" />);
+
+    const input = screen.getByTestId('phone-input');
+    const container = input.closest('div');
+    expect(container).toHaveClass('border-green-500');
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<InputPhone disabled data-testid="phone-input" />);
+
+    const input = screen.getByTestId('phone-input');
+    const select = screen.getByTestId('country-select');
+
+    expect(input).toBeDisabled();
+    expect(select).toBeDisabled();
+  });
+
+  it('applies different sizes correctly', () => {
+    const { rerender } = render(<InputPhone size="sm" data-testid="phone-input" />);
+
+    let input = screen.getByTestId('phone-input');
+    expect(input).toHaveClass('pl-2', 'pr-3', 'text-sm');
+
+    rerender(<InputPhone size="lg" data-testid="phone-input" />);
+
+    input = screen.getByTestId('phone-input');
+    expect(input).toHaveClass('pl-2', 'pr-4', 'text-base');
+  });
+
+  it('updates placeholder based on selected country mask', () => {
+    render(<InputPhone data-testid="phone-input" />);
+
+    const input = screen.getByTestId('phone-input');
+    expect(input).toHaveAttribute('placeholder', '(00) 0 0000-0000');
+
+    const select = screen.getByTestId('country-select');
+    fireEvent.click(select);
+  });
+
+  it('displays country code next to select', () => {
+    render(<InputPhone defaultCountry="+1" data-testid="phone-input" />);
+
+    expect(screen.getByText('+1')).toBeInTheDocument();
+  });
+
+  it('has proper container structure with country code display', () => {
+    render(<InputPhone data-testid="phone-input" />);
+
+    const input = screen.getByTestId('phone-input');
+    const container = input.closest('div');
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveClass('border', 'border-gray-300', 'flex', 'w-full');
+  });
+
+  it('select has proper styling', () => {
+    render(<InputPhone data-testid="phone-input" />);
+
+    const select = screen.getByTestId('country-select');
+    expect(select).toHaveClass('flex', 'items-center', 'gap-1', 'bg-transparent');
+  });
+});

package/src/components/atoms/InputPhone/input-phone.tsx

@@ -0,0 +1,267 @@
+import { ComponentProps, forwardRef, useState, useCallback, useMemo, useRef } from 'react';
+
+import * as Select from '@radix-ui/react-select';
+import { ChevronDown } from 'lucide-react';
+
+import {
+  COUNTRY_CODES,
+  getCountryByCode,
+  getDefaultCountry,
+  type CountryCode,
+} from '@/utils/countries';
+
+import { Flex } from '../Flex';
+
+import { cn, MASK_HELPERS, MASKS } from '@/utils';
+
+const INPUT_BASE_CLASSES = [
+  'h-full w-full flex',
+  'placeholder:text-gray-500 leading-10! placeholder:leading-10!',
+  'border-0 bg-transparent',
+  'outline-none',
+  'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+].join(' ');
+
+const CONTAINER_BASE_CLASSES = [
+  'border border-gray-300 flex w-full min-w-0 rounded-2xl bg-white',
+  'shadow-xs transition-[color,box-shadow]',
+  'focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2',
+  'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+].join(' ');
+
+const CONTAINER_SIZE_CLASSES = {
+  sm: 'h-10',
+  md: 'h-10',
+  lg: 'h-11',
+} as const;
+
+const SIZE_CLASSES = {
+  sm: 'pl-2 pr-3',
+  md: 'pl-2 pr-[14px]',
+  lg: 'pl-2 pr-4',
+} as const;
+
+const TEXT_SIZE_CLASSES = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-base',
+} as const;
+
+const ERROR_CLASSES = 'border-error-500 ring-error-500/20';
+const SUCCESS_CLASSES = 'border-green-500 ring-green-500/20';
+
+export interface InputPhoneProps extends Omit<ComponentProps<'input'>, 'size' | 'type' | 'onChange'> {
+  error?: boolean;
+  success?: boolean;
+  size?: keyof typeof SIZE_CLASSES;
+  defaultCountry?: string;
+  availableCountries?: string[];
+  onCountryChange?: (country: CountryCode) => void;
+  onChange?: (value: string, countryCode: string) => void;
+  onlyMobile?: boolean;
+  'data-testid'?: string;
+}
+
+export interface PhoneValue {
+  phone: string;
+  countryCode: string;
+  fullNumber: string;
+}
+
+const InputPhoneComponent = forwardRef<HTMLInputElement, InputPhoneProps>(
+  ({
+    className,
+    error = false,
+    success = false,
+    size = 'md',
+    disabled,
+    defaultCountry,
+    availableCountries,
+    onCountryChange,
+    onChange,
+    onlyMobile = true,
+    'data-testid': testId,
+    ...props
+  }, ref) => {
+    const [ selectedCountry, setSelectedCountry ] = useState<CountryCode>(() => {
+      if (defaultCountry) {
+        const country = COUNTRY_CODES.find(c => c.code === defaultCountry);
+
+        if (country) return country;
+      }
+
+      return getDefaultCountry();
+    });
+
+    const [ phoneValue, setPhoneValue ] = useState<string>('');
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    const currentMask = useMemo(() => {
+      if (selectedCountry.code === '+55') {
+        const unmaskedLength = MASK_HELPERS.removeMask(phoneValue).length;
+
+        if (unmaskedLength >= 11 || onlyMobile) {
+          return MASKS.PHONE_MOBILE;
+        }
+
+        return MASKS.PHONE_BR_FIXED;
+      }
+
+      return selectedCountry.mask;
+    }, [ phoneValue, selectedCountry.code, selectedCountry.mask, onlyMobile ]);
+
+    const isDisabled = disabled;
+
+    const filteredCountries = useMemo(() => {
+      if (!availableCountries) return COUNTRY_CODES;
+
+      return COUNTRY_CODES.filter(country =>
+        availableCountries.includes(country.code)
+      );
+    }, [ availableCountries ]);
+
+    const handleCountryChange = useCallback((countryCode: string) => {
+      const country = getCountryByCode(countryCode);
+
+      if (country) {
+        setSelectedCountry(country);
+        onCountryChange?.(country);
+
+        setPhoneValue('');
+        onChange?.('', country.code);
+      }
+    }, [ onCountryChange, onChange ]);
+
+    const handlePhoneChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = e.target.value;
+      const unmaskedValue = MASK_HELPERS.removeMask(inputValue);
+
+      let maskToUse = currentMask;
+
+      if (selectedCountry.code === '+55') {
+        if (unmaskedValue.length >= 11 || onlyMobile) {
+          maskToUse = MASKS.PHONE_MOBILE;
+        } else {
+          maskToUse = MASKS.PHONE_BR_FIXED;
+        }
+      }
+
+      const maskedValue = MASK_HELPERS.applyMask(unmaskedValue, maskToUse);
+
+      setPhoneValue(maskedValue);
+      onChange?.(maskedValue, selectedCountry.code);
+
+      if (inputRef.current) {
+        inputRef.current.value = maskedValue;
+      }
+    }, [ selectedCountry.code, onChange, currentMask, onlyMobile ]);
+
+    const containerClasses = cn(
+      CONTAINER_BASE_CLASSES,
+      CONTAINER_SIZE_CLASSES[size],
+      {
+        [ERROR_CLASSES]: error,
+        [SUCCESS_CLASSES]: success && !error,
+      },
+      className
+    );
+
+    const inputClasses = cn(
+      INPUT_BASE_CLASSES,
+      SIZE_CLASSES[size],
+      TEXT_SIZE_CLASSES[size]
+    );
+
+    const getPlaceholder = () => currentMask.replace(/_/g, '0');
+
+    return (
+      <div className={containerClasses}>
+        <Flex className="items-center pl-3 pr-2">
+          <Select.Root
+            value={selectedCountry.code}
+            onValueChange={handleCountryChange}
+            disabled={isDisabled}
+          >
+            <Select.Trigger
+              className={cn(
+                'flex items-center gap-1 bg-transparent outline-none border-0 cursor-pointer',
+                'text-sm font-medium text-gray-700',
+                'focus:outline-none',
+                {
+                  'opacity-50 cursor-not-allowed': isDisabled,
+                },
+                TEXT_SIZE_CLASSES[size]
+              )}
+              data-testid="country-select"
+            >
+              <Select.Value>
+                <span>{selectedCountry.country}</span>
+              </Select.Value>
+              <Select.Icon>
+                <ChevronDown className="size-4 text-gray-400" />
+              </Select.Icon>
+            </Select.Trigger>
+
+            <Select.Portal>
+              <Select.Content
+                position="popper"
+                sideOffset={4}
+                className={cn(
+                  'z-50 min-w-24 rounded-md border border-gray-200 bg-white shadow-lg',
+                  'max-h-60 overflow-y-auto py-2'
+                )}
+              >
+                <Select.Viewport className="p-1">
+                  {filteredCountries.map((country, index) => (
+                    <Select.Item
+                      key={`${country.code}-${index}`}
+                      value={country.code}
+                      className={cn(
+                        'relative flex cursor-pointer select-none items-center rounded-sm px-3 py-2 text-sm',
+                        'text-gray-700 outline-none font-medium',
+                        'hover:bg-gray-50 hover:text-primary focus:bg-gray-50 focus:text-primary',
+                        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
+                      )}
+                    >
+                      <Select.ItemText>{country.country}</Select.ItemText>
+                    </Select.Item>
+                  ))}
+                </Select.Viewport>
+              </Select.Content>
+            </Select.Portal>
+          </Select.Root>
+        </Flex>
+
+        <Flex className="items-center">
+          <span className={cn(TEXT_SIZE_CLASSES[size], 'font-medium text-gray-700')}>
+            {selectedCountry.code}
+          </span>
+        </Flex>
+
+        <input
+          ref={(node) => {
+            if (typeof ref === 'function') ref(node);
+            else if (ref) ref.current = node;
+
+            if (node) inputRef.current = node;
+          }}
+          type="tel"
+          disabled={isDisabled}
+          data-slot="input"
+          data-testid={testId}
+          className={inputClasses}
+          aria-invalid={error}
+          value={phoneValue}
+          onChange={handlePhoneChange}
+          placeholder={getPlaceholder()}
+          maxLength={props.maxLength ?? currentMask.length}
+          {...(props.defaultValue ? {} : props)}
+        />
+      </div>
+    );
+  }
+);
+
+InputPhoneComponent.displayName = 'InputPhone';
+
+export const InputPhone = InputPhoneComponent;

package/src/components/atoms/InputSearch/index.ts

@@ -0,0 +1,2 @@
+export type { InputSearchProps } from './input-search';
+export { InputSearch } from './input-search';