--- title: "Migration des composants UI vers @framework/ui" description: "Guide de migration pour les composants déplacés de frappe-ui vers @framework/ui" icon: i-mdi-swap-horizontal badge: "Nouveau" ---

Migration des composants UI vers @framework/ui

Cette page explique comment migrer vos applications pour utiliser les composants qui ont été déplacés de frappe-ui vers @framework/ui.

Composants concernés

Les composants suivants ont été déplacés :

Modifications nécessaires

1. Mise à jour des imports

Remplacez tous les imports provenant de frappe-ui/frappe par des imports depuis @framework/ui :

- import { useTelemetry, TrialBanner, DataImport } from 'frappe-ui/frappe';
+ import { useTelemetry, TrialBanner, DataImport } from '@framework/ui';

2. Adaptation du composant DataImport

Le composant DataImport a subi plusieurs modifications internes :

• Cartographie des colonnes : Utilise désormais un Combobox au lieu d'un Autocomplete. Le mapping stocke le nom du champ cible plutôt que son libellé.
• Logs d'importation : Utilise un HoverCard au lieu d'un Popover avec trigger="hover".
• Socket : Le composant nécessite désormais que le socket soit passé en prop pour les mises à jour en temps réel.

Exemple d'utilisation mise à jour :

<template>
  <DataImport
    doctype="Client"
    :socket="socket"
    @import-complete="handleImportComplete"
  />
</template>

<script setup>
import { DataImport } from '@framework/ui';
import { socket } from '@/utils/socket';

const handleImportComplete = (result) => {
  console.log('Import terminé:', result);
};
</script>

3. Configuration de la télémétrie

La configuration de la télémétrie reste similaire, mais doit être importée depuis le nouveau package :

import { telemetryPlugin } from '@framework/ui';

app.use(telemetryPlugin, {
  enabled: true,
  endpoint: '/api/method/frappe.telemetry.log',
  appName: 'mon_application'
});

4. Utilisation de l'onboarding

L'API d'onboarding a été typée et améliorée :

import { useOnboarding } from '@framework/ui';

const { startOnboarding } = useOnboarding();

startOnboarding({
  steps: [
    {
      title: "Bienvenue",
      description: "Découvrez les fonctionnalités principales.",
      target: '.navbar'
    },
    // ... autres étapes
  ]
});

Bonnes pratiques

1. Testez vos applications : Après la migration, testez soigneusement toutes les fonctionnalités qui utilisent ces composants.
2. Mettez à jour vos dépendances : Assurez-vous que votre projet utilise bien les dernières versions des packages concernés.
3. Documentez les changements : Mettez à jour la documentation interne de votre projet pour refléter ces modifications.
4. Vérifiez les performances : Certains composants comme DataImport peuvent avoir un impact sur les performances lors de gros imports.

Problèmes connus

• Socket manquant dans DataImport : Si vous ne passez pas le socket en prop, le composant fonctionnera mais ne rafraîchira pas les données pendant l'import.
• Compatibilité : Assurez-vous que toutes vos applications utilisent bien la même version de @framework/ui pour éviter les conflits.

::: dokos Cette page est destinée aux développeurs et administrateurs système responsables de la maintenance des applications Dokos. :::