@stokr/components-library 3.0.16 → 3.0.18

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