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

package/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rabbitio/ui-kit",
-    "version": "1.0.0-beta.6",
+    "version": "1.0.0-beta.61",
     "description": "Rabbit.io react.js components kit",
     "type": "module",
     "main": "./dist/index.cjs",
@@ -15,10 +15,13 @@
         "./index.css": "./dist/index.css"
     },
     "scripts": {
+        "prepare": "husky",
         "build": "rm -rf dist && microbundle --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx --visualize",
         "prepublish": "npm run build",
         "storybook": "storybook dev -p 6006",
-        "build-storybook": "storybook build"
+        "build-storybook": "storybook build",
+        "test-watching": "vitest",
+        "test": "vitest run --coverage"
     },
     "keywords": [
         "rabbit.io",
@@ -38,8 +41,21 @@
         "react-dom": ">=18.2.0"
     },
     "dependencies": {
+        "animated-scroll-to": "2.3.0",
+        "axios": "1.6.7",
+        "bignumber.js": "9.1.2",
+        "body-scroll-lock": "3.1.5",
+        "clipboard-copy": "4.0.1",
+        "eventbusjs": "0.2.0",
+        "jshashes": "1.0.8",
+        "qrcode": "1.4.4",
         "react": ">=18.2.0",
-        "react-dom": ">=18.2.0"
+        "react-animate-height": "3.2.3",
+        "react-dom": ">=18.2.0",
+        "react-textarea-autosize": "^8.5.3",
+        "react-transition-group": "4.4.5",
+        "resize-observer-polyfill": "1.5.1",
+        "uuid": "9.0.0"
     },
     "devDependencies": {
         "@storybook/addon-actions": "^7.6.6",
@@ -54,18 +70,24 @@
         "@storybook/react": "^7.6.6",
         "@storybook/react-webpack5": "^7.6.6",
         "@storybook/test": "^7.6.6",
+        "@vitest/coverage-v8": "^1.5.0",
+        "husky": "^9.0.11",
         "microbundle": "^0.15.1",
         "prettier": "^3.1.1",
         "prop-types": "^15.8.1",
         "resolve-url-loader": "^5.0.0",
         "sass": "^1.70.0",
         "sass-loader": "^14.1.0",
+        "should": "13.2.3",
+        "sinon": "17.0.1",
         "storybook": "^7.6.6",
-        "style-loader": "^3.3.3"
+        "style-loader": "^3.3.3",
+        "vitest": "1.5.0"
     },
     "prettier": {
         "trailingComma": "es5",
         "tabWidth": 4,
-        "singleQuote": false
+        "singleQuote": false,
+        "printWidth": 80
     }
 }

package/src/assets/image/icons/arrow-tosca.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2431 6L8.00045 10.2426L3.75781 6" stroke="#16CDD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/assets/wrappedImages/arrowIcon.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+export default () => (
+    <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#232d42"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+);

package/src/assets/wrappedImages/arrowTosca.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+// Originally: arrow-tosca.svg
+export default () => (
+    <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#16CDD6"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+);

package/src/assets/wrappedImages/arrowWhite.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+// Originally: arrow-tosca.svg
+export default () => (
+    <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12.2431 6L8.00045 10.2426L3.75781 6"
+            stroke="#fff"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+);

package/src/assets/wrappedImages/darkRectangle.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default () => (
+    <svg
+        width="25"
+        height="13"
+        viewBox="0 0 25 13"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12.5 13L25 0H0L12.5 13Z"
+            fill="#232D42"
+        />
+    </svg>
+);

package/src/assets/wrappedImages/determinedError.jsx

@@ -0,0 +1,129 @@
+import React from "react";
+
+// Originally: determined-error.svg
+export default () => (
+    <svg
+        id="Group_5"
+        data-name="Group 5"
+        xmlns="http://www.w3.org/2000/svg"
+        width="173"
+        height="173"
+        viewBox="0 0 173 173"
+    >
+        <defs>
+            <clipPath id="clip-path">
+                <circle id="Oval" cx="86.5" cy="86.5" r="86.5" fill="#ffa799" />
+            </clipPath>
+        </defs>
+        <g id="Group_2" data-name="Group 2">
+            <circle
+                id="Oval-2"
+                data-name="Oval"
+                cx="86.5"
+                cy="86.5"
+                r="86.5"
+                fill="#ffa799"
+            />
+            <g id="Group_2-2" data-name="Group 2" clip-path="url(#clip-path)">
+                <g
+                    id="Group_232"
+                    data-name="Group 232"
+                    transform="translate(-5 -4)"
+                >
+                    <rect
+                        id="Rectangle"
+                        width="30"
+                        height="172"
+                        transform="translate(122.205 0.582) rotate(45)"
+                        fill="#fff"
+                        opacity="0.3"
+                    />
+                    <rect
+                        id="Rectangle-2"
+                        data-name="Rectangle"
+                        width="30"
+                        height="172"
+                        transform="translate(161.205 36.582) rotate(45)"
+                        fill="#fff"
+                        opacity="0.3"
+                    />
+                    <path
+                        id="Rectangle-3"
+                        data-name="Rectangle"
+                        d="M12,0H146a0,0,0,0,1,0,0V128a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V12A12,12,0,0,1,12,0Z"
+                        transform="translate(34 53)"
+                        fill="#f18573"
+                    />
+                    <path
+                        id="Rectangle-4"
+                        data-name="Rectangle"
+                        d="M4,0H97a4,4,0,0,1,4,4V92a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V4A4,4,0,0,1,4,0Z"
+                        transform="translate(43 91)"
+                        fill="#e95d44"
+                        opacity="0.5"
+                    />
+                    <path
+                        id="Rectangle-5"
+                        data-name="Rectangle"
+                        d="M12,0H146a0,0,0,0,1,0,0V28a0,0,0,0,1,0,0H0a0,0,0,0,1,0,0V12A12,12,0,0,1,12,0Z"
+                        transform="translate(34 53)"
+                        fill="#eb5e49"
+                    />
+                    <circle
+                        id="Oval-3"
+                        data-name="Oval"
+                        cx="4"
+                        cy="4"
+                        r="4"
+                        transform="translate(44 63)"
+                        fill="#ffa191"
+                    />
+                    <circle
+                        id="Oval-4"
+                        data-name="Oval"
+                        cx="4"
+                        cy="4"
+                        r="4"
+                        transform="translate(57 63)"
+                        fill="#ffa191"
+                    />
+                    <circle
+                        id="Oval-5"
+                        data-name="Oval"
+                        cx="4"
+                        cy="4"
+                        r="4"
+                        transform="translate(70 63)"
+                        fill="#ffa191"
+                    />
+                </g>
+            </g>
+        </g>
+        <g id="Group_3" data-name="Group 3" transform="translate(63 105)">
+            <g id="Group_4" data-name="Group 4">
+                <path
+                    id="Path"
+                    d="M24.75,0A24.745,24.745,0,1,0,39.078,4.567"
+                    fill="none"
+                    stroke="#fff"
+                    stroke-linecap="round"
+                    stroke-miterlimit="10"
+                    stroke-width="3.6"
+                />
+                <text
+                    id="_"
+                    data-name="!"
+                    transform="translate(25.2 38.8)"
+                    fill="#fff"
+                    font-size="34.2"
+                    font-family="SegoeUI, Segoe UI"
+                    letter-spacing="0.023em"
+                >
+                    <tspan x="-4.859" y="0">
+                        !
+                    </tspan>
+                </text>
+            </g>
+        </g>
+    </svg>
+);

package/src/assets/wrappedImages/failedValidationIcon.jsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+export default () => (
+    <svg
+        width="27"
+        height="27"
+        viewBox="0 0 27 27"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect
+            opacity="0.8"
+            x="1.5"
+            y="1.5"
+            width="24"
+            height="24"
+            rx="12"
+            fill="#DAF1FE"
+        />
+        <path
+            d="M12.3259 10.5855C12.2575 9.8896 12.8063 9.28745 13.5055 9.29121C14.2008 9.29495 14.7418 9.8964 14.6722 10.5881L14.1937 15.3431C14.1575 15.7026 13.855 15.9762 13.4937 15.9762C13.1319 15.9762 12.829 15.7017 12.7936 15.3415L12.3259 10.5855Z"
+            fill="url(#paint0_linear)"
+        />
+        <path
+            d="M13.514 17.1182C14.1325 17.1182 14.634 17.6196 14.634 18.2382C14.634 18.8567 14.1325 19.3582 13.514 19.3582H13.486C12.8674 19.3582 12.366 18.8567 12.366 18.2382C12.366 17.6196 12.8674 17.1182 13.486 17.1182H13.514Z"
+            fill="url(#paint1_linear)"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear"
+                x1="17.3456"
+                y1="14.0483"
+                x2="11.6522"
+                y2="12.8896"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+            <linearGradient
+                id="paint1_linear"
+                x1="17.3456"
+                y1="14.2383"
+                x2="11.6522"
+                y2="13.0796"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);

package/src/assets/wrappedImages/infoIcon.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export default () => (
+    <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24Z"
+            fill="#8C9CBF"
+        />
+        <path
+            d="M11.6001 9.65598H13.6001V17.48H11.6001V9.65598ZM13.6961 6.02398V7.99198H11.4881V6.02398H13.6961Z"
+            fill="white"
+        />
+    </svg>
+);

package/src/assets/wrappedImages/noticeQuestionIcon.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+export default () => (
+    <svg
+        width="17"
+        height="17"
+        viewBox="0 0 17 17"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect x="0.5" y="0.25" width="16" height="16" rx="8" fill="#DAF1FE" />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.44968 9.62287C8.0213 9.62287 7.67264 9.24008 7.815 8.83604C7.84547 8.74956 7.87999 8.67275 7.91856 8.61686C8.10216 8.35084 8.37005 8.06047 8.72224 7.74574C8.99201 7.50594 9.19246 7.298 9.3236 7.1219C9.45474 6.9458 9.52031 6.74535 9.52031 6.52054C9.52031 6.20581 9.39292 5.95103 9.13814 5.7562C8.88335 5.56137 8.5424 5.46395 8.11527 5.46395C7.62404 5.46395 7.05412 5.78283 6.68203 6.03347C6.43716 6.19842 6.11362 6.21939 5.86602 6.05857C5.51562 5.83099 5.45796 5.34121 5.77515 5.06925C5.99176 4.88352 6.23474 4.69937 6.44046 4.60407C6.95003 4.36802 7.5495 4.25 8.23891 4.25C9.07819 4.25 9.74698 4.43172 10.2453 4.79516C10.7436 5.15859 10.9928 5.65878 10.9928 6.29574C10.9928 6.60297 10.9422 6.87274 10.841 7.10504C10.7399 7.33734 10.6181 7.53404 10.4757 7.69516C10.3334 7.85627 10.146 8.04173 9.91372 8.25155C9.62896 8.50633 9.41727 8.73114 9.27864 8.92597C9.25936 8.95306 9.24143 8.98609 9.22483 9.02289C9.0785 9.34733 8.8056 9.62287 8.44968 9.62287Z"
+            fill="url(#paint1_linear)"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8.3626 12.3094C8.10033 12.3094 7.88489 12.2251 7.71629 12.0565C7.54768 11.8879 7.46338 11.6799 7.46338 11.4326C7.46338 11.1854 7.54768 10.9793 7.71629 10.8144C7.88489 10.6496 8.10033 10.5671 8.3626 10.5671C8.61739 10.5671 8.82908 10.6496 8.99768 10.8144C9.16629 10.9793 9.25059 11.1854 9.25059 11.4326C9.25059 11.6799 9.16629 11.8879 8.99768 12.0565C8.82908 12.2251 8.61739 12.3094 8.3626 12.3094Z"
+            fill="url(#paint2_linear)"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear"
+                x1="25.862"
+                y1="18.5044"
+                x2="12.7031"
+                y2="-2.23444"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#FCE2F0" />
+                <stop offset="1" stop-color="#F7EAFD" />
+            </linearGradient>
+            <linearGradient
+                id="paint1_linear"
+                x1="14.2067"
+                y1="10.3799"
+                x2="9.83017"
+                y2="3.3283"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+            <linearGradient
+                id="paint2_linear"
+                x1="10.2963"
+                y1="12.5549"
+                x2="8.87929"
+                y2="10.2639"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);

package/src/assets/wrappedImages/successfulValidationIcon.jsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+export default () => (
+    <svg
+        width="27"
+        height="27"
+        viewBox="0 0 27 27"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <rect
+            opacity="0.8"
+            x="1.5"
+            y="1.5"
+            width="24"
+            height="24"
+            rx="12"
+            fill="#DAF1FE"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M11.8703 15.7837L9.64348 13.5569C9.30357 13.217 8.75246 13.217 8.41255 13.5569C8.07264 13.8968 8.07264 14.4479 8.41255 14.7878L11.2351 17.6104C11.5672 17.9425 12.103 17.9512 12.4457 17.6301L18.4492 12.0049C18.8 11.6762 18.8179 11.1254 18.4892 10.7746C18.1605 10.4238 17.6097 10.4059 17.2589 10.7346L11.8703 15.7837Z"
+            fill="url(#paint0_linear)"
+        />
+        <defs>
+            <linearGradient
+                id="paint0_linear"
+                x1="19.8333"
+                y1="18.9098"
+                x2="15.586"
+                y2="7.2736"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop stop-color="#55E7D9" />
+                <stop offset="1" stop-color="#54B4FF" />
+            </linearGradient>
+        </defs>
+    </svg>
+);

package/src/assets/wrappedImages/walletIcon.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+export default () => (
+    <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <path
+            d="M12.6265 10.4119V12.2379C12.6265 12.7338 12.193 13.1356 11.6583 13.1356H3.26825C2.73352 13.1356 2.29999 12.7338 2.29999 12.2379V3.79771C2.29999 3.30178 2.73352 2.89999 3.26825 2.89999H11.6583C12.193 2.89999 12.6265 3.30178 12.6265 3.79771V5.84996"
+            stroke="#8F95A2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M13.0952 10.1922H10.2664C9.0847 10.1922 8.12704 9.23439 8.12704 8.05246C8.12704 6.87052 9.0847 5.91269 10.2664 5.91269H13.0952C13.4072 5.91269 13.66 6.16552 13.66 6.47758V9.62689C13.66 9.93939 13.4072 10.1922 13.0952 10.1922Z"
+            stroke="#8F95A2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M2.29999 4.73721H4.99884"
+            stroke="#8F95A2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+        <path
+            d="M2.29999 11.3122H4.99884"
+            stroke="#8F95A2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+        />
+    </svg>
+);

package/src/common/adapters/axiosAdapter.js

@@ -0,0 +1,35 @@
+import axios from "axios";
+
+export class AxiosAdapter {
+    static async call(method, ...args) {
+        return await axios[method](...args);
+    }
+
+    static async get(...args) {
+        return await axios.get(...args);
+    }
+
+    static async post(...args) {
+        return await axios.post(...args);
+    }
+
+    static async put(...args) {
+        return await axios.put(...args);
+    }
+
+    static async delete(...args) {
+        return await axios.delete(...args);
+    }
+
+    static async patch(...args) {
+        return await axios.patch(...args);
+    }
+
+    static async options(...args) {
+        return await axios.options(...args);
+    }
+
+    static async head(...args) {
+        return await axios.head(...args);
+    }
+}

package/src/common/adapters/qrUtils.js

@@ -0,0 +1,18 @@
+import QRCode from "qrcode";
+
+import { improveAndRethrow } from "../errorUtils";
+
+/**
+ * Generates QR as svg xml string.
+ * Note that you should care about the element size by your self - the generated QR will just fill all available space
+ *
+ * @param encodingString {string} to be encoded as QR-code image
+ * @return {Promise<string>} xml string of generated svg image
+ */
+export async function generateQrAndShowInCanvas(encodingString) {
+    try {
+        return await QRCode.toString(encodingString, { type: "svg" });
+    } catch (e) {
+        improveAndRethrow(e, "generateQrAndShowInCanvas");
+    }
+}