@rabbitio/ui-kit 1.0.0-beta.43 → 1.0.0-beta.46

package/src/components/atoms/Tooltip/Tooltip.jsx

@@ -0,0 +1,95 @@
+import React from "react";
+import { CSSTransition } from "react-transition-group";
+import PropTypes from "prop-types";
+
+import s from "./tooltip.module.scss";
+// import darkRectangle from "../../../assets/image/icons/dark-rectangle.svg";
+
+import { useCallHandlingErrors } from "../../hooks/useCallHandlingErrors.js";
+
+const DarkRectangle = () => (
+    <svg
+        width="25"
+        height="13"
+        viewBox="0 0 25 13"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12.5 13L25 0H0L12.5 13Z"
+            fill="#232D42"
+        />
+    </svg>
+);
+
+export const TOOLTIP_POSITIONS = {
+    TOP: "top",
+    LEFT: "left",
+    RIGHT: "right",
+    BOTTOM: "bottom",
+    TOP_LEFT: "top-left",
+    TOP_RIGHT: "top-right",
+};
+
+/**
+ * Tooltip component for displaying contextual information.
+ *
+ * @component
+ * @param {React.ReactNode} children - The content to display inside the tooltip.
+ * @param {boolean} showTooltip - Controls whether the tooltip is visible.
+ * @param {Function} handleClick - Handler for click events.
+ * @param {boolean} wide - If true, applies a wider style to the tooltip.
+ * @param {string} position - One of the predefined positions for the tooltip.
+ * @param {boolean} ignorePointerEvents - If true, the tooltip will not react to pointer events.
+ */
+export const Tooltip = ({
+    children,
+    showTooltip,
+    handleClick = () => {},
+    wide = false,
+    position = TOOLTIP_POSITIONS.TOP,
+    ignorePointerEvents = false,
+}) => {
+    const handleError = useCallHandlingErrors();
+
+    const onClick = (e) => {
+        e.stopPropagation();
+        handleClick();
+    };
+
+    return (
+        <CSSTransition in={showTooltip} timeout={400} unmountOnExit>
+            <span
+                className={`${s["tooltip"]} ${wide ? s["wide"] : ""} ${
+                    s[position]
+                } ${ignorePointerEvents ? s["ignore-pointer"] : ""}`}
+                onClick={(e) => handleError(onClick, e)}
+                onDoubleClick={(e) =>
+                    handleError((e) => e.stopPropagation(), e)
+                }
+            >
+                <DarkRectangle />
+                {/*<img src={darkRectangle} alt="dark rectangle" />*/}
+                {children}
+            </span>
+        </CSSTransition>
+    );
+};
+
+Tooltip.propTypes = {
+    children: PropTypes.node.isRequired,
+    showTooltip: PropTypes.bool.isRequired,
+    handleClick: PropTypes.func,
+    wide: PropTypes.bool,
+    position: PropTypes.oneOf(Object.values(TOOLTIP_POSITIONS)),
+    ignorePointerEvents: PropTypes.bool,
+};
+
+Tooltip.defaultProps = {
+    handleClick: () => {},
+    wide: false,
+    position: TOOLTIP_POSITIONS.TOP,
+    ignorePointerEvents: false,
+};

package/src/components/atoms/Tooltip/tooltip.module.scss

@@ -0,0 +1,231 @@
+@import "../../../../styles/index";
+
+.tooltip {
+    @include typograpy("p");
+    font-weight: $medium;
+    line-height: 20px;
+    padding: Padding("5") Padding("4");
+    background: SolidColor("dark");
+    position: absolute;
+    bottom: calc(100% + 15px);
+    left: 50%;
+    transform: translateX(-50%);
+    color: $white;
+    border-radius: $borderRadius;
+    z-index: 3;
+    display: block;
+    min-width: 200px;
+    max-width: 300px;
+    text-align: center;
+    word-wrap: break-word;
+    word-break: normal;
+
+    &.enter {
+        opacity: 0;
+        transform: translateX(-50%) translateY(10px) scale(0.95);
+    }
+
+    &.enter-active,
+    &.exit {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0) scale(1);
+        transition: 0.2s all $transitionEaseOut;
+    }
+
+    &.exit-active {
+        opacity: 0;
+        transform: translateX(-50%) translateY(0) scale(1);
+    }
+
+    &.top-left {
+        transform: none;
+        bottom: calc(100% + 15px);
+        right: -14px;
+        left: auto;
+        img {
+            left: auto;
+            right: 0px;
+            top: calc(100% - 4px);
+            transform: translateX(-40%);
+        }
+
+        &.enter {
+            opacity: 0;
+            transform: translateX(5px) translateY(10px) scale(0.95);
+        }
+
+        &.enter-active,
+        &.enter-done,
+        &.exit {
+            opacity: 1;
+            transform: translateX(0) translateY(0) scale(1);
+        }
+
+        &.exit-active {
+            opacity: 0;
+            transform: translateX(0) translateY(0) scale(1);
+        }
+    }
+
+    &.top-right {
+        transform: none;
+        bottom: calc(100% + 15px);
+        left: -14px;
+        img {
+            left: 0px;
+            top: calc(100% - 4px);
+            transform: translateX(40%);
+        }
+
+        &.enter {
+            opacity: 0;
+            transform: translateX(-5px) translateY(10px) scale(0.95);
+        }
+
+        &.enter-active,
+        &.enter-done,
+        &.exit {
+            opacity: 1;
+            transform: translateX(0) translateY(0) scale(1);
+        }
+
+        &.exit-active {
+            opacity: 0;
+            transform: translateX(0) translateY(0) scale(1);
+        }
+    }
+
+    &.left {
+        left: auto;
+        right: calc(100% + 16px);
+        bottom: calc(100% - 4px);
+        img {
+            top: calc(41%);
+            left: calc(100% - 7px);
+            transform: rotateZ(-90deg);
+        }
+
+        &.enter {
+            opacity: 0;
+            transform: translateX(16px) translateY(50%) scale(0.95);
+        }
+
+        &.enter-active,
+        &.enter-done,
+        &.exit {
+            opacity: 1;
+            transform: translateX(0) translateY(50%) scale(1);
+        }
+
+        &.exit-active {
+            opacity: 0;
+            transform: translateX(0) translateY(50%) scale(1);
+        }
+    }
+
+    &.bottom {
+        // TODO: [dev] Currently works for RBF form. Not tested in other cases
+        bottom: auto;
+        top: calc(100% + 16px);
+        left: 50%;
+        img {
+            position: absolute;
+            top: -12px;
+            left: calc(50% - 12px);
+            transform: rotateZ(-180deg);
+        }
+
+        &.enter {
+            opacity: 0;
+            transform: translateX(-50%) translateY(-10px) scale(0.95);
+        }
+
+        &.enter-active,
+        &.enter-done,
+        &.exit {
+            opacity: 1;
+            transform: translateX(-50%) translateY(0) scale(1);
+        }
+
+        &.exit-active {
+            opacity: 0;
+            transform: translateX(-50%) translateY(0) scale(1);
+        }
+    }
+
+    &.right {
+        // TODO: [dev] Currently works for RBF form. Not tested in other cases
+        left: calc(100% + 16px);
+        right: auto;
+        top: 7px;
+        bottom: auto;
+        img {
+            position: absolute;
+            top: calc(50% - 6px);
+            left: -18px;
+            transform: rotateZ(-270deg);
+        }
+
+        &.enter {
+            opacity: 0;
+            transform: translateX(-16px) translateY(-50%) scale(0.95);
+        }
+
+        &.enter-active,
+        &.enter-done,
+        &.exit {
+            opacity: 1;
+            transform: translateX(0) translateY(-50%) scale(1);
+        }
+
+        &.exit-active {
+            opacity: 0;
+            transform: translateX(0) translateY(-50%) scale(1);
+        }
+    }
+
+    &.wide {
+        min-width: 300px;
+    }
+
+    &.ignore-pointer {
+        pointer-events: none;
+    }
+
+    &-enter {
+        opacity: 0;
+        bottom: calc(100% - 10px);
+        position: absolute;
+    }
+
+    &-enter-active {
+        opacity: 1;
+        bottom: calc(100% + 15px);
+        position: absolute;
+        transition: 0.3s;
+    }
+
+    &-enter-done {
+        bottom: calc(100% + 15px);
+        position: absolute;
+    }
+
+    &-exit {
+        opacity: 1;
+        bottom: calc(100% + 15px);
+        position: absolute;
+    }
+
+    &-exit-active {
+        opacity: 0;
+        bottom: calc(100% - 10px);
+        position: absolute;
+    }
+
+    img {
+        position: absolute;
+        top: calc(100% - 1px);
+        left: 50%;
+        transform: translateX(-50%);
+    }
+}

package/src/components/atoms/Validation/Validation.jsx

@@ -0,0 +1,130 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./validation.module.scss";
+// import successfulValidationIcon from "../../../assets/image/icons/successful-validation-icon.svg";
+// import failedValidationIcon from "../../../assets/image/icons/failed-validation-icon.svg";
+
+const SuccessfulValidationIcon = () => (
+    <svg
+        width="27"
+        height="27"
+        viewBox="0 0 27 27"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect
+            opacity="0.8"
+            x="1.5"
+            y="1.5"
+            width="24"
+            height="24"
+            rx="12"
+            fill="#DAF1FE"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.8703 15.7837L9.64348 13.5569C9.30357 13.217 8.75246 13.217 8.41255 13.5569C8.07264 13.8968 8.07264 14.4479 8.41255 14.7878L11.2351 17.6104C11.5672 17.9425 12.103 17.9512 12.4457 17.6301L18.4492 12.0049C18.8 11.6762 18.8179 11.1254 18.4892 10.7746C18.1605 10.4238 17.6097 10.4059 17.2589 10.7346L11.8703 15.7837Z"
+            fill="url(#paint0_linear)"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear"
+                x1="19.8333"
+                y1="18.9098"
+                x2="15.586"
+                y2="7.2736"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);
+
+export const FailedValidationIcon = () => (
+    <svg
+        width="27"
+        height="27"
+        viewBox="0 0 27 27"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect
+            opacity="0.8"
+            x="1.5"
+            y="1.5"
+            width="24"
+            height="24"
+            rx="12"
+            fill="#DAF1FE"
+        />
+        <path
+            d="M12.3259 10.5855C12.2575 9.8896 12.8063 9.28745 13.5055 9.29121C14.2008 9.29495 14.7418 9.8964 14.6722 10.5881L14.1937 15.3431C14.1575 15.7026 13.855 15.9762 13.4937 15.9762C13.1319 15.9762 12.829 15.7017 12.7936 15.3415L12.3259 10.5855Z"
+            fill="url(#paint0_linear)"
+        />
+        <path
+            d="M13.514 17.1182C14.1325 17.1182 14.634 17.6196 14.634 18.2382C14.634 18.8567 14.1325 19.3582 13.514 19.3582H13.486C12.8674 19.3582 12.366 18.8567 12.366 18.2382C12.366 17.6196 12.8674 17.1182 13.486 17.1182H13.514Z"
+            fill="url(#paint1_linear)"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear"
+                x1="17.3456"
+                y1="14.0483"
+                x2="11.6522"
+                y2="12.8896"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+            <linearGradient
+                id="paint1_linear"
+                x1="17.3456"
+                y1="14.2383"
+                x2="11.6522"
+                y2="13.0796"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);
+
+/**
+ * Simple validation message with an icon.
+ * It shows either a success or failure icon based on the isSuccessAlert prop.
+ *
+ * @param {Object} props - The component props.
+ * @param {string} props.text - The validation message text to display.
+ * @param {boolean} props.isSuccessAlert - Determines if the displayed alert is for a success (true) or failure (false).
+ */
+export const Validation = ({ text = "", isSuccessAlert }) => {
+    return (
+        <div className={s["validation"]}>
+            {isSuccessAlert ? (
+                // <img src={successfulValidationIcon} alt="validation icon" />
+                <SuccessfulValidationIcon />
+            ) : (
+                // <img src={failedValidationIcon} alt="validation icon" />
+                <FailedValidationIcon />
+            )}
+            <span className={s["validation-text"]}>{text}</span>
+        </div>
+    );
+};
+
+Validation.propTypes = {
+    text: PropTypes.string,
+    isSuccessAlert: PropTypes.bool.isRequired,
+};
+
+Validation.defaultProps = {
+    text: "",
+    isSuccessAlert: false,
+};

package/src/components/atoms/Validation/validation.module.scss

@@ -0,0 +1,15 @@
+@import "../../../../styles/index";
+
+.validation {
+    display: flex;
+    align-items: center;
+    margin-top: Margin("3");
+
+    &-text {
+        text-align: left;
+        color: SolidColor("sky");
+        @extend .ml-2;
+        font-size: 14px;
+        @extend %text-semibold;
+    }
+}

package/src/components/atoms/buttons/Close/Close.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import s from "./close.module.scss";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors";
+
+export const CLOSE_COLORS = {
+    WHITE: "white",
+    DARK: "dark",
+    DARK_INVERT: "dark-invert",
+};
+
+/**
+ * A component for rendering a close icon that handles errors on click.
+ * This component uses an SVG to render the icon and allows customization
+ * through props for color, size, and the click event handling.
+ *
+ * @param {Object} props - The properties passed to the component.
+ * @param {string} props.color - The color theme of the close icon.
+ *   Should be one of the properties of CLOSE_COLORS.
+ * @param {Function} props.onClick - The function to call when the icon is clicked.
+ * @param {boolean} props.large - Whether the icon should be displayed in a larger size.
+ */
+export const Close = ({
+    color = CLOSE_COLORS.WHITE,
+    onClick = () => {},
+    large = false,
+}) => {
+    const callHandlingErrors = useCallHandlingErrors();
+
+    return (
+        <svg
+            className={
+                s["close"] + " " + s[color] + (large ? " " + s["large"] : "")
+            }
+            onClick={(e) => callHandlingErrors(onClick, e)}
+            style={{ cursor: "pointer" }}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox={`0 0 50 50`}
+            x="0px"
+            y="0px"
+        >
+            <path
+                d="M28.228,23.986L47.092,5.122c1.172-1.171,1.172-3.071,0-4.242c-1.172-1.172-3.07-1.172-4.242,0L23.986,19.744L5.121,0.88
+                c-1.172-1.172-3.07-1.172-4.242,0c-1.172,1.171-1.172,3.071,0,4.242l18.865,18.864L0.879,42.85c-1.172,1.171-1.172,3.071,0,4.242
+                C1.465,47.677,2.233,47.97,3,47.97s1.535-0.293,2.121-0.879l18.865-18.864L42.85,47.091c0.586,0.586,1.354,0.879,2.121,0.879
+                s1.535-0.293,2.121-0.879c1.172-1.171,1.172-3.071,0-4.242L28.228,23.986z"
+            />
+        </svg>
+    );
+};
+
+Close.propTypes = {
+    color: PropTypes.oneOf(Object.values(CLOSE_COLORS)),
+    onClick: PropTypes.func,
+    large: PropTypes.bool,
+};
+
+Close.defaultProps = {
+    color: CLOSE_COLORS.WHITE,
+    onClick: () => {},
+    large: false,
+};

package/src/components/atoms/buttons/Close/close.module.scss

@@ -0,0 +1,75 @@
+@import "../../../../../styles/index";
+
+.close {
+    width: 24px;
+    height: 24px;
+    padding: 6px;
+    border-radius: 100%;
+    background-color: LightColor("grey-20");
+    opacity: 0.5;
+    transition: 0.2s all ease;
+    cursor: pointer;
+    box-sizing: border-box;
+
+    &.large {
+        width: 48px;
+        height: 48px;
+        padding: 16px;
+
+        @media (max-width: $tablet-width) {
+            width: 36px;
+            height: 36px;
+            padding: 12px;
+        }
+    }
+
+    &.white {
+        path {
+            fill: white;
+            background-color: none;
+        }
+    }
+
+    &.dark-invert {
+        opacity: 0.5;
+        background-color: SolidColor("grey");
+
+        @media (hover: hover) {
+            &:hover {
+                opacity: 1;
+                transition: opacity 0.03s ease;
+            }
+        }
+
+        &:active {
+            opacity: 1;
+            transition: opacity 0.03s ease;
+        }
+
+        path {
+            fill: SolidColor("lightsmoke");
+        }
+    }
+
+    &.dark {
+        box-shadow: $shadowOutlineStatic;
+
+        @media (hover: hover) {
+            &:hover {
+                opacity: 1;
+                transition: opacity 0.03s ease;
+                box-shadow: $shadowOutlineHover;
+            }
+        }
+
+        &:active {
+            opacity: 1;
+            transition: opacity 0.03s ease;
+            box-shadow: $shadowOutlineHover;
+        }
+
+        path {
+            fill: SolidColor("darkBlue");
+        }
+    }
+}