feat : reorganisation de la structure projet

app/story/checkbox/inputCheckbox.story.vue

@@ -0,0 +1,178 @@
+<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>
+
+<docs lang="md">
+# MalioCheckbox
+
+Composant checkbox custom avec `v-model`, message d'aide, et états visuels
+`error` / `success`.
+
+------------------------------------------------------------------------
+
+## Props
+
+### id
+
+- Type: `string`
+- Description: Identifiant HTML du checkbox.
+- Comportement: si absent, un id unique est généré automatiquement.
+
+### label
+
+- Type: `string`
+- Description: Texte affiche a cote de la case.
+
+### name
+
+- Type: `string`
+- Description: Attribut `name` du champ.
+
+### modelValue
+
+- Type: `boolean | null | undefined`
+- Description: État coche du composant.
+
+### inputClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées a l'input natif.
+
+### labelClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées au label.
+
+### groupClass
+
+- Type: `string`
+- Description: Classes supplémentaires appliquées au conteneur.
+
+### required
+
+- Type: `boolean`
+- Description: Ajoute l'attribut HTML `required`.
+
+### disabled
+
+- Type: `boolean`
+- Description: Désactive le composant.
+
+### readonly
+
+- Type: `boolean`
+- Description: Empêche la mise a jour du `v-model` tout en gardant
+  l'affichage courant.
+
+### hint
+
+- Type: `string`
+- Description: Message d'aide affiche sous le checkbox.
+
+### error
+
+- Type: `string`
+- Description: Message d'erreur.
+- Effet: prioritaire sur `success`, applique `aria-invalid` et la couleur
+  d'erreur au texte et a la case.
+
+### success
+
+- Type: `string`
+- Description: Message de succès.
+- Effet: applique la couleur de succès au texte et a la case si `error`
+  est absent.
+
+------------------------------------------------------------------------
+
+## Accessibilité
+
+- `aria-invalid` est active si `error` existe.
+- `aria-describedby` pointe vers le message affiche.
+- L'input natif reste present pour conserver le comportement formulaire.
+
+------------------------------------------------------------------------
+
+## Event
+
+### update:modelValue
+
+- Émis a chaque changement de l'état coche.
+- Retourne un booléen `true` ou `false`.
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioCheckbox from '../../components/malio/checkbox/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>