@brcarddev/frontend-commons 1.0.2

package/src/components/atoms/InputSearch/input-search.stories.tsx

@@ -0,0 +1,360 @@
+import { useState } from 'react';
+
+import { InputSearch } from './input-search';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof InputSearch> = {
+  title: 'Components/Data Entry/InputSearch',
+  component: InputSearch,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A search input component with a search icon on the left and an Enter button on the right. Supports keyboard navigation and click interactions for search functionality.',
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: [ 'sm', 'md', 'lg' ],
+      description: 'Size of the input field',
+    },
+    rounded: {
+      control: { type: 'select' },
+      options: [ 'md', 'lg', '2xl' ],
+      description: 'Container rounded state styling',
+    },
+    error: {
+      control: { type: 'boolean' },
+      description: 'Error state styling',
+    },
+    success: {
+      control: { type: 'boolean' },
+      description: 'Success state styling',
+    },
+    disabled: {
+      control: { type: 'boolean' },
+      description: 'Disabled state',
+    },
+    placeholder: {
+      control: { type: 'text' },
+      description: 'Placeholder text',
+    },
+    enterButtonText: {
+      control: { type: 'text' },
+      description: 'Text for the Enter button',
+    },
+    showEnterButton: {
+      control: { type: 'boolean' },
+      description: 'Whether to show the Enter button',
+    },
+    onSearch: {
+      action: 'searched',
+      description: 'Callback triggered when search is performed',
+    },
+    onChange: {
+      action: 'changed',
+      description: 'Callback triggered when input value changes',
+    },
+    loading: {
+      control: { type: 'boolean' },
+      description: 'Loading state',
+    },
+    hasFocus: {
+      control: { type: 'boolean' },
+      description: 'Whether the input has focus',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Interactive example component
+const InteractiveExample = () => {
+  const [ searchValue, setSearchValue ] = useState('');
+  const [ searchResults, setSearchResults ] = useState<string[]>([]);
+  const [ isSearching, setIsSearching ] = useState(false);
+
+  const handleSearch = (value: string) => {
+    setIsSearching(true);
+
+    // Simulate API call
+    setTimeout(() => {
+      const mockResults = [
+        `Result 1 for "${value}"`,
+        `Result 2 for "${value}"`,
+        `Result 3 for "${value}"`,
+      ];
+      setSearchResults(mockResults);
+      setIsSearching(false);
+    }, 1000);
+  };
+
+  const handleChange = (value: string) => {
+    setSearchValue(value);
+  };
+
+  return (
+    <div className="w-80 space-y-4">
+      <InputSearch
+        placeholder="Search for products..."
+        value={searchValue}
+        onChange={handleChange}
+        onSearch={handleSearch}
+        enterButtonText="Search"
+        disabled={isSearching}
+      />
+
+      {isSearching && (
+        <div className="text-sm text-gray-500">Searching...</div>
+      )}
+
+      {searchResults.length > 0 && !isSearching && (
+        <div className="space-y-2">
+          <h4 className="text-sm font-medium text-gray-700">Search Results:</h4>
+          {searchResults.map((result, index) => (
+            <div key={index} className="p-2 bg-gray-50 rounded text-sm">
+              {result}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+// Form with validation example
+const FormWithValidation = () => {
+  const [ searchValue, setSearchValue ] = useState('');
+  const [ hasError, setHasError ] = useState(false);
+
+  const handleSearch = (value: string) => {
+    if (value.length < 3) {
+      setHasError(true);
+      return;
+    }
+
+    setHasError(false);
+    alert(`Searching for: ${value}`);
+  };
+
+  const handleChange = (value: string) => {
+    setSearchValue(value);
+
+    if (hasError && value.length >= 3) {
+      setHasError(false);
+    }
+  };
+
+  return (
+    <div className="w-80 space-y-4">
+      <InputSearch
+        placeholder="Search (minimum 3 characters)..."
+        value={searchValue}
+        onChange={handleChange}
+        onSearch={handleSearch}
+        error={hasError}
+        enterButtonText="Go"
+      />
+
+      {hasError && (
+        <p className="text-sm text-red-600">Please enter at least 3 characters</p>
+      )}
+    </div>
+  );
+};
+
+export const AllSizesBasic: Story = {
+  name: 'All Sizes Showcase',
+  render: (args) => (
+    <div className="space-y-6">
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Small</h4>
+        <InputSearch size="sm" placeholder="Small search input" {...args} />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Medium</h4>
+        <InputSearch size="md" placeholder="Medium search input" {...args} />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Large</h4>
+        <InputSearch size="lg" placeholder="Large search input" {...args} />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparison of all available sizes for the search input.',
+      },
+    },
+  },
+};
+
+export const AllStatesBasic: Story = {
+  name: 'All States Showcase',
+  render: (args) => (
+    <div className="space-y-4">
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Normal</h4>
+        <InputSearch placeholder="Normal state" defaultValue="Search term" {...args} />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Error</h4>
+        <InputSearch error placeholder="Error state" defaultValue="Invalid search" {...args} />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Success</h4>
+        <InputSearch success placeholder="Success state" defaultValue="Valid search" {...args} />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Disabled</h4>
+        <InputSearch disabled placeholder="Disabled state" defaultValue="Cannot search" {...args} />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Showcase of all available states and their visual feedback.',
+      },
+    },
+  },
+};
+
+export const ButtonVariations: Story = {
+  name: 'Button Text Variations',
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Default</label>
+        <InputSearch placeholder="Search..." />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Custom Text</label>
+        <InputSearch placeholder="Search..." enterButtonText="Go" />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Search Text</label>
+        <InputSearch placeholder="Search..." enterButtonText="Search" />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">No Button</label>
+        <InputSearch placeholder="Search..." showEnterButton={false} />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Different button text variations and the option to hide the button entirely.',
+      },
+    },
+  },
+};
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Search...',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Search disabled...',
+    defaultValue: 'Cannot search',
+  },
+};
+
+export const ErrorState: Story = {
+  name: 'Error State',
+  args: {
+    error: true,
+    placeholder: 'Invalid search...',
+    defaultValue: 'invalid search',
+  },
+};
+
+export const FormWithValidationStory: Story = {
+  name: 'Form with Validation',
+  render: () => <FormWithValidation />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete search form example with validation and error handling.',
+      },
+    },
+  },
+};
+
+export const Interactive: Story = {
+  name: 'Interactive Search Example',
+  render: () => <InteractiveExample />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete interactive search example showing real-time search functionality.',
+      },
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    placeholder: 'Large search input...',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    placeholder: 'Medium search input...',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    placeholder: 'Small search input...',
+  },
+};
+
+export const SuccessState: Story = {
+  name: 'Success State',
+  args: {
+    success: true,
+    placeholder: 'Valid search...',
+    defaultValue: 'valid search term',
+  },
+};
+
+export const WithCustomButtonText: Story = {
+  name: 'With Custom Button Text',
+  args: {
+    placeholder: 'Search products...',
+    enterButtonText: 'Find',
+  },
+};
+
+export const WithoutButton: Story = {
+  name: 'Without Enter Button',
+  args: {
+    placeholder: 'Search without button...',
+    showEnterButton: false,
+  },
+};

package/src/components/atoms/InputSearch/input-search.test.tsx

@@ -0,0 +1,239 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+
+import { InputSearch } from './input-search';
+
+describe('InputSearch', () => {
+  it('renders with default props', () => {
+    render(<InputSearch data-testid="search-input" />);
+
+    const input = screen.getByTestId('search-input');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('type', 'text');
+    expect(input).toHaveAttribute('placeholder', 'Search...');
+  });
+
+  it('renders with custom placeholder', () => {
+    render(<InputSearch placeholder="Search products..." data-testid="search-input" />);
+
+    const input = screen.getByTestId('search-input');
+    expect(input).toHaveAttribute('placeholder', 'Search products...');
+  });
+
+  it('shows search icon', () => {
+    render(<InputSearch data-testid="search-input" />);
+
+    const searchIcon = document.querySelector('svg');
+    expect(searchIcon).toBeInTheDocument();
+  });
+
+  it('shows Enter button by default', () => {
+    render(<InputSearch data-testid="search-input" />);
+
+    const enterButton = screen.getByText('Enter');
+    expect(enterButton).toBeInTheDocument();
+  });
+
+  it('hides Enter button when showEnterButton is false', () => {
+    render(<InputSearch showEnterButton={false} data-testid="search-input" />);
+
+    const enterButton = screen.queryByText('Enter');
+    expect(enterButton).not.toBeInTheDocument();
+  });
+
+  it('shows custom Enter button text', () => {
+    render(<InputSearch enterButtonText="Search" data-testid="search-input" />);
+
+    const enterButton = screen.getByText('Search');
+    expect(enterButton).toBeInTheDocument();
+  });
+
+  it('calls onSearch when Enter key is pressed', async () => {
+    const handleSearch = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <InputSearch
+        onSearch={handleSearch}
+        data-testid="search-input"
+      />
+    );
+
+    const input = screen.getByTestId('search-input');
+    await user.type(input, 'test search');
+    await user.keyboard('{Enter}');
+
+    expect(handleSearch).toHaveBeenCalledWith('test search');
+  });
+
+  it('calls onSearch when Enter button is clicked', async () => {
+    const handleSearch = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <InputSearch
+        onSearch={handleSearch}
+        data-testid="search-input"
+        defaultValue="test search"
+      />
+    );
+
+    const enterButton = screen.getByText('Enter');
+    await user.click(enterButton);
+
+    expect(handleSearch).toHaveBeenCalledWith('test search');
+  });
+
+  it('calls onChange when input value changes', async () => {
+    const handleChange = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <InputSearch
+        onChange={handleChange}
+        data-testid="search-input"
+      />
+    );
+
+    const input = screen.getByTestId('search-input');
+    await user.type(input, 'test');
+
+    expect(handleChange).toHaveBeenCalledWith('test');
+  });
+
+  it('applies error styling when error prop is true', () => {
+    render(<InputSearch error data-testid="search-input" />);
+
+    const container = screen.getByTestId('search-input').parentElement?.parentElement;
+    expect(container).toHaveClass('border-error-500');
+  });
+
+  it('applies success styling when success prop is true', () => {
+    render(<InputSearch success data-testid="search-input" />);
+
+    const container = screen.getByTestId('search-input').parentElement?.parentElement;
+    expect(container).toHaveClass('border-green-500');
+  });
+
+  it('is disabled when disabled prop is true', () => {
+    render(<InputSearch disabled data-testid="search-input" />);
+
+    const input = screen.getByTestId('search-input');
+    const enterButton = screen.getByText('Enter');
+
+    expect(input).toBeDisabled();
+    expect(enterButton).toHaveClass('opacity-50', 'cursor-not-allowed');
+  });
+
+  it('does not call onSearch when disabled and Enter is pressed', async () => {
+    const handleSearch = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <InputSearch
+        disabled
+        onSearch={handleSearch}
+        data-testid="search-input"
+      />
+    );
+
+    const input = screen.getByTestId('search-input');
+    await user.type(input, 'test');
+    await user.keyboard('{Enter}');
+
+    expect(handleSearch).not.toHaveBeenCalled();
+  });
+
+  it('does not call onSearch when disabled and Enter button is clicked', async () => {
+    const handleSearch = vi.fn();
+    const user = userEvent.setup();
+
+    render(
+      <InputSearch
+        disabled
+        onSearch={handleSearch}
+        data-testid="search-input"
+      />
+    );
+
+    const enterButton = screen.getByText('Enter');
+    await user.click(enterButton);
+
+    expect(handleSearch).not.toHaveBeenCalled();
+  });
+
+  it('applies different sizes correctly', () => {
+    const { rerender } = render(<InputSearch size="sm" data-testid="search-input" />);
+
+    let container = screen.getByTestId('search-input').parentElement?.parentElement;
+    expect(container).toHaveClass('px-3');
+
+    rerender(<InputSearch size="lg" data-testid="search-input" />);
+
+    container = screen.getByTestId('search-input').parentElement?.parentElement;
+    expect(container).toHaveClass('px-4');
+  });
+
+  it('applies correct icon sizes for different input sizes', () => {
+    const { rerender } = render(<InputSearch size="sm" data-testid="search-input" />);
+
+    let searchIcon = document.querySelector('svg');
+    expect(searchIcon).toHaveClass('size-5');
+
+    rerender(<InputSearch size="lg" data-testid="search-input" />);
+
+    searchIcon = document.querySelector('svg');
+    expect(searchIcon).toHaveClass('size-6');
+  });
+
+  it('has proper container structure', () => {
+    render(<InputSearch data-testid="search-input" />);
+
+    const input = screen.getByTestId('search-input');
+    const container = input.parentElement?.parentElement;
+
+    expect(container).toBeInTheDocument();
+    expect(container).toHaveClass('border', 'border-gray-300', 'flex', 'w-full', 'rounded-md');
+  });
+
+  it('has proper focus styles', async () => {
+    const user = userEvent.setup();
+    render(<InputSearch data-testid="search-input" />);
+
+    const input = screen.getByTestId('search-input');
+    const container = input.parentElement?.parentElement;
+
+    await user.click(input);
+    expect(container).toHaveClass('focus-within-primary');
+  });
+
+  it('supports controlled value', () => {
+    render(<InputSearch value="controlled value" data-testid="search-input" />);
+
+    const input = screen.getByTestId('search-input');
+    expect(input).toHaveValue('controlled value');
+  });
+
+  it('supports defaultValue', () => {
+    render(<InputSearch defaultValue="default value" data-testid="search-input" />);
+
+    const input = screen.getByTestId('search-input');
+    expect(input).toHaveValue('default value');
+  });
+
+  it('has proper aria attributes', () => {
+    render(<InputSearch error data-testid="search-input" />);
+
+    const input = screen.getByTestId('search-input');
+    expect(input).toHaveAttribute('aria-invalid', 'true');
+  });
+
+  it('has proper data attributes', () => {
+    render(<InputSearch data-testid="search-input" />);
+
+    const input = screen.getByTestId('search-input');
+    expect(input).toHaveAttribute('data-slot', 'input');
+    expect(input).toHaveAttribute('data-testid', 'search-input');
+  });
+});