Indice

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

Props du Provider

Prop Type Description
config object Configuration de l'application (voir ci-dessous)
children ReactNode Contenu de l'application
onError Function Callback en cas d'erreur globale
errorFallback any Contenu de fallback en cas d'erreur
ErrorFallbackComponent Component Composant de fallback en cas d'erreur
pwaUpdate object Configuration des mises à jour PWA (passée à usePWAUpdate)

pwaUpdate

Permet de configurer le comportement des mises à jour PWA directement sur le Provider : 

<Provider
  config={config}
  pwaUpdate={{
    autoReload: false,
    checkInterval: 60000,
    onUpdateAvailable: () => console.log('Mise à jour disponible'),
    onUpdateActivated: () => console.log('Mise à jour activée')
  }}
>
  {/* ... */}
</Provider>

ConfirmProvider

Le ConfirmProvider est inclus automatiquement dans le Provider. Il accepte un prop labels pour personnaliser les textes des boutons : 

<ConfirmProvider labels={{
  confirm: 'Confirmer',
  cancel: 'Annuler',
  ok: 'OK'
}}>
  {/* ... */}
</ConfirmProvider>

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