@stokr/components-library 3.0.32 → 3.0.33

package/dist/components/Button/GlareButton.js

@@ -0,0 +1,273 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import PropTypes from "prop-types";
+import { Button } from "./Button.styles.js";
+import { colors } from "../../styles/colors.js";
+import { useInView } from "react-intersection-observer";
+import { useState, useRef, useId, useEffect } from "react";
+import styled, { keyframes, css } from "styled-components";
+const config = {
+  colorDark: "rgb(41, 112, 225)",
+  colorLight: "#9bfcfd",
+  colorFooter: colors.blue,
+  strokeWidth: 2,
+  padding: 5,
+  baseHeight: 50
+};
+const glareAnimation = keyframes`
+  0% { width: 0; }
+  50% { width: 200%; }
+  75% { opacity: 1; }
+  100% { width: 400%; opacity: 0; }
+`;
+const ButtonWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["nowrap", "fullWidth"].includes(props)
+})`
+  position: relative;
+  display: inline-block;
+
+  ${({ nowrap }) => !nowrap && css`
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translate3d(-50%, -50%, 0);
+    `}
+
+  ${({ fullWidth }) => fullWidth && css`
+      width: 100%;
+    `}
+`;
+const StyledButton = styled(Button).withConfig({
+  shouldForwardProp: (props) => !["beauty", "backgroundColor", "textColor", "borderColor", "fullWidth", "disabledColor"].includes(props)
+})`
+  position: relative;
+  margin: ${config.padding}px;
+  background-color: ${(props) => props.backgroundColor || "inherit"};
+  color: ${(props) => props.textColor || "inherit"};
+  border-color: ${(props) => props.borderColor || "inherit"};
+
+  ${({ fullWidth }) => fullWidth && css`
+      width: calc(100% - ${config.padding * 2}px);
+    `}
+
+  &:disabled {
+    background-color: ${(props) => props.disabledColor || "#333"} !important;
+    color: rgba(255, 255, 255, 0.5) !important;
+    border-color: #555 !important;
+  }
+`;
+const ButtonGlare = styled.svg`
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+`;
+const GlareShape = styled.rect.withConfig({
+  shouldForwardProp: (props) => !["animationDuration"].includes(props)
+})`
+  animation: ${glareAnimation} ${(props) => props.animationDuration || 4}s linear infinite;
+`;
+const GlareButton = ({
+  children,
+  nowrap = false,
+  onClick,
+  disabled = false,
+  fullWidth = false,
+  disabledColor = "#333",
+  buttonId = "glare-button",
+  className,
+  backgroundColor,
+  textColor,
+  borderColor,
+  glareColorDark = config.colorDark,
+  glareColorLight = config.colorLight,
+  animationDuration = 4,
+  ...props
+}) => {
+  const [isButtonVisible, setIsButtonVisible] = useState(false);
+  const [dimensions, setDimensions] = useState({
+    width: 295,
+    height: config.baseHeight
+  });
+  const buttonRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const observerRef = useRef(null);
+  const mediaQueryRef = useRef(null);
+  const ids = useRef({
+    linearGradient: `gradient-${useId()}`,
+    fadeGradient: `fade-gradient-${useId()}`,
+    staticMask: `static-mask-${useId()}`,
+    mask: `mask-${useId()}`,
+    fadeMask: `fade-mask-${useId()}`
+  });
+  const updateDimensions = () => {
+    if (!buttonRef.current || !wrapperRef.current) return;
+    const buttonRect = buttonRef.current.getBoundingClientRect();
+    setDimensions({
+      width: buttonRect.width + config.padding * 2,
+      height: buttonRect.height + config.padding * 2
+    });
+  };
+  const handleButtonVisibility = (isVisible) => {
+    setIsButtonVisible(isVisible);
+  };
+  const { ref: windowViewportRef } = useInView({
+    threshold: 0,
+    // partialVisibility equivalent - triggers as soon as any part is visible
+    onChange: (inView, _entry) => {
+      handleButtonVisibility(inView);
+    }
+  });
+  useEffect(() => {
+    let mediaTimeoutId;
+    mediaQueryRef.current = window.matchMedia("(max-width: 768px)");
+    const handleMediaChange = (_event) => {
+      if (mediaTimeoutId != null) clearTimeout(mediaTimeoutId);
+      mediaTimeoutId = setTimeout(updateDimensions, 400);
+    };
+    mediaQueryRef.current.addEventListener("change", handleMediaChange);
+    observerRef.current = new ResizeObserver(updateDimensions);
+    if (buttonRef.current) {
+      observerRef.current.observe(buttonRef.current);
+      updateDimensions();
+    }
+    return () => {
+      if (mediaTimeoutId != null) clearTimeout(mediaTimeoutId);
+      mediaQueryRef.current.removeEventListener("change", handleMediaChange);
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { ref: windowViewportRef, children: /* @__PURE__ */ jsxs(ButtonWrapper, { ref: wrapperRef, nowrap, fullWidth, className, children: [
+    /* @__PURE__ */ jsxs(
+      ButtonGlare,
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: `0 0 ${dimensions.width} ${dimensions.height}`,
+        preserveAspectRatio: "none",
+        children: [
+          /* @__PURE__ */ jsxs("defs", { children: [
+            /* @__PURE__ */ jsxs("filter", { id: "glow", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
+              /* @__PURE__ */ jsx("feGaussianBlur", { stdDeviation: "100", result: "coloredBlur" }),
+              /* @__PURE__ */ jsx("feMerge", { children: /* @__PURE__ */ jsx("feMergeNode", { in: "coloredBlur" }) })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${ids.current.linearGradient}`, x1: "0%", y1: "50%", x2: "100%", y2: "50%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: glareColorDark, stopOpacity: "0" }),
+              /* @__PURE__ */ jsx("stop", { offset: "20%", stopColor: glareColorDark, stopOpacity: "1" }),
+              /* @__PURE__ */ jsx("stop", { offset: "40%", stopColor: glareColorDark }),
+              /* @__PURE__ */ jsx("stop", { offset: "60%", stopColor: glareColorLight }),
+              /* @__PURE__ */ jsx("stop", { offset: "80%", stopColor: glareColorDark }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: glareColorDark, stopOpacity: "0" })
+            ] }),
+            /* @__PURE__ */ jsxs("linearGradient", { id: `${ids.current.fadeGradient}`, x1: "0%", y1: "25%", x2: "0%", y2: "100%", children: [
+              /* @__PURE__ */ jsx("stop", { offset: "0", stopColor: "white", stopOpacity: "1" }),
+              /* @__PURE__ */ jsx("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+            ] }),
+            /* @__PURE__ */ jsx("mask", { id: `${ids.current.staticMask}`, children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: config.strokeWidth,
+                y: config.strokeWidth,
+                width: dimensions.width - config.strokeWidth * 2,
+                height: dimensions.height - config.strokeWidth * 2,
+                rx: (dimensions.height - config.strokeWidth * 2) / 2,
+                ry: (dimensions.height - config.strokeWidth * 2) / 2,
+                stroke: "#FFFFFF",
+                strokeWidth: config.strokeWidth + 1,
+                fill: "none"
+              }
+            ) }),
+            /* @__PURE__ */ jsx("mask", { id: `${ids.current.mask}`, children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: config.strokeWidth,
+                y: config.strokeWidth,
+                width: dimensions.width - config.strokeWidth * 2,
+                height: dimensions.height - config.strokeWidth * 2,
+                rx: (dimensions.height - config.strokeWidth * 2) / 2,
+                ry: (dimensions.height - config.strokeWidth * 2) / 2,
+                stroke: "#FFFFFF",
+                strokeWidth: config.strokeWidth + 1
+              }
+            ) }),
+            /* @__PURE__ */ jsx("mask", { id: `${ids.current.fadeMask}`, children: /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: config.strokeWidth,
+                y: config.strokeWidth,
+                width: dimensions.width - config.strokeWidth * 2,
+                height: dimensions.height - config.strokeWidth * 2,
+                rx: (dimensions.height - config.strokeWidth * 2) / 2,
+                ry: (dimensions.height - config.strokeWidth * 2) / 2,
+                fill: `url(#${ids.current.fadeGradient})`
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "rect",
+            {
+              x: "0",
+              y: "0",
+              width: dimensions.width,
+              height: dimensions.height,
+              fill: glareColorDark,
+              mask: `url(#${ids.current.staticMask})`,
+              filter: "url(#glow)"
+            }
+          ),
+          isButtonVisible && /* @__PURE__ */ jsx("g", { mask: `url(#${ids.current.fadeMask})`, children: /* @__PURE__ */ jsx(
+            GlareShape,
+            {
+              x: dimensions.width * -0.5,
+              y: config.strokeWidth,
+              width: dimensions.width * 2.5,
+              height: dimensions.height - config.strokeWidth * 2,
+              fill: `url(#${ids.current.linearGradient})`,
+              mask: `url(#${ids.current.mask})`,
+              animationDuration
+            }
+          ) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StyledButton,
+      {
+        beauty: true,
+        disabled,
+        id: buttonId,
+        onClick,
+        fullWidth,
+        disabledColor,
+        backgroundColor,
+        textColor,
+        borderColor,
+        ref: buttonRef,
+        ...props,
+        "data-cy": props["data-cy"] ?? buttonId,
+        children
+      }
+    )
+  ] }) });
+};
+GlareButton.propTypes = {
+  children: PropTypes.node.isRequired,
+  nowrap: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+  fullWidth: PropTypes.bool,
+  disabledColor: PropTypes.string,
+  buttonId: PropTypes.string,
+  className: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  textColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  glareColorDark: PropTypes.string,
+  glareColorLight: PropTypes.string,
+  animationDuration: PropTypes.number
+};
+export {
+  GlareButton
+};

package/dist/components/Header/Header.js

@@ -190,7 +190,7 @@ function HeaderView({
     withSidebar && /* @__PURE__ */ jsx(SidebarToggle, { isSidebarExpanded, onClick: sidebarHandler, children: /* @__PURE__ */ jsx(HamburgerIcon, {}) }),
     /* @__PURE__ */ jsxs(HeaderInner, { withSidebar, children: [
       /* @__PURE__ */ jsxs(MainNavWrap, { hasProgress: progress, children: [
-        /* @__PURE__ */ jsx(Logo, { isHighlight: currentActiveMenu === "main", children: /* @__PURE__ */ jsx(Link, { to: newPlatformUrl || "/", "data-cy": "logo-nav-link", children: /* @__PURE__ */ jsx(stdin_default$1, {}) }) }),
+        /* @__PURE__ */ jsx(Logo, { isHighlight: currentActiveMenu === "main", children: useRelativePathForMenu ? /* @__PURE__ */ jsx("a", { href: platformURL, "data-cy": "logo-nav-link", children: /* @__PURE__ */ jsx(stdin_default$1, {}) }) : /* @__PURE__ */ jsx(Link, { to: "/", "data-cy": "logo-nav-link", children: /* @__PURE__ */ jsx(stdin_default$1, {}) }) }),
         !progress && /* @__PURE__ */ jsx(HeaderMainNav, { children: /* @__PURE__ */ jsx(MenuNav, { children: /* @__PURE__ */ jsxs("ul", { children: [
           /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             Link,

package/dist/components/Layout/Layout.js

@@ -26,7 +26,8 @@ class Layout extends React__default.PureComponent {
       footerColor = "red",
       noFooter,
       noHeader,
-      noLogout
+      noLogout,
+      useRelativePathForMenu = false
     } = this.props;
     return /* @__PURE__ */ jsx(ThemeProvider, { theme: { ...theme }, children: /* @__PURE__ */ jsxs(PageWrapper, { children: [
       /* @__PURE__ */ jsx(GlobalStyle, {}),
@@ -38,7 +39,8 @@ class Layout extends React__default.PureComponent {
           loginHandler,
           signupHandler,
           siteTitle: title,
-          noLogout
+          noLogout,
+          useRelativePathForMenu
         }
       ),
       /* @__PURE__ */ jsx(
@@ -61,7 +63,8 @@ Layout.propTypes = {
   signupHandler: PropTypes.func,
   progress: PropTypes.bool,
   footerColor: PropTypes.string,
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
+  useRelativePathForMenu: PropTypes.bool
 };
 ProgressStatusContext.Consumer;
 export {

package/dist/components/icons/LinkIcon.js

@@ -17,13 +17,13 @@ const LinkIcon = () => /* @__PURE__ */ jsxs(
       /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M312.453,199.601c-6.066-6.102-12.792-11.511-20.053-16.128c-19.232-12.315-41.59-18.859-64.427-18.859\r\n			c-31.697-0.059-62.106,12.535-84.48,34.987L34.949,308.23c-22.336,22.379-34.89,52.7-34.91,84.318\r\n			c-0.042,65.98,53.41,119.501,119.39,119.543c31.648,0.11,62.029-12.424,84.395-34.816l89.6-89.6\r\n			c1.628-1.614,2.537-3.816,2.524-6.108c-0.027-4.713-3.87-8.511-8.583-8.484h-3.413c-18.72,0.066-37.273-3.529-54.613-10.581\r\n			c-3.195-1.315-6.867-0.573-9.301,1.877l-64.427,64.512c-20.006,20.006-52.442,20.006-72.448,0\r\n			c-20.006-20.006-20.006-52.442,0-72.448l108.971-108.885c19.99-19.965,52.373-19.965,72.363,0\r\n			c13.472,12.679,34.486,12.679,47.957,0c5.796-5.801,9.31-13.495,9.899-21.675C322.976,216.108,319.371,206.535,312.453,199.601z"
+          d: "M312.453,199.601c-6.066-6.102-12.792-11.511-20.053-16.128c-19.232-12.315-41.59-18.859-64.427-18.859\n			c-31.697-0.059-62.106,12.535-84.48,34.987L34.949,308.23c-22.336,22.379-34.89,52.7-34.91,84.318\n			c-0.042,65.98,53.41,119.501,119.39,119.543c31.648,0.11,62.029-12.424,84.395-34.816l89.6-89.6\n			c1.628-1.614,2.537-3.816,2.524-6.108c-0.027-4.713-3.87-8.511-8.583-8.484h-3.413c-18.72,0.066-37.273-3.529-54.613-10.581\n			c-3.195-1.315-6.867-0.573-9.301,1.877l-64.427,64.512c-20.006,20.006-52.442,20.006-72.448,0\n			c-20.006-20.006-20.006-52.442,0-72.448l108.971-108.885c19.99-19.965,52.373-19.965,72.363,0\n			c13.472,12.679,34.486,12.679,47.957,0c5.796-5.801,9.31-13.495,9.899-21.675C322.976,216.108,319.371,206.535,312.453,199.601z"
         }
       ) }) }),
       /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
         "path",
         {
-          d: "M477.061,34.993c-46.657-46.657-122.303-46.657-168.96,0l-89.515,89.429c-2.458,2.47-3.167,6.185-1.792,9.387\r\n			c1.359,3.211,4.535,5.272,8.021,5.205h3.157c18.698-0.034,37.221,3.589,54.528,10.667c3.195,1.315,6.867,0.573,9.301-1.877\r\n			l64.256-64.171c20.006-20.006,52.442-20.006,72.448,0c20.006,20.006,20.006,52.442,0,72.448l-80.043,79.957l-0.683,0.768\r\n			l-27.989,27.819c-19.99,19.965-52.373,19.965-72.363,0c-13.472-12.679-34.486-12.679-47.957,0\r\n			c-5.833,5.845-9.35,13.606-9.899,21.845c-0.624,9.775,2.981,19.348,9.899,26.283c9.877,9.919,21.433,18.008,34.133,23.893\r\n			c1.792,0.853,3.584,1.536,5.376,2.304c1.792,0.768,3.669,1.365,5.461,2.048c1.792,0.683,3.669,1.28,5.461,1.792l5.035,1.365\r\n			c3.413,0.853,6.827,1.536,10.325,2.133c4.214,0.626,8.458,1.025,12.715,1.195h5.973h0.512l5.12-0.597\r\n			c1.877-0.085,3.84-0.512,6.059-0.512h2.901l5.888-0.853l2.731-0.512l4.949-1.024h0.939c20.961-5.265,40.101-16.118,55.381-31.403\r\n			l108.629-108.629C523.718,157.296,523.718,81.65,477.061,34.993z"
+          d: "M477.061,34.993c-46.657-46.657-122.303-46.657-168.96,0l-89.515,89.429c-2.458,2.47-3.167,6.185-1.792,9.387\n			c1.359,3.211,4.535,5.272,8.021,5.205h3.157c18.698-0.034,37.221,3.589,54.528,10.667c3.195,1.315,6.867,0.573,9.301-1.877\n			l64.256-64.171c20.006-20.006,52.442-20.006,72.448,0c20.006,20.006,20.006,52.442,0,72.448l-80.043,79.957l-0.683,0.768\n			l-27.989,27.819c-19.99,19.965-52.373,19.965-72.363,0c-13.472-12.679-34.486-12.679-47.957,0\n			c-5.833,5.845-9.35,13.606-9.899,21.845c-0.624,9.775,2.981,19.348,9.899,26.283c9.877,9.919,21.433,18.008,34.133,23.893\n			c1.792,0.853,3.584,1.536,5.376,2.304c1.792,0.768,3.669,1.365,5.461,2.048c1.792,0.683,3.669,1.28,5.461,1.792l5.035,1.365\n			c3.413,0.853,6.827,1.536,10.325,2.133c4.214,0.626,8.458,1.025,12.715,1.195h5.973h0.512l5.12-0.597\n			c1.877-0.085,3.84-0.512,6.059-0.512h2.901l5.888-0.853l2.731-0.512l4.949-1.024h0.939c20.961-5.265,40.101-16.118,55.381-31.403\n			l108.629-108.629C523.718,157.296,523.718,81.65,477.061,34.993z"
         }
       ) }) }),
       /* @__PURE__ */ jsx("g", {}),

package/dist/index.js

@@ -55,6 +55,7 @@ import { LearnMoreSection } from "./components/LearnMoreSection/LearnMore.js";
 import { LearnMoreItemSection } from "./components/LearnMoreSection/LearnMoreItem.js";
 import { MainMenu } from "./components/MainMenu/MainMenu.js";
 import { MenuNav } from "./components/MenuNav/MenuNav.styles.js";
+import { GlareButton } from "./components/Button/GlareButton.js";
 import { Modal } from "./components/Modal/Modal.js";
 import { PaymentModal } from "./components/Modal/PaymentModal.js";
 import { NewVentureModal } from "./components/Modal/NewVentureModal/NewVentureModal.js";
@@ -351,6 +352,7 @@ export {
   GRAY_DEEP_HEX,
   GRAY_SECONDARY_HEX,
   GREEN,
+  GlareButton,
   default26 as Glassess,
   GlobalStyle,
   Header,

package/dist/runtime-config.js

@@ -1,4 +1,4 @@
-const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false };
+const __vite_import_meta_env__ = { "BASE_URL": "/", "DEV": false, "MODE": "production", "PROD": true, "SSR": false, "VITE_ADMIN_URL": "https://admin.stokr.info", "VITE_API_URL": "https://platform-api.stokr.info/api/v1", "VITE_BASE_URL_PUBLIC": "https://platform-api-no-auth.stokr.info/api/v1", "VITE_COOKIE_DOMAIN": "localhost", "VITE_DASHBOARD_URL": "https://dashboard.stokr.info", "VITE_FIREBASE_API_KEY": "AIzaSyBBp_3Romnfv--YpUuV0mJgDymvSp3oq0c", "VITE_FIREBASE_APP_ID": "1:568229412804:web:2391857e3e2a0b02346e91", "VITE_FIREBASE_AUTH_DOMAIN": "stokr-development-env.firebaseapp.com", "VITE_FIREBASE_MEASUREMENT_ID": "G-CP53SZVSMN", "VITE_FIREBASE_MESSAGING_SENDER_ID": "568229412804", "VITE_FIREBASE_PROJECT_ID": "stokr-development-env", "VITE_FIREBASE_STORAGE_BUCKET": "stokr-development-env.appspot.com", "VITE_MIXPANEL_TOKEN": "a7bb1e881f9b2600762fded84d8ce0ea", "VITE_ONBOARDING_URL": "https://signup.stokr.info", "VITE_PHOTO_API_URL": "https://platform-api.stokr.info/api/v1", "VITE_REGISTER_URL": "https://stokr.info/signup", "VITE_WEBSITE_DOMAIN": "stokr.info" };
 const _overrides = {};
 const ENV_KEY_BY_CONFIG = {
   apiUrl: "VITE_API_URL",