laif-ds 0.1.20 → 0.1.22

package/README.md

@@ -1,6 +1,87 @@
-PUBBLICARE:
+## PUBBLICARE:
 npm login
+npm whoami (verifica se sei loggato con accoutn corretto)
+yarn build (farà partire build per tailwindv3 e tailwindv4)
 npm publish --access public
 
-USO:
-npm i @laif/ds
+## INSTALL:
+npm i @laif/ds
+
+## HOW IT WORKS
+Per vedere i componenti con storybook:
+```
+yarn storybook
+```
+
+Il comando esegue due operazioni in sequenza: prima compila il CSS con tailwindcss v4 salvandolo in un file output.css, poi avvia Storybook che utilizza questo file CSS precompilato.
+Questo approccio è necessario con Tailwind CSS v4 perché, a differenza delle versioni precedenti, v4 utilizza un'architettura "zero-runtime" che non si integra più direttamente con Storybook. La generazione separata del CSS è quindi la soluzione raccomandata per utilizzare Tailwind v4 con Storybook.
+
+## COME FUNZIONANO LE STORIES
+
+Le stories in Storybook sono il modo in cui documentiamo e testiamo visivamente i nostri componenti. Ogni story rappresenta uno stato specifico di un componente.
+
+### Struttura di una Story
+
+Una story è definita in un file con estensione `.stories.tsx` (o `.stories.jsx` per JavaScript) e segue questa struttura:
+
+```tsx
+// button.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../ui/button';
+
+// Metadati del componente
+const meta = {
+  title: 'UI/Button', // Categoria/Nome nella sidebar di Storybook
+  component: Button,  // Il componente da documentare
+  parameters: {
+    layout: 'centered', // Layout della preview
+  },
+  tags: ['autodocs'], // Genera automaticamente la documentazione
+  argTypes: {
+    // Definizione dei controlli per i props
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
+      description: 'La variante visiva del bottone',
+    },
+    // Altri argTypes...
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Definizione delle singole stories
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    variant: 'default',
+    size: 'default',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Button',
+    variant: 'secondary',
+    size: 'default',
+  },
+};
+
+// Altre stories...
+```
+
+### Come creare una nuova Story
+
+1. Crea un nuovo file nella directory `src/components/stories/` con nome `nome-componente.stories.tsx`
+2. Importa il componente e le dipendenze necessarie
+3. Definisci i metadati con `const meta = {...}`
+4. Esporta i metadati con `export default meta`
+5. Definisci il tipo Story con `type Story = StoryObj<typeof meta>`
+6. Crea le diverse varianti del componente esportando costanti di tipo Story
+
+
+### Colors
+Qui è definito il tema base di laif. Sovrascrivibile nel progetto che lo implementa.
+Per farlo basta cambiare i valori delle variabili.
+Di seguito sono importati 3 temi per demostrazione generati con  (https://tweakcn.com/editor/theme)

package/dist/components/ui/app-sidebar.js

@@ -1,70 +1,120 @@
 "use client";
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import * as f from "react";
-import { Sidebar as x, SidebarHeader as v, SidebarContent as N, SidebarGroup as C, SidebarGroupLabel as M, SidebarGroupContent as A, SidebarMenu as I, SidebarMenuItem as g, SidebarMenuButton as w, SidebarMenuSub as j, SidebarMenuSubItem as G, SidebarMenuSubButton as R, SidebarRail as k } from "./sidebar.js";
-import { Icon as t } from "./icon.js";
-function H({
-  navigation: o,
-  versions: z,
-  defaultVersion: B,
-  headerContent: s,
-  footerContent: h,
-  showRail: u = !0,
-  ...m
+import { jsxs as r, jsx as t, Fragment as x } from "react/jsx-runtime";
+import * as v from "react";
+import { Sidebar as z, SidebarHeader as B, SidebarContent as H, SidebarGroup as A, SidebarGroupLabel as N, SidebarGroupContent as w, SidebarMenu as C, SidebarMenuItem as E, SidebarMenuSub as M, SidebarMenuSubItem as j, SidebarRail as V, SidebarMenuButton as D, SidebarMenuSubButton as G } from "./sidebar.js";
+import { Icon as h } from "./icon.js";
+function T({
+  navigation: u,
+  navigationFooter: f,
+  versions: q,
+  defaultVersion: J,
+  headerContent: b,
+  footerContent: R,
+  showRail: k = !0,
+  linkComponent: a,
+  linkProps: S = {},
+  ...y
 }) {
-  const [p, S] = f.useState({});
-  return /* @__PURE__ */ r(x, { ...m, children: [
-    s && /* @__PURE__ */ e(v, { children: s }),
-    /* @__PURE__ */ e(N, { children: o.map((l) => /* @__PURE__ */ r(C, { children: [
-      /* @__PURE__ */ e(M, { children: l.title }),
-      /* @__PURE__ */ e(A, { children: /* @__PURE__ */ e(I, { children: l.items.map((i) => {
-        const a = i.subItems && i.subItems.length > 0, d = p[i.title] || !1, b = (n) => {
-          a && (n.preventDefault(), S((c) => ({
-            ...c,
-            [i.title]: !c[i.title]
-          })));
-        };
-        return /* @__PURE__ */ r(g, { children: [
-          /* @__PURE__ */ e(
-            w,
-            {
-              asChild: !0,
-              isActive: i.isActive,
-              children: /* @__PURE__ */ r(
-                "a",
-                {
-                  href: a ? "#" : i.url,
-                  className: "flex items-center justify-between gap-2",
-                  onClick: a ? b : void 0,
-                  children: [
-                    /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
-                      i.iconName && /* @__PURE__ */ e(t, { name: i.iconName, size: "sm" }),
-                      /* @__PURE__ */ e("span", { children: i.title })
-                    ] }),
-                    a && /* @__PURE__ */ e("div", { className: "text-muted-foreground", children: d ? /* @__PURE__ */ e(t, { name: "ChevronDown", className: "h-4 w-4" }) : /* @__PURE__ */ e(t, { name: "ChevronRight", className: "h-4 w-4" }) })
-                  ]
-                }
-              )
-            }
-          ),
-          a && d && /* @__PURE__ */ e(j, { children: i.subItems.map((n) => /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
-            R,
-            {
-              asChild: !0,
-              isActive: n.isActive,
-              children: /* @__PURE__ */ r("a", { href: n.url, className: "flex items-center gap-2", children: [
-                n.iconName && /* @__PURE__ */ e(t, { name: n.iconName, size: "xs" }),
-                /* @__PURE__ */ e("span", { children: n.title })
-              ] })
-            }
-          ) }, n.title)) })
-        ] }, i.title);
+  const [m, o] = v.useState({});
+  v.useEffect(() => {
+    const e = { ...m };
+    u.forEach((s) => {
+      s.items.some(
+        (l) => l.isActive || l.subItems && l.subItems.some((c) => c.isActive)
+      ) && (e[s.title] = !0);
+    }), o(e);
+  }, [u]);
+  const p = (e, s, n) => {
+    const l = e.subItems && e.subItems.length > 0, c = /* @__PURE__ */ r(x, { children: [
+      /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+        e.iconName && /* @__PURE__ */ t(h, { name: e.iconName, size: "sm" }),
+        /* @__PURE__ */ t("span", { children: e.title })
+      ] }),
+      l && /* @__PURE__ */ t("div", { className: "text-d-muted-foreground", children: s ? /* @__PURE__ */ t(h, { name: "ChevronDown", className: "h-4 w-4" }) : /* @__PURE__ */ t(h, { name: "ChevronRight", className: "h-4 w-4" }) })
+    ] });
+    return a ? /* @__PURE__ */ t(D, { isActive: e.isActive, children: /* @__PURE__ */ t(
+      a,
+      {
+        href: l ? "#" : e.url,
+        className: "flex items-center justify-between gap-2 w-full",
+        onClick: l ? n : void 0,
+        ...S,
+        children: c
+      }
+    ) }) : /* @__PURE__ */ t(D, { isActive: e.isActive, children: /* @__PURE__ */ t(
+      "a",
+      {
+        href: l ? "#" : e.url,
+        className: "flex items-center justify-between gap-2 w-full",
+        onClick: l ? n : void 0,
+        children: c
+      }
+    ) });
+  }, I = (e) => {
+    const s = /* @__PURE__ */ r(x, { children: [
+      e.iconName && /* @__PURE__ */ t(h, { name: e.iconName, size: "xs" }),
+      /* @__PURE__ */ t("span", { children: e.title })
+    ] });
+    return a ? /* @__PURE__ */ t(
+      G,
+      {
+        isActive: e.isActive,
+        asChild: !0,
+        children: /* @__PURE__ */ t(
+          a,
+          {
+            href: e.url,
+            className: "flex items-center gap-2 w-full",
+            ...S,
+            children: s
+          }
+        )
+      }
+    ) : /* @__PURE__ */ t(
+      G,
+      {
+        isActive: e.isActive,
+        asChild: !0,
+        children: /* @__PURE__ */ t("a", { href: e.url, className: "flex items-center gap-2 w-full", children: s })
+      }
+    );
+  };
+  return /* @__PURE__ */ r(z, { ...y, children: [
+    b && /* @__PURE__ */ t(B, { children: b }),
+    /* @__PURE__ */ t(H, { children: u.map((e) => /* @__PURE__ */ r(A, { children: [
+      e.title && /* @__PURE__ */ t(N, { children: e.title }),
+      /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(C, { children: e.items.map((s) => {
+        const n = s.subItems && s.subItems.length > 0, l = m[s.title] || !1;
+        return /* @__PURE__ */ r(E, { children: [
+          p(s, l, (i) => {
+            n && (i.preventDefault(), o((d) => ({
+              ...d,
+              [s.title]: !d[s.title]
+            })));
+          }),
+          n && l && /* @__PURE__ */ t(M, { children: s.subItems.map((i) => /* @__PURE__ */ t(j, { children: I(i) }, i.title)) })
+        ] }, s.title);
       }) }) })
-    ] }, l.title)) }),
-    h,
-    u && /* @__PURE__ */ e(k, {})
+    ] }, e.title)) }),
+    f == null ? void 0 : f.map((e) => /* @__PURE__ */ r(A, { children: [
+      e.title && /* @__PURE__ */ t(N, { children: e.title }),
+      /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(C, { children: e.items.map((s) => {
+        const n = s.subItems && s.subItems.length > 0, l = m[s.title] || !1;
+        return /* @__PURE__ */ r(E, { children: [
+          p(s, l, (i) => {
+            n && (i.preventDefault(), o((d) => ({
+              ...d,
+              [s.title]: !d[s.title]
+            })));
+          }),
+          n && l && /* @__PURE__ */ t(M, { children: s.subItems.map((i) => /* @__PURE__ */ t(j, { children: I(i) }, i.title)) })
+        ] }, s.title);
+      }) }) })
+    ] }, e.title)),
+    R,
+    k && /* @__PURE__ */ t(V, {})
   ] });
 }
 export {
-  H as AppSidebar
+  T as AppSidebar
 };

package/dist/components/ui/data-table.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { useReactTable as H, flexRender as f } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { Checkbox as S } from "../../dist/components/ui/checkbox.js";
-import { ScrollArea as V, ScrollBar as b } from "../../dist/components/ui/scroll-area.js";
-import { Table as I, TableHeader as j, TableRow as i, TableHead as B, TableBody as _, TableCell as c } from "../../dist/components/ui/table.js";
-import E, { useState as s, useEffect as L } from "react";
+import { useReactTable as V, flexRender as f } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
+import I, { useState as c, useEffect as $ } from "react";
+import { Checkbox as S } from "./checkbox.js";
+import { ScrollArea as j, ScrollBar as b } from "./scroll-area.js";
+import { Table as B, TableHeader as _, TableRow as n, TableHead as E, TableBody as L, TableCell as r } from "./table.js";
 import { getFilteredRowModel as W, getSortedRowModel as q, getPaginationRowModel as G, getCoreRowModel as J } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
 function ee({
   columns: o,
@@ -15,13 +15,13 @@ function ee({
   className: C,
   rowSelection: x = {},
   onRowSelectionChange: m,
-  checkable: n = !1,
-  onCheckedRowsChange: r,
+  checkable: a = !1,
+  onCheckedRowsChange: s,
   notFoundMessage: M = "Nessun risultato trovato.",
   loadingMessage: N = "Caricamento in corso..."
 }) {
   var u;
-  const [y, T] = s([]), [k, v] = s([]), [F, z] = s({}), [D, P] = s({}), g = m ? x : D, $ = m || P, A = E.useMemo(() => n ? [
+  const [y, T] = c([]), [k, v] = c([]), [F, z] = c({}), [D, P] = c({}), g = m ? x : D, A = m || P, H = I.useMemo(() => a ? [
     {
       id: "select",
       header: ({ table: t }) => /* @__PURE__ */ e("div", { className: "text-center", children: /* @__PURE__ */ e(
@@ -44,9 +44,9 @@ function ee({
       enableHiding: !1
     },
     ...o
-  ] : o, [o, n]), a = H({
+  ] : o, [o, a]), i = V({
     data: w,
-    columns: A,
+    columns: H,
     getCoreRowModel: J(),
     getPaginationRowModel: G(),
     onSortingChange: T,
@@ -54,7 +54,7 @@ function ee({
     onColumnFiltersChange: v,
     getFilteredRowModel: W(),
     onColumnVisibilityChange: z,
-    onRowSelectionChange: $,
+    onRowSelectionChange: A,
     state: {
       sorting: y,
       columnFilters: k,
@@ -62,17 +62,17 @@ function ee({
       rowSelection: g
     }
   });
-  return L(() => {
-    if (r && n) {
-      const t = a.getFilteredSelectedRowModel().rows.map((l) => l.original);
-      r(t);
+  return $(() => {
+    if (s && a) {
+      const t = i.getFilteredSelectedRowModel().rows.map((l) => l.original);
+      s(t);
     }
-  }, [a, r, n, g]), /* @__PURE__ */ e("div", { className: `w-full ${C}`, children: /* @__PURE__ */ e("div", { className: "rounded-md border", children: /* @__PURE__ */ h(V, { className: "h-full w-full", children: [
+  }, [i, s, a, g]), /* @__PURE__ */ e("div", { className: `w-full ${C}`, children: /* @__PURE__ */ e("div", { className: "rounded-md border", children: /* @__PURE__ */ h(j, { className: "h-full w-full", children: [
     /* @__PURE__ */ e(b, { orientation: "horizontal" }),
     /* @__PURE__ */ e(b, { orientation: "vertical" }),
-    /* @__PURE__ */ h(I, { children: [
-      /* @__PURE__ */ e(j, { children: a.getHeaderGroups().map((t) => /* @__PURE__ */ e(i, { children: t.headers.map((l) => /* @__PURE__ */ e(
-        B,
+    /* @__PURE__ */ h(B, { children: [
+      /* @__PURE__ */ e(_, { children: i.getHeaderGroups().map((t) => /* @__PURE__ */ e(n, { children: t.headers.map((l) => /* @__PURE__ */ e(
+        E,
         {
           className: `${l.column.columnDef.sticky ? "sticky left-0 z-10 bg-d-background" : ""}`,
           children: l.isPlaceholder ? null : f(
@@ -82,19 +82,19 @@ function ee({
         },
         l.id
       )) }, t.id)) }),
-      /* @__PURE__ */ e(_, { children: R ? d ? /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(c, { colSpan: 1e3, className: "h-24", children: d }) }) : /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
-        c,
+      /* @__PURE__ */ e(L, { children: R ? d ? /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(r, { colSpan: 1e3, className: "h-24", children: d }) }) : /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
+        r,
         {
           colSpan: o.length,
           className: "h-24 text-center",
           children: N
         }
-      ) }) : (u = a.getRowModel().rows) != null && u.length ? a.getRowModel().rows.map((t) => /* @__PURE__ */ e(
-        i,
+      ) }) : (u = i.getRowModel().rows) != null && u.length ? i.getRowModel().rows.map((t) => /* @__PURE__ */ e(
+        n,
         {
           "data-state": t.getIsSelected() && "selected",
           children: t.getVisibleCells().map((l) => /* @__PURE__ */ e(
-            c,
+            r,
             {
               className: `${l.column.columnDef.sticky ? "sticky left-0 z-10 bg-d-background" : ""}`,
               children: f(
@@ -106,8 +106,8 @@ function ee({
           ))
         },
         t.id
-      )) : /* @__PURE__ */ e(i, { children: /* @__PURE__ */ e(
-        c,
+      )) : /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
+        r,
         {
           colSpan: o.length,
           className: "h-24 text-center",

package/dist/components/ui/date-picker.js

@@ -1,37 +1,37 @@
 "use client";
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import * as c from "react";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import * as i from "react";
 import { cn as g } from "../../lib/utils.js";
-import { Button as h } from "./button.js";
-import { Calendar as x } from "./calendar.js";
-import { Popover as P, PopoverTrigger as w, PopoverContent as y } from "./popover.js";
-import { formatDate as b } from "../../node_modules/date-fns/format.js";
-function N({
+import { Button as x } from "./button.js";
+import { Calendar as h } from "./calendar.js";
+import { Popover as P, PopoverTrigger as w, PopoverContent as b } from "./popover.js";
+import { formatDate as v } from "../../node_modules/date-fns/format.js";
+function k({
   value: r,
   onChange: a,
-  placeholder: l = "Seleziona data",
-  dateFormat: d = "PPP",
+  placeholder: c = "Seleziona data",
+  dateFormat: l = "PPP",
   className: f,
-  buttonVariant: m = "outline",
+  buttonVariant: m = "default",
   disabled: t = !1,
   size: n = "default"
 }) {
-  const [o, i] = c.useState(r);
-  c.useEffect(() => {
-    i(r);
+  const [o, d] = i.useState(r);
+  i.useEffect(() => {
+    d(r);
   }, [r]);
-  const p = (s) => {
-    i(s), a && a(s);
+  const u = (s) => {
+    d(s), a && a(s);
   };
-  return /* @__PURE__ */ u(P, { open: t ? !1 : void 0, children: [
+  return /* @__PURE__ */ p(P, { open: t ? !1 : void 0, children: [
     /* @__PURE__ */ e(w, { asChild: !0, children: /* @__PURE__ */ e(
-      h,
+      x,
       {
         variant: m,
         size: n,
         className: g(
-          "flex items-center justify-between whitespace-nowrap border border-d-input bg-d-transparent px-3 py-2 shadow-sm ring-offset-background data-[placeholder]:text-d-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-normal",
-          !o && "text-d-secondary-foreground",
+          "flex items-center justify-between whitespace-nowrap border border-d-input text-d-foreground hover:bg-d-accent bg-d-transparent px-3 py-2 shadow-sm ring-offset-background data-[placeholder]:text-d-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-normal",
+          !o && "text-d-muted-foreground",
           t && "opacity-50 cursor-not-allowed",
           f,
           n === "sm" && "text-xs",
@@ -39,15 +39,15 @@ function N({
         ),
         disabled: t,
         iconLeft: "Calendar",
-        children: o ? b(o, d) : /* @__PURE__ */ e("span", { children: l })
+        children: o ? v(o, l) : /* @__PURE__ */ e("span", { className: "text-d-muted-foreground", children: c })
       }
     ) }),
-    /* @__PURE__ */ e(y, { className: "w-auto p-0", children: /* @__PURE__ */ e(
-      x,
+    /* @__PURE__ */ e(b, { className: "w-auto p-0", children: /* @__PURE__ */ e(
+      h,
       {
         mode: "single",
         selected: o,
-        onSelect: p,
+        onSelect: u,
         initialFocus: !0,
         disabled: t
       }
@@ -55,5 +55,5 @@ function N({
   ] });
 }
 export {
-  N as DatePicker
+  k as DatePicker
 };