diff --git a/CLAUDE.md b/CLAUDE.md index 82294687..f9d2cc68 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -158,6 +158,7 @@ patherly/ │ │ │ ├── layout/ # AppLayout, ProtectedRoute │ │ │ ├── tree-editor/ # Tree editor components │ │ │ ├── tree-preview/ # Visual tree preview +│ │ │ ├── step-library/ # Step library browser, forms, modals │ │ │ └── ui/ # MarkdownContent │ │ ├── pages/ │ │ │ ├── LoginPage.tsx @@ -304,6 +305,10 @@ alembic upgrade head # Create new migration alembic revision --autogenerate -m "Description" +# Create migration without DB running (manual mode) +alembic revision -m "Description" # Edit migration file manually +# Migration runs when DB is available - safe to commit without testing locally + # Access PostgreSQL (no local psql needed) docker exec -it patherly_postgres psql -U postgres -d patherly ``` @@ -521,7 +526,15 @@ interface Decision { - Use `cn()` from `@/lib/utils` for Tailwind class merging - Use Lucide icons (no `title` prop - wrap in `` instead) - Modals: Use fixed header/footer with scrollable body +- Modals: Import and render at end of parent component JSX - Forms: Show field-level validation errors +- Conditional rendering: Add null checks when node might not exist (`currentNode && currentNode.type`) + +### TypeScript Type Organization + +- New type modules: Create in `types/` directory (e.g., `types/step.ts`) +- Export from `types/index.ts` with `export * from './modulename'` +- Import types using `import type { Type } from '@/types'` (type-only import) ### API Client Pattern @@ -544,6 +557,14 @@ const response = await api.get('/api/v1/trees') 4. Add tests in `backend/tests/` 5. Update API client in `frontend/src/api/` +### Adding a New API Client Module (Frontend) + +1. Create types in `frontend/src/types/modulename.ts` +2. Export types from `frontend/src/types/index.ts` +3. Create API client in `frontend/src/api/modulename.ts` following existing pattern +4. Export from `frontend/src/api/index.ts` +5. Import in components: `import { moduleApi } from '@/api'` + ### Adding a New Page 1. Create page component in `frontend/src/pages/` @@ -583,6 +604,13 @@ const response = await api.get('/api/v1/trees') - Types: `feat`, `fix`, `refactor`, `docs`, `test`, `chore` - Always include `Co-Authored-By: Claude Opus 4.5 ` +### Commit Strategy for Large Features + +- Break implementation into logical phases (foundation → components → integration) +- Commit after each phase with `npm run build` validation +- Phase commits enable easier debugging and rollback +- Example: API clients (Phase 1) → UI components (Phase 2) → Page integration (Phase 3) + --- ## Future Roadmap