PPLX-51 - trckr

← PPLX-51

feature,web,ux

Created: 2025-12-21 • Updated: 2025-12-21

Relationships Loading...

Create form component for username/password input (Storybook-first development).

## Implementation
- Create src/src/components/molecules/LoginForm/LoginForm.tsx
- Create src/src/components/molecules/LoginForm/LoginForm.stories.tsx
- Create src/src/components/molecules/LoginForm/LoginForm.test.tsx

## Component Features
- Username input (text field)
- Password input (masked)
- "Sign In" button
- Loading state (disabled + spinner)
- Error message display area
- Enter key submits form
- Accessible (labels, ARIA attributes)
- Use design tokens for styling

## Props
```typescript
interface LoginFormProps {
  onSubmit: (username: string, password: string) => void;
  isLoading?: boolean;
  error?: string;
}
```

## Storybook Stories
1. Default (empty form)
2. With error ("Invalid username or password")
3. Loading state (disabled with spinner)
4. Filled (demo values for visual testing)

## Acceptance Criteria
- All Storybook stories render correctly
- Form validation works (required fields)
- Loading state prevents double-submit
- Error message displays prominently
- Keyboard accessible (Tab navigation, Enter submits)
- Component tests pass
- Follows design system

Pull Requests (comma-separated URLs)

Attachments

Comments (1)

agent · 2025-12-21

## Implementation Complete ### Changes Made Created the LoginForm component with the following files: 1. **LoginForm.tsx** - Main component with: - Username and password inputs using TextInput atom - Sign In button using Button atom - Loading state with disabled inputs and button spinner - Error message display with alert role for accessibility - Form validation (required fields on blur) - Enter key submits form from either input - Proper ARIA attributes and autocomplete hints - Design tokens for consistent styling 2. **LoginForm.stories.tsx** - Storybook stories: - Default (empty form) - WithError (showing error message) - Loading (disabled with spinner) - Filled (demo values for visual testing) - AllStates (comparison view) 3. **LoginForm.test.tsx** - 32 tests covering: - Rendering (inputs, button, form label) - Error display - Loading state behavior - Form validation - Form submission - Keyboard interaction (Enter key, Tab navigation) - Accessibility (ARIA attributes, autocomplete) - User interaction flow - Ref forwarding 4. **index.ts** - Export file for clean imports 5. Updated **molecules/index.ts** to export LoginForm ### Test Results All 32 tests pass. TypeScript compiles without errors. Storybook builds successfully.