@rabbitio/ui-kit 1.0.0-alpha.9 → 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;
 }

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

@@ -1,7 +0,0 @@
-<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.stories.jsx

@@ -1,47 +0,0 @@
-// import { LoadingDots } from "./../../../dist/index";
-import React from "react";
-import { LoadingDots } from "./LoadingDots.jsx";
-
-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.stories.jsx

@@ -1,289 +0,0 @@
-import React from "react";
-import { Button } from "./Button.jsx";
-import icon from "../../../assets/icons/transactions-icon.svg";
-
-// import { Button } from "./../../../../dist/web/index";
-// const Button = RabbitioUiKit.Button;
-
-const sizes = ["xl", "lg", "md", "sm"];
-const modes = [
-    "transparent",
-    "white",
-    "primary",
-    "primary-bordered",
-    "primary-transparent",
-    "transparent-bordered",
-    "transparent-without-shadow",
-];
-
-export default {
-    title: "Button",
-    component: Button,
-    parameters: {
-        viewport: {
-            defaultViewport: "reset",
-        },
-        backgrounds: {
-            default: "dark",
-        },
-    },
-    argTypes: {
-        size: {
-            control: { type: "select", options: sizes },
-        },
-        content: { control: "text" },
-        className: { table: { disable: true } },
-        onClick: { table: { disable: true } },
-        to: { table: { disable: true } },
-        icon: { table: { disable: true } },
-        setClickTrigger: { table: { disable: true } },
-        isFormSubmittingButton: { table: { disable: true } },
-        propagatePrimaryButtonClick: { table: { disable: true } },
-        handleError: { table: { disable: true } },
-    },
-    tags: ["autodocs"],
-};
-
-const ModeStory = ({ mode }) => (
-    <>
-        {sizes.map((size) => (
-            <div key={size} style={{ marginBottom: "10px" }}>
-                <Button
-                    size={size}
-                    mode={mode}
-                    content={`${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } ${size.toUpperCase()} Button`}
-                />
-            </div>
-        ))}
-    </>
-);
-
-const Template = (args) => <Button {...args} />;
-
-export const Default = Template.bind({});
-Default.args = { content: "Button" };
-
-export const Transparent = () => <ModeStory mode="transparent" />;
-
-export const White = () => <ModeStory mode="white" />;
-
-export const Primary = () => <ModeStory mode="primary" />;
-
-export const PrimaryBordered = () => <ModeStory mode="primary-bordered" />;
-
-export const PrimaryTransparent = () => (
-    <ModeStory mode="primary-transparent" />
-);
-
-export const TransparentBordered = () => (
-    <ModeStory mode="transparent-bordered" />
-);
-
-export const TransparentWithoutShadow = () => (
-    <ModeStory mode="transparent-without-shadow" />
-);
-
-// TODO: [dev] requires fix
-// export const LinkButton = () => (
-//     <>
-//         <h3>Link Button</h3>
-//         {sizes.map((size) => (
-//             <div key={size} style={{ marginBottom: "10px" }}>
-//                 <Button
-//                     size={size}
-//                     mode="primary"
-//                     content={`Link ${size.toUpperCase()} Button`}
-//                     to="/example-path"
-//                 />
-//             </div>
-//         ))}
-//     </>
-// );
-
-export const LoadingButton = () => (
-    <>
-        <h3>Loading Button</h3>
-        {sizes.map((size) => (
-            <div key={size} style={{ marginBottom: "10px" }}>
-                <Button
-                    size={size}
-                    mode="primary"
-                    content={`Loading ${size.toUpperCase()} Button`}
-                    loader={true}
-                    loading={true}
-                />
-            </div>
-        ))}
-    </>
-);
-
-export const IconButton = () => (
-    <>
-        <h3>Button with Icon</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "20px" }}>
-                <h4>Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}</h4>
-                {sizes.map((size) => (
-                    <div key={size} style={{ marginBottom: "10px" }}>
-                        <Button
-                            size={size}
-                            mode={mode}
-                            icon={icon}
-                            content={`${
-                                mode.charAt(0).toUpperCase() + mode.slice(1)
-                            } ${size.toUpperCase()} Button with Icon`}
-                        />
-                    </div>
-                ))}
-            </div>
-        ))}
-    </>
-);
-
-export const DisabledButton = () => (
-    <>
-        <h3>Disabled Button</h3>
-        {sizes.map((size) => (
-            <div
-                key={size}
-                style={{
-                    marginBottom: "10px",
-                    display: "flex",
-                    justifyContent: "space-between",
-                }}
-            >
-                <Button
-                    size={size}
-                    mode={"primary"}
-                    content={`${size.toUpperCase()} Button`}
-                    isDisabled={true}
-                />
-                <div style={{ marginRight: "10px" }} />
-                <Button
-                    size={size}
-                    mode={"primary"}
-                    icon={icon}
-                    content={`${size.toUpperCase()} Button with Icon`}
-                    isDisabled={true}
-                />
-            </div>
-        ))}
-    </>
-);
-
-export const CheckmarkOnClickButton = () => (
-    <>
-        <h3>Button with Checkmark on Click</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "10px" }}>
-                <Button
-                    size={"xl"}
-                    mode={mode}
-                    content={`${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } XL Button`}
-                    checkmarkOnClick={true}
-                    loader={false}
-                />
-            </div>
-        ))}
-    </>
-);
-
-export const BigIconButton = () => (
-    <>
-        <h3>Button with Big Icon</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "20px" }}>
-                <h4>Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}</h4>
-                {sizes.map((size) => (
-                    <div key={size} style={{ marginBottom: "10px" }}>
-                        <Button
-                            size={size}
-                            mode={mode}
-                            icon={icon}
-                            content={`${
-                                mode.charAt(0).toUpperCase() + mode.slice(1)
-                            } ${size.toUpperCase()} Button with Big Icon`}
-                            bigIcon={true}
-                        />
-                    </div>
-                ))}
-            </div>
-        ))}
-    </>
-);
-
-export const FullWidthOnMobiles = () => (
-    <>
-        <h3>Full Width on Mobiles</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "10px" }}>
-                <Button
-                    mode={mode}
-                    content={`Full Width Mobile ${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } Button`}
-                    fullWidthOnMobiles={true}
-                />
-            </div>
-        ))}
-    </>
-);
-FullWidthOnMobiles.parameters = {
-    viewport: {
-        defaultViewport: "iphone14promax",
-    },
-};
-
-export const FullWidthOnTablets = () => (
-    <>
-        <h3>Full Width on Tablets</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "10px" }}>
-                <Button
-                    mode={mode}
-                    content={`Full Width Tablet ${
-                        mode.charAt(0).toUpperCase() + mode.slice(1)
-                    } Button`}
-                    fullWidthOnTablets={true}
-                />
-            </div>
-        ))}
-    </>
-);
-FullWidthOnTablets.parameters = {
-    viewport: {
-        defaultViewport: "ipad",
-    },
-};
-
-export const SmallPaddingOnSmallMobilesButton = () => (
-    <>
-        <h3>Button with Small Padding on Small Mobiles</h3>
-        {modes.map((mode) => (
-            <div key={mode} style={{ marginBottom: "20px" }}>
-                <h4>Mode: {mode.charAt(0).toUpperCase() + mode.slice(1)}</h4>
-                {sizes.map((size) => (
-                    <div key={size} style={{ marginBottom: "10px" }}>
-                        <Button
-                            size={size}
-                            mode={mode}
-                            content={`${
-                                mode.charAt(0).toUpperCase() + mode.slice(1)
-                            } ${size.toUpperCase()} Button`}
-                            smallPaddingOnSmallMobiles={true}
-                        />
-                    </div>
-                ))}
-            </div>
-        ))}
-    </>
-);
-SmallPaddingOnSmallMobilesButton.parameters = {
-    viewport: {
-        defaultViewport: "iphone14",
-    },
-};

package/stories/index.js

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