# Configuration du Provider

Le ''Provider'' de SmartCommon accepte un objet de configuration qui permet de personnaliser le comportement de l'application.

## Configuration de base

```
// src/App.jsx

import { Provider } from '@cap-rel/smartcommon';
import "@cap-rel/smartcommon/dist/smartcommon-style.css";

const config = {
  debug: true,
  api: {
    prefixUrl: import.meta.env.VITE_API_URL,
    timeout: 30000
  }
};

export const App = () => (
  <Provider config={config}>
    {/* Votre application */}
  </Provider>
);
```

## Configuration complète

Voici toutes les options disponibles :

```
const config = {
  // Mode debug - active les logs dans la console
  debug: true,

  // Configuration des composants
  components: {
    // Thème actif
    theme: "default",

    // Définition des thèmes personnalisés
    themes: {
      default: { /* ... */ },
      dark: { /* ... */ }
    },

    // Variants personnalisés pour les composants
    variants: {
      Button: {
        primary: { className: "bg-blue-500 text-white" },
        secondary: { className: "bg-gray-500 text-white" }
      }
    },

    // Configuration TailwindCSS
    tailwindCss: {
      mergedClass: {}
    }
  },

  // Configuration i18n
  i18n: {
    translated: true
  },

  // Configuration du stockage
  storage: {
    db: {
      compression: {}
    },
    local: {
      compression: {}
    },
    session: {
      compression: {}
    }
  },

  // Configuration de l'état global
  globalState: {
    reducers: {}
  },

  // Configuration API
  api: {
    // URL de base de l'API
    prefixUrl: "https://api.example.com",

    // Timeout des requêtes (ms)
    timeout: 30000,

    // Mode debug pour les requêtes API
    debug: true,

    // Mapping de chemins personnalisés
    paths: {
      login: "auth/login",
      logout: "auth/logout"
    },

    // Gestion d'erreurs personnalisée
    errors: {
      401: (error) => console.log("Non autorisé"),
      500: (error) => console.log("Erreur serveur")
    }
  },

  // Configuration des animations de pages
  pages: {
    "/": {
      "/dashboard": "slideLeft",
      "/settings": "slideLeft",
      "*": "fade"
    },
    "/dashboard": {
      "/": "slideRight",
      "*": "fade"
    },
    "*": "fade"
  }
};
```

## Options détaillées

### debug

Active les logs de debug dans la console pour tous les hooks et composants.

```
debug: true  // Active tous les logs
debug: false // Désactive les logs (production)
```

### api

Configuration du client HTTP (ky).

^ Option ^ Type ^ Description ^
| ''prefixUrl'' | string | URL de base pour toutes les requêtes |
| ''timeout'' | number | Timeout en millisecondes (défaut: 30000) |
| ''debug'' | boolean | Active les logs des requêtes API |
| ''paths'' | object | Mapping de chemins personnalisés |
| ''errors'' | object | Handlers d'erreurs par code HTTP |

### pages

Configuration des animations de transition entre pages. Voir [[animations|Animations]] pour plus de détails.

^ Animation ^ Description ^
| ''fade'' | Fondu enchaîné |
| ''slideLeft'' | Glissement vers la gauche |
| ''slideRight'' | Glissement vers la droite |
| ''zoom'' | Effet de zoom |

### components

Personnalisation des composants SmartCommon.

#### themes

Définition de thèmes personnalisés :

```
themes: {
  light: {
    primary: "#3b82f6",
    secondary: "#6b7280",
    background: "#ffffff"
  },
  dark: {
    primary: "#60a5fa",
    secondary: "#9ca3af",
    background: "#1f2937"
  }
}
```

#### variants

Variants personnalisés pour les composants :

```
variants: {
  Button: {
    primary: {
      className: "bg-primary text-white hover:bg-primary/90"
    },
    danger: {
      className: "bg-red-500 text-white hover:bg-red-600"
    }
  },
  Input: {
    outlined: {
      className: "border-2 border-gray-300 rounded-lg"
    }
  }
}
```

### storage

Configuration du stockage (localStorage, sessionStorage, IndexedDB).

```
storage: {
  db: {
    compression: {
      enabled: true,
      threshold: 1024 // Compresser si > 1KB
    }
  },
  local: {
    compression: {
      enabled: false
    }
  }
}
```

### globalState

Configuration de l'état global Redux.

```
globalState: {
  reducers: {
    // Reducers personnalisés à ajouter au store
    myCustomReducer: myReducerFunction
  }
}
```

## Accéder à la configuration

Utilisez le hook ''useLibConfig'' pour accéder à la configuration :

```
import { useLibConfig } from '@cap-rel/smartcommon';

const MyComponent = () => {
  const config = useLibConfig();

  console.log(config.debug);
  console.log(config.api.prefixUrl);

  return (/* ... */);
};
```

## Exemple complet

```
// src/App.jsx

import { Provider } from '@cap-rel/smartcommon';
import "@cap-rel/smartcommon/dist/smartcommon-style.css";
import { Router } from './components/app/Router';

const config = {
  debug: import.meta.env.DEV,
  api: {
    prefixUrl: import.meta.env.VITE_API_URL,
    timeout: 30000,
    debug: import.meta.env.DEV
  },
  pages: {
    "/login": {
      "*": "fade"
    },
    "*": {
      "/login": "fade",
      "*": "slideLeft"
    }
  }
};

export const App = () => (
  <Provider config={config}>
    <Router />
  </Provider>
);
```

## Voir aussi

  * [[hooks|Hooks]] - Documentation des hooks
  * [[animations|Animations]] - Animations de pages
  * [[astuces|Astuces]] - Bonnes pratiques