feat : ajout de state dans les histoires des composants

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>