@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/fr/ReactNative/templates/component.md

@@ -0,0 +1,170 @@
+# Template: Reusable Component
+
+## Nom du Composant
+
+`{{COMPONENT_NAME}}.tsx`
+
+## Structure
+
+```typescript
+// components/{{CATEGORY}}/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.tsx
+import React from 'react';
+import { View, Text, Pressable, type ViewStyle, type TextStyle } from 'react-native';
+import type { FC } from 'react';
+
+// Import styles
+import { styles } from './{{COMPONENT_NAME}}.styles';
+
+// Import types
+import type { {{COMPONENT_NAME}}Props } from './{{COMPONENT_NAME}}.types';
+
+/**
+ * {{COMPONENT_NAME}} Component
+ * 
+ * Description: {{DESCRIPTION}}
+ * 
+ * @component
+ * @example
+ * ```tsx
+ * <{{COMPONENT_NAME}}
+ *   prop1="value"
+ *   prop2={value}
+ *   onAction={handleAction}
+ * />
+ * ```
+ */
+export const {{COMPONENT_NAME}}: FC<{{COMPONENT_NAME}}Props> = ({
+  prop1,
+  prop2,
+  onAction,
+  style,
+  children,
+}) => {
+  // 1. State (if needed)
+  const [internalState, setInternalState] = React.useState(false);
+
+  // 2. Handlers
+  const handlePress = () => {
+    setInternalState(!internalState);
+    onAction?.();
+  };
+
+  // 3. Render
+  return (
+    <View style={[styles.container, style]}>
+      <Pressable onPress={handlePress} style={styles.button}>
+        <Text style={styles.text}>{prop1}</Text>
+      </Pressable>
+      {children}
+    </View>
+  );
+};
+
+// Default props (if needed)
+{{COMPONENT_NAME}}.defaultProps = {
+  prop2: 'default value',
+};
+```
+
+## Types
+
+```typescript
+// components/{{CATEGORY}}/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.types.ts
+import type { ViewStyle } from 'react-native';
+
+export interface {{COMPONENT_NAME}}Props {
+  /**
+   * Description of prop1
+   */
+  prop1: string;
+
+  /**
+   * Description of prop2
+   * @default "default value"
+   */
+  prop2?: string;
+
+  /**
+   * Callback when action occurs
+   */
+  onAction?: () => void;
+
+  /**
+   * Custom style
+   */
+  style?: ViewStyle;
+
+  /**
+   * Children elements
+   */
+  children?: React.ReactNode;
+}
+```
+
+## Styles
+
+```typescript
+// components/{{CATEGORY}}/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.styles.ts
+import { StyleSheet } from 'react-native';
+import { theme } from '@/theme';
+
+export const styles = StyleSheet.create({
+  container: {
+    padding: theme.spacing.md,
+    backgroundColor: theme.colors.white,
+    borderRadius: theme.borderRadius.md,
+  },
+  button: {
+    padding: theme.spacing.sm,
+  },
+  text: {
+    fontSize: theme.typography.fontSize.md,
+    color: theme.colors.text.primary,
+  },
+});
+```
+
+## Test
+
+```typescript
+// components/{{CATEGORY}}/{{COMPONENT_NAME}}/{{COMPONENT_NAME}}.test.tsx
+import { render, fireEvent } from '@testing-library/react-native';
+import { {{COMPONENT_NAME}} } from './{{COMPONENT_NAME}}';
+
+describe('{{COMPONENT_NAME}}', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(
+      <{{COMPONENT_NAME}} prop1="test" onAction={() => {}} />
+    );
+    expect(getByText('test')).toBeTruthy();
+  });
+
+  it('calls onAction when pressed', () => {
+    const onAction = jest.fn();
+    const { getByText } = render(
+      <{{COMPONENT_NAME}} prop1="test" onAction={onAction} />
+    );
+
+    fireEvent.press(getByText('test'));
+
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders children', () => {
+    const { getByText } = render(
+      <{{COMPONENT_NAME}} prop1="test" onAction={() => {}}>
+        <Text>Child</Text>
+      </{{COMPONENT_NAME}}>
+    );
+    expect(getByText('Child')).toBeTruthy();
+  });
+});
+```
+
+## Index Export
+
+```typescript
+// components/{{CATEGORY}}/{{COMPONENT_NAME}}/index.ts
+export { {{COMPONENT_NAME}} } from './{{COMPONENT_NAME}}';
+export type { {{COMPONENT_NAME}}Props } from './{{COMPONENT_NAME}}.types';
+```

package/Dev/i18n/fr/ReactNative/templates/hook.md

@@ -0,0 +1,204 @@
+# Template: Custom Hook
+
+## Nom du Hook
+
+`use{{HOOK_NAME}}.ts`
+
+## Structure
+
+```typescript
+// hooks/use{{HOOK_NAME}}.ts
+import { useState, useEffect, useCallback } from 'react';
+
+// Import types
+import type { {{TYPE_NAME}} } from '@/types/{{TYPE_NAME}}.types';
+
+/**
+ * {{HOOK_NAME}} Hook
+ * 
+ * Description: {{DESCRIPTION}}
+ * 
+ * @hook
+ * @example
+ * ```typescript
+ * const { data, isLoading, error, refetch } = use{{HOOK_NAME}}(param);
+ * ```
+ */
+export const use{{HOOK_NAME}} = (param?: ParamType) => {
+  // 1. State
+  const [data, setData] = useState<DataType | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // 2. Refs (if needed)
+  const ref = useRef<RefType>(null);
+
+  // 3. Other hooks
+  const { otherHook } = useOtherHook();
+
+  // 4. Effects
+  useEffect(() => {
+    fetchData();
+
+    // Cleanup
+    return () => {
+      // Cleanup logic
+    };
+  }, [param]);
+
+  // 5. Callbacks
+  const fetchData = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const result = await apiCall(param);
+      setData(result);
+    } catch (err) {
+      setError(err as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [param]);
+
+  const refetch = useCallback(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // 6. Computed values
+  const computedValue = useMemo(() => {
+    if (!data) return null;
+    return transformData(data);
+  }, [data]);
+
+  // 7. Return
+  return {
+    data,
+    isLoading,
+    error,
+    refetch,
+    computedValue,
+  };
+};
+
+// Return type (for better TypeScript support)
+export type Use{{HOOK_NAME}}Return = ReturnType<typeof use{{HOOK_NAME}}>;
+```
+
+## Exemple avec React Query
+
+```typescript
+// hooks/use{{FEATURE_NAME}}.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { {{FEATURE_NAME}}Service } from '@/services/{{FEATURE_NAME}}.service';
+
+/**
+ * Fetch {{FEATURE_NAME}} data
+ */
+export const use{{FEATURE_NAME}} = (id?: string) => {
+  return useQuery({
+    queryKey: ['{{FEATURE_NAME}}', id],
+    queryFn: () => {{FEATURE_NAME}}Service.getById(id!),
+    enabled: !!id,
+  });
+};
+
+/**
+ * Create {{FEATURE_NAME}}
+ */
+export const useCreate{{FEATURE_NAME}} = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: Create{{FEATURE_NAME}}DTO) => 
+      {{FEATURE_NAME}}Service.create(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['{{FEATURE_NAME}}'] });
+    },
+  });
+};
+
+/**
+ * Update {{FEATURE_NAME}}
+ */
+export const useUpdate{{FEATURE_NAME}} = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Update{{FEATURE_NAME}}DTO }) =>
+      {{FEATURE_NAME}}Service.update(id, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['{{FEATURE_NAME}}', variables.id] });
+    },
+  });
+};
+
+/**
+ * Delete {{FEATURE_NAME}}
+ */
+export const useDelete{{FEATURE_NAME}} = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => {{FEATURE_NAME}}Service.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['{{FEATURE_NAME}}'] });
+    },
+  });
+};
+```
+
+## Test
+
+```typescript
+// hooks/use{{HOOK_NAME}}.test.ts
+import { renderHook, act, waitFor } from '@testing-library/react-native';
+import { use{{HOOK_NAME}} } from './use{{HOOK_NAME}}';
+
+describe('use{{HOOK_NAME}}', () => {
+  it('initializes with default values', () => {
+    const { result } = renderHook(() => use{{HOOK_NAME}}());
+
+    expect(result.current.data).toBeNull();
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('fetches data successfully', async () => {
+    const { result } = renderHook(() => use{{HOOK_NAME}}('param'));
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.data).toBeDefined();
+    expect(result.current.error).toBeNull();
+  });
+
+  it('handles errors', async () => {
+    // Mock API to throw error
+    const { result } = renderHook(() => use{{HOOK_NAME}}('invalid'));
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.error).toBeDefined();
+    expect(result.current.data).toBeNull();
+  });
+
+  it('refetches data', async () => {
+    const { result } = renderHook(() => use{{HOOK_NAME}}());
+
+    await act(async () => {
+      result.current.refetch();
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.data).toBeDefined();
+  });
+});
+```

package/Dev/i18n/fr/ReactNative/templates/screen.md

@@ -0,0 +1,159 @@
+# Template: Screen Component
+
+## Nom du Screen
+
+`{{SCREEN_NAME}}Screen.tsx`
+
+## Structure
+
+```typescript
+// app/{{ROUTE_PATH}}.tsx (ou screens/{{SCREEN_NAME}}Screen.tsx si pas Expo Router)
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useLocalSearchParams } from 'expo-router';
+
+// Import components
+import { Button } from '@/components/ui/Button';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { ErrorMessage } from '@/components/shared/ErrorMessage';
+
+// Import hooks
+import { use{{FEATURE_NAME}} } from '@/hooks/use{{FEATURE_NAME}}';
+
+// Import types
+import type { {{TYPE_NAME}} } from '@/types/{{TYPE_NAME}}.types';
+
+// Import styles
+import { styles } from './{{SCREEN_NAME}}Screen.styles';
+
+/**
+ * {{SCREEN_NAME}} Screen
+ * 
+ * Description: {{DESCRIPTION}}
+ * 
+ * @screen
+ */
+export default function {{SCREEN_NAME}}Screen() {
+  // 1. Params (if dynamic route)
+  const params = useLocalSearchParams<{ id: string }>();
+
+  // 2. State
+  const [state, setState] = React.useState<StateType>(initialState);
+
+  // 3. Hooks - Data fetching
+  const { data, isLoading, error } = use{{FEATURE_NAME}}();
+
+  // 4. Hooks - Effects
+  React.useEffect(() => {
+    // Side effects
+  }, []);
+
+  // 5. Handlers
+  const handleAction = () => {
+    // Handle action
+  };
+
+  // 6. Early returns
+  if (isLoading) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <LoadingSpinner />
+      </SafeAreaView>
+    );
+  }
+
+  if (error) {
+    return (
+      <SafeAreaView style={styles.container}>
+        <ErrorMessage error={error} />
+      </SafeAreaView>
+    );
+  }
+
+  // 7. Main render
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content}>
+        <View style={styles.header}>
+          <Text style={styles.title}>{{TITLE}}</Text>
+        </View>
+
+        <View style={styles.body}>
+          {/* Main content */}
+        </View>
+
+        <View style={styles.actions}>
+          <Button onPress={handleAction}>Action</Button>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}
+
+// Optionnel: Screen options pour Expo Router
+export const options = {
+  title: '{{SCREEN_TITLE}}',
+  headerShown: true,
+};
+```
+
+## Styles
+
+```typescript
+// {{SCREEN_NAME}}Screen.styles.ts
+import { StyleSheet } from 'react-native';
+import { theme } from '@/theme';
+
+export const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: theme.colors.white,
+  },
+  content: {
+    padding: theme.spacing.md,
+  },
+  header: {
+    marginBottom: theme.spacing.lg,
+  },
+  title: {
+    fontSize: theme.typography.fontSize.xxl,
+    fontWeight: theme.typography.fontWeight.bold,
+    color: theme.colors.text.primary,
+  },
+  body: {
+    flex: 1,
+  },
+  actions: {
+    marginTop: theme.spacing.lg,
+  },
+});
+```
+
+## Test
+
+```typescript
+// __tests__/screens/{{SCREEN_NAME}}Screen.test.tsx
+import { render, waitFor } from '@testing-library/react-native';
+import {{SCREEN_NAME}}Screen from '../{{SCREEN_NAME}}Screen';
+
+describe('{{SCREEN_NAME}}Screen', () => {
+  it('renders correctly', () => {
+    const { getByText } = render(<{{SCREEN_NAME}}Screen />);
+    expect(getByText('{{TITLE}}')).toBeTruthy();
+  });
+
+  it('handles loading state', async () => {
+    const { getByTestId } = render(<{{SCREEN_NAME}}Screen />);
+    expect(getByTestId('loading-spinner')).toBeTruthy();
+  });
+
+  it('handles error state', async () => {
+    // Mock error
+    const { getByText } = render(<{{SCREEN_NAME}}Screen />);
+    await waitFor(() => {
+      expect(getByText('Error')).toBeTruthy();
+    });
+  });
+});
+```