@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/InputMoney/input-money.tsx

@@ -0,0 +1,254 @@
+import { ComponentProps, forwardRef, useCallback, useMemo, useRef, useState, useEffect } from 'react';
+
+import * as Select from '@radix-ui/react-select';
+import { ChevronDown } from 'lucide-react';
+
+import {
+  CURRENCY_OPTIONS,
+  getCurrencyByCode,
+  getDefaultCurrency,
+  formatMinorUnitsToNumberString,
+  parseCurrencyToMinorUnits,
+  type CurrencyOption,
+} from '@/utils/currency';
+
+import { Flex } from '../Flex';
+import { RenderCondition } from '../RenderCondition';
+
+import { cn } from '@/utils';
+
+const INPUT_BASE_CLASSES = [
+  'h-full flex min-w-0 w-full',
+  '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 justify-between items-center 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 InputMoneyProps extends Omit<ComponentProps<'input'>, 'size' | 'type' | 'onChange' | 'value' | 'defaultValue'> {
+  error?: boolean;
+  success?: boolean;
+  size?: keyof typeof SIZE_CLASSES;
+  defaultCurrency?: string;
+  availableCurrencies?: string[];
+  onCurrencyChange?: (currency: CurrencyOption) => void;
+  onChange?: (minorUnits: number, currencyCode: string) => void;
+  minorUnits?: number;
+  defaultMinorUnits?: number;
+  'data-testid'?: string;
+}
+
+const InputMoneyComponent = forwardRef<HTMLInputElement, InputMoneyProps>(
+  ({
+    className,
+    error = false,
+    success = false,
+    size = 'md',
+    disabled,
+    defaultCurrency,
+    availableCurrencies,
+    onCurrencyChange,
+    onChange,
+    minorUnits,
+    defaultMinorUnits = 0,
+    'data-testid': testId,
+    ...props
+  }, ref) => {
+    const [ selectedCurrency, setSelectedCurrency ] = useState<CurrencyOption>(() => {
+      if (defaultCurrency) {
+        const currency = getCurrencyByCode(defaultCurrency);
+
+        if (currency) return currency;
+      }
+
+      return getDefaultCurrency();
+    });
+
+    const isControlled = typeof minorUnits === 'number';
+    const [ internalMinorUnits, setInternalMinorUnits ] = useState<number>(defaultMinorUnits);
+
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+      if (isControlled && typeof minorUnits === 'number') {
+        setInternalMinorUnits(minorUnits);
+      }
+    }, [ isControlled, minorUnits ]);
+
+    const isDisabled = disabled;
+
+    const filteredCurrencies = useMemo(() => {
+      if (!availableCurrencies) return CURRENCY_OPTIONS as CurrencyOption[];
+
+      return (CURRENCY_OPTIONS as CurrencyOption[]).filter(currency =>
+        availableCurrencies.includes(currency.code)
+      );
+    }, [ availableCurrencies ]);
+
+    const shouldShowCurrencySelect = !!filteredCurrencies?.length && filteredCurrencies.length > 1;
+    const currentMinorUnits = isControlled ? (minorUnits || 0) : internalMinorUnits;
+
+    const displayValue = useMemo(() => {
+      return formatMinorUnitsToNumberString(currentMinorUnits, selectedCurrency.locale);
+    }, [ currentMinorUnits, selectedCurrency.locale ]);
+
+    const handleCurrencyChange = useCallback((currencyCode: string) => {
+      const currency = getCurrencyByCode(currencyCode);
+
+      if (currency) {
+        setSelectedCurrency(currency);
+        onCurrencyChange?.(currency);
+        onChange?.(currentMinorUnits, currency.code);
+      }
+    }, [ onCurrencyChange, onChange, currentMinorUnits ]);
+
+    const handleMoneyChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+      const inputValue = e.target.value || '';
+      const parsedMinorUnits = parseCurrencyToMinorUnits(inputValue);
+
+      if (!isControlled) {
+        setInternalMinorUnits(parsedMinorUnits);
+      }
+
+      onChange?.(parsedMinorUnits, selectedCurrency.code);
+
+      if (inputRef.current) {
+        inputRef.current.value = formatMinorUnitsToNumberString(parsedMinorUnits, selectedCurrency.locale);
+      }
+    }, [ isControlled, onChange, selectedCurrency.code, selectedCurrency.locale ]);
+
+    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 = () => formatMinorUnitsToNumberString(0, selectedCurrency.locale);
+
+    return (
+      <div className={containerClasses}>
+        <span className={cn(TEXT_SIZE_CLASSES[size], 'font-medium text-gray-700 pl-3 pr-2')}>{selectedCurrency.symbol}</span>
+
+        <input
+          ref={(node) => {
+            if (typeof ref === 'function') ref(node);
+            else if (ref) ref.current = node;
+
+            if (node) inputRef.current = node;
+          }}
+          type="text"
+          disabled={isDisabled}
+          data-slot="input"
+          data-testid={testId}
+          className={inputClasses}
+          aria-invalid={error}
+          value={displayValue}
+          onChange={handleMoneyChange}
+          placeholder={getPlaceholder()}
+          maxLength={props.maxLength ?? 32}
+          {...props}
+        />
+
+        <RenderCondition condition={shouldShowCurrencySelect}>
+          <Flex className="items-center pl-2 pr-2">
+            <Select.Root
+              value={selectedCurrency.code}
+              onValueChange={handleCurrencyChange}
+              disabled={isDisabled}
+            >
+              <Select.Trigger
+                className={cn(
+                  'flex items-center gap-1 bg-transparent outline-none border-0 cursor-pointer',
+                  'font-medium text-gray-700',
+                  'focus:outline-none',
+                  {
+                    'opacity-50 cursor-not-allowed': isDisabled,
+                  },
+                  TEXT_SIZE_CLASSES[size]
+                )}
+                data-testid="currency-select"
+              >
+                <Select.Value>
+                  <span>{selectedCurrency.code}</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">
+                    {filteredCurrencies.map((currency, index) => (
+                      <Select.Item
+                        key={`${currency.code}-${index}`}
+                        value={currency.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>{currency.code}</Select.ItemText>
+                      </Select.Item>
+                    ))}
+                  </Select.Viewport>
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </Flex>
+        </RenderCondition>
+      </div>
+    );
+  }
+);
+
+InputMoneyComponent.displayName = 'InputMoney';
+
+export const InputMoney = InputMoneyComponent;

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

@@ -0,0 +1,2 @@
+export type { InputPhoneProps, PhoneValue } from './input-phone';
+export { InputPhone } from './input-phone';

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

@@ -0,0 +1,447 @@
+import { useState } from 'react';
+
+import { InputPhone } from './input-phone';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CountryCode } from '@/utils';
+
+const meta: Meta<typeof InputPhone> = {
+  title: 'Components/Data Entry/InputPhone',
+  component: InputPhone,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A phone input component with international country code selector. Features a unified container with a discrete HTML select for country selection, country code display, and a masked input for phone numbers. The placeholder automatically shows the full format including country code.',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: [ 'sm', 'md', 'lg' ],
+      description: 'Size of the input field',
+    },
+    error: {
+      control: { type: 'boolean' },
+      description: 'Error state styling',
+    },
+    success: {
+      control: { type: 'boolean' },
+      description: 'Success state styling',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disabled state',
+    },
+    defaultCountry: {
+      control: { type: 'select' },
+      options: [ '+55', '+1', '+44', '+33', '+49' ],
+      description: 'Default country code',
+    },
+    availableCountries: {
+      control: { type: 'object' },
+      description: 'Array of available country codes',
+    },
+    placeholder: {
+      control: { type: 'text' },
+      description: 'Placeholder text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const InteractiveExample = () => {
+  const [ phone, setPhone ] = useState('');
+  const [ country, setCountry ] = useState('+55');
+  const [ hasError, setHasError ] = useState(false);
+
+  const handlePhoneChange = (value: string, countryCode: string) => {
+    setPhone(value);
+    setCountry(countryCode);
+    setHasError(false);
+  };
+
+  const handleCountryChange = (selectedCountry: CountryCode) => {
+    setCountry(selectedCountry.code);
+    setPhone('');
+    setHasError(false);
+  };
+
+  const validatePhone = () => {
+    const isValid = phone.length > 0;
+    setHasError(!isValid);
+    return isValid;
+  };
+
+  return (
+    <div className="w-80 space-y-4 p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-4">Phone Number Form</h3>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Phone Number *
+        </label>
+        <InputPhone
+          value={phone}
+          onChange={handlePhoneChange}
+          onCountryChange={handleCountryChange}
+          error={hasError}
+        />
+        {hasError && (
+          <p className="text-sm text-red-600 mt-1">Please enter a valid phone number</p>
+        )}
+      </div>
+
+      <div className="text-sm text-gray-600">
+        <p>Selected country: {country}</p>
+        <p>Phone number: {phone || 'Not entered'}</p>
+      </div>
+
+      <button
+        type="button"
+        onClick={validatePhone}
+        className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors"
+      >
+        Validate Phone
+      </button>
+    </div>
+  );
+};
+
+const FormWithValidation = () => {
+  const [ formData, setFormData ] = useState({
+    name: '',
+    phone: '',
+    countryCode: '+55',
+  });
+  const [ errors, setErrors ] = useState<Record<string, string>>({});
+
+  const handlePhoneChange = (phone: string, countryCode: string) => {
+    setFormData(prev => ({
+      ...prev,
+      phone,
+      countryCode,
+    }));
+
+    if (errors.phone) {
+      setErrors(prev => ({ ...prev, phone: '' }));
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'Name is required';
+    }
+
+    if (!formData.phone.trim()) {
+      newErrors.phone = 'Phone number is required';
+    } else if (formData.phone.length < 10) {
+      newErrors.phone = 'Please enter a complete phone number';
+    }
+
+    setErrors(newErrors);
+
+    if (Object.keys(newErrors).length === 0) {
+      alert(`Form submitted!\nName: ${formData.name}\nPhone: ${formData.countryCode} ${formData.phone}`);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="w-80 space-y-4 p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-4">Contact Form</h3>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Name *
+        </label>
+        <input
+          type="text"
+          value={formData.name}
+          onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+          className="w-full border border-gray-300 rounded-2xl px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          placeholder="Enter your name"
+        />
+        {errors.name && (
+          <p className="text-sm text-red-600 mt-1">{errors.name}</p>
+        )}
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Phone Number *
+        </label>
+        <InputPhone
+          value={formData.phone}
+          onChange={handlePhoneChange}
+          error={!!errors.phone}
+        />
+        {errors.phone && (
+          <p className="text-sm text-red-600 mt-1">{errors.phone}</p>
+        )}
+      </div>
+
+      <button
+        type="submit"
+        className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors"
+      >
+        Submit Form
+      </button>
+    </form>
+  );
+};
+
+export const AllSizesBasic: Story = {
+  name: 'All Sizes Showcase',
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Small</h4>
+        <div className="space-y-2">
+          <InputPhone size="sm" />
+          <InputPhone size="sm" defaultCountry="+1" />
+          <InputPhone size="sm" defaultCountry="+44" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Medium</h4>
+        <div className="space-y-2">
+          <InputPhone size="md" />
+          <InputPhone size="md" defaultCountry="+1" />
+          <InputPhone size="md" defaultCountry="+44" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Large</h4>
+        <div className="space-y-2">
+          <InputPhone size="lg" />
+          <InputPhone size="lg" defaultCountry="+1" />
+          <InputPhone size="lg" defaultCountry="+44" />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparison of all available sizes with different country codes.',
+      },
+    },
+  },
+};
+
+export const AllStatesBasic: Story = {
+  name: 'All States Showcase',
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Normal</h4>
+        <InputPhone placeholder="Normal state" defaultValue="(11) 9 8765-4321" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Error</h4>
+        <InputPhone error placeholder="Error state" defaultValue="(11) 9 8765-4321" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Success</h4>
+        <InputPhone success placeholder="Success state" defaultValue="(11) 9 8765-4321" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Disabled</h4>
+        <InputPhone disabled placeholder="Disabled state" defaultValue="(11) 9 8765-4321" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Showcase of all available states and their visual feedback.',
+      },
+    },
+  },
+};
+
+export const CountryCodesShowcase: Story = {
+  name: 'Country Codes Showcase',
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Brazil</label>
+        <InputPhone defaultCountry="+55" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">United States</label>
+        <InputPhone defaultCountry="+1" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">United Kingdom</label>
+        <InputPhone defaultCountry="+44" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">France</label>
+        <InputPhone defaultCountry="+33" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Germany</label>
+        <InputPhone defaultCountry="+49" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different country codes with their respective phone formats and masks.',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Digite seu telefone',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Digite seu telefone',
+    defaultValue: '(11) 9 8765-4321',
+  },
+};
+
+export const FormWithValidationStory: Story = {
+  name: 'Form with Validation',
+  render: () => <FormWithValidation />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete form example with validation using the InputPhone component.',
+      },
+    },
+  },
+};
+
+export const Interactive: Story = {
+  name: 'Interactive Form Example',
+  render: () => <InteractiveExample />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete form example showing different input types, states, and validation.',
+      },
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    placeholder: 'Digite seu telefone',
+  },
+};
+
+export const LimitedCountries: Story = {
+  name: 'Limited Countries',
+  args: {
+    availableCountries: [ '+55', '+1', '+44', '+33' ],
+    placeholder: 'Digite seu telefone',
+  },
+};
+
+export const LimitedCountriesShowcase: Story = {
+  name: 'Limited Countries Showcase',
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Americas Only</label>
+        <InputPhone
+          availableCountries={[ '+55', '+1', '+52', '+54', '+56' ]}
+
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Europe Only</label>
+        <InputPhone
+          availableCountries={[ '+44', '+33', '+49', '+39', '+34' ]}
+
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Asia Only</label>
+        <InputPhone
+          availableCountries={[ '+81', '+82', '+86', '+91' ]}
+
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Examples of limiting available countries by region.',
+      },
+    },
+  },
+};
+
+export const Loading: Story = {
+  name: 'Loading State',
+  args: {
+    loading: true,
+    placeholder: 'Processing...',
+    defaultValue: '(11) 9 8765-4321',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    placeholder: 'Digite seu telefone',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    placeholder: 'Digite seu telefone',
+  },
+};
+
+export const WithDefaultCountry: Story = {
+  name: 'With Default Country (US)',
+  args: {
+    defaultCountry: '+1',
+    placeholder: 'Enter your phone number',
+  },
+};
+
+export const WithError: Story = {
+  name: 'Error State',
+  args: {
+    error: true,
+    placeholder: 'Digite seu telefone',
+    defaultValue: '(11) 9 8765-4321',
+  },
+};
+
+export const WithSuccess: Story = {
+  name: 'Success State',
+  args: {
+    success: true,
+    placeholder: 'Digite seu telefone',
+    defaultValue: '(11) 9 8765-4321',
+  },
+};