@streamoid/catalogix-chat 0.2.14 → 0.2.15

package/dist/index.js

@@ -29,11 +29,7 @@ async function fetchJson(url, options) {
 
 // src/SelectProducts/index.tsx
 import { useCallback as useCallback4, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
-import { CheckCircle, Loader2 as Loader23, Search as Search2 } from "lucide-react";
-
-// src/ui/button.tsx
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
+import { CheckCircle, Search as Search2 } from "lucide-react";
 
 // src/ui/utils.ts
 import { clsx } from "clsx";
@@ -42,55 +38,10 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/ui/button.tsx
-import { jsx } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline: "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline"
-      },
-      size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9 rounded-md"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      "data-slot": "button",
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
-    }
-  );
-}
-
 // src/ui/input.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx(
     "input",
     {
       type,
@@ -107,9 +58,9 @@ function Input({ className, type, ...props }) {
 }
 
 // src/ui/card.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-slot": "card",
@@ -129,17 +80,17 @@ import {
   getCoreRowModel,
   useReactTable
 } from "@tanstack/react-table";
-import { ChevronLeft, ChevronRight, Package, Layers } from "lucide-react";
+import { ChevronLeft, ChevronRight, Loader2 as Loader22, Package, Layers } from "lucide-react";
 
 // src/ui/table.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function Table({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       "data-slot": "table-container",
       className: "relative w-full overflow-x-auto",
-      children: /* @__PURE__ */ jsx4(
+      children: /* @__PURE__ */ jsx3(
         "table",
         {
           "data-slot": "table",
@@ -151,7 +102,7 @@ function Table({ className, ...props }) {
   );
 }
 function TableHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "thead",
     {
       "data-slot": "table-header",
@@ -161,7 +112,7 @@ function TableHeader({ className, ...props }) {
   );
 }
 function TableBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "tbody",
     {
       "data-slot": "table-body",
@@ -171,7 +122,7 @@ function TableBody({ className, ...props }) {
   );
 }
 function TableRow({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "tr",
     {
       "data-slot": "table-row",
@@ -184,7 +135,7 @@ function TableRow({ className, ...props }) {
   );
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "th",
     {
       "data-slot": "table-head",
@@ -197,7 +148,7 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx3(
     "td",
     {
       "data-slot": "table-cell",
@@ -213,12 +164,12 @@ function TableCell({ className, ...props }) {
 // src/ui/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "lucide-react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function Checkbox({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx4(
     CheckboxPrimitive.Root,
     {
       "data-slot": "checkbox",
@@ -227,12 +178,12 @@ function Checkbox({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx5(
+      children: /* @__PURE__ */ jsx4(
         CheckboxPrimitive.Indicator,
         {
           "data-slot": "checkbox-indicator",
           className: "flex items-center justify-center text-current transition-none",
-          children: /* @__PURE__ */ jsx5(CheckIcon, { className: "size-3.5" })
+          children: /* @__PURE__ */ jsx4(CheckIcon, { className: "size-3.5" })
         }
       )
     }
@@ -240,10 +191,10 @@ function Checkbox({
 }
 
 // src/ui/badge.tsx
-import { Slot as Slot2 } from "@radix-ui/react-slot";
-import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var badgeVariants = cva2(
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var badgeVariants = cva(
   "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
@@ -265,8 +216,8 @@ function Badge({
   asChild = false,
   ...props
 }) {
-  const Comp = asChild ? Slot2 : "span";
-  return /* @__PURE__ */ jsx6(
+  const Comp = asChild ? Slot : "span";
+  return /* @__PURE__ */ jsx5(
     Comp,
     {
       "data-slot": "badge",
@@ -276,6 +227,53 @@ function Badge({
   );
 }
 
+// src/ui/button.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9 rounded-md"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2 : "button";
+  return /* @__PURE__ */ jsx6(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
 // src/ui/skeleton.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
 function Skeleton({ className, ...props }) {
@@ -1023,7 +1021,7 @@ function TextEditor({
 }
 
 // src/SelectProducts/ProductTable.tsx
-import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
 function ProductTable({
   products,
   columns: appColumns,
@@ -1039,7 +1037,9 @@ function ProductTable({
   totalProducts,
   totalSkus,
   onPageChange,
-  globalFilter
+  globalFilter,
+  onConfirmSelection,
+  isSubmitting
 }) {
   const tanstackColumns = useMemo(() => {
     const selectCol = {
@@ -1186,11 +1186,17 @@ function ProductTable({
               TableRow,
               {
                 "data-state": row.getIsSelected() ? "selected" : void 0,
+                className: "group cursor-pointer data-[state=selected]:bg-primary/8",
+                onClick: (e) => {
+                  const target = e.target;
+                  if (target.closest("input, select, textarea, button, [role=checkbox]")) return;
+                  row.toggleSelected();
+                },
                 children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx13(
                   TableCell,
                   {
                     style: { width: cell.column.getSize() },
-                    className: cell.column.id === "_select" ? "sticky left-0 z-10 bg-background" : "",
+                    className: cell.column.id === "_select" ? "sticky left-0 z-10 bg-background group-data-[state=selected]:bg-primary/8" : "",
                     children: flexRender(
                       cell.column.columnDef.cell,
                       cell.getContext()
@@ -1250,41 +1256,56 @@ function ProductTable({
           " selected"
         ] })
       ] }),
-      totalPages > 0 && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs5(
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+        onConfirmSelection && table.getFilteredSelectedRowModel().rows.length > 0 && /* @__PURE__ */ jsx13(
           Button,
           {
-            variant: "outline",
+            onClick: onConfirmSelection,
+            disabled: isSubmitting,
             size: "sm",
-            onClick: () => onPageChange(currentPage - 1),
-            disabled: currentPage <= 1,
-            className: "h-7 px-2",
-            children: [
-              /* @__PURE__ */ jsx13(ChevronLeft, { className: "size-4" }),
-              "Prev"
-            ]
+            className: "h-7",
+            children: isSubmitting ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+              /* @__PURE__ */ jsx13(Loader22, { className: "size-3.5 animate-spin" }),
+              "Submitting..."
+            ] }) : "Confirm selection"
           }
         ),
-        /* @__PURE__ */ jsxs5("span", { className: "min-w-[5rem] text-center text-xs text-muted-foreground", children: [
-          "Page ",
-          currentPage,
-          " of ",
-          totalPages
-        ] }),
-        /* @__PURE__ */ jsxs5(
-          Button,
-          {
-            variant: "outline",
-            size: "sm",
-            onClick: () => onPageChange(currentPage + 1),
-            disabled: currentPage >= totalPages,
-            className: "h-7 px-2",
-            children: [
-              "Next",
-              /* @__PURE__ */ jsx13(ChevronRight, { className: "size-4" })
-            ]
-          }
-        )
+        totalPages > 0 && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs5(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => onPageChange(currentPage - 1),
+              disabled: currentPage <= 1,
+              className: "h-7 px-2",
+              children: [
+                /* @__PURE__ */ jsx13(ChevronLeft, { className: "size-4" }),
+                "Prev"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs5("span", { className: "min-w-[5rem] text-center text-xs text-muted-foreground", children: [
+            "Page ",
+            currentPage,
+            " of ",
+            totalPages
+          ] }),
+          /* @__PURE__ */ jsxs5(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => onPageChange(currentPage + 1),
+              disabled: currentPage >= totalPages,
+              className: "h-7 px-2",
+              children: [
+                "Next",
+                /* @__PURE__ */ jsx13(ChevronRight, { className: "size-4" })
+              ]
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -1296,7 +1317,7 @@ function isImageColumn(col) {
 
 // src/SelectProducts/ColumnManager.tsx
 import { useMemo as useMemo2, useState as useState4 } from "react";
-import { Columns, Loader2 as Loader22, Search } from "lucide-react";
+import { Columns, Loader2 as Loader23, Search } from "lucide-react";
 
 // src/ui/switch.tsx
 import * as SwitchPrimitive from "@radix-ui/react-switch";
@@ -1369,7 +1390,7 @@ function ColumnManager({
         children: [
           /* @__PURE__ */ jsx15(Columns, { className: "size-4" }),
           "Columns",
-          loading ? /* @__PURE__ */ jsx15(Loader22, { className: "ml-0.5 size-3.5 animate-spin text-muted-foreground" }) : /* @__PURE__ */ jsxs6(Badge, { variant: "secondary", className: "ml-0.5 text-xs font-normal", children: [
+          loading ? /* @__PURE__ */ jsx15(Loader23, { className: "ml-0.5 size-3.5 animate-spin text-muted-foreground" }) : /* @__PURE__ */ jsxs6(Badge, { variant: "secondary", className: "ml-0.5 text-xs font-normal", children: [
             visibleCount,
             "/",
             allColumns.length
@@ -1488,7 +1509,7 @@ async function updateProduct({
 }
 
 // src/SelectProducts/index.tsx
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 function SelectProducts({
   workspaceId,
   storeId,
@@ -1644,7 +1665,6 @@ function SelectProducts({
     );
     return products.filter((p) => selectedIds.includes(p.id));
   }, [rowSelection, products]);
-  const hasSelection = selectedProducts.length > 0;
   const handleConfirmSelection = useCallback4(async () => {
     if (!onConfirmSelection) return;
     const productUuids = Array.from(
@@ -1755,29 +1775,11 @@ function SelectProducts({
         totalProducts,
         totalSkus,
         onPageChange: handlePageChange,
-        globalFilter
+        globalFilter,
+        onConfirmSelection: handleConfirmSelection,
+        isSubmitting
       }
-    ) }),
-    hasSelection && /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between rounded-lg border bg-muted/50 px-4 py-2", children: [
-      /* @__PURE__ */ jsxs7("span", { className: "text-sm font-medium", children: [
-        selectedProducts.length,
-        " product",
-        selectedProducts.length !== 1 ? "s" : "",
-        " selected"
-      ] }),
-      /* @__PURE__ */ jsx16(
-        Button,
-        {
-          onClick: handleConfirmSelection,
-          disabled: isSubmitting,
-          size: "sm",
-          children: isSubmitting ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
-            /* @__PURE__ */ jsx16(Loader23, { className: "size-4 animate-spin" }),
-            "Submitting..."
-          ] }) : "Confirm selection"
-        }
-      )
-    ] })
+    ) })
   ] });
 }
 function mergeAllowedValues(base, incoming) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoid/catalogix-chat",
-  "version": "0.2.14",
+  "version": "0.2.15",
   "description": "Catalogix chat components for the Streamoid chat host — store creation, product selection, automations",
   "type": "module",
   "main": "./dist/index.js",
@@ -20,10 +20,10 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
     "@tanstack/react-table": "^8.0.0",
-    "lucide-react": ">=0.263.0"
+    "lucide-react": ">=0.263.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.0.4",
@@ -42,8 +42,10 @@
   },
   "devDependencies": {
     "@streamoid/chat-component-types": "^0.1.0",
+    "@tanstack/react-table": "^8.21.3",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "lucide-react": "^0.576.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
   },