@arcadeai/design-system 1.2.0 → 1.3.0

package/dist/components/ui/organisms/toolkit-picker/toolkit-picker.js

@@ -0,0 +1,395 @@
+import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { X as n, Package as I, Wrench as P, CheckSquare as V, FilterIcon as M, Search as Q } from "lucide-react";
+import { Arcade as W } from "../../../../assets/icons/arcade.js";
+import { getToolkitIconByName as $, getToolIconByToolkitName as E } from "../../../../assets/icons/utils.js";
+import { Badge as k } from "../../atoms/badge.js";
+import { Button as c } from "../../atoms/button.js";
+import { Dialog as H, DialogTrigger as L, DialogContent as O, DialogHeader as X, DialogTitle as Y, DialogDescription as G, DialogClose as v, DialogFooter as J } from "../../atoms/dialog.js";
+import { MobileTooltipProvider as K } from "../../atoms/mobile-tooltip.js";
+import { Tabs as R, TabsList as U, TabsTrigger as N, TabsContent as y } from "../../atoms/tabs.js";
+import { EmptyState as w } from "../../molecules/empty-state.js";
+import "../../../../toolkit-card-GhM_oj4G.js";
+import { ToolCard as Z } from "../../molecules/tool-card.js";
+import { useToolkitPicker as ee } from "./hooks/use-toolkit-picker.js";
+import "../../atoms/chart.js";
+import "../../atoms/form.js";
+import "../../../../react-resizable-panels.browser-ZHjTH32c.js";
+import "../../atoms/sidebar.js";
+import "react";
+import "../../atoms/table.js";
+import { FooterSummary as te } from "./components/footer-summary.js";
+import { SearchInput as ae } from "./components/search-input.js";
+import { SelectButton as le } from "./components/select-button.js";
+import { ToolkitCardWithSelection as re } from "./components/toolkit-card-with-selection.js";
+const ze = (_) => {
+  const {
+    description: T = "Select toolkits and tools",
+    children: C,
+    selectionMode: l = "multi",
+    onSelectionChange: h
+  } = _, {
+    state: {
+      selectedToolkits: u,
+      selectedTools: r,
+      activeTab: g,
+      filteredToolkits: o,
+      filteredTools: d,
+      toolkitFilter: m,
+      searchQuery: x
+    },
+    setActiveTab: i,
+    toggleToolkit: S,
+    toggleTool: z,
+    clearSelections: q,
+    clearSearchQuery: f,
+    clearFilter: A,
+    selectAll: D,
+    commitSelections: j,
+    restoreCommittedState: F,
+    setToolkitFilter: b
+  } = ee();
+  return /* @__PURE__ */ e(K, { children: /* @__PURE__ */ a(
+    H,
+    {
+      onOpenChange: (t) => {
+        t && (F(), f(), i("toolkits"));
+      },
+      children: [
+        /* @__PURE__ */ e(L, { asChild: !0, children: C }),
+        /* @__PURE__ */ a(
+          O,
+          {
+            className: "flex max-h-[80vh] min-h-80 w-[95vw] max-w-xl flex-col gap-2 p-0 sm:max-w-2xl md:max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-7xl",
+            "data-testid": "toolkit-picker-dialog",
+            showCloseButton: !1,
+            children: [
+              /* @__PURE__ */ a(X, { className: "shrink-0 p-4 pb-0 sm:p-6 sm:pb-0", children: [
+                /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ a("div", { className: "relative flex size-10 items-center justify-center overflow-hidden rounded-xl shadow-lg ring-1 ring-black/5 sm:size-12", children: [
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          "aria-hidden": !0,
+                          className: "pointer-events-none absolute inset-0 z-0 rounded-xl bg-[radial-gradient(at_15%_20%,rgba(249,115,22,0.9),transparent_45%),radial-gradient(at_10%_85%,rgba(14,165,233,0.9),transparent_45%),radial-gradient(at_95%_25%,rgba(236,72,153,0.9),transparent_40%),linear-gradient(135deg,rgba(14,165,233,0.6)_0%,rgba(236,72,153,0.6)_50%,rgba(249,115,22,0.6)_100%)]"
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        "span",
+                        {
+                          "aria-hidden": !0,
+                          className: "pointer-events-none absolute inset-0 z-10 bg-[repeating-conic-gradient(from_0deg_at_100%_0%,rgba(0,0,0,0.25)_0deg_1deg,transparent_1deg_12deg)] opacity-30"
+                        }
+                      ),
+                      /* @__PURE__ */ e("span", { className: "relative z-20", children: /* @__PURE__ */ e(W, { className: "size-5 sm:size-7" }) })
+                    ] }),
+                    /* @__PURE__ */ a("div", { className: "ml-1 text-left", children: [
+                      /* @__PURE__ */ e(Y, { className: "font-bold text-lg sm:text-xl", children: "Choose Your Tools" }),
+                      /* @__PURE__ */ e(G, { className: "hidden sm:block", children: T })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
+                    c,
+                    {
+                      className: "h-8 w-8 rounded-full p-0",
+                      "data-testid": "toolkit-picker-close",
+                      size: "sm",
+                      variant: "ghost",
+                      children: /* @__PURE__ */ e(n, { className: "h-4 w-4" })
+                    }
+                  ) })
+                ] }),
+                /* @__PURE__ */ e("div", { className: "mb-2 space-y-2 pt-2 sm:space-y-4 sm:pt-4", children: /* @__PURE__ */ e(ae, {}) })
+              ] }),
+              /* @__PURE__ */ a(
+                R,
+                {
+                  className: "flex min-h-0 flex-1 flex-col",
+                  onValueChange: (t) => i(t),
+                  value: g,
+                  children: [
+                    /* @__PURE__ */ a("div", { className: "shrink-0 space-y-2 px-4 sm:space-y-3 sm:px-6", children: [
+                      /* @__PURE__ */ a("div", { className: "flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+                        /* @__PURE__ */ a(U, { className: "h-10 w-auto gap-1 rounded-md border border-neutral-200 bg-white/60 p-1 shadow-sm dark:border-neutral-800 dark:bg-neutral-900/60", children: [
+                          /* @__PURE__ */ a(
+                            N,
+                            {
+                              className: "h-8 rounded-md px-3 font-medium text-neutral-600 text-sm hover:bg-black/5 data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:text-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-white dark:hover:bg-white/10",
+                              "data-testid": "toolkits-tab",
+                              value: "toolkits",
+                              children: [
+                                /* @__PURE__ */ e(I, { className: "h-4 w-4" }),
+                                /* @__PURE__ */ e("span", { children: "Toolkits" }),
+                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: o.size })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ a(
+                            N,
+                            {
+                              className: "h-8 rounded-md px-3 font-medium text-neutral-600 text-sm hover:bg-black/5 data-[state=active]:bg-white data-[state=active]:text-neutral-900 dark:text-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-white dark:hover:bg-white/10",
+                              "data-testid": "tools-tab",
+                              value: "tools",
+                              children: [
+                                /* @__PURE__ */ e(P, { className: "h-4 w-4" }),
+                                /* @__PURE__ */ e("span", { children: "Tools" }),
+                                /* @__PURE__ */ e("span", { className: "ml-1 rounded-full bg-emerald-300 px-1.5 py-0.5 text-emerald-900 text-xs dark:bg-emerald-500/25 dark:text-emerald-200", children: d.size })
+                              ]
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ a("div", { className: "hidden items-center gap-2 sm:flex", children: [
+                          (u.size > 0 || r.size > 0) && /* @__PURE__ */ a(
+                            c,
+                            {
+                              className: "h-8 border-neutral-300 text-neutral-700 hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-900/40 dark:hover:text-neutral-100",
+                              "data-testid": "clear-selections",
+                              onClick: q,
+                              size: "sm",
+                              variant: "outline",
+                              children: [
+                                /* @__PURE__ */ e(n, { className: "h-4 w-4 text-red-600 dark:text-red-400" }),
+                                "Clear All"
+                              ]
+                            }
+                          ),
+                          l === "multi" && (() => {
+                            const t = g === "toolkits" ? Array.from(o).flatMap(
+                              (s) => s.tools.map((B) => B.fully_qualified_name)
+                            ) : Array.from(d).map(
+                              (s) => s.fully_qualified_name
+                            );
+                            return t.length > 0 && t.every((s) => r.has(s)) ? null : /* @__PURE__ */ a(
+                              c,
+                              {
+                                className: "h-8",
+                                "data-testid": "select-all",
+                                onClick: () => {
+                                  D(t);
+                                },
+                                size: "sm",
+                                variant: "outline",
+                                children: [
+                                  /* @__PURE__ */ e(V, { className: "h-4 w-4" }),
+                                  "Select all"
+                                ]
+                              }
+                            );
+                          })()
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ a("div", { className: "flex flex-wrap items-center gap-2", children: [
+                        m && /* @__PURE__ */ a(
+                          k,
+                          {
+                            className: "h-8 border border-purple-200 bg-purple-50 pr-1.5 pl-2 text-purple-800 shadow-sm ring-1 ring-purple-200/50 dark:border-purple-800/60 dark:bg-purple-950/40 dark:text-purple-200 dark:ring-purple-800/30",
+                            variant: "secondary",
+                            children: [
+                              /* @__PURE__ */ a("span", { className: "mr-1.5 inline-flex items-center gap-1 rounded-full bg-purple-100 px-1.5 py-0.5 text-[10px] text-purple-700 dark:bg-purple-800/60 dark:text-purple-200", children: [
+                                /* @__PURE__ */ e(M, { className: "h-3 w-3" }),
+                                "Filter"
+                              ] }),
+                              /* @__PURE__ */ a(
+                                "button",
+                                {
+                                  className: "inline-flex h-full items-center gap-1.5",
+                                  "data-testid": "filter-badge",
+                                  onClick: () => i("toolkits"),
+                                  type: "button",
+                                  children: [
+                                    (() => {
+                                      const t = $(
+                                        m
+                                      );
+                                      return /* @__PURE__ */ e(t, { className: "h-3.5 w-3.5" });
+                                    })(),
+                                    /* @__PURE__ */ e("span", { className: "font-medium text-xs", children: m })
+                                  ]
+                                }
+                              ),
+                              /* @__PURE__ */ e(
+                                "button",
+                                {
+                                  "aria-label": "Clear toolkit filter",
+                                  className: "ml-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-purple-100 text-red-600 hover:bg-red-100 hover:text-red-700 focus-visible:ring-[3px] focus-visible:ring-red-200 dark:bg-purple-800/60 dark:text-red-400 dark:hover:bg-red-950/40 dark:hover:text-red-300",
+                                  "data-testid": "clear-filter",
+                                  onClick: A,
+                                  type: "button",
+                                  children: /* @__PURE__ */ e(n, { className: "h-3.5 w-3.5" })
+                                }
+                              )
+                            ]
+                          }
+                        ),
+                        x && /* @__PURE__ */ a(
+                          k,
+                          {
+                            className: "h-8 border border-teal-200 bg-teal-50 pr-1.5 pl-2 text-teal-800 shadow-sm ring-1 ring-teal-200/50 dark:border-teal-800/60 dark:bg-teal-950/40 dark:text-teal-200 dark:ring-teal-800/30",
+                            variant: "secondary",
+                            children: [
+                              /* @__PURE__ */ a("span", { className: "mr-1.5 inline-flex items-center gap-1 rounded-full bg-teal-100 px-1.5 py-0.5 text-[10px] text-teal-700 dark:bg-teal-800/60 dark:text-teal-200", children: [
+                                /* @__PURE__ */ e(Q, { className: "h-3 w-3" }),
+                                "Search"
+                              ] }),
+                              /* @__PURE__ */ a("span", { className: "font-medium text-xs", children: [
+                                '"',
+                                x,
+                                '"'
+                              ] }),
+                              /* @__PURE__ */ e(
+                                "button",
+                                {
+                                  "aria-label": "Clear search query",
+                                  className: "ml-1 inline-flex h-5 w-5 items-center justify-center rounded-full bg-teal-100 text-red-600 hover:bg-red-100 hover:text-red-700 focus-visible:ring-[3px] focus-visible:ring-red-200 dark:bg-teal-800/60 dark:text-red-400 dark:hover:bg-red-950/40 dark:hover:text-red-300",
+                                  "data-testid": "clear-search",
+                                  onClick: f,
+                                  type: "button",
+                                  children: /* @__PURE__ */ e(n, { className: "h-3.5 w-3.5" })
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ e(
+                      y,
+                      {
+                        className: "min-h-0 flex-1 overflow-y-auto px-4 py-2 sm:px-6",
+                        "data-testid": "content-area",
+                        value: "toolkits",
+                        children: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+                          o.size === 0 && /* @__PURE__ */ e(
+                            w,
+                            {
+                              "data-testid": "empty-toolkits",
+                              description: "Try a different search term",
+                              title: "No toolkits found"
+                            }
+                          ),
+                          /* @__PURE__ */ e(
+                            "div",
+                            {
+                              className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",
+                              "data-testid": "toolkits-grid",
+                              children: Array.from(o).map((t) => /* @__PURE__ */ e(
+                                re,
+                                {
+                                  onSelect: () => {
+                                    if (l === "single") {
+                                      i("tools"), b(t.name);
+                                      return;
+                                    }
+                                    S(t);
+                                  },
+                                  onView: () => {
+                                    b(t.name), i("tools");
+                                  },
+                                  selectedTools: new Set(r.keys()),
+                                  selectionMode: l,
+                                  toolkit: t
+                                },
+                                t.name
+                              ))
+                            }
+                          )
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      y,
+                      {
+                        className: "min-h-0 flex-1 overflow-y-auto px-4 py-2 sm:px-6",
+                        "data-testid": "content-area",
+                        value: "tools",
+                        children: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+                          d.size === 0 && /* @__PURE__ */ e(
+                            w,
+                            {
+                              "data-testid": "empty-tools",
+                              description: "Try a different search term",
+                              title: "No tools found"
+                            }
+                          ),
+                          /* @__PURE__ */ e(
+                            "div",
+                            {
+                              className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",
+                              "data-testid": "tools-grid",
+                              children: Array.from(d).map((t) => /* @__PURE__ */ e(
+                                Z,
+                                {
+                                  "data-testid": `tool-card-${t.fully_qualified_name}`,
+                                  description: t.description,
+                                  fully_qualified_name: t.fully_qualified_name,
+                                  hideCheckbox: l === "single",
+                                  Icon: E(t.toolkit.name),
+                                  isSelected: r.has(t.fully_qualified_name),
+                                  name: t.name,
+                                  onSelect: () => z(t),
+                                  toolkitName: t.toolkit.name
+                                },
+                                t.fully_qualified_name
+                              ))
+                            }
+                          )
+                        ] })
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(J, { className: "shrink-0 border-t bg-white px-4 py-3 sm:px-6 sm:py-4 dark:bg-neutral-950", children: /* @__PURE__ */ a(
+                "div",
+                {
+                  className: `${l === "single" ? "sm:justify-end" : "sm:justify-between"} flex w-full flex-col gap-3 sm:flex-row sm:items-center`,
+                  children: [
+                    l === "multi" && /* @__PURE__ */ e(te, {}),
+                    /* @__PURE__ */ a("div", { className: "mt-2 flex gap-2 sm:mt-0 sm:gap-2", children: [
+                      /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
+                        c,
+                        {
+                          className: "flex-1 sm:flex-none",
+                          "data-testid": "cancel-button",
+                          size: "sm",
+                          variant: "outline",
+                          children: "Cancel"
+                        }
+                      ) }),
+                      /* @__PURE__ */ e(
+                        le,
+                        {
+                          className: "flex-1 sm:flex-none",
+                          onCommit: () => {
+                            j(), h && h({
+                              selectedToolkits: Array.from(u.keys()),
+                              selectedTools: Array.from(r.keys())
+                            });
+                            const t = document.querySelector(
+                              '[data-testid="toolkit-picker-dialog"]'
+                            );
+                            if (t) {
+                              const p = t.querySelector(
+                                '[data-testid="toolkit-picker-close"]'
+                              );
+                              p && p.click();
+                            }
+                          },
+                          selectedCount: r.size,
+                          selectionMode: l
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  ze as ToolkitPickerDialog
+};