@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/Chips/Chip.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { StyledChip, ChipText } from "./Chip.styles.js";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+const Chip = ({ children, isActive = false, onClick = () => {
+}, tooltip = null, tooltipProps, ...props }) => {
+  return /* @__PURE__ */ jsxs(StyledChip, { onClick, isActive, ...props, children: [
+    /* @__PURE__ */ jsx(ChipText, { children }),
+    tooltip && /* @__PURE__ */ jsx(InfoIcon, { title: tooltip, position: "top", noMarginLeft: true, noMarginRight: true, ...tooltipProps })
+  ] });
+};
+Chip.propTypes = {
+  children: PropTypes.node.isRequired,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  tooltip: PropTypes.string
+};
+var stdin_default = Chip;
+export {
+  Chip,
+  stdin_default as default
+};

package/dist/components/Chips/Chip.styles.js

@@ -0,0 +1,72 @@
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+import { Icon } from "../InfoIcon/InfoIcon.styles.js";
+const StyledChip = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isActive"].includes(props)
+})`
+  display: inline-flex;
+  gap: 4px;
+  align-items: center;
+  padding: 8px 16px;
+  border-radius: 20px;
+  background-color: transparent;
+  color: black;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 3px;
+  font-weight: 600;
+  min-height: 40px;
+
+  &:hover,
+  &:active {
+    background-color: red;
+    color: white;
+
+    ${Icon} {
+      color: ${theme.cWhite};
+    }
+  }
+
+  ${({ isActive }) => isActive && `
+      background-color: red;
+      color: white;
+      font-weight: 800;
+
+      ${Icon} {
+        color: ${theme.cWhite} ;
+      }
+    `}
+`;
+const Wrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["customWrapperStyle"].includes(props)
+})`
+  display: flex;
+  gap: 32px;
+  ${({ customWrapperStyle }) => customWrapperStyle}
+`;
+const ChipText = styled.span`
+  text-transform: uppercase;
+`;
+styled.i.attrs({
+  className: "ion ion-md-information-circle-outline"
+})`
+  position: relative;
+  display: inline-block;
+  font-size: 16px;
+  line-height: 16px;
+  vertical-align: middle;
+  color: ${theme.cGrey2};
+  transition: color 0.2s;
+
+  ${StyledChip}:hover & {
+    color: ${theme.cWhite};
+  }
+`;
+export {
+  ChipText,
+  StyledChip,
+  Wrapper
+};

package/dist/components/Chips/ChipWrapper.js

@@ -0,0 +1,50 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import PropTypes from "prop-types";
+import stdin_default from "./Chip.js";
+import { Wrapper } from "./Chip.styles.js";
+import { Scroll } from "../TabsNav/TabsNav.styles.js";
+const ChipsWrapper = ({
+  chips,
+  onActiveChipChange = () => {
+  },
+  customWrapperStyle,
+  tooltipProps,
+  scrollStyles,
+  ...props
+}) => {
+  const [activeChip, setActiveChip] = useState(() => {
+    const initialActiveIndex = chips.findIndex((chip) => chip.isActive);
+    return initialActiveIndex !== -1 ? initialActiveIndex : null;
+  });
+  const handleChipClick = (index) => {
+    setActiveChip(index);
+    onActiveChipChange?.(index);
+  };
+  return /* @__PURE__ */ jsx(Scroll, { style: scrollStyles, children: /* @__PURE__ */ jsx(Wrapper, { customWrapperStyle, children: chips.map((chip, index) => /* @__PURE__ */ jsx(
+    stdin_default,
+    {
+      isActive: activeChip === index,
+      onClick: () => handleChipClick(index),
+      tooltip: chip.tooltip,
+      tooltipProps,
+      ...props,
+      children: chip.label
+    },
+    `chip-${index.toString()}`
+  )) }) });
+};
+ChipsWrapper.propTypes = {
+  chips: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      tooltip: PropTypes.string,
+      isActive: PropTypes.bool
+    })
+  ).isRequired,
+  onActiveChipChange: PropTypes.func,
+  customWrapperStyle: PropTypes.object
+};
+export {
+  ChipsWrapper
+};

package/dist/components/ComponentScroll/ComponentScroll.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { Scrollbars } from "react-custom-scrollbars-2";
+import { Container, Outer, Inner, ThumbV, TrackV, ThumbH, TrackH } from "./ComponentScroll.styles.js";
+const ComponentScroll = (props) => {
+  const {
+    children,
+    noMobileScroll = false,
+    autoHeight = false,
+    autoHeightMax = 0,
+    autoHeightMin = 0,
+    offset = 0,
+    barPadding = 32,
+    topPadding = 0,
+    className = "",
+    handleScroll = null,
+    fullHeight
+  } = props;
+  const scrollRef = useRef();
+  useEffect(() => {
+    if (scrollRef.current) {
+      handleScroll?.({}, scrollRef.current);
+    }
+  }, []);
+  const onMouseMove = () => {
+  };
+  const handleScrollFrame = (values) => {
+    if (values) {
+      handleScroll?.(values, scrollRef.current);
+    }
+  };
+  return /* @__PURE__ */ jsx(Container, { className, noMobileScroll, isMobile: true, fullHeight, children: /* @__PURE__ */ jsx(Outer, { offset, barPadding, topPadding, children: /* @__PURE__ */ jsx(
+    Scrollbars,
+    {
+      ref: scrollRef,
+      style: { height: "100%" },
+      renderTrackHorizontal: (_props) => /* @__PURE__ */ jsx(TrackH, { ..._props }),
+      renderThumbHorizontal: (_props) => /* @__PURE__ */ jsx(ThumbH, { ..._props }),
+      renderTrackVertical: (_props) => /* @__PURE__ */ jsx(TrackV, { ..._props }),
+      renderThumbVertical: (_props) => /* @__PURE__ */ jsx(ThumbV, { ..._props }),
+      hideTracksWhenNotNeeded: true,
+      onMouseMove,
+      onScrollFrame: handleScrollFrame,
+      autoHeight,
+      autoHeightMax,
+      autoHeightMin,
+      universal: true,
+      autoHide: true,
+      children: /* @__PURE__ */ jsx(Inner, { offset, children })
+    }
+  ) }) });
+};
+ComponentScroll.propTypes = {
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  noMobileScroll: PropTypes.bool,
+  autoHeight: PropTypes.bool,
+  autoHeightMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  autoHeightMin: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  barPadding: PropTypes.number,
+  topPadding: PropTypes.number,
+  offset: PropTypes.number,
+  handleScroll: PropTypes.func
+};
+var stdin_default = ComponentScroll;
+export {
+  ComponentScroll,
+  stdin_default as default
+};

package/dist/components/ComponentScroll/ComponentScroll.styles.js

@@ -0,0 +1,127 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const Container = styled.div.withConfig({
+  shouldForwardProp: (props) => !["fullHeight", "noMobileScroll", "isMobile"].includes(props)
+})`
+  position: relative;
+  height: 364px;
+  width: 100%;
+  display: flex;
+
+  @media screen and (max-width: 767px) {
+    height: ${({ isMobile }) => isMobile ? "100%" : "364px"};
+  }
+
+  ${(props) => props.fullHeight && css`
+      height: 100%;
+    `}
+
+  ${(props) => props.noMobileScroll && css`
+      & > div > div {
+        overflow: visible !important;
+
+        > div:first-child {
+          overflow: visible !important;
+        }
+      }
+
+      ${rwd.Medium`
+      & > div > div {
+        overflow: hidden !important;
+
+        > div:first-child {
+          overflow: scroll !important;  
+        }
+      }
+    `}
+    `}
+`;
+const TrackH = styled.div`
+  background-color: ${() => theme.cGrey};
+  left: 16px;
+  right: 16px;
+  bottom: 14px;
+  height: 4px;
+  border-radius: 4px;
+
+  ${rwd.Large`
+    left: 32px;
+    right: 32px;
+    bottom: 30px;
+  `}
+`;
+const ThumbH = styled.div`
+  background-color: ${() => theme.cWarning};
+  height: 4px;
+  border-radius: 4px;
+`;
+const TrackV = styled.div`
+  background-color: ${() => theme.cGrey};
+  top: 16px;
+  bottom: 16px;
+  right: 14px;
+  width: 4px;
+  border-radius: 4px;
+
+  ${rwd.Large`
+    top: 32px;
+    bottom: 32px;
+    right: 30px;
+  `}
+`;
+const ThumbV = styled.div`
+  background-color: ${() => theme.cWarning};
+  width: 4px;
+  border-radius: 4px;
+`;
+const Outer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["offset", "barPadding", "topPadding"].includes(props)
+})`
+  position: relative;
+  flex-grow: 1;
+  max-height: 100%;
+  max-width: 100%;
+
+  ${(props) => props.barPadding > -1 && props.offset && `
+    margin-right: ${props.offset}px;
+    margin-bottom: ${props.offset}px;
+
+    ${TrackH} {
+      left: ${props.barPadding}px;
+      right: ${props.barPadding - props.offset}px;
+      bottom: 0;
+    }
+
+    ${TrackV} {
+      top: ${props.barPadding}px;
+      bottom: ${props.barPadding - props.offset}px;
+      right: 0;
+    }
+  `}
+
+  ${(props) => props.topPadding !== 0 && `
+    ${TrackV} {
+      top: ${props.topPadding}px;
+    }
+  `}
+`;
+const Inner = styled.div.withConfig({
+  shouldForwardProp: (props) => !["offset"].includes(props)
+})`
+  position: relative;
+
+  ${(props) => props.offset && `
+    padding-right: ${-props.offset}px;
+    padding-bottom: ${-props.offset}px;
+  `}
+`;
+export {
+  Container,
+  Inner,
+  Outer,
+  ThumbH,
+  ThumbV,
+  TrackH,
+  TrackV
+};

package/dist/components/ComponentWrapper/ComponentWrapper.styles.js

@@ -0,0 +1,165 @@
+import styled, { css } from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const ComponentWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => ![
+    "borderLeft",
+    "borderRight",
+    "borderTop",
+    "borderBottom",
+    "noPaddingLeft",
+    "noPaddingRight",
+    "noPaddingBottom",
+    "noPaddingTop",
+    "noPaddingVertical",
+    "horizontalPaddingHalf",
+    "noPaddingHorizontal",
+    "paddingVeticalHalf",
+    "noPadding",
+    "center",
+    "grow",
+    "wrap",
+    "background",
+    "fluid",
+    "fluidcenter",
+    "titleHalf",
+    "investmentNotifications",
+    "alignVertically",
+    "marginTop",
+    "isAddMember",
+    "flex"
+  ].includes(props)
+})`
+  position: relative;
+  padding: 32px;
+  // text-align left only from ID
+  text-align: left !important;
+
+  ${rwd.Large`
+    padding: 32px 64px;
+  `}
+
+  ${(props) => props.borderLeft && css`
+      border-left: 1px solid ${theme.cLightGrey};
+    `}
+
+  ${(props) => props.borderRight && css`
+      border-right: 1px solid ${theme.cLightGrey};
+    `}
+
+  ${(props) => props.borderTop && css`
+      border-top: 1px solid ${theme.cLightGrey};
+    `}
+
+  ${(props) => props.borderBottom && css`
+      border-bottom: 1px solid ${theme.cLightGrey};
+    `}
+
+  ${(props) => props.noPaddingLeft && css`
+      padding-left: 0 !important;
+    `}
+
+  ${(props) => props.noPaddingRight && css`
+      padding-right: 0 !important;
+    `}
+
+  ${(props) => props.noPaddingTop && css`
+      padding-top: 0 !important;
+    `}
+
+  ${(props) => props.noPaddingBottom && css`
+      padding-bottom: 0 !important;
+    `}
+
+  ${(props) => props.noPaddingVertical && css`
+      padding-top: 0 !important;
+      padding-bottom: 0 !important;
+    `}
+
+  ${(props) => props.horizontalPaddingHalf && css`
+      padding-left: 18px !important;
+      padding-right: 18px !important;
+    `}
+
+  ${(props) => props.noPaddingHorizontal && css`
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    `}
+
+  ${(props) => props.paddingVeticalHalf && css`
+      padding-top: 16px !important;
+      padding-bottom: 16px !important;
+    `}
+
+  ${(props) => props.noPadding && css`
+      padding: 0 !important;
+    `}
+
+  ${(props) => props.center && css`
+      text-align: center !important;
+    `}
+
+  ${(props) => props.grow && css`
+      flex-grow: 1;
+    `}
+
+  ${(props) => props.wrap && css`
+      flex-wrap: wrap;
+    `}
+
+  ${(props) => props.background && css`
+      background-color: ${theme.cGrey};
+    `}
+
+  ${(props) => props.fluid && css`
+      width: 100%;
+    `}
+    
+      ${(props) => props.fluidcenter && css`
+      width: 100% !important;
+      text-align: center !important;
+    `}
+  
+  ${(props) => props.titleHalf && css`
+      h4 {
+        width: 50%;
+
+        @media screen and (max-width: 767px) {
+          width: 100%;
+        }
+      }
+    `}
+
+  @media screen and (max-width: 767px) {
+    padding: 32px;
+
+    ${(props) => props.investmentNotifications && css`
+        padding: 0;
+      `}
+  }
+
+  ${(props) => props.alignVertically && css`
+      display: flex;
+      align-items: center;
+    `}
+
+  ${(props) => props.marginTop && css`
+      margin-top: ${props.marginTop};
+    `}
+
+    ${(props) => props.isAddMember && css`
+      @media screen and (min-width: 768px) {
+        padding-left: 10px !important;
+        padding-right: 10px !important;
+      }
+    `}
+
+   ${(props) => props.flex && `
+          display:flex;
+          align-items: center;
+      `}
+`;
+export {
+  ComponentWrapper,
+  ComponentWrapper as default
+};

package/dist/components/ConfirmModal/ConfirmModal.js

@@ -0,0 +1,199 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { Text } from "../Text/Text.styles.js";
+import { createRoot } from "react-dom/client";
+import { Button } from "../Button/Button.styles.js";
+import { Modal } from "../Modal/Modal.js";
+import { ContainerWithLine, RedBar } from "./ConfirmModal.styles.js";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { ComponentWrapper } from "../ComponentWrapper/ComponentWrapper.styles.js";
+import { ModalInner } from "../Modal/Modal.styles.js";
+let confirmContainer = null;
+let confirmRoot = null;
+const ConfirmModalComponent = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  onCancel,
+  title,
+  message,
+  content,
+  confirmText,
+  cancelText,
+  showCancel,
+  showRedBar,
+  lineColor,
+  barColor,
+  renderFooter,
+  modalProps,
+  buttonProps,
+  cancelButtonProps,
+  barStyle,
+  maxWidth,
+  modalStyles,
+  innerModalStyles
+}) => {
+  const [titleHeight, setTitleHeight] = useState(0);
+  const observerRef = useRef(null);
+  const titleRef = useCallback((node) => {
+    if (observerRef.current) {
+      observerRef.current.disconnect();
+      observerRef.current = null;
+    }
+    if (node) {
+      setTitleHeight(node.offsetHeight);
+      observerRef.current = new ResizeObserver(() => {
+        setTitleHeight(node.offsetHeight);
+      });
+      observerRef.current.observe(node);
+    }
+  }, []);
+  const handleConfirm = useCallback(
+    (value = true) => {
+      onConfirm?.(value);
+    },
+    [onConfirm]
+  );
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    onClose?.();
+  }, [onCancel, onClose]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        handleCancel();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, handleCancel]);
+  return /* @__PURE__ */ jsxs(
+    Modal,
+    {
+      isOpen,
+      onClose: handleCancel,
+      maxHeight: "90vh",
+      boxStyles: { minHeight: "unset", ...modalStyles || {} },
+      maxWidth,
+      ...modalProps,
+      children: [
+        /* @__PURE__ */ jsx(ModalInner, { style: innerModalStyles, children: /* @__PURE__ */ jsxs(ContainerWithLine, { height: titleHeight, lineColor, children: [
+          /* @__PURE__ */ jsxs(Text, { children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              title && /* @__PURE__ */ jsx("h3", { ref: titleRef, style: { margin: 0 }, children: title }),
+              message && /* @__PURE__ */ jsx("p", { children: message })
+            ] }),
+            content && /* @__PURE__ */ jsx("div", { style: { marginTop: "16px" }, children: content })
+          ] }),
+          renderFooter ? /* @__PURE__ */ jsx(Fragment, { children: renderFooter({
+            onConfirm: handleConfirm,
+            onCancel: handleCancel
+          }) }) : /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingHorizontal: true, flex: true, style: { gap: 16 }, children: [
+            showCancel && /* @__PURE__ */ jsx(Button, { outlineBlack: true, minWidth: "120px", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
+            /* @__PURE__ */ jsx(Button, { minWidth: "120px", onClick: () => handleConfirm(true), ...buttonProps, children: confirmText })
+          ] }),
+          message && /* @__PURE__ */ jsx("p", { children: message }),
+          content && /* @__PURE__ */ jsx("div", { style: { marginTop: "16px" }, children: content }),
+          renderFooter ? /* @__PURE__ */ jsx(ComponentWrapper, { children: renderFooter({
+            onConfirm: handleConfirm,
+            onCancel: handleCancel
+          }) }) : /* @__PURE__ */ jsxs(ComponentWrapper, { noPaddingHorizontal: true, flex: true, style: { gap: 16 }, children: [
+            showCancel && /* @__PURE__ */ jsx(Button, { outlineBlack: true, minWidth: "120px", onClick: handleCancel, ...cancelButtonProps, children: cancelText }),
+            /* @__PURE__ */ jsx(Button, { minWidth: "120px", onClick: () => handleConfirm(true), ...buttonProps, children: confirmText })
+          ] })
+        ] }) }),
+        showRedBar && /* @__PURE__ */ jsx(RedBar, { barColor, style: barStyle })
+      ]
+    }
+  );
+};
+const confirm = (options = {}) => {
+  const {
+    title = "Confirm",
+    message = "",
+    content = null,
+    confirmText = "Confirm",
+    cancelText = "Cancel",
+    showCancel = true,
+    showRedBar = true,
+    lineColor,
+    barColor,
+    renderFooter = null,
+    modalProps = {},
+    buttonProps = {},
+    cancelButtonProps = {},
+    modalStyles,
+    innerModalStyles
+  } = options;
+  return new Promise((resolve) => {
+    if (!confirmContainer) {
+      confirmContainer = document.createElement("div");
+      confirmContainer.id = "confirm-modal-root";
+      document.body.appendChild(confirmContainer);
+      confirmRoot = createRoot(confirmContainer);
+    }
+    let isResolved = false;
+    const handleConfirm = (value) => {
+      if (!isResolved) {
+        isResolved = true;
+        resolve(value);
+        renderModal(false);
+        setTimeout(() => {
+          renderModal(null);
+        }, 350);
+      }
+    };
+    const handleCancel = () => {
+      if (!isResolved) {
+        isResolved = true;
+        resolve(false);
+        renderModal(false);
+        setTimeout(() => {
+          renderModal(null);
+        }, 350);
+      }
+    };
+    const handleClose = () => {
+      if (!isResolved) {
+        handleCancel();
+      }
+    };
+    const renderModal = (isOpen) => {
+      if (isOpen === null) {
+        confirmRoot.render(null);
+        return;
+      }
+      confirmRoot.render(
+        /* @__PURE__ */ jsx(
+          ConfirmModalComponent,
+          {
+            isOpen,
+            onClose: handleClose,
+            onConfirm: handleConfirm,
+            onCancel: handleCancel,
+            title,
+            message,
+            content,
+            confirmText,
+            cancelText,
+            showCancel,
+            showRedBar,
+            lineColor,
+            barColor,
+            renderFooter,
+            modalProps,
+            buttonProps,
+            cancelButtonProps,
+            modalStyles,
+            innerModalStyles
+          }
+        )
+      );
+    };
+    renderModal(true);
+  });
+};
+export {
+  ConfirmModalComponent as ConfirmModal,
+  confirm
+};