fix: suppression du doublon du composant Checkbox (#26)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Co-authored-by: kevin <kevin@yuno.malio.fr>
Co-authored-by: Kevin Boudet <kevin@yuno.malio.fr>
Reviewed-on: #26
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.playground/pages/composant/checkbox.vue

@@ -1,101 +0,0 @@
-<template>
-  <div class="grid grid-cols-1 items-start 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">Coche par default</h2>
-      <MalioCheckbox
-        v-model="checkedValue"
-        label="Recevoir la newsletter"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Hint</h2>
-      <MalioCheckbox
-        v-model="hintValue"
-        label="J'accepte le traitement des donnees"
-        hint="Vous pouvez retirer votre consentement a tout moment."
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
-      <MalioCheckbox
-        :model-value="false"
-        label="Accepter les CGU"
-        error="Ce champ est obligatoire."
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Succès</h2>
-      <MalioCheckbox
-        :model-value="true"
-        label="Adresse vérifiée"
-        success="Choix valide."
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Disabled et Readonly</h2>
-      <div class="space-y-4">
-        <MalioCheckbox
-          :model-value="true"
-          label="Option désactivée"
-          disabled
-        />
-        <MalioCheckbox
-          :model-value="true"
-          label="Option readonly"
-          readonly
-        />
-      </div>
-    </div>
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox</h2>
-      <div class="space-y-4">
-        <MalioCheckbox
-          label="Option 1"
-        />
-        <MalioCheckbox
-          label="Option 2"
-        />
-        <MalioCheckbox
-          label="Option 3"
-        />
-    </div>
-    </div>
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Plusieurs checkbox avec v-for</h2>
-      <div class="space-y-4">
-        <MalioCheckbox
-          v-for="option in options"
-          :key="option"
-          :label="option"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ref} from 'vue'
-import MalioCheckbox from '../../../app/components/malio/Checkbox.vue'
-const simpleValue = ref(false)
-const checkedValue = ref(true)
-const hintValue = ref(false)
-const options = [
-  'Option A',
-  'Option B',
-  'Option C',
-  'Option D',
-
-]
-</script>

app/components/malio/Checkbox.test.ts

@@ -1,142 +0,0 @@
-import {describe, expect, it} from 'vitest'
-import {mount} from '@vue/test-utils'
-import type {DefineComponent} from 'vue'
-import Checkbox from './Checkbox.vue'
-
-type CheckboxProps = {
-  id?: string
-  label?: string
-  name?: string
-  modelValue?: boolean | null
-  inputClass?: string
-  labelClass?: string
-  groupClass?: string
-  required?: boolean
-  disabled?: boolean
-  readonly?: boolean
-  hint?: string
-  error?: string
-  success?: string
-}
-
-const CheckboxForTest = Checkbox as DefineComponent<CheckboxProps>
-
-const mountCheckbox = (props: CheckboxProps = {}) =>
-  mount(CheckboxForTest, {props})
-
-describe('MalioCheckbox', () => {
-  it('renders a checkbox input', () => {
-    const wrapper = mountCheckbox()
-
-    expect(wrapper.get('input').attributes('type')).toBe('checkbox')
-  })
-
-  it('renders the label text', () => {
-    const wrapper = mountCheckbox({label: 'Accept terms'})
-
-    expect(wrapper.get('label').text()).toContain('Accept terms')
-  })
-
-  it('uses a provided id on input and label', () => {
-    const wrapper = mountCheckbox({
-      id: 'checkbox-id',
-      label: 'Accept terms',
-    })
-
-    expect(wrapper.get('input').attributes('id')).toBe('checkbox-id')
-    expect(wrapper.get('label').attributes('for')).toBe('checkbox-id')
-  })
-
-  it('generates an id when none is provided', () => {
-    const wrapper = mountCheckbox({label: 'Accept terms'})
-    const inputId = wrapper.get('input').attributes('id')
-
-    expect(inputId?.startsWith('malio-checkbox-')).toBe(true)
-    expect(wrapper.get('label').attributes('for')).toBe(inputId)
-  })
-
-  it('applies the name attribute', () => {
-    const wrapper = mountCheckbox({name: 'terms'})
-
-    expect(wrapper.get('input').attributes('name')).toBe('terms')
-  })
-
-  it('reflects the checked state from modelValue', () => {
-    const wrapper = mountCheckbox({modelValue: true})
-
-    expect((wrapper.get('input').element as HTMLInputElement).checked).toBe(true)
-  })
-
-  it('emits update:modelValue when toggled', async () => {
-    const wrapper = mountCheckbox({modelValue: false})
-    const input = wrapper.get('input')
-
-    await input.setValue(true)
-
-    expect(wrapper.emitted('update:modelValue')?.[0]).toEqual([true])
-  })
-
-  it('does not emit when readonly', async () => {
-    const wrapper = mountCheckbox({
-      modelValue: true,
-      readonly: true,
-    })
-    const input = wrapper.get('input')
-
-    await input.setValue(false)
-
-    expect(wrapper.emitted('update:modelValue')).toBeUndefined()
-    expect((input.element as HTMLInputElement).checked).toBe(true)
-  })
-
-  it('sets disabled and required attributes', () => {
-    const wrapper = mountCheckbox({
-      disabled: true,
-      required: true,
-    })
-
-    expect(wrapper.get('input').attributes('disabled')).toBeDefined()
-    expect(wrapper.get('input').attributes('required')).toBeDefined()
-  })
-
-  it('shows a hint message and links it with aria-describedby', () => {
-    const wrapper = mountCheckbox({hint: 'Required field'})
-    const inputId = wrapper.get('input').attributes('id')
-
-    expect(wrapper.get('p').text()).toBe('Required field')
-    expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
-  })
-
-  it('shows an error state and message', () => {
-    const wrapper = mountCheckbox({
-      label: 'Accept terms',
-      error: 'You must accept',
-    })
-
-    expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
-    expect(wrapper.get('p').text()).toBe('You must accept')
-  })
-
-  it('shows success only when there is no error', () => {
-    const wrapper = mountCheckbox({
-      success: 'Valid',
-      error: 'Invalid',
-    })
-
-    expect(wrapper.get('p').text()).toBe('Invalid')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
-  })
-
-  it('shows success styles and message when there is no error', () => {
-    const wrapper = mountCheckbox({
-      label: 'Accept terms',
-      success: 'Valid',
-      modelValue: true,
-    })
-
-    expect(wrapper.get('label').classes()).toContain('text-m-success')
-    expect(wrapper.get('p').text()).toBe('Valid')
-    expect(wrapper.get('p').classes()).toContain('text-m-success')
-  })
-})

app/components/malio/Checkbox.vue

@@ -1,227 +0,0 @@
-<template>
-  <div :class="mergedGroupClass">
-    <input
-      :id="inputId"
-      :name="name"
-      :checked="isChecked"
-      :required="required"
-      :disabled="disabled"
-      :aria-invalid="!!error"
-      :aria-describedby="describedBy"
-      :class="mergedInputClass"
-      v-bind="attrs"
-      type="checkbox"
-      @change="onChange"
-    >
-
-    <label
-      v-if="label"
-      :for="inputId"
-      :class="mergedLabelClass"
-    >
-      <span>
-        <svg width="12" height="10" viewBox="0 0 12 10" aria-hidden="true">
-          <polyline points="1.5 6 4.5 9 10.5 1"/>
-        </svg>
-      </span>
-      <span>
-        {{ label }}
-      </span>
-    </label>
-
-    <p
-      v-if="hint || hasError || hasSuccess"
-      :id="`${inputId}-describedby`"
-      :class="mergedMessageClass"
-    >
-      {{ error || success || hint }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {computed, useAttrs, useId} from 'vue'
-import {twMerge} from 'tailwind-merge'
-
-defineOptions({name: 'MalioCheckbox', inheritAttrs: false})
-
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    label?: string
-    name?: string
-    modelValue?: boolean | null | undefined
-    inputClass?: string
-    labelClass?: string
-    groupClass?: string
-    required?: boolean
-    disabled?: boolean
-    readonly?: boolean
-    hint?: string
-    error?: string
-    success?: string
-  }>(),
-  {
-    id: '',
-    label: '',
-    name: '',
-    modelValue: undefined,
-    inputClass: '',
-    labelClass: '',
-    groupClass: '',
-    required: false,
-    disabled: false,
-    readonly: false,
-    hint: '',
-    error: '',
-    success: '',
-  },
-)
-
-const attrs = useAttrs()
-const generatedId = useId()
-
-const inputId = computed(() => props.id?.toString() || `malio-checkbox-${generatedId}`)
-const isChecked = computed(() => !!props.modelValue)
-const hasError = computed(() => !!props.error)
-const hasSuccess = computed(() => !!props.success && !hasError.value)
-const disabled = computed(() => props.disabled)
-
-const describedBy = computed(() => {
-  if (!props.hint && !hasError.value && !hasSuccess.value) return undefined
-  return `${inputId.value}-describedby`
-})
-
-const mergedGroupClass = computed(() =>
-  twMerge(
-    'checkbox-wrapper-4 mt-4 w-full',
-    props.groupClass,
-  ),
-)
-
-const mergedInputClass = computed(() =>
-  twMerge(
-    'inp-cbx peer',
-    props.inputClass,
-  ),
-)
-
-const mergedLabelClass = computed(() =>
-  twMerge(
-    'cbx text-black',
-    disabled.value ? 'cursor-not-allowed text-black/60' : '',
-    hasError.value ? 'text-m-error' : '',
-    hasSuccess.value ? 'text-m-success' : '',
-    props.labelClass,
-  ),
-)
-
-const mergedMessageClass = computed(() =>
-  twMerge(
-    'text-xs',
-    hasError.value
-      ? 'text-m-error'
-      : hasSuccess.value
-        ? 'text-m-success'
-        : 'text-m-muted',
-  ),
-)
-
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void
-}>()
-
-const onChange = (event: Event) => {
-  const target = event.target as HTMLInputElement
-
-  if (props.readonly) {
-    target.checked = isChecked.value
-    return
-  }
-
-  emit('update:modelValue', target.checked)
-}
-</script>
-
-<style scoped>
-.cbx {
-  display: inline-flex;
-  align-items: center;
-  cursor: pointer;
-}
-
-.cbx span {
-  display: inline-flex;
-  align-items: center;
-}
-
-.cbx span:first-child {
-  position: relative;
-  width: 18px;
-  height: 18px;
-  flex: 0 0 18px;
-  transform: scale(1);
-  border: 2px solid rgb(0, 0, 0);
-  transition: all 0.1s ease;
-}
-
-.cbx span:first-child svg {
-  position: absolute;
-  top: 2px;
-  left: 1px;
-  fill: none;
-  stroke: #000000;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  stroke-dasharray: 16px;
-  stroke-dashoffset: 16px;
-  transition: all 0.125s ease;
-}
-
-.cbx span:last-child {
-  padding-left: 12px;
-  line-height: 18px;
-}
-
-.inp-cbx {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-.inp-cbx:checked + .cbx span:first-child svg {
-  stroke-dashoffset: 0;
-}
-
-.inp-cbx + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-error) / 1);
-}
-.cbx.text-m-error span:first-child svg {
-  stroke: rgb(var(--m-error) / 1);
-}
-.inp-cbx:checked + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-error) / 1);
-}
-
-.inp-cbx + .cbx.text-m-success span:first-child {
-  border-color: rgb(var(--m-success) / 1);
-}
-.cbx.text-m-success span:first-child svg {
-  stroke: rgb(var(--m-success) / 1);
-}
-.inp-cbx:checked + .cbx.text-m-success span:first-child {
-  border-color: rgb(var(--m-success) / 1);
-}
-
-.inp-cbx:disabled + .cbx {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-</style>

app/components/malio/checkbox/Checkbox.test.ts

@@ -114,7 +114,7 @@ describe('MalioCheckbox', () => {
     })
 
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
-    expect(wrapper.get('label').classes()).toContain('text-m-danger')
+    expect(wrapper.get('label').classes()).toContain('text-m-error')
     expect(wrapper.get('p').text()).toBe('You must accept')
   })
 
@@ -125,7 +125,7 @@ describe('MalioCheckbox', () => {
     })
 
     expect(wrapper.get('p').text()).toBe('Invalid')
-    expect(wrapper.get('p').classes()).toContain('text-m-danger')
+    expect(wrapper.get('p').classes()).toContain('text-m-error')
   })
 
   it('shows success styles and message when there is no error', () => {

app/components/malio/checkbox/Checkbox.vue

@@ -110,7 +110,7 @@ const mergedLabelClass = computed(() =>
   twMerge(
     'cbx text-black',
     disabled.value ? 'cursor-not-allowed text-black/60' : '',
-    hasError.value ? 'text-m-danger' : '',
+    hasError.value ? 'text-m-error' : '',
     hasSuccess.value ? 'text-m-success' : '',
     props.labelClass,
   ),
@@ -120,7 +120,7 @@ const mergedMessageClass = computed(() =>
   twMerge(
     'text-xs',
     hasError.value
-      ? 'text-m-danger'
+      ? 'text-m-error'
       : hasSuccess.value
         ? 'text-m-success'
         : 'text-m-muted',
@@ -200,14 +200,14 @@ const onChange = (event: Event) => {
   stroke-dashoffset: 0;
 }
 
-.inp-cbx + .cbx.text-m-danger span:first-child {
+.inp-cbx + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-danger) / 1);
+  border-color: rgb(var(--m-error) / 1);
 }
-.cbx.text-m-danger span:first-child svg {
+.cbx.text-m-error span:first-child svg {
-  stroke: rgb(var(--m-danger) / 1);
+  stroke: rgb(var(--m-error) / 1);
 }
-.inp-cbx:checked + .cbx.text-m-danger span:first-child {
+.inp-cbx:checked + .cbx.text-m-error span:first-child {
-  border-color: rgb(var(--m-danger) / 1);
+  border-color: rgb(var(--m-error) / 1);
 }
 
 .inp-cbx + .cbx.text-m-success span:first-child {

app/story/inputCheckbox.story.vue

@@ -1,114 +0,0 @@
-<template>
-  <Story title="Input/Checkbox">
-        <MalioCheckbox
-          v-model="simpleValue"
-          label="Accepter les conditions"
-        />
-  </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.vue'
-
-const simpleValue = ref(false)
-</script>