@rabbitio/ui-kit 1.0.0-alpha.1

package/.storybook/main.js

@@ -0,0 +1,77 @@
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
+    stories: [
+        "../stories/**/*.mdx",
+        "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    ],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-onboarding",
+        "@storybook/addon-interactions",
+        "@storybook/addon-viewport",
+        "@storybook/addon-actions",
+        {
+            name: "@storybook/addon-styling-webpack",
+            options: {
+                rules: [
+                    {
+                        test: /\.css$/,
+                        sideEffects: true,
+                        use: [
+                            require.resolve("style-loader"),
+                            {
+                                loader: require.resolve("css-loader"),
+                                options: {
+                                    // Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
+                                    modules: {
+                                        auto: true,
+                                    },
+                                },
+                            },
+                        ],
+                    },
+                    {
+                        test: /\.s[ac]ss$/,
+                        sideEffects: true,
+                        use: [
+                            require.resolve("style-loader"),
+                            {
+                                loader: require.resolve("css-loader"),
+                                options: {
+                                    // Want to add more CSS Modules options? Read more here: https://github.com/webpack-contrib/css-loader#modules
+                                    modules: {
+                                        auto: true,
+                                    },
+                                    importLoaders: 2,
+                                },
+                            },
+                            require.resolve("resolve-url-loader"),
+                            {
+                                loader: require.resolve("sass-loader"),
+                                options: {
+                                    // Want to add more Sass options? Read more here: https://webpack.js.org/loaders/sass-loader/#options
+                                    implementation: require.resolve("sass"),
+                                    sourceMap: true,
+                                    sassOptions: {},
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        },
+    ],
+    framework: {
+        name: "@storybook/react-webpack5",
+        options: {
+            builder: {
+                useSWC: true,
+            },
+        },
+    },
+    docs: {
+        autodocs: "tag",
+    },
+};
+export default config;

package/.storybook/preview.js

@@ -0,0 +1,51 @@
+import {
+    INITIAL_VIEWPORTS,
+    MINIMAL_VIEWPORTS,
+} from "@storybook/addon-viewport";
+
+// $wide-desktop-width: 1279.98px;
+// $desktop-width: 1199.98px;
+// $laptop-width: 991.98px;
+// $tablet-width: 767.98px;
+// $phone-width: 575.98px;
+// $extra-small: 358.98px;
+
+const customViewPorts = {
+    // wideDesktop: {
+    //   name: 'wide-desktop',
+    //   styles: {
+    //     width: '1279.98px',
+    //     height: '963px',
+    //   },
+    // },
+};
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        layout: "centered",
+        viewport: {
+            viewports: {
+                ...customViewPorts,
+                ...MINIMAL_VIEWPORTS,
+                ...INITIAL_VIEWPORTS,
+            },
+            defaultViewport: "reset",
+        },
+        backgrounds: {
+            default: "light",
+            values: [
+                { name: "dark", value: "#232d42" },
+                { name: "light", value: "#ffffff" },
+            ],
+        },
+    },
+};
+
+export default preview;

package/Dockerfile

@@ -0,0 +1,20 @@
+# Use an official Node runtime as a base image
+FROM node:16
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json to the working directory
+COPY package*.json ./
+
+# Install app dependencies
+RUN npm install
+
+# Copy the rest of the application code to the working directory
+COPY . .
+
+# Expose the port that Storybook will run on
+EXPOSE 6006
+
+# Run Storybook when the container launches
+CMD ["npm", "run", "storybook", "-p", "6006"]

package/README.md

@@ -0,0 +1,31 @@
+# Installation
+1. run
+~~~
+npm install --save @rabbitio/ui-kit
+~~~
+
+# Using library
+1. To use components just import them
+~~~
+import { Button } from "@rabbitio/ui-kit";
+~~~
+2. Also, you should always import base styles into your scss index file: 
+~~~
+@import "@rabbitio/ui-kit/styles/index";
+~~~
+
+# Adding new component
+1. Add a directory for component under the semantically corresponding subdirectory inside **./stories**
+2. Under the component directory implement 3 files: **<Component>.js**, **<Component>.module.scss**, **<Component>.stories.js**
+3. Add the implemented component import to barrel file **./stories/index.js**
+~~~
+export { default as <Component> } from "./path/to/<Component>";
+~~~
+
+# Running storybook
+~~~
+sudo docker build -t storybook-app .
+~~~
+~~~
+sudo docker run -d -p 6006:6006 storybook-app
+~~~

package/index.js

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

package/package.json

@@ -0,0 +1,55 @@
+{
+    "name": "@rabbitio/ui-kit",
+    "version": "1.0.0-alpha.1",
+    "description": "Rabbit.io react.js components kit",
+    "main": "index.js",
+    "scripts": {
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
+    },
+    "keywords": [
+        "rabbit.io",
+        "rabbitio",
+        "react",
+        "scss",
+        "ui-kit"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "https://gitlab.com/rabbitio/ui-kit.git"
+    },
+    "author": "admin@rabbit.io",
+    "license": "MIT",
+    "dependencies": {
+        "react": "17.0.2",
+        "react-dom": "17.0.2",
+        "react-router-dom": "6.21.1"
+    },
+    "devDependencies": {
+        "@storybook/addon-actions": "^7.6.6",
+        "@storybook/addon-backgrounds": "^7.6.6",
+        "@storybook/addon-essentials": "^7.6.6",
+        "@storybook/addon-interactions": "^7.6.6",
+        "@storybook/addon-links": "^7.6.6",
+        "@storybook/addon-onboarding": "^1.0.10",
+        "@storybook/addon-styling-webpack": "^0.0.5",
+        "@storybook/addon-viewport": "^7.6.6",
+        "@storybook/blocks": "^7.6.6",
+        "@storybook/react": "^7.6.6",
+        "@storybook/react-webpack5": "^7.6.6",
+        "@storybook/test": "^7.6.6",
+        "css-loader": "^6.8.1",
+        "node-sass": "^7.0.3",
+        "prop-types": "^15.8.1",
+        "resolve-url-loader": "^5.0.0",
+        "sass": "^1.69.5",
+        "sass-loader": "^13.3.3",
+        "storybook": "^7.6.6",
+        "style-loader": "^3.3.3"
+    },
+    "prettier": {
+        "trailingComma": "es5",
+        "tabWidth": 4,
+        "singleQuote": false
+    }
+}

package/stories/assets/icons/transactions-icon.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4926 15.7679V18.5068C19.4926 19.2507 18.8422 19.8534 18.04 19.8534H5.45266C4.65042 19.8534 4 19.2507 4 18.5068V5.84658C4 5.10268 4.65042 4.5 5.45266 4.5H18.04C18.8422 4.5 19.4926 5.10268 19.4926 5.84658V8.92496" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1958 15.4383H15.9518C14.1789 15.4383 12.7422 14.0016 12.7422 12.2287C12.7422 10.4558 14.1789 9.01904 15.9518 9.01904H20.1958C20.6639 9.01904 21.0431 9.39829 21.0431 9.86637V14.5904C21.0431 15.0591 20.6639 15.4383 20.1958 15.4383Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 7.25582H8.04903" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 17.1181H8.04903" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1414 12.2284C17.1414 12.778 16.6958 13.2229 16.1469 13.2229C15.5972 13.2229 15.1523 12.778 15.1523 12.2284C15.1523 11.6794 15.5972 11.2339 16.1469 11.2339C16.6958 11.2339 17.1414 11.6794 17.1414 12.2284Z" fill="white"/>
+</svg>

package/stories/atoms/LoadingDots/LoadingDots.js

@@ -0,0 +1,59 @@
+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.
+ */
+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,
+    ]),
+};
+
+export default LoadingDots;

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/LoadingDots/LoadingDots.stories.js

@@ -0,0 +1,46 @@
+import React from "react";
+import LoadingDots from "./LoadingDots";
+
+export default {
+    title: "LoadingDots",
+    component: LoadingDots,
+    parameters: {
+        backgrounds: {
+            default: "dark",
+        },
+    },
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+                options: ["big", "small", "extra-small"],
+            },
+        },
+        align: {
+            control: { type: "select", options: ["left", "right", false] },
+        },
+        isColored: { control: { type: "boolean" } },
+        noMargins: { control: { type: "boolean" } },
+    },
+    tags: ["autodocs"],
+};
+
+const Template = (args) => <LoadingDots {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const Colored = Template.bind({});
+Colored.args = {
+    isColored: true,
+};
+
+export const NoMargins = Template.bind({});
+NoMargins.args = {
+    noMargins: true,
+};
+
+export const AlignRight = Template.bind({});
+AlignRight.args = {
+    align: "right",
+};

package/stories/atoms/buttons/Button/Button.js

@@ -0,0 +1,237 @@
+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";
+
+/**
+ * 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}
+ */
+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(),
+};
+
+export default Button;