@rabbitio/ui-kit 1.0.0-beta.9 → 1.0.0-beta.91

package/src/ui-kit/components/atoms/RateSelector/rate-selector.module.scss

@@ -0,0 +1,47 @@
+@use "../../../assets/styles/index" as *;
+
+.rate-selector {
+    background-color: SolidColor("lightsmoke");
+    border-radius: 8px;
+    padding: 4px;
+    display: flex;
+    flex-direction: row;
+    gap: Margin("1");
+    user-select: none;
+    width: 100%;
+
+    &-item {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: Padding("3") Padding("3");
+        flex: 1 1;
+        border-radius: 4px;
+        gap: Margin("1");
+        cursor: pointer;
+        transition: 0.2s all $transitionEaseOut;
+        box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0);
+
+        @media (hover: hover) {
+            &:not(.selected):hover {
+                box-shadow: 0px 0px 0px 1px SolidColor("smoke");
+            }
+        }
+
+        &:not(.selected):active {
+            box-shadow: 0px 0px 0px 1px SolidColor("smoke");
+        }
+
+        &.selected {
+            background: $white;
+            color: SolidColor("tosca");
+        }
+
+        &-text {
+            font-weight: $semi-bold;
+            text-align: center;
+            font-size: 16px;
+        }
+    }
+}

package/src/{components → ui-kit/components}/atoms/SupportChat/SupportChat.jsx

@@ -1,12 +1,14 @@
 import { useEffect } from "react";
 import PropTypes from "prop-types";
 
-export const SupportChat = ({ url, websiteToken, welcomeMessage = "" }) => {
+// TODO: [dev] add JSDoc
+export const SupportChat = ({ url, websiteToken, welcomeMessage = "", locale = "en" }) => {
     useEffect(() => {
         window.chatwootSettings = {
             position: "right",
             type: "standard",
             launcherTitle: welcomeMessage,
+            locale: locale,
         };
         (function (d, t) {
             var BASE_URL = url;
@@ -33,8 +35,10 @@ SupportChat.propTypes = {
     url: PropTypes.string.isRequired,
     websiteToken: PropTypes.string.isRequired,
     welcomeMessage: PropTypes.string,
+    locale: PropTypes.string,
 };
 
 SupportChat.defaultProps = {
     welcomeMessage: "",
+    locale: "en",
 };

package/src/ui-kit/components/atoms/Textarea/Textarea.jsx

@@ -0,0 +1,148 @@
+import React, { forwardRef } from "react";
+import TextareaAutosize from "react-textarea-autosize";
+import PropTypes from "prop-types";
+
+import s from "./textarea.module.scss";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { Validation } from "../Validation/Validation.jsx";
+
+/**
+ * A textarea component with optional adaptive height and validation messaging.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.name - The name of the textarea.
+ * @param {function} props.onChange - Handler for change events.
+ * @param {string} props.placeholder - Placeholder text for the textarea.
+ * @param {string} props.alertText - Text for the alert message.
+ * @param {string} props.successAlertText - Text for the success alert message.
+ * @param {string} props.value - Value of the textarea.
+ * @param {string} props.label - Label text for the textarea.
+ * @param {string|null} props.id - ID for the textarea element.
+ * @param {boolean} props.autoFocus - If the textarea should be auto-focused.
+ * @param {boolean} props.fullHeight - If the textarea should be full height.
+ * @param {boolean} props.smallText - If the textarea should use small text styling.
+ * @param {boolean} props.adaptiveHeight - If the textarea should adjust its height based on content.
+ * @param {boolean} props.disabled - If the textarea is disabled.
+ * @param {boolean} props.errorEncountered - If there is an error related to the textarea.
+ * @param {boolean} props.ignoreEnter - If Enter key presses should be ignored.
+ */
+export const Textarea = forwardRef(
+    (
+        {
+            name = "",
+            onChange = () => {},
+            placeholder = "",
+            alertText = "",
+            successAlertText = "",
+            value = "",
+            label = "",
+            id = null,
+            autoFocus = false,
+            fullHeight = false,
+            smallText = false,
+            adaptiveHeight = false,
+            disabled = false,
+            errorEncountered = false,
+            ignoreEnter = false,
+        },
+        ref
+    ) => {
+        const callHandlingErrors = useCallHandlingErrors();
+
+        const onChangeProxy = e => {
+            if (ignoreEnter) e.target.value = e.target.value.replace(/(\r\n|\n|\r)/gm, "");
+
+            if (e.target?.value.indexOf("\n") === -1 || !ignoreEnter) onChange(e);
+        };
+
+        return (
+            <div className={s["textarea"] + ` ${fullHeight ? " " + s["full-height"] : ""}`}>
+                {label ? (
+                    <label htmlFor={id} className={s["textarea-input-label"]}>
+                        {label}
+                    </label>
+                ) : null}
+
+                {adaptiveHeight ? (
+                    <TextareaAutosize
+                        className={
+                            s["textarea-input"] +
+                            " " +
+                            s["adaptive-height"] +
+                            (disabled ? " " + s["disabled"] : "") +
+                            (errorEncountered ? " " + s["error-encountered"] : "")
+                        }
+                        minRows={1}
+                        maxRows={3}
+                        onChange={e => callHandlingErrors(onChangeProxy, e)}
+                        placeholder={placeholder}
+                        value={value}
+                        id={id}
+                        autoFocus={autoFocus}
+                        ref={ref}
+                        disabled={disabled}
+                    />
+                ) : (
+                    <textarea
+                        name={name}
+                        className={
+                            s["textarea-input"] +
+                            ` ${fullHeight ? s["full-height"] : ""} ${smallText ? s["small-text"] : ""} ${
+                                disabled ? s["disabled"] : ""
+                            }`
+                        }
+                        onChange={e => callHandlingErrors(onChange, e)}
+                        placeholder={placeholder}
+                        value={value}
+                        id={id}
+                        autoFocus={autoFocus}
+                        ref={ref}
+                        disabled={disabled}
+                    />
+                )}
+
+                {alertText || successAlertText ? (
+                    <Validation text={alertText || successAlertText} isSuccessAlert={!alertText} />
+                ) : null}
+            </div>
+        );
+    }
+);
+
+Textarea.propTypes = {
+    name: PropTypes.string,
+    onChange: PropTypes.func,
+    placeholder: PropTypes.string,
+    alertText: PropTypes.string,
+    successAlertText: PropTypes.string,
+    value: PropTypes.string,
+    label: PropTypes.string,
+    id: PropTypes.string,
+    autoFocus: PropTypes.bool,
+    fullHeight: PropTypes.bool,
+    smallText: PropTypes.bool,
+    adaptiveHeight: PropTypes.bool,
+    disabled: PropTypes.bool,
+    errorEncountered: PropTypes.bool,
+    ignoreEnter: PropTypes.bool,
+};
+
+Textarea.defaultProps = {
+    name: "",
+    onChange: () => {},
+    placeholder: "",
+    alertText: "",
+    successAlertText: "",
+    value: "",
+    label: "",
+    id: null,
+    autoFocus: false,
+    fullHeight: false,
+    smallText: false,
+    adaptiveHeight: false,
+    disabled: false,
+    errorEncountered: false,
+    ignoreEnter: false,
+};

package/src/ui-kit/components/atoms/Textarea/textarea.module.scss

@@ -0,0 +1,71 @@
+@use "../../../assets/styles/index" as *;
+
+.textarea {
+    display: flex;
+    flex-direction: column;
+
+    &.full-height {
+        height: 100%;
+    }
+
+    &-input {
+        @extend %text-medium;
+        padding: Padding("5");
+        border-radius: 7px;
+        background: SolidColor("lightsmoke");
+        border: none;
+        width: 100%;
+        resize: none;
+        min-height: 117px;
+        font-size: 16px;
+        color: SolidColor("grey");
+        appearance: none;
+        transition: 0.2s box-shadow $transitionEaseOut;
+        box-shadow: $shadowOutlineStatic;
+
+        &-label {
+            @include typograpy(h6);
+            font-weight: $semi-bold;
+            color: SolidColor("grey");
+            margin-bottom: Margin("2");
+            display: block;
+        }
+
+        @media (hover: hover) {
+            &:hover:not(:focus) {
+                box-shadow: $shadowOutlineHover;
+                transition: 0.02s box-shadow $transitionEaseOut;
+            }
+        }
+
+        &:focus {
+            box-shadow: $shadowOutlineActive;
+        }
+
+        &::placeholder {
+            @extend %text-medium;
+            font-size: 16px;
+            color: SolidColor("grey");
+        }
+
+        &.full-height {
+            height: 100%;
+        }
+
+        &.adaptive-height {
+            min-height: auto;
+        }
+
+        &.small-text {
+            font-size: 12px;
+        }
+
+        &.disabled {
+            opacity: 0.5;
+        }
+
+        &.error-encountered {
+            box-shadow: $shadowOutlineError !important;
+        }
+    }
+}

package/src/ui-kit/components/atoms/TitleBox/TitleBox.jsx

@@ -0,0 +1,141 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+
+import s from "./title-box.module.scss";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+import { copyBrowserTextToClipboard } from "../../../utils/textUtils.js";
+
+import { NoticeIcon } from "../NoticeIcon/NoticeIcon.jsx";
+import { LinkButton } from "../buttons/LinkButton/LinkButton.jsx";
+import { Tooltip, TOOLTIP_POSITIONS } from "../Tooltip/Tooltip.jsx";
+
+/**
+ * A box component for displaying a title with optional controls like buttons or icons and any children inside.
+ *
+ * @component
+ * @param {Object} props - The props object.
+ * @param {string} props.title - The main title text.
+ * @param {string} [props.linkText] - The text for the link button, if any.
+ * @param {Function} [props.linkButtonClick] - The function to execute when the link button is clicked.
+ * @param {boolean} [props.isLinkButtonDisabled] - Determines if the link button is disabled.
+ * @param {React.ReactNode} props.children - Child components to be rendered.
+ * @param {boolean} [props.linkButtonLoader] - Displays a loader animation on the link button if true.
+ * @param {boolean} [props.fullWidth] - If true, the title box will take full width of its container.
+ * @param {string} [props.titleNoticeText] - The text for a notice icon tooltip.
+ * @param {string} [props.titleNoticeIcon] - The icon for the notice tooltip.
+ * @param {string} [props.titleNoticePosition] - Tooltip position for the notice icon.
+ * @param {boolean} [props.bigTitle] - If true, uses a larger font size for the title.
+ * @param {boolean} [props.transparentTitle] - If true, the title has a transparent background.
+ * @param {string} [props.copyButtonText] - The text for the copy button.
+ * @param {string} [props.copyButtonContent] - The content to be copied to the clipboard.
+ * @param {string} [props.copyButtonTooltipContent] - Tooltip content displayed after copying.
+ */
+export const TitleBox = ({
+    title = "",
+    linkText = "",
+    linkButtonClick = resetButtonLoader => {},
+    isLinkButtonDisabled = false,
+    children,
+    linkButtonLoader = false,
+    fullWidth = true,
+    titleNoticeText = "",
+    titleNoticeIcon,
+    titleNoticePosition,
+    bigTitle = false,
+    transparentTitle = false,
+    copyButtonText,
+    copyButtonContent,
+    copyButtonTooltipContent,
+}) => {
+    const handleError = useCallHandlingErrors();
+
+    const transparentTitleClass = transparentTitle ? s["transparent-title"] : "";
+
+    const [showCopyNotice, setShowCopyNotice] = useState(false);
+
+    const handleCopyButton = e => {
+        handleError(() => {
+            setShowCopyNotice(true);
+            copyBrowserTextToClipboard(copyButtonContent);
+            setTimeout(() => {
+                setShowCopyNotice(false);
+            }, 1500);
+        }, e);
+    };
+
+    return (
+        <div className={`${s["title-box"]} ${fullWidth ? s["full-width"] : ""}`}>
+            {title || titleNoticeText || linkText ? (
+                <div className={s["title-box-wrapper"]}>
+                    {bigTitle ? (
+                        <h5 className={s["title-box-wrapper-title"] + " " + transparentTitleClass}>{title}</h5>
+                    ) : (
+                        <h6 className={s["title-box-wrapper-title"] + " " + transparentTitleClass}>{title}</h6>
+                    )}
+                    {titleNoticeText ? (
+                        <NoticeIcon
+                            noticeText={titleNoticeText}
+                            titleNoticeIcon={titleNoticeIcon}
+                            tooltipPosition={titleNoticePosition}
+                        />
+                    ) : null}
+                    {copyButtonContent && copyButtonText ? (
+                        <div className={s["title-box-wrapper-link-button"]}>
+                            <LinkButton
+                                content={copyButtonText}
+                                onClick={handleCopyButton}
+                                isLoadable={false}
+                                isDisabled={false}
+                            />
+                            <Tooltip position={TOOLTIP_POSITIONS.TOP_LEFT} showTooltip={showCopyNotice}>
+                                {copyButtonTooltipContent}
+                            </Tooltip>
+                        </div>
+                    ) : linkText ? (
+                        <div className={s["title-box-wrapper-link-button"]}>
+                            <LinkButton
+                                content={linkText}
+                                onClick={linkButtonClick}
+                                isLoadable={linkButtonLoader}
+                                isDisabled={isLinkButtonDisabled}
+                            />
+                        </div>
+                    ) : null}
+                </div>
+            ) : null}
+            {children}
+        </div>
+    );
+};
+
+TitleBox.propTypes = {
+    title: PropTypes.string,
+    linkText: PropTypes.string,
+    linkButtonClick: PropTypes.func,
+    isLinkButtonDisabled: PropTypes.bool,
+    children: PropTypes.node,
+    linkButtonLoader: PropTypes.bool,
+    fullWidth: PropTypes.bool,
+    titleNoticeText: PropTypes.string,
+    titleNoticeIcon: PropTypes.string,
+    titleNoticePosition: PropTypes.string,
+    bigTitle: PropTypes.bool,
+    transparentTitle: PropTypes.bool,
+    copyButtonText: PropTypes.string,
+    copyButtonContent: PropTypes.string,
+    copyButtonTooltipContent: PropTypes.string,
+};
+
+TitleBox.defaultProps = {
+    title: "",
+    linkText: "",
+    linkButtonClick: () => {},
+    isLinkButtonDisabled: false,
+    linkButtonLoader: false,
+    fullWidth: true,
+    titleNoticeText: "",
+    titleNoticePosition: TOOLTIP_POSITIONS.TOP,
+    bigTitle: false,
+    transparentTitle: false,
+};

package/src/ui-kit/components/atoms/TitleBox/title-box.module.scss

@@ -0,0 +1,32 @@
+@use "../../../assets/styles/index" as *;
+
+.title-box {
+    &.full-width {
+        width: 100%;
+    }
+
+    &-wrapper {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-grow: 1;
+        margin-bottom: Margin("1");
+        gap: Margin("2");
+        min-height: 26px;
+
+        &-title {
+            color: SolidColor("grey");
+            font-weight: $semi-bold;
+            text-align: left;
+
+            &.transparent-title {
+                color: rgba($white, 0.2);
+            }
+        }
+
+        &-link-button {
+            position: relative;
+        }
+    }
+}

package/src/ui-kit/components/atoms/Tooltip/Tooltip.jsx

@@ -0,0 +1,77 @@
+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/wrappedImages/darkRectangle.jsx";
+
+import { useCallHandlingErrors } from "../../../hooks/useCallHandlingErrors.js";
+
+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 {Object} props - The props object.
+ * @param {React.ReactNode} props.children - The content to display inside the tooltip.
+ * @param {boolean} props.showTooltip - Controls whether the tooltip is visible.
+ * @param {Function} props.handleClick - Handler for click events.
+ * @param {boolean} [props.wide] - If true, applies a wider style to the tooltip.
+ * @param {string} props.position - One of the predefined positions for the tooltip.
+ * @param {boolean} [props.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,
+};