@wakastellar/ui 2.3.5 → 3.0.0

package/dist/stories/Button.d.ts

@@ -0,0 +1,14 @@
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/stories/Button.stories.d.ts

@@ -0,0 +1,8 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: Meta<({ primary, size, backgroundColor, label, ...props }: import('./Button').ButtonProps) => import("react/jsx-runtime").JSX.Element>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/stories/Header.d.ts

@@ -0,0 +1,11 @@
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/stories/Header.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: Meta<({ user, onLogin, onLogout, onCreateAccount }: import('./Header').HeaderProps) => import("react/jsx-runtime").JSX.Element>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/stories/Page.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const Page: React.FC;

package/dist/stories/Page.stories.d.ts

@@ -0,0 +1,6 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: Meta<import('react').FC<{}>>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/useDataTableImport-COVnvslz.js

@@ -0,0 +1,9 @@
+"use strict";var D=Object.create;var C=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var U=Object.getOwnPropertyNames;var F=Object.getPrototypeOf,K=Object.prototype.hasOwnProperty;var X=(h,r,x,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let b of U(r))!K.call(h,b)&&b!==x&&C(h,b,{get:()=>r[b],enumerable:!(l=O(r,b))||l.enumerable});return h};var S=(h,r,x)=>(x=h!=null?D(F(h)):{},X(r||!h||!h.__esModule?C(x,"default",{value:h,enumerable:!0}):x,h));const m=require("react");function T({data:h,columns:r,exportConfig:x}){const l=m.useMemo(()=>({formats:["csv","xlsx","json"],filename:"export",includeHeaders:!0,...x}),[x]),b=m.useCallback((e,n)=>{if(!e.length)return;const a=r.filter(d=>d.accessorKey||d.id).map(d=>d.header||d.accessorKey||d.id).join(","),o=e.map(d=>r.filter(i=>i.accessorKey||i.id).map(i=>{const s=i.accessorKey?d[i.accessorKey]:d[i.id],w=i.formatter?i.formatter(s):s,f=String(w||"");return f.includes(",")||f.includes('"')||f.includes(`
+`)?`"${f.replace(/"/g,'""')}"`:f}).join(",")),t=[a,...o].join(`
+`),p=new Blob([t],{type:"text/csv;charset=utf-8;"}),u=document.createElement("a");u.href=URL.createObjectURL(p),u.download=`${n||l.filename}.csv`,u.click(),URL.revokeObjectURL(u.href)},[r,l.filename]),v=m.useCallback((e,n)=>{const a=JSON.stringify(e,null,2),o=new Blob([a],{type:"application/json"}),t=document.createElement("a");t.href=URL.createObjectURL(o),t.download=`${n||l.filename}.json`,t.click(),URL.revokeObjectURL(t.href)},[l.filename]),E=m.useCallback(async(e,n)=>{try{if(typeof window>"u")throw new Error("XLSX export not available in server environment");const a=await Promise.resolve().then(()=>require("./exceljs.min-BcLLX0PC.js")).then(s=>s.exceljs_min),o=new a.Workbook,t=o.addWorksheet(l.options?.xlsx?.sheetName||"Sheet1"),p=r.filter(s=>s.accessorKey||s.id).map(s=>s.header||s.accessorKey||s.id);t.addRow(p),e.forEach(s=>{const w=r.filter(f=>f.accessorKey||f.id).map(f=>{const L=f.accessorKey?s[f.accessorKey]:s[f.id];return f.formatter?f.formatter(L):L});t.addRow(w)});const u=await o.xlsx.writeBuffer(),d=new Blob([u],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}),i=document.createElement("a");i.href=URL.createObjectURL(d),i.download=`${n||l.filename}.xlsx`,i.click(),URL.revokeObjectURL(i.href)}catch(a){throw console.error("Erreur lors de l'export XLSX:",a),new Error("La librairie exceljs n'est pas disponible. Installez-la avec: pnpm add exceljs")}},[r,l.filename,l.options?.xlsx?.sheetName]),j=m.useCallback(async(e,n)=>{try{if(typeof window>"u")throw new Error("PDF export not available in server environment");const a=await import("jspdf"),o=await import("jspdf-autotable"),t=a.default||a.jsPDF,p=new t,u=o.default||o.autoTable,d=r.filter(s=>s.accessorKey||s.id).map(s=>s.header||s.accessorKey||s.id),i=e.map(s=>r.filter(w=>w.accessorKey||w.id).map(w=>{const f=w.accessorKey?s[w.accessorKey]:s[w.id];return w.formatter?w.formatter(f):f}));u(p,{head:[d],body:i,startY:20,styles:{fontSize:8},headStyles:{fillColor:[66,139,202]}}),p.save(`${n||l.filename}.pdf`)}catch(a){throw console.error("Erreur lors de l'export PDF:",a),new Error("Les librairies jsPDF et jspdf-autotable ne sont pas disponibles")}},[r,l.filename]),k=m.useCallback((e,n)=>{const a=r.filter(u=>u.accessorKey||u.id).map(u=>u.accessorKey||u.id);let o=`<?xml version="1.0" encoding="UTF-8"?>
+<data>
+`;e.forEach((u,d)=>{o+=`  <row id="${d}">
+`,a.forEach(i=>{const s=u[i],w=String(s||"").replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");o+=`    <${i}>${w}</${i}>
+`}),o+=`  </row>
+`}),o+="</data>";const t=new Blob([o],{type:"application/xml"}),p=document.createElement("a");p.href=URL.createObjectURL(t),p.download=`${n||l.filename}.xml`,p.click(),URL.revokeObjectURL(p.href)},[r,l.filename]),y=m.useCallback(async(e,n,a)=>{const o=n||h,t=a||l.filename;if(l.onExport){l.onExport(o,e);return}switch(e.toLowerCase()){case"csv":b(o,t);break;case"json":v(o,t);break;case"xlsx":await E(o,t);break;case"pdf":await j(o,t);break;case"xml":k(o,t);break;default:throw new Error(`Format d'export non supporté: ${e}`)}},[h,l,b,v,E,j,k]),g=m.useCallback(async e=>y(e),[y]),c=m.useCallback(async(e,n)=>y(e,n),[y]);return{exportData:y,exportAll:g,exportSelected:c,supportedFormats:l.formats,isExportSupported:e=>l.formats.includes(e)}}function $({importConfig:h}){const r=m.useMemo(()=>({accept:".csv,.xlsx,.json,.xml",...h}),[h]),x=m.useCallback((c,e=",")=>{const n=c.split(`
+`).filter(t=>t.trim());if(n.length===0)return[];const a=n[0].split(e).map(t=>t.trim().replace(/"/g,""));return n.slice(1).map(t=>{const p=t.split(e).map(d=>d.trim().replace(/"/g,"")),u={};return a.forEach((d,i)=>{u[d]=p[i]||""}),u})},[]),l=m.useCallback(c=>{try{const e=JSON.parse(c);return Array.isArray(e)?e:[e]}catch{throw new Error("Format JSON invalide")}},[]),b=m.useCallback(c=>{try{const a=new DOMParser().parseFromString(c,"text/xml").querySelectorAll("row");return Array.from(a).map(o=>{const t={};return Array.from(o.children).forEach(p=>{t[p.tagName]=p.textContent||""}),t})}catch{throw new Error("Format XML invalide")}},[]),v=m.useCallback(async c=>{try{if(typeof window>"u")throw new Error("XLSX parsing not available in server environment");const e=await Promise.resolve().then(()=>require("./exceljs.min-BcLLX0PC.js")).then(i=>i.exceljs_min),n=await c.arrayBuffer(),a=new e.Workbook;await a.xlsx.load(n);const o=r.parseOptions?.xlsx?.sheetIndex??0,t=r.parseOptions?.xlsx?.headerRow??1,p=a.worksheets[o];if(!p||p.rowCount===0)return[];const u=[];p.getRow(t).eachCell((i,s)=>{u[s-1]=String(i.value||"")});const d=[];for(let i=t+1;i<=p.rowCount;i++){const s=p.getRow(i),w={};u.forEach((f,L)=>{const R=s.getCell(L+1);w[f]=R.value??""}),d.push(w)}return d}catch{throw new Error("Erreur lors du parsing du fichier XLSX. Verifiez que exceljs est installe: pnpm add exceljs")}},[r.parseOptions?.xlsx?.sheetIndex,r.parseOptions?.xlsx?.headerRow]),E=m.useCallback(c=>r.validate?r.validate(c):Array.isArray(c)?c.length===0?{valid:!1,errors:["Aucune donnée trouvée"]}:{valid:!0,errors:[]}:{valid:!1,errors:["Les données doivent être un tableau"]},[r.validate]),j=m.useCallback(c=>r.columnMapping?c.map(e=>{const n={};return Object.entries(r.columnMapping).forEach(([a,o])=>{e[a]!==void 0&&(n[o]=e[a])}),n}):c,[r.columnMapping]),k=m.useCallback(async c=>{const e=c.name.split(".").pop()?.toLowerCase();let n=[];try{const a=await c.text();switch(e){case"csv":n=x(a,r.parseOptions?.csv?.delimiter);break;case"json":n=l(a);break;case"xml":n=b(a);break;case"xlsx":n=await v(c);break;default:throw new Error(`Format de fichier non supporté: ${e}`)}const o=E(n);if(!o.valid)throw new Error(`Données invalides: ${o.errors.join(", ")}`);const t=j(n);return r.onImport&&r.onImport(t),t}catch(a){throw new Error(`Erreur lors de l'import: ${a instanceof Error?a.message:"Erreur inconnue"}`)}},[r,x,l,b,v,E,j]),y=m.useCallback(()=>{const c=document.createElement("input");return c.type="file",c.accept=r.accept,c.multiple=!1,c},[r.accept]),g=m.useCallback(()=>new Promise((c,e)=>{const n=y();n.onchange=async a=>{const o=a.target.files?.[0];if(!o){e(new Error("Aucun fichier sélectionné"));return}try{const t=await k(o);c(t)}catch(t){e(t)}},n.click()}),[y,k]);return{importData:k,importWithUI:g,supportedFormats:r.accept?.split(",")||[],isFormatSupported:c=>{const e=c.split(".").pop()?.toLowerCase();return r.accept?.includes(e||"")||!1}}}exports.useDataTableExport=T;exports.useDataTableImport=$;

package/dist/useDataTableImport-DAlxBY8w.mjs

@@ -0,0 +1,237 @@
+import { useMemo as S, useCallback as w } from "react";
+function D({
+  data: b,
+  columns: a,
+  exportConfig: y
+}) {
+  const u = S(() => ({
+    formats: ["csv", "xlsx", "json"],
+    filename: "export",
+    includeHeaders: !0,
+    ...y
+  }), [y]), v = w((e, n) => {
+    if (!e.length) return;
+    const t = a.filter((d) => d.accessorKey || d.id).map((d) => d.header || d.accessorKey || d.id).join(","), o = e.map((d) => a.filter((i) => i.accessorKey || i.id).map((i) => {
+      const s = i.accessorKey ? d[i.accessorKey] : d[i.id], m = i.formatter ? i.formatter(s) : s, f = String(m || "");
+      return f.includes(",") || f.includes('"') || f.includes(`
+`) ? `"${f.replace(/"/g, '""')}"` : f;
+    }).join(",")), r = [t, ...o].join(`
+`), l = new Blob([r], { type: "text/csv;charset=utf-8;" }), p = document.createElement("a");
+    p.href = URL.createObjectURL(l), p.download = `${n || u.filename}.csv`, p.click(), URL.revokeObjectURL(p.href);
+  }, [a, u.filename]), E = w((e, n) => {
+    const t = JSON.stringify(e, null, 2), o = new Blob([t], { type: "application/json" }), r = document.createElement("a");
+    r.href = URL.createObjectURL(o), r.download = `${n || u.filename}.json`, r.click(), URL.revokeObjectURL(r.href);
+  }, [u.filename]), k = w(async (e, n) => {
+    try {
+      if (typeof window > "u")
+        throw new Error("XLSX export not available in server environment");
+      const t = await import("./exceljs.min-KOayaaQ4.mjs").then((s) => s.e), o = new t.Workbook(), r = o.addWorksheet(u.options?.xlsx?.sheetName || "Sheet1"), l = a.filter((s) => s.accessorKey || s.id).map((s) => s.header || s.accessorKey || s.id);
+      r.addRow(l), e.forEach((s) => {
+        const m = a.filter((f) => f.accessorKey || f.id).map((f) => {
+          const g = f.accessorKey ? s[f.accessorKey] : s[f.id];
+          return f.formatter ? f.formatter(g) : g;
+        });
+        r.addRow(m);
+      });
+      const p = await o.xlsx.writeBuffer(), d = new Blob([p], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" }), i = document.createElement("a");
+      i.href = URL.createObjectURL(d), i.download = `${n || u.filename}.xlsx`, i.click(), URL.revokeObjectURL(i.href);
+    } catch (t) {
+      throw console.error("Erreur lors de l'export XLSX:", t), new Error("La librairie exceljs n'est pas disponible. Installez-la avec: pnpm add exceljs");
+    }
+  }, [a, u.filename, u.options?.xlsx?.sheetName]), L = w(async (e, n) => {
+    try {
+      if (typeof window > "u")
+        throw new Error("PDF export not available in server environment");
+      const t = await import("jspdf"), o = await import("jspdf-autotable"), r = t.default || t.jsPDF, l = new r(), p = o.default || o.autoTable, d = a.filter((s) => s.accessorKey || s.id).map((s) => s.header || s.accessorKey || s.id), i = e.map(
+        (s) => a.filter((m) => m.accessorKey || m.id).map((m) => {
+          const f = m.accessorKey ? s[m.accessorKey] : s[m.id];
+          return m.formatter ? m.formatter(f) : f;
+        })
+      );
+      p(l, {
+        head: [d],
+        body: i,
+        startY: 20,
+        styles: { fontSize: 8 },
+        headStyles: { fillColor: [66, 139, 202] }
+      }), l.save(`${n || u.filename}.pdf`);
+    } catch (t) {
+      throw console.error("Erreur lors de l'export PDF:", t), new Error("Les librairies jsPDF et jspdf-autotable ne sont pas disponibles");
+    }
+  }, [a, u.filename]), x = w((e, n) => {
+    const t = a.filter((p) => p.accessorKey || p.id).map((p) => p.accessorKey || p.id);
+    let o = `<?xml version="1.0" encoding="UTF-8"?>
+<data>
+`;
+    e.forEach((p, d) => {
+      o += `  <row id="${d}">
+`, t.forEach((i) => {
+        const s = p[i], m = String(s || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+        o += `    <${i}>${m}</${i}>
+`;
+      }), o += `  </row>
+`;
+    }), o += "</data>";
+    const r = new Blob([o], { type: "application/xml" }), l = document.createElement("a");
+    l.href = URL.createObjectURL(r), l.download = `${n || u.filename}.xml`, l.click(), URL.revokeObjectURL(l.href);
+  }, [a, u.filename]), h = w(async (e, n, t) => {
+    const o = n || b, r = t || u.filename;
+    if (u.onExport) {
+      u.onExport(o, e);
+      return;
+    }
+    switch (e.toLowerCase()) {
+      case "csv":
+        v(o, r);
+        break;
+      case "json":
+        E(o, r);
+        break;
+      case "xlsx":
+        await k(o, r);
+        break;
+      case "pdf":
+        await L(o, r);
+        break;
+      case "xml":
+        x(o, r);
+        break;
+      default:
+        throw new Error(`Format d'export non supporté: ${e}`);
+    }
+  }, [b, u, v, E, k, L, x]), j = w(async (e) => h(e), [h]), c = w(async (e, n) => h(e, n), [h]);
+  return {
+    exportData: h,
+    exportAll: j,
+    exportSelected: c,
+    supportedFormats: u.formats,
+    isExportSupported: (e) => u.formats.includes(e)
+  };
+}
+function U({
+  importConfig: b
+}) {
+  const a = S(() => ({
+    accept: ".csv,.xlsx,.json,.xml",
+    ...b
+  }), [b]), y = w((c, e = ",") => {
+    const n = c.split(`
+`).filter((r) => r.trim());
+    if (n.length === 0) return [];
+    const t = n[0].split(e).map((r) => r.trim().replace(/"/g, ""));
+    return n.slice(1).map((r) => {
+      const l = r.split(e).map((d) => d.trim().replace(/"/g, "")), p = {};
+      return t.forEach((d, i) => {
+        p[d] = l[i] || "";
+      }), p;
+    });
+  }, []), u = w((c) => {
+    try {
+      const e = JSON.parse(c);
+      return Array.isArray(e) ? e : [e];
+    } catch {
+      throw new Error("Format JSON invalide");
+    }
+  }, []), v = w((c) => {
+    try {
+      const t = new DOMParser().parseFromString(c, "text/xml").querySelectorAll("row");
+      return Array.from(t).map((o) => {
+        const r = {};
+        return Array.from(o.children).forEach((l) => {
+          r[l.tagName] = l.textContent || "";
+        }), r;
+      });
+    } catch {
+      throw new Error("Format XML invalide");
+    }
+  }, []), E = w(async (c) => {
+    try {
+      if (typeof window > "u")
+        throw new Error("XLSX parsing not available in server environment");
+      const e = await import("./exceljs.min-KOayaaQ4.mjs").then((i) => i.e), n = await c.arrayBuffer(), t = new e.Workbook();
+      await t.xlsx.load(n);
+      const o = a.parseOptions?.xlsx?.sheetIndex ?? 0, r = a.parseOptions?.xlsx?.headerRow ?? 1, l = t.worksheets[o];
+      if (!l || l.rowCount === 0) return [];
+      const p = [];
+      l.getRow(r).eachCell((i, s) => {
+        p[s - 1] = String(i.value || "");
+      });
+      const d = [];
+      for (let i = r + 1; i <= l.rowCount; i++) {
+        const s = l.getRow(i), m = {};
+        p.forEach((f, g) => {
+          const R = s.getCell(g + 1);
+          m[f] = R.value ?? "";
+        }), d.push(m);
+      }
+      return d;
+    } catch {
+      throw new Error("Erreur lors du parsing du fichier XLSX. Verifiez que exceljs est installe: pnpm add exceljs");
+    }
+  }, [a.parseOptions?.xlsx?.sheetIndex, a.parseOptions?.xlsx?.headerRow]), k = w((c) => a.validate ? a.validate(c) : Array.isArray(c) ? c.length === 0 ? { valid: !1, errors: ["Aucune donnée trouvée"] } : { valid: !0, errors: [] } : { valid: !1, errors: ["Les données doivent être un tableau"] }, [a.validate]), L = w((c) => a.columnMapping ? c.map((e) => {
+    const n = {};
+    return Object.entries(a.columnMapping).forEach(([t, o]) => {
+      e[t] !== void 0 && (n[o] = e[t]);
+    }), n;
+  }) : c, [a.columnMapping]), x = w(async (c) => {
+    const e = c.name.split(".").pop()?.toLowerCase();
+    let n = [];
+    try {
+      const t = await c.text();
+      switch (e) {
+        case "csv":
+          n = y(t, a.parseOptions?.csv?.delimiter);
+          break;
+        case "json":
+          n = u(t);
+          break;
+        case "xml":
+          n = v(t);
+          break;
+        case "xlsx":
+          n = await E(c);
+          break;
+        default:
+          throw new Error(`Format de fichier non supporté: ${e}`);
+      }
+      const o = k(n);
+      if (!o.valid)
+        throw new Error(`Données invalides: ${o.errors.join(", ")}`);
+      const r = L(n);
+      return a.onImport && a.onImport(r), r;
+    } catch (t) {
+      throw new Error(`Erreur lors de l'import: ${t instanceof Error ? t.message : "Erreur inconnue"}`);
+    }
+  }, [a, y, u, v, E, k, L]), h = w(() => {
+    const c = document.createElement("input");
+    return c.type = "file", c.accept = a.accept, c.multiple = !1, c;
+  }, [a.accept]), j = w(() => new Promise((c, e) => {
+    const n = h();
+    n.onchange = async (t) => {
+      const o = t.target.files?.[0];
+      if (!o) {
+        e(new Error("Aucun fichier sélectionné"));
+        return;
+      }
+      try {
+        const r = await x(o);
+        c(r);
+      } catch (r) {
+        e(r);
+      }
+    }, n.click();
+  }), [h, x]);
+  return {
+    importData: x,
+    importWithUI: j,
+    supportedFormats: a.accept?.split(",") || [],
+    isFormatSupported: (c) => {
+      const e = c.split(".").pop()?.toLowerCase();
+      return a.accept?.includes(e || "") || !1;
+    }
+  };
+}
+export {
+  U as a,
+  D as u
+};

package/dist/utils/index.d.ts

@@ -3,3 +3,4 @@ export { tweak, type VariantProps } from './tweak';
 export * from './datetime-helpers';
 export { ThemeLoader, initThemeLoader, getThemeLoader, loadTheme, applyTheme, useThemeLoader } from './theme-loader';
 export type { ThemeLoaderConfig } from './theme-loader';
+export { logger, type Logger } from './logger';

package/dist/utils/logger.d.ts

@@ -0,0 +1,9 @@
+type LogArgs = unknown[];
+export declare const logger: {
+    info: (...args: LogArgs) => void;
+    warn: (...args: LogArgs) => void;
+    error: (...args: LogArgs) => void;
+    log: (...args: LogArgs) => void;
+};
+export type Logger = typeof logger;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wakastellar/ui",
-  "version": "2.3.5",
+  "version": "3.0.0",
   "description": "Zero-config UI Library for Next.js with TweakCN theming and i18n support",
   "keywords": [
     "ui",
@@ -107,7 +107,7 @@
     "@tiptap/extension-underline": "^2.0.0 || ^3.0.0",
     "@tiptap/react": "^2.0.0 || ^3.0.0",
     "@tiptap/starter-kit": "^2.0.0 || ^3.0.0",
-    "jspdf": ">=4.0.0",
+    "jspdf": ">=4.1.0",
     "jspdf-autotable": "*",
     "next": ">=14.0.0",
     "react": ">=18.0.0",
@@ -115,7 +115,7 @@
     "react-hook-form": "^7.0.0",
     "recharts": "^2.0.0",
     "tailwindcss": ">=3.4.0 || >=4.0.0",
-    "xlsx": "*"
+    "exceljs": ">=4.3.0"
   },
   "peerDependenciesMeta": {
     "react-hook-form": {
@@ -139,7 +139,7 @@
     "@tiptap/extension-underline": {
       "optional": true
     },
-    "xlsx": {
+    "exceljs": {
       "optional": true
     },
     "jspdf": {
@@ -151,6 +151,12 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.1",
+    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-onboarding": "^10.1.11",
+    "@storybook/addon-vitest": "^10.1.11",
+    "@storybook/react-vite": "^10.1.11",
+    "@tailwindcss/vite": "^4.1.18",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
@@ -170,7 +176,7 @@
     "playwright": "^1.56.0",
     "postcss": "^8.4.31",
     "react-hook-form": "^7.70.0",
-    "storybook": "^9.1.17",
+    "storybook": "^10.1.11",
     "tailwindcss": "^4.1.8",
     "typescript": "^5.5.0",
     "vite": "^7.1.9",
@@ -187,6 +193,8 @@
     "test": "vitest --config vitest.config.unit.ts",
     "test:watch": "vitest --config vitest.config.unit.ts --watch",
     "test:coverage": "vitest --config vitest.config.unit.ts --coverage",
-    "test:ui": "vitest --config vitest.config.unit.ts --ui"
+    "test:ui": "vitest --config vitest.config.unit.ts --ui",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }