From 6ffe599ad055b699481c38ca9a80cddbdf1f3f81 Mon Sep 17 00:00:00 2001 From: amaliadwiy Date: Thu, 23 Apr 2026 11:19:49 +0800 Subject: [PATCH] docs: pecah CLAUDE.md jadi file terpisah di docs/ Pindahkan konten architecture dan conventions ke docs/ARCHITECTURE.md dan docs/CONVENTIONS.md, lalu referensikan via @path di CLAUDE.md agar file tetap ramping. Co-Authored-By: Claude Sonnet 4.6 --- CLAUDE.md | 43 ++----------------------------------------- docs/ARCHITECTURE.md | 32 ++++++++++++++++++++++++++++++++ docs/CONVENTIONS.md | 13 +++++++++++++ 3 files changed, 47 insertions(+), 41 deletions(-) create mode 100644 docs/ARCHITECTURE.md create mode 100644 docs/CONVENTIONS.md diff --git a/CLAUDE.md b/CLAUDE.md index 2a00ce8..21b35f3 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -26,47 +26,8 @@ bunx jest path/to/test.tsx --no-coverage ## Architecture -### Routing (Expo Router — file-based) - -- `app/index.tsx` — Login/splash (public); OTP verification is handled inline via `components/auth/viewVerification.tsx` (not a separate route) -- `app/(application)/` — All authenticated screens; Expo Router enforces auth guard here -- Deep-link navigation is handled by `lib/pushToPage.ts`, which maps notification payloads to routes - -### State Management (three layers) - -1. **Context** (`providers/`) — Auth (token encryption/decryption via CryptoES.AES), Theme (light/dark, persisted to AsyncStorage), and React Query client -2. **Redux Toolkit** (`lib/store.ts` + slices) — Feature-level state for CRUD operations. Slices follow a naming pattern: `*Slice.ts` for read state, `*Update.ts`/`*Create.ts` for mutation state -3. **TanStack React Query** — All server data fetching; configured with 5-min stale time, 24-hour cache retention, 2 retries, and AsyncStorage persistence for offline support - -### API Layer (`lib/api.ts`) - -Single 773-line file defining 50+ Axios-based endpoints. The Axios instance reads `baseURL` from `Constants.expoConfig.extra.URL_API` (set in `.env` via `app.config.js`). Authentication uses Bearer tokens in headers. File uploads use `FormData` with `multipart/form-data`. - -Three separate backend services are integrated: -- **REST API** (axios) — main business logic -- **WhatsApp server** — OTP delivery (separate token in `.env`) -- **Firebase** — real-time database (`lib/firebaseDatabase.ts`) and push notifications (`lib/useNotification.ts`, `lib/registerForPushNotificationsAsync.ts`) - -### Providers Initialization Order - -`app/_layout.tsx` wraps the app in: `ErrorBoundary` → `NotifierWrapper` → `ThemeProvider` → `QueryProvider` → `AuthProvider` → navigation stack. Redux `store` is provided inside `app/(application)/_layout.tsx`, not at the root. - -### Error Boundary - -`components/ErrorBoundary.tsx` is a class component (required by React) wrapping the entire app. It uses React Native's built-in `Text` — **do not replace it with the custom `components/Text.tsx`** as that pulls in `ThemeProvider` → `AsyncStorage`, which breaks Jest tests. - -Tests for ErrorBoundary live in `__tests__/ErrorBoundary-test.tsx` and use `@testing-library/react-native`. +See @docs/ARCHITECTURE.md ## Key Conventions -**Imports:** Use `@/` alias (maps to project root, configured in `tsconfig.json`). Never use relative paths like `../../`. - -**Utility functions:** Prefixed with `fun_` (e.g., `lib/fun_stringToDate.ts`, `lib/fun_validateName.ts`). - -**Styling:** Use theme-aware colors from `useTheme()` hook. Global `StyleSheet` definitions live in `constants/Styles.ts`. Color tokens are in `constants/Colors.ts` with explicit `light`/`dark` variants. - -**Component structure:** Feature-specific subdirectories under `components/` (e.g., `components/announcement/`) typically contain a header component alongside list/card components for that feature. - -**Environment config:** All env vars are declared in `.env`, exposed through `app.config.js` `extra` field, and accessed via `Constants.expoConfig.extra.*` or the `constants/ConstEnv.ts` wrapper. - -**EAS builds:** Profiles are `development`, `preview`, and `production` in `eas.json`. Production builds auto-increment the app version via the `bump` script. +See @docs/CONVENTIONS.md diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md new file mode 100644 index 0000000..7dc6707 --- /dev/null +++ b/docs/ARCHITECTURE.md @@ -0,0 +1,32 @@ +# Architecture + +## Routing (Expo Router — file-based) + +- `app/index.tsx` — Login/splash (public); OTP verification is handled inline via `components/auth/viewVerification.tsx` (not a separate route) +- `app/(application)/` — All authenticated screens; Expo Router enforces auth guard here +- Deep-link navigation is handled by `lib/pushToPage.ts`, which maps notification payloads to routes + +## State Management (three layers) + +1. **Context** (`providers/`) — Auth (token encryption/decryption via CryptoES.AES), Theme (light/dark, persisted to AsyncStorage), and React Query client +2. **Redux Toolkit** (`lib/store.ts` + slices) — Feature-level state for CRUD operations. Slices follow a naming pattern: `*Slice.ts` for read state, `*Update.ts`/`*Create.ts` for mutation state +3. **TanStack React Query** — All server data fetching; configured with 5-min stale time, 24-hour cache retention, 2 retries, and AsyncStorage persistence for offline support + +## API Layer (`lib/api.ts`) + +Single file defining 50+ Axios-based endpoints. The Axios instance reads `baseURL` from `Constants.expoConfig.extra.URL_API` (set in `.env` via `app.config.js`). Authentication uses Bearer tokens in headers. File uploads use `FormData` with `multipart/form-data`. + +Three separate backend services are integrated: +- **REST API** (axios) — main business logic +- **WhatsApp server** — OTP delivery (separate token in `.env`) +- **Firebase** — real-time database (`lib/firebaseDatabase.ts`) and push notifications (`lib/useNotification.ts`, `lib/registerForPushNotificationsAsync.ts`) + +## Providers Initialization Order + +`app/_layout.tsx` wraps the app in: `ErrorBoundary` → `NotifierWrapper` → `ThemeProvider` → `QueryProvider` → `AuthProvider` → navigation stack. Redux `store` is provided inside `app/(application)/_layout.tsx`, not at the root. + +## Error Boundary + +`components/ErrorBoundary.tsx` is a class component (required by React) wrapping the entire app. It uses React Native's built-in `Text` — **do not replace it with the custom `components/Text.tsx`** as that pulls in `ThemeProvider` → `AsyncStorage`, which breaks Jest tests. + +Tests for ErrorBoundary live in `__tests__/ErrorBoundary-test.tsx` and use `@testing-library/react-native`. diff --git a/docs/CONVENTIONS.md b/docs/CONVENTIONS.md new file mode 100644 index 0000000..834a2b2 --- /dev/null +++ b/docs/CONVENTIONS.md @@ -0,0 +1,13 @@ +# Key Conventions + +**Imports:** Use `@/` alias (maps to project root, configured in `tsconfig.json`). Never use relative paths like `../../`. + +**Utility functions:** Prefixed with `fun_` (e.g., `lib/fun_stringToDate.ts`, `lib/fun_validateName.ts`). + +**Styling:** Use theme-aware colors from `useTheme()` hook. Global `StyleSheet` definitions live in `constants/Styles.ts`. Color tokens are in `constants/Colors.ts` with explicit `light`/`dark` variants. + +**Component structure:** Feature-specific subdirectories under `components/` (e.g., `components/announcement/`) typically contain a header component alongside list/card components for that feature. + +**Environment config:** All env vars are declared in `.env`, exposed through `app.config.js` `extra` field, and accessed via `Constants.expoConfig.extra.*` or the `constants/ConstEnv.ts` wrapper. + +**EAS builds:** Profiles are `development`, `preview`, and `production` in `eas.json`. Production builds auto-increment the app version via the `bump` script.