@rabbitio/ui-kit 1.0.0-beta.1 → 1.0.0-beta.10

package/src/components/atoms/AssetIcon/asset-icon.module.scss

@@ -0,0 +1,42 @@
+@import "../../../../styles/index";
+
+.asset-icon {
+    width: 34px;
+    height: 34px;
+    position: relative;
+
+    &.small {
+        width: 24px;
+        height: 24px;
+    }
+
+    &-primary {
+        height: 34px;
+        width: 34px;
+
+        &.small {
+            width: 24px;
+            height: 24px;
+        }
+    }
+
+    &-secondary {
+        width: 17px;
+        height: 17px;
+
+        position: absolute;
+        right: -3px;
+        bottom: -3px;
+        box-shadow: -2px -2px 4px 1px rgba(SolidColor("dark"), 0.3);
+        border-radius: 100%;
+
+        &.small {
+            width: 12px;
+            height: 12px;
+
+            right: -2px;
+            bottom: -2px;
+            box-shadow: -1px -1px 8px 1px rgba(SolidColor("dark"), 0.3);
+        }
+    }
+}

package/{stories → src/components}/atoms/LoadingDots/LoadingDots.module.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/index";
+@import "../../../../styles/index";
 
 .loading-dots {
     display: flex;

package/src/components/atoms/SupportChat/SupportChat.jsx

@@ -0,0 +1,40 @@
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+
+export const SupportChat = ({ url, websiteToken, welcomeMessage = "" }) => {
+    useEffect(() => {
+        window.chatwootSettings = {
+            position: "right",
+            type: "standard",
+            launcherTitle: welcomeMessage,
+        };
+        (function (d, t) {
+            var BASE_URL = url;
+            var g = d.createElement(t),
+                s = d.getElementsByTagName(t)[0];
+            g.src = BASE_URL + "/packs/js/sdk.js";
+            g.defer = true;
+            g.async = true;
+            s.parentNode.insertBefore(g, s);
+            g.onload = function () {
+                window.chatwootSDK.run({
+                    websiteToken: websiteToken,
+                    baseUrl: BASE_URL,
+                });
+            };
+        })(document, "script");
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return null;
+};
+
+SupportChat.propTypes = {
+    url: PropTypes.string.isRequired,
+    websiteToken: PropTypes.string.isRequired,
+    welcomeMessage: PropTypes.string,
+};
+
+SupportChat.defaultProps = {
+    welcomeMessage: "",
+};

package/{stories → src/components}/atoms/buttons/Button/Button.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Link } from "react-router-dom";
 import PropTypes from "prop-types";
 
 import styles from "./Button.module.scss";
@@ -9,7 +8,7 @@ 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`.
+ * This component can also be used as a link if "to" is provided.
  *
  * @component
  * @param {Object} props
@@ -108,11 +107,11 @@ export const Button = ({
         <>
             {isFormSubmittingButton ? <input type="submit" hidden /> : null}
             {to ? (
-                <Link
+                <a
                     className={classNames}
                     onClick={(e) => handleError(buttonClick, e)}
-                    to={to}
-                    innerRef={buttonRef}
+                    href={to}
+                    ref={buttonRef}
                 >
                     {icon ? (
                         <div
@@ -129,7 +128,7 @@ export const Button = ({
                     ) : (
                         content
                     )}
-                </Link>
+                </a>
             ) : (
                 <div
                     className={classNames}
@@ -188,6 +187,7 @@ Button.propTypes = {
     mode: PropTypes.oneOf([
         "transparent",
         "white",
+        "white-flat",
         "primary",
         "primary-bordered",
         "primary-transparent",

package/{stories → src/components}/atoms/buttons/Button/Button.module.scss

@@ -1,4 +1,4 @@
-@import "../../../../styles/index";
+@import "../../../../../styles/index";
 
 .button {
     @extend %text-very-bold;
@@ -122,6 +122,11 @@
         box-shadow: 0 20px 20px rgba(15, 24, 75, 0.2);
     }
 
+    &.white-flat {
+        background: $white;
+        color: SolidColor("dark");
+    }
+
     &-primary-dots-wrapper {
         position: absolute;
         top: 50%;

package/src/index.js

@@ -0,0 +1,10 @@
+// UI-KIT components
+export { Button } from "./components/atoms/buttons/Button/Button.jsx";
+export { LoadingDots } from "./components/atoms/LoadingDots/LoadingDots.jsx";
+export { SupportChat } from "./components/atoms/SupportChat/SupportChat.jsx";
+export { AssetIcon } from "./components/atoms/AssetIcon/AssetIcon.jsx";
+
+// Common code
+export { improveAndRethrow } from "./common/errorUtils.js";
+export { FiatCurrenciesService } from "./common/fiatCurrenciesService.js";
+export { AmountUtils } from "./common/amountUtils.js";

package/styles/index.scss

@@ -3,31 +3,31 @@
 @import "placeholder";
 
 @font-face {
-    src: url("fonts/NunitoSans-ExtraBold.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-ExtraBold.ttf");
+    //font-family: "NunitoSans";
     font-weight: $extra-bold;
 }
 
 @font-face {
-    src: url("fonts/NunitoSans-Bold.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-Bold.ttf");
+    //font-family: "NunitoSans";
     font-weight: $bold;
 }
 
 @font-face {
-    src: url("fonts/NunitoSans-SemiBold.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-SemiBold.ttf");
+    //font-family: "NunitoSans";
     font-weight: 600;
 }
 
 @font-face {
-    src: url("fonts/NunitoSans-Regular.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-Regular.ttf");
+    //font-family: "NunitoSans";
     font-weight: 400;
 }
 
 @font-face {
-    src: url("fonts/NunitoSans-Light.ttf");
-    font-family: "NunitoSans";
+    //src: url("fonts/NunitoSans-Light.ttf");
+    //font-family: "NunitoSans";
     font-weight: 300;
 }