@rabbitio/ui-kit 1.0.0-beta.8 → 1.0.0-beta.80

package/src/ui-kit/utils/urlQueryUtils.js

@@ -0,0 +1,62 @@
+const PARAMETER_VALUES_SEPARATOR = "|*|"; // Sting that with high probability will not be in the user's data
+
+/**
+ * Adds specified parameter with values to the URL query string
+ *
+ * @param parameterName - String - name of the parameter
+ * @param values - Array of String values
+ * @param updateURLCallback - callback that will be called with the updated query string. Can be used to save it to URL
+ */
+export function saveQueryParameterAndValues(parameterName, values, updateURLCallback = newQueryString => {}) {
+    let parametersAndValues = parseSearchString();
+    parametersAndValues = parametersAndValues.filter(parameterAndValues => parameterAndValues[0] !== parameterName);
+    const parameterValuesForURL = encodeURIComponent(values.join(PARAMETER_VALUES_SEPARATOR));
+    parametersAndValues.push([parameterName, parameterValuesForURL]);
+    const newQueryString = `?${parametersAndValues.map(parameterAndValues => parameterAndValues.join("=")).join("&")}`;
+    updateURLCallback(newQueryString);
+
+    return newQueryString;
+}
+
+/**
+ * Removes specified parameter with values from the URL query string
+ *
+ * @param parameterName - String - name of the parameter
+ * @param updateURLCallback - callback that will be called with the updated query string. Can be used to save it to URL
+ */
+// TODO: [tests, moderate] units required the same as or other functions in this module
+export function removeQueryParameterAndValues(parameterName, updateURLCallback = newQueryString => {}) {
+    let parametersAndValues = parseSearchString();
+    parametersAndValues = parametersAndValues.filter(parameterAndValues => parameterAndValues[0] !== parameterName);
+    const newQueryString = `?${parametersAndValues.map(parameterAndValues => parameterAndValues.join("=")).join("&")}`;
+    updateURLCallback(newQueryString);
+
+    return newQueryString;
+}
+
+/**
+ * Retrieves parameter values from the URL query string.
+ *
+ * If there are several parameters with the same name in the URL then all their values are returned
+ *
+ * @param name {string} - parameter name
+ * @return {string[]} [] - if the parameter is not present in URL. [""] - if parameter present but has empty value
+ */
+export function getQueryParameterValues(name) {
+    return parseSearchString()
+        .filter(parameterAndValue => parameterAndValue[0] === name)
+        .reduce((allValues, parameterAndValue) => {
+            const values = decodeURIComponent(parameterAndValue[1] || "").split(PARAMETER_VALUES_SEPARATOR);
+            return [...allValues, ...values];
+        }, []);
+}
+
+function parseSearchString() {
+    const trimmed = (window.location.search?.slice(1) || "").trim();
+
+    return (trimmed && trimmed.split("&").map(parameterAndValue => parameterAndValue.split("="))) || [];
+}
+
+export function getQueryParameterSingleValue(name) {
+    return (getQueryParameterValues(name) || [])[0];
+}

package/stories/stubs/exampleContent.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+export const exampleContent = (
+    <div
+        style={{
+            width: "100%",
+            height: "300px",
+            borderRadius: "16px",
+            background: "#eee",
+            color: "#bbb",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            fontSize: "12px",
+            fontFamily: "monospace",
+        }}
+    >
+        Example content
+    </div>
+);

package/stories/atoms/AssetIcon/AssetIcon.jsx

@@ -1,55 +0,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-
-import s from "./asset-icon.module.scss";
-
-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/index.js

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

package/styles/_global-classes.scss

@@ -1,433 +0,0 @@
-@import "functions";
-@import "placeholder";
-@import "variables";
-
-@for $i from 0 through 10 {
-    .m-#{$i} {
-        margin: #{$i * 4}px;
-    }
-    .p-#{$i} {
-        padding: #{$i * 4}px;
-    }
-}
-
-@for $i from 0 through 10 {
-    .ml-#{$i} {
-        margin-left: #{$i * 4}px;
-    }
-    .pl-#{$i} {
-        padding-left: #{$i * 4}px;
-    }
-}
-
-@for $i from 0 through 10 {
-    .mr-#{$i} {
-        margin-right: #{$i * 4}px;
-    }
-    .pr-#{$i} {
-        padding-right: #{$i * 4}px;
-    }
-}
-
-@for $i from 0 through 10 {
-    .mt-#{$i} {
-        margin-top: #{$i * 4}px;
-    }
-    .pt-#{$i} {
-        padding-top: #{$i * 4}px;
-    }
-}
-
-@for $i from 0 through 10 {
-    .mb-#{$i} {
-        margin-bottom: #{$i * 4}px;
-    }
-    .pb-#{$i} {
-        padding-bottom: #{$i * 4}px;
-    }
-}
-
-@for $i from 0 through 10 {
-    .mx-#{$i} {
-        margin-right: #{$i * 4}px;
-        margin-left: #{$i * 4}px;
-    }
-    .px-#{$i} {
-        padding-right: #{$i * 4}px;
-        padding-left: #{$i * 4}px;
-    }
-}
-
-@for $i from 0 through 10 {
-    .my-#{$i} {
-        margin-top: #{$i * 4}px;
-        margin-bottom: #{$i * 4}px;
-    }
-    .py-#{$i} {
-        padding-top: #{$i * 4}px;
-        padding-bottom: #{$i * 4}px;
-    }
-}
-
-@media (min-width: $phone-width) {
-    @for $i from 0 through 10 {
-        .m-sm-#{$i} {
-            margin: #{$i * 4}px;
-        }
-        .p-sm-#{$i} {
-            padding: #{$i * 4}px;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .ml-sm-#{$i} {
-            margin-left: #{$i * 4}px !important;
-        }
-        .pl-sm-#{$i} {
-            padding-left: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mr-sm-#{$i} {
-            margin-right: #{$i * 4}px !important;
-        }
-        .pr-sm-#{$i} {
-            padding-right: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mt-sm-#{$i} {
-            margin-top: #{$i * 4}px !important;
-        }
-        .pt-sm-#{$i} {
-            padding-top: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mb-sm-#{$i} {
-            margin-bottom: #{$i * 4}px !important;
-        }
-        .pb-sm-#{$i} {
-            padding-bottom: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mx-sm-#{$i} {
-            margin-right: #{$i * 4}px !important;
-            margin-left: #{$i * 4}px !important;
-        }
-        .px-sm-#{$i} {
-            padding-right: #{$i * 4}px !important;
-            padding-left: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .my-sm-#{$i} {
-            margin-top: #{$i * 4}px !important;
-            margin-bottom: #{$i * 4}px !important;
-        }
-
-        .py-sm-#{$i} {
-            padding-top: #{$i * 4}px !important;
-            padding-bottom: #{$i * 4}px !important;
-        }
-    }
-}
-
-@media (min-width: $laptop-width) {
-    @for $i from 0 through 10 {
-        .m-lg-#{$i} {
-            margin: #{$i * 4}px;
-        }
-        .p-lg-#{$i} {
-            padding: #{$i * 4}px;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .ml-lg-#{$i} {
-            margin-left: #{$i * 4}px !important;
-        }
-        .pl-lg-#{$i} {
-            padding-left: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mr-lg-#{$i} {
-            margin-right: #{$i * 4}px !important;
-        }
-        .pr-lg-#{$i} {
-            padding-right: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mt-lg-#{$i} {
-            margin-top: #{$i * 4}px !important;
-        }
-        .pt-lg-#{$i} {
-            padding-top: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mb-lg-#{$i} {
-            margin-bottom: #{$i * 4}px !important;
-        }
-        .pb-lg-#{$i} {
-            padding-bottom: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mx-lg-#{$i} {
-            margin-right: #{$i * 4}px !important;
-            margin-left: #{$i * 4}px !important;
-        }
-        .px-lg-#{$i} {
-            padding-right: #{$i * 4}px !important;
-            padding-left: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .my-lg-#{$i} {
-            margin-top: #{$i * 4}px !important;
-            margin-bottom: #{$i * 4}px !important;
-        }
-        .py-lg-#{$i} {
-            padding-top: #{$i * 4}px !important;
-            padding-bottom: #{$i * 4}px !important;
-        }
-    }
-}
-
-@media (min-width: $tablet-width) {
-    @for $i from 0 through 10 {
-        .m-md-#{$i} {
-            margin: #{$i * 4}px;
-        }
-        .p-md-#{$i} {
-            padding: #{$i * 4}px;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .ml-md-#{$i} {
-            margin-left: #{$i * 4}px !important;
-        }
-        .pl-md-#{$i} {
-            padding-left: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mr-md-#{$i} {
-            margin-right: #{$i * 4}px !important;
-        }
-        .pr-md-#{$i} {
-            padding-right: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mt-md-#{$i} {
-            margin-top: #{$i * 4}px !important;
-        }
-        .pt-md-#{$i} {
-            padding-top: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mb-md-#{$i} {
-            margin-bottom: #{$i * 4}px !important;
-        }
-        .pb-md-#{$i} {
-            padding-bottom: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mx-md-#{$i} {
-            margin-right: #{$i * 4}px !important;
-            margin-left: #{$i * 4}px !important;
-        }
-        .px-md-#{$i} {
-            padding-right: #{$i * 4}px !important;
-            padding-left: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .my-md-#{$i} {
-            margin-top: #{$i * 4}px !important;
-            margin-bottom: #{$i * 4}px !important;
-        }
-        .py-md-#{$i} {
-            padding-top: #{$i * 4}px !important;
-            padding-bottom: #{$i * 4}px !important;
-        }
-    }
-}
-
-@media (min-width: $desktop-width) {
-    @for $i from 0 through 10 {
-        .m-xl-#{$i} {
-            margin: #{$i * 4}px;
-        }
-        .p-xl-#{$i} {
-            padding: #{$i * 4}px;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .ml-xl-#{$i} {
-            margin-left: #{$i * 4}px !important;
-        }
-        .pl-xl-#{$i} {
-            padding-left: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mr-xl-#{$i} {
-            margin-right: #{$i * 4}px !important;
-        }
-        .pr-xl-#{$i} {
-            padding-right: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mt-xl-#{$i} {
-            margin-top: #{$i * 4}px !important;
-        }
-        .pt-xl-#{$i} {
-            padding-top: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mb-xl-#{$i} {
-            margin-bottom: #{$i * 4}px !important;
-        }
-        .pb-xl-#{$i} {
-            padding-bottom: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .mx-xl-#{$i} {
-            margin-right: #{$i * 4}px !important;
-            margin-left: #{$i * 4}px !important;
-        }
-        .px-xl-#{$i} {
-            padding-right: #{$i * 4}px !important;
-            padding-left: #{$i * 4}px !important;
-        }
-    }
-
-    @for $i from 0 through 10 {
-        .my-xl-#{$i} {
-            margin-top: #{$i * 4}px !important;
-            margin-bottom: #{$i * 4}px !important;
-        }
-        .py-xl-#{$i} {
-            padding-top: #{$i * 4}px !important;
-            padding-bottom: #{$i * 4}px !important;
-        }
-    }
-}
-
-.container {
-    max-width: 1260px;
-    margin: 0 auto;
-    @extend %container-padding;
-}
-
-.background-shine {
-    position: absolute;
-    left: -165px;
-    top: -300px;
-    z-index: -1;
-
-    @media (max-width: $phone-width) {
-        left: -165px;
-        top: -103px;
-        width: 648px;
-    }
-}
-
-.path {
-    width: 100%;
-    height: 1px;
-    background: LightColor("white-20");
-}
-
-.line {
-    width: 100%;
-    height: 1px;
-    border-bottom: 0.5px solid SolidColor("smoke");
-}
-
-.skeleton {
-    background: SolidColor("lightsmoke");
-    animation: skeleton-animate 1s 1s infinite ease-in-out;
-}
-
-.skeleton-dark {
-    background: LightColor("dark-20");
-    animation: skeleton-dark-animate 1s 1s infinite ease-in-out;
-}
-
-.skeleton-transparent {
-    background: rgba($white, 0.2);
-    animation: skeleton-transparent-animate 1s 1s infinite ease-in-out;
-}
-
-.semi-transparent {
-    opacity: 0.5;
-}
-
-@keyframes skeleton-animate {
-    0% {
-        background: #eaeaea;
-    }
-    50% {
-        background: SolidColor("lightsmoke");
-    }
-    100% {
-        background: #eaeaea;
-    }
-}
-
-@keyframes skeleton-dark-animate {
-    0% {
-        background: LightColor("dark-20");
-    }
-    50% {
-        background: LightColor("grey-20");
-    }
-    100% {
-        background: LightColor("dark-20");
-    }
-}
-
-@keyframes skeleton-transparent-animate {
-    0% {
-        background: rgba($white, 0.2);
-    }
-    50% {
-        background: rgba($white, 0.1);
-    }
-    100% {
-        background: rgba($white, 0.2);
-    }
-}

package/styles/global-styles-index.scss

@@ -1,74 +0,0 @@
-@import "mixins";
-@import "functions";
-
-a {
-    text-decoration: none;
-}
-
-td {
-    padding: 0;
-}
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-/* Firefox */
-input[type="number"] {
-    -moz-appearance: textfield;
-}
-
-textarea {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-}
-
-* {
-    outline: none !important;
-    box-sizing: border-box;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-html {
-    background-color: SolidColor("dark");
-}
-
-body {
-    margin: 0;
-    font-family: NunitoSans;
-    width: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-h1 {
-    @include typograpy("h1");
-}
-
-h2 {
-    @include typograpy("h2");
-}
-
-h3 {
-    @include typograpy("h3");
-}
-
-h4 {
-    @include typograpy("h4");
-}
-
-h5 {
-    @include typograpy("h5");
-}
-
-h6 {
-    @include typograpy("h6");
-}
-
-p {
-    @include typograpy("p");
-}

package/styles/index.scss

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