File structure, barrel files, and size limits.
File size limits:
- React components: Max 500 lines
- Hooks: Max 200 lines
- Utilities: Max 200 lines
File organization:
- No barrel files in apps (direct imports only)
- GraphQL files co-located with components
- Hooks co-located with components
- Named exports (prefer over default)
Don't use barrel files (index.ts that re-exports) in applications:
Why:
- Barrel files bundle unused code
- Tree-shaking less effective
- Longer build times
Exception: Barrel files OK in packages (@prepared911/ui-core) where consumers import from package root.
React Components (Max 500 lines)
GraphQL files MUST be co-located with the component/hook that uses them:
For larger features:
Prefer named exports over default exports:
Benefits:
- Better IDE autocomplete
- Easier refactoring
- Consistent naming across codebase
- Better tree-shaking
Split when:
- File exceeds size limit (500 for components, 200 for hooks)
- Multiple concerns in one file
- Sub-components can be reused
- Logic can be tested independently
Extract to:
- Custom hooks (
use-*.ts)
- Sub-components (
ComponentName.tsx)
- Utilities (
helpers.ts, formatters.ts)
- Types (
types.ts, models.ts)
Use kebab-case for directories:
Use PascalCase or kebab-case for files:
OR
Be consistent within a feature/module.
Co-locate related files:
- GraphQL with components that use them
- Hooks with components that use them
- Styles with components
- Types with components (when not shared)
Shared files:
- Types used across features →
models/ or types/
- Utilities used across features →
utils/
- Hooks used across features →
hooks/
For more detailed technical guidance, see these reference files:
