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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.6",
+    "version": "1.0.0-beta.7",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",

package/stories/atoms/AssetIcon/AssetIcon.js

@@ -0,0 +1,55 @@
+import React from "react";
+
+import s from "./asset-icon.module.scss";
+import PropTypes from "prop-types";
+
+export const AssetIcon = ({
+    assetIconSrc,
+    assetIconProtocolScr = null,
+    fallbackSrc = null,
+    small = false,
+}) => {
+    const handleFailedLoad = (e) => {
+        e.target.onerror = null;
+        e.target.src = fallbackSrc;
+    };
+
+    return (
+        <div className={s["asset-icon"] + (small ? " " + s["small"] : "")}>
+            <img
+                src={assetIconSrc}
+                className={
+                    s["asset-icon-primary"] + (small ? " " + s["small"] : "")
+                }
+                alt={" "}
+                onError={handleFailedLoad}
+            />
+            {assetIconProtocolScr ? (
+                <img
+                    src={assetIconProtocolScr}
+                    className={
+                        s["asset-icon-secondary"] +
+                        (small ? " " + s["small"] : "")
+                    }
+                    alt={" "}
+                    onError={handleFailedLoad}
+                />
+            ) : (
+                ""
+            )}
+        </div>
+    );
+};
+
+AssetIcon.propTypes = {
+    assetIconSrc: PropTypes.string.isRequired,
+    assetIconProtocolScr: PropTypes.string,
+    fallbackSrc: PropTypes.string,
+    small: PropTypes.bool,
+};
+
+AssetIcon.defaultProps = {
+    assetIconProtocolScr: null,
+    fallbackSrc: null,
+    small: false,
+};

package/stories/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/atoms/SupportChat/SupportChat.js

@@ -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/index.js

@@ -1,2 +1,4 @@
 export { Button } from "./atoms/buttons/Button/Button.jsx";
 export { LoadingDots } from "./atoms/LoadingDots/LoadingDots.jsx";
+export { SupportChat } from "./atoms/SupportChat/SupportChat.js";
+export { AssetIcon } from "./atoms/AssetIcon/AssetIcon.js";