component-patterns

What this skill does

# Component Patterns Skill

UI component patterns with style-specific implementations and accessibility.

## Overview

This skill provides comprehensive component patterns with multiple design style implementations, accessibility features, and best practices for modern frontend development.

## Component Library Structure

```
components/
├── atoms/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.styles.ts
│   │   ├── Button.test.tsx
│   │   └── index.ts
│   ├── Input/
│   ├── Icon/
│   └── Badge/
├── molecules/
│   ├── FormField/
│   ├── Card/
│   ├── SearchBar/
│   └── MenuItem/
├── organisms/
│   ├── Navigation/
│   ├── Modal/
│   ├── Form/
│   └── DataTable/
├── templates/
│   ├── DashboardLayout/
│   ├── AuthLayout/
│   └── ContentLayout/
└── pages/
    ├── Dashboard/
    ├── Login/
    └── Profile/
```

## Button Variants by Design Style

### Base Button Component

**components/atoms/Button/Button.tsx:**
```typescript
import React, { ButtonHTMLAttributes, forwardRef } from 'react';
import { VariantProps } from 'class-variance-authority';
import { buttonVariants } from './Button.styles';

export interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  loading?: boolean;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      className,
      variant,
      size,
      styleType,
      loading,
      leftIcon,
      rightIcon,
      children,
      disabled,
      ...props
    },
    ref
  ) => {
    return (
      <button
        ref={ref}
        className={buttonVariants({ variant, size, styleType, className })}
        disabled={disabled || loading}
        aria-busy={loading}
        {...props}
      >
        {loading && (
          <span className="button-spinner" role="status" aria-label="Loading">
            <span className="sr-only">Loading...</span>
          </span>
        )}
        {!loading && leftIcon && <span className="button-icon-left">{leftIcon}</span>}
        <span className="button-content">{children}</span>
        {!loading && rightIcon && <span className="button-icon-right">{rightIcon}</span>}
      </button>
    );
  }
);

Button.displayName = 'Button';
```

### Button Styles (Tailwind + CVA)

**components/atoms/Button/Button.styles.ts:**
```typescript
import { cva } from 'class-variance-authority';

export const buttonVariants = cva(
  'inline-flex items-center justify-center font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
  {
    variants: {
      variant: {
        primary: '',
        secondary: '',
        outline: '',
        ghost: '',
        danger: '',
      },
      size: {
        sm: 'h-9 px-3 text-sm',
        md: 'h-10 px-4 text-base',
        lg: 'h-11 px-6 text-lg',
        xl: 'h-12 px-8 text-xl',
      },
      styleType: {
        default: '',
        glassmorphism: '',
        neumorphism: '',
        brutalist: '',
        'neo-brutalist': '',
      },
    },
    compoundVariants: [
      // Default Style
      {
        variant: 'primary',
        styleType: 'default',
        class: 'bg-primary-500 text-white hover:bg-primary-600 shadow-sm',
      },
      {
        variant: 'secondary',
        styleType: 'default',
        class: 'bg-secondary-500 text-white hover:bg-secondary-600 shadow-sm',
      },
      {
        variant: 'outline',
        styleType: 'default',
        class: 'border-2 border-primary-500 text-primary-500 hover:bg-primary-50',
      },
      {
        variant: 'ghost',
        styleType: 'default',
        class: 'text-primary-500 hover:bg-primary-50',
      },

      // Glassmorphism Style
      {
        variant: 'primary',
        styleType: 'glassmorphism',
        class: 'bg-white/10 backdrop-blur-md border border-white/20 text-white hover:bg-white/20 shadow-glass',
      },
      {
        variant: 'secondary',
        styleType: 'glassmorphism',
        class: 'bg-black/10 backdrop-blur-md border border-black/20 hover:bg-black/20 shadow-glass',
      },

      // Neumorphism Style
      {
        variant: 'primary',
        styleType: 'neumorphism',
        class: 'bg-neutral-200 text-neutral-800 shadow-neumorphic hover:shadow-neumorphic-hover active:shadow-neumorphic-inset',
      },
      {
        variant: 'secondary',
        styleType: 'neumorphism',
        class: 'bg-neutral-300 text-neutral-800 shadow-neumorphic-sm hover:shadow-neumorphic',
      },

      // Brutalist Style
      {
        variant: 'primary',
        styleType: 'brutalist',
        class: 'bg-black text-white border-4 border-black font-bold uppercase tracking-wider',
      },
      {
        variant: 'secondary',
        styleType: 'brutalist',
        class: 'bg-white text-black border-4 border-black font-bold uppercase tracking-wider',
      },

      // Neo-Brutalist Style
      {
        variant: 'primary',
        styleType: 'neo-brutalist',
        class: 'bg-yellow-400 text-black border-4 border-black shadow-brutalist hover:translate-x-1 hover:translate-y-1 hover:shadow-none font-bold',
      },
      {
        variant: 'secondary',
        styleType: 'neo-brutalist',
        class: 'bg-cyan-400 text-black border-4 border-black shadow-brutalist hover:translate-x-1 hover:translate-y-1 hover:shadow-none font-bold',
      },
      {
        variant: 'danger',
        styleType: 'neo-brutalist',
        class: 'bg-red-500 text-white border-4 border-black shadow-brutalist hover:translate-x-1 hover:translate-y-1 hover:shadow-none font-bold',
      },
    ],
    defaultVariants: {
      variant: 'primary',
      size: 'md',
      styleType: 'default',
    },
  }
);
```

### Usage Examples

```tsx
// Default style
<Button variant="primary" size="md">
  Click Me
</Button>

// Glassmorphism style
<Button variant="primary" size="lg" styleType="glassmorphism">
  Frosted Glass
</Button>

// Neo-brutalist style with icon
<Button
  variant="primary"
  size="md"
  styleType="neo-brutalist"
  leftIcon={<IconPlus />}
>
  Add Item
</Button>

// Loading state
<Button variant="primary" loading>
  Processing...
</Button>

// Disabled state
<Button variant="primary" disabled>
  Disabled
</Button>
```

## Card Patterns

### Base Card Component

**components/molecules/Card/Card.tsx:**
```typescript
import React, { HTMLAttributes, forwardRef } from 'react';
import { VariantProps } from 'class-variance-authority';
import { cardVariants } from './Card.styles';

export interface CardProps
  extends HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {
  header?: React.ReactNode;
  footer?: React.ReactNode;
  hoverable?: boolean;
  clickable?: boolean;
}

export const Card = forwardRef<HTMLDivElement, CardProps>(
  (
    {
      className,
      variant,
      styleType,
      header,
      footer,
      hoverable,
      clickable,
      children,
      onClick,
      ...props
    },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cardVariants({
          variant,
          styleType,
          hoverable,
          clickable,
          className,
        })}
        onClick={onClick}
        role={clickable ? 'button' : undefined}
        tabIndex={clickable ? 0 : undefined}
        {...props}
      >
        {header && (
          <div className="card-header" role="heading" aria-level={2}>
            {header}
          </div>
        )}
        <div className="card-body">{children}</div>
        {footer && <div className="card-footer">{footer}</div>}
      </div>
    );
  }
);

Card.displayName = 'Card';
```

### Card Styles

**components/molecules/Card/Card.styles.ts:**
```typescript
import { cva } from 'class-variance-authority';

export const cardVariants = cva(
  'rounded-lg overflow-hidden transition-all',
  {
    variants: {
      variant: {
        default: '',
        elevated: '',
        o