From 9843f4d032770780f34b24907f4dd2a27a45a115 Mon Sep 17 00:00:00 2001
From: tristan <tristan@yuno.malio.fr>
Date: Thu, 19 Mar 2026 17:45:03 +0100
Subject: [PATCH] feat : ajout de state dans les histoires des composants

---
 app/story/InputSelect.story.vue    |  80 +++++++++--
 app/story/inputAmount.story.vue    |  67 ++++++++-
 app/story/inputCheckbox.story.vue  |  64 +++++++++
 app/story/inputText.story.vue      |  87 +++++++++++-
 app/story/inputTextArea.story.vue  |  78 ++++++++++-
 app/story/selectCheckbox.story.vue | 213 +++++++++++++++++++++++++++++
 6 files changed, 568 insertions(+), 21 deletions(-)
 create mode 100644 app/story/selectCheckbox.story.vue

diff --git a/app/story/InputSelect.story.vue b/app/story/InputSelect.story.vue
index 7939beb..44ef6f9 100644
--- a/app/story/InputSelect.story.vue
+++ b/app/story/InputSelect.story.vue
@@ -1,11 +1,67 @@
 <template>
-  <Story
-    title="Select"
-  >
-      <MalioSelect
-        v-model="value"
-        :options="options"
-      />
+  <Story title="Select">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioSelect
+          v-model="simpleValue"
+          :options="options"
+          label="Pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Valeur présélectionnée</h2>
+        <MalioSelect
+          v-model="preselectedValue"
+          :options="options"
+          label="Pays"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioSelect
+          v-model="disabledValue"
+          :options="options"
+          label="Pays"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioSelect
+          v-model="hintValue"
+          :options="options"
+          label="Pays"
+          hint="Sélectionnez votre pays de résidence"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioSelect
+          v-model="errorValue"
+          :options="options"
+          label="Pays"
+          error="Ce champ est obligatoire"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioSelect
+          v-model="successValue"
+          :options="options"
+          label="Pays"
+          success="Sélection validée"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -121,9 +177,15 @@ largeur.
 </docs>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import {ref} from 'vue'
 import MalioSelect from '../components/malio/Select.vue'
-const value = ref<string | number | null>(null)
+
+const simpleValue = ref<string | number | null>(null)
+const preselectedValue = ref<string | number | null>('fr')
+const disabledValue = ref<string | number | null>('be')
+const hintValue = ref<string | number | null>(null)
+const errorValue = ref<string | number | null>(null)
+const successValue = ref<string | number | null>('ch')
 const options = [
   { label: 'France', value: 'fr' },
   { label: 'Belgique', value: 'be' },
diff --git a/app/story/inputAmount.story.vue b/app/story/inputAmount.story.vue
index 84939de..a3e1b7d 100644
--- a/app/story/inputAmount.story.vue
+++ b/app/story/inputAmount.story.vue
@@ -1,8 +1,59 @@
 <template>
-  <Story
-    title="Input/Amount"
-  >
-      <MalioInputAmount/>
+  <Story title="Input/Amount">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputAmount
+          v-model="simpleValue"
+          label="Montant"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputAmount
+          v-model="hintValue"
+          label="Montant HT"
+          hint="Montant hors taxes en euros"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputAmount
+          v-model="disabledValue"
+          label="Montant"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputAmount
+          v-model="readonlyValue"
+          label="Montant"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputAmount
+          v-model="errorValue"
+          label="Montant"
+          error="Le montant doit être supérieur à 0"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputAmount
+          v-model="successValue"
+          label="Montant"
+          success="Montant valide"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -196,5 +247,13 @@ Composant input dédié à la saisie d’un montant décimal avec label flottant
 </docs>
 
 <script setup lang="ts">
+import {ref} from 'vue'
 import MalioInputAmount from '../components/malio/InputAmount.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('1500.00')
+const readonlyValue = ref('2450.75')
+const errorValue = ref('0.00')
+const successValue = ref('350.50')
 </script>
diff --git a/app/story/inputCheckbox.story.vue b/app/story/inputCheckbox.story.vue
index 10d3667..5b8724d 100644
--- a/app/story/inputCheckbox.story.vue
+++ b/app/story/inputCheckbox.story.vue
@@ -1,9 +1,67 @@
 <template>
   <Story title="Input/Checkbox">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
         <MalioCheckbox
           v-model="simpleValue"
           label="Accepter les conditions"
         />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Coché</h2>
+        <MalioCheckbox
+          v-model="checkedValue"
+          label="Newsletter activée"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioCheckbox
+          v-model="hintValue"
+          label="Recevoir les notifications"
+          hint="Vous pouvez désactiver à tout moment"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioCheckbox
+          v-model="disabledValue"
+          label="Option verrouillée"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioCheckbox
+          v-model="readonlyValue"
+          label="Accepté par l'utilisateur"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioCheckbox
+          v-model="errorValue"
+          label="Accepter les conditions"
+          error="Vous devez accepter les conditions"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioCheckbox
+          v-model="successValue"
+          label="Conditions acceptées"
+          success="Merci"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -111,4 +169,10 @@ import {ref} from 'vue'
 import MalioCheckbox from '../components/malio/Checkbox.vue'
 
 const simpleValue = ref(false)
+const checkedValue = ref(true)
+const hintValue = ref(false)
+const disabledValue = ref(true)
+const readonlyValue = ref(true)
+const errorValue = ref(false)
+const successValue = ref(true)
 </script>
diff --git a/app/story/inputText.story.vue b/app/story/inputText.story.vue
index e6db366..1024ce1 100644
--- a/app/story/inputText.story.vue
+++ b/app/story/inputText.story.vue
@@ -1,8 +1,77 @@
 <template>
-  <Story
-    title="Input/Text"
-  >
-      <MalioInputText/>
+  <Story title="Input/Text">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputText
+          v-model="simpleValue"
+          label="Nom"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputText
+          v-model="hintValue"
+          label="Email"
+          hint="Votre adresse email professionnelle"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputText
+          v-model="disabledValue"
+          label="Nom"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputText
+          v-model="readonlyValue"
+          label="Nom"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputText
+          v-model="errorValue"
+          label="Email"
+          error="Adresse email invalide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputText
+          v-model="successValue"
+          label="Email"
+          success="Email valide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec masque (téléphone)</h2>
+        <MalioInputText
+          v-model="maskValue"
+          label="Téléphone"
+          mask="## ## ## ## ##"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec icône</h2>
+        <MalioInputText
+          v-model="iconValue"
+          label="Recherche"
+          icon-name="mdi:magnify"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -196,5 +265,15 @@ largeur.
 </docs>
 
 <script setup lang="ts">
+import {ref} from 'vue'
 import MalioInputText from '../components/malio/InputText.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('Jean Dupont')
+const readonlyValue = ref('Marie Martin')
+const errorValue = ref('jean@')
+const successValue = ref('jean@example.com')
+const maskValue = ref('06 12 34 56 78')
+const iconValue = ref('')
 </script>
diff --git a/app/story/inputTextArea.story.vue b/app/story/inputTextArea.story.vue
index ef903ed..052db5b 100644
--- a/app/story/inputTextArea.story.vue
+++ b/app/story/inputTextArea.story.vue
@@ -1,8 +1,69 @@
 <template>
-  <Story
-    title="Input/TextArea"
-  >
-      <MalioInputTextArea/>
+  <Story title="Input/TextArea">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioInputTextArea
+          v-model="simpleValue"
+          label="Description"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioInputTextArea
+          v-model="hintValue"
+          label="Commentaire"
+          hint="255 caractères maximum"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioInputTextArea
+          v-model="disabledValue"
+          label="Description"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <MalioInputTextArea
+          v-model="readonlyValue"
+          label="Description"
+          readonly
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioInputTextArea
+          v-model="errorValue"
+          label="Description"
+          error="Ce champ est obligatoire"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioInputTextArea
+          v-model="successValue"
+          label="Description"
+          success="Description valide"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec compteur</h2>
+        <MalioInputTextArea
+          v-model="counterValue"
+          label="Bio"
+          :max-length="100"
+          :show-counter="true"
+        />
+      </div>
+    </div>
   </Story>
 </template>
 
@@ -188,5 +249,14 @@ redimensionnement.
 </docs>
 
 <script setup lang="ts">
+import {ref} from 'vue'
 import MalioInputTextArea from '../components/malio/InputTextArea.vue'
+
+const simpleValue = ref('')
+const hintValue = ref('')
+const disabledValue = ref('Texte non modifiable')
+const readonlyValue = ref('Texte en lecture seule')
+const errorValue = ref('')
+const successValue = ref('Description complète et détaillée du projet.')
+const counterValue = ref('Un texte de démonstration')
 </script>
diff --git a/app/story/selectCheckbox.story.vue b/app/story/selectCheckbox.story.vue
new file mode 100644
index 0000000..742580c
--- /dev/null
+++ b/app/story/selectCheckbox.story.vue
@@ -0,0 +1,213 @@
+<template>
+  <Story title="Select/Checkbox">
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Simple</h2>
+        <MalioSelectCheckbox
+          v-model="simpleValue"
+          :options="options"
+          label="Pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec tags</h2>
+        <MalioSelectCheckbox
+          v-model="tagValue"
+          :options="options"
+          label="Pays"
+          :display-tag="true"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Avec hint</h2>
+        <MalioSelectCheckbox
+          v-model="hintValue"
+          :options="options"
+          label="Pays"
+          hint="Sélectionnez un ou plusieurs pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
+        <MalioSelectCheckbox
+          v-model="disabledValue"
+          :options="options"
+          label="Pays"
+          disabled
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
+        <MalioSelectCheckbox
+          v-model="errorValue"
+          :options="options"
+          label="Pays"
+          error="Sélectionnez au moins un pays"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Succès</h2>
+        <MalioSelectCheckbox
+          v-model="successValue"
+          :options="options"
+          label="Pays"
+          success="Sélection validée"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Tout sélectionner</h2>
+        <MalioSelectCheckbox
+          v-model="selectAllValue"
+          :options="options"
+          label="Pays"
+          :display-select-all="true"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Tout sélectionner (label custom)</h2>
+        <MalioSelectCheckbox
+          v-model="selectAllCustomValue"
+          :options="options"
+          label="Pays"
+          :display-select-all="true"
+          select-all-label="Cocher tout"
+          empty-option-label="Aucune sélection"
+        />
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioSelectCheckbox
+
+Composant select avec checkboxes multiples, label flottant, tags optionnels,
+états visuels (erreur / succès) et option "tout sélectionner".
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### modelValue
+
+-   Type: Array<string | number>
+-   Description: Tableau des valeurs sélectionnées.
+
+### options
+
+-   Type: Array<{ label: string; value: string | number }>
+-   Description: Liste des options disponibles.
+
+### emptyOptionLabel
+
+-   Type: string
+-   Description: Texte affiché quand aucune option n'est sélectionnée (mode tag).
+
+### label
+
+-   Type: string
+-   Description: Texte affiché comme label flottant.
+
+------------------------------------------------------------------------
+
+## Apparence & Style
+
+### displayTag
+
+-   Type: boolean
+-   Défaut: false
+-   Description: Affiche les sélections sous forme de tags au lieu du compteur.
+
+### displaySelectAll
+
+-   Type: boolean
+-   Défaut: false
+-   Description: Affiche une checkbox "Tout sélectionner / Tout désélectionner" en haut de la liste.
+
+### selectAllLabel
+
+-   Type: string
+-   Défaut: "Tout sélectionner"
+-   Description: Label de la checkbox de sélection globale.
+
+### minWidth / maxWidth
+
+-   Type: string
+-   Description: Classes Tailwind pour contraindre la largeur.
+
+------------------------------------------------------------------------
+
+## États & Messages
+
+### hint
+
+-   Type: string
+-   Description: Message d'aide affiché sous le champ.
+
+### error
+
+-   Type: string
+-   Description: Message d'erreur. Prioritaire sur success et hint.
+
+### success
+
+-   Type: string
+-   Description: Message de succès. Actif si error est absent.
+
+### disabled
+
+-   Type: boolean
+-   Description: Désactive complètement le composant.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+-   `aria-expanded` et `aria-controls` sur le bouton.
+-   `role="listbox"` sur la liste, `role="option"` et `aria-selected` sur chaque option.
+-   `aria-invalid` activé si error existe.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à chaque changement de sélection.
+-   Retourne un tableau de valeurs.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioSelectCheckbox from '../components/malio/SelectCheckbox.vue'
+
+const options = [
+  {label: 'France', value: 'fr'},
+  {label: 'Belgique', value: 'be'},
+  {label: 'Suisse', value: 'ch'},
+  {label: 'Canada', value: 'ca'},
+  {label: 'Allemagne', value: 'de'},
+]
+
+const simpleValue = ref<Array<string | number>>([])
+const tagValue = ref<Array<string | number>>(['fr', 'be'])
+const hintValue = ref<Array<string | number>>([])
+const disabledValue = ref<Array<string | number>>(['fr', 'ch'])
+const errorValue = ref<Array<string | number>>([])
+const successValue = ref<Array<string | number>>(['be', 'ca'])
+const selectAllValue = ref<Array<string | number>>([])
+const selectAllCustomValue = ref<Array<string | number>>([])
+</script>