feat : ajout de state dans les histoires des composants

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' },