@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/calendly/Calendly.js

@@ -1,82 +1,121 @@
-import { jsxs as L, jsx as x } from "react/jsx-runtime";
-import { useRef as R, useState as h, useMemo as S, useCallback as j, useEffect as B } from "react";
-import { isString as i } from "../../helpers/validations.js";
-import { Animated as E } from "../animated/Animated.js";
-import { Loading as I } from "../loading/Loading.js";
-let c = !1;
-const N = ({
-  calendlyId: f,
-  data: t,
-  color: n = {
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useCallback, useEffect } from "react";
+import { isString } from "../../helpers/validations.js";
+import { Loading } from "../loading/Loading.js";
+import { Animated } from "../animated/Animated.js";
+let scriptAlreadyLoaded = false;
+const Calendly = /* @__PURE__ */ __name(({
+  calendlyId,
+  data,
+  color = {
     text: "#4D4D4D",
     button: "#1E90FF",
     background: "#FFFFFF"
   },
-  animationProps: w,
-  hideCookieSettings: d,
-  hideEventTypeDetails: p,
-  hideDetails: a,
-  ...C
+  animationProps,
+  hideCookieSettings,
+  hideEventTypeDetails,
+  hideDetails,
+  ...props
 }) => {
-  const l = R(null), [s, F] = h(!1), [g, y] = h(c), u = (e) => e == null ? void 0 : e.replaceAll("#", ""), k = (e) => {
-    const o = {};
-    if (!e) return o;
-    for (const r of ["name", "email", "firstName", "lastName"])
-      i(e[r]) && (o[r] = e[r]);
-    return o;
-  }, m = S(() => {
-    const e = new URLSearchParams();
-    return a && e.set("hide_landing_page_details", "1"), p && e.set("hide_event_type_details", "1"), d && e.set("hide_gdpr_banner", "1"), i(n.background) && e.set("background_color", u(n.background)), i(n.text) && e.set("text_color", u(n.text)), i(n.button) && e.set("primary_color", u(n.button)), i(t == null ? void 0 : t.utm_campaign) && e.set("utm_campaign", (t == null ? void 0 : t.utm_campaign) ?? ""), i(t == null ? void 0 : t.utm_source) && e.set("utm_source", (t == null ? void 0 : t.utm_source) ?? ""), `https://calendly.com/${f}?${e.toString()}`;
+  const calendlyRef = useRef(null);
+  const [widgetInitialized, setWidgetInitialized] = useState(false);
+  const [scriptLoaded, setScriptLoaded] = useState(scriptAlreadyLoaded);
+  const formatColor = /* @__PURE__ */ __name((color2) => color2 == null ? void 0 : color2.replaceAll("#", ""), "formatColor");
+  const getSafePrefill = /* @__PURE__ */ __name((data2) => {
+    const result = {};
+    if (!data2) return result;
+    for (const key of ["name", "email", "firstName", "lastName"]) {
+      if (isString(data2[key])) {
+        result[key] = data2[key];
+      }
+    }
+    return result;
+  }, "getSafePrefill");
+  const dataUrl = useMemo(() => {
+    const urlParams = new URLSearchParams();
+    if (Boolean(hideDetails)) urlParams.set("hide_landing_page_details", "1");
+    if (Boolean(hideEventTypeDetails)) urlParams.set("hide_event_type_details", "1");
+    if (Boolean(hideCookieSettings)) urlParams.set("hide_gdpr_banner", "1");
+    if (isString(color.background))
+      urlParams.set("background_color", formatColor(color.background));
+    if (isString(color.text))
+      urlParams.set("text_color", formatColor(color.text));
+    if (isString(color.button))
+      urlParams.set("primary_color", formatColor(color.button));
+    if (isString(data == null ? void 0 : data.utm_campaign))
+      urlParams.set("utm_campaign", (data == null ? void 0 : data.utm_campaign) ?? "");
+    if (isString(data == null ? void 0 : data.utm_source))
+      urlParams.set("utm_source", (data == null ? void 0 : data.utm_source) ?? "");
+    return `https://calendly.com/${calendlyId}?${urlParams.toString()}`;
   }, [
-    f,
-    n,
-    t,
-    a,
-    p,
-    d
-  ]), A = j(
-    (e) => {
-      if (e && g && !s) {
-        let r = 0;
-        const _ = () => {
-          var b;
-          window.Calendly ? ((b = l.current) == null || b.setAttribute("data-url", m), window.Calendly.initInlineWidget({
-            url: m,
-            parentElement: l.current,
-            prefill: k(t)
-          }), F(!0)) : r < 10 ? (r += 1, setTimeout(_, 100)) : console.warn("Calendly widget failed to load.");
-        };
-        _();
+    calendlyId,
+    color,
+    data,
+    hideDetails,
+    hideEventTypeDetails,
+    hideCookieSettings
+  ]);
+  const handleAnimate = useCallback(
+    (isVisible) => {
+      if (isVisible && scriptLoaded && !widgetInitialized) {
+        const maxRetries = 10;
+        let retryCount = 0;
+        const tryInit = /* @__PURE__ */ __name(() => {
+          var _a;
+          if (window.Calendly) {
+            (_a = calendlyRef.current) == null ? void 0 : _a.setAttribute("data-url", dataUrl);
+            window.Calendly.initInlineWidget({
+              url: dataUrl,
+              parentElement: calendlyRef.current,
+              prefill: getSafePrefill(data)
+            });
+            setWidgetInitialized(true);
+          } else if (retryCount < maxRetries) {
+            retryCount += 1;
+            setTimeout(tryInit, 100);
+          } else {
+            console.warn("Calendly widget failed to load.");
+          }
+        }, "tryInit");
+        tryInit();
       }
     },
-    [g, s, m, t]
+    [scriptLoaded, widgetInitialized, dataUrl, data]
   );
-  return B(() => {
-    if (c || typeof document > "u") {
-      y(!0);
+  useEffect(() => {
+    if (scriptAlreadyLoaded || typeof document === "undefined") {
+      setScriptLoaded(true);
       return;
     }
-    const e = document.createElement("script");
-    e.src = "https://assets.calendly.com/assets/external/widget.js", e.async = !0, e.onload = () => {
-      c = !0, y(!0);
-    }, document.body.appendChild(e);
-  }, []), /* @__PURE__ */ L(E, { ...w, onAnimate: A, children: [
-    !s && /* @__PURE__ */ x(I, {}),
-    /* @__PURE__ */ x(
+    const script = document.createElement("script");
+    script.src = "https://assets.calendly.com/assets/external/widget.js";
+    script.async = true;
+    script.onload = () => {
+      scriptAlreadyLoaded = true;
+      setScriptLoaded(true);
+    };
+    document.body.appendChild(script);
+  }, []);
+  return /* @__PURE__ */ jsxs(Animated, { ...animationProps, onAnimate: handleAnimate, children: [
+    !widgetInitialized && /* @__PURE__ */ jsx(Loading, {}),
+    /* @__PURE__ */ jsx(
       "div",
       {
-        ...C,
-        ref: l,
+        ...props,
+        ref: calendlyRef,
         style: {
-          display: s ? "block" : "none",
+          display: widgetInitialized ? "block" : "none",
           minWidth: 320,
           height: 700
         }
       }
     )
   ] });
-};
-N.displayName = "Calendly";
+}, "Calendly");
+Calendly.displayName = "Calendly";
 export {
-  N as Calendly
+  Calendly
 };

package/dist/components/calendly/index.js

@@ -1,4 +1,4 @@
-import { Calendly as o } from "./Calendly.js";
+import { Calendly } from "./Calendly.js";
 export {
-  o as Calendly
+  Calendly
 };

package/dist/components/card/Card.js

@@ -1,180 +1,206 @@
-import { jsx as f, jsxs as j, Fragment as R } from "react/jsx-runtime";
-import { useCallback as n } from "react";
-import T from "../../assets/images/card_background_primary_1.webp.js";
-import U from "../../assets/images/card_background_primary_2.webp.js";
-import V from "../../assets/images/card_background_primary_3.webp.js";
-import W from "../../assets/images/card_background_primary_4.webp.js";
-import X from "../../assets/images/card_background_secondary_1.webp.js";
-import Y from "../../assets/images/card_background_secondary_2.webp.js";
-import Z from "../../assets/images/card_background_secondary_3.webp.js";
-import _ from "../../assets/images/card_background_secondary_4.webp.js";
-import { create as $ } from "../../helpers/bem.js";
-import { isString as A } from "../../helpers/validations.js";
-import D from "./Card.module.scss.js";
-import { Skeleton as M } from "../skeleton/Skeleton.js";
-import { Animated as K } from "../animated/Animated.js";
-import { Link as b } from "../link/Link.js";
-import { Image as g } from "../image/Image.js";
-const s = $(D, "Card"), ye = ({
-  ref: F,
-  variant: m = "white",
-  loading: S,
-  skeletonProps: u = {},
-  highlight: q,
-  gradiant: c,
-  gradiantClassName: O,
-  enableShadow: h,
-  animated: w = !0,
-  customAnimation: y,
-  className: z,
-  contentClassName: G,
-  background: r,
-  backgroundProps: t,
-  disabled: l,
-  redirect: o,
-  onClick: i,
-  onKeyDown: p,
-  onMouseEnter: C,
-  onMouseLeave: E,
-  children: d
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useCallback } from "react";
+import BGprimary1 from "../../assets/images/card_background_primary_1.webp.js";
+import BGprimary2 from "../../assets/images/card_background_primary_2.webp.js";
+import BGprimary3 from "../../assets/images/card_background_primary_3.webp.js";
+import BGprimary4 from "../../assets/images/card_background_primary_4.webp.js";
+import BGsecondary1 from "../../assets/images/card_background_secondary_1.webp.js";
+import BGsecondary2 from "../../assets/images/card_background_secondary_2.webp.js";
+import BGsecondary3 from "../../assets/images/card_background_secondary_3.webp.js";
+import BGsecondary4 from "../../assets/images/card_background_secondary_4.webp.js";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./Card.module.scss.js";
+import { Skeleton } from "../skeleton/Skeleton.js";
+import { Animated } from "../animated/Animated.js";
+import { Link } from "../link/Link.js";
+import { Image } from "../image/Image.js";
+const bem = create(styles, "Card");
+const Card = /* @__PURE__ */ __name(({
+  ref,
+  variant = "white",
+  loading,
+  skeletonProps = {},
+  highlight,
+  gradiant,
+  gradiantClassName,
+  enableShadow,
+  animated = true,
+  customAnimation,
+  className,
+  contentClassName,
+  background,
+  backgroundProps,
+  disabled,
+  redirect,
+  onClick,
+  onKeyDown,
+  onMouseEnter,
+  onMouseLeave,
+  children
 }) => {
-  const v = n(
-    (e) => !!S && /* @__PURE__ */ f(
-      M,
+  const renderSkeleton = useCallback(
+    (modifier) => Boolean(loading) && /* @__PURE__ */ jsx(
+      Skeleton,
       {
-        className: s("skeleton", e),
+        className: bem("skeleton", modifier),
         variant: "rectangular",
-        ...u
+        ...skeletonProps
       }
     ),
-    [S, u]
-  ), H = n(
+    [loading, skeletonProps]
+  );
+  const handleKeyDown = useCallback(
     (e) => {
-      e.code === "Enter" && (i == null || i()), p == null || p(e);
+      if (e.code === "Enter") {
+        onClick == null ? void 0 : onClick();
+      }
+      onKeyDown == null ? void 0 : onKeyDown(e);
     },
-    [i, p]
-  ), x = n(
-    (e) => {
-      const B = l === !0, J = typeof i == "function", a = J && !B || A(o == null ? void 0 : o.href), I = {
-        [m]: !0,
-        "has-highlight": !!q,
-        "has-gradiant": !!c,
-        "has-background": !!r,
-        "has-shadow": a && h === void 0 || !!h,
-        "has-animation": w,
-        "is-clickable": a
-      }, L = {
-        ref: F,
-        className: s(void 0, I, z),
-        role: a ? "button" : void 0,
-        "aria-disabled": B ? !0 : void 0,
-        tabIndex: a && !B && !o ? 0 : -1,
-        onMouseEnter: C,
-        onMouseLeave: E,
-        onKeyDown: a ? H : void 0,
-        onClick: J && !B ? i : void 0
+    [onClick, onKeyDown]
+  );
+  const renderContainer = useCallback(
+    (card) => {
+      const isDisabled = disabled === true;
+      const onClickIsFunction = typeof onClick === "function";
+      const isClickable = onClickIsFunction && !isDisabled || isString(redirect == null ? void 0 : redirect.href);
+      const modifier = {
+        [variant]: true,
+        "has-highlight": Boolean(highlight),
+        "has-gradiant": Boolean(gradiant),
+        "has-background": Boolean(background),
+        "has-shadow": isClickable && enableShadow === void 0 || Boolean(enableShadow),
+        "has-animation": animated,
+        "is-clickable": isClickable
+      };
+      const cardProps = {
+        ref,
+        className: bem(void 0, modifier, className),
+        role: isClickable ? "button" : void 0,
+        "aria-disabled": isDisabled ? true : void 0,
+        tabIndex: isClickable && !isDisabled && !Boolean(redirect) ? 0 : -1,
+        onMouseEnter,
+        onMouseLeave,
+        onKeyDown: isClickable ? handleKeyDown : void 0,
+        onClick: onClickIsFunction && !isDisabled ? onClick : void 0
       };
-      return y ? /* @__PURE__ */ j(K, { animation: y, ...L, children: [
-        v(I),
-        e
-      ] }) : /* @__PURE__ */ j("div", { ...L, children: [
-        v(I),
-        e
+      if (customAnimation) {
+        return /* @__PURE__ */ jsxs(Animated, { animation: customAnimation, ...cardProps, children: [
+          renderSkeleton(modifier),
+          card
+        ] });
+      }
+      return /* @__PURE__ */ jsxs("div", { ...cardProps, children: [
+        renderSkeleton(modifier),
+        card
       ] });
     },
     [
-      F,
-      o,
-      m,
-      q,
-      c,
-      r,
-      w,
-      y,
-      z,
-      i,
-      H,
-      C,
-      E,
-      l,
-      h,
-      v
+      ref,
+      redirect,
+      variant,
+      highlight,
+      gradiant,
+      background,
+      animated,
+      customAnimation,
+      className,
+      onClick,
+      handleKeyDown,
+      onMouseEnter,
+      onMouseLeave,
+      disabled,
+      enableShadow,
+      renderSkeleton
     ]
-  ), N = n(
-    () => o !== void 0 ? /* @__PURE__ */ f(
-      b,
+  );
+  const renderCard = useCallback(
+    () => redirect !== void 0 ? /* @__PURE__ */ jsx(
+      Link,
       {
-        disabled: l,
-        className: s(
+        disabled,
+        className: bem(
           "content",
           {
-            [m]: !0,
-            "has-link": !0
+            [variant]: true,
+            "has-link": true
           },
-          G
+          contentClassName
         ),
-        ...o,
-        children: d
+        ...redirect,
+        children
       }
-    ) : /* @__PURE__ */ f("div", { className: s("content", void 0, G), children: d }),
-    [G, m, o, l, d]
-  ), Q = n(() => {
-    let e = T;
-    if (m === "secondary")
-      switch (r) {
+    ) : /* @__PURE__ */ jsx("div", { className: bem("content", void 0, contentClassName), children }),
+    [contentClassName, variant, redirect, disabled, children]
+  );
+  const renderBackground = useCallback(() => {
+    let backgroundSrc = BGprimary1;
+    if (variant === "secondary") {
+      switch (background) {
         case 2:
-          e = Y;
+          backgroundSrc = BGsecondary2;
           break;
         case 3:
-          e = Z;
+          backgroundSrc = BGsecondary3;
           break;
         case 4:
-          e = _;
+          backgroundSrc = BGsecondary4;
           break;
         default:
-          e = X;
+          backgroundSrc = BGsecondary1;
       }
-    switch (r) {
+    }
+    switch (background) {
       case 2:
-        e = U;
+        backgroundSrc = BGprimary2;
         break;
       case 3:
-        e = V;
+        backgroundSrc = BGprimary3;
         break;
       case 4:
-        e = W;
+        backgroundSrc = BGprimary4;
         break;
     }
-    return /* @__PURE__ */ f(
-      g,
+    return /* @__PURE__ */ jsx(
+      Image,
       {
         alt: "prokodo - background image",
-        src: typeof r == "string" ? r : e,
-        ...t,
-        className: s("background", void 0, t == null ? void 0 : t.className),
-        imageComponent: (t == null ? void 0 : t.imageComponent) ?? "img"
+        src: typeof background === "string" ? background : backgroundSrc,
+        ...backgroundProps,
+        className: bem("background", void 0, backgroundProps == null ? void 0 : backgroundProps.className),
+        imageComponent: (backgroundProps == null ? void 0 : backgroundProps.imageComponent) ?? "img"
       }
     );
-  }, [m, r, t]);
-  return x(
-    c ? /* @__PURE__ */ f(
-      "div",
-      {
-        className: s(
-          "gradiant",
-          {
-            [m]: m !== "inherit" && m !== "white"
-          },
-          O
-        ),
-        children: N()
-      }
-    ) : r !== void 0 ? /* @__PURE__ */ j(R, { children: [
-      N(),
-      Q()
-    ] }) : N()
-  );
-};
+  }, [variant, background, backgroundProps]);
+  if (Boolean(gradiant)) {
+    return renderContainer(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: bem(
+            "gradiant",
+            {
+              [variant]: variant !== "inherit" && variant !== "white"
+            },
+            gradiantClassName
+          ),
+          children: renderCard()
+        }
+      )
+    );
+  }
+  if (background !== void 0) {
+    return renderContainer(
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        renderCard(),
+        renderBackground()
+      ] })
+    );
+  }
+  return renderContainer(renderCard());
+}, "Card");
 export {
-  ye as Card
+  Card
 };

package/dist/components/card/Card.module.scss.js

@@ -1,4 +1,7 @@
-const o = "fadeInMask", r = "fadeInKeyframe", d = "gradientMove", a = {
+const fadeInMask = "fadeInMask";
+const fadeInKeyframe = "fadeInKeyframe";
+const gradientMove = "gradientMove";
+const styles = {
   "prokodo-Card": "prokodo-Card",
   "prokodo-Card--inherit": "prokodo-Card--inherit",
   "prokodo-Card--white": "prokodo-Card--white",
@@ -21,18 +24,18 @@ const o = "fadeInMask", r = "fadeInKeyframe", d = "gradientMove", a = {
   "prokodo-Card__gradiant--success": "prokodo-Card__gradiant--success",
   "prokodo-Card__gradiant--warning": "prokodo-Card__gradiant--warning",
   "prokodo-Card--has-highlight": "prokodo-Card--has-highlight",
-  fadeInMask: o,
+  fadeInMask,
   "prokodo-Card--has-gradiant": "prokodo-Card--has-gradiant",
   "prokodo-Card--has-background": "prokodo-Card--has-background",
   "prokodo-Card--has-shadow": "prokodo-Card--has-shadow",
   "prokodo-Card--has-animation": "prokodo-Card--has-animation",
-  fadeInKeyframe: r,
+  fadeInKeyframe,
   "prokodo-Card--is-clickable": "prokodo-Card--is-clickable",
-  gradientMove: d
+  gradientMove
 };
 export {
-  a as default,
-  r as fadeInKeyframe,
-  o as fadeInMask,
-  d as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  fadeInMask,
+  gradientMove
 };

package/dist/components/card/index.js

@@ -1,4 +1,4 @@
-import { Card as a } from "./Card.js";
+import { Card } from "./Card.js";
 export {
-  a as Card
+  Card
 };