feat : reorganisation de la structure projet

app/story/radio/RadioButton.story.vue

@@ -0,0 +1,187 @@
+<template>
+  <Story title="Input/Radio">
+    <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>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`simple-${option.value}`"
+            v-model="primaryChoice"
+            :label="option.label"
+            :value="option.value"
+            name="primary-choice"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Preselected</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`preselected-${option.value}`"
+            v-model="preselectedChoice"
+            :label="option.label"
+            :value="option.value"
+            name="preselected-choice"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Error</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`error-${option.value}`"
+            v-model="errorChoice"
+            :label="option.label"
+            :value="option.value"
+            name="error-choice"
+            error="Selection required"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Success</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`success-${option.value}`"
+            v-model="successChoice"
+            :label="option.label"
+            :value="option.value"
+            name="success-choice"
+            success="Selection saved"
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Disabled</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`disabled-${option.value}`"
+            v-model="disabledChoice"
+            :label="option.label"
+            :value="option.value"
+            name="disabled-choice"
+            disabled
+          />
+        </div>
+      </div>
+
+      <div class="rounded-lg border p-4">
+        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
+        <div class="space-y-1">
+          <MalioRadioButton
+            v-for="option in options"
+            :key="`readonly-${option.value}`"
+            v-model="readonlyChoice"
+            :label="option.label"
+            :value="option.value"
+            name="readonly-choice"
+            readonly
+            hint="Readonly group"
+          />
+        </div>
+      </div>
+    </div>
+  </Story>
+</template>
+
+<docs lang="md">
+# MalioRadioButton
+
+Composant radio personnalisé compatible avec `v-model`, les groupes via `name`,
+et les états visuels de validation.
+
+------------------------------------------------------------------------
+
+## Props détaillées
+
+### modelValue
+
+-   Type: `string | number | boolean | null | undefined`
+-   Description: Valeur actuellement sélectionnée dans le groupe.
+-   Comportement:
+-   Compatible avec `v-model`.
+-   Le radio est coché quand `modelValue === value`.
+
+### value
+
+-   Type: `string | number | boolean | null | undefined`
+-   Description: Valeur portée par le radio courant.
+
+### label
+
+-   Type: `string`
+-   Description: Texte affiché à droite du radio.
+
+### name
+
+-   Type: `string`
+-   Description: Nom HTML partagé par les radios d’un même groupe.
+
+------------------------------------------------------------------------
+
+## États
+
+### error
+
+-   Type: `string`
+-   Description: Message et style d’erreur.
+
+### success
+
+-   Type: `string`
+-   Description: Message et style de succès.
+-   Comportement: ignoré si `error` est présent.
+
+### disabled
+
+-   Type: `boolean`
+-   Description: Désactive le radio.
+
+### readonly
+
+-   Type: `boolean`
+-   Description: Empêche le changement de valeur tout en gardant le rendu affiché.
+
+### hint
+
+-   Type: `string`
+-   Description: Message d’aide sous le groupe.
+
+------------------------------------------------------------------------
+
+## Events
+
+### update:modelValue
+
+-   Émis à la sélection d’un radio.
+-   Retourne la `value` du radio sélectionné.
+
+</docs>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+import MalioRadioButton from '../../components/malio/radio/RadioButton.vue'
+
+const options = [
+  {label: 'Option 1', value: 'option1'},
+  {label: 'Option 2', value: 'option2'},
+  {label: 'Option 3', value: 'option3'},
+  {label: 'Option 4', value: 'option4'},
+]
+
+const primaryChoice = ref<string | null>(null)
+const preselectedChoice = ref<string | null>('option2')
+const errorChoice = ref<string | null>(null)
+const successChoice = ref<string | null>('option3')
+const disabledChoice = ref<string | null>('option2')
+const readonlyChoice = ref<string | null>('option4')
+</script>