@brcarddev/frontend-commons 1.0.2

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

@@ -0,0 +1,704 @@
+import { useState } from 'react';
+
+import { Input } from './input';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MASKS, MASK_HELPERS } from '@/utils';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Data Entry/Input',
+  component: Input,
+  tags: [ 'autodocs' ],
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A flexible input component with optional masking, various states, sizes, and built-in password visibility toggle. Works seamlessly with the masks utility.',
+      },
+    },
+  },
+  argTypes: {
+    'type': {
+      control: { type: 'select' },
+      options: [ 'text', 'email', 'password', 'number', 'tel', 'url' ],
+      description: 'Input type',
+    },
+    'size': {
+      control: { type: 'select' },
+      options: [ 'sm', 'md', 'lg' ],
+      description: 'Input size',
+    },
+    'mask': {
+      control: { type: 'text' },
+      description: 'Input mask pattern (use MASKS from utils)',
+    },
+    'error': {
+      control: { type: 'boolean' },
+      description: 'Error state',
+    },
+    'success': {
+      control: { type: 'boolean' },
+      description: 'Success state',
+    },
+    'loading': {
+      control: { type: 'boolean' },
+      description: '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>;
+
+// Helper components
+const InteractiveExample = () => {
+  const [ email, setEmail ] = useState('');
+  const [ password, setPassword ] = useState('');
+  const [ phone, setPhone ] = useState('');
+  const [ cpf, setCpf ] = useState('');
+  const [ isLoading, setIsLoading ] = useState(false);
+  const [ hasError, setHasError ] = useState(false);
+
+  const handleSubmit = () => {
+    setIsLoading(true);
+    setHasError(false);
+
+    setTimeout(() => {
+      setIsLoading(false);
+      setHasError(!email.includes('@'));
+    }, 2000);
+  };
+
+  return (
+    <div className="w-80 space-y-4 p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-4">Registration Form</h3>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Email
+        </label>
+        <Input
+          type="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          placeholder="Enter your email..."
+          error={hasError}
+          loading={isLoading}
+        />
+        {hasError && (
+          <p className="text-sm text-red-600 mt-1">Please enter a valid email</p>
+        )}
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Password
+        </label>
+        <Input
+          type="password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          placeholder="Enter your password..."
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Phone
+        </label>
+        <Input
+          mask="(___) ___-____"
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+          placeholder="(123) 456-7890"
+          type="tel"
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          CPF
+        </label>
+        <Input
+          mask={MASKS.CPF}
+          value={cpf}
+          onChange={(e) => setCpf(e.target.value)}
+          placeholder="000.000.000-00"
+        />
+      </div>
+
+      <button
+        onClick={handleSubmit}
+        disabled={isLoading}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {isLoading ? 'Processing...' : 'Submit'}
+      </button>
+    </div>
+  );
+};
+
+const FormWithValidation = () => {
+  const [ formData, setFormData ] = useState({
+    cpf: '',
+    email: '',
+    phone: '',
+    cep: '',
+  });
+  const [ errors, setErrors ] = useState<Record<string, boolean>>({});
+  const [ isSubmitting, setIsSubmitting ] = useState(false);
+
+  const updateField = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+
+    // Real-time validation
+    let isValid = true;
+
+    switch (field) {
+      case 'cpf':
+        isValid = !value || MASK_HELPERS.isValidCPF(value);
+        break;
+      case 'email':
+        isValid = !value || MASK_HELPERS.isValidEmail(value);
+        break;
+      default:
+        isValid = true;
+    }
+
+    setErrors(prev => ({ ...prev, [field]: !isValid }));
+  };
+
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+
+    // Simulate API call
+    await new Promise(resolve => setTimeout(resolve, 2000));
+
+    const cleanData = {
+      cpf: MASK_HELPERS.removeMask(formData.cpf),
+      email: formData.email,
+      phone: MASK_HELPERS.removeMask(formData.phone),
+      cep: MASK_HELPERS.removeMask(formData.cep),
+    };
+
+    console.log('Submitted data:', cleanData);
+    setIsSubmitting(false);
+    alert('Form submitted successfully!');
+  };
+
+  return (
+    <div className="w-80 space-y-4 p-6 border rounded-lg">
+      <h3 className="text-lg font-semibold mb-4">Registration Form</h3>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          CPF *
+        </label>
+        <Input
+          mask={MASKS.CPF}
+          value={formData.cpf}
+          onChange={(e) => updateField('cpf', e.target.value)}
+          placeholder="000.000.000-00"
+          error={errors.cpf}
+          loading={isSubmitting}
+        />
+        {errors.cpf && (
+          <p className="text-sm text-red-600 mt-1">CPF inválido</p>
+        )}
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Email *
+        </label>
+        <Input
+          type="email"
+          value={formData.email}
+          onChange={(e) => updateField('email', e.target.value)}
+          placeholder="your@email.com"
+          error={errors.email}
+          loading={isSubmitting}
+        />
+        {errors.email && (
+          <p className="text-sm text-red-600 mt-1">Email inválido</p>
+        )}
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          Phone
+        </label>
+        <Input
+          mask={MASKS.PHONE_MOBILE}
+          value={formData.phone}
+          onChange={(e) => updateField('phone', e.target.value)}
+          placeholder="(11) 9 9999-9999"
+          type="tel"
+          loading={isSubmitting}
+        />
+      </div>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">
+          CEP
+        </label>
+        <Input
+          mask={MASKS.CEP}
+          value={formData.cep}
+          onChange={(e) => updateField('cep', e.target.value)}
+          placeholder="00000-000"
+          loading={isSubmitting}
+        />
+      </div>
+
+      <button
+        onClick={handleSubmit}
+        disabled={isSubmitting || Object.values(errors).some(Boolean)}
+        className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed"
+      >
+        {isSubmitting ? 'Processing...' : 'Submit'}
+      </button>
+    </div>
+  );
+};
+
+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">
+          <Input size="sm" placeholder="Small text input" />
+          <Input size="sm" type="password" placeholder="Small password input" />
+          <Input size="sm" mask="(___) ___-____" placeholder="(123) 456-7890" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Medium</h4>
+        <div className="space-y-2">
+          <Input size="md" placeholder="Medium text input" />
+          <Input size="md" type="password" placeholder="Medium password input" />
+          <Input size="md" mask="(___) ___-____" placeholder="(123) 456-7890" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Large</h4>
+        <div className="space-y-2">
+          <Input size="lg" placeholder="Large text input" />
+          <Input size="lg" type="password" placeholder="Large password input" />
+          <Input size="lg" mask="(___) ___-____" placeholder="(123) 456-7890" />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Comparison of all available sizes with different input types.',
+      },
+    },
+  },
+};
+
+export const AllSizesWithMasks: Story = {
+  name: 'All Sizes with Masks',
+  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">
+          <Input size="sm" mask={MASKS.CPF} placeholder="000.000.000-00" />
+          <Input size="sm" mask={MASKS.PHONE_MOBILE} placeholder="(11) 9 9999-9999" />
+          <Input size="sm" mask={MASKS.CEP} placeholder="00000-000" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Medium</h4>
+        <div className="space-y-2">
+          <Input size="md" mask={MASKS.CPF} placeholder="000.000.000-00" />
+          <Input size="md" mask={MASKS.PHONE_MOBILE} placeholder="(11) 9 9999-9999" />
+          <Input size="md" mask={MASKS.CEP} placeholder="00000-000" />
+        </div>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Large</h4>
+        <div className="space-y-2">
+          <Input size="lg" mask={MASKS.CPF} placeholder="000.000.000-00" />
+          <Input size="lg" mask={MASKS.PHONE_MOBILE} placeholder="(11) 9 9999-9999" />
+          <Input size="lg" mask={MASKS.CEP} placeholder="00000-000" />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All input sizes with common Brazilian masks applied.',
+      },
+    },
+  },
+};
+
+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>
+        <Input placeholder="Normal state" defaultValue="Normal input" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Error</h4>
+        <Input error placeholder="Error state" defaultValue="Invalid input" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Success</h4>
+        <Input success placeholder="Success state" defaultValue="Valid input" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Loading</h4>
+        <Input loading placeholder="Loading state" defaultValue="Processing..." />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Disabled</h4>
+        <Input disabled placeholder="Disabled state" defaultValue="Cannot edit" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Showcase of all available states and their visual feedback.',
+      },
+    },
+  },
+};
+
+export const AllStatesWithMasks: Story = {
+  name: 'All States with CPF Mask',
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Normal</h4>
+        <Input mask={MASKS.CPF} placeholder="000.000.000-00" defaultValue="123.456.789" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Error</h4>
+        <Input mask={MASKS.CPF} error placeholder="000.000.000-00" defaultValue="123.456.789-00" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Success</h4>
+        <Input mask={MASKS.CPF} success placeholder="000.000.000-00" defaultValue="111.444.777-35" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Loading</h4>
+        <Input mask={MASKS.CPF} loading placeholder="000.000.000-00" defaultValue="111.444.777-35" />
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium text-gray-700 mb-2">Disabled</h4>
+        <Input mask={MASKS.CPF} disabled placeholder="000.000.000-00" defaultValue="111.444.777-35" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'All input states with CPF mask applied for consistency.',
+      },
+    },
+  },
+};
+
+export const BrazilianDocuments: Story = {
+  name: 'Brazilian Documents Showcase',
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">CPF</label>
+        <Input mask={MASKS.CPF} placeholder="000.000.000-00" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">CNPJ</label>
+        <Input mask={MASKS.CNPJ} placeholder="00.000.000/0000-00" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">RG</label>
+        <Input mask={MASKS.RG} placeholder="00.000.000-0" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">PIS</label>
+        <Input mask={MASKS.PIS} placeholder="000.00000.00-0" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Common Brazilian document masks using the masks utility.',
+      },
+    },
+  },
+};
+
+export const ContactMasks: Story = {
+  name: 'Contact Masks Showcase',
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Mobile Phone</label>
+        <Input mask={MASKS.PHONE_MOBILE} placeholder="(11) 9 9999-9999" type="tel" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Fixed Phone</label>
+        <Input mask={MASKS.PHONE_BR_FIXED} placeholder="(11) 9999-9999" type="tel" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">CEP</label>
+        <Input mask={MASKS.CEP} placeholder="00000-000" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Contact information masks for phone numbers and address.',
+      },
+    },
+  },
+};
+
+export const CPFMask: Story = {
+  name: 'With CPF Mask',
+  args: {
+    mask: MASKS.CPF,
+    placeholder: '000.000.000-00',
+  },
+};
+
+// Stories
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    placeholder: 'Disabled input...',
+    defaultValue: 'Cannot edit this',
+  },
+};
+
+export const ErrorState: Story = {
+  name: 'Error State',
+  args: {
+    error: true,
+    placeholder: 'Invalid input...',
+    defaultValue: 'invalid@email',
+  },
+};
+
+export const FinancialMasks: Story = {
+  name: 'Financial Masks Showcase',
+  render: () => (
+    <div className="space-y-4 w-80">
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Credit Card</label>
+        <Input mask={MASKS.CREDIT_CARD} placeholder="0000 0000 0000 0000" />
+      </div>
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Expiry</label>
+          <Input mask={MASKS.CREDIT_CARD_EXPIRY} placeholder="00/00" />
+        </div>
+        <div className="w-20">
+          <label className="block text-sm font-medium text-gray-700 mb-1">CVV</label>
+          <Input mask={MASKS.CREDIT_CARD_CVV} placeholder="000" />
+        </div>
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Bank Account</label>
+        <Input mask={MASKS.BANK_ACCOUNT} placeholder="000000-0" />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Bank Agency</label>
+        <Input mask={MASKS.BANK_AGENCY} placeholder="0000-0" />
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Financial information masks for cards and banking.',
+      },
+    },
+  },
+};
+
+export const FormWithValidationStory: Story = {
+  name: 'Form with Real-time Validation',
+  render: () => <FormWithValidation />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete form example with real-time validation using masks and validation helpers.',
+      },
+    },
+  },
+};
+
+export const Interactive: Story = {
+  name: 'Interactive Form Example',
+  render: () => <InteractiveExample />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'A complete form example showing different input types, masks, states, and validation.',
+      },
+    },
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    placeholder: 'Large input...',
+  },
+};
+
+export const LoadingState: Story = {
+  name: 'Loading State',
+  args: {
+    loading: true,
+    placeholder: 'Processing...',
+    defaultValue: 'example@email.com',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    placeholder: 'Medium input...',
+  },
+};
+
+export const Password: Story = {
+  args: {
+    type: 'password',
+    placeholder: 'Enter password...',
+  },
+};
+
+export const PasswordWithLoading: Story = {
+  name: 'Password with Loading',
+  args: {
+    type: 'password',
+    loading: true,
+    placeholder: 'Validating password...',
+    defaultValue: 'mypassword123',
+  },
+};
+
+// Individual component stories
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    placeholder: 'Small input...',
+  },
+};
+
+export const SuccessState: Story = {
+  name: 'Success State',
+  args: {
+    success: true,
+    placeholder: 'Valid input...',
+    defaultValue: 'valid@email.com',
+  },
+};
+
+export const WithCEPMask: Story = {
+  name: 'CEP Mask',
+  args: {
+    mask: MASKS.CEP,
+    placeholder: '00000-000',
+  },
+};
+
+export const WithCNPJMask: Story = {
+  name: 'CNPJ Mask',
+  args: {
+    mask: MASKS.CNPJ,
+    placeholder: '00.000.000/0000-00',
+  },
+};
+
+export const WithCPFMask: Story = {
+  name: 'CPF Mask',
+  args: {
+    mask: MASKS.CPF,
+    placeholder: '000.000.000-00',
+  },
+};
+
+export const WithCreditCardMask: Story = {
+  name: 'Credit Card Mask',
+  args: {
+    mask: MASKS.CREDIT_CARD,
+    placeholder: '0000 0000 0000 0000',
+  },
+};
+
+export const WithDateMask: Story = {
+  name: 'Date Mask',
+  args: {
+    mask: MASKS.DATE_BR,
+    placeholder: '00/00/0000',
+  },
+};
+
+// Mask examples
+export const WithMask: Story = {
+  name: 'With Phone Mask',
+  args: {
+    mask: MASKS.PHONE_MOBILE,
+    placeholder: '(123) 456-7890',
+    type: 'tel',
+  },
+};
+
+export const WithPhoneMask: Story = {
+  name: 'Phone Mask',
+  args: {
+    mask: MASKS.PHONE_MOBILE,
+    placeholder: '(11) 9 9999-9999',
+    type: 'tel',
+  },
+};