@stokr/components-library 3.0.16 → 3.0.17

package/dist/components/Snackbar/Snackbar.styles.js

@@ -0,0 +1,230 @@
+import styled, { keyframes, css } from "styled-components";
+import { colors } from "../../styles/colors.js";
+const slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+`;
+const slideInLeft = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+const slideInUp = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const slideInDown = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const progressExpire = keyframes`
+  from {
+    width: 100%;
+  }
+  to {
+    width: 0%;
+  }
+`;
+const variantStyles = {
+  info: {
+    borderColor: colors.blue,
+    iconColor: colors.blue
+  },
+  error: {
+    borderColor: colors.orangishRed,
+    iconColor: colors.orangishRed
+  },
+  success: {
+    borderColor: colors.progressAccentStart,
+    iconColor: colors.progressAccentStart
+  },
+  warning: {
+    borderColor: colors.warningOrange,
+    iconColor: colors.warningOrange
+  }
+};
+const positionStyles = {
+  "top-right": css`
+    top: 20px;
+    right: 20px;
+    animation: ${slideIn} 0.3s ease-out forwards;
+  `,
+  "top-left": css`
+    top: 20px;
+    left: 20px;
+    animation: ${slideInLeft} 0.3s ease-out forwards;
+  `,
+  "top-center": css`
+    top: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: ${slideInDown} 0.3s ease-out forwards;
+  `,
+  "bottom-right": css`
+    bottom: 20px;
+    right: 20px;
+    animation: ${slideIn} 0.3s ease-out forwards;
+  `,
+  "bottom-left": css`
+    bottom: 20px;
+    left: 20px;
+    animation: ${slideInLeft} 0.3s ease-out forwards;
+  `,
+  "bottom-center": css`
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    animation: ${slideInUp} 0.3s ease-out forwards;
+  `
+};
+const SnackbarContainer = styled.div.withConfig({
+  shouldForwardProp: (props) => !["$isContained", "$position"].includes(props)
+})`
+  position: ${({ $isContained }) => $isContained ? "absolute" : "fixed"};
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  pointer-events: none;
+
+  ${({ $position }) => positionStyles[$position] || positionStyles["top-right"]}
+`;
+const SnackbarWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["$variant", "$isExiting", "$duration", "$isPermanent", "$hasClick"].includes(props)
+})`
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 320px;
+  max-width: 480px;
+  padding: 12px 16px;
+  background-color: ${colors.white};
+  box-shadow: 0 1px 2px -1px rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  border: 1px solid ${colors.grey};
+  //border-bottom: 3px solid ${colors.grey};
+  pointer-events: auto;
+  overflow: hidden;
+  animation: ${({ $isExiting }) => $isExiting ? slideOut : "none"} 0.3s ease-out forwards;
+
+  /* Progress bar that expires with duration */
+  &::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: 3px;
+    background-color: ${({ $variant }) => variantStyles[$variant]?.borderColor || colors.blue};
+    border-radius: 0 0 0 6px;
+    ${({ $duration, $isPermanent }) => $isPermanent ? css`
+            width: 100%;
+          ` : css`
+            animation: ${progressExpire} ${$duration}ms linear forwards;
+          `}
+  }
+
+  ${({ $hasClick }) => $hasClick && css`
+      cursor: pointer;
+
+      &:hover {
+        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.16);
+      }
+    `}
+`;
+const IconWrapper = styled.div.withConfig({
+  shouldForwardProp: (props) => !["$variant"].includes(props)
+})`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  color: ${({ $variant }) => variantStyles[$variant]?.iconColor || colors.blue};
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+`;
+const Message = styled.div`
+  flex: 1;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+  color: ${colors.black};
+`;
+const CloseButton = styled.button`
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  svg {
+    width: 12px;
+    height: 12px;
+
+    path {
+      stroke: ${colors.grey2};
+      stroke-width: 2;
+    }
+  }
+
+  &:hover svg path {
+    stroke: ${colors.black};
+  }
+`;
+export {
+  CloseButton,
+  IconWrapper,
+  Message,
+  SnackbarContainer,
+  SnackbarWrapper,
+  variantStyles
+};

package/dist/components/Snackbar/SnackbarProvider.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { createContext, useState, useCallback, useMemo } from "react";
+import PropTypes from "prop-types";
+import { Snackbar } from "./Snackbar.js";
+const SnackbarContext = createContext(null);
+let snackbarId = 0;
+const SnackbarProvider = ({
+  children,
+  position = "top-right",
+  maxSnacks = 5,
+  defaultDuration = 5e3,
+  container = null
+}) => {
+  const [snackbars, setSnackbars] = useState([]);
+  const closeSnackbar = useCallback((id) => {
+    setSnackbars((prev) => prev.filter((s) => s.id !== id));
+  }, []);
+  const showSnackbar = useCallback(
+    (options) => {
+      const id = options.id ?? ++snackbarId;
+      const newSnackbar = {
+        id,
+        message: options.message,
+        variant: options.variant || "info",
+        icon: options.icon,
+        onClick: options.onClick,
+        duration: options.duration ?? defaultDuration
+      };
+      setSnackbars((prev) => {
+        const updated = [...prev, newSnackbar];
+        if (updated.length > maxSnacks) {
+          return updated.slice(-maxSnacks);
+        }
+        return updated;
+      });
+      return id;
+    },
+    [maxSnacks, defaultDuration]
+  );
+  const clearAll = useCallback(() => {
+    setSnackbars([]);
+  }, []);
+  const contextValue = useMemo(
+    () => ({
+      showSnackbar,
+      closeSnackbar,
+      clearAll
+    }),
+    [showSnackbar, closeSnackbar, clearAll]
+  );
+  return /* @__PURE__ */ jsxs(SnackbarContext.Provider, { value: contextValue, children: [
+    children,
+    /* @__PURE__ */ jsx(Snackbar, { snackbars, onClose: closeSnackbar, position, container })
+  ] });
+};
+SnackbarProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  position: PropTypes.oneOf(["top-right", "top-left", "top-center", "bottom-right", "bottom-left", "bottom-center"]),
+  maxSnacks: PropTypes.number,
+  defaultDuration: PropTypes.number,
+  container: PropTypes.instanceOf(Element)
+};
+export {
+  SnackbarContext,
+  SnackbarProvider
+};

package/dist/components/Snackbar/useSnackbar.js

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { SnackbarContext } from "./SnackbarProvider.js";
+const useSnackbar = () => {
+  const context = useContext(SnackbarContext);
+  if (!context) {
+    throw new Error("useSnackbar must be used within a SnackbarProvider");
+  }
+  return context;
+};
+export {
+  useSnackbar
+};

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