@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/Input/input.test.tsx

@@ -0,0 +1,86 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect } from 'vitest';
+
+import { Input } from './input';
+
+describe('<Input />', () => {
+  it('should render a text input by default', () => {
+    render(<Input aria-label="Username" />);
+    const input = screen.getByRole('textbox', { name: /username/i });
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'text');
+  });
+
+  it('should render a password input with toggle button', () => {
+    render(<Input type="password" placeholder="Password" />);
+    const input = screen.getByPlaceholderText(/password/i);
+    const toggleButton = screen.getByRole('button', {
+      name: /show password/i,
+    });
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'password');
+    expect(toggleButton).toBeInTheDocument();
+  });
+
+  it('should toggle visibility when clicking the show/hide button', async () => {
+    const user = userEvent.setup();
+    render(<Input type="password" placeholder="Password" />);
+
+    const input = screen.getByPlaceholderText(/password/i);
+    const toggleButton = screen.getByRole('button', {
+      name: /show password/i,
+    });
+
+    // Click to show password
+    await user.click(toggleButton);
+    expect(input).toHaveAttribute('type', 'text');
+
+    // Button label should now be "Hide password"
+    expect(toggleButton).toHaveAccessibleName('Hide password');
+
+    // Click to hide again
+    await user.click(toggleButton);
+    expect(input).toHaveAttribute('type', 'password');
+  });
+
+  it('should not render the toggle button for non-password inputs', () => {
+    render(<Input type="email" aria-label="Email" />);
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('should support focus and typing', async () => {
+    const user = userEvent.setup();
+    render(<Input aria-label="Email" />);
+    const input = screen.getByRole('textbox', { name: /email/i });
+
+    await user.click(input);
+    expect(input).toHaveFocus();
+
+    await user.type(input, 'test@example.com');
+    expect(input).toHaveValue('test@example.com');
+  });
+
+  it('should be disabled when "disabled" prop is set', async () => {
+    const user = userEvent.setup();
+    render(<Input aria-label="Disabled input" disabled />);
+    const input = screen.getByLabelText(/disabled input/i);
+
+    expect(input).toBeDisabled();
+
+    await user.click(input);
+    expect(input).not.toHaveFocus();
+  });
+
+  it('should have aria-invalid attribute when invalid', () => {
+    render(<Input aria-label="Email" aria-invalid="true" />);
+    const input = screen.getByLabelText(/email/i);
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('should match snapshot', () => {
+    const { container } = render(<Input type="password" aria-label="Password" />);
+    expect(container).toMatchSnapshot();
+  });
+});

package/src/components/atoms/Input/input.tsx

@@ -0,0 +1,161 @@
+import { ComponentProps, forwardRef, useState, useCallback, useMemo } from 'react';
+
+import { useMask } from '@react-input/mask';
+import { Eye, EyeOff, Loader2 } from 'lucide-react';
+
+import { RenderCondition } from '../RenderCondition';
+
+import { cn } from '@/utils';
+
+const INPUT_BASE_CLASSES = [
+  'w-full flex',
+  'placeholder:text-gray-500 leading-10! placeholder:leading-10!',
+  'border border-gray-300 rounded-2xl bg-white',
+  'shadow-xs transition-[color,box-shadow] outline-none',
+  'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+].join(' ');
+
+const SIZE_CLASSES = {
+  sm: 'px-3 text-sm h-10',
+  md: 'px-[14px] text-base h-10',
+  lg: 'px-[14px] text-base h-11',
+} as const;
+
+const ICON_SPACING = {
+  sm: 'pr-8',
+  md: 'pr-10',
+  lg: 'pr-12',
+} as const;
+
+const ICON_SIZES = {
+  sm: 14,
+  md: 16,
+  lg: 20,
+} as const;
+
+const FOCUS_CLASSES = 'focus-visible-primary';
+const ERROR_CLASSES = 'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-destructive ring-destructive/20';
+const SUCCESS_CLASSES = 'border-green-500 ring-green-500/20';
+
+export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
+  mask?: string;
+  error?: boolean;
+  success?: boolean;
+  loading?: boolean;
+  size?: keyof typeof SIZE_CLASSES;
+  'data-testid'?: string;
+}
+
+const InputComponent = forwardRef<HTMLInputElement, InputProps>(
+  ({
+    className,
+    type = 'text',
+    mask,
+    error = false,
+    success = false,
+    loading = false,
+    size = 'md',
+    disabled,
+    maxLength,
+    'data-testid': testId,
+    ...props
+  }, ref) => {
+    const [ showPassword, setShowPassword ] = useState<boolean>(false);
+
+    const maskedInputRef = useMask({
+      mask: mask || '',
+      replacement: { _: /\d/ },
+    });
+
+    const isPasswordField = type === 'password';
+    const isDisabled = disabled || loading;
+    const hasEndIcon = isPasswordField || loading;
+
+    const inputType = useMemo(() => {
+      if (isPasswordField) {
+        return showPassword ? 'text' : 'password';
+      }
+
+      return type;
+    }, [ isPasswordField, showPassword, type ]);
+
+    const togglePassword = useCallback(() => {
+      setShowPassword(prev => !prev);
+    }, []);
+
+    const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+      if (isPasswordField && (event.key === 'Enter' || event.key === ' ')) {
+        event.preventDefault();
+        togglePassword();
+      }
+    }, [ isPasswordField, togglePassword ]);
+
+    const inputClasses = cn(
+      INPUT_BASE_CLASSES,
+      SIZE_CLASSES[size],
+      FOCUS_CLASSES,
+      {
+        [ERROR_CLASSES]: error,
+        [SUCCESS_CLASSES]: success && !error,
+        [ICON_SPACING[size]]: hasEndIcon,
+      },
+      className
+    );
+
+    const iconSize = ICON_SIZES[size];
+    const inputRef = mask ? maskedInputRef : ref;
+
+    return (
+      <div className="relative w-full">
+        <input
+          ref={inputRef}
+          type={inputType}
+          disabled={isDisabled}
+          data-slot="input"
+          data-testid={testId}
+          className={inputClasses}
+          aria-invalid={error}
+          maxLength={maxLength ?? 500}
+          {...props}
+        />
+
+        <RenderCondition condition={hasEndIcon}>
+          <div className="absolute right-2 top-1/2 -translate-y-1/2 flex items-center">
+            <RenderCondition condition={loading}>
+              <Loader2
+                size={iconSize}
+                className="animate-spin text-muted-foreground mr-1"
+              />
+            </RenderCondition>
+
+            <RenderCondition condition={isPasswordField && !loading}>
+              <button
+                type="button"
+                onClick={togglePassword}
+                onKeyDown={handleKeyDown}
+                disabled={isDisabled}
+                aria-label={showPassword ? 'Hide password' : 'Show password'}
+                className={cn(
+                  'cursor-pointer text-muted-foreground hover:text-foreground transition-colors',
+                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded-sm',
+                  { 'opacity-50 cursor-not-allowed': isDisabled }
+                )}
+                tabIndex={isDisabled ? -1 : 0}
+              >
+                {showPassword ? (
+                  <EyeOff size={iconSize} />
+                ) : (
+                  <Eye size={iconSize} />
+                )}
+              </button>
+            </RenderCondition>
+          </div>
+        </RenderCondition>
+      </div>
+    );
+  }
+);
+
+InputComponent.displayName = 'Input';
+
+export const Input = InputComponent;

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

@@ -0,0 +1,2 @@
+export * from './input-money';
+

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

@@ -0,0 +1,240 @@
+import { useState } from 'react';
+
+import { InputMoney } from './input-money';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InputMoney> = {
+  title: 'Components/Data Entry/InputMoney',
+  component: InputMoney,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'A monetary input with currency selector. Displays a currency select (e.g., BRL, USD) and a text field that formats values as you type. Emits and accepts values in minor units (cents).',
+      },
+    },
+  },
+  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',
+    },
+    defaultCurrency: {
+      control: { type: 'select' },
+      options: [ 'BRL', 'USD', 'EUR', 'GBP' ],
+      description: 'Default currency code',
+    },
+    availableCurrencies: {
+      control: { type: 'object' },
+      description: 'Array of available currency codes',
+    },
+    placeholder: {
+      control: { type: 'text' },
+      description: 'Placeholder text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const InteractiveExample = () => {
+  const [ cents, setCents ] = useState(12345);
+  const [ currencyCode, setCurrencyCode ] = useState('BRL');
+  const [ hasError, setHasError ] = useState(false);
+
+  const handleMoneyChange = (minorUnits: number, code: string) => {
+    setCents(minorUnits);
+    setCurrencyCode(code);
+    setHasError(false);
+  };
+
+  const handleCurrencyChange = () => {
+    setHasError(false);
+  };
+
+  const validate = () => {
+    const isValid = cents > 0;
+    setHasError(!isValid);
+    return isValid;
+  };
+
+  return (
+    <div className="w-96 space-y-4 p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-4">Amount Form</h3>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Amount *
+        </label>
+        <InputMoney
+          minorUnits={cents}
+          onChange={handleMoneyChange}
+          onCurrencyChange={handleCurrencyChange}
+          error={hasError}
+          defaultCurrency={currencyCode}
+        />
+        {hasError && (
+          <p className="text-sm text-red-600 mt-1">Please enter a value greater than 0</p>
+        )}
+      </div>
+
+      <div className="text-sm text-gray-600">
+        <p>Selected currency: {currencyCode}</p>
+        <p>Amount (minor units): {cents}</p>
+      </div>
+
+      <button
+        type="button"
+        onClick={validate}
+        className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors"
+      >
+        Validate
+      </button>
+    </div>
+  );
+};
+
+export const AllSizesBasic: Story = {
+  name: 'All Sizes Showcase',
+  render: () => (
+    <div className="space-y-6 w-96">
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Small</h4>
+        <div className="space-y-2">
+          <InputMoney size="sm" />
+          <InputMoney size="sm" defaultCurrency="USD" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Medium</h4>
+        <div className="space-y-2">
+          <InputMoney size="md" />
+          <InputMoney size="md" defaultCurrency="EUR" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Large</h4>
+        <div className="space-y-2">
+          <InputMoney size="lg" />
+          <InputMoney size="lg" defaultCurrency="GBP" />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparison of all available sizes with different currencies.',
+      },
+    },
+  },
+};
+
+export const AllStatesBasic: Story = {
+  name: 'All States Showcase',
+  render: () => (
+    <div className="space-y-4 w-96">
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Normal</h4>
+        <InputMoney placeholder="Normal state" defaultMinorUnits={12345} />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Error</h4>
+        <InputMoney error placeholder="Error state" defaultMinorUnits={12345} />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Success</h4>
+        <InputMoney success placeholder="Success state" defaultMinorUnits={12345} />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Disabled</h4>
+        <InputMoney disabled placeholder="Disabled state" defaultMinorUnits={12345} />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Showcase of all available states and their visual feedback.',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Digite um valor',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Digite um valor',
+    defaultMinorUnits: 98765,
+  },
+};
+
+export const Interactive: Story = {
+  name: 'Interactive Form Example',
+  render: () => <InteractiveExample />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Interactive example showing value in minor units and currency selection.',
+      },
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    placeholder: 'Digite um valor',
+  },
+};
+
+export const LimitedCurrencies: Story = {
+  name: 'Limited Currencies',
+  args: {
+    availableCurrencies: [ 'BRL', 'USD' ],
+    placeholder: 'Digite um valor',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    placeholder: 'Digite um valor',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    placeholder: 'Digite um valor',
+  },
+};
+

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

@@ -0,0 +1,98 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+
+import { InputMoney } from './input-money';
+
+describe('<InputMoney />', () => {
+  it('renders with default currency symbol and without select', () => {
+    render(<InputMoney data-testid="money-input" />);
+
+    expect(screen.queryByTestId('currency-select')).not.toBeInTheDocument();
+    expect(screen.getByText('R$')).toBeInTheDocument();
+  });
+
+  it('falls back to BRL when default currency is unavailable', () => {
+    render(<InputMoney defaultCurrency="USD" data-testid="money-input" />);
+
+    expect(screen.queryByTestId('currency-select')).not.toBeInTheDocument();
+    expect(screen.getByText('R$')).toBeInTheDocument();
+  });
+
+  it('hides currency select when only one currency is available', () => {
+    render(<InputMoney availableCurrencies={[ 'BRL' ]} data-testid="money-input" />);
+
+    expect(screen.queryByTestId('currency-select')).not.toBeInTheDocument();
+    expect(screen.getByText('R$')).toBeInTheDocument();
+  });
+
+  it('calls onChange with minor units when amount changes', async () => {
+    const handleChange = vi.fn();
+    render(
+      <InputMoney
+        onChange={handleChange}
+        data-testid="money-input"
+      />
+    );
+
+    const input = screen.getByTestId('money-input');
+    await userEvent.clear(input);
+    await userEvent.type(input, '123456');
+
+    expect(handleChange).toHaveBeenLastCalledWith(123456, 'BRL');
+  });
+
+  it('applies error styling when error prop is true', () => {
+    render(<InputMoney error data-testid="money-input" />);
+
+    const input = screen.getByTestId('money-input');
+    const container = input.closest('div');
+    expect(container).toHaveClass('border-error-500');
+  });
+
+  it('applies success styling when success prop is true', () => {
+    render(<InputMoney success data-testid="money-input" />);
+
+    const input = screen.getByTestId('money-input');
+    const container = input.closest('div');
+    expect(container).toHaveClass('border-green-500');
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<InputMoney disabled data-testid="money-input" />);
+
+    const input = screen.getByTestId('money-input');
+
+    expect(input).toBeDisabled();
+    expect(screen.queryByTestId('currency-select')).not.toBeInTheDocument();
+  });
+
+  it('applies different sizes correctly', () => {
+    const { rerender } = render(<InputMoney size="sm" data-testid="money-input" />);
+
+    let input = screen.getByTestId('money-input');
+    expect(input).toHaveClass('pl-2', 'pr-3', 'text-sm');
+
+    rerender(<InputMoney size="lg" data-testid="money-input" />);
+
+    input = screen.getByTestId('money-input');
+    expect(input).toHaveClass('pl-2', 'pr-4', 'text-base');
+  });
+
+  it('has proper container structure', () => {
+    render(<InputMoney data-testid="money-input" />);
+
+    const input = screen.getByTestId('money-input');
+    const container = input.closest('div');
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveClass('border', 'border-gray-300', 'flex', 'w-full');
+  });
+
+  it('does not render select trigger when only BRL is available', () => {
+    render(<InputMoney data-testid="money-input" />);
+
+    expect(screen.queryByTestId('currency-select')).not.toBeInTheDocument();
+  });
+});
+