@the-bearded-bear/claude-craft 3.0.0

package/Dev/i18n/fr/React/skills/tooling/SKILL.md

@@ -0,0 +1,10 @@
+---
+name: tooling
+description: Tooling React - Configuration et Optimisation. Use when working with tooling.
+---
+
+# Tooling React - Configuration et Optimisation
+
+This skill provides guidelines and best practices.
+
+See @REFERENCE.md for detailed documentation.

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

@@ -0,0 +1,283 @@
+# Template : Composant React Fonctionnel
+
+## Structure de Base
+
+```typescript
+// ComponentName.tsx
+import { FC } from 'react';
+import { cn } from '@/utils/classnames';
+
+/**
+ * Description du composant et de son objectif.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ComponentName
+ *   prop1="value"
+ *   prop2={42}
+ *   onAction={handleAction}
+ * />
+ * ```
+ */
+
+interface ComponentNameProps {
+  /**
+   * Description de la prop
+   */
+  prop1: string;
+
+  /**
+   * Description de la prop
+   * @default 0
+   */
+  prop2?: number;
+
+  /**
+   * Callback appelé lors de l'action
+   */
+  onAction?: () => void;
+
+  /**
+   * Classes CSS additionnelles
+   */
+  className?: string;
+}
+
+export const ComponentName: FC<ComponentNameProps> = ({
+  prop1,
+  prop2 = 0,
+  onAction,
+  className
+}) => {
+  // État local si nécessaire
+  // const [state, setState] = useState();
+
+  // Hooks custom si nécessaire
+  // const { data } = useCustomHook();
+
+  // Handlers
+  const handleClick = () => {
+    onAction?.();
+  };
+
+  return (
+    <div className={cn('base-classes', className)}>
+      <h2>{prop1}</h2>
+      <button onClick={handleClick}>Action</button>
+    </div>
+  );
+};
+
+// Export du type pour réutilisation
+export type { ComponentNameProps };
+```
+
+## Avec Variants (class-variance-authority)
+
+```typescript
+import { FC } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/utils/classnames';
+
+const componentVariants = cva('base-classes', {
+  variants: {
+    variant: {
+      default: 'variant-default-classes',
+      primary: 'variant-primary-classes',
+      secondary: 'variant-secondary-classes'
+    },
+    size: {
+      sm: 'size-sm-classes',
+      md: 'size-md-classes',
+      lg: 'size-lg-classes'
+    }
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'md'
+  }
+});
+
+interface ComponentNameProps
+  extends VariantProps<typeof componentVariants> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const ComponentName: FC<ComponentNameProps> = ({
+  variant,
+  size,
+  children,
+  className
+}) => {
+  return (
+    <div className={componentVariants({ variant, size, className })}>
+      {children}
+    </div>
+  );
+};
+```
+
+## Avec forwardRef
+
+```typescript
+import { forwardRef, ButtonHTMLAttributes } from 'react';
+import { cn } from '@/utils/classnames';
+
+interface ComponentNameProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary';
+}
+
+export const ComponentName = forwardRef<
+  HTMLButtonElement,
+  ComponentNameProps
+>(({ variant = 'primary', className, children, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      className={cn('base-classes', `variant-${variant}`, className)}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+});
+
+ComponentName.displayName = 'ComponentName';
+```
+
+## Pattern Container/Presenter
+
+```typescript
+// ComponentNameContainer.tsx (Smart Component)
+import { FC } from 'react';
+import { useCustomLogic } from './hooks/useCustomLogic';
+import { ComponentNamePresenter } from './ComponentNamePresenter';
+
+export const ComponentNameContainer: FC = () => {
+  const {
+    data,
+    isLoading,
+    error,
+    handleAction
+  } = useCustomLogic();
+
+  if (isLoading) return <Spinner />;
+  if (error) return <Error message={error.message} />;
+
+  return (
+    <ComponentNamePresenter
+      data={data}
+      onAction={handleAction}
+    />
+  );
+};
+
+// ComponentNamePresenter.tsx (Dumb Component)
+import { FC } from 'react';
+import type { Data } from './types';
+
+interface ComponentNamePresenterProps {
+  data: Data;
+  onAction: () => void;
+}
+
+export const ComponentNamePresenter: FC<ComponentNamePresenterProps> = ({
+  data,
+  onAction
+}) => {
+  return (
+    <div>
+      <h2>{data.title}</h2>
+      <button onClick={onAction}>Action</button>
+    </div>
+  );
+};
+```
+
+## Tests Associés
+
+```typescript
+// ComponentName.test.tsx
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { ComponentName } from './ComponentName';
+
+describe('ComponentName', () => {
+  it('should render correctly', () => {
+    render(<ComponentName prop1="test" />);
+
+    expect(screen.getByText('test')).toBeInTheDocument();
+  });
+
+  it('should call onAction when button clicked', async () => {
+    const handleAction = vi.fn();
+    const user = userEvent.setup();
+
+    render(<ComponentName prop1="test" onAction={handleAction} />);
+
+    await user.click(screen.getByRole('button'));
+
+    expect(handleAction).toHaveBeenCalledTimes(1);
+  });
+});
+```
+
+## Storybook
+
+```typescript
+// ComponentName.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { ComponentName } from './ComponentName';
+
+const meta = {
+  title: 'Components/ComponentName',
+  component: ComponentName,
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof ComponentName>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    prop1: 'Default value',
+    prop2: 42
+  }
+};
+
+export const WithAction: Story = {
+  args: {
+    prop1: 'With action',
+    onAction: () => alert('Action clicked')
+  }
+};
+```
+
+## Index File
+
+```typescript
+// index.ts
+export { ComponentName } from './ComponentName';
+export type { ComponentNameProps } from './ComponentName';
+```
+
+## Organisation Complète
+
+```
+ComponentName/
+├── ComponentName.tsx          # Composant principal
+├── ComponentName.test.tsx     # Tests
+├── ComponentName.stories.tsx  # Storybook
+├── hooks/                     # Hooks locaux (si nécessaire)
+│   └── useCustomLogic.ts
+├── components/                # Sous-composants (si nécessaire)
+│   └── SubComponent.tsx
+└── index.ts                   # Exports
+```

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

@@ -0,0 +1,393 @@
+# Template : Hook Custom
+
+## Structure de Base
+
+```typescript
+// useCustomHook.ts
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * Options de configuration pour le hook
+ */
+export interface UseCustomHookOptions {
+  /**
+   * Valeur initiale
+   */
+  initialValue?: string;
+
+  /**
+   * Callback de succès
+   */
+  onSuccess?: (data: string) => void;
+
+  /**
+   * Callback d'erreur
+   */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Valeur de retour du hook
+ */
+export interface UseCustomHookReturn {
+  /**
+   * Valeur actuelle
+   */
+  value: string;
+
+  /**
+   * Indicateur de chargement
+   */
+  isLoading: boolean;
+
+  /**
+   * Erreur éventuelle
+   */
+  error: Error | null;
+
+  /**
+   * Mettre à jour la valeur
+   */
+  update: (newValue: string) => Promise<void>;
+
+  /**
+   * Réinitialiser
+   */
+  reset: () => void;
+}
+
+/**
+ * Hook personnalisé pour [description de la fonctionnalité].
+ *
+ * @param options - Options de configuration
+ * @returns État et méthodes pour gérer [fonctionnalité]
+ *
+ * @example
+ * ```tsx
+ * const { value, update, isLoading } = useCustomHook({
+ *   initialValue: 'default',
+ *   onSuccess: (data) => console.log('Success:', data)
+ * });
+ *
+ * // Utiliser dans le composant
+ * await update('new value');
+ * ```
+ *
+ * @throws {ValidationError} Si la valeur est invalide
+ */
+export const useCustomHook = (
+  options: UseCustomHookOptions = {}
+): UseCustomHookReturn => {
+  const { initialValue = '', onSuccess, onError } = options;
+
+  // État
+  const [value, setValue] = useState(initialValue);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  // Effets
+  useEffect(() => {
+    // Initialisation ou side effects
+  }, []);
+
+  // Méthodes
+  const update = useCallback(
+    async (newValue: string) => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        // Logique de mise à jour
+        setValue(newValue);
+        onSuccess?.(newValue);
+      } catch (err) {
+        const error = err as Error;
+        setError(error);
+        onError?.(error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [onSuccess, onError]
+  );
+
+  const reset = useCallback(() => {
+    setValue(initialValue);
+    setError(null);
+  }, [initialValue]);
+
+  return {
+    value,
+    isLoading,
+    error,
+    update,
+    reset
+  };
+};
+```
+
+## Hook avec React Query
+
+```typescript
+// useUsers.ts
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { userService } from '@/services/user.service';
+import type { User, CreateUserInput } from '@/types/user.types';
+
+/**
+ * Hook pour récupérer tous les utilisateurs
+ */
+export const useUsers = () => {
+  return useQuery({
+    queryKey: ['users'],
+    queryFn: () => userService.getAll(),
+    staleTime: 5 * 60 * 1000 // 5 minutes
+  });
+};
+
+/**
+ * Hook pour récupérer un utilisateur par ID
+ */
+export const useUser = (id: string) => {
+  return useQuery({
+    queryKey: ['user', id],
+    queryFn: () => userService.getById(id),
+    enabled: !!id
+  });
+};
+
+/**
+ * Hook pour créer un utilisateur
+ */
+export const useCreateUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: CreateUserInput) => userService.create(data),
+    onSuccess: () => {
+      // Invalider le cache pour rafraîchir les données
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+    }
+  });
+};
+
+/**
+ * Hook pour mettre à jour un utilisateur
+ */
+export const useUpdateUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<User> }) =>
+      userService.update(id, data),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ['user', variables.id] });
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+    }
+  });
+};
+
+/**
+ * Hook pour supprimer un utilisateur
+ */
+export const useDeleteUser = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => userService.delete(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['users'] });
+    }
+  });
+};
+```
+
+## Hook avec Zustand
+
+```typescript
+// useThemeStore.ts
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+interface ThemeState {
+  theme: 'light' | 'dark';
+  setTheme: (theme: 'light' | 'dark') => void;
+  toggleTheme: () => void;
+}
+
+/**
+ * Store global pour le thème de l'application
+ */
+export const useThemeStore = create<ThemeState>()(
+  persist(
+    (set) => ({
+      theme: 'light',
+
+      setTheme: (theme) => set({ theme }),
+
+      toggleTheme: () =>
+        set((state) => ({
+          theme: state.theme === 'light' ? 'dark' : 'light'
+        }))
+    }),
+    {
+      name: 'theme-storage' // Clé localStorage
+    }
+  )
+);
+
+/**
+ * Hook helper pour accéder au thème
+ */
+export const useTheme = () => {
+  const theme = useThemeStore((state) => state.theme);
+  const setTheme = useThemeStore((state) => state.setTheme);
+  const toggleTheme = useThemeStore((state) => state.toggleTheme);
+
+  return { theme, setTheme, toggleTheme };
+};
+```
+
+## Hook Composite
+
+```typescript
+// useUserManagement.ts
+import { useState } from 'react';
+import { useUsers, useCreateUser, useUpdateUser, useDeleteUser } from './useUsers';
+
+export const useUserManagement = () => {
+  const [selectedUser, setSelectedUser] = useState<User | null>(null);
+
+  // Récupération des données
+  const { data: users, isLoading, error } = useUsers();
+
+  // Mutations
+  const createUser = useCreateUser();
+  const updateUser = useUpdateUser();
+  const deleteUser = useDeleteUser();
+
+  // Méthodes composées
+  const handleCreate = async (data: CreateUserInput) => {
+    await createUser.mutateAsync(data);
+  };
+
+  const handleUpdate = async (id: string, data: Partial<User>) => {
+    await updateUser.mutateAsync({ id, data });
+  };
+
+  const handleDelete = async (id: string) => {
+    await deleteUser.mutateAsync(id);
+    if (selectedUser?.id === id) {
+      setSelectedUser(null);
+    }
+  };
+
+  return {
+    // Data
+    users,
+    selectedUser,
+    setSelectedUser,
+
+    // Loading states
+    isLoading,
+    isCreating: createUser.isPending,
+    isUpdating: updateUser.isPending,
+    isDeleting: deleteUser.isPending,
+
+    // Errors
+    error,
+    createError: createUser.error,
+    updateError: updateUser.error,
+    deleteError: deleteUser.error,
+
+    // Actions
+    handleCreate,
+    handleUpdate,
+    handleDelete
+  };
+};
+```
+
+## Tests de Hook
+
+```typescript
+// useCustomHook.test.ts
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { useCustomHook } from './useCustomHook';
+
+describe('useCustomHook', () => {
+  it('should initialize with default value', () => {
+    const { result } = renderHook(() => useCustomHook());
+
+    expect(result.current.value).toBe('');
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('should initialize with custom value', () => {
+    const { result } = renderHook(() =>
+      useCustomHook({ initialValue: 'custom' })
+    );
+
+    expect(result.current.value).toBe('custom');
+  });
+
+  it('should update value', async () => {
+    const { result } = renderHook(() => useCustomHook());
+
+    await act(async () => {
+      await result.current.update('new value');
+    });
+
+    expect(result.current.value).toBe('new value');
+  });
+
+  it('should call onSuccess callback', async () => {
+    const onSuccess = vi.fn();
+    const { result } = renderHook(() => useCustomHook({ onSuccess }));
+
+    await act(async () => {
+      await result.current.update('new value');
+    });
+
+    expect(onSuccess).toHaveBeenCalledWith('new value');
+  });
+
+  it('should reset to initial value', () => {
+    const { result } = renderHook(() =>
+      useCustomHook({ initialValue: 'initial' })
+    );
+
+    act(() => {
+      result.current.update('updated');
+    });
+
+    expect(result.current.value).toBe('updated');
+
+    act(() => {
+      result.current.reset();
+    });
+
+    expect(result.current.value).toBe('initial');
+  });
+});
+```
+
+## Organisation
+
+```
+hooks/
+├── useCustomHook.ts       # Hook principal
+├── useCustomHook.test.ts  # Tests
+└── index.ts               # Exports
+
+# Pour un hook complexe avec dépendances:
+useComplexFeature/
+├── useComplexFeature.ts
+├── useComplexFeature.test.ts
+├── utils/
+│   ├── validation.ts
+│   └── helpers.ts
+└── index.ts
+```