@arc-js/config-manager 0.0.96 → 0.0.98

package/README.md

@@ -3,50 +3,51 @@
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
 ![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-007ACC)
 ![React](https://img.shields.io/badge/React-19+-61DAFB)
-![Vite](https://img.shields.io/badge/Vite-6+-646CFF)
 
-**@arc-js/config-manager** est un système de gestion de configuration modulaire pour les applications React avec TypeScript/JavaScript. Il fournit une gestion centralisée des configurations, un chargement dynamique des modules, et une intégration transparente avec les variables d'environnement.
+**@arc-js/config-manager** est un système de gestion de configuration modulaire et performant pour les applications React avec TypeScript/JavaScript. Il fournit une gestion avancée des configurations, un chargement dynamique par scope et module, et une intégration transparente avec l'écosystème Arc.
 
 ## ✨ Fonctionnalités Principales
 
-### ⚙️ Gestion Modulaire des Configurations
-- **Configurations hiérarchiques** avec fusion intelligente
-- **Chargement dynamique** des fichiers de configuration
-- **Support des modules indépendants** avec isolation
-- **Héritage automatique** de la configuration globale
-
-### 🔌 Intégration Environnement
-- **Variables d'environnement** automatiquement chargées (module `ENV`)
-- **Support Vite et Node.js** (process.env)
-- **Typage fort** pour les configurations
-- **Validation des chemins** avec fallback sécurisé
-
-### 🚀 Performance Optimisée
-- **Chargement paresseux** des configurations
-- **Cache mémoire** pour les accès répétés
+### 🌍 Gestion Multi-Scope Avancée
+- **Support de plusieurs scopes** avec persistance automatique
+- **Chargement dynamique** des configurations par scope
+- **Isolation des configurations** entre environnements
+- **Changement à chaud** de scope sans rechargement
+
+### 📦 Architecture Modulaire
+- **Configurations par module** avec isolation complète
+- **Chargement à la demande** des configurations de modules
+- **Fusion intelligente** des configurations hiérarchiques
+- **Support des namespaces** pour une organisation claire
+
+### ⚡ Performance Optimisée
+- **Chargement paresseux** des fichiers de configuration
+- **Mémoire cache** des configurations chargées
+- **Minimal bundle size** grâce au code splitting
 - **Hot reload** pendant le développement
-- **Minimal bundle size**
 
-### 🛡️ Sécurité et Fiabilité
-- **Gestion des erreurs** avec valeurs par défaut
-- **Validation des chemins** avant accès
-- **Logs en mode développement** uniquement
-- **Types TypeScript complets**
+### 🔧 Intégration Facile
+- **Provider React** simple à configurer
+- **Hooks personnalisés** pour une utilisation intuitive
+- **Compatibilité totale** avec TypeScript
+- **Intégration avec @arc-js/cooks** pour la persistance
 
 ## 📦 Installation
 
+### Via npm/yarn/pnpm
+
 ```bash
-npm install @arc-js/config-manager
+npm install @arc-js/config-manager @arc-js/cooks react
 # ou
-yarn add @arc-js/config-manager
+yarn add @arc-js/config-manager @arc-js/cooks react
 # ou
-pnpm add @arc-js/config-manager
+pnpm add @arc-js/config-manager @arc-js/cooks react
 ```
 
 ### Dépendances requises
 - React 19+
+- @arc-js/cooks 1.0.0+
 - TypeScript 5.0+ (recommandé)
-- Vite (pour le chargement dynamique)
 
 ## 🚀 Démarrage Rapide
 
@@ -54,85 +55,91 @@ pnpm add @arc-js/config-manager
 
 ```
 src/
-├── config.json                    # Configuration globale
-├── modules/
-│   ├── admin/
-│   │   └── config.json           # Configuration du module admin
-│   ├── dashboard/
-│   │   └── config.json           # Configuration du module dashboard
-│   └── api/
-│       └── config.json           # Configuration du module API
+├── configs/
+│   ├── app/
+│   │   ├── development.ts    # Config scope development
+│   │   ├── staging.ts        # Config scope staging
+│   │   └── production.ts     # Config scope production
+│   ├── modules/
+│   │   ├── admin/
+│   │   │   └── config.ts     # Configuration du module admin
+│   │   └── dashboard/
+│   │       └── config.ts     # Configuration du module dashboard
 └── main.tsx
 ```
 
 ### Configuration de base
 
-```json
-// src/config.json (Configuration globale)
-{
-  "app": {
-    "name": "Mon Application",
-    "version": "1.0.0",
-    "debug": false,
-    "features": {
-      "analytics": true,
-      "notifications": false
-    }
-  },
-  "api": {
-    "baseUrl": "https://api.example.com",
-    "timeout": 30000,
-    "retryAttempts": 3
-  },
-  "ui": {
-    "theme": "light",
-    "language": "fr"
-  }
-}
-```
-
-```json
-// src/modules/admin/config.json (Module admin)
-{
-  "app": {
-    "name": "Admin Panel", // Écrase le nom global pour ce module
-    "debug": true // Surcharge le debug global
-  },
-  "admin": {
-    "permissions": ["users:read", "users:write", "settings:manage"],
-    "dashboard": {
-      "refreshInterval": 5000,
-      "maxItems": 100
-    }
-  }
-}
-```
-
-### Utilisation de base
-
 ```typescript
 // main.tsx
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { ConfigManagerProvider } from '@arc-js/config-manager';
+import { ArcConfigProvider } from '@arc-js/config-manager';
 
 const App = () => {
   return (
     <div>
-      <h1>Mon Application Configurée</h1>
+      <h1>Mon Application Configurable</h1>
+      {/* Votre contenu ici */}
     </div>
   );
 };
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <ConfigManagerProvider configs={{ base: {}, modules: {} }}>
+    <ArcConfigProvider 
+      config={{
+        base: {
+          development: async () => (await import('./configs/app/development.ts')).default,
+          staging: async () => (await import('./configs/app/staging.ts')).default,
+          production: async () => (await import('./configs/app/production.ts')).default
+        },
+        modules: {
+          admin: async () => (await import('./configs/modules/admin/config.ts')).default,
+          dashboard: async () => (await import('./configs/modules/dashboard/config.ts')).default
+        }
+      }}
+      supportedScopes={['development', 'staging', 'production']}
+    >
       <App />
-    </ConfigManagerProvider>
+    </ArcConfigProvider>
   </React.StrictMode>
 );
 ```
 
+### Fichiers de configuration
+
+```typescript
+// configs/app/development.ts
+export default {
+  api: {
+    baseUrl: 'https://dev-api.example.com',
+    timeout: 5000
+  },
+  features: {
+    analytics: true,
+    debug: true
+  },
+  ui: {
+    theme: 'light',
+    language: 'en'
+  }
+};
+
+// configs/modules/admin/config.ts
+export default {
+  permissions: {
+    canEdit: true,
+    canDelete: false,
+    canCreate: true
+  },
+  settings: {
+    pagination: 20,
+    exportFormats: ['csv', 'pdf', 'excel']
+  }
+};
+```
+
 ## 📚 Documentation API
 
 ### Hook useConfig
@@ -141,203 +148,321 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 import { useConfig } from '@arc-js/config-manager';
 
 const MyComponent = () => {
-  const config = useConfig('admin'); // Optionnel: nom du module
+  const {
+    cf,                    // Fonction d'accès aux configurations
+    changeScope,           // Changer le scope actuel
+    currentScope,          // Scope actuel
+    isLoading,             // État de chargement
+    loadModule             // Charger un module spécifique
+  } = useConfig('admin'); // Optionnel: nom du module
+
+  // Exemple d'utilisation
+  const handleChangeScope = () => {
+    changeScope(currentScope === 'development' ? 'staging' : 'development');
+  };
+
+  // Accès aux valeurs de configuration
+  const apiUrl = cf('api.baseUrl');
+  const canEdit = cf('permissions.canEdit', { moduleName: 'admin' });
 
-  // Récupérer une valeur avec chemin pointé
-  const appName = config.cf('app.name');
-  const apiTimeout = config.cf('api.timeout');
-  
-  // Récupérer avec valeur par défaut
-  const debugMode = config.cf('app.debug', { defaultValue: false });
-  
-  // Récupérer toute la configuration du module
-  const adminConfig = config.getConfig('admin');
-  
-  // Vérifier si le module est chargé
-  const isModuleLoaded = config.isModuleLoaded;
-  
-  // Recharger les configurations
-  const handleReload = () => config.reloadConfig();
-  
   return (
     <div>
-      <h1>{appName}</h1>
-      <p>API Timeout: {apiTimeout}ms</p>
-      <p>Module chargé: {isModuleLoaded ? 'Oui' : 'Non'}</p>
-      <button onClick={handleReload}>Recharger la configuration</button>
+      <h1>Configuration du module Admin</h1>
+      <p>Scope actuel: {currentScope}</p>
+      <p>URL API: {apiUrl}</p>
+      <p>Permission d'édition: {canEdit ? 'Oui' : 'Non'}</p>
+      <button onClick={handleChangeScope}>
+        Passer à {currentScope === 'development' ? 'Staging' : 'Development'}
+      </button>
     </div>
   );
 };
 ```
 
-## 🛠️ Configuration du Provider
+### ArcConfigProvider
 
 ```typescript
-// App.tsx
-import { ConfigManagerProvider } from '@arc-js/config-manager';
+import { ArcConfigProvider } from '@arc-js/config-manager';
+
+// Configuration complète avec modules
+<ArcConfigProvider 
+  config={{
+    base: {
+      development: async () => (await import('./configs/app/development.ts')).default,
+      staging: async () => (await import('./configs/app/staging.ts')).default,
+      production: async () => (await import('./configs/app/production.ts')).default
+    },
+    modules: {
+      admin: {
+        development: async () => (await import('./configs/modules/admin/development.ts')).default,
+        staging: async () => (await import('./configs/modules/admin/staging.ts')).default,
+        production: async () => (await import('./configs/modules/admin/production.ts')).default
+      },
+      dashboard: {
+        development: async () => (await import('./configs/modules/dashboard/development.ts')).default,
+        staging: async () => (await import('./configs/modules/dashboard/staging.ts')).default,
+        production: async () => (await import('./configs/modules/dashboard/production.ts')).default
+      }
+    }
+  }}
+  supportedScopes={['development', 'staging', 'production']}
+>
+  {children}
+</ArcConfigProvider>
+```
 
-// Configuration avec chargeurs dynamiques
-const configs = {
-  base: {
-    main: async () => (await import('./config.json')).default,
-    env: async () => ({ 
-      apiUrl: import.meta.env.VITE_API_URL,
-      nodeEnv: import.meta.env.NODE_ENV 
-    })
-  },
-  modules: {
-    admin: async () => (await import('./modules/admin/config.json')).default,
-    dashboard: async () => (await import('./modules/dashboard/config.json')).default
-  }
-};
+## 🔧 Utilisation Avancée
 
-const App = () => {
+### Accès aux configurations avec chemins imbriqués
+
+```typescript
+const ConfigComponent = () => {
+  const { cf } = useConfig();
+  
+  // Accès à des valeurs imbriquées
+  const apiConfig = cf('api');
+  const baseUrl = cf('api.baseUrl');
+  const debugMode = cf('features.debug');
+  
   return (
-    <ConfigManagerProvider configs={configs}>
-      {/* Votre application */}
-    </ConfigManagerProvider>
+    <div>
+      <p>URL de base: {baseUrl}</p>
+      <p>Mode debug: {debugMode ? 'Activé' : 'Désactivé'}</p>
+      <pre>{JSON.stringify(apiConfig, null, 2)}</pre>
+    </div>
   );
 };
 ```
 
-## 🔧 Utilisation Avancée
-
-### Accès aux variables d'environnement
+### Valeurs par défaut et fallback
 
 ```typescript
-const EnvironmentInfo = () => {
-  const config = useConfig();
+const SafeConfigComponent = () => {
+  const { cf } = useConfig();
   
-  // Accès aux variables via le module 'env'
-  const apiUrl = config.cf('apiUrl', { moduleName: 'env' });
-  const nodeEnv = config.cf('nodeEnv', { moduleName: 'env' });
+  // Avec valeur par défaut
+  const timeout = cf('api.timeout', { defaultValue: 3000 });
+  
+  // Accès avec chemin inexistant
+  const missingValue = cf('non.existent.key', { defaultValue: 'valeur par défaut' });
   
   return (
     <div>
-      <h2>Environment Configuration</h2>
-      <p>API URL: {apiUrl}</p>
-      <p>Node Environment: {nodeEnv}</p>
+      <p>Timeout: {timeout}ms</p>
+      <p>Valeur manquante: {missingValue}</p>
     </div>
   );
 };
 ```
 
-### Chargement asynchrone de module
+### Chargement dynamique de modules
 
 ```typescript
-const LazyModule = () => {
-  const config = useConfig();
-  const [moduleConfig, setModuleConfig] = useState(null);
+import { useEffect } from 'react';
+import { useConfig } from '@arc-js/config-manager';
 
+const AdminModule = () => {
+  const { cf, loadModule, isLoading } = useConfig('admin');
+  
   useEffect(() => {
-    // Charger un module spécifique à la demande
-    config.loadModuleConfig('analytics').then(() => {
-      const analyticsConfig = config.getConfig('analytics');
-      setModuleConfig(analyticsConfig);
-    });
+    // Charger les configurations du module admin à la demande
+    loadModule('admin');
   }, []);
-
-  if (!moduleConfig) return <div>Chargement du module...</div>;
+  
+  if (isLoading) return <div>Chargement des configurations...</div>;
   
   return (
     <div>
-      <h3>Configuration Analytics</h3>
-      <pre>{JSON.stringify(moduleConfig, null, 2)}</pre>
+      <h1>Dashboard Admin</h1>
+      <p>Pagination: {cf('settings.pagination')} éléments</p>
+      <p>Formats d'export: {cf('settings.exportFormats').join(', ')}</p>
     </div>
   );
 };
 ```
 
+### Configuration multi-scope par module
+
+```typescript
+// configs/modules/admin/development.ts
+export default {
+  permissions: {
+    canEdit: true,
+    canDelete: true,
+    canCreate: true
+  },
+  limits: {
+    maxUsers: 100,
+    maxStorage: '10GB'
+  }
+};
+
+// configs/modules/admin/production.ts
+export default {
+  permissions: {
+    canEdit: true,
+    canDelete: false,
+    canCreate: true
+  },
+  limits: {
+    maxUsers: 1000,
+    maxStorage: '100GB'
+  }
+};
+```
+
 ## 🎯 Exemples Complets
 
-### Exemple 1 : Configuration d'API
+### Exemple 1 : Sélecteur de scope
 
 ```typescript
 import { useConfig } from '@arc-js/config-manager';
 
-const ApiClient = () => {
-  const config = useConfig();
+const ScopeSwitcher = () => {
+  const { currentScope, changeScope, cf } = useConfig();
   
-  const getApiConfig = () => {
-    const baseUrl = config.cf('api.baseUrl', { 
-      defaultValue: 'http://localhost:3000' 
-    });
-    
-    const timeout = config.cf('api.timeout', { defaultValue: 30000 });
-    const retryAttempts = config.cf('api.retryAttempts', { defaultValue: 3 });
-    
-    return { baseUrl, timeout, retryAttempts };
-  };
-  
-  const fetchData = async () => {
-    const { baseUrl, timeout } = getApiConfig();
-    
-    try {
-      const controller = new AbortController();
-      const timeoutId = setTimeout(() => controller.abort(), timeout);
-      
-      const response = await fetch(`\${baseUrl}/data`, {
-        signal: controller.signal,
-        headers: {
-          'Content-Type': 'application/json'
-        }
-      });
-      
-      clearTimeout(timeoutId);
-      return await response.json();
-    } catch (error) {
-      console.error('API Error:', error);
-      throw error;
-    }
-  };
+  const scopes = [
+    { code: 'development', name: 'Développement', description: 'Environnement de développement' },
+    { code: 'staging', name: 'Staging', description: 'Environnement de pré-production' },
+    { code: 'production', name: 'Production', description: 'Environnement de production' }
+  ];
   
   return (
-    <div>
-      <button onClick={fetchData}>
-        Fetch Data
-      </button>
+    <div className="scope-switcher">
+      <h3>Sélecteur d'environnement</h3>
+      <div className="scope-buttons">
+        {scopes.map(scope => (
+          <button
+            key={scope.code}
+            className={currentScope === scope.code ? 'active' : ''}
+            onClick={() => changeScope(scope.code)}
+            title={scope.description}
+          >
+            {scope.name}
+          </button>
+        ))}
+      </div>
+      <p className="current-scope-info">
+        Environnement actuel: <strong>{currentScope}</strong>
+      </p>
     </div>
   );
 };
 ```
 
-### Exemple 2 : Feature flags modulaires
+### Exemple 2 : Configuration dynamique d'API
 
 ```typescript
-const FeatureComponent = ({ featureName, moduleName }: { 
-  featureName: string, 
-  moduleName?: string 
-}) => {
-  const config = useConfig(moduleName);
-  const [isEnabled, setIsEnabled] = useState(false);
-  const [isLoading, setIsLoading] = useState(true);
+import { useConfig } from '@arc-js/config-manager';
+import { useState, useEffect } from 'react';
 
+const ApiDashboard = () => {
+  const { cf, currentScope } = useConfig();
+  const [apiStatus, setApiStatus] = useState('checking');
+  
   useEffect(() => {
-    if (config.isModuleLoaded) {
-      const enabled = config.cf(`features.\${featureName}`, { defaultValue: false });
-      setIsEnabled(enabled);
-      setIsLoading(false);
-    }
-  }, [config.isModuleLoaded, featureName]);
-
-  if (isLoading) return <div>Chargement de la feature...</div>;
-  if (!isEnabled) return null;
+    const checkApiStatus = async () => {
+      try {
+        const baseUrl = cf('api.baseUrl');
+        const timeout = cf('api.timeout', { defaultValue: 5000 });
+        
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), timeout);
+        
+        const response = await fetch(`\${baseUrl}/health`, {
+          signal: controller.signal
+        });
+        
+        clearTimeout(timeoutId);
+        
+        if (response.ok) {
+          setApiStatus('healthy');
+        } else {
+          setApiStatus('unhealthy');
+        }
+      } catch (error) {
+        setApiStatus('unreachable');
+      }
+    };
+    
+    checkApiStatus();
+  }, [cf, currentScope]);
   
   return (
-    <div className={`feature \${featureName}`}>
-      <h3>Feature: {featureName}</h3>
-      {/* Contenu de la feature */}
+    <div className="api-dashboard">
+      <h2>Statut de l'API</h2>
+      <div className="api-info">
+        <p><strong>Environnement:</strong> {currentScope}</p>
+        <p><strong>URL de base:</strong> {cf('api.baseUrl')}</p>
+        <p><strong>Timeout:</strong> {cf('api.timeout')}ms</p>
+        <p><strong>Statut:</strong> 
+          <span className={`status-\${apiStatus}`}>
+            {apiStatus === 'healthy' ? '✅ En ligne' : 
+             apiStatus === 'unhealthy' ? '⚠️ Problèmes' : 
+             '❌ Hors ligne'}
+          </span>
+        </p>
+      </div>
     </div>
   );
 };
+```
 
-// Utilisation
-const AppFeatures = () => {
+### Exemple 3 : Dashboard avec modules multiples
+
+```typescript
+import { useConfig } from '@arc-js/config-manager';
+import { useEffect } from 'react';
+
+const Dashboard = () => {
+  const { cf, loadModule, currentScope, isLoading } = useConfig('admin');
+  
+  // Charger les configurations de plusieurs modules
+  useEffect(() => {
+    const loadModules = async () => {
+      await loadModule('admin');
+      await loadModule('analytics');
+      await loadModule('reports');
+    };
+    loadModules();
+  }, [currentScope]);
+  
+  if (isLoading) return <div>Chargement des configurations...</div>;
+  
   return (
-    <div>
-      <FeatureComponent featureName="analytics" moduleName="admin" />
-      <FeatureComponent featureName="darkMode" />
-      <FeatureComponent featureName="experimental" moduleName="dashboard" />
+    <div className="dashboard">
+      <header>
+        <h1>Tableau de bord de configuration</h1>
+        <p>Environnement: {currentScope}</p>
+      </header>
+      
+      <section className="config-cards">
+        <div className="config-card">
+          <h3>Configuration Admin</h3>
+          <ul>
+            <li>Édition: {cf('permissions.canEdit', { moduleName: 'admin' }) ? '✅' : '❌'}</li>
+            <li>Suppression: {cf('permissions.canDelete', { moduleName: 'admin' }) ? '✅' : '❌'}</li>
+            <li>Pagination: {cf('settings.pagination', { moduleName: 'admin' })} éléments</li>
+          </ul>
+        </div>
+        
+        <div className="config-card">
+          <h3>Configuration Analytics</h3>
+          <ul>
+            <li>Tracking: {cf('features.enabled', { moduleName: 'analytics' }) ? 'Activé' : 'Désactivé'}</li>
+            <li>Rétention: {cf('data.retentionDays', { moduleName: 'analytics' })} jours</li>
+          </ul>
+        </div>
+        
+        <div className="config-card">
+          <h3>Configuration API</h3>
+          <ul>
+            <li>URL: {cf('api.baseUrl')}</li>
+            <li>Version: {cf('api.version', { defaultValue: 'v1' })}</li>
+            <li>Debug: {cf('features.debug') ? 'Activé' : 'Désactivé'}</li>
+          </ul>
+        </div>
+      </section>
     </div>
   );
 };
@@ -345,52 +470,83 @@ const AppFeatures = () => {
 
 ## 📋 API Reference
 
-### ConfigManagerProvider
-| Prop | Type | Description |
-|------|------|-------------|
-| `configs` | `ConfigManagerConfig` | Configuration des chargeurs de configuration |
-| `children` | `React.ReactNode` | Composants enfants |
+### ArcConfigProvider
+| Prop | Type | Description | Required |
+|------|------|-------------|----------|
+| `config` | `ConfigManagerConfig` | Configuration des chargeurs de configuration | Oui |
+| `supportedScopes` | `string[]` | Scopes supportés (défaut: ['app']) | Non |
+| `children` | `React.ReactNode` | Composants enfants | Oui |
 
 ### Hook useConfig
 Retourne un objet avec:
-- `cf(key: string, options?: ConfigOptions)`: Récupère une valeur de configuration
-- `getConfig(moduleName?: string)`: Récupère toute la configuration d'un module
-- `reloadConfig()`: Recharge toutes les configurations
+- `cf(key: string, options?: ConfigOptions)`: Fonction d'accès aux configurations
+- `changeScope(scope: string)`: Changer le scope actuel
+- `currentScope`: Scope actuel
 - `isLoading`: État de chargement global
 - `isModuleLoaded`: Indique si le module demandé est chargé
-- `loadModuleConfig(moduleName: string)`: Charge un module spécifique
+- `loadModule(moduleName: string)`: Charge un module spécifique
 
 ### Options de Configuration
 ```typescript
 interface ConfigOptions {
-  moduleName?: string;      // Nom du module (défaut: 'base')
-  defaultValue?: any;       // Valeur par défaut si non trouvé
-  pathSeparator?: string;   // Séparateur de chemin (défaut: '.')
+  moduleName?: string;      // Nom du module (défaut: 'app')
+  defaultValue?: any;       // Valeur par défaut si clé non trouvée
+}
+```
+
+### Structure de configuration
+```typescript
+interface ConfigManagerConfig {
+  base: {
+    [scope: string]: () => Promise<Record<string, any>>;
+  };
+  modules?: {
+    [moduleName: string]: () => Promise<Record<string, any>>;
+  };
 }
 ```
 
+### Types principaux
+```typescript
+export type ConfigScope = string;
+export type ConfigMap = { [scope: string]: () => Promise<Record<string, any>> };
+export type ModuleConfigs = { [moduleName: string]: () => Promise<Record<string, any>> };
+```
+
 ## 🛡️ Gestion des Erreurs
 
 ### Fallback sécurisé
 ```typescript
 const SafeComponent = () => {
-  const config = useConfig();
+  const { cf } = useConfig();
   
   // Utilisation sécurisée avec valeur par défaut
-  const importantValue = config.cf('important.path', {
-    defaultValue: 'valeur-par-defaut',
-    moduleName: 'admin'
+  const apiUrl = cf('api.baseUrl', { 
+    defaultValue: 'https://default-api.example.com' 
   });
   
-  // Vérifier avant utilisation
-  const adminConfig = config.getConfig('admin');
-  const hasRequiredConfig = 'requiredKey' in adminConfig;
+  // Accès imbriqué sécurisé
+  const theme = cf('ui.theme', { defaultValue: 'light' });
   
-  if (!hasRequiredConfig) {
-    return <div>Configuration manquante</div>;
-  }
+  return (
+    <div>
+      <p>API: {apiUrl}</p>
+      <p>Theme: {theme}</p>
+    </div>
+  );
+};
+```
+
+### Logs en développement
+```typescript
+// En mode développement, les clés manquantes sont automatiquement loggées
+const MissingConfigs = () => {
+  const { cf } = useConfig();
+  
+  // Ceci loggue un avertissement en développement
+  const missingKey = cf('non.existent.key');
   
-  return <div>Valeur: {importantValue}</div>;
+  return <div>{missingKey || 'Configuration manquante'}</div>;
 };
 ```
 
@@ -415,6 +571,58 @@ const SafeComponent = () => {
 }
 ```
 
+## 📋 Table des Conventions
+
+### Structure des fichiers de configuration
+
+| Chemin | Description | Exemple |
+|--------|-------------|---------|
+| `configs/app/{scope}.ts` | Configuration de base par scope | `configs/app/development.ts` |
+| `configs/modules/{module}/config.ts` | Configuration du module | `configs/modules/admin/config.ts` |
+| `configs/modules/{module}/{scope}.ts` | Configuration du module par scope | `configs/modules/admin/production.ts` |
+
+### Clés de configuration
+
+| Format | Description | Exemple |
+|--------|-------------|---------|
+| `namespace.key` | Clé simple | `api.baseUrl` |
+| `namespace.nested.key` | Clé imbriquée | `features.analytics.enabled` |
+| `moduleName:key` | Avec module spécifique | `admin:permissions.canEdit` |
+
+## 🔧 Build et Développement
+
+### Scripts recommandés
+
+```json
+{
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "type-check": "tsc --noEmit",
+    "validate-configs": "node scripts/validate-configs.js",
+    "generate-config-schema": "node scripts/generate-schema.js"
+  }
+}
+```
+
+### Configuration Vite
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      '@arc-js/config-manager': '@arc-js/config-manager/index.js'
+    }
+  }
+});
+```
+
 ## 📄 Licence
 
 MIT License - Voir le fichier [LICENSE](LICENSE) pour plus de détails.
@@ -429,6 +637,6 @@ Envoyez-nous un mail à l'adresse `contact.inicode@gmail.com` pour :
 
 ---
 
-**@arc-js/config-manager** - Le système de configuration modulaire pour React et TypeScript.
+**@arc-js/config-manager** - La solution de gestion de configuration modulaire pour React et TypeScript.
 
 *Développé par l'équipe INICODE*

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.0.96",
+  "version": "0.0.98",
   "description": "CONFIG-MANAGER est un système de gestion de configuration modulaire pour les applications React avec TypeScript/JavaScript. Il fournit une gestion centralisée des configurations, un chargement dynamique des modules, et une intégration transparente avec les variables d'environnement.",
   "main": "index.js",
   "keywords": [],