@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/Number/Number.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Container } from "./Number.styles.js";
+import SvgNumberOne from "../../static/images/numbers/number_one.svg.js";
+import SvgNumberTwo from "../../static/images/numbers/number_two.svg.js";
+import SvgNumberThree from "../../static/images/numbers/number_three.svg.js";
+import SvgNumberFour from "../../static/images/numbers/number_four.svg.js";
+import SvgNumberFive from "../../static/images/numbers/number_five.svg.js";
+import SvgNumberSix from "../../static/images/numbers/number_six.svg.js";
+import SvgNumberSeven from "../../static/images/numbers/number_seven.svg.js";
+import SvgNumberEight from "../../static/images/numbers/number_eight.svg.js";
+import SvgNumberNine from "../../static/images/numbers/number_nine.svg.js";
+import SvgNumberZero from "../../static/images/numbers/number_zero.svg.js";
+const getIcon = (number) => {
+  switch (number) {
+    case 1:
+      return /* @__PURE__ */ jsx(SvgNumberOne, {});
+    case 2:
+      return /* @__PURE__ */ jsx(SvgNumberTwo, {});
+    case 3:
+      return /* @__PURE__ */ jsx(SvgNumberThree, {});
+    case 4:
+      return /* @__PURE__ */ jsx(SvgNumberFour, {});
+    case 5:
+      return /* @__PURE__ */ jsx(SvgNumberFive, {});
+    case 6:
+      return /* @__PURE__ */ jsx(SvgNumberSix, {});
+    case 7:
+      return /* @__PURE__ */ jsx(SvgNumberSeven, {});
+    case 8:
+      return /* @__PURE__ */ jsx(SvgNumberEight, {});
+    case 9:
+      return /* @__PURE__ */ jsx(SvgNumberNine, {});
+    case 0:
+      return /* @__PURE__ */ jsx(SvgNumberZero, {});
+    default:
+      return null;
+  }
+};
+const Number = ({ number, containerStyle }) => /* @__PURE__ */ jsx("div", { style: containerStyle, children: getIcon(number) });
+const NumberWithContainer = ({ number, containerStyle }) => /* @__PURE__ */ jsx(Container, { style: containerStyle, children: getIcon(number) });
+Number.propTypes = {
+  number: PropTypes.number.isRequired,
+  containerStyle: PropTypes.object
+};
+export {
+  Number,
+  NumberWithContainer
+};

package/dist/components/Number/Number.styles.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+const Container = styled.div`
+  display: inline-block;
+  vertical-align: top;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  background-color: ${() => theme.cWarning};
+  font-size: 0;
+  text-align: center;
+  margin-right: 12px;
+
+  & > svg {
+    display: inline-block;
+    height: 16px;
+    width: auto;
+    fill: ${() => theme.cWhite};
+  }
+`;
+export {
+  Container
+};

package/dist/components/PageTransition/PageTransition.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Fragment } from "react";
+import PropTypes from "prop-types";
+import { TransitionGroup, Transition } from "../../utils/transition.js";
+const timeout = 300;
+const getTransitionStyles = {
+  entering: {
+    position: "absolute",
+    opacity: 0
+  },
+  entered: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 1
+  },
+  exiting: {
+    transition: `opacity ${timeout}ms ease-in-out`,
+    opacity: 0
+  }
+};
+const PageTransition = (props) => {
+  const { children, location } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(TransitionGroup, { children: /* @__PURE__ */ jsx(
+      Transition,
+      {
+        timeout: {
+          enter: timeout,
+          exit: timeout
+        },
+        children: (status) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              ...getTransitionStyles[status]
+            },
+            children
+          }
+        )
+      },
+      location.pathname
+    ) }),
+    /* @__PURE__ */ jsx("div", { id: "modalPortal" })
+  ] });
+};
+PageTransition.propTypes = {
+  children: PropTypes.node.isRequired,
+  location: PropTypes.instanceOf(Object).isRequired
+};
+export {
+  PageTransition
+};

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import { usePagination, DOTS } from "./usePagination.js";
+import { StyledList } from "./Pagination.styles.js";
+import PropTypes from "prop-types";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+const Pagination = (props) => {
+  const { onPageChange, totalCount, siblingCount = 1, currentPage, pageSize = 10 } = props;
+  const paginationRange = usePagination({
+    currentPage,
+    totalCount,
+    siblingCount,
+    pageSize
+  });
+  if (currentPage === 0) {
+    onPageChange(1);
+    return null;
+  }
+  const onNext = () => {
+    onPageChange(currentPage + 1);
+  };
+  const onPrevious = () => {
+    onPageChange(currentPage - 1);
+  };
+  const displayRange = paginationRange.length < 2 ? [1] : paginationRange;
+  let lastPage = displayRange[displayRange.length - 1];
+  return /* @__PURE__ */ jsxs(StyledList, { listStyle: props.listStyle, children: [
+    /* @__PURE__ */ jsx(StyledList.Item, { disabled: currentPage === 1 || displayRange.length === 1, onClick: onPrevious, arrow: true, children: /* @__PURE__ */ jsx(Icon, { icon: iconsMap.arrowLeft }) }),
+    displayRange.map((pageNumber) => {
+      if (pageNumber === DOTS) {
+        return /* @__PURE__ */ jsx(StyledList.Item, { dots: true, children: "…" }, pageNumber);
+      }
+      return /* @__PURE__ */ jsx(
+        StyledList.Item,
+        {
+          selected: pageNumber === currentPage,
+          onClick: () => onPageChange(pageNumber),
+          disabled: displayRange.length === 1,
+          children: pageNumber
+        },
+        pageNumber
+      );
+    }),
+    /* @__PURE__ */ jsx(StyledList.Item, { disabled: currentPage === lastPage || displayRange.length === 1, onClick: onNext, arrow: true, children: /* @__PURE__ */ jsx(Icon, { icon: iconsMap.arrowRight }) })
+  ] });
+};
+Pagination.propTypes = {
+  onPageChange: PropTypes.func.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  currentPage: PropTypes.number.isRequired,
+  siblingCount: PropTypes.number,
+  pageSize: PropTypes.number
+};
+var stdin_default = Pagination;
+export {
+  Pagination,
+  stdin_default as default
+};

package/dist/components/Pagination/Pagination.styles.js

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+const StyledList = styled.ul.withConfig({
+  shouldForwardProp: (props) => !["listStyle"].includes(props)
+})`
+  display: flex;
+  list-style-type: none;
+  padding: 0;
+  ${({ listStyle }) => listStyle}
+`;
+const ListItem = styled.li.withConfig({
+  shouldForwardProp: (props) => !["arrow", "selected", "disabled", "dots"].includes(props)
+})`
+  padding: 0 12px;
+  height: 32px;
+  text-align: center;
+  margin: auto 4px;
+  color: ${theme.cBlack};
+  display: flex;
+  align-items: center;
+  letter-spacing: 0.01071em;
+  border-radius: 16px;
+  line-height: 1.43;
+  font-size: 15px;
+  font-weight: 500;
+  min-width: 32px;
+
+  ${(props) => props.arrow && `
+    padding:0 9px;
+    `}
+
+  &:hover {
+    background-color: ${theme.cPrimary};
+    color: ${theme.cWhite};
+    cursor: pointer;
+  }
+
+  ${(props) => props.selected && `
+    color: ${theme.cWhite};
+    background-color: ${theme.cPrimary};
+  `}
+
+  ${(props) => props.disabled && `
+    pointer-events:none;
+    opacity: 0.6;
+  `}
+
+  ${(props) => props.dots && `
+     &:hover{
+         background-color: transparent;
+      cursor: default;
+      color:${theme.cBlack}
+     }
+  `}
+`;
+StyledList.Item = ListItem;
+export {
+  StyledList
+};

package/dist/components/Pagination/PaginationControls.js

@@ -0,0 +1,113 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import stdin_default$1 from "./Pagination.js";
+import { Card, CardTitle } from "../Card/Card.styles.js";
+import stdin_default$2 from "../Input/InputWithButton.js";
+import { Button } from "../Button/Button.styles.js";
+const PaginationControls = ({
+  currentPage,
+  totalCount,
+  pageSize,
+  onPageChange,
+  inputPageSize,
+  setInputPageSize,
+  setPageSize,
+  scrollRef,
+  scrollOffset = -100,
+  containerStyle,
+  showPageSizeControl = true,
+  pageSizeLabel = "Page Size:",
+  applyButtonText = "apply",
+  listStyle
+}) => {
+  const handlePageChange = (page) => {
+    onPageChange(page);
+    if (scrollRef?.current) {
+      const yOffset = scrollOffset;
+      const element = scrollRef.current;
+      const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;
+      window.scrollTo({ top: y, behavior: "smooth" });
+    }
+  };
+  const isValidPageSize = Number(inputPageSize) > 0;
+  return /* @__PURE__ */ jsxs(
+    ComponentWrapper,
+    {
+      noPaddingHorizontal: true,
+      flex: true,
+      style: {
+        justifyContent: "space-between",
+        flexWrap: "wrap",
+        ...containerStyle
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          stdin_default$1,
+          {
+            currentPage,
+            totalCount,
+            pageSize,
+            onPageChange: handlePageChange,
+            listStyle
+          }
+        ),
+        showPageSizeControl && /* @__PURE__ */ jsxs(Card, { noPadding: true, children: [
+          /* @__PURE__ */ jsx(CardTitle, { style: { padding: "2px 20px" }, children: pageSizeLabel }),
+          /* @__PURE__ */ jsx(
+            stdin_default$2,
+            {
+              id: "pageSize",
+              name: "pageSize",
+              value: inputPageSize?.toString(),
+              type: "number",
+              placeholder: "Page size",
+              onChange: (e) => {
+                const value = e.target.value === "" ? "" : Math.min(totalCount, Math.max(0, Number(e.target.value)));
+                setInputPageSize(value);
+              },
+              children: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  onClick: () => {
+                    const newPageSize = Math.max(1, Number(inputPageSize) || 1);
+                    setPageSize(newPageSize);
+                    const maxPage = Math.ceil(totalCount / newPageSize);
+                    if (currentPage > maxPage && maxPage > 0) {
+                      handlePageChange(maxPage);
+                    }
+                  },
+                  disabled: !isValidPageSize,
+                  style: { opacity: 1 },
+                  children: applyButtonText
+                }
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+PaginationControls.propTypes = {
+  currentPage: PropTypes.number.isRequired,
+  totalCount: PropTypes.number.isRequired,
+  pageSize: PropTypes.number.isRequired,
+  onPageChange: PropTypes.func.isRequired,
+  inputPageSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  setInputPageSize: PropTypes.func.isRequired,
+  setPageSize: PropTypes.func.isRequired,
+  scrollRef: PropTypes.shape({ current: PropTypes.any }),
+  scrollOffset: PropTypes.number,
+  containerStyle: PropTypes.object,
+  showPageSizeControl: PropTypes.bool,
+  pageSizeLabel: PropTypes.string,
+  applyButtonText: PropTypes.string,
+  listStyle: PropTypes.object
+};
+var stdin_default = PaginationControls;
+export {
+  PaginationControls,
+  stdin_default as default
+};

package/dist/components/Pagination/usePagination.js

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+const DOTS = "...";
+const range = (start, end) => {
+  let length = end - start + 1;
+  return Array.from({ length }, (_, idx) => idx + start);
+};
+const usePagination = ({ totalCount, pageSize, siblingCount = 1, currentPage }) => {
+  const paginationRange = useMemo(() => {
+    const totalPageCount = Math.ceil(totalCount / pageSize);
+    const totalPageNumbers = siblingCount + 5;
+    if (totalPageNumbers >= totalPageCount) {
+      return range(1, totalPageCount);
+    }
+    const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+    const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPageCount);
+    const shouldShowLeftDots = leftSiblingIndex > 2;
+    const shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
+    const firstPageIndex = 1;
+    const lastPageIndex = totalPageCount;
+    if (!shouldShowLeftDots && shouldShowRightDots) {
+      let leftItemCount = 3 + 2 * siblingCount;
+      let leftRange = range(1, leftItemCount);
+      return [...leftRange, DOTS, totalPageCount];
+    }
+    if (shouldShowLeftDots && !shouldShowRightDots) {
+      let rightItemCount = 3 + 2 * siblingCount;
+      let rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
+      return [firstPageIndex, DOTS, ...rightRange];
+    }
+    if (shouldShowLeftDots && shouldShowRightDots) {
+      let middleRange = range(leftSiblingIndex, rightSiblingIndex);
+      return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+    }
+  }, [totalCount, pageSize, siblingCount, currentPage]);
+  return paginationRange;
+};
+export {
+  DOTS,
+  usePagination
+};

package/dist/components/Payment/PaymentDetailsCard.js

@@ -0,0 +1,224 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React__default from "react";
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+import { formatCurrencyValue, getCurrencyIcon } from "../../utils/formatCurrencyValue.js";
+const CardContainer = styled.div`
+  background: ${colors.white};
+  border-radius: 10px;
+  border: 1px solid ${colors.lightGrey};
+  padding: 20px 32px;
+`;
+const CardTitle = styled.div`
+  font-size: 12px;
+  letter-spacing: 0.6px;
+  font-weight: 600;
+  color: ${colors.futureBlack};
+  background: #f1f5f9;
+  padding: 12px 24px;
+  margin: -20px -32px 20px -32px;
+  border-radius: 9px 9px 0 0;
+  border-bottom: 1px solid ${colors.lightGrey};
+  text-align: start;
+`;
+const AmountSection = styled.div``;
+const AmountLabel = styled.div`
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 20px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  margin-bottom: 12px;
+  color: ${colors.futureBlack};
+  text-align: start;
+`;
+const AmountDisplay = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+`;
+const CurrencyLogo = styled.div.withConfig({
+  shouldForwardProp: (props) => !["color"].includes(props)
+})`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  background-color: ${(props) => props.color || colors.black};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: ${colors.white};
+  font-size: 14px;
+  font-weight: 600;
+  overflow: hidden;
+`;
+const CurrencyIcon = styled.img`
+  width: 100%;
+  height: 100%;
+
+  object-fit: contain;
+`;
+const AmountValue = styled.div`
+  font-size: 34px;
+  font-weight: 600;
+  text-transform: uppercase;
+  line-height: 40px;
+  letter-spacing: 1.5px;
+  word-wrap: break-word;
+  color: ${colors.futureBlack};
+`;
+const Separator = styled.hr`
+  border: none;
+  border-top: 1px solid ${colors.lightGrey};
+  margin: 20px -32px;
+`;
+const DetailsSection = styled.div.withConfig({
+  shouldForwardProp: (props) => !["noMargin"].includes(props)
+})`
+  margin-bottom: ${(props) => props.noMargin ? "0" : "24px"};
+`;
+const DetailRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 10px 0;
+  border-bottom: 1px solid #f1f5f9;
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    padding: 10px 0 0 0;
+    border-bottom: none;
+  }
+`;
+const DetailLabel = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  color: #56606f;
+
+  i {
+    font-size: 14px;
+  }
+`;
+const DetailValue = styled.div`
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  letter-spacing: 0.5px;
+  word-wrap: break-word;
+  text-align: right;
+  max-width: 60%;
+  color: ${colors.black};
+`;
+const PlaceholderValue = styled.span`
+  color: #62748e;
+  font-weight: 300;
+  font-size: 14px;
+  letter-spacing: 0.5px;
+`;
+const InfoSectionContainer = styled.div`
+  margin-top: 24px;
+`;
+const DetailItem = ({ label, value, tooltip, placeholder, isCustom }) => {
+  const renderValue = () => {
+    if (isCustom && value) {
+      return value;
+    }
+    if (value !== void 0 && value !== null && value !== "") {
+      return value;
+    }
+    if (placeholder) {
+      return /* @__PURE__ */ jsx(PlaceholderValue, { children: placeholder });
+    }
+    return /* @__PURE__ */ jsx(PlaceholderValue, { children: "-" });
+  };
+  return /* @__PURE__ */ jsxs(DetailRow, { children: [
+    /* @__PURE__ */ jsxs(DetailLabel, { children: [
+      label,
+      tooltip && /* @__PURE__ */ jsx(InfoIcon, { containerStyle: { width: 14, height: 14 }, title: tooltip, noMargin: true })
+    ] }),
+    /* @__PURE__ */ jsx(DetailValue, { children: renderValue() })
+  ] });
+};
+const PaymentDetailsCard = ({
+  title,
+  amountSection,
+  details,
+  infoSection,
+  showSeparators = true,
+  containerStyle
+}) => {
+  const renderAmountSection = () => {
+    if (!amountSection) return null;
+    if (React__default.isValidElement(amountSection)) {
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        amountSection,
+        showSeparators && /* @__PURE__ */ jsx(Separator, {})
+      ] });
+    }
+    const { label = "Amount", amount, currency, currencyColor, icon } = amountSection;
+    const displayAmount = formatCurrencyValue(currency, amount, 2, {
+      valueFirst: true
+    });
+    const currencyIcon = getCurrencyIcon(currency, icon);
+    const logoColor = currencyColor || colors.black;
+    const renderCurrencyLogo = () => {
+      if (currencyIcon) {
+        return /* @__PURE__ */ jsx(CurrencyLogo, { color: "transparent", children: /* @__PURE__ */ jsx(CurrencyIcon, { src: currencyIcon, alt: currency || "currency" }) });
+      }
+      return /* @__PURE__ */ jsx(CurrencyLogo, { color: logoColor, children: currency ? currency.charAt(0).toUpperCase() : "" });
+    };
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(AmountSection, { children: [
+        /* @__PURE__ */ jsx(AmountLabel, { children: label }),
+        /* @__PURE__ */ jsxs(AmountDisplay, { children: [
+          renderCurrencyLogo(),
+          /* @__PURE__ */ jsx(AmountValue, { children: displayAmount })
+        ] })
+      ] }),
+      showSeparators && /* @__PURE__ */ jsx(Separator, {})
+    ] });
+  };
+  const renderDetailsSection = () => {
+    if (!details || details.length === 0) return null;
+    return /* @__PURE__ */ jsx(DetailsSection, { noMargin: !infoSection, children: details.map((detail, index) => /* @__PURE__ */ jsx(
+      DetailItem,
+      {
+        label: detail.label,
+        value: detail.value,
+        tooltip: detail.tooltip,
+        placeholder: detail.placeholder,
+        isCustom: detail.isCustom
+      },
+      detail.key || index
+    )) });
+  };
+  const renderInfoSection = () => {
+    if (!infoSection) return null;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      showSeparators && /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx(InfoSectionContainer, { children: infoSection })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(CardContainer, { style: containerStyle, children: [
+    title && /* @__PURE__ */ jsx(CardTitle, { children: title }),
+    renderAmountSection(),
+    renderDetailsSection(),
+    renderInfoSection()
+  ] });
+};
+export {
+  CurrencyLogo,
+  DetailItem,
+  DetailsSection,
+  PaymentDetailsCard
+};