@rabbitio/ui-kit 1.0.0-alpha.8 → 1.0.0-beta.1

package/README.md

@@ -4,11 +4,19 @@ npm install --save @rabbitio/ui-kit
 ~~~
 
 # Using library
-1. To use components just import them
+1. To use components for web import the following way:
+~~~
+import { Button } from "@rabbitio/ui-kit/web";
+~~~
+2. To use components for node import the following way:
+~~~
+import { Button } from "@rabbitio/ui-kit/node";
+~~~
+3. To use components for next.js import the following way and add "@rabbitio/ui-kit" to transpilePackages inside your next.config.js:
 ~~~
 import { Button } from "@rabbitio/ui-kit";
 ~~~
-2. [In progress] Also, you can import base styles into your scss index file: 
+4. [In progress] Also, you can import base styles into your scss index file: 
 ~~~
 @import "@rabbitio/ui-kit/styles/index";
 ~~~

package/index.js

@@ -0,0 +1 @@
+export * from "./stories/index.js";

package/package.json

@@ -1,24 +1,13 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-alpha.8",
+    "version": "1.0.0-beta.1",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
-    "files": [
-        "dist",
-        "styles",
-        "README.md"
-    ],
     "exports": {
-        ".": "./dist/node/index.js",
+        ".": "./index.js",
         "./node": "./dist/node/index.js",
-        "./dist/node": "./dist/node/index.js",
         "./web": "./dist/web/index.js",
-        "./dist/web": "./dist/web/index.js",
-        "./node1": "./dist/node",
-        "./dist/node1": "./dist/node",
-        "./web1": "./dist/web",
-        "./dist/web1": "./dist/web"
-
+        "./package.json": "./package.json"
     },
     "scripts": {
         "build-dev": "rm -rf dist && NODE_ENV=production webpack --mode development",
@@ -42,12 +31,13 @@
     "license": "MIT",
     "peerDependencies": {
         "react": ">=16.0.0",
-        "react-dom": ">=16.0.0"
+        "react-dom": ">=16.0.0",
+        "react-router-dom": ">=6.21.1"
     },
     "dependencies": {
         "react": ">=16.0.0",
         "react-dom": ">=16.0.0",
-        "react-router-dom": "6.21.1"
+        "react-router-dom": ">=6.21.1"
     },
     "devDependencies": {
         "@babel/core": "^7.23.7",

package/stories/atoms/LoadingDots/LoadingDots.jsx

@@ -0,0 +1,57 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+import styles from "./LoadingDots.module.scss";
+
+/**
+ * LoadingDots Component - Displays a loading animation with dots.
+ * This component allows customization of size, color, margins, and alignment.
+ *
+ * @component
+ * @param {Object} props - The props of the component.
+ * @param {('big'|'small'|'extra-small')} [props.size='small'] - Sets the size of the loading dots.
+ * @param {boolean} [props.isColored=false] - If true, the dots will be colored, otherwise they will be monochrome.
+ * @param {boolean} [props.noMargins=false] - If true, removes the margins around the loading dots.
+ * @param {(boolean|'left'|'right')} [props.align=false] - Aligns the loading dots to the left or right if specified, otherwise centered.
+ * @returns {React.ReactElement} A React component that renders the loading dots animation.
+ */
+export const LoadingDots = ({
+    size = "small",
+    isColored = false,
+    noMargins = false,
+    align = false,
+}) => {
+    return (
+        <div
+            className={`${styles["loading-dots"]} ${styles[size]} ${
+                noMargins ? ` ${styles["no-margins"]}` : ""
+            } ${align ? styles["align-" + align] : ""}`}
+        >
+            <div
+                className={`${styles.dot} ${
+                    isColored ? ` ${styles.colored}` : ""
+                }`}
+            />
+            <div
+                className={`${styles.dot} ${
+                    isColored ? ` ${styles.colored}` : ""
+                }`}
+            />
+            <div
+                className={`${styles.dot} ${
+                    isColored ? ` ${styles.colored}` : ""
+                }`}
+            />
+        </div>
+    );
+};
+
+LoadingDots.propTypes = {
+    size: PropTypes.oneOf(["big", "small", "extra-small"]),
+    isColored: PropTypes.bool,
+    noMargins: PropTypes.bool,
+    align: PropTypes.oneOfType([
+        PropTypes.oneOf(["left", "right"]),
+        PropTypes.bool,
+    ]),
+};

package/stories/atoms/LoadingDots/LoadingDots.module.scss

@@ -0,0 +1,83 @@
+@import "../../../styles/index";
+
+.loading-dots {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+
+    &.no-margins {
+        margin: 0 !important;
+    }
+
+    .dot {
+        border-radius: 50%;
+        background: $white;
+
+        &.colored {
+            background: SolidColor(tosca);
+        }
+
+        animation: 0.5s ease-in-out 0s alternate infinite dots;
+
+        &:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        &:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+    }
+
+    &.big {
+        .dot {
+            width: 24px;
+            height: 24px;
+
+            @media (max-width: $phone-width) {
+                width: 14px;
+                height: 14px;
+            }
+
+            &:nth-child(2) {
+                @extend .mx-3;
+            }
+        }
+    }
+
+    &.small {
+        .dot {
+            width: 14px;
+            height: 14px;
+        }
+    }
+
+    &.extra-small {
+        .dot {
+            width: 8px;
+            height: 8px;
+        }
+    }
+
+    &.align-left {
+        justify-content: flex-start;
+        margin: 0;
+    }
+
+    &.align-right {
+        justify-content: flex-end;
+        margin: 0;
+    }
+}
+
+@keyframes dots {
+    0% {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    100% {
+        transform: scale(0.45);
+        opacity: 0.6;
+    }
+}

package/stories/atoms/buttons/Button/Button.jsx

@@ -0,0 +1,235 @@
+import React, { useEffect, useRef, useState } from "react";
+import { Link } from "react-router-dom";
+import PropTypes from "prop-types";
+
+import styles from "./Button.module.scss";
+
+import { LoadingDots } from "../../LoadingDots/LoadingDots.jsx";
+
+/**
+ * Button component - A versatile and customizable button for React applications.
+ * It supports various sizes, styles, and functionalities, including loaders, icons, and handling of click events.
+ * This component can also be used as a link when integrated with `react-router-dom`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {('xl'|'lg'|'md'|'sm')} [props.size='xl'] - Sets the size of the button.
+ * @param {string} [props.className=''] - An optional custom CSS class name for additional styling.
+ * @param {string} [props.mode='transparent'] - Determines the button's visual style.
+ * @param {Function} [props.onClick=(resetButtonLoader, event) => {}] - Callback function that triggers on button click.
+ * @param {boolean} [props.loader=true] - If true, displays a loader animation on the button when clicked.
+ * @param {boolean} [props.loading=false] - Controls the actual display of the loader if `loader` is true.
+ * @param {string} [props.to=''] - The path for the button to act as a link.
+ * @param {boolean} [props.fullWidthOnMobiles=false] - Expands the button to full width on mobiles.
+ * @param {boolean} [props.fullWidthOnTablets=false] - Expands the button to full width on tablets.
+ * @param {string} [props.icon=''] - The path to the button's icon.
+ * @param {React.ReactNode} [props.content=''] - The text or content displayed inside the button.
+ * @param {boolean} [props.isDisabled=false] - Disables the button if true.
+ * @param {Function} [props.setClickTrigger=(p) => {}] - Function to programmatically trigger a button click.
+ * @param {boolean} [props.isFormSubmittingButton=false] - If true, adds a hidden `<input type="submit">`.
+ * @param {boolean} [props.bigIcon=false] - If true, displays a larger icon on the button.
+ * @param {boolean} [props.checkmarkOnClick=false] - Shows a checkmark instead of content for a few seconds after click.
+ * @param {boolean} [props.propagatePrimaryButtonClick=true] - Propagates the primary button click event if true.
+ * @param {boolean} [props.smallPaddingOnSmallMobiles=false] - Enables smaller paddings for extra-small screen sizes.
+ * @param {Function} [props.handleError=(func) => func()] - Function to handle errors during button click events.
+ * @returns {React.ReactElement}
+ */
+export const Button = ({
+    size = "xl",
+    className = "",
+    mode = "transparent",
+    onClick = (resetButtonLoader, event) => {},
+    loader = true,
+    loading = false,
+    to = "",
+    fullWidthOnMobiles = false,
+    fullWidthOnTablets = false,
+    icon = "",
+    content = "",
+    isDisabled = false,
+    setClickTrigger = (p) => {},
+    isFormSubmittingButton = false,
+    bigIcon = false,
+    checkmarkOnClick = false,
+    propagatePrimaryButtonClick = true,
+    smallPaddingOnSmallMobiles = false,
+    handleError = (func, event) => func(event),
+}) => {
+    const [isLoading, setIsLoading] = useState(loading);
+    const [isCheckShown, setIsCheckShown] = useState(false);
+    const [event, setEvent] = useState(null);
+
+    const buttonRef = useRef();
+
+    useEffect(() => {
+        setClickTrigger(() => buttonRef.current.click());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [buttonRef]);
+
+    useEffect(() => {
+        if (isLoading) {
+            onClick(() => setIsLoading(false), event);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isLoading]);
+
+    const buttonClick = (e) => {
+        if (isLoading || isDisabled) {
+            return false;
+        }
+
+        if (checkmarkOnClick && !isCheckShown && !loader && !loading) {
+            setIsCheckShown(true);
+            setTimeout(() => {
+                setIsCheckShown(false);
+            }, 2000);
+        }
+
+        e.persist(); // Persisting React's SyntheticEvent to be able to use it in any async context
+        !propagatePrimaryButtonClick && e.stopPropagation();
+        if (loader) {
+            setIsLoading(true);
+            setEvent(e);
+        } else {
+            onClick(() => setIsLoading(false), e);
+        }
+    };
+
+    const classNames =
+        `${styles.button} ${styles[size]} ${styles[className]} ${styles[mode]}` +
+        (fullWidthOnMobiles ? ` ${styles["full-width-on-mobiles"]}` : "") +
+        (fullWidthOnTablets ? ` ${styles["full-width-on-tablets"]}` : "") +
+        (isDisabled ? ` ${styles.disable}` : "") +
+        (smallPaddingOnSmallMobiles
+            ? ` ${styles["small-padding-on-small-mobiles"]}`
+            : "");
+
+    return (
+        <>
+            {isFormSubmittingButton ? <input type="submit" hidden /> : null}
+            {to ? (
+                <Link
+                    className={classNames}
+                    onClick={(e) => handleError(buttonClick, e)}
+                    to={to}
+                    innerRef={buttonRef}
+                >
+                    {icon ? (
+                        <div
+                            className={
+                                styles["button-with-icon"] +
+                                (bigIcon ? ` ${styles["big-icon"]}` : "")
+                            }
+                        >
+                            <img src={icon} alt="button icon" />
+                            <span className={styles["button-with-icon-text"]}>
+                                {content}
+                            </span>
+                        </div>
+                    ) : (
+                        content
+                    )}
+                </Link>
+            ) : (
+                <div
+                    className={classNames}
+                    onClick={(e) => handleError(buttonClick, e)}
+                    ref={buttonRef}
+                >
+                    <div
+                        className={`${styles["button-primary-dots-wrapper"]} ${
+                            isLoading && loader ? styles.show : ""
+                        }`}
+                    >
+                        {loader && isLoading ? (
+                            <LoadingDots isColored={mode === "white"} />
+                        ) : null}
+                    </div>
+                    <div
+                        className={`${styles["button-success-icon"]} ${
+                            styles[mode]
+                        } ${isCheckShown ? styles["show"] : ""}`}
+                    ></div>
+                    {icon ? (
+                        <div
+                            className={`${styles["button-with-icon"]} ${
+                                (isLoading && loader) ||
+                                (checkmarkOnClick && isCheckShown)
+                                    ? styles["hide"]
+                                    : ""
+                            } ${bigIcon ? styles["big-icon"] : ""}`}
+                        >
+                            <img src={icon} alt="button icon" />
+                            <span className={styles["button-with-icon-text"]}>
+                                {content}
+                            </span>
+                        </div>
+                    ) : (
+                        <span
+                            className={`${styles["button-text"]} ${
+                                (isLoading && loader) ||
+                                (checkmarkOnClick && isCheckShown)
+                                    ? styles["hide"]
+                                    : ""
+                            }`}
+                        >
+                            {content}
+                        </span>
+                    )}
+                </div>
+            )}
+        </>
+    );
+};
+
+Button.propTypes = {
+    size: PropTypes.oneOf(["xl", "lg", "md", "sm"]),
+    className: PropTypes.string,
+    mode: PropTypes.oneOf([
+        "transparent",
+        "white",
+        "primary",
+        "primary-bordered",
+        "primary-transparent",
+        "transparent-bordered",
+        "transparent-without-shadow",
+    ]),
+    onClick: PropTypes.func,
+    loader: PropTypes.bool,
+    loading: PropTypes.bool,
+    to: PropTypes.string,
+    fullWidthOnMobiles: PropTypes.bool,
+    fullWidthOnTablets: PropTypes.bool,
+    icon: PropTypes.string,
+    content: PropTypes.node,
+    isDisabled: PropTypes.bool,
+    setClickTrigger: PropTypes.func,
+    isFormSubmittingButton: PropTypes.bool,
+    bigIcon: PropTypes.bool,
+    checkmarkOnClick: PropTypes.bool,
+    propagatePrimaryButtonClick: PropTypes.bool,
+    smallPaddingOnSmallMobiles: PropTypes.bool,
+    handleError: PropTypes.func,
+};
+
+Button.defaultProps = {
+    size: "xl",
+    className: "",
+    mode: "transparent",
+    onClick: (resetButtonLoader, event) => {},
+    loader: true,
+    loading: false,
+    to: "",
+    fullWidthOnMobiles: false,
+    fullWidthOnTablets: false,
+    icon: "",
+    content: "",
+    isDisabled: false,
+    setClickTrigger: (p) => {},
+    isFormSubmittingButton: false,
+    bigIcon: false,
+    checkmarkOnClick: false,
+    propagatePrimaryButtonClick: true,
+    smallPaddingOnSmallMobiles: false,
+    handleError: (func) => func(),
+};

package/stories/atoms/buttons/Button/Button.module.scss

@@ -0,0 +1,212 @@
+@import "../../../../styles/index";
+
+.button {
+    @extend %text-very-bold;
+    @extend %hover-state;
+    transition-property: all;
+    transition-duration: 0.1s;
+    font-size: 16px;
+    -webkit-border-radius: 200px;
+    -moz-border-radius: 200px;
+    border-radius: 200px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    white-space: nowrap;
+    position: relative;
+    user-select: none;
+
+    &.disable {
+        &,
+        &:hover,
+        &:active {
+            background-color: LightColor("grey-20") !important;
+            color: SolidColor("grey") !important;
+            cursor: default !important;
+            box-shadow: none !important;
+        }
+    }
+
+    @media (max-width: $tablet-width) {
+        &.full-width-on-tablets {
+            max-width: 100%;
+            width: 100%;
+        }
+    }
+
+    @media (max-width: $phone-width) {
+        font-size: 14px;
+        &.full-width-on-mobiles {
+            max-width: 100%;
+            width: 100%;
+        }
+    }
+
+    &.xl {
+        height: 66px;
+        padding: 0 64px;
+        @media (max-width: $phone-width) {
+            height: 48px;
+            padding: 0;
+        }
+    }
+
+    &.lg {
+        font-size: 14px;
+        height: 48px;
+        padding: 0 48px;
+        @media (max-width: $phone-width) {
+            height: 40px;
+        }
+    }
+    &.md {
+        height: 40px;
+        font-size: 14px;
+        padding: 0 32px;
+    }
+    &.sm {
+        height: 35px;
+        font-size: 12px;
+        padding: 0 24px;
+
+        // This is somewhat of a hack, which should absolutely be refactored with a better layout
+        &.small-padding-on-small-mobiles {
+            @media (max-width: 415px) {
+                padding: 0 18px;
+            }
+        }
+    }
+
+    &.primary {
+        box-shadow: 0 20px 40px 0 rgba(11, 137, 143, 0.39);
+        background: SolidColor(tosca);
+        color: $white;
+    }
+
+    &.primary-bordered {
+        border: $buttonBorder;
+        color: SolidColor(tosca);
+        &:hover {
+            background-color: LightColor("tosca-20");
+            transition-duration: 0.02s;
+            opacity: 1;
+        }
+    }
+
+    &.primary-transparent {
+        background: LightColor(army-20);
+        color: SolidColor(tosca);
+    }
+
+    &.transparent {
+        background: LightColor(white-20);
+        color: $white;
+        box-shadow: 0 23px 30px 0 rgba(0, 102, 107, 0.39);
+    }
+
+    &.transparent-bordered {
+        border: $buttonBorderWhite;
+        color: $white;
+    }
+
+    &.transparent-without-shadow {
+        background: transparent;
+        border-color: transparent;
+        color: SolidColor(tosca);
+    }
+
+    &.white {
+        background: $white;
+        color: #39448e;
+        box-shadow: 0 20px 20px rgba(15, 24, 75, 0.2);
+    }
+
+    &-primary-dots-wrapper {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%) scale(1.15);
+        transition: all 0.1s $transitionEaseOut;
+        opacity: 0;
+
+        &.show {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
+        }
+    }
+
+    &-success-icon {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        opacity: 0;
+        width: 20px;
+        height: 20px;
+        transform: translate(-50%, -50%) scale(1.4);
+        transition: all 0.1s $transitionEaseOut;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &.show {
+            opacity: 1;
+            transform: translate(-50%, -50%) scale(1);
+        }
+
+        &::after {
+            content: " ";
+            display: inline-block;
+            transform: rotate(45deg);
+            height: 10px;
+            width: 5px;
+            border-bottom: 3px solid SolidColor(tosca);
+            border-right: 3px solid SolidColor(tosca);
+            margin-top: -4px;
+        }
+
+        &.transparent-bordered::after,
+        &.transparent::after,
+        &.primary::after {
+            border-color: $white;
+        }
+
+        &.primary-bordered::after,
+        &.primary-transparent::after,
+        &.transparent-without-shadow::after {
+            border-color: SolidColor(tosca);
+        }
+    }
+
+    &-text {
+        user-select: none;
+        transform: scale(1);
+        transition: all 0.1s $transitionEaseOut;
+        &.hide {
+            opacity: 0;
+            transform: scale(0.9);
+        }
+    }
+
+    .button-with-icon {
+        display: flex;
+        align-items: center;
+        transform: scale(1);
+        transition: all 0.1s $transitionEaseOut;
+
+        &.hide {
+            opacity: 0;
+            transform: scale(0.9);
+        }
+
+        &-text {
+            margin-left: Margin("3");
+        }
+
+        &.big-icon {
+            img {
+                height: 24px;
+            }
+        }
+    }
+}

package/stories/index.js

@@ -0,0 +1,2 @@
+export { Button } from "./atoms/buttons/Button/Button.jsx";
+export { LoadingDots } from "./atoms/LoadingDots/LoadingDots.jsx";