@stokr/components-library 3.0.16 → 3.0.18

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
+};

package/dist/components/Snackbar/Snackbar.styles.js

@@ -0,0 +1,230 @@
+import styled, { keyframes, css } from "styled-components";
+import { colors } from "../../styles/colors.js";
+const slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+`;
+const slideInLeft = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideInUp = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideInDown = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const progressExpire = keyframes`
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+`;
+const variantStyles = {
+  info: {
+    borderColor: colors.blue,
+    iconColor: colors.blue
+  },
+  error: {
+    borderColor: colors.orangishRed,
+    iconColor: colors.orangishRed
+  },
+  success: {
+    borderColor: colors.progressAccentStart,
+    iconColor: colors.progressAccentStart
+  },
+  warning: {
+    borderColor: colors.warningOrange,
+    iconColor: colors.warningOrange
+  }
+};
+const positionStyles = {
+  "top-right": css`
+    top: 20px;
+    right: 20px;
+    animation: ${slideIn} 0.3s ease-out forwards;
+  `,
+  "top-left": css`
+    top: 20px;
+    left: 20px;
+    animation: ${slideInLeft} 0.3s ease-out forwards;
+  `,
+  "top-center": css`
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: ${slideInDown} 0.3s ease-out forwards;
+  `,
+  "bottom-right": css`
+    bottom: 20px;
+    right: 20px;
+    animation: ${slideIn} 0.3s ease-out forwards;
+  `,
+  "bottom-left": css`
+    bottom: 20px;
+    left: 20px;
+    animation: ${slideInLeft} 0.3s ease-out forwards;
+  `,
+  "bottom-center": css`
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: ${slideInUp} 0.3s ease-out forwards;
+  `
+};
+const SnackbarContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["$isContained", "$position"].includes(props)
+})`
+  position: ${({ $isContained }) => $isContained ? "absolute" : "fixed"};
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+
+  ${({ $position }) => positionStyles[$position] || positionStyles["top-right"]}
+`;
+const SnackbarWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["$variant", "$isExiting", "$duration", "$isPermanent", "$hasClick"].includes(props)
+})`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 320px;
+  max-width: 480px;
+  padding: 12px 16px;
+  background-color: ${colors.white};
+  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  border: 1px solid ${colors.grey};
+  //border-bottom: 3px solid ${colors.grey};
+  pointer-events: auto;
+  overflow: hidden;
+  animation: ${({ $isExiting }) => $isExiting ? slideOut : "none"} 0.3s ease-out forwards;
+
+  /* Progress bar that expires with duration */
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    background-color: ${({ $variant }) => variantStyles[$variant]?.borderColor || colors.blue};
+    border-radius: 0 0 0 6px;
+    ${({ $duration, $isPermanent }) => $isPermanent ? css`
+            width: 100%;
+          ` : css`
+            animation: ${progressExpire} ${$duration}ms linear forwards;
+          `}
+  }
+
+  ${({ $hasClick }) => $hasClick && css`
+      cursor: pointer;
+
+      &:hover {
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
+      }
+    `}
+`;
+const IconWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["$variant"].includes(props)
+})`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: ${({ $variant }) => variantStyles[$variant]?.iconColor || colors.blue};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const Message = styled.div`
+  flex: 1;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  color: ${colors.black};
+`;
+const CloseButton = styled.button`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+
+    path {
+      stroke: ${colors.grey2};
+      stroke-width: 2;
+    }
+  }
+
+  &:hover svg path {
+    stroke: ${colors.black};
+  }
+`;
+export {
+  CloseButton,
+  IconWrapper,
+  Message,
+  SnackbarContainer,
+  SnackbarWrapper,
+  variantStyles
+};

package/dist/components/Snackbar/SnackbarProvider.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
+import { Snackbar } from "./Snackbar.js";
+const SnackbarContext = createContext(null);
+let snackbarId = 0;
+const SnackbarProvider = ({
+  children,
+  position = "top-right",
+  maxSnacks = 5,
+  defaultDuration = 5e3,
+  container = null
+}) => {
+  const [snackbars, setSnackbars] = useState([]);
+  const closeSnackbar = useCallback((id) => {
+    setSnackbars((prev) => prev.filter((s) => s.id !== id));
+  }, []);
+  const showSnackbar = useCallback(
+    (options) => {
+      const id = options.id ?? ++snackbarId;
+      const newSnackbar = {
+        id,
+        message: options.message,
+        variant: options.variant || "info",
+        icon: options.icon,
+        onClick: options.onClick,
+        duration: options.duration ?? defaultDuration
+      };
+      setSnackbars((prev) => {
+        const updated = [...prev, newSnackbar];
+        if (updated.length > maxSnacks) {
+          return updated.slice(-maxSnacks);
+        }
+        return updated;
+      });
+      return id;
+    },
+    [maxSnacks, defaultDuration]
+  );
+  const clearAll = useCallback(() => {
+    setSnackbars([]);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      showSnackbar,
+      closeSnackbar,
+      clearAll
+    }),
+    [showSnackbar, closeSnackbar, clearAll]
+  );
+  return /* @__PURE__ */ jsxs(SnackbarContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx(Snackbar, { snackbars, onClose: closeSnackbar, position, container })
+  ] });
+};
+SnackbarProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  position: PropTypes.oneOf(["top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center"]),
+  maxSnacks: PropTypes.number,
+  defaultDuration: PropTypes.number,
+  container: PropTypes.instanceOf(Element)
+};
+export {
+  SnackbarContext,
+  SnackbarProvider
+};

package/dist/components/Snackbar/useSnackbar.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { SnackbarContext } from "./SnackbarProvider.js";
+const useSnackbar = () => {
+  const context = useContext(SnackbarContext);
+  if (!context) {
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
+  }
+  return context;
+};
+export {
+  useSnackbar
+};