@croacroa/react-native-template 1.0.0 → 2.0.0

package/docs/adr/002-styling-approach.md

@@ -1,130 +1,130 @@
-# ADR-002: Use NativeWind (Tailwind CSS) for Styling
-
-## Status
-
-Accepted
-
-## Date
-
-2024-01-01
-
-## Context
-
-We need a consistent styling approach for our React Native application. The requirements are:
-
-1. Developer productivity (fast to write styles)
-2. Consistent design system
-3. Dark mode support
-4. Good performance
-5. Familiar to web developers
-
-Options considered:
-
-- **StyleSheet.create**: React Native's built-in solution
-- **Styled Components**: CSS-in-JS, popular in web
-- **NativeWind**: Tailwind CSS for React Native
-- **Tamagui**: Universal design system
-- **Dripsy**: Responsive design system
-
-## Decision
-
-We chose **NativeWind** (Tailwind CSS for React Native).
-
-## Rationale
-
-1. **Developer Experience**: Utility classes are fast to write
-
-   ```tsx
-   // NativeWind
-   <View className="p-4 bg-white rounded-xl shadow-lg">
-
-   // StyleSheet
-   <View style={[styles.container, styles.rounded, styles.shadow]}>
-   ```
-
-2. **Design System**: Tailwind's design tokens ensure consistency
-
-3. **Dark Mode**: Built-in support with `dark:` prefix
-
-   ```tsx
-   <View className="bg-white dark:bg-slate-900">
-   ```
-
-4. **Responsive Design**: Support for breakpoints
-
-   ```tsx
-   <View className="p-2 md:p-4 lg:p-6">
-   ```
-
-5. **Familiarity**: Web developers already know Tailwind
-
-6. **Performance**: Compiled at build time, no runtime overhead
-
-## Consequences
-
-### Positive
-
-- Faster styling with utility classes
-- Consistent spacing, colors, typography
-- Easy dark mode implementation
-- Small runtime footprint
-- Web developers can contribute quickly
-
-### Negative
-
-- Long className strings can be hard to read
-- Learning curve for Tailwind utilities
-- Some RN-specific styles need custom config
-
-### Mitigation
-
-- Use `cn()` utility to organize classes
-- Create component abstractions for complex patterns
-- Document custom Tailwind config
-
-## Implementation
-
-### Configuration
-
-```js
-// tailwind.config.js
-module.exports = {
-  content: ["./app/**/*.{js,tsx}", "./components/**/*.{js,tsx}"],
-  presets: [require("nativewind/preset")],
-  theme: {
-    extend: {
-      colors: {
-        primary: {
-          /* ... */
-        },
-        background: { light: "#fff", dark: "#0f172a" },
-      },
-    },
-  },
-};
-```
-
-### Usage Pattern
-
-```tsx
-import { cn } from "@/utils/cn";
-
-function Card({ className, ...props }) {
-  return (
-    <View
-      className={cn(
-        "p-4 rounded-xl",
-        "bg-white dark:bg-slate-800",
-        "border border-gray-200 dark:border-gray-700",
-        className
-      )}
-      {...props}
-    />
-  );
-}
-```
-
-## References
-
-- [NativeWind Documentation](https://www.nativewind.dev/)
-- [Tailwind CSS](https://tailwindcss.com/)
+# ADR-002: Use NativeWind (Tailwind CSS) for Styling
+
+## Status
+
+Accepted
+
+## Date
+
+2024-01-01
+
+## Context
+
+We need a consistent styling approach for our React Native application. The requirements are:
+
+1. Developer productivity (fast to write styles)
+2. Consistent design system
+3. Dark mode support
+4. Good performance
+5. Familiar to web developers
+
+Options considered:
+
+- **StyleSheet.create**: React Native's built-in solution
+- **Styled Components**: CSS-in-JS, popular in web
+- **NativeWind**: Tailwind CSS for React Native
+- **Tamagui**: Universal design system
+- **Dripsy**: Responsive design system
+
+## Decision
+
+We chose **NativeWind** (Tailwind CSS for React Native).
+
+## Rationale
+
+1. **Developer Experience**: Utility classes are fast to write
+
+   ```tsx
+   // NativeWind
+   <View className="p-4 bg-white rounded-xl shadow-lg">
+
+   // StyleSheet
+   <View style={[styles.container, styles.rounded, styles.shadow]}>
+   ```
+
+2. **Design System**: Tailwind's design tokens ensure consistency
+
+3. **Dark Mode**: Built-in support with `dark:` prefix
+
+   ```tsx
+   <View className="bg-white dark:bg-slate-900">
+   ```
+
+4. **Responsive Design**: Support for breakpoints
+
+   ```tsx
+   <View className="p-2 md:p-4 lg:p-6">
+   ```
+
+5. **Familiarity**: Web developers already know Tailwind
+
+6. **Performance**: Compiled at build time, no runtime overhead
+
+## Consequences
+
+### Positive
+
+- Faster styling with utility classes
+- Consistent spacing, colors, typography
+- Easy dark mode implementation
+- Small runtime footprint
+- Web developers can contribute quickly
+
+### Negative
+
+- Long className strings can be hard to read
+- Learning curve for Tailwind utilities
+- Some RN-specific styles need custom config
+
+### Mitigation
+
+- Use `cn()` utility to organize classes
+- Create component abstractions for complex patterns
+- Document custom Tailwind config
+
+## Implementation
+
+### Configuration
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: ["./app/**/*.{js,tsx}", "./components/**/*.{js,tsx}"],
+  presets: [require("nativewind/preset")],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          /* ... */
+        },
+        background: { light: "#fff", dark: "#0f172a" },
+      },
+    },
+  },
+};
+```
+
+### Usage Pattern
+
+```tsx
+import { cn } from "@/utils/cn";
+
+function Card({ className, ...props }) {
+  return (
+    <View
+      className={cn(
+        "p-4 rounded-xl",
+        "bg-white dark:bg-slate-800",
+        "border border-gray-200 dark:border-gray-700",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+```
+
+## References
+
+- [NativeWind Documentation](https://www.nativewind.dev/)
+- [Tailwind CSS](https://tailwindcss.com/)

package/docs/adr/003-data-fetching.md

@@ -1,155 +1,155 @@
-# ADR-003: Use React Query for Data Fetching
-
-## Status
-
-Accepted
-
-## Date
-
-2024-01-01
-
-## Context
-
-We need a data fetching solution that handles:
-
-1. Caching and cache invalidation
-2. Loading and error states
-3. Optimistic updates
-4. Offline support
-5. Request deduplication
-6. Background refetching
-
-Options considered:
-
-- **fetch/axios only**: Manual state management
-- **SWR**: Lightweight, good for web
-- **React Query (TanStack Query)**: Full-featured
-- **RTK Query**: Redux-based
-- **Apollo Client**: GraphQL-focused
-
-## Decision
-
-We chose **React Query (TanStack Query)** for server state management.
-
-## Rationale
-
-1. **Comprehensive Feature Set**
-   - Automatic caching and cache invalidation
-   - Background refetching
-   - Optimistic updates
-   - Infinite queries for pagination
-   - Offline support with persistence
-
-2. **Excellent Developer Experience**
-
-   ```tsx
-   const { data, isLoading, error } = useQuery({
-     queryKey: ["users", userId],
-     queryFn: () => api.get(`/users/${userId}`),
-   });
-   ```
-
-3. **Offline Support**: Works great with AsyncStorage persister
-
-   ```tsx
-   const persister = createAsyncStoragePersister({
-     storage: AsyncStorage,
-   });
-
-   <PersistQueryClientProvider
-     client={queryClient}
-     persistOptions={{ persister }}
-   >
-   ```
-
-4. **Performance**: Smart refetching, request deduplication
-
-5. **DevTools**: React Query DevTools for debugging
-
-## Consequences
-
-### Positive
-
-- No need for manual cache management
-- Automatic loading/error states
-- Works offline with persisted cache
-- Reduces boilerplate significantly
-- Battle-tested and well-documented
-
-### Negative
-
-- Learning curve for query keys and cache invalidation
-- Can be overkill for simple apps
-- Adds bundle size (~12KB gzipped)
-
-### Mitigation
-
-- Create query key factories for consistency
-- Document common patterns
-- Create custom hooks for reusable queries
-
-## Implementation
-
-### Query Client Configuration
-
-```ts
-// services/queryClient.ts
-export const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 5 * 60 * 1000, // 5 minutes
-      gcTime: 30 * 60 * 1000, // 30 minutes
-      retry: 3,
-      refetchOnReconnect: true,
-    },
-  },
-});
-```
-
-### Query Keys Factory
-
-```ts
-// hooks/useApi.ts
-export const queryKeys = {
-  users: {
-    all: ["users"] as const,
-    detail: (id: string) => ["users", id] as const,
-    me: () => ["users", "me"] as const,
-  },
-  posts: {
-    all: ["posts"] as const,
-    list: (filters: PostFilters) => ["posts", filters] as const,
-    detail: (id: string) => ["posts", id] as const,
-  },
-};
-```
-
-### Custom Hook Pattern
-
-```ts
-export function useUser(userId: string) {
-  return useQuery({
-    queryKey: queryKeys.users.detail(userId),
-    queryFn: () => api.get<User>(`/users/${userId}`),
-    enabled: !!userId,
-  });
-}
-
-export function useUpdateUser() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (data: UpdateUserInput) => api.patch<User>("/users/me", data),
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: queryKeys.users.me(),
-      });
-    },
-  });
-}
-```
-
-## References
-
-- [TanStack Query Documentation](https://tanstack.com/query)
-- [React Query Offline Support](https://tanstack.com/query/latest/docs/react/plugins/persistQueryClient)
+# ADR-003: Use React Query for Data Fetching
+
+## Status
+
+Accepted
+
+## Date
+
+2024-01-01
+
+## Context
+
+We need a data fetching solution that handles:
+
+1. Caching and cache invalidation
+2. Loading and error states
+3. Optimistic updates
+4. Offline support
+5. Request deduplication
+6. Background refetching
+
+Options considered:
+
+- **fetch/axios only**: Manual state management
+- **SWR**: Lightweight, good for web
+- **React Query (TanStack Query)**: Full-featured
+- **RTK Query**: Redux-based
+- **Apollo Client**: GraphQL-focused
+
+## Decision
+
+We chose **React Query (TanStack Query)** for server state management.
+
+## Rationale
+
+1. **Comprehensive Feature Set**
+   - Automatic caching and cache invalidation
+   - Background refetching
+   - Optimistic updates
+   - Infinite queries for pagination
+   - Offline support with persistence
+
+2. **Excellent Developer Experience**
+
+   ```tsx
+   const { data, isLoading, error } = useQuery({
+     queryKey: ["users", userId],
+     queryFn: () => api.get(`/users/${userId}`),
+   });
+   ```
+
+3. **Offline Support**: Works great with AsyncStorage persister
+
+   ```tsx
+   const persister = createAsyncStoragePersister({
+     storage: AsyncStorage,
+   });
+
+   <PersistQueryClientProvider
+     client={queryClient}
+     persistOptions={{ persister }}
+   >
+   ```
+
+4. **Performance**: Smart refetching, request deduplication
+
+5. **DevTools**: React Query DevTools for debugging
+
+## Consequences
+
+### Positive
+
+- No need for manual cache management
+- Automatic loading/error states
+- Works offline with persisted cache
+- Reduces boilerplate significantly
+- Battle-tested and well-documented
+
+### Negative
+
+- Learning curve for query keys and cache invalidation
+- Can be overkill for simple apps
+- Adds bundle size (~12KB gzipped)
+
+### Mitigation
+
+- Create query key factories for consistency
+- Document common patterns
+- Create custom hooks for reusable queries
+
+## Implementation
+
+### Query Client Configuration
+
+```ts
+// services/queryClient.ts
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+      gcTime: 30 * 60 * 1000, // 30 minutes
+      retry: 3,
+      refetchOnReconnect: true,
+    },
+  },
+});
+```
+
+### Query Keys Factory
+
+```ts
+// hooks/useApi.ts
+export const queryKeys = {
+  users: {
+    all: ["users"] as const,
+    detail: (id: string) => ["users", id] as const,
+    me: () => ["users", "me"] as const,
+  },
+  posts: {
+    all: ["posts"] as const,
+    list: (filters: PostFilters) => ["posts", filters] as const,
+    detail: (id: string) => ["posts", id] as const,
+  },
+};
+```
+
+### Custom Hook Pattern
+
+```ts
+export function useUser(userId: string) {
+  return useQuery({
+    queryKey: queryKeys.users.detail(userId),
+    queryFn: () => api.get<User>(`/users/${userId}`),
+    enabled: !!userId,
+  });
+}
+
+export function useUpdateUser() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: UpdateUserInput) => api.patch<User>("/users/me", data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.users.me(),
+      });
+    },
+  });
+}
+```
+
+## References
+
+- [TanStack Query Documentation](https://tanstack.com/query)
+- [React Query Offline Support](https://tanstack.com/query/latest/docs/react/plugins/persistQueryClient)