cisse-vue-ui 0.2.8 → 0.3.1

package/dist/{useModal-Aq8hn152.js → useToast-DT9hFfpM.js}

@@ -159,11 +159,59 @@ function useModal(options) {
 function useModals(modals) {
   return modals;
 }
+const toasts = ref([]);
+let toastId = 0;
+function useToast() {
+  const add = (options) => {
+    const id = `toast-${++toastId}`;
+    const toast = {
+      id,
+      message: options.message,
+      type: options.type || "info",
+      title: options.title,
+      duration: options.duration ?? 5e3
+    };
+    toasts.value.push(toast);
+    return id;
+  };
+  const remove = (id) => {
+    const index = toasts.value.findIndex((t) => t.id === id);
+    if (index > -1) {
+      toasts.value.splice(index, 1);
+    }
+  };
+  const clear = () => {
+    toasts.value = [];
+  };
+  const success = (message, title) => {
+    return add({ message, title, type: "success" });
+  };
+  const error = (message, title) => {
+    return add({ message, title, type: "error" });
+  };
+  const warning = (message, title) => {
+    return add({ message, title, type: "warning" });
+  };
+  const info = (message, title) => {
+    return add({ message, title, type: "info" });
+  };
+  return {
+    toasts,
+    add,
+    remove,
+    clear,
+    success,
+    error,
+    warning,
+    info
+  };
+}
 export {
   useDarkMode as a,
   useExportCSV as b,
   useModal as c,
   useModals as d,
+  useToast as e,
   useNotifications as u
 };
-//# sourceMappingURL=useModal-Aq8hn152.js.map
+//# sourceMappingURL=useToast-DT9hFfpM.js.map

package/dist/useToast-DT9hFfpM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast-DT9hFfpM.js","sources":["../src/composables/useNotifications.ts","../src/composables/useDarkMode.ts","../src/composables/useExportCSV.ts","../src/composables/useModal.ts","../src/composables/useToast.ts"],"sourcesContent":["import { ref, readonly } from 'vue'\nimport type { Notification, NotificationType, NotificationOptions } from '@/types'\n\n/**\n * Composable for managing notifications/toasts\n * Standalone implementation without Pinia dependency\n */\nexport function useNotifications() {\n  const notifications = ref<Notification[]>([])\n  let idCounter = 0\n\n  const generateId = () => `notification-${++idCounter}-${Date.now()}`\n\n  const notify = (\n    type: NotificationType,\n    message: string,\n    options: NotificationOptions = {},\n  ): string => {\n    const id = generateId()\n    const notification: Notification = {\n      id,\n      type,\n      message,\n      title: options.title ?? null,\n      duration: options.duration ?? 5000,\n    }\n\n    notifications.value.push(notification)\n\n    if (notification.duration && notification.duration > 0) {\n      setTimeout(() => remove(id), notification.duration)\n    }\n\n    return id\n  }\n\n  const success = (message: string, options?: NotificationOptions) =>\n    notify('success', message, options)\n\n  const warning = (message: string, options?: NotificationOptions) =>\n    notify('warning', message, options)\n\n  const error = (message: string, options?: NotificationOptions) =>\n    notify('error', message, options)\n\n  const info = (message: string, options?: NotificationOptions) =>\n    notify('info', message, options)\n\n  const remove = (id: string) => {\n    notifications.value = notifications.value.filter((n) => n.id !== id)\n  }\n\n  const clear = () => {\n    notifications.value = []\n  }\n\n  return {\n    notifications: readonly(notifications),\n    notify,\n    success,\n    warning,\n    error,\n    info,\n    remove,\n    clear,\n  }\n}\n","import { ref, watch, onMounted } from 'vue'\n\nexport interface DarkModeOptions {\n  selector?: string\n  attribute?: string\n  storageKey?: string\n  defaultValue?: boolean\n}\n\n/**\n * Composable for managing dark mode state\n */\nexport function useDarkMode(options: DarkModeOptions = {}) {\n  const {\n    selector = 'html',\n    attribute = 'class',\n    storageKey = 'dark-mode',\n    defaultValue = false,\n  } = options\n\n  const isDark = ref(defaultValue)\n\n  const getInitialValue = (): boolean => {\n    if (typeof window === 'undefined') return defaultValue\n\n    const stored = localStorage.getItem(storageKey)\n    if (stored !== null) {\n      return stored === 'true'\n    }\n\n    return window.matchMedia('(prefers-color-scheme: dark)').matches\n  }\n\n  const updateDOM = (dark: boolean) => {\n    if (typeof document === 'undefined') return\n\n    const element = document.querySelector(selector)\n    if (!element) return\n\n    if (attribute === 'class') {\n      element.classList.toggle('dark', dark)\n    } else {\n      element.setAttribute(attribute, dark ? 'dark' : 'light')\n    }\n  }\n\n  const toggle = () => {\n    isDark.value = !isDark.value\n  }\n\n  const set = (value: boolean) => {\n    isDark.value = value\n  }\n\n  watch(isDark, (newValue) => {\n    updateDOM(newValue)\n    if (typeof localStorage !== 'undefined') {\n      localStorage.setItem(storageKey, String(newValue))\n    }\n  })\n\n  onMounted(() => {\n    isDark.value = getInitialValue()\n    updateDOM(isDark.value)\n  })\n\n  return {\n    isDark,\n    toggle,\n    set,\n  }\n}\n","/**\n * Composable for exporting data to CSV format\n */\nexport function useExportCSV() {\n  const escapeCSV = (value: unknown): string => {\n    if (value === null || value === undefined) return ''\n    const str = String(value)\n    if (str.includes(',') || str.includes('\"') || str.includes('\\n')) {\n      return `\"${str.replace(/\"/g, '\"\"')}\"`\n    }\n    return str\n  }\n\n  const exportToCSV = <T extends Record<string, unknown>>(\n    data: T[],\n    columns: { key: keyof T; label: string }[],\n    filename: string = 'export.csv',\n  ) => {\n    if (!data || data.length === 0) {\n      console.warn('No data to export')\n      return\n    }\n\n    // Create header row\n    const headers = columns.map((col) => escapeCSV(col.label)).join(',')\n\n    // Create data rows\n    const rows = data.map((item) =>\n      columns.map((col) => escapeCSV(item[col.key])).join(','),\n    )\n\n    // Combine header and rows\n    const csv = [headers, ...rows].join('\\n')\n\n    // Create and trigger download\n    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })\n    const url = URL.createObjectURL(blob)\n    const link = document.createElement('a')\n    link.setAttribute('href', url)\n    link.setAttribute('download', filename)\n    link.style.visibility = 'hidden'\n    document.body.appendChild(link)\n    link.click()\n    document.body.removeChild(link)\n    URL.revokeObjectURL(url)\n  }\n\n  return {\n    exportToCSV,\n    escapeCSV,\n  }\n}\n","import { ref, type Ref } from 'vue'\r\n\r\nexport interface UseModalReturn<T = unknown> {\r\n  /** Whether the modal is currently open */\r\n  isOpen: Ref<boolean>\r\n  /** Data associated with the modal (e.g., item being edited) */\r\n  data: Ref<T | null>\r\n  /** Open the modal, optionally with data */\r\n  open: (newData?: T) => void\r\n  /** Close the modal and clear data */\r\n  close: () => void\r\n  /** Toggle the modal state */\r\n  toggle: () => void\r\n}\r\n\r\n/**\r\n * Composable for managing modal state\r\n *\r\n * @example\r\n * ```ts\r\n * // Simple modal\r\n * const createModal = useModal()\r\n * createModal.open()\r\n * createModal.close()\r\n *\r\n * // Modal with data (e.g., for editing)\r\n * const editModal = useModal<User>()\r\n * editModal.open(selectedUser)\r\n * // Access editModal.data.value in modal\r\n *\r\n * // With onClose callback\r\n * const deleteModal = useModal<Item>({ onClose: () => refetch() })\r\n * ```\r\n */\r\nexport function useModal<T = unknown>(options?: {\r\n  /** Initial open state */\r\n  initialOpen?: boolean\r\n  /** Initial data */\r\n  initialData?: T | null\r\n  /** Callback when modal opens */\r\n  onOpen?: (data: T | null) => void\r\n  /** Callback when modal closes */\r\n  onClose?: () => void\r\n}): UseModalReturn<T> {\r\n  const {\r\n    initialOpen = false,\r\n    initialData = null,\r\n    onOpen,\r\n    onClose,\r\n  } = options ?? {}\r\n\r\n  const isOpen = ref(initialOpen)\r\n  const data = ref<T | null>(initialData) as Ref<T | null>\r\n\r\n  const open = (newData?: T) => {\r\n    data.value = newData ?? null\r\n    isOpen.value = true\r\n    onOpen?.(data.value)\r\n  }\r\n\r\n  const close = () => {\r\n    isOpen.value = false\r\n    data.value = null\r\n    onClose?.()\r\n  }\r\n\r\n  const toggle = () => {\r\n    if (isOpen.value) {\r\n      close()\r\n    } else {\r\n      open()\r\n    }\r\n  }\r\n\r\n  return {\r\n    isOpen,\r\n    data,\r\n    open,\r\n    close,\r\n    toggle,\r\n  }\r\n}\r\n\r\n/**\r\n * Create multiple related modals at once\r\n * Useful when a page has several modals (create, edit, delete, etc.)\r\n *\r\n * @example\r\n * ```ts\r\n * const modals = useModals({\r\n *   create: useModal(),\r\n *   edit: useModal<User>(),\r\n *   delete: useModal<User>(),\r\n * })\r\n *\r\n * modals.create.open()\r\n * modals.edit.open(user)\r\n * modals.delete.close()\r\n * ```\r\n */\r\nexport function useModals<T extends Record<string, UseModalReturn<unknown>>>(\r\n  modals: T\r\n): T {\r\n  return modals\r\n}\r\n","import { ref } from 'vue'\r\nimport type { ToastType } from '@/components/feedback/Toast.vue'\r\nimport type { ToastItem } from '@/components/feedback/ToastContainer.vue'\r\n\r\nexport interface ToastOptions {\r\n  message: string\r\n  type?: ToastType\r\n  title?: string\r\n  duration?: number\r\n}\r\n\r\nconst toasts = ref<ToastItem[]>([])\r\n\r\nlet toastId = 0\r\n\r\nexport function useToast() {\r\n  const add = (options: ToastOptions): string => {\r\n    const id = `toast-${++toastId}`\r\n    const toast: ToastItem = {\r\n      id,\r\n      message: options.message,\r\n      type: options.type || 'info',\r\n      title: options.title,\r\n      duration: options.duration ?? 5000,\r\n    }\r\n    toasts.value.push(toast)\r\n    return id\r\n  }\r\n\r\n  const remove = (id: string) => {\r\n    const index = toasts.value.findIndex((t) => t.id === id)\r\n    if (index > -1) {\r\n      toasts.value.splice(index, 1)\r\n    }\r\n  }\r\n\r\n  const clear = () => {\r\n    toasts.value = []\r\n  }\r\n\r\n  const success = (message: string, title?: string) => {\r\n    return add({ message, title, type: 'success' })\r\n  }\r\n\r\n  const error = (message: string, title?: string) => {\r\n    return add({ message, title, type: 'error' })\r\n  }\r\n\r\n  const warning = (message: string, title?: string) => {\r\n    return add({ message, title, type: 'warning' })\r\n  }\r\n\r\n  const info = (message: string, title?: string) => {\r\n    return add({ message, title, type: 'info' })\r\n  }\r\n\r\n  return {\r\n    toasts,\r\n    add,\r\n    remove,\r\n    clear,\r\n    success,\r\n    error,\r\n    warning,\r\n    info,\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/{useModal-DDF_ZS8C.cjs → useToast-nJXpFz_M.cjs}

@@ -160,9 +160,57 @@ function useModal(options) {
 function useModals(modals) {
   return modals;
 }
+const toasts = vue.ref([]);
+let toastId = 0;
+function useToast() {
+  const add = (options) => {
+    const id = `toast-${++toastId}`;
+    const toast = {
+      id,
+      message: options.message,
+      type: options.type || "info",
+      title: options.title,
+      duration: options.duration ?? 5e3
+    };
+    toasts.value.push(toast);
+    return id;
+  };
+  const remove = (id) => {
+    const index = toasts.value.findIndex((t) => t.id === id);
+    if (index > -1) {
+      toasts.value.splice(index, 1);
+    }
+  };
+  const clear = () => {
+    toasts.value = [];
+  };
+  const success = (message, title) => {
+    return add({ message, title, type: "success" });
+  };
+  const error = (message, title) => {
+    return add({ message, title, type: "error" });
+  };
+  const warning = (message, title) => {
+    return add({ message, title, type: "warning" });
+  };
+  const info = (message, title) => {
+    return add({ message, title, type: "info" });
+  };
+  return {
+    toasts,
+    add,
+    remove,
+    clear,
+    success,
+    error,
+    warning,
+    info
+  };
+}
 exports.useDarkMode = useDarkMode;
 exports.useExportCSV = useExportCSV;
 exports.useModal = useModal;
 exports.useModals = useModals;
 exports.useNotifications = useNotifications;
-//# sourceMappingURL=useModal-DDF_ZS8C.cjs.map
+exports.useToast = useToast;
+//# sourceMappingURL=useToast-nJXpFz_M.cjs.map

package/dist/useToast-nJXpFz_M.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast-nJXpFz_M.cjs","sources":["../src/composables/useNotifications.ts","../src/composables/useDarkMode.ts","../src/composables/useExportCSV.ts","../src/composables/useModal.ts","../src/composables/useToast.ts"],"sourcesContent":["import { ref, readonly } from 'vue'\nimport type { Notification, NotificationType, NotificationOptions } from '@/types'\n\n/**\n * Composable for managing notifications/toasts\n * Standalone implementation without Pinia dependency\n */\nexport function useNotifications() {\n  const notifications = ref<Notification[]>([])\n  let idCounter = 0\n\n  const generateId = () => `notification-${++idCounter}-${Date.now()}`\n\n  const notify = (\n    type: NotificationType,\n    message: string,\n    options: NotificationOptions = {},\n  ): string => {\n    const id = generateId()\n    const notification: Notification = {\n      id,\n      type,\n      message,\n      title: options.title ?? null,\n      duration: options.duration ?? 5000,\n    }\n\n    notifications.value.push(notification)\n\n    if (notification.duration && notification.duration > 0) {\n      setTimeout(() => remove(id), notification.duration)\n    }\n\n    return id\n  }\n\n  const success = (message: string, options?: NotificationOptions) =>\n    notify('success', message, options)\n\n  const warning = (message: string, options?: NotificationOptions) =>\n    notify('warning', message, options)\n\n  const error = (message: string, options?: NotificationOptions) =>\n    notify('error', message, options)\n\n  const info = (message: string, options?: NotificationOptions) =>\n    notify('info', message, options)\n\n  const remove = (id: string) => {\n    notifications.value = notifications.value.filter((n) => n.id !== id)\n  }\n\n  const clear = () => {\n    notifications.value = []\n  }\n\n  return {\n    notifications: readonly(notifications),\n    notify,\n    success,\n    warning,\n    error,\n    info,\n    remove,\n    clear,\n  }\n}\n","import { ref, watch, onMounted } from 'vue'\n\nexport interface DarkModeOptions {\n  selector?: string\n  attribute?: string\n  storageKey?: string\n  defaultValue?: boolean\n}\n\n/**\n * Composable for managing dark mode state\n */\nexport function useDarkMode(options: DarkModeOptions = {}) {\n  const {\n    selector = 'html',\n    attribute = 'class',\n    storageKey = 'dark-mode',\n    defaultValue = false,\n  } = options\n\n  const isDark = ref(defaultValue)\n\n  const getInitialValue = (): boolean => {\n    if (typeof window === 'undefined') return defaultValue\n\n    const stored = localStorage.getItem(storageKey)\n    if (stored !== null) {\n      return stored === 'true'\n    }\n\n    return window.matchMedia('(prefers-color-scheme: dark)').matches\n  }\n\n  const updateDOM = (dark: boolean) => {\n    if (typeof document === 'undefined') return\n\n    const element = document.querySelector(selector)\n    if (!element) return\n\n    if (attribute === 'class') {\n      element.classList.toggle('dark', dark)\n    } else {\n      element.setAttribute(attribute, dark ? 'dark' : 'light')\n    }\n  }\n\n  const toggle = () => {\n    isDark.value = !isDark.value\n  }\n\n  const set = (value: boolean) => {\n    isDark.value = value\n  }\n\n  watch(isDark, (newValue) => {\n    updateDOM(newValue)\n    if (typeof localStorage !== 'undefined') {\n      localStorage.setItem(storageKey, String(newValue))\n    }\n  })\n\n  onMounted(() => {\n    isDark.value = getInitialValue()\n    updateDOM(isDark.value)\n  })\n\n  return {\n    isDark,\n    toggle,\n    set,\n  }\n}\n","/**\n * Composable for exporting data to CSV format\n */\nexport function useExportCSV() {\n  const escapeCSV = (value: unknown): string => {\n    if (value === null || value === undefined) return ''\n    const str = String(value)\n    if (str.includes(',') || str.includes('\"') || str.includes('\\n')) {\n      return `\"${str.replace(/\"/g, '\"\"')}\"`\n    }\n    return str\n  }\n\n  const exportToCSV = <T extends Record<string, unknown>>(\n    data: T[],\n    columns: { key: keyof T; label: string }[],\n    filename: string = 'export.csv',\n  ) => {\n    if (!data || data.length === 0) {\n      console.warn('No data to export')\n      return\n    }\n\n    // Create header row\n    const headers = columns.map((col) => escapeCSV(col.label)).join(',')\n\n    // Create data rows\n    const rows = data.map((item) =>\n      columns.map((col) => escapeCSV(item[col.key])).join(','),\n    )\n\n    // Combine header and rows\n    const csv = [headers, ...rows].join('\\n')\n\n    // Create and trigger download\n    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })\n    const url = URL.createObjectURL(blob)\n    const link = document.createElement('a')\n    link.setAttribute('href', url)\n    link.setAttribute('download', filename)\n    link.style.visibility = 'hidden'\n    document.body.appendChild(link)\n    link.click()\n    document.body.removeChild(link)\n    URL.revokeObjectURL(url)\n  }\n\n  return {\n    exportToCSV,\n    escapeCSV,\n  }\n}\n","import { ref, type Ref } from 'vue'\r\n\r\nexport interface UseModalReturn<T = unknown> {\r\n  /** Whether the modal is currently open */\r\n  isOpen: Ref<boolean>\r\n  /** Data associated with the modal (e.g., item being edited) */\r\n  data: Ref<T | null>\r\n  /** Open the modal, optionally with data */\r\n  open: (newData?: T) => void\r\n  /** Close the modal and clear data */\r\n  close: () => void\r\n  /** Toggle the modal state */\r\n  toggle: () => void\r\n}\r\n\r\n/**\r\n * Composable for managing modal state\r\n *\r\n * @example\r\n * ```ts\r\n * // Simple modal\r\n * const createModal = useModal()\r\n * createModal.open()\r\n * createModal.close()\r\n *\r\n * // Modal with data (e.g., for editing)\r\n * const editModal = useModal<User>()\r\n * editModal.open(selectedUser)\r\n * // Access editModal.data.value in modal\r\n *\r\n * // With onClose callback\r\n * const deleteModal = useModal<Item>({ onClose: () => refetch() })\r\n * ```\r\n */\r\nexport function useModal<T = unknown>(options?: {\r\n  /** Initial open state */\r\n  initialOpen?: boolean\r\n  /** Initial data */\r\n  initialData?: T | null\r\n  /** Callback when modal opens */\r\n  onOpen?: (data: T | null) => void\r\n  /** Callback when modal closes */\r\n  onClose?: () => void\r\n}): UseModalReturn<T> {\r\n  const {\r\n    initialOpen = false,\r\n    initialData = null,\r\n    onOpen,\r\n    onClose,\r\n  } = options ?? {}\r\n\r\n  const isOpen = ref(initialOpen)\r\n  const data = ref<T | null>(initialData) as Ref<T | null>\r\n\r\n  const open = (newData?: T) => {\r\n    data.value = newData ?? null\r\n    isOpen.value = true\r\n    onOpen?.(data.value)\r\n  }\r\n\r\n  const close = () => {\r\n    isOpen.value = false\r\n    data.value = null\r\n    onClose?.()\r\n  }\r\n\r\n  const toggle = () => {\r\n    if (isOpen.value) {\r\n      close()\r\n    } else {\r\n      open()\r\n    }\r\n  }\r\n\r\n  return {\r\n    isOpen,\r\n    data,\r\n    open,\r\n    close,\r\n    toggle,\r\n  }\r\n}\r\n\r\n/**\r\n * Create multiple related modals at once\r\n * Useful when a page has several modals (create, edit, delete, etc.)\r\n *\r\n * @example\r\n * ```ts\r\n * const modals = useModals({\r\n *   create: useModal(),\r\n *   edit: useModal<User>(),\r\n *   delete: useModal<User>(),\r\n * })\r\n *\r\n * modals.create.open()\r\n * modals.edit.open(user)\r\n * modals.delete.close()\r\n * ```\r\n */\r\nexport function useModals<T extends Record<string, UseModalReturn<unknown>>>(\r\n  modals: T\r\n): T {\r\n  return modals\r\n}\r\n","import { ref } from 'vue'\r\nimport type { ToastType } from '@/components/feedback/Toast.vue'\r\nimport type { ToastItem } from '@/components/feedback/ToastContainer.vue'\r\n\r\nexport interface ToastOptions {\r\n  message: string\r\n  type?: ToastType\r\n  title?: string\r\n  duration?: number\r\n}\r\n\r\nconst toasts = ref<ToastItem[]>([])\r\n\r\nlet toastId = 0\r\n\r\nexport function useToast() {\r\n  const add = (options: ToastOptions): string => {\r\n    const id = `toast-${++toastId}`\r\n    const toast: ToastItem = {\r\n      id,\r\n      message: options.message,\r\n      type: options.type || 'info',\r\n      title: options.title,\r\n      duration: options.duration ?? 5000,\r\n    }\r\n    toasts.value.push(toast)\r\n    return id\r\n  }\r\n\r\n  const remove = (id: string) => {\r\n    const index = toasts.value.findIndex((t) => t.id === id)\r\n    if (index > -1) {\r\n      toasts.value.splice(index, 1)\r\n    }\r\n  }\r\n\r\n  const clear = () => {\r\n    toasts.value = []\r\n  }\r\n\r\n  const success = (message: string, title?: string) => {\r\n    return add({ message, title, type: 'success' })\r\n  }\r\n\r\n  const error = (message: string, title?: string) => {\r\n    return add({ message, title, type: 'error' })\r\n  }\r\n\r\n  const warning = (message: string, title?: string) => {\r\n    return add({ message, title, type: 'warning' })\r\n  }\r\n\r\n  const info = (message: string, title?: string) => {\r\n    return add({ message, title, type: 'info' })\r\n  }\r\n\r\n  return {\r\n    toasts,\r\n    add,\r\n    remove,\r\n    clear,\r\n    success,\r\n    error,\r\n    warning,\r\n    info,\r\n  }\r\n}\r\n"],"names":["ref","readonly","watch","onMounted"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cisse-vue-ui",
-  "version": "0.2.8",
+  "version": "0.3.1",
   "description": "Vue 3 + TypeScript + Tailwind CSS v4 component library",
   "author": "Cisse",
   "license": "MIT",
@@ -101,7 +101,10 @@
     "test": "vitest",
     "type-check": "vue-tsc --noEmit",
     "lint": "eslint . --fix",
-    "prepublishOnly": "bun run build"
+    "prepublishOnly": "bun run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "deploy-storybook": "storybook build && gh-pages -d storybook-static"
   },
   "peerDependencies": {
     "@iconify/vue": ">=4.0.0",
@@ -117,14 +120,27 @@
     }
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.3",
     "@iconify/vue": "^5.0.0",
+    "@storybook/addon-a11y": "^10.1.6",
+    "@storybook/addon-docs": "^10.1.6",
+    "@storybook/addon-vitest": "^10.1.6",
+    "@storybook/vue3-vite": "^10.1.6",
     "@tailwindcss/vite": "^4.1.17",
     "@types/node": "^22.19.1",
     "@vitejs/plugin-vue": "^6.0.2",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
     "ajv": "^8.17.1",
     "eslint": "^9.39.1",
+    "eslint-plugin-storybook": "^10.1.6",
+    "gh-pages": "^6.3.0",
+    "happy-dom": "^20.0.11",
     "pinia": "^3.0.4",
+    "playwright": "^1.57.0",
+    "storybook": "^10.1.6",
     "tailwindcss": "^4.1.17",
     "typescript": "~5.9.3",
     "vite": "^6.4.1",
@@ -137,5 +153,10 @@
   "dependencies": {
     "@vueuse/core": "^14.1.0",
     "tailwind-merge": "^3.4.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "plugin:storybook/recommended"
+    ]
   }
 }