@panora/embedded-card-react - npm Package Compare versions

Comparing version 1.1.5 to 1.2.0

CHANGELOG.md

 # @panora/embedded-card-react
 
+## 1.2.0
+
+### Minor Changes
+
+- 04aec74: added updates
+
+### Patch Changes
+
+- Updated dependencies [04aec74]
+  - @panora/shared@1.3.0
+
 ## 1.1.5
@@ -4,0 +15,0 @@

dist/index.d.ts

 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ConnectorCategory } from '@panora/shared';
 
 interface ProviderCardProp {
     name: string;
-    vertical: string;
+    category: ConnectorCategory;
     projectId: string;
@@ -11,4 +12,14 @@ returnUrl: string;
 }
-declare const PanoraProviderCard: ({ name, vertical, projectId, returnUrl, linkedUserId, optionalApiUrl }: ProviderCardProp) => react_jsx_runtime.JSX.Element;
 
-export { PanoraProviderCard as default };
+interface DynamicCardProp {
+    projectId: string;
+    returnUrl: string;
+    linkedUserId: string;
+    category?: ConnectorCategory;
+    optionalApiUrl?: string;
+}
+
+declare const PanoraProviderCard: ({ name, category, projectId, returnUrl, linkedUserId, optionalApiUrl }: ProviderCardProp) => react_jsx_runtime.JSX.Element;
+declare const PanoraDynamicCatalogCard: ({ projectId, returnUrl, linkedUserId, category, optionalApiUrl }: DynamicCardProp) => react_jsx_runtime.JSX.Element;
+
+export { PanoraDynamicCatalogCard, PanoraProviderCard };

dist/index.js

 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
@@ -18,2 +49,10 @@ for (var name in all)
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
@@ -44,3 +83,4 @@ var __async = (__this, __arguments, generator) => {
 __export(src_exports, {
-  default: () => src_default
+  PanoraDynamicCatalogCard: () => PanoraDynamicCatalogCard,
+  PanoraProviderCard: () => PanoraProviderCard
 });
@@ -96,13 +136,166 @@ module.exports = __toCommonJS(src_exports);
 
-// src/index.tsx
+// src/components/PanoraIntegrationCard.tsx
 var import_react2 = require("react");
 var import_shared2 = require("@panora/shared");
-var import_react_query = require("@tanstack/react-query");
+
+// src/components/ui/button2.tsx
+var React = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/button2.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var PanoraIntegrationCard = ({ name, vertical, projectId, returnUrl, linkedUserId, optionalApiUrl }) => {
-  const [providerClicked, setProviderClicked] = (0, import_react2.useState)(false);
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        expandIcon: "group relative text-primary-foreground bg-primary hover:bg-primary/90",
+        ringHover: "bg-primary text-primary-foreground transition-all duration-300 hover:bg-primary/90 hover:ring-2 hover:ring-primary/90 hover:ring-offset-2",
+        shine: "text-primary-foreground animate-shine bg-gradient-to-r from-primary via-primary/75 to-primary bg-[length:400%_100%] ",
+        gooeyRight: "text-primary-foreground relative bg-primary z-0 overflow-hidden transition-all duration-500 before:absolute before:inset-0 before:-z-10 before:translate-x-[150%] before:translate-y-[150%] before:scale-[2.5] before:rounded-[100%] before:bg-gradient-to-r from-zinc-400 before:transition-transform before:duration-1000  hover:before:translate-x-[0%] hover:before:translate-y-[0%] ",
+        gooeyLeft: "text-primary-foreground relative bg-primary z-0 overflow-hidden transition-all duration-500 after:absolute after:inset-0 after:-z-10 after:translate-x-[-150%] after:translate-y-[150%] after:scale-[2.5] after:rounded-[100%] after:bg-gradient-to-l from-zinc-400 after:transition-transform after:duration-1000  hover:after:translate-x-[0%] hover:after:translate-y-[0%] ",
+        linkHover1: "relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-left after:scale-x-100 hover:after:origin-bottom-right hover:after:scale-x-0 after:transition-transform after:ease-in-out after:duration-300",
+        linkHover2: "relative after:absolute after:bg-primary after:bottom-2 after:h-[1px] after:w-2/3 after:origin-bottom-right after:scale-x-0 hover:after:origin-bottom-left hover:after:scale-x-100 after:transition-transform after:ease-in-out after:duration-300"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      variant,
+      size,
+      asChild = false,
+      Icon,
+      iconPlacement
+    } = _b, props = __objRest(_b, [
+      "className",
+      "variant",
+      "size",
+      "asChild",
+      "Icon",
+      "iconPlacement"
+    ]);
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      Comp,
+      __spreadProps(__spreadValues({
+        className: cn(buttonVariants({ variant, size, className })),
+        ref
+      }, props), {
+        children: [
+          Icon && iconPlacement === "left" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-0 translate-x-[0%] pr-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-100 group-hover:pr-2 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children: props.children }),
+          Icon && iconPlacement === "right" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) })
+        ]
+      })
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/ui/card.tsx
+var React2 = __toESM(require("react"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Card = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn(
+        "rounded-lg border bg-card text-card-foreground shadow-sm",
+        className
+      )
+    }, props)
+  );
+});
+Card.displayName = "Card";
+var CardHeader = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("flex flex-col space-y-1.5 p-6", className)
+    }, props)
+  );
+});
+CardHeader.displayName = "CardHeader";
+var CardTitle = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "h3",
+    __spreadValues({
+      ref,
+      className: cn(
+        "text-2xl font-semibold leading-none tracking-tight",
+        className
+      )
+    }, props)
+  );
+});
+CardTitle.displayName = "CardTitle";
+var CardDescription = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "p",
+    __spreadValues({
+      ref,
+      className: cn("text-sm text-muted-foreground", className)
+    }, props)
+  );
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", __spreadValues({ ref, className: cn("p-6 pt-0", className) }, props));
+});
+CardContent.displayName = "CardContent";
+var CardFooter = React2.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    __spreadValues({
+      ref,
+      className: cn("flex items-center p-6 pt-0", className)
+    }, props)
+  );
+});
+CardFooter.displayName = "CardFooter";
+
+// src/components/PanoraIntegrationCard.tsx
+var import_react_icons = require("@radix-ui/react-icons");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PanoraIntegrationCard = ({ name, category, projectId, returnUrl, linkedUserId, optionalApiUrl }) => {
   const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [startFlow, setStartFlow] = (0, import_react2.useState)(false);
   const { open, isReady } = useOAuth_default({
     providerName: name.toLowerCase(),
-    vertical: vertical.toLowerCase(),
+    vertical: category.toLowerCase(),
     returnUrl,
@@ -119,54 +312,169 @@ projectId,
   (0, import_react2.useEffect)(() => {
-    if (loading && providerClicked && isReady) {
+    if (startFlow && isReady) {
       open(onWindowClose);
-      return;
+    } else if (startFlow && !isReady) {
+      setLoading(false);
     }
-  }, [providerClicked, isReady, open, loading]);
-  const handleClick = () => {
+  }, [startFlow, isReady, open]);
+  const handleStartFlow = () => {
     setLoading(true);
-    setProviderClicked(true);
-    return;
+    setStartFlow(true);
   };
-  const img = import_shared2.providersConfig[vertical.toLowerCase()][name.toLowerCase()].logoPath;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
+  const CONNECTOR = import_shared2.CONNECTORS_METADATA[category.toLowerCase()][name.toLowerCase()];
+  const img = CONNECTOR.logoPath;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex flex-col gap-2 pt-0", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Card,
     {
-      className: "max-w-sm p-6 bg-white border-[0.007em] border-gray-200 rounded-lg shadow dark:bg-zinc-800 hover:border-gray-200  transition-colors duration-200",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: " flex items-center justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: img, width: "30px", className: "mx-3 mb-4 w-12 h-12 rounded-xl" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h5", { className: "mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white", children: [
-            "Integrate with ",
-            name
-          ] })
+      className: "flex flex-col border w-1/2 items-start gap-2 rounded-lg p-3 text-left text-sm transition-all hover:border-stone-100",
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex w-full items-start justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { src: img, className: "w-8 h-8 rounded-lg" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "font-semibold", children: `${name.substring(0, 1).toUpperCase()}${name.substring(1)}` })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "line-clamp-2 text-xs text-muted-foreground", children: CONNECTOR.description.substring(0, 300) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "line-clamp-2 mt-2 text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Button, { className: "h-7 gap-1", size: "sm", variant: "expandIcon", Icon: import_react_icons.ArrowRightIcon, iconPlacement: "right", onClick: handleStartFlow, children: "Connect" }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mb-3 font-normal text-gray-500 dark:text-gray-400", children: (0, import_shared2.getDescription)(name.toLowerCase()) }),
-        !loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "a",
-          {
-            href: "#",
-            className: "inline-flex items-center text-indigo-600 hover:underline",
-            onClick: handleClick,
-            children: [
-              "Connect in one click",
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "w-3 h-3 ms-2.5 rtl:rotate-[270deg]", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 18 18", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778" }) })
-            ]
-          }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "mb-3 font-normal text-gray-500 dark:text-gray-400", children: [
-            "Continue in ",
-            name,
-            " "
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", {})
+      ] })
+    },
+    `${name}-${category}`
+  ) });
+};
+var PanoraIntegrationCard_default = PanoraIntegrationCard;
+
+// src/index.tsx
+var import_react_query2 = require("@tanstack/react-query");
+
+// src/components/PanoraDynamicCatalog.tsx
+var import_react3 = require("react");
+var import_shared3 = require("@panora/shared");
+
+// src/hooks/queries/useProjectConnectors.tsx
+var import_react_query = require("@tanstack/react-query");
+var useProjectConnectors = (id) => {
+  return (0, import_react_query.useQuery)({
+    queryKey: ["project-connectors", id],
+    queryFn: () => __async(void 0, null, function* () {
+      const response = yield fetch(`${config_default.API_URL}/project-connectors?projectId=${id}`);
+      if (!response.ok) {
+        throw new Error("Network response was not ok");
+      }
+      return response.json();
+    })
+  });
+};
+var useProjectConnectors_default = useProjectConnectors;
+
+// src/components/PanoraDynamicCatalog.tsx
+var import_react_icons2 = require("@radix-ui/react-icons");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var DynamicCatalog = ({ projectId, returnUrl, linkedUserId, category, optionalApiUrl }) => {
+  const [selectedProvider, setSelectedProvider] = (0, import_react3.useState)();
+  const [loading, setLoading] = (0, import_react3.useState)({ status: false, provider: "" });
+  const [error, setError] = (0, import_react3.useState)(false);
+  const [startFlow, setStartFlow] = (0, import_react3.useState)(false);
+  const [data, setData] = (0, import_react3.useState)([]);
+  const { open, isReady } = useOAuth_default({
+    providerName: selectedProvider == null ? void 0 : selectedProvider.provider,
+    vertical: selectedProvider == null ? void 0 : selectedProvider.category,
+    returnUrl,
+    projectId,
+    linkedUserId,
+    onSuccess: () => console.log("OAuth successful")
+  });
+  const { data: connectorsForProject } = useProjectConnectors_default(projectId);
+  const onWindowClose = () => {
+    setSelectedProvider({
+      provider: "",
+      category: ""
+    });
+    setLoading({
+      status: false,
+      provider: ""
+    });
+    setStartFlow(false);
+  };
+  (0, import_react3.useEffect)(() => {
+    if (startFlow && isReady) {
+      open(onWindowClose);
+    } else if (startFlow && !isReady) {
+      setLoading({
+        status: false,
+        provider: ""
+      });
+    }
+  }, [startFlow, isReady, open]);
+  (0, import_react3.useEffect)(() => {
+    const PROVIDERS = !category ? (0, import_shared3.providersArray)() : (0, import_shared3.providersArray)(category);
+    const getConnectorsToDisplay = () => {
+      const unwanted_connectors = transformConnectorsStatus(connectorsForProject).filter((connector) => connector.status === "false");
+      const filteredProviders = PROVIDERS.filter((provider) => {
+        return !unwanted_connectors.some(
+          (unwanted) => unwanted.category === provider.vertical && unwanted.connector_name === provider.name
+        );
+      });
+      return filteredProviders;
+    };
+    if (connectorsForProject) {
+      setData(getConnectorsToDisplay());
+    }
+  }, [connectorsForProject, category]);
+  const handleStartFlow = (walletName, category2) => {
+    setSelectedProvider({ provider: walletName.toLowerCase(), category: category2.toLowerCase() });
+    setLoading({ status: true, provider: selectedProvider == null ? void 0 : selectedProvider.provider });
+    setStartFlow(true);
+  };
+  function transformConnectorsStatus(connectors) {
+    return Object.entries(connectors).flatMap(([key, value]) => {
+      const [category_slug, connector_name] = key.split("_").map((part) => part.trim());
+      const category2 = (0, import_shared3.categoryFromSlug)(category_slug);
+      if (category2 != null) {
+        return [{
+          connector_name,
+          category: category2,
+          status: String(value)
+        }];
+      }
+      return [];
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex flex-col gap-2 pt-0", children: data && data.map((item) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      Card,
+      {
+        className: "flex flex-col border w-1/2 items-start gap-2 rounded-lg p-3 text-left text-sm transition-all hover:border-stone-100",
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex w-full items-start justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: item.logoPath, className: "w-8 h-8 rounded-lg" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "font-semibold", children: `${item.name.substring(0, 1).toUpperCase()}${item.name.substring(1)}` })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "line-clamp-2 text-xs text-muted-foreground", children: item.description.substring(0, 300) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "line-clamp-2 mt-2 text-xs text-muted-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { className: "h-7 gap-1", size: "sm", variant: "expandIcon", Icon: import_react_icons2.ArrowRightIcon, iconPlacement: "right", onClick: () => handleStartFlow(item.name, item.vertical), children: "Connect" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex justify-center items-center" })
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", {})
         ] })
-      ]
-    }
-  );
+      },
+      `${item.name}-${item.vertical}`
+    );
+  }) });
 };
-var PanoraProviderCard = ({ name, vertical, projectId, returnUrl, linkedUserId, optionalApiUrl }) => {
-  const queryClient = new import_react_query.QueryClient();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PanoraIntegrationCard, { name, vertical, projectId, returnUrl, linkedUserId, optionalApiUrl }) });
+var PanoraDynamicCatalog_default = DynamicCatalog;
+
+// src/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PanoraProviderCard = ({ name, category, projectId, returnUrl, linkedUserId, optionalApiUrl }) => {
+  const queryClient = new import_react_query2.QueryClient();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_query2.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanoraIntegrationCard_default, { name, category, projectId, returnUrl, linkedUserId, optionalApiUrl }) });
 };
-var src_default = PanoraProviderCard;
+var PanoraDynamicCatalogCard = ({ projectId, returnUrl, linkedUserId, category, optionalApiUrl }) => {
+  const queryClient = new import_react_query2.QueryClient();
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_query2.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PanoraDynamicCatalog_default, { projectId, returnUrl, linkedUserId, category, optionalApiUrl }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PanoraDynamicCatalogCard,
+  PanoraProviderCard
+});
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@panora/embedded-card-react",
-  "version": "1.1.5",
+  "version": "1.2.0",
   "description": "",
@@ -20,14 +20,20 @@ "main": "dist/index.js",
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-query": "^5.12.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
     "react-loader-spinner": "^5.4.5",
-    "@panora/shared": "^1.2.2"
+    "tailwind-merge": "^2.2.1",
+    "@panora/shared": "^1.3.0"
   },
   "peerDependencies": {
+    "@tanstack/react-query": "^5.12.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "@tanstack/react-query": "^5.12.2"
+    "react-dom": "^18.2.0"
   },
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "start": "node dist/index.js"
   }
 }

tailwind.config.js

@@ -7,4 +7,15 @@ /** @type {import('tailwindcss').Config} */
   },
+  extend: {
+    keyframes: {
+      "shine": {
+        from: { backgroundPosition: '200% 0' },
+        to: { backgroundPosition: '-200% 0' },
+      },
+    },
+    animation: {
+      "shine": "shine 8s ease-in-out infinite",
+    },
+  },
   plugins: [],
 }
-
+ 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Network access

Supply chain risk

This module accesses the network.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

352813

increased by29.64%

Number of package files

29

increased by38.1%

Lines of code

2100

increased by119.44%

Worsened metrics

Dependency count

11

increased by83.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@radix-ui/react-icons@^1.3.0

• + Added@radix-ui/react-slot@^1.0.2

• + Addedclass-variance-authority@^0.7.0

• + Addedclsx@^2.1.0

• + Addedtailwind-merge@^2.2.1

• + Added@radix-ui/react-compose-refs@1.1.0(transitive)

• + Added@radix-ui/react-icons@1.3.0(transitive)

• + Added@radix-ui/react-slot@1.1.0(transitive)

• + Addedclass-variance-authority@0.7.0(transitive)

• + Addedclsx@2.0.02.1.1(transitive)

• + Addedtailwind-merge@2.5.2(transitive)

• Updated@panora/shared@^1.3.0