@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/Payment/PaymentDisplay.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import styled from "styled-components";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Text } from "../Text/Text.styles.js";
+import { colors } from "../../styles/colors.js";
+import { CopyToClipboard } from "react-copy-to-clipboard";
+import { Tooltip } from "react-tippy";
+import { CopyToClipboardButton } from "../CryptoAddress/CryptoAddress.styles.js";
+import stdin_default from "../QRCode/QRCode.js";
+import { SectionTitle } from "../SectionTitle/SectionTitle.styles.js";
+import { FlexContainer } from "../Grid/Grid.styles.js";
+import rwd from "../../styles/rwd.js";
+import { getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
+const CodeWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["maxWidth"].includes(props)
+})`
+  background: ${colors.grey3};
+  border: 1px solid ${colors.grey3};
+  box-shadow: 2px 4px 14px 0px rgb(196, 196, 196, 0.25);
+  border-radius: 5px;
+  padding: 32px 64px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  margin: auto;
+  max-width: ${(props) => props.maxWidth || "550px"};
+`;
+const AmountSection = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin: 14px 0 8px 0;
+
+  > :nth-child(3) {
+    margin-left: -8px;
+  }
+
+  span {
+    font-weight: 400;
+    text-transform: uppercase;
+    line-height: 28px;
+    font-size: 18px;
+    letter-spacing: 0.8px;
+
+    ${rwd.XLarge`
+    font-size: 22px;
+  `}
+  }
+`;
+const AmountText = styled(Text)`
+  font-size: 24px;
+  font-weight: 800;
+  text-transform: uppercase;
+  line-height: 40px;
+  letter-spacing: 1.5px;
+  word-wrap: break-word;
+
+  ${rwd.XLarge`
+    font-size: 34px;
+  `}
+`;
+const AmountIcon = styled.img`
+  width: 24px;
+  height: 24px;
+
+  ${rwd.XLarge`
+    width:32px;
+    height:32px;
+  `}
+`;
+const AddressText = styled.p`
+  letter-spacing: 0.6%;
+  word-break: break-all;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: 0.1;
+  margin: 0;
+  margin-top: 14px;
+`;
+const AddressDescription = styled.p`
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  margin: 0;
+`;
+const CopyToClipBoardTooltip = ({ value, buttonStyle, onCopy }) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    setCopied(true);
+    if (onCopy) onCopy(value);
+  };
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      position: "top",
+      title: copied ? "Copied to clipboard!" : "Click to copy to clipboard",
+      theme: "light",
+      arrow: true,
+      hideOnClick: false,
+      onHidden: () => setCopied(false),
+      duration: 200,
+      children: /* @__PURE__ */ jsx(CopyToClipboard, { text: value, onCopy: handleCopy, children: /* @__PURE__ */ jsx(CopyToClipboardButton, { style: buttonStyle }) })
+    }
+  );
+};
+const PaymentDisplay = ({
+  amount,
+  currency = "BTC",
+  address,
+  showQRCode = true,
+  showCopyIcons = true,
+  showAddress = true,
+  qrCodeValue,
+  amountTitle = "Transfer amount",
+  addressTitle = "address",
+  addressDescription = "",
+  qrCodeSize = 200,
+  qrCodeStyle,
+  // Style props
+  containerStyle,
+  codeWrapperStyle,
+  amountSectionStyle,
+  amountTextStyle,
+  amountIconStyle,
+  addressTextStyle,
+  addressDescriptionStyle,
+  addressSectionStyle,
+  // Other customization props
+  maxWidth,
+  className,
+  codeWrapperClassName,
+  customCurrencyIcon,
+  onAmountCopy,
+  onAddressCopy,
+  copyButtonStyle
+}) => {
+  const defaultQRCodeStyle = {
+    backgroundColor: "#000000",
+    padding: 18,
+    borderRadius: 8,
+    margin: "16px 0"
+  };
+  return /* @__PURE__ */ jsx(ComponentWrapper, { noPadding: true, center: true, style: containerStyle, className, children: /* @__PURE__ */ jsxs(CodeWrapper, { style: codeWrapperStyle, maxWidth, className: codeWrapperClassName, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(SectionTitle, { children: amountTitle }),
+      /* @__PURE__ */ jsxs(AmountSection, { style: amountSectionStyle, children: [
+        /* @__PURE__ */ jsx(AmountIcon, { src: getCurrencyIcon(currency, customCurrencyIcon), style: amountIconStyle, alt: currency }),
+        /* @__PURE__ */ jsx(AmountText, { style: amountTextStyle, children: amount }),
+        /* @__PURE__ */ jsxs(AmountText, { style: amountTextStyle, children: [
+          " ",
+          currency
+        ] }),
+        showCopyIcons && /* @__PURE__ */ jsx(
+          CopyToClipBoardTooltip,
+          {
+            value: amount.toString(),
+            buttonStyle: copyButtonStyle || { height: 18, width: 18 },
+            onCopy: onAmountCopy
+          }
+        )
+      ] })
+    ] }),
+    showQRCode && qrCodeValue && /* @__PURE__ */ jsx(
+      stdin_default,
+      {
+        size: qrCodeSize,
+        bgColor: "#000000",
+        fgColor: "#ffffff",
+        style: qrCodeStyle || defaultQRCodeStyle,
+        value: qrCodeValue
+      }
+    ),
+    showAddress && address && /* @__PURE__ */ jsxs("div", { style: addressSectionStyle, children: [
+      /* @__PURE__ */ jsx(SectionTitle, { children: addressTitle }),
+      /* @__PURE__ */ jsxs(FlexContainer, { style: { gap: 16, margin: "12px 0" }, children: [
+        /* @__PURE__ */ jsx(AddressText, { style: addressTextStyle, children: address }),
+        showCopyIcons && /* @__PURE__ */ jsx(
+          CopyToClipBoardTooltip,
+          {
+            value: address,
+            buttonStyle: copyButtonStyle || { height: 16, width: 16, marginTop: 4 },
+            onCopy: onAddressCopy
+          }
+        )
+      ] }),
+      addressDescription && /* @__PURE__ */ jsx(AddressDescription, { style: addressDescriptionStyle, children: addressDescription })
+    ] })
+  ] }) });
+};
+export {
+  CodeWrapper,
+  PaymentDisplay
+};

package/dist/components/Payment/TimerComponent.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { memo } from "react";
+import { useTimer } from "../../hooks/useTimer.js";
+import { format } from "date-fns-tz";
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+import { Text } from "../Text/Text.styles.js";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+import { FlexContainer } from "../Grid/Grid.styles.js";
+import rwd from "../../styles/rwd.js";
+const TimerBlock = styled.div.withConfig({
+  shouldForwardProp: (props) => !["maxWidth", "red"].includes(props)
+})`
+  background-color: ${colors.grey3};
+  padding: 24px 27px;
+  text-align: start;
+  max-width: ${(props) => props.maxWidth || "550px"};
+  margin: auto;
+
+  strong {
+    font-weight: 600;
+  }
+
+  p {
+    font-size: 14px !important;
+    margin: 0 !important;
+  }
+
+  ${rwd.Medium`
+    p {
+      font-size: 16px !important;
+    }
+  `}
+
+  ${Text}:first-child {
+    margin-bottom: 16px;
+  }
+
+  ${(props) => props.red && `
+    #timer-text {
+      color: ${colors.darkRed};
+    }
+  `}
+`;
+const TimerComponent = memo(
+  ({
+    timerId,
+    onTimerExpired,
+    warningThreshold = 60 * 5,
+    // 5 minutes
+    // Customizable text props
+    title = "This offer is time-limited",
+    description = "Please note that this offer is valid only for a limited period and will expire in",
+    // Style props
+    containerStyle,
+    timerBlockStyle,
+    className,
+    maxWidth,
+    // Icon props
+    icon = iconsMap.inProgress,
+    iconSize = 16,
+    showIcon = true
+  }) => {
+    const { secondsRemaining, hasTimerFinished, stopTimer } = useTimer(timerId);
+    React__default.useEffect(() => {
+      if (hasTimerFinished) {
+        stopTimer();
+        if (onTimerExpired) {
+          onTimerExpired();
+        }
+      }
+    }, [hasTimerFinished, onTimerExpired, stopTimer]);
+    const isWarning = secondsRemaining < warningThreshold;
+    const formattedTime = format(new Date(secondsRemaining * 1e3), "HH:mm:ss", { timeZone: "UTC" });
+    return /* @__PURE__ */ jsx(TimerBlock, { red: isWarning, maxWidth, style: timerBlockStyle, className, children: /* @__PURE__ */ jsxs("div", { style: containerStyle, children: [
+      /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsxs(FlexContainer, { itemsCenter: true, style: { gap: 8 }, children: [
+        showIcon && /* @__PURE__ */ jsx(Icon, { icon, size: iconSize }),
+        /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: title }) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsxs("p", { children: [
+        description,
+        " ",
+        /* @__PURE__ */ jsx("strong", { id: "timer-text", children: formattedTime })
+      ] }) })
+    ] }) });
+  }
+);
+TimerComponent.displayName = "TimerComponent";
+export {
+  TimerBlock,
+  TimerComponent
+};

package/dist/components/Process/Process.styles.js

@@ -0,0 +1,84 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+import loader from "../../static/images/process-waiting.gif.js";
+const Process = styled.div.withConfig({
+  shouldForwardProp: (props) => !["waiting", "success", "failed"].includes(props)
+})`
+  display: block;
+  position: relative;
+  font-size: 11px;
+  line-height: 16px;
+  text-transform: uppercase;
+  padding-right: 26px;
+  color: ${() => theme.cPrimary};
+  opacity: 0.3;
+
+  ${rwd.Medium`
+    font-size: 14px;
+    line-height: 20px;
+  `}
+
+  &:before {
+    content: '';
+    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: 19px;
+    line-height: 16px;
+    display: block;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 50%;
+    right: 0;
+    margin-top: -8px;
+
+    ${rwd.Medium`
+      font-size: 24px;
+      line-height: 20px;
+      width: 20px;
+      height: 20px;
+      margin-top: -10px;
+    `}
+  }
+
+  ${(props) => props.waiting && `
+    opacity: 1;
+
+    &:before {
+      content: '';
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-size: cover;
+      background-image: url(${loader});
+    }
+  `}
+
+  ${(props) => props.success && `
+    opacity: 1;
+
+    &:before {
+      content: '\\f14a';
+      color: ${theme.cProgressDone};
+    }
+  `}
+
+  ${(props) => props.failed && `
+    opacity: 1;
+    color: ${theme.cWarning};
+
+    &:before {
+      content: '\\f14e';
+    }
+  `}
+`;
+export {
+  Process
+};

package/dist/components/ProfileBadge/ProfileBadge.js

@@ -0,0 +1,35 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+import earlyadopter from "../../static/images/early-adopter.png.js";
+import graduation from "../../static/images/graduation.png.js";
+import { Wrapper, Title } from "./ProfileBadge.styles.js";
+const Badge = styled.img`
+  height: 100px;
+
+  @media screen and (max-width: 1023px) {
+    height: 80px;
+  }
+`;
+const GetBadge = (badge) => {
+  if (badge === "Graduation") {
+    return graduation;
+  } else {
+    return earlyadopter;
+  }
+};
+const ProfileBadge = ({ title, icon = void 0, withIcon = void 0, color = "white", centerVertically }) => /* @__PURE__ */ jsxs(Wrapper, { color, children: [
+  /* @__PURE__ */ jsx(Title, { centerVertically, children: title }),
+  icon,
+  withIcon && /* @__PURE__ */ jsx(Badge, { src: GetBadge(title), alt: title + " badge" })
+] });
+ProfileBadge.propTypes = {
+  title: PropTypes.string.isRequired,
+  icon: PropTypes.node,
+  withIcon: PropTypes.bool,
+  color: PropTypes.string
+};
+export {
+  ProfileBadge
+};

package/dist/components/ProfileBadge/ProfileBadge.styles.js

@@ -0,0 +1,53 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Wrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["color"].includes(props)
+})`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  flex-grow: 1;
+  padding: 32px;
+
+  ${rwd.Medium`
+    padding: 12px;
+  `}
+
+  ${(props) => props.color === "white" && `
+    color: ${theme.cBlack};
+    background-color: ${theme.cWhite};
+
+    svg {
+      stroke: ${theme.cBlack};
+    }
+  `}
+  
+  ${(props) => props.color === "red" && `
+    color: ${theme.cWhite};
+    background-color: ${theme.cWarning};
+
+    svg {
+      stroke: ${theme.cWhite};
+    }
+  `}
+`;
+const Title = styled.div.withConfig({
+  shouldForwardProp: (props) => !["centerVertically"].includes(props)
+})`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2.06px;
+  text-transform: uppercase;
+  margin-bottom: 20px;
+
+  ${({ centerVertically }) => centerVertically && css`
+      margin-bottom: 0;
+    `}
+`;
+export {
+  Title,
+  Wrapper
+};

package/dist/components/ProfileBox/ProfileBox.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import stdin_default from "../Background/Background.js";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { Container, ImageWrapper, EditButton, Name, EditIcon } from "./ProfileBox.styles.js";
+const lineBreaker = {
+  wordBreak: "break-all"
+};
+const ProfileBox = ({ pictureSrc, name = "", handleEdit = () => {
+}, withEditButton = true, nameStyle = {} }) => /* @__PURE__ */ jsxs(Container, { children: [
+  /* @__PURE__ */ jsx(ImageWrapper, { children: /* @__PURE__ */ jsx(stdin_default, { src: pictureSrc }) }),
+  /* @__PURE__ */ jsx(EditButton, { onClick: handleEdit, "data-cy": "edit-button-profile-box", children: /* @__PURE__ */ jsx(ComponentWrapper, { children: /* @__PURE__ */ jsxs(Name, { style: { ...lineBreaker, ...nameStyle }, children: [
+    name,
+    withEditButton && /* @__PURE__ */ jsx(EditIcon, {})
+  ] }) }) })
+] });
+ProfileBox.propTypes = {
+  pictureSrc: PropTypes.string.isRequired,
+  name: PropTypes.string,
+  handleEdit: PropTypes.func,
+  withEditButton: PropTypes.bool,
+  nameStyle: PropTypes.object
+};
+export {
+  ProfileBox
+};

package/dist/components/ProfileBox/ProfileBox.styles.js

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+import { Container as Container$1 } from "../Background/Background.styles.js";
+const Container = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const ImageWrapper = styled.div`
+  flex-grow: 1;
+  min-height: 300px;
+
+  ${Container$1} {
+    width: 100%;
+    padding-top: 100%;
+  }
+`;
+const EditButton = styled.button`
+  display: block;
+  width: 100%;
+  color: ${(props) => props.theme.cBlack};
+  border-bottom: 1px solid ${(props) => props.theme.cLightGrey};
+  transition: color 0.2s;
+
+  &:focus,
+  &:hover {
+    color: ${(props) => props.theme.cPrimary};
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  & > div {
+    width: 100%;
+  }
+`;
+const Name = styled.div`
+  position: relative;
+  font-size: 16px;
+  line-height: 20px;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  text-align: center;
+`;
+const EditIcon = styled.i.attrs({
+  className: "ion-md-create"
+})`
+  margin-left: 12px;
+
+  &:before {
+    transform: rotate(-15deg);
+  }
+`;
+styled.i.attrs({
+  className: "ion-ios-add-circle-outline"
+})`
+  margin-left: 12px;
+  font-size: 30px;
+`;
+export {
+  Container,
+  EditButton,
+  EditIcon,
+  ImageWrapper,
+  Name
+};

package/dist/components/ProfileStat/ProfileStat.js

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Wrapper, Label, Value, Equal } from "./ProfileStat.styles.js";
+const lineBreaker = {
+  wordBreak: "break-all"
+};
+const ProfileStat = ({ label, unit = "", value, eqUnit = "", eqValue, withBorder }) => /* @__PURE__ */ jsxs(Wrapper, { withBorder, children: [
+  /* @__PURE__ */ jsx(Label, { withBorder, children: label }),
+  /* @__PURE__ */ jsxs(Value, { style: lineBreaker, children: [
+    unit && /* @__PURE__ */ jsx("span", { children: unit }),
+    value
+  ] }),
+  eqValue && eqUnit ? /* @__PURE__ */ jsxs(Equal, { children: [
+    "= ",
+    eqUnit && /* @__PURE__ */ jsx("span", { children: eqUnit }),
+    eqValue
+  ] }) : ""
+] });
+ProfileStat.propTypes = {
+  label: PropTypes.string.isRequired,
+  unit: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  eqUnit: PropTypes.string,
+  eqValue: PropTypes.string.isRequired
+};
+export {
+  ProfileStat
+};

package/dist/components/ProfileStat/ProfileStat.styles.js

@@ -0,0 +1,90 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Wrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["withBorder"].includes(props)
+})`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  flex-grow: 1;
+  background-color: ${() => theme.cPrimary};
+  color: ${() => theme.cWhite};
+  padding: 32px;
+
+  ${(props) => props.withBorder && `
+    box-shadow: inset 0 0.4px 0 0 #313131;
+  `}
+
+  ${rwd.Medium`
+    padding: 12px 32px;
+    text-align: left;
+  `}
+
+  ${rwd.Large`
+    padding: 12px 64px;
+    text-align: left;
+  `}
+
+  @media screen and (max-width: 768px) {
+    max-width: 100vw;
+  }
+`;
+const Label = styled.div.withConfig({
+  shouldForwardProp: (props) => !["withBorder"].includes(props)
+})`
+  font-size: 11px;
+  line-height: 2.18;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+
+  ${(props) => props.withBorder && `
+    color: #88fa51;
+  `}
+`;
+const Value = styled.div`
+  font-weight: 300;
+  font-size: 32px;
+  line-height: 36px;
+  letter-spacing: 2.43px;
+  text-transform: uppercase;
+
+  & > span {
+    &:after {
+      content: ' ';
+    }
+  }
+
+  ${rwd.Medium`
+    font-size: 44px;
+    line-height: 48px;
+  `}
+
+  ${rwd.Large`
+    font-size: 55px;
+    line-height: 58px;
+  `}
+`;
+const Equal = styled.div`
+  font-size: 11px;
+  line-height: 2.18;
+  letter-spacing: 2.1px;
+  text-transform: uppercase;
+  margin-top: 10px;
+  color: ${() => theme.cLighterGreen};
+  overflow-wrap: break-word;
+
+  & > span {
+    &:after {
+      content: ' ';
+    }
+  }
+`;
+export {
+  Equal,
+  Label,
+  Value,
+  Wrapper
+};