Configuration du Provider

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

// 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>
);

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"
  }
};

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)

Configuration du client HTTP (ky).

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

Personnalisation des composants SmartCommon.

Définition de thèmes personnalisés :

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

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"
    }
  }
}

Configuration du stockage (localStorage, sessionStorage, IndexedDB).

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

Configuration de l'état global Redux.

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

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 (/* ... */);
};

// 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>
);

• Hooks - Documentation des hooks
• Animations - Animations de pages
• Astuces - Bonnes pratiques