Merge branch 'feat/333-creation-text-input' into feat/335-ajout-package-histoire

.playground/pages/index.vue

@@ -1,11 +1,107 @@
 <template>
-  <div class="p-6 space-y-4">
-    <MalioInput v-model="v" label="Email" placeholder="you@example.com" />
-    <pre class="text-xs">{{ v }}</pre>
+  <div class="flex min-h-screen">
+    <aside class="w-72 bg-m-bg p-6 text-white">
+      <button
+        type="button"
+        class="text-xl text-black font-semibold"
+        @click="clearSelection"
+      >
+        Liste des composants
+      </button>
+
+      <nav class="mt-6 flex flex-col gap-2">
+        <button
+          v-for="item in items"
+          :key="item.name"
+          type="button"
+          class="rounded px-3 py-2 text-left text-black font-bold hover:bg-m-primary hover:text-white"
+          :class="selectedName === item.name ? 'bg-m-secondary text-white ' : ''"
+          @click="selectOrToggle(item.name)"
+        >
+          {{ item.label }}
+        </button>
+      </nav>
+    </aside>
+
+    <main class="flex-1 p-6">
+      <component
+        :is="selectedDemoComponent"
+        v-if="selectedDemoComponent"
+      />
+      <p
+        v-else-if="selectedName"
+        class="text-gray-700"
+      >
+        Page de demo introuvable: <code>.playground/pages/composant/{{ selectedDemoFileName }}.vue</code>
+      </p>
+      <div v-else>
+        <h1 class="text-2xl font-semibold text-gray-900">Playground composants</h1>
+        <p class="mt-2 text-gray-600">
+          Selectionne un composant dans la liste pour afficher sa page de demo.
+        </p>
+      </div>
+    </main>
   </div>
 </template>
 
 <script setup lang="ts">
-const v = ref('')
-</script>
+type LoadedModule = {
+  default: unknown
+}
 
+type Item = {
+  name: string
+  label: string
+  demoComponent?: unknown
+}
+
+const componentModules = import.meta.glob('../../app/components/malio/*.vue', { eager: true }) as Record<string, LoadedModule>
+const demoModules = import.meta.glob('./composant/*.vue', { eager: true }) as Record<string, LoadedModule>
+
+const demoByName = Object.fromEntries(
+  Object.entries(demoModules).map(([file, mod]) => {
+    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
+    return [name.toLowerCase(), mod.default]
+  }),
+)
+
+const items = computed(() =>
+  Object.entries(componentModules).map(([file]) => {
+    const name = file.split('/').pop()?.replace('.vue', '') ?? ''
+
+    return {
+      name,
+      label: name,
+      demoComponent: demoByName[name.toLowerCase()],
+    }
+  }) as Item[],
+)
+
+const selectedName = ref('')
+const hasInitializedSelection = ref(false)
+
+watchEffect(() => {
+  if (!hasInitializedSelection.value && items.value.length > 0) {
+    selectedName.value = items.value[0].name
+    hasInitializedSelection.value = true
+  }
+})
+
+function selectOrToggle(name: string) {
+  selectedName.value = selectedName.value === name ? '' : name
+}
+
+function clearSelection() {
+  selectedName.value = ''
+}
+
+const selectedDemoComponent = computed(() =>
+  items.value.find((item) => item.name === selectedName.value)?.demoComponent,
+)
+
+const selectedDemoFileName = computed(() => {
+  const name = selectedName.value
+  if (!name) return ''
+  return name.charAt(0).toLowerCase() + name.slice(1)
+})
+</script>