front:hooks [SmarMaker

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
# Hooks SmartCommon

SmartCommon fournit un ensemble de hooks React pour faciliter le développement d'applications.

## Hooks globaux

Ces hooks utilisent le contexte de l'application et doivent être utilisés à l'intérieur du ''Provider''.

### useApi

Gestion des appels API avec authentification JWT automatique.

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

const api = useApi();

// Connexion
await api.login({ login, password, rememberMe: true });

// Déconnexion
await api.logout();

// Requête authentifiée
const data = await api.private.get('items').json();

// Requête publique
const info = await api.public.get('public/info').json();
```

Voir [[requetes_api|Requêtes API]] pour plus de détails.

### useGlobalStates

État global avec persistance automatique (localStorage/sessionStorage).

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

const gst = useGlobalStates();

// Lire
const user = gst.get('user');
const theme = gst.get('settings.theme');

// Écrire (persistant)
gst.local.set('user', userData);

// Écrire (session uniquement)
gst.session.set('tempData', data);

// Supprimer
gst.unset('user');

// Accès direct aux valeurs
const { user, settings } = gst.values;
```

Voir [[stockage_de_donnees|Stockage de données]] pour plus de détails.

### useNavigation

Utilitaires de navigation pour react-router-dom.

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

const nav = useNavigation();

// Navigation programmatique
nav.navigate('/dashboard');
nav.navigate(-1); // Retour arrière

// Informations de route
const { pathname, search, hash } = nav.location;

// Paramètres d'URL
const { id } = nav.params;
```

### useLibConfig

Accès à la configuration de l'application.

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

const config = useLibConfig();

console.log(config.debug);     // true/false
console.log(config.api);       // { prefixUrl, timeout, ... }
```

## Hooks locaux

Ces hooks gèrent un état local au composant.

### useStates

Gestion d'état local avec path notation.

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

const st = useStates({
  initialStates: {
    count: 0,
    user: { name: '', email: '' },
    items: []
  },
  debug: true
});

// Lire
st.get('count');           // 0
st.get('user.name');       // ''
st.get('items[0]');        // undefined

// Écrire
st.set('count', 1);
st.set('user.name', 'John');
st.set('items[]', { id: 1 });  // Push dans le tableau

// Écrire avec fonction
st.set('count', prev => prev + 1);

// Supprimer
st.unset('user.email');
st.unset('items[0]');

// Accès direct
const { count, user, items } = st.values;
```

### useForm

Gestion de formulaires avec état et erreurs.

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

const form = useForm({
  defaultValues: {
    name: '',
    email: ''
  },
  debug: true
});

// Lire les valeurs
const name = form.get('values.name');

// Définir un champ avec validation
form.setField({
  name: 'email',
  value: 'test@example.com',
  errors: {
    required: { condition: !value },
    format: { condition: !isValidEmail(value) }
  }
});

// Vérifier les erreurs
const hasEmailError = form.get('errors.email.required');

// Accès direct
const { values, errors, isFormSubmitting, isFormSubmitted } = form;
```

### useDb

Base de données IndexedDB via Dexie.

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

const db = useDb({
  name: 'myApp',
  version: 1,
  stores: {
    items: 'id++, name, category',
    logs: 'id++, action, timestamp'
  },
  debug: true
});

// CRUD operations
await db.items.add({ name: 'Item 1', category: 'A' });
await db.items.update(1, { name: 'Item modifié' });
await db.items.delete(1);

// Requêtes
const all = await db.items.toArray();
const filtered = await db.items.where('category').equals('A').toArray();
const item = await db.items.get(1);
```

Voir [[stockage_de_donnees|Stockage de données]] pour plus de détails.

## Hooks utilitaires

### useIntl

Formatage de dates et nombres avec l'API Intl.

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

const intl = useIntl();

// Formater une date
const formatted = intl.DateTimeFormat(Date.now());
// "11/01/2025, 14:30:00"

// Avec options personnalisées
const dateOnly = intl.DateTimeFormat(Date.now(), 'fr-FR', {
  year: 'numeric',
  month: 'long',
  day: 'numeric'
});
// "11 janvier 2025"
```

### useAnimation

Gestion d'animations avec Framer Motion.

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

const { start, animations, setAnimations } = useAnimation({
  fadeIn: { value: false, state: null },
  slideIn: { value: false, state: null }
});

// start devient true après le premier rendu
// Utilisez-le pour déclencher des animations d'entrée

useEffect(() => {
  if (start) {
    setAnimations(prev => ({
      ...prev,
      fadeIn: { ...prev.fadeIn, state: 'visible' }
    }));
  }
}, [start]);
```

### useFile

Utilitaires pour la gestion de fichiers.

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

const { resizeImage } = useFile();

// Redimensionner une image
const handleFileChange = async (e) => {
  const file = e.target.files[0];

  const base64 = await resizeImage(file, {
    maxWidth: 1920,
    maxHeight: 1080,
    quality: 85
  });

  console.log(base64); // data:image/jpeg;base64,...
};
```

### useVariantMerger

Fusion de props avec variants de composants (usage interne principalement).

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

const MyComponent = (props) => {
  const { variantProps, mergeProps } = useVariantMerger('MyComponent', props);

  return (
    <div {...mergeProps('container', p => ({
      ...p,
      className: `base-class ${p.className || ''}`
    }))}>
      {variantProps.children}
    </div>
  );
};
```

### useListDnD

Drag and drop pour listes (réordonnancement).

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

const { items, handleDragStart, handleDragOver, handleDrop } = useListDnD({
  initialItems: ['Item 1', 'Item 2', 'Item 3'],
  onReorder: (newItems) => console.log('Nouvel ordre:', newItems)
});
```

### useWindow

Informations sur la fenêtre du navigateur.

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

const { width, height, isMobile, isTablet, isDesktop } = useWindow();

// Responsive conditionnel
if (isMobile) {
  return <MobileView />;
}
```

## Tableau récapitulatif

^ Hook ^ Catégorie ^ Description ^
| ''useApi'' | Global | Appels API avec auth JWT |
| ''useGlobalStates'' | Global | État global persistant |
| ''useNavigation'' | Global | Navigation react-router |
| ''useLibConfig'' | Global | Configuration de l'app |
| ''useStates'' | Local | État local avec path notation |
| ''useForm'' | Local | Gestion de formulaires |
| ''useDb'' | Local | Base IndexedDB |
| ''useIntl'' | Utilitaire | Formatage dates/nombres |
| ''useAnimation'' | Utilitaire | Animations Framer Motion |
| ''useFile'' | Utilitaire | Manipulation de fichiers |
| ''useVariantMerger'' | Utilitaire | Fusion de variants |
| ''useListDnD'' | Utilitaire | Drag and drop |
| ''useWindow'' | Utilitaire | Infos fenêtre |

## Voir aussi

  * [[smartcommon|SmartCommon]] - Liste des composants
  * [[requetes_api|Requêtes API]] - Documentation détaillée useApi
  * [[stockage_de_donnees|Stockage de données]] - Documentation détaillée stockage