@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/InputWithButton/input-with-button.stories.tsx

@@ -0,0 +1,503 @@
+import { useState } from 'react';
+
+import { InputWithButton } from './input-with-button';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PlusCircle } from '@/components';
+import { MASKS } from '@/utils';
+
+const meta: Meta<typeof InputWithButton> = {
+  title: 'Components/Data Entry/InputWithButton',
+  component: InputWithButton,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A flexible input component with an integrated button, supporting masks, various states, sizes, and custom actions. Perfect for search inputs, form submissions, and interactive data entry.',
+      },
+    },
+  },
+  argTypes: {
+    'buttonText': {
+      control: { type: 'text' },
+      description: 'Text displayed on the button',
+    },
+    'onButtonClick': {
+      action: 'button clicked',
+      description: 'Callback triggered when the button is clicked',
+    },
+    'buttonLoading': {
+      control: { type: 'boolean' },
+      description: 'Whether the button is in a loading state',
+    },
+    'buttonDisabled': {
+      control: { type: 'boolean' },
+      description: 'Whether the button is disabled',
+    },
+    'error': {
+      control: { type: 'text' },
+      description: 'Error message to display below the input field',
+    },
+    'success': {
+      control: { type: 'boolean' },
+      description: 'Success state',
+    },
+    'size': {
+      control: { type: 'select' },
+      options: [ 'sm', 'md', 'lg' ],
+      description: 'Size of the input and button',
+    },
+    'mask': {
+      control: { type: 'text' },
+      description: 'Input mask pattern (use MASKS from utils)',
+    },
+    'loading': {
+      control: { type: 'boolean' },
+      description: 'Whether the input is in a loading state',
+    },
+    'disabled': {
+      control: { type: 'boolean' },
+      description: 'Disabled state',
+    },
+    'placeholder': {
+      control: { type: 'text' },
+      description: 'Placeholder text',
+    },
+    'data-testid': {
+      control: { type: 'text' },
+      description: 'Test identifier',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const SearchExample = () => {
+  const [ searchTerm, setSearchTerm ] = useState('');
+  const [ isSearching, setIsSearching ] = useState(false);
+
+  const handleSearch = () => {
+    if (!searchTerm.trim()) return;
+
+    setIsSearching(true);
+    setTimeout(() => {
+      setIsSearching(false);
+      alert(`Searching for: ${searchTerm}`);
+    }, 2000);
+  };
+
+  return (
+    <div className="w-80 space-y-4 p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-4">Search Example</h3>
+
+      <InputWithButton
+        placeholder="Enter product name..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        buttonText="Search"
+        onButtonClick={handleSearch}
+        buttonLoading={isSearching}
+      />
+
+      <div className="text-sm text-gray-600">
+        <p>Current search term: {searchTerm || 'None'}</p>
+      </div>
+    </div>
+  );
+};
+
+const FormSubmissionExample = () => {
+  const [ email, setEmail ] = useState('');
+  const [ isSubmitting, setIsSubmitting ] = useState(false);
+  const [ hasError, setHasError ] = useState(false);
+
+  const handleSubmit = () => {
+    if (!email.includes('@')) {
+      setHasError(true);
+      return;
+    }
+
+    setIsSubmitting(true);
+    setHasError(false);
+
+    setTimeout(() => {
+      setIsSubmitting(false);
+      alert(`Newsletter subscription successful for: ${email}`);
+      setEmail('');
+    }, 2000);
+  };
+
+  return (
+    <div className="w-80 space-y-4 p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-4">Newsletter Subscription</h3>
+
+      <InputWithButton
+        placeholder="your@email.com"
+        value={email}
+        onChange={(e) => {
+          setEmail(e.target.value);
+          setHasError(false);
+        }}
+        buttonText="Subscribe"
+        onButtonClick={handleSubmit}
+        buttonLoading={isSubmitting}
+        error={hasError ? 'Please enter a valid email address' : undefined}
+      />
+    </div>
+  );
+};
+
+const ValidationExample = () => {
+  const [ cpf, setCpf ] = useState('');
+  const [ isChecking, setIsChecking ] = useState(false);
+  const [ isValid, setIsValid ] = useState<boolean | null>(null);
+
+  const handleValidate = () => {
+    if (!cpf) return;
+
+    setIsChecking(true);
+    setTimeout(() => {
+      setIsChecking(false);
+      const isValidCPF = cpf.replace(/\D/g, '').length === 11;
+      setIsValid(isValidCPF);
+    }, 1500);
+  };
+
+  return (
+    <div className="w-80 space-y-4 p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-4">CPF Validation</h3>
+
+      <InputWithButton
+        mask={MASKS.CPF}
+        placeholder="000.000.000-00"
+        value={cpf}
+        onChange={(e) => {
+          setCpf(e.target.value);
+          setIsValid(null);
+        }}
+        buttonText="Validate"
+        onButtonClick={handleValidate}
+        buttonLoading={isChecking}
+        success={isValid === true}
+        error={isValid === false ? 'Invalid CPF number' : undefined}
+      />
+    </div>
+  );
+};
+
+export const AllSizes: 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">
+          <InputWithButton size="sm" placeholder="Small input" buttonText="Go" />
+          <InputWithButton size="sm" placeholder="Search..." buttonText="Search" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Medium</h4>
+        <div className="space-y-2">
+          <InputWithButton size="md" placeholder="Medium input" buttonText="Submit" />
+          <InputWithButton size="md" placeholder="Enter URL..." buttonText="Visit" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Large</h4>
+        <div className="space-y-2">
+          <InputWithButton size="lg" placeholder="Large input" buttonText="Send" />
+          <InputWithButton size="lg" placeholder="Enter code..." buttonText="Verify" />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparison of all available sizes with different button texts.',
+      },
+    },
+  },
+};
+
+export const AllStates: 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>
+        <InputWithButton placeholder="Normal state" buttonText="Action" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Error</h4>
+        <InputWithButton
+          error="Invalid input"
+          placeholder="Error state"
+          buttonText="Try Again"
+        />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Success</h4>
+        <InputWithButton
+          success
+          placeholder="Success state"
+          buttonText="Success"
+        />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Loading</h4>
+        <InputWithButton
+          loading
+          placeholder="Loading state"
+          buttonText="Processing"
+        />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Button Loading</h4>
+        <InputWithButton
+          placeholder="Button loading"
+          buttonText="Submit"
+          buttonLoading
+        />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Disabled</h4>
+        <InputWithButton
+          disabled
+          placeholder="Disabled state"
+          buttonText="Disabled"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Showcase of all available states and their visual feedback.',
+      },
+    },
+  },
+};
+
+export const ButtonDisabled: Story = {
+  name: 'Button Disabled',
+  args: {
+    placeholder: 'Enter text...',
+    buttonText: 'Action',
+    buttonDisabled: true,
+  },
+};
+
+export const ButtonLoading: Story = {
+  name: 'Button Loading',
+  args: {
+    placeholder: 'Enter data...',
+    buttonText: 'Process',
+    buttonLoading: true,
+  },
+};
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+    buttonText: 'Action',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled input...',
+    buttonText: 'Action',
+    disabled: true,
+  },
+};
+
+export const FormSubmissionStory: Story = {
+  name: 'Form Submission Example',
+  render: () => <FormSubmissionExample />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A newsletter subscription form with validation and submission states.',
+      },
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    placeholder: 'Large input...',
+    buttonText: 'Send',
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    placeholder: 'Processing...',
+    buttonText: 'Submit',
+    loading: true,
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    placeholder: 'Medium input...',
+    buttonText: 'Submit',
+  },
+};
+
+export const SearchExampleStory: Story = {
+  name: 'Search Example',
+  render: () => <SearchExample />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete search example with loading states and user feedback.',
+      },
+    },
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    placeholder: 'Small input...',
+    buttonText: 'Go',
+  },
+};
+
+export const ValidationStory: Story = {
+  name: 'Validation Example',
+  render: () => <ValidationExample />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'CPF validation example with real-time feedback and success/error states.',
+      },
+    },
+  },
+};
+
+export const WithButtonIcon: Story = {
+  name: 'With Button Icon',
+  args: {
+    placeholder: 'Enter text...',
+    buttonText: 'Action',
+    buttonIcon: <PlusCircle />,
+  },
+};
+
+export const WithCEPMask: Story = {
+  name: 'With CEP Mask',
+  args: {
+    mask: MASKS.CEP,
+    placeholder: '00000-000',
+    buttonText: 'Find',
+  },
+};
+
+export const WithCPFMask: Story = {
+  name: 'With CPF Mask',
+  args: {
+    mask: MASKS.CPF,
+    placeholder: '000.000.000-00',
+    buttonText: 'Validate',
+  },
+};
+
+export const WithCreditCardMask: Story = {
+  name: 'With Credit Card Mask',
+  args: {
+    mask: MASKS.CREDIT_CARD,
+    placeholder: '0000 0000 0000 0000',
+    buttonText: 'Pay',
+  },
+};
+
+export const WithError: Story = {
+  name: 'With Error',
+  args: {
+    placeholder: 'Enter username',
+    buttonText: 'Check',
+    error: 'Username is already taken',
+  },
+};
+
+export const WithMasks: Story = {
+  name: 'With Masks Showcase',
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">CPF</label>
+        <InputWithButton
+          mask={MASKS.CPF}
+          placeholder="000.000.000-00"
+          buttonText="Validate"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
+        <InputWithButton
+          mask={MASKS.PHONE_MOBILE}
+          placeholder="(11) 9 9999-9999"
+          buttonText="Call"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">CEP</label>
+        <InputWithButton
+          mask={MASKS.CEP}
+          placeholder="00000-000"
+          buttonText="Find"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Credit Card</label>
+        <InputWithButton
+          mask={MASKS.CREDIT_CARD}
+          placeholder="0000 0000 0000 0000"
+          buttonText="Pay"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Input with button using common Brazilian masks.',
+      },
+    },
+  },
+};
+
+export const WithPhoneMask: Story = {
+  name: 'With Phone Mask',
+  args: {
+    mask: MASKS.PHONE_MOBILE,
+    placeholder: '(11) 9 9999-9999',
+    buttonText: 'Call',
+  },
+};
+
+export const WithSuccess: Story = {
+  name: 'With Success',
+  args: {
+    placeholder: 'Enter 6-digit code',
+    buttonText: 'Verify',
+    success: true,
+  },
+};

package/src/components/atoms/InputWithButton/input-with-button.test.tsx

@@ -0,0 +1,128 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+import { InputWithButton } from './input-with-button';
+
+describe('<InputWithButton />', () => {
+  it('renders with default props', () => {
+    render(<InputWithButton data-testid="input-with-button" />);
+
+    const input = screen.getByTestId('input-with-button');
+    const button = screen.getByRole('button');
+
+    expect(input).toBeInTheDocument();
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Ação');
+  });
+
+  it('renders with custom button text', () => {
+    render(<InputWithButton buttonText="Search" data-testid="input-with-button" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toHaveTextContent('Search');
+  });
+
+  it('renders with error message', () => {
+    render(<InputWithButton error="Invalid email" data-testid="input-with-button" />);
+
+    const errorMessage = screen.getByText('Invalid email');
+    expect(errorMessage).toBeInTheDocument();
+  });
+
+  it('calls onButtonClick when button is clicked', () => {
+    const handleClick = vi.fn();
+    render(<InputWithButton onButtonClick={handleClick} data-testid="input-with-button" />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles input change', () => {
+    const handleChange = vi.fn();
+    render(<InputWithButton onChange={handleChange} data-testid="input-with-button" />);
+
+    const input = screen.getByTestId('input-with-button');
+    fireEvent.change(input, { target: { value: 'test' } });
+
+    expect(handleChange).toHaveBeenCalled();
+  });
+
+  it('applies disabled state to input', () => {
+    render(<InputWithButton disabled data-testid="input-with-button" />);
+
+    const input = screen.getByTestId('input-with-button');
+    expect(input).toBeDisabled();
+  });
+
+  it('applies disabled state to button', () => {
+    render(<InputWithButton buttonDisabled data-testid="input-with-button" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+  });
+
+  it('shows loading state on button', () => {
+    render(<InputWithButton buttonLoading data-testid="input-with-button" />);
+
+    const button = screen.getByRole('button');
+    expect(button).toBeDisabled();
+
+    const spinner = button.querySelector('.animate-spin');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('applies different sizes', () => {
+    const { rerender } = render(<InputWithButton size="sm" data-testid="input-with-button" />);
+
+    let input = screen.getByTestId('input-with-button');
+    expect(input).toHaveClass('px-3', 'text-sm');
+
+    rerender(<InputWithButton size="lg" data-testid="input-with-button" />);
+    input = screen.getByTestId('input-with-button');
+    expect(input).toHaveClass('px-4', 'text-base');
+  });
+
+  it('applies success state', () => {
+    render(<InputWithButton success data-testid="input-with-button" />);
+
+    const input = screen.getByTestId('input-with-button');
+    expect(input).toHaveClass('border-green-500');
+  });
+
+  it('applies error state', () => {
+    render(<InputWithButton error="Error message" data-testid="input-with-button" />);
+
+    const input = screen.getByTestId('input-with-button');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('renders with custom placeholder', () => {
+    render(<InputWithButton placeholder="Enter text here" data-testid="input-with-button" />);
+
+    const input = screen.getByTestId('input-with-button');
+    expect(input).toHaveAttribute('placeholder', 'Enter text here');
+  });
+
+  it('forwards ref to input element', () => {
+    const ref = vi.fn();
+    render(<InputWithButton ref={ref} data-testid="input-with-button" />);
+
+    expect(ref).toHaveBeenCalled();
+  });
+
+  it('renders with custom test id', () => {
+    render(<InputWithButton data-testid="custom-test-id" />);
+
+    const input = screen.getByTestId('custom-test-id');
+    expect(input).toBeInTheDocument();
+  });
+
+  it('does not render error when not provided', () => {
+    render(<InputWithButton data-testid="input-with-button" />);
+
+    const error = screen.queryByText('Error message');
+    expect(error).not.toBeInTheDocument();
+  });
+});