Develop

meta/custom-icon-collections-creator-bin.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-
+/* eslint-disable no-console */
 import path from 'node:path'
 import process from 'node:process'
 
@@ -17,7 +17,31 @@ program
 
 const options = program.opts()
 
-if (options.source && options.target) {
-  createCustomCollectionFile(path.resolve(process.cwd(), options.source), path.resolve(process.cwd(), options.target))
-  console.log(chalk.green('Les icônes ont été générées')) // eslint-disable-line no-console
+const resultMessages = {
+  COULD_NOT_GET_COLLECTIONS_ERROR: 'Impossible de récupérer les collections d’icônes (cf. erreur ci-dessus)',
+  COULD_NOT_WRITE_FILE_ERROR: 'Impossible d’écrire le fichier cible (cf. erreur ci-dessus)',
+  COULD_NOT_LINT_FILE_ERROR: 'Impossible de linter le fichier cible (cf. erreur ci-dessus)',
 }
+
+;(async (options) => {
+  if (!options.source || !options.target) {
+    console.log(chalk.yellow('Veuillez indiquer la source et la cible'))
+  }
+
+  const result = await createCustomCollectionFile(path.resolve(process.cwd(), options.source), path.resolve(process.cwd(), options.target))
+
+  if (!result) {
+    console.log(chalk.green('Les icônes ont été générées'))
+    return
+  }
+
+  if (result.status === 'COULD_NOT_LINT_FILE_ERROR') {
+    console.log(chalk.green('Les icônes ont été générées'))
+    console.log(chalk.yellow(resultMessages[result.status]))
+    return
+  }
+
+  console.error(result.error)
+
+  console.log(chalk.red(resultMessages[result.status]))
+})(options)

meta/custom-icon-collections-creator.js

@@ -12,31 +12,86 @@ const execPromise = util.promisify(childProcess.exec)
  * Filtre les icônes d'une collection en fonction d'une liste de noms.
  * @function
  *
- * @param {string} sourcePath - Fichier source
- * @param {string} targetPath - Fichier destination
+ * @param {string} sourcePath - Chemin vers le fichier source
+ * @param {string} targetPath - Chemin vers le fichier destination
+ *
+ * @returns {Promise<{ status: 'COULD_NOT_GET_COLLECTIONS_ERROR' | 'COULD_NOT_WRITE_FILE_ERROR' | 'COULD_NOT_LINT_FILE_ERROR', error: Error } | undefined>} Le résultat si une erreur est survenue, undefined sinon
  *
  */
 export async function createCustomCollectionFile (sourcePath, targetPath) {
-  /**
-   * @type {[import('@iconify/vue').IconifyJSON, string[]][]}
-   */
-  const collectionsToFilter = await import(sourcePath).then(({ collectionsToFilter }) => collectionsToFilter)
+  const [error, collectionsToFilter] = await getCollectionsToFilter(sourcePath)
+
+  if (error) {
+    return {
+      status: 'COULD_NOT_GET_COLLECTIONS_ERROR',
+      error,
+    }
+  }
 
   const collections = collectionsToFilter.map(tuple => filterIcons(...tuple))
 
   const code = `import type { IconifyJSON } from '@iconify/vue'
 const collections: IconifyJSON[] = ${JSON.stringify(collections)}
 export default collections`
 
-  await fs.writeFile(targetPath, code)
+  try {
+    await fs.writeFile(targetPath, code)
+  } catch (error) {
+    console.error(error)
+    if (error instanceof Error) {
+      return {
+        status: 'COULD_NOT_WRITE_FILE_ERROR',
+        error,
+      }
+    }
+    return {
+      status: 'COULD_NOT_WRITE_FILE_ERROR',
+      error: new Error(`Erreur inconnue : ${error}`),
+    }
+  }
 
-  await runShellCommand(`npx eslint ${path.resolve(process.cwd(), targetPath)} --fix`)
+  try {
+    await runShellCommand(`npx eslint ${path.resolve(process.cwd(), targetPath)} --fix`)
+  } catch (error) {
+    if (error instanceof Error) {
+      return {
+        status: 'COULD_NOT_LINT_FILE_ERROR',
+        error,
+      }
+    }
+    return {
+      status: 'COULD_NOT_LINT_FILE_ERROR',
+      error: new Error(`Erreur inconnue : ${error}`),
+    }
+  }
 }
 
 /**
  * Fonctions utilitaires
  */
 
+/**
+ * @function
+ *
+ * @param {string} sourcePath - Chemin vers le fichier source
+ *
+ * @returns {Promise<[Error] | [null, [import('@iconify/vue').IconifyJSON, string[]][]]>}
+ */
+async function getCollectionsToFilter (sourcePath) {
+  try {
+    /**
+     * @type {[import('@iconify/vue').IconifyJSON, string[]][]}
+     */
+    const collectionsToFilter = await import(sourcePath).then(({ collectionsToFilter }) => collectionsToFilter)
+    return [null, collectionsToFilter]
+  } catch (error) {
+    if (error instanceof Error) {
+      return [error]
+    }
+    return [new Error(`Erreur inconnue : ${error}`)]
+  }
+}
+
 /**
  * Filtre les icônes d'une collection en fonction d'une liste de noms.
  * @function

src/components/DsfrAccordion/DsfrAccordion.md

@@ -26,7 +26,7 @@ Autres props :
 
 |  Nom                    |   Type                                    |  Défaut          | Obligatoire  |
 | ----------------------- | ----------------------------------------- | ---------------- | -------------|
-| `title`                 | *`string`*                                | `getRandomId('accordion')`                 | ✅           |
+| `title`                 | *`string`*                                | `useRandomId('accordion')`                 | ✅           |
 | `titleTag`              | [*`TitleTag`*](/docs/types.md#title-tag)  |    `'h3'`        |              |
 | `id`                    | *`string`*                                | *random string*  |              |
 

src/components/DsfrAccordion/DsfrAccordion.vue

@@ -2,7 +2,7 @@
 import { inject, onMounted, ref, toRef, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import { registerAccordionKey } from './injection-key'
 import type { DsfrAccordionProps } from './DsfrAccordion.types'
@@ -12,7 +12,7 @@ export type { DsfrAccordionProps }
 const props = withDefaults(
   defineProps<DsfrAccordionProps>(),
   {
-    id: () => getRandomId('accordion'),
+    id: () => useRandomId('accordion'),
     title: 'Sans intitulé',
     titleTag: 'h3',
   },

src/components/DsfrAlert/DsfrAlert.vue

@@ -3,12 +3,12 @@ import { computed } from 'vue'
 
 import type { DsfrAlertProps } from './DsfrAlert.types.js'
 
-import { getRandomId } from '@/utils/random-utils'
+import { useRandomId } from '@/utils/random-utils'
 
 export type { DsfrAlertProps, DsfrAlertType } from './DsfrAlert.types.js'
 
 const props = withDefaults(defineProps<DsfrAlertProps>(), {
-  id: () => getRandomId('basic', 'alert'),
+  id: () => useRandomId('basic', 'alert'),
   title: '',
   titleTag: 'h3',
   type: 'info',

src/components/DsfrBreadcrumb/DsfrBreadcrumb.md

@@ -22,7 +22,7 @@ Dans l’ordre, il se compose des éléments suivants :
 
 | Nom                 | Type   | Défaut                          | Description                                                                                                                                              |
 |---------------------|--------|---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|
-| breadcrumbId        | String | () => getRandomId('breadcrumb') | Identifiant unique pour le composant breadcrumb, généré automatiquement pour assurer l'accessibilité.                                                    |
+| breadcrumbId        | String | () => useRandomId('breadcrumb') | Identifiant unique pour le composant breadcrumb, généré automatiquement pour assurer l'accessibilité.                                                    |
 | links               | Array  | () => [{ text: '' }]            | Un tableau d'objets représentant les liens dans le fil d'Ariane. Chaque objet peut avoir une propriété 'text' et, optionnellement, 'to' pour les routes. |
 | navigationLabel     | String | `'vous êtes ici :'`             | Label affiché sur la balise `nav` du fil d’Ariane.                                                                                                       |
 | showBreadcrumbLabel | String | `'Voir le fil d’Ariane'`        | Label du bouton d'affichage du fil d’Ariane.                                                                                                             |

src/components/DsfrBreadcrumb/DsfrBreadcrumb.vue

@@ -2,14 +2,14 @@
 import { ref, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrBreadcrumbProps } from './DsfrBreadcrumb.types'
 
 export type { DsfrBreadcrumbProps }
 
 withDefaults(defineProps<DsfrBreadcrumbProps>(), {
-  breadcrumbId: () => getRandomId('breadcrumb'),
+  breadcrumbId: () => useRandomId('breadcrumb'),
   links: () => [{ text: '' }],
   navigationLabel: 'vous êtes ici :',
   showBreadcrumbLabel: 'Voir le fil d’Ariane',

src/components/DsfrCheckbox/DsfrCheckbox.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrCheckboxProps } from './DsfrCheckbox.types'
 
@@ -12,7 +12,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<DsfrCheckboxProps>(), {
-  id: () => getRandomId('basic', 'checkbox'),
+  id: () => useRandomId('basic', 'checkbox'),
   hint: '',
   errorMessage: '',
   validMessage: '',

src/components/DsfrCheckbox/DsfrCheckboxSet.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrCheckbox from './DsfrCheckbox.vue'
 import type { DsfrCheckboxSetProps } from './DsfrCheckbox.types'
@@ -11,7 +11,7 @@ export type { DsfrCheckboxSetProps }
 
 <script lang="ts" setup>
 const props = withDefaults(defineProps<DsfrCheckboxSetProps>(), {
-  titleId: () => getRandomId('checkbox', 'set'),
+  titleId: () => useRandomId('checkbox', 'set'),
   errorMessage: '',
   validMessage: '',
   legend: '',

src/components/DsfrDataTable/DsfrDataTable.vue

@@ -4,7 +4,7 @@ import { computed } from 'vue'
 import DsfrPagination from '../DsfrPagination/DsfrPagination.vue'
 import VIcon from '../VIcon/VIcon.vue'
 
-import { getRandomId } from '@/utils/random-utils'
+import { useRandomId } from '@/utils/random-utils'
 
 export type Page = { href?: string, label: string, title: string }
 
@@ -39,7 +39,7 @@ export type DsfrDataTableProps = {
 }
 
 const props = withDefaults(defineProps<DsfrDataTableProps>(), {
-  id: () => getRandomId('table'),
+  id: () => useRandomId('table'),
   topActionsRow: () => [],
   bottomActionsRow: () => [],
   currentPage: 0,

src/components/DsfrFileUpload/DsfrFileUpload.md

@@ -12,7 +12,7 @@ Bienvenue dans la documentation du composant `DsfrFileUpload`. Ce composant est
 
 | Nom            | Type        | Défaut                  | Obligatoire   | Description                                                    |
 |----------------|-------------|-------------------------|---------------|----------------------------------------------------------------|
-| `id`           | `Function`  | `() => getRandomId(...)`|               | Identifiant unique pour le composant de téléchargement de fichier. Si non spécifié, un ID aléatoire est généré.    |
+| `id`           | `Function`  | `() => useRandomId(...)`|               | Identifiant unique pour le composant de téléchargement de fichier. Si non spécifié, un ID aléatoire est généré.    |
 | `label`        | `string`    | `'Ajouter un fichier'`  |               | Libellé pour le bouton de téléchargement de fichier.          |
 | `accept`       | `string \| string[]`  | `undefined`   |               | Types de fichiers acceptés, spécifiés sous forme de chaîne de caractères (comme l’attribut `accept` de HTML) ou d'un tableau de chaînes de caractères (qui sera transformé en chaîne).   |
 | `hint`         | `string`    | `''`                    |               | Texte d'indice pour guider l'utilisateur.                    |

src/components/DsfrFileUpload/DsfrFileUpload.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrFileUploadProps } from './DsfrFileUpload.types'
 
@@ -12,7 +12,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<DsfrFileUploadProps>(), {
-  id: () => getRandomId('file-upload'),
+  id: () => useRandomId('file-upload'),
   label: 'Ajouter un fichier',
   accept: undefined,
   hint: '',

src/components/DsfrHeader/DsfrHeader.vue

@@ -212,7 +212,7 @@ provide(registerNavigationLinkKey, () => {
               class="fr-header__search  fr-modal"
             >
               <DsfrSearchBar
-                :searchbar-id="searchbarId"
+                :id="searchbarId"
                 :label="searchLabel"
                 :model-value="modelValue"
                 :placeholder="placeholder"

src/components/DsfrInput/DsfrInput.md

@@ -8,7 +8,7 @@ Le composant `DsfrInput`, outil essentiel dans l'arsenal de tout développeur Vu
 
 | Nom             | Type          | Défaut                  | Obligatoire   | Description                                                                                                 |
 |-----------------|---------------|-------------------------|---------------|-------------------------------------------------------------------------------------------------------------|
-| `id`            | `Function`    | `() => getRandomId(...)`|               | Identifiant unique pour l'input. Si non spécifié, un ID aléatoire est généré.                               |
+| `id`            | `Function`    | `() => useRandomId(...)`|               | Identifiant unique pour l'input. Si non spécifié, un ID aléatoire est généré.                               |
 | `descriptionId` | `string`      | `undefined`             |               | ID pour la description associée à l'input. Utile pour l'accessibilité.                                      |
 | `hint`          | `string`      | `''`                    |               | Texte d'indice pour guider l'utilisateur.                                                                   |
 | `label`         | `string`      | `''`                    |               | Le libellé de l'input.                                                                                      |

src/components/DsfrInput/DsfrInput.vue

@@ -2,7 +2,7 @@
 import { computed, ref, useAttrs } from 'vue'
 import type { Ref } from 'vue'
 
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrInputProps } from './DsfrInput.types'
 
@@ -13,7 +13,7 @@ defineOptions({
 })
 
 const props = withDefaults(defineProps<DsfrInputProps>(), {
-  id: () => getRandomId('basic', 'input'),
+  id: () => useRandomId('basic', 'input'),
   descriptionId: undefined,
   hint: '',
   label: '',

src/components/DsfrInput/DsfrInputGroup.md

@@ -10,7 +10,7 @@ Ce composant est très utile si vous souhaitez afficher un message d’erreur ou
 
 | Nom             | Type        | Défaut                  | Obligatoire   | Description                                                   |
 |-----------------|-------------|-------------------------|---------------|---------------------------------------------------------------|
-| `descriptionId` | `Function`           | `() => getRandomId(...)`|               | ID unique pour la description du groupe, généré automatiquement si non spécifié. |
+| `descriptionId` | `Function`           | `() => useRandomId(...)`|               | ID unique pour la description du groupe, généré automatiquement si non spécifié. |
 | `hint`          | `string`             | `''`                    |               | Texte d'indice pour guider l'utilisateur dans le groupe de champs. |
 | `label`         | `string`             | `''`                    |               | Le libellé associé au groupe de champs.                       |
 | `labelClass`    | `string`             | `''`                    |               | Classe CSS personnalisée pour le style du libellé.            |

src/components/DsfrInput/DsfrInputGroup.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import DsfrInput from './DsfrInput.vue'
 import type { DsfrInputGroupProps } from './DsfrInput.types'
@@ -11,7 +11,7 @@ defineOptions({
 })
 
 withDefaults(defineProps<DsfrInputGroupProps>(), {
-  descriptionId: () => getRandomId('input', 'group'),
+  descriptionId: () => useRandomId('input', 'group'),
   hint: '',
   label: '',
   labelClass: '',

src/components/DsfrLanguageSelector/DsfrLanguageSelector.md

@@ -26,7 +26,7 @@ Ce composant est utilisé en interne dans [DsfrHeader](/composants/DsfrHeader) (
 
 | Propriété          | Type                          | Description                                                   | Valeur par défaut         |
 |--------------------|-------------------------------|---------------------------------------------------------------|---------------------------|
-| `id`               | `string`                      | Identifiant unique pour les éléments de contrôle d'accessibilité. | `getRandomId('language-selector')` |
+| `id`               | `string`                      | Identifiant unique pour les éléments de contrôle d'accessibilité. | `useRandomId('language-selector')` |
 | `languages`        | [`DsfrLanguageSelectorElement[]`](/types#dsfrlanguageselector) | Liste des langues disponibles. Chaque langue est représentée par un objet contenant un `codeIso` et un `label`. | `[]`                      |
 | `currentLanguage`  | `string`                      | Code ISO de la langue actuellement sélectionnée.              | `'fr'`                    |
 

src/components/DsfrLanguageSelector/DsfrLanguageSelector.vue

@@ -2,14 +2,14 @@
 import { computed, ref, watch } from 'vue'
 
 import { useCollapsable } from '../../composables'
-import { getRandomId } from '../../utils/random-utils'
+import { useRandomId } from '../../utils/random-utils'
 
 import type { DsfrLanguageSelectorElement, DsfrLanguageSelectorProps } from './DsfrLanguageSelector.types'
 
 export type { DsfrLanguageSelectorElement, DsfrLanguageSelectorProps }
 
 const props = withDefaults(defineProps<DsfrLanguageSelectorProps>(), {
-  id: () => getRandomId('language-selector'),
+  id: () => useRandomId('language-selector'),
   languages: () => [],
   currentLanguage: 'fr',
 })

src/components/DsfrModal/DsfrModal.md

@@ -26,7 +26,7 @@ Elle se compose des éléments suivants :
 | Propriété            | Type                           | Description                                                                                                    | Valeur par défaut                                              | Obligatoire  |
 |----------------------|--------------------------------|----------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------|--------------|
 | `title`              | `string`                       | Titre de la modale.                                                                                            |                                                                | ✅            |
-| `modalId`            | `string`                       | Identifiant unique pour la modale.                                                                             | `getRandomId('modal', 'dialog')`                               |              |
+| `modalId`            | `string`                       | Identifiant unique pour la modale.                                                                             | `useRandomId('modal', 'dialog')`                               |              |
 | `opened`             | `boolean`                      | Indique si la modale est ouverte.                                                                              | `false`                                                        |              |
 | `actions`            | `DsfrButtonProps[]`            | Liste des boutons d'action pour le pied de page de la modale.                                                  | `[]`                                                           |              |
 | `isAlert`            | `boolean`                      | Spécifie si la modale est une alerte (rôle `"alertdialog"` si `true`) ou non (le rôle sera  alors `"dialog"`). | `false`                                                        |              |