component-forge

# Component Forge Build components that survive every state, at every screen size, under every edge case. Inspired by Heydon Pickering (Inclusive Components), React core team patterns, and Emil Kowalski's design engineering philosophy. ## Workflow ### Step 1: Determine component type | Type | Description | Example | |------|-------------|---------| | Presentational | Pure rendering, props-driven | Button, Card, Badge | | Composable | Wraps children with behavior | Modal, Tooltip, Accordion | | Data-fetching | Reads from API/store | UserProfile, OrderList | | Layout | Arranges children | Sidebar, Grid, Stack | | Form | Input + validation | LoginForm, SearchInput | ### Step 2: Scaffold component ```bash scripts/scaffold-component.sh Button react scripts/scaffold-component.sh Modal vue scripts/scaffold-component.sh Accordion svelte ``` > **Windows:** The scaffold script requires Git Bash or WSL. Not compatible with PowerShell or CMD. Creates: ``` Button/ Button.tsx Button.types.ts Button.test.tsx index.ts ``` ### Step 3: Implement states with discriminated union ```tsx type State<T> = | { status: 'idle' } | { status: 'loading' } | { status: 'empty' } | { status: 'error'; error: Error } | { status: 'success'; data: T } function Profile({ userId }: { userId: string }) { const [state, setState] = useState<State<User>>({ status: 'idle' }) if (state.status === 'loading') return <LoadingSkeleton /> if (state.status === 'error') return <ErrorState er...