feat : ajout d'histoire et d'une story

2026-02-25 10:26:39 +01:00
parent 82ecc9cfe2
commit a8e5f2e05a
9 changed files with 1735 additions and 128 deletions
--- a/app/story/inputText.story.vue
+++ b/app/story/inputText.story.vue
@@ -0,0 +1,56 @@
+<template>
+  <Story title="Input/Text">
+      <MalioInputText/>
+  </Story>
+</template>
+
+<docs lang="md">
+# Input Text
+
+## Liste des props
+
+Le composant Input Text permet de saisir du texte. Il peut afficher des messages d'erreur, de succès ou d'information.
+On peut lui passer plusieurs props pour personnaliser son comportement et son apparence.
+  - id: Identifiant HTML du champ. Si non fourni, un id est généré automatiquement.
+  - label: Texte du label affiché au-dessus du champ (floating label).
+  - name: Attribut name de l’input.
+  - autocomplete: Attribut autocomplete de l’input.
+  - modelValue: Valeur du champ (utilisée avec v-model) ou si valeur brut mettre des " ".
+  - minWidth: Classe utilitaire pour la largeur minimale du conteneur. Classe Tailwind de largeur (ex: w-64, w-full).
+  - maxWidth: Classe utilitaire pour la largeur maximale du conteneur. Classe Tailwind de largeur maximale.
+  - textInput: Classe(s) de style du texte de l’input. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
+  - textLabel: Classe(s) de style du texte du label. Classe(s) Tailwind de couleur ou de typographie (ex : text-gray-700, text-sm).
+  - required: Rend le champ obligatoire (required).
+  - maxLength: Nombre de caractère maximal autorisé.
+  - minLength: Nombre de caractère minimal autorisé.
+  - disabled: Désactive le champ et applique le style désactivé.
+  - readonly: Met le champ en lecture seule.
+  - hint: Message informatif affiché sous le champ.
+  - error: Message d’erreur affiché sous le champ. Active le style erreur.
+  - success: Message de succès affiché sous le champ. Active le style succès.
+  - iconName: Nom de l’icône affichée à droite dans le champ.
+  - rounded: Classe utilitaire pour le rayon des coins ( rounded- ).
+  - iconSize: Taille de l’icône. (ex : 24, 26, 85 ,99, ... ).
+  - iconColor: Classe(s) personnalisée(s) de couleur pour l’icône ( text- ).
+  - mask: Masque de saisie pour formater la valeur :
+      - \# : chiffre
+      - A : lettre majuscule
+      - a : lettre minuscule
+      - \* : chiffre ou lettre
+
+Événement émis :
+
+- update:modelValue: Émis à chaque saisie pour mettre à jour v-model.
+
+Règles d’affichage des messages :
+
+Priorité d’affichage :
+  1) error
+  2) success
+  3) hint
+
+
+</docs>
+<script setup lang="ts">
+import MalioInputText from '../components/malio/InputText.vue'
+</script>
--- a/histoire.config.ts
+++ b/histoire.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from 'histoire'
+import { HstVue } from '@histoire/plugin-vue'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import path from 'path'
+
+export default defineConfig({
+  setupFile: './histoire.setup.ts',
+  vite: {
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './'),
+      },
+    },
+    css: {
+      postcss: {
+        plugins: [tailwindcss(), autoprefixer()],
+      },
+    },
+  },
+  plugins: [HstVue()],
+})
--- a/histoire.setup.ts
+++ b/histoire.setup.ts
@@ -0,0 +1,4 @@
+import './app/assets/css/malio.css'
+
+export function setupVue3() {}
+export function setupVanilla() {}
--- a/3
+++ b/3
@@ -8,6 +8,9 @@ install:
 dev:
 	npm run dev

+dev-histoire:
+	npm run story:dev
+
 dev-prepare:
 	npm run dev:prepare

--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -11,17 +11,22 @@
    "generate": "nuxt generate .playground",
    "preview": "nuxt preview .playground",
    "lint": "eslint .",
-    "test": "vitest run"
+    "test": "vitest run",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview"
  },
  "peerDependencies": {
    "nuxt": "^4.0.0"
  },
  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.1",
-    "@vue/test-utils": "^2.4.6",
+    "@histoire/plugin-vue": "^1.0.0-beta.1",
    "@nuxt/eslint": "latest",
    "@types/node": "^24.10.13",
+    "@vitejs/plugin-vue": "^6.0.4",
+    "@vue/test-utils": "^2.4.6",
    "eslint": "^10.0.0",
+    "histoire": "^1.0.0-beta.1",
    "jsdom": "^27.0.1",
    "nuxt": "^4.3.1",
    "typescript": "^5.9.3",
@@ -29,6 +34,8 @@
    "vue": "latest"
  },
  "dependencies": {
-    "@nuxtjs/tailwindcss": "^6.14.0"
+    "@nuxt/icon": "^2.2.1",
+    "@nuxtjs/tailwindcss": "^6.14.0",
+    "maska": "^3.2.0"
  }
 }
--- a/26
+++ b/26
@@ -3,23 +3,14 @@ set -e

 echo "######### Pre-commit hook start #############"

-if ! command -v npm >/dev/null 2>&1; then
-  if [ -f ".nvmrc" ]; then
-    NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
-    NVM_VERSION="${NVM_VERSION#v}"
-    NPM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
-    if [ -x "$NPM_BIN/npm" ]; then
-      PATH="$NPM_BIN:$PATH"
-      export PATH
-    fi
-  fi
-fi
-
-if ! command -v npm >/dev/null 2>&1; then
-  if [ -s "$HOME/.nvm/nvm.sh" ]; then
-    # shellcheck disable=SC1090
-    . "$HOME/.nvm/nvm.sh"
-    nvm use >/dev/null 2>&1 || true
+# Prefer the exact Node version from .nvmrc for hooks (IDE + CLI consistency).
+if [ -f ".nvmrc" ]; then
+  NVM_VERSION="$(tr -d '\r\n' < .nvmrc)"
+  NVM_VERSION="${NVM_VERSION#v}"
+  NVM_BIN="$HOME/.nvm/versions/node/v$NVM_VERSION/bin"
+  if [ -x "$NVM_BIN/node" ] && [ -x "$NVM_BIN/npm" ]; then
+    PATH="$NVM_BIN:$PATH"
+    export PATH
  fi
 fi

@@ -28,6 +19,7 @@ if ! command -v npm >/dev/null 2>&1; then
  exit 1
 fi

+echo "Node $(node -v) / npm $(npm -v)"
 echo "--- make pre-commit start ---"
 make pre-commit
 echo "--- make pre-commit finished ---"
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -0,0 +1,38 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+  content: [
+    './app/**/*.{vue,js,ts}',
+    './**/*.story.{vue,js,ts}',
+    './histoire.setup.ts',
+    './histoire.config.ts',
+  ],
+  safelist: [
+    {
+      pattern: /(sm:|md:|lg:|xl:|2xl:)?(text|rounded|w)-.+/,
+    },
+  ],
+  theme: {
+    extend: {
+      borderRadius: {
+        malio: 'var(--m-radius)',
+      },
+      colors: {
+        m: {
+          primary: 'rgb(var(--m-primary) / <alpha-value>)',
+          secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
+          tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
+          border: 'rgb(var(--m-border) / <alpha-value>)',
+          text: 'rgb(var(--m-text) / <alpha-value>)',
+          muted: 'rgb(var(--m-muted) / <alpha-value>)',
+          bg: 'rgb(var(--m-bg) / <alpha-value>)',
+          error: 'rgb(var(--m-error) / <alpha-value>)',
+          success: 'rgb(var(--m-success) / <alpha-value>)',
+        },
+      },
+      fontFamily: {
+        sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif'],
+      },
+    },
+  },
+} satisfies Partial<Config>
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,21 @@
 {
-  "extends": "./.playground/.nuxt/tsconfig.json"
+  "extends": "./.playground/.nuxt/tsconfig.json",
+  "compilerOptions": {
+    "target": "es2017",
+    "module": "esnext",
+    "lib": [
+      "esnext"
+    ],
+    "moduleResolution": "node",
+    "esModuleInterop": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "jsx": "preserve"
+  },
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ]
 }