@rabbitio/ui-kit 1.0.0-beta.6 → 1.0.0-beta.61

package/src/components/atoms/Textarea/Textarea.jsx

@@ -0,0 +1,158 @@
+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";
+import { Validation } from "../Validation/Validation";
+
+/**
+ * A textarea component with optional adaptive height and validation messaging.
+ *
+ * @param {string} name - The name of the textarea.
+ * @param {function} onChange - Handler for change events.
+ * @param {string} placeholder - Placeholder text for the textarea.
+ * @param {string} alertText - Text for the alert message.
+ * @param {string} successAlertText - Text for the success alert message.
+ * @param {string} value - Value of the textarea.
+ * @param {string} label - Label text for the textarea.
+ * @param {string|null} id - ID for the textarea element.
+ * @param {boolean} autoFocus - If the textarea should be auto-focused.
+ * @param {boolean} fullHeight - If the textarea should be full height.
+ * @param {boolean} smallText - If the textarea should use small text styling.
+ * @param {boolean} adaptiveHeight - If the textarea should adjust its height based on content.
+ * @param {boolean} disabled - If the textarea is disabled.
+ * @param {boolean} errorEncountered - If there is an error related to the textarea.
+ * @param {boolean} 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/components/atoms/Textarea/textarea.module.scss

@@ -0,0 +1,71 @@
+@import "../../../../styles/index";
+
+.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/components/atoms/TitleBox/TitleBox.jsx

@@ -0,0 +1,164 @@
+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 { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
+
+import { NoticeIcon } from "../NoticeIcon/NoticeIcon.jsx";
+import { LinkButton } from "../buttons/LinkButton/LinkButton.jsx";
+import { Tooltip } from "../Tooltip/Tooltip.jsx";
+
+/**
+ * A box component for displaying a title with optional controls like buttons or icons and any children inside.
+ *
+ * @component
+ * @param {string} title - The main title text.
+ * @param {string} linkText - The text for the link button, if any.
+ * @param {Function} linkButtonClick - The function to execute when the link button is clicked.
+ * @param {boolean} isLinkButtonDisabled - Determines if the link button is disabled.
+ * @param {React.ReactNode} children - Child components to be rendered.
+ * @param {boolean} linkButtonLoader - Displays a loader animation on the link button if true.
+ * @param {boolean} fullWidth - If true, the title box will take full width of its container.
+ * @param {string} titleNoticeText - The text for a notice icon tooltip.
+ * @param {string} titleNoticeIcon - The icon for the notice tooltip.
+ * @param {string} titleNoticePosition - Tooltip position for the notice icon.
+ * @param {boolean} bigTitle - If true, uses a larger font size for the title.
+ * @param {boolean} transparentTitle - If true, the title has a transparent background.
+ * @param {string} copyButtonText - The text for the copy button.
+ * @param {string} copyButtonContent - The content to be copied to the clipboard.
+ * @param {string} 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/components/atoms/TitleBox/title-box.module.scss

@@ -0,0 +1,30 @@
+@import "../../../../styles/index";
+
+.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;
+            &.transparent-title {
+                color: rgba($white, 0.2);
+            }
+        }
+
+        &-link-button {
+            position: relative;
+        }
+    }
+}

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

@@ -0,0 +1,70 @@
+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";
+import { TOOLTIP_POSITIONS } from "../../../constants/atoms/Tooltip/tooltip.jsx";
+
+/**
+ * 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,
+};