@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/ResetConfirmModal/ResetConfirmModal.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import { RED_BASE_HEX } from "../../constants/style.js";
+import { Modal } from "../Modal/Modal.js";
+import { Button } from "../Button/Button.styles.js";
+import { Text } from "../Text/Text.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ContainerWithLine } from "./ResetConfirmModal.styles.js";
+import { ModalInner } from "../Modal/Modal.styles.js";
+const RedBar = styled.div`
+  background: ${RED_BASE_HEX};
+  bottom: 0;
+  height: 30%;
+  position: absolute;
+  right: 0;
+  width: 50%;
+`;
+const ResetConfirmModal = ({ isModalOpen, onModalClose, onModalSwitch }) => /* @__PURE__ */ jsxs(Modal, { isOpen: isModalOpen, onClose: onModalClose, closeIsFullHeight: true, children: [
+  /* @__PURE__ */ jsx(Row, { isConfirmModal: true, children: /* @__PURE__ */ jsx(Column, { relative: true, part: 10, isConfirmModal: true, children: /* @__PURE__ */ jsx(ModalInner, { isConfirmModal: true, children: /* @__PURE__ */ jsxs(ContainerWithLine, { children: [
+    /* @__PURE__ */ jsxs(Text, { withBorder: true, isConfirm: true, children: [
+      /* @__PURE__ */ jsxs("h3", { children: [
+        "Abracadabra!",
+        /* @__PURE__ */ jsx("br", {}),
+        "You're back in the game!"
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "Your new password has been set." })
+    ] }),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx("br", {}),
+    /* @__PURE__ */ jsx(Button, { onClick: onModalSwitch, children: "Login" })
+  ] }) }) }) }),
+  /* @__PURE__ */ jsx(RedBar, {})
+] });
+ResetConfirmModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired
+};
+var stdin_default = ResetConfirmModal;
+export {
+  ResetConfirmModal,
+  stdin_default as default
+};

package/dist/components/ResetConfirmModal/ResetConfirmModal.styles.js

@@ -0,0 +1,41 @@
+import styled from "styled-components";
+import { Text } from "../Text/Text.styles.js";
+import { colors } from "../../styles/colors.js";
+const ContainerWithLine = styled(Text)`
+  position: relative;
+  padding-left: 48px;
+
+  &::before {
+    content: '';
+    width: 8px;
+    height: 72px;
+    background: ${colors.blue};
+    position: absolute;
+    left: 0;
+    top: 6px;
+    @media screen and (max-width: 767px) {
+      top: 33px;
+    }
+  }
+
+  // &::after {
+  //   content: '';
+  //   width: 1px;
+  //   height: 800px;
+  //   background: #ededed;
+  //   position: absolute;
+  //   left: 0;
+  //   top: -200px;
+
+  //   @media screen and (max-width: 767px) {
+  //     height: 200vh;
+  //   }
+  // }
+
+  @media screen and (max-width: 767px) {
+    top: -20vh;
+  }
+`;
+export {
+  ContainerWithLine
+};

package/dist/components/ResetPasswordModal/ResetPasswordModal.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+import { Formik } from "formik";
+import * as Yup from "yup";
+import { Modal } from "../Modal/Modal.js";
+import stdin_default$1 from "../Form/Form.js";
+import { Text } from "../Text/Text.styles.js";
+import stdin_default$2 from "../Input/InputPassword.js";
+import { Button } from "../Button/Button.styles.js";
+import { Row, Column } from "../Grid/Grid.styles.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { ModalInner, ModalLinkWrap, ModalLink } from "../Modal/Modal.styles.js";
+import { FormField, FormError } from "../Form/Form.styles.js";
+const ResetPasswordModal = ({
+  isModalOpen,
+  onModalClose,
+  onFormSend,
+  onModalSwitch,
+  popupError,
+  isActionLoading,
+  onLoad
+}) => {
+  const initialValues = {
+    password: "",
+    confirmPassword: ""
+  };
+  const validationSchema = Yup.object().shape({
+    password: Yup.string().required("Oops, this can‘t be blank"),
+    confirmPassword: Yup.string().required("Oops, this can‘t be blank")
+  });
+  useEffect(() => {
+    onLoad?.();
+  }, []);
+  return /* @__PURE__ */ jsx(Modal, { isOpen: isModalOpen, onClose: onModalClose, children: /* @__PURE__ */ jsxs(Row, { children: [
+    /* @__PURE__ */ jsxs(Column, { part: 8, children: [
+      /* @__PURE__ */ jsx(ModalInner, { modalTop: true, children: /* @__PURE__ */ jsxs(Text, { children: [
+        /* @__PURE__ */ jsx("h3", { children: "RESET YOUR PASSWORD" }),
+        /* @__PURE__ */ jsx("p", { children: "Please set your new password." })
+      ] }) }),
+      /* @__PURE__ */ jsx(ModalInner, { modalBot: true, children: /* @__PURE__ */ jsxs(ModalLinkWrap, { children: [
+        "Remember your password? ",
+        /* @__PURE__ */ jsx(ModalLink, { to: "#", onClick: onModalSwitch, children: "Log in" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Column, { part: 8, children: /* @__PURE__ */ jsx(ModalInner, { children: /* @__PURE__ */ jsx(
+      Formik,
+      {
+        initialValues,
+        validationSchema,
+        onSubmit: (values) => {
+          onFormSend(values);
+        },
+        children: ({ values, errors, touched, handleBlur, setFieldValue, setFieldTouched }) => {
+          const onChangeWithTouch = (e) => {
+            const field = e.target;
+            setFieldValue(field.name, field.value, false);
+            setFieldTouched(field.name);
+          };
+          const submitDisabled = values.password.length <= 5 || values.password !== values.confirmPassword || isActionLoading === "resetPassword";
+          return /* @__PURE__ */ jsxs(stdin_default$1, { children: [
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(
+                stdin_default$2,
+                {
+                  id: "reset-password",
+                  name: "password",
+                  type: "password",
+                  label: "Password",
+                  value: values.password,
+                  onChange: onChangeWithTouch,
+                  onBlur: handleBlur,
+                  error: !!errors.password,
+                  touched: !!touched.password,
+                  info: "For a stronger password, try a mix of lowercase, capitals, numbers and special characters.",
+                  autoComplete: "new-password"
+                }
+              ),
+              /* @__PURE__ */ jsx(FormError, { show: errors.password && touched.password, children: errors.password }),
+              /* @__PURE__ */ jsx(
+                FormError,
+                {
+                  show: !errors.password && touched.password && values.password.length <= 5,
+                  children: "The password must be at least 6 characters long"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx("br", {}),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, children: /* @__PURE__ */ jsxs(FormField, { children: [
+              /* @__PURE__ */ jsx(
+                stdin_default$2,
+                {
+                  id: "confirm-reset-password",
+                  name: "confirmPassword",
+                  type: "password",
+                  label: "Confirm password",
+                  value: values.confirmPassword,
+                  onChange: onChangeWithTouch,
+                  onBlur: handleBlur,
+                  error: !!errors.confirmPassword,
+                  touched: !!touched.confirmPassword,
+                  autoComplete: "new-password"
+                }
+              ),
+              /* @__PURE__ */ jsx(FormError, { show: errors.confirmPassword && touched.confirmPassword, children: errors.confirmPassword })
+            ] }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { noPaddingBottom: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(Button, { type: "submit", id: "reset-password-submit-btn", fluid: true, disabled: submitDisabled, children: isActionLoading === "resetPassword" ? "Resetting" : "Reset" }) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(
+              FormError,
+              {
+                show: touched.password && touched.confirmPassword && values.password !== values.confirmPassword,
+                children: "The passwords must match"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(ComponentWrapper, { paddingVeticalHalf: true, noPaddingHorizontal: true, children: /* @__PURE__ */ jsx(FormError, { show: popupError.popup === "resetPassword", children: popupError.message }) })
+          ] });
+        }
+      }
+    ) }) })
+  ] }) });
+};
+ResetPasswordModal.propTypes = {
+  isModalOpen: PropTypes.bool.isRequired,
+  onModalClose: PropTypes.func.isRequired,
+  onFormSend: PropTypes.func.isRequired,
+  onModalSwitch: PropTypes.func.isRequired
+};
+var stdin_default = ResetPasswordModal;
+export {
+  ResetPasswordModal,
+  stdin_default as default
+};

package/dist/components/SEO/SEO.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import Helmet from "react-helmet";
+function SEO({ description = "", lang = "en", meta = [], keywords = [], title, author = "" }) {
+  return /* @__PURE__ */ jsx(
+    Helmet,
+    {
+      htmlAttributes: {
+        lang
+      },
+      title,
+      titleTemplate: "STOKR • %s",
+      meta: [
+        {
+          name: "description",
+          content: description
+        },
+        {
+          property: "og:title",
+          content: title
+        },
+        {
+          property: "og:description",
+          content: description
+        },
+        {
+          property: "og:type",
+          content: "website"
+        },
+        {
+          name: "twitter:card",
+          content: "summary"
+        },
+        {
+          name: "twitter:creator",
+          content: author
+        },
+        {
+          name: "twitter:title",
+          content: title
+        },
+        {
+          name: "twitter:description",
+          content: description
+        }
+      ].concat(
+        keywords?.length > 0 ? {
+          name: "keywords",
+          content: keywords.join(", ")
+        } : []
+      ).concat(meta)
+    }
+  );
+}
+SEO.propTypes = {
+  description: PropTypes.string,
+  lang: PropTypes.string,
+  meta: PropTypes.instanceOf(Array),
+  keywords: PropTypes.arrayOf(PropTypes.string),
+  title: PropTypes.string.isRequired,
+  author: PropTypes.string
+};
+export {
+  SEO
+};

package/dist/components/SectionTitle/SectionTitle.styles.js

@@ -0,0 +1,26 @@
+import styled from "styled-components";
+const SectionTitle = styled.h2`
+  position: relative;
+  font-family: 'Open Sans';
+  font-weight: normal;
+  font-size: 11px;
+  line-height: 20px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  padding: 0;
+  border: 0;
+  margin: 0;
+
+  span {
+    display: inline-block;
+  }
+
+  strong {
+    display: inline-block;
+    font-weight: bold;
+  }
+`;
+export {
+  SectionTitle,
+  SectionTitle as default
+};

package/dist/components/SideLine/SideLine.js

@@ -0,0 +1,7 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Line, Bar } from "./SideLine.styles.js";
+const SideLine = () => /* @__PURE__ */ jsx(Line, { children: /* @__PURE__ */ jsx(Bar, {}) });
+export {
+  SideLine
+};

package/dist/components/SideLine/SideLine.styles.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Line = styled.div`
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 20px;
+  width: 8px;
+  height: 100%;
+  font-size: 0;
+  border-left: 1px solid ${() => theme.cGrey};
+
+  ${rwd.Medium`
+    display: block;
+  `}
+
+  ${rwd.Large`
+    right: 30px;
+  `}
+`;
+const Bar = styled.div`
+  position: absolute;
+  top: 60px;
+  left: 0;
+  width: 100%;
+  height: 40px;
+  background-color: ${() => theme.cPrimary};
+`;
+export {
+  Bar,
+  Line
+};

package/dist/components/Slider/Slider.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import Slick from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import { WrapperSlider } from "./Slider.styles.js";
+const Slider = ({ children, autoplay = 0, dots = false, arrows = false, infinite = true, rtl = false }) => {
+  const settings = {
+    dots,
+    arrows,
+    infinite,
+    speed: 600,
+    autoplay: !!autoplay,
+    autoplaySpeed: autoplay,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    rtl
+  };
+  return /* @__PURE__ */ jsx(WrapperSlider, { children: /* @__PURE__ */ jsx(Slick, { ...settings, children }) });
+};
+Slider.propTypes = {
+  children: PropTypes.node.isRequired,
+  autoplay: PropTypes.number,
+  dots: PropTypes.bool,
+  arrows: PropTypes.bool,
+  infinite: PropTypes.bool
+};
+export {
+  Slider
+};

package/dist/components/Slider/Slider.styles.js

@@ -0,0 +1,120 @@
+import styled from "styled-components";
+const WrapperSlider = styled.div`
+  height: 100%;
+
+  .slick-list {
+    z-index: 0;
+  }
+
+  .slick-arrow {
+    z-index: 1;
+    width: 24px;
+    height: 24px;
+
+    &.slick-prev,
+    &.slick-next {
+      &:before {
+        font-family: 'Ionicons';
+        speak: none;
+        font-style: normal;
+        font-weight: normal;
+        font-variant: normal;
+        text-transform: none;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        font-size: 20px;
+        line-height: 24px;
+        text-align: center;
+        text-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
+        opacity: 1;
+        color: #fff;
+        transition: color 0.2s;
+      }
+
+      &:hover {
+        &:before {
+          color: #0050ca;
+        }
+      }
+    }
+
+    &.slick-prev {
+      left: 4px;
+
+      &:before {
+        content: '\f3cf';
+      }
+    }
+
+    &.slick-next {
+      right: 4px;
+
+      &:before {
+        content: '\f3d1';
+      }
+    }
+  }
+
+  .slick-dots {
+    z-index: 1;
+    height: auto;
+    bottom: 4px;
+
+    li {
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+      margin: 0;
+
+      button {
+        display: block;
+        padding: 8px;
+        width: 24px;
+        height: 24px;
+
+        &:before {
+          position: relative;
+          content: '';
+          display: block;
+          width: 8px;
+          height: 8px;
+          border-radius: 4px;
+          background-color: #fff;
+          opacity: 1;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
+          transition: background-color 0.2s;
+        }
+
+        &:hover {
+          &:before {
+            background-color: #0050ca;
+          }
+        }
+      }
+
+      &.slick-active {
+        button {
+          &:before {
+            background-color: #ee220d;
+          }
+        }
+      }
+    }
+  }
+`;
+const ImageSlide = styled.img`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center center;
+`;
+const ImageSlideWrapper = styled.div`
+  height: 193px;
+  position: relative;
+`;
+export {
+  ImageSlide,
+  ImageSlideWrapper,
+  WrapperSlider
+};

package/dist/components/Snackbar/Snackbar.js

@@ -0,0 +1,111 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useEffect } from "react";
+import { createPortal } from "react-dom";
+import PropTypes from "prop-types";
+import { SnackbarContainer, SnackbarWrapper, IconWrapper, Message, CloseButton } from "./Snackbar.styles.js";
+import SvgCrossIcon from "../../static/images/cross-icon.svg.js";
+import SvgWarningFilled from "../../static/images/warning-filled.svg.js";
+const InfoIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "1", fill: "currentColor" })
+] });
+const ErrorIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
+  /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16", r: "1", fill: "currentColor" })
+] });
+const SuccessIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 12L10.5 14.5L16 9", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+const defaultIcons = {
+  info: /* @__PURE__ */ jsx(InfoIcon, {}),
+  error: /* @__PURE__ */ jsx(ErrorIcon, {}),
+  success: /* @__PURE__ */ jsx(SuccessIcon, {}),
+  warning: /* @__PURE__ */ jsx(SvgWarningFilled, {})
+};
+const SnackbarItem = ({ id, message, variant = "info", icon, onClick, onClose, duration = 5e3 }) => {
+  const [isExiting, setIsExiting] = useState(false);
+  const handleClose = useCallback(() => {
+    setIsExiting(true);
+    setTimeout(() => {
+      onClose(id);
+    }, 300);
+  }, [id, onClose]);
+  useEffect(() => {
+    if (duration === "permanent" || duration === 0) return;
+    const timer = setTimeout(() => {
+      handleClose();
+    }, duration);
+    return () => clearTimeout(timer);
+  }, [duration, handleClose]);
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  const displayIcon = icon !== void 0 ? icon : defaultIcons[variant];
+  const isPermanent = duration === "permanent" || duration === 0;
+  return /* @__PURE__ */ jsxs(
+    SnackbarWrapper,
+    {
+      $variant: variant,
+      $isExiting: isExiting,
+      $hasClick: !!onClick,
+      $duration: duration,
+      $isPermanent: isPermanent,
+      onClick: onClick ? handleClick : void 0,
+      children: [
+        displayIcon && /* @__PURE__ */ jsx(IconWrapper, { $variant: variant, children: displayIcon }),
+        /* @__PURE__ */ jsx(Message, { children: message }),
+        /* @__PURE__ */ jsx(
+          CloseButton,
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              handleClose();
+            },
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(SvgCrossIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
+SnackbarItem.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  message: PropTypes.node.isRequired,
+  variant: PropTypes.oneOf(["info", "error", "success", "warning"]),
+  icon: PropTypes.node,
+  onClick: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+  duration: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["permanent"])])
+};
+const Snackbar = ({ snackbars = [], onClose, position = "top-right", container = null }) => {
+  if (snackbars.length === 0) return null;
+  const content = /* @__PURE__ */ jsx(SnackbarContainer, { $position: position, $isContained: !!container, children: snackbars.map((snackbar) => /* @__PURE__ */ jsx(SnackbarItem, { ...snackbar, onClose }, snackbar.id)) });
+  if (container) {
+    return createPortal(content, container);
+  }
+  return createPortal(content, document.body);
+};
+Snackbar.propTypes = {
+  snackbars: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+      message: PropTypes.node.isRequired,
+      variant: PropTypes.oneOf(["info", "error", "success", "warning"]),
+      icon: PropTypes.node,
+      onClick: PropTypes.func,
+      duration: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(["permanent"])])
+    })
+  ),
+  onClose: PropTypes.func.isRequired,
+  position: PropTypes.oneOf(["top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center"]),
+  container: PropTypes.instanceOf(Element)
+};
+export {
+  Snackbar
+};