# componentLibrary Patterns Documentation

This directory contains focused pattern documentation for componentLibrary. Each file covers specific aspects of component development to make the information more digestible and easier to reference.

## Pattern Files

### 🏗️ [Component Structure](./component-structure.md)
File structure, class naming, props patterns, compound components, and accessibility.

### 🎨 [CSS Patterns](./css-patterns.md)
CSS variable naming, styling conventions, modules, and state-based patterns.

### 📝 [TypeScript Patterns](./typescript-patterns.md)
Type definitions, union types, discriminated unions, and conditional field props.

### ⚡ [Function Declaration Patterns](./function-declaration-patterns.md)
React-related code (components, JSX-returning functions, callbacks) uses arrow functions. Non-React utilities can use traditional functions.

### 🏷️ [Prop Naming Patterns](./prop-naming-patterns.md)
Standardized naming conventions for component props to ensure consistency across the library.

### 🏝️ [Island Patterns](./island-patterns.md)
When and how to use islands for client-side interactivity, file structure, wrapper/island split, and multiple islands.

### 📋 [Field Patterns](./field-patterns.md)
Field components, property ordering, visibility rules, and nested patterns.

### 📚 [Storybook Patterns](./storybook-patterns.md)
Story structure, utilities, mocks, and essential story types.

### ✅ [Checklist and Examples](./checklist-and-examples.md)
Comprehensive component creation checklist, complete reference examples, step-by-step validation guide, and full component implementation examples.

## Creating a New Component

Reference these pattern files in order when building a new component:

1. **[Component Structure](./component-structure.md)** - Set up files and basic structure
2. **[Island Patterns](./island-patterns.md)** - If the component needs client-side interactivity, set up the island split
3. **[Function Declaration Patterns](./function-declaration-patterns.md)** - Use arrow functions for React code
4. **[TypeScript Patterns](./typescript-patterns.md)** - Define types in `types.ts`
5. **[Prop Naming Patterns](./prop-naming-patterns.md)** - Name props consistently
6. **[CSS Patterns](./css-patterns.md)** - Create styles with proper variable naming
7. **[Field Patterns](./field-patterns.md)** - Add ContentFields and StyleFields (if needed)
8. **[Storybook Patterns](./storybook-patterns.md)** - Create stories for documentation (optional)
9. **[LLM Documentation Template](./llm-txt.template.md)** - Create `llm.txt` for AI/LLM consumption
