@stokr/components-library 3.0.16 → 3.0.18

package/dist/components/SpanButton/SpanButton.styles.js

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+const SpanButton = styled.span.withConfig({
+  shouldForwardProp: (props) => !["urlLink"].includes(props)
+})`
+  color: #0050ca;
+  cursor: pointer;
+  font-weight: 400;
+
+  ${(props) => props.urlLink && `
+    text-decoration: underline;
+  `}
+
+  &:hover {
+    color: #202020;
+  }
+`;
+export {
+  SpanButton
+};

package/dist/components/StatusBadge/StatusBadge.styles.js

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+import theme from "../../styles/theme.js";
+const StatusBadge = styled.div`
+  display: inline-block;
+  vertical-align: top;
+  padding: 0px 16px;
+  background-color: ${() => theme.cBlack};
+  color: ${() => theme.cWhite};
+  font-weight: 600;
+  font-size: 8px;
+  letter-spacing: 1.78px;
+  line-height: 16px;
+  border-radius: 8px;
+  margin-left: 12px;
+`;
+export {
+  StatusBadge
+};

package/dist/components/StatusTag/StatusTag.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { InfoIcon } from "../InfoIcon/InfoIcon.js";
+import { Icon, iconsMap } from "../Icon/Icon.style.js";
+import SvgTransferIcon from "../../static/images/transfer-icon.svg.js";
+import SvgCheckmarkCircleIcon from "../../static/images/checkmark-circle-icon.svg.js";
+import SvgCloseCircleIcon from "../../static/images/close-circle-icon.svg.js";
+import SvgAddFolderIcon from "../../static/images/add-folder-icon.svg.js";
+import { colors } from "../../styles/colors.js";
+import { StatusTagContainer, StatusTagWrapper, IconWrapper, StatusText } from "./StatusTag.styles.js";
+const variantConfig = {
+  pending: {
+    icon: /* @__PURE__ */ jsx(SvgAddFolderIcon, { width: 12, height: 12 }),
+    iconColor: "#021128",
+    hoverColor: "#021128",
+    disableHoverColor: true,
+    useStroke: true
+  },
+  initiated: {
+    icon: /* @__PURE__ */ jsx(Icon, { icon: iconsMap.inProgress, size: 11 }),
+    iconColor: "#032F78",
+    hoverColor: "#032F78",
+    disableHoverColor: false
+  },
+  confirmed: {
+    icon: /* @__PURE__ */ jsx(SvgCheckmarkCircleIcon, { width: 12, height: 12 }),
+    iconColor: colors.grey2,
+    hoverColor: colors.blue,
+    disableHoverColor: false
+  },
+  declined: {
+    icon: /* @__PURE__ */ jsx(SvgCloseCircleIcon, { width: 12, height: 12 }),
+    iconColor: colors.darkRed,
+    hoverColor: colors.darkRed,
+    disableHoverColor: false,
+    useStroke: true
+  },
+  paid: {
+    icon: /* @__PURE__ */ jsx(SvgTransferIcon, { width: 14, height: 14 }),
+    iconColor: "#3D9626",
+    hoverColor: "#3D9626",
+    disableHoverColor: false
+  }
+};
+const StatusTag = ({
+  variant,
+  icon,
+  text,
+  tooltip,
+  tooltipProps,
+  iconColor,
+  hoverColor,
+  disableHoverColor,
+  colorActive,
+  minWidth,
+  className,
+  containerStyle,
+  iconStyle,
+  textStyle,
+  onClick,
+  center,
+  ...props
+}) => {
+  const variantData = variant ? variantConfig[variant] : null;
+  const finalIconColor = iconColor !== void 0 ? iconColor : variantData?.iconColor || colors.grey2;
+  const finalHoverColor = hoverColor !== void 0 ? hoverColor : variantData?.hoverColor;
+  const finalDisableHoverColor = disableHoverColor !== void 0 ? disableHoverColor : variantData?.disableHoverColor ?? false;
+  let finalIcon = null;
+  if (icon) {
+    finalIcon = icon;
+  } else if (variantData?.icon) {
+    finalIcon = variantData.icon;
+  }
+  const content = /* @__PURE__ */ jsx(StatusTagContainer, { className, style: containerStyle, onClick, hasClick: !!onClick, ...props, children: /* @__PURE__ */ jsxs(StatusTagWrapper, { minWidth, center, children: [
+    finalIcon && /* @__PURE__ */ jsx(
+      IconWrapper,
+      {
+        iconColor: finalIconColor,
+        hoverColor: finalHoverColor,
+        disableHoverColor: finalDisableHoverColor,
+        colorActive,
+        useStroke: variantData?.useStroke,
+        style: iconStyle,
+        children: finalIcon
+      }
+    ),
+    text && /* @__PURE__ */ jsx(
+      StatusText,
+      {
+        style: textStyle,
+        hoverColor: finalHoverColor,
+        disableHoverColor: finalDisableHoverColor,
+        colorActive,
+        children: text
+      }
+    )
+  ] }) });
+  if (tooltip) {
+    return /* @__PURE__ */ jsx(InfoIcon, { title: tooltip, position: "top", noIcon: true, noMarginLeft: true, noMarginRight: true, ...tooltipProps, children: content });
+  }
+  return content;
+};
+export {
+  StatusTag
+};

package/dist/components/StatusTag/StatusTag.styles.js

@@ -0,0 +1,88 @@
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+const StatusTagContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["hasClick"].includes(props)
+})`
+  display: inline-flex;
+  cursor: ${(props) => props.hasClick ? "pointer" : "default"};
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: ${(props) => props.hasClick ? 0.8 : 1};
+  }
+`;
+const StatusTagWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["minWidth", "center"].includes(props)
+})`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 8px;
+  background-color: transparent;
+  border: 1px solid ${colors.lightGrey};
+  border-radius: 6px;
+  white-space: nowrap;
+  min-width: ${(props) => props.minWidth || "auto"};
+  justify-content: ${(props) => props.center ? "center" : "flex-start"};
+`;
+const IconWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["colorActive", "hoverColor", "iconColor", "useStroke", "disableHoverColor"].includes(props)
+})`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  color: ${(props) => props.colorActive && props.hoverColor ? props.hoverColor : props.iconColor || colors.grey2};
+  transition: color 0.2s ease;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  /* Apply color to SVG - use stroke for stroke-based icons, fill for others */
+  svg path,
+  svg circle,
+  svg rect,
+  svg line {
+    ${(props) => props.useStroke ? `
+      stroke: currentColor;
+      fill: none;
+    ` : `
+      fill: currentColor;
+    `}
+  }
+
+  /* Hover color change - only if not disabled and not already active */
+  ${(props) => !props.disableHoverColor && !props.colorActive && props.hoverColor && `
+    ${StatusTagContainer}:hover & {
+      color: ${props.hoverColor};
+    }
+  `}
+`;
+const StatusText = styled.span.withConfig({
+  shouldForwardProp: (props) => !["colorActive", "hoverColor", "disableHoverColor"].includes(props)
+})`
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 18px;
+  color: ${(props) => props.colorActive && props.hoverColor ? props.hoverColor : colors.black};
+  letter-spacing: 0.6px;
+  transition: color 0.2s ease;
+
+  /* Hover color change - only if not disabled and not already active */
+  ${(props) => !props.disableHoverColor && !props.colorActive && props.hoverColor && `
+    ${StatusTagContainer}:hover & {
+      color: ${props.hoverColor};
+    }
+  `}
+`;
+export {
+  IconWrapper,
+  StatusTagContainer,
+  StatusTagWrapper,
+  StatusText
+};

package/dist/components/StepController/StepController.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React__default, { PureComponent, Fragment } from "react";
+import PropTypes from "prop-types";
+import { Transition } from "../../utils/transition.js";
+import { StepsProgressContainer, StepContainer } from "./StepController.styles.js";
+import stdin_default$1 from "./StepControllerProgress.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
+  }
+};
+class StepController extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.stepRef = React__default.createRef();
+  }
+  componentDidMount() {
+    const { changeStep, stepsProgressList } = this.props;
+    changeStep(stepsProgressList[0].id);
+  }
+  render() {
+    const { children, stepsProgressList, currentStep, activeStepIndex, doneStepsIndexes, touchedStepsIndexes } = this.props;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(StepsProgressContainer, { children: /* @__PURE__ */ jsx(
+        stdin_default$1,
+        {
+          activeStepIndex,
+          doneStepsIndexes,
+          touchedStepsIndexes,
+          stepsProgressList
+        }
+      ) }),
+      /* @__PURE__ */ jsx(StepContainer, { children: /* @__PURE__ */ jsx(
+        Transition,
+        {
+          timeout: {
+            enter: timeout,
+            exit: timeout
+          },
+          nodeRef: this.stepRef,
+          children: (status) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              ref: this.stepRef,
+              style: {
+                height: "100%",
+                ...getTransitionStyles[status]
+              },
+              children: React__default.Children.map(children, (child) => {
+                if (child.props.id === currentStep && React__default.isValidElement(child)) {
+                  return /* @__PURE__ */ jsx(Fragment, { children: child }, child.props.id);
+                }
+                return null;
+              })
+            }
+          )
+        },
+        currentStep
+      ) })
+    ] });
+  }
+}
+StepController.propTypes = {
+  children: PropTypes.node.isRequired,
+  stepsProgressList: PropTypes.instanceOf(Array).isRequired,
+  currentStep: PropTypes.string.isRequired,
+  activeStepIndex: PropTypes.number.isRequired,
+  touchedStepsIndexes: PropTypes.arrayOf(PropTypes.number).isRequired,
+  doneStepsIndexes: PropTypes.arrayOf(PropTypes.number).isRequired,
+  changeStep: PropTypes.func.isRequired
+};
+var stdin_default = StepController;
+export {
+  StepController,
+  stdin_default as default
+};

package/dist/components/StepController/StepController.styles.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import rwd from "../../styles/rwd.js";
+import theme from "../../styles/theme.js";
+const StepsProgressContainer = styled.div`
+  position: relative;
+  width: 100%;
+  height: 40px;
+  padding: 4px 0;
+  box-shadow: 0 1px 0 0 ${() => theme.cLightGrey};
+
+  ${rwd.Medium`
+    height: 56px;
+    padding: 12px 0;
+  `}
+`;
+const StepContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["heightLimited"].includes(props)
+})`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+
+  ${rwd.Medium`
+    ${(props) => props.heightLimited && `
+      height: 80vh;
+    `}
+  `}
+`;
+export {
+  StepContainer,
+  StepsProgressContainer
+};

package/dist/components/StepController/StepControllerContext.js

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { Component } from "react";
+import PropTypes from "prop-types";
+const StepControllerContext = React__default.createContext();
+class StepControllerProvider extends Component {
+  state = {
+    currentStep: "",
+    prevStep: "",
+    prevStepIndex: null,
+    activeStepIndex: 0,
+    doneStepsIndexes: [],
+    touchedStepsIndexes: []
+  };
+  changeStep = (stepName, activeStep = null, doneStep = null) => {
+    const { activeStepIndex, doneStepsIndexes, touchedStepsIndexes } = this.state;
+    const nextActiveStep = activeStep === null ? activeStepIndex : activeStep;
+    const nextDoneStepIndexes = doneStepsIndexes.slice();
+    const nextTouchedStepsIndexes = touchedStepsIndexes.slice();
+    let emptyDoneStep;
+    if (doneStep !== null && !nextDoneStepIndexes.includes(doneStep)) {
+      nextDoneStepIndexes.push(doneStep);
+    }
+    if (!nextTouchedStepsIndexes.includes(nextActiveStep)) {
+      nextTouchedStepsIndexes.push(nextActiveStep);
+    }
+    if (Array.isArray(doneStep) && doneStep.length === 0) {
+      emptyDoneStep = [];
+    }
+    this.setState(() => ({
+      currentStep: stepName,
+      activeStepIndex: nextActiveStep,
+      doneStepsIndexes: emptyDoneStep || nextDoneStepIndexes,
+      touchedStepsIndexes: nextTouchedStepsIndexes
+    }));
+  };
+  setPrevStep = (prevStep, prevStepIndex = null) => {
+    this.setState({
+      prevStep,
+      prevStepIndex
+    });
+  };
+  render() {
+    const { children } = this.props;
+    return /* @__PURE__ */ jsx(
+      StepControllerContext.Provider,
+      {
+        value: {
+          ...this.state,
+          changeStep: this.changeStep,
+          setPrevStep: this.setPrevStep
+        },
+        children
+      }
+    );
+  }
+}
+StepControllerProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+const StepControllerConsumer = StepControllerContext.Consumer;
+export {
+  StepControllerConsumer,
+  StepControllerContext,
+  StepControllerProvider
+};

package/dist/components/StepController/StepControllerProgress.js

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { Container, Wrap, Items, Item } from "../StepsProgress/StepsProgress.styles.js";
+const StepControllerProgress = ({
+  touchedStepsIndexes,
+  doneStepsIndexes,
+  activeStepIndex,
+  stepsProgressList
+}) => {
+  const handleItemClick = (item, key) => {
+    if (touchedStepsIndexes.includes(key)) {
+      item.handleClick(item.id);
+    }
+  };
+  const timestamp = (/* @__PURE__ */ new Date()).getTime();
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Wrap, { children: /* @__PURE__ */ jsx(Items, { children: stepsProgressList.map((item, key) => /* @__PURE__ */ jsx(
+    Item,
+    {
+      isDone: doneStepsIndexes.includes(key),
+      isActive: key === activeStepIndex,
+      onClick: () => handleItemClick(item, key)
+    },
+    `${timestamp}-${key.toString()}`
+  )) }) }) });
+};
+StepControllerProgress.propTypes = {
+  touchedStepsIndexes: PropTypes.arrayOf(PropTypes.number).isRequired,
+  doneStepsIndexes: PropTypes.arrayOf(PropTypes.number).isRequired,
+  activeStepIndex: PropTypes.number.isRequired,
+  stepsProgressList: PropTypes.instanceOf(Array).isRequired
+};
+var stdin_default = StepControllerProgress;
+export {
+  StepControllerProgress,
+  stdin_default as default
+};

package/dist/components/StepsProgress/StepIndicator.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import PropTypes from "prop-types";
+import { StepIndicatorContainer, StepItem, StepCircle, StepLabel, StepConnector } from "./StepIndicator.styles.js";
+import SvgCheckIcon from "../../static/images/check-icon.svg.js";
+const StepIndicator = ({ steps, currentStep, onStepClick = null, showLabels = true, marginBottom = "32px" }) => {
+  return /* @__PURE__ */ jsx(StepIndicatorContainer, { marginBottom, children: steps.map((step, index) => {
+    const isCompleted = index < currentStep;
+    const isActive = index === currentStep;
+    return /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        StepItem,
+        {
+          onClick: () => onStepClick && onStepClick(index),
+          style: { cursor: onStepClick ? "pointer" : "default" },
+          children: [
+            /* @__PURE__ */ jsx(StepCircle, { isCompleted, isActive, children: isCompleted ? /* @__PURE__ */ jsx(SvgCheckIcon, { width: 14, height: 11 }) : index + 1 }),
+            showLabels && /* @__PURE__ */ jsx(StepLabel, { children: step.label })
+          ]
+        }
+      ),
+      index < steps.length - 1 && /* @__PURE__ */ jsx(StepConnector, { isCompleted })
+    ] }, step.id);
+  }) });
+};
+StepIndicator.propTypes = {
+  steps: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired
+    })
+  ).isRequired,
+  currentStep: PropTypes.number.isRequired,
+  onStepClick: PropTypes.func,
+  showLabels: PropTypes.bool,
+  marginBottom: PropTypes.string
+};
+export {
+  StepIndicator
+};

package/dist/components/StepsProgress/StepIndicator.styles.js

@@ -0,0 +1,69 @@
+import styled, { css } from "styled-components";
+import { colors } from "../../styles/colors.js";
+const StepIndicatorContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["marginBottom"].includes(props)
+})`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: ${(props) => props.marginBottom || "32px"};
+`;
+const StepItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const StepCircle = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isCompleted", "isActive"].includes(props)
+})`
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: 600;
+  transition: all 0.2s ease;
+
+  ${(props) => props.isCompleted && css`
+      background-color: ${colors.progressGreen};
+      color: ${colors.white};
+
+      svg path {
+        stroke: ${colors.white};
+      }
+    `}
+
+  ${(props) => props.isActive && !props.isCompleted && css`
+      background-color: ${colors.black};
+      color: ${colors.white};
+    `}
+
+  ${(props) => !props.isActive && !props.isCompleted && css`
+      background-color: ${colors.grey};
+      color: ${colors.black};
+    `}
+`;
+const StepLabel = styled.span`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  word-wrap: break-word;
+`;
+const StepConnector = styled.div.withConfig({
+  shouldForwardProp: (props) => !["isCompleted"].includes(props)
+})`
+  flex: 1;
+  height: 2px;
+  max-width: 80px;
+  background-color: ${(props) => props.isCompleted ? colors.progressGreen : colors.grey};
+`;
+export {
+  StepCircle,
+  StepConnector,
+  StepIndicatorContainer,
+  StepItem,
+  StepLabel
+};

package/dist/components/StepsProgress/StepsProgress.js

@@ -0,0 +1,67 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { useNavigate } from "react-router-dom";
+import { Container, Wrap, Items, Item } from "./StepsProgress.styles.js";
+import { walletTypes } from "../../constants/globalVariables.js";
+const StepsProgressSignup = (props) => {
+  let navigate = useNavigate();
+  const { user = {} } = props;
+  const { country, kyc_status, taxId, wallets = [] } = user;
+  const KYCNotDone = !kyc_status || kyc_status === "Reaply" || kyc_status === "Cancelled" || kyc_status === "Draft";
+  const hasLiquidWallet = wallets?.filter((wallet) => wallet.type === walletTypes.LIQUID).length > 0;
+  const isActiveStep = (path) => window.location.pathname.includes(path);
+  const items = [
+    {
+      id: "country",
+      handleClick: () => navigate("/country-of-residence"),
+      isDone: !!country,
+      isActive: isActiveStep("/country-of-residence")
+    },
+    {
+      id: "verify",
+      handleClick: () => navigate("/verify-identity"),
+      isDone: !KYCNotDone,
+      isActive: isActiveStep("/verify-identity")
+    },
+    {
+      id: "taxId",
+      handleClick: () => navigate("/taxid"),
+      isDone: !!taxId,
+      isActive: isActiveStep("/taxid")
+    },
+    {
+      id: "ampID",
+      handleClick: () => navigate("/register-liquid-securities"),
+      isDone: hasLiquidWallet,
+      isActive: isActiveStep("/register-liquid-securities")
+    }
+  ];
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Wrap, { children: /* @__PURE__ */ jsx(Items, { children: items.map((item) => /* @__PURE__ */ jsx(
+    Item,
+    {
+      isDone: item.isDone,
+      isActive: item.isActive,
+      onClick: () => {
+        if (item.handleClick) {
+          item.handleClick(item.id);
+        }
+      }
+    },
+    item.id
+  )) }) }) });
+};
+const StepsProgressHeader = ({ items, doneIndex, activeIndex }) => /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(Wrap, { children: /* @__PURE__ */ jsx(Items, { children: items?.map((item, key) => /* @__PURE__ */ jsx(
+  Item,
+  {
+    isDone: key <= doneIndex,
+    isActive: key === activeIndex,
+    onClick: () => {
+      item.handleClick?.(item.id);
+    }
+  },
+  item.id
+)) }) }) });
+export {
+  StepsProgressHeader,
+  StepsProgressSignup
+};