@inceptionbg/iui 1.0.5 → 1.0.6

package/src/Elements/Button/button.scss

@@ -1,97 +0,0 @@
-.iui-btn {
-  cursor: pointer;
-  user-select: none;
-  background: none;
-  border: none;
-  display: inline-flex;
-  align-items: center;
-  letter-spacing: 0.4px;
-  font-weight: 500;
-  transition: background-color 250ms;
-  border-radius: 8px;
-  color: var(--primary-dark);
-  svg {
-    font-size: 16px;
-    margin: 0 4px;
-  }
-  &.primary {
-    background-color: var(--primary);
-    color: white;
-  }
-  &.outlined {
-    border: 2px solid var(--primary-o25);
-  }
-  &:disabled {
-    opacity: 0.4;
-    cursor: default;
-  }
-  &:hover:not(:disabled):not(.primary),
-  &:active:not(:disabled):not(.primary),
-  &.active:not(:disabled):not(.primary) {
-    background-color: var(--primary-o25);
-  }
-  &.primary:hover:not(:disabled),
-  &.primary:active:not(:disabled),
-  &.primary.active:not(:disabled) {
-    background-color: var(--primary-dark);
-  }
-  &:active:not(:disabled) {
-    transform: translateY(2px);
-  }
-  // Sizes
-  &.xs {
-    font-size: 10px;
-    padding: 4px;
-    height: 23px;
-    &.outlined {
-      padding: 3px;
-      border-width: 1px;
-    }
-    svg {
-      font-size: 10px;
-      margin-right: 0px;
-    }
-  }
-  &.s {
-    font-size: 12px;
-    padding: 6px;
-    &.outlined {
-      padding: 4px;
-    }
-    svg {
-      font-size: 14px;
-    }
-  }
-  &.m {
-    font-size: 13px;
-    padding: 10px;
-    height: 38px;
-    &.outlined {
-      padding: 8px;
-    }
-  }
-  &.l {
-    font-size: 15px;
-    padding: 12px;
-    &.outlined {
-      padding: 10px;
-    }
-    svg {
-      font-size: 18px;
-    }
-  }
-}
-
-.iui-btn-label {
-  margin: 0 4px;
-}
-
-.iui-icon-btn {
-  padding: 6px;
-  border-radius: 50%;
-  svg {
-    margin: 0 !important;
-    height: 20px;
-    width: 20px;
-  }
-}

package/src/Elements/Dialog/Dialog.tsx

@@ -1,175 +0,0 @@
-import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import clsx from "clsx";
-import { FC, ReactNode, useCallback, useEffect, useRef } from "react";
-import { createPortal } from "react-dom";
-import { faCircleInfo } from "../../icons/regular/faCircleInfo";
-import { faTriangleExclamation } from "../../icons/regular/faTriangleExclamation";
-import { ConditionalWrapper } from "../Wrappers/ConditionalWrapper";
-import { Button } from "../Button/Button";
-
-interface Props {
-  title?: string;
-  titleEl?: ReactNode;
-  desc?: string;
-  descEl?: ReactNode;
-  isOpen: boolean;
-  onClose: () => void;
-  confirmButton?: {
-    label?: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-    onFormSubmit?: () => void;
-    disabled?: boolean;
-    keepOpen?: boolean;
-  };
-  cancelButton?: {
-    label?: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-  };
-  additionalButton?: {
-    label: string;
-    icon?: IconDefinition;
-    onClick?: () => void;
-    disabled?: boolean;
-  };
-  noBackgroundClick?: boolean;
-  noOverflow?: boolean;
-  type?: "info" | "error";
-  size?: "m" | "l" | "xl";
-  noPadding?: boolean;
-  className?: string;
-  children?: ReactNode;
-}
-
-const typeIcon = {
-  info: faCircleInfo,
-  error: faTriangleExclamation,
-};
-
-export const Dialog: FC<Props> = ({
-  title,
-  titleEl,
-  desc,
-  descEl,
-  isOpen,
-  onClose,
-  confirmButton,
-  cancelButton,
-  additionalButton,
-  noBackgroundClick,
-  noOverflow,
-  type,
-  size,
-  noPadding,
-  className,
-  children,
-}) => {
-  const dialogRef = useRef<HTMLDivElement>(null);
-
-  const handleClose = useCallback(() => {
-    dialogRef.current?.classList.add("closing");
-    setTimeout(onClose, 200);
-  }, [dialogRef, onClose]);
-
-  useEffect(() => {
-    if (!noBackgroundClick) {
-      const handleClick = (ev: MouseEvent) =>
-        ev.target === dialogRef.current && handleClose();
-      window.addEventListener("click", handleClick);
-      return () => window.removeEventListener("click", handleClick);
-    }
-  }, [noBackgroundClick, handleClose]);
-
-  return isOpen
-    ? createPortal(
-        <div ref={dialogRef} className="iui-dialog">
-          <ConditionalWrapper
-            condition={!!confirmButton?.onFormSubmit}
-            wrapper={(children) => (
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
-                  confirmButton!.onFormSubmit!();
-                  !confirmButton!.keepOpen && handleClose();
-                }}
-              >
-                {children}
-              </form>
-            )}
-          >
-            <div
-              className={clsx("iui-dialog-container", size, type, className)}
-            >
-              {title && <h1>{title}</h1>}
-              {titleEl}
-              <div
-                className={clsx("iui-dialog-content", {
-                  padding: !noPadding,
-                  "no-overflow": noOverflow,
-                })}
-              >
-                {type && <FontAwesomeIcon icon={typeIcon[type]} />}
-                {desc && <p>{desc}</p>}
-                {descEl}
-                {children}
-              </div>
-              <div className="iui-dialog-actions">
-                <Button
-                  label={
-                    cancelButton?.label || (confirmButton ? "Otkaži" : "Ok")
-                  }
-                  icon={cancelButton?.icon}
-                  primary={!confirmButton}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    cancelButton?.onClick
-                      ? cancelButton.onClick()
-                      : handleClose();
-                  }}
-                />
-                {additionalButton && (
-                  <Button
-                    label={additionalButton.label}
-                    icon={additionalButton.icon}
-                    className="ml-2"
-                    onClick={
-                      !!additionalButton.onClick
-                        ? (e) => {
-                            e.stopPropagation();
-                            additionalButton.onClick!();
-                            handleClose();
-                          }
-                        : undefined
-                    }
-                    disabled={additionalButton.disabled}
-                  />
-                )}
-                {confirmButton && (
-                  <Button
-                    label={confirmButton.label || "Potvrdi"}
-                    icon={confirmButton.icon}
-                    primary
-                    className="ml-2"
-                    onClick={
-                      !!confirmButton.onClick
-                        ? (e) => {
-                            e.stopPropagation();
-                            confirmButton.onClick!();
-                            !confirmButton.keepOpen && handleClose();
-                          }
-                        : undefined
-                    }
-                    disabled={confirmButton.disabled}
-                  />
-                )}
-              </div>
-            </div>
-          </ConditionalWrapper>
-        </div>,
-        document.body
-      )
-    : null;
-};

package/src/Elements/Helper/Collapse.tsx

@@ -1,39 +0,0 @@
-import clsx from "clsx";
-import { FC, ReactNode, useEffect, useRef, useState } from "react";
-
-interface Props {
-  isOpen: boolean;
-  className?: string;
-  children?: ReactNode;
-}
-
-export const Collapse: FC<Props> = ({ isOpen, className, children }) => {
-  const [height, setHeight] = useState<number>();
-  const ref = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const observer = new ResizeObserver((entries) => {
-      const newHeight = Math.ceil(entries[0].contentRect.height);
-      setHeight(newHeight);
-    });
-
-    let observerRefValue: HTMLDivElement;
-    if (ref.current) {
-      observerRefValue = ref.current;
-      observer.observe(observerRefValue);
-    }
-
-    return () => {
-      observerRefValue && observer.unobserve(observerRefValue);
-    };
-  }, [ref]);
-
-  return (
-    <div
-      className={clsx("iui-colapse", className)}
-      style={{ maxHeight: isOpen ? height : 0 }}
-    >
-      <div ref={ref}>{children}</div>
-    </div>
-  );
-};

package/src/Elements/Helper/NoAccessInfo.tsx

@@ -1,195 +0,0 @@
-import { FC } from "react";
-import { useNavigate } from "react-router-dom";
-import { Button } from "../Button/Button";
-
-interface Props {
-  title?: string;
-  buttonLabel?: string;
-}
-
-export const NoAccessInfo: FC<Props> = ({ title, buttonLabel }) => {
-  const navigate = useNavigate();
-  return (
-    <div className="flex center column mt-5">
-      <svg
-        id="aa03ddf9-f8f2-4819-a4ce-be9b0a220741"
-        data-name="Layer 1"
-        xmlns="http://www.w3.org/2000/svg"
-        width="40%"
-        viewBox="0 0 1119.60911 699"
-      >
-        <title>No Access</title>
-        <circle cx="292.60911" cy="213" r="213" fill="#f2f2f2" />
-        <path
-          d="M31.39089,151.64237c0,77.49789,48.6181,140.20819,108.70073,140.20819"
-          transform="translate(-31.39089 -100.5)"
-          fill="#2f2e41"
-        />
-        <path
-          d="M140.09162,291.85056c0-78.36865,54.255-141.78356,121.30372-141.78356"
-          transform="translate(-31.39089 -100.5)"
-          fill="#4191ff"
-        />
-        <path
-          d="M70.77521,158.66768c0,73.61476,31.00285,133.18288,69.31641,133.18288"
-          transform="translate(-31.39089 -100.5)"
-          fill="#4191ff"
-        />
-        <path
-          d="M140.09162,291.85056c0-100.13772,62.7103-181.16788,140.20819-181.16788"
-          transform="translate(-31.39089 -100.5)"
-          fill="#2f2e41"
-        />
-        <path
-          d="M117.22379,292.83905s15.41555-.47479,20.06141-3.783,23.713-7.2585,24.86553-1.95278,23.16671,26.38821,5.76263,26.5286-40.43935-2.711-45.07627-5.53549S117.22379,292.83905,117.22379,292.83905Z"
-          transform="translate(-31.39089 -100.5)"
-          fill="#a8a8a8"
-        />
-        <path
-          d="M168.224,311.78489c-17.40408.14042-40.43933-2.71094-45.07626-5.53548-3.53126-2.151-4.93843-9.86945-5.40926-13.43043-.32607.014-.51463.02-.51463.02s.97638,12.43276,5.61331,15.2573,27.67217,5.67589,45.07626,5.53547c5.02386-.04052,6.7592-1.82793,6.66391-4.47526C173.87935,310.756,171.96329,311.75474,168.224,311.78489Z"
-          transform="translate(-31.39089 -100.5)"
-          opacity="0.2"
-        />
-        <ellipse cx="198.60911" cy="424.5" rx="187" ry="25.43993" fill="#3f3d56" />
-        <ellipse cx="198.60911" cy="424.5" rx="157" ry="21.35866" opacity="0.1" />
-        <ellipse cx="836.60911" cy="660.5" rx="283" ry="38.5" fill="#3f3d56" />
-        <ellipse cx="310.60911" cy="645.5" rx="170" ry="23.12721" fill="#3f3d56" />
-        <path
-          d="M494,726.5c90,23,263-30,282-90"
-          transform="translate(-31.39089 -100.5)"
-          fill="none"
-          stroke="#2f2e41"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-        />
-        <path
-          d="M341,359.5s130-36,138,80-107,149-17,172"
-          transform="translate(-31.39089 -100.5)"
-          fill="none"
-          stroke="#2f2e41"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-        />
-        <path
-          d="M215.40233,637.78332s39.0723-10.82,41.47675,24.04449-32.15951,44.78287-5.10946,51.69566"
-          transform="translate(-31.39089 -100.5)"
-          fill="none"
-          stroke="#2f2e41"
-          strokeMiterlimit="10"
-          strokeWidth="2"
-        />
-        <path
-          d="M810.09554,663.73988,802.218,714.03505s-38.78182,20.60284-11.51335,21.20881,155.73324,0,155.73324,0,24.84461,0-14.54318-21.81478l-7.87756-52.719Z"
-          transform="translate(-31.39089 -100.5)"
-          fill="#2f2e41"
-        />
-        <path
-          d="M785.21906,734.69812c6.193-5.51039,16.9989-11.252,16.9989-11.252l7.87756-50.2952,113.9216.10717,7.87756,49.582c9.185,5.08711,14.8749,8.987,18.20362,11.97818,5.05882-1.15422,10.58716-5.44353-18.20362-21.38921l-7.87756-52.719-113.9216,3.02983L802.218,714.03506S769.62985,731.34968,785.21906,734.69812Z"
-          transform="translate(-31.39089 -100.5)"
-          opacity="0.1"
-        />
-        <rect
-          x="578.43291"
-          y="212.68859"
-          width="513.25314"
-          height="357.51989"
-          rx="18.04568"
-          fill="#2f2e41"
-        />
-        <rect
-          x="595.70294"
-          y="231.77652"
-          width="478.71308"
-          height="267.83694"
-          fill="#3f3d56"
-        />
-        <circle cx="835.05948" cy="223.29299" r="3.02983" fill="#f2f2f2" />
-        <path
-          d="M1123.07694,621.32226V652.6628a18.04341,18.04341,0,0,1-18.04568,18.04568H627.86949A18.04341,18.04341,0,0,1,609.8238,652.6628V621.32226Z"
-          transform="translate(-31.39089 -100.5)"
-          fill="#2f2e41"
-        />
-        <polygon
-          points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 651.452 645.651 962.312 645.651 968.978 667.466"
-          fill="#2f2e41"
-        />
-        <path
-          d="M1125.828,762.03359c-.59383,2.539-2.83591,5.21743-7.90178,7.75032-18.179,9.08949-55.1429-2.42386-55.1429-2.42386s-28.4804-4.84773-28.4804-17.573a22.72457,22.72457,0,0,1,2.49658-1.48459c7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
-          transform="translate(-31.39089 -100.5)"
-          fill="#2f2e41"
-        />
-        <path
-          d="M1125.828,762.03359c-22.251,8.526-42.0843,9.1622-62.43871-4.975-10.26507-7.12617-19.59089-8.88955-26.58979-8.75618,7.64294-4.04351,32.98449-14.02122,77.9177.42248a18.73921,18.73921,0,0,1,8.54106,5.59715C1125.07908,756.45353,1126.50669,759.15715,1125.828,762.03359Z"
-          transform="translate(-31.39089 -100.5)"
-          opacity="0.1"
-        />
-        <ellipse
-          cx="1066.53846"
-          cy="654.13477"
-          rx="7.87756"
-          ry="2.42386"
-          fill="#f2f2f2"
-        />
-        <circle cx="835.05948" cy="545.66686" r="11.51335" fill="#f2f2f2" />
-        <polygon
-          points="968.978 667.466 968.978 673.526 642.968 673.526 642.968 668.678 643.417 667.466 968.978 667.466"
-          opacity="0.1"
-        />
-        <rect x="108.60911" y="159" width="208" height="242" fill="#2f2e41" />
-        <rect x="87.60911" y="135" width="250" height="86" fill="#3f3d56" />
-        <rect x="87.60911" y="237" width="250" height="86" fill="#3f3d56" />
-        <rect x="87.60911" y="339" width="250" height="86" fill="#3f3d56" />
-        <rect x="271.60911" y="150" width="16" height="16" fill="#4191ff" opacity="0.4" />
-        <rect x="294.60911" y="150" width="16" height="16" fill="#4191ff" opacity="0.8" />
-        <rect x="317.60911" y="150" width="16" height="16" fill="#4191ff" />
-        <rect x="271.60911" y="251" width="16" height="16" fill="#4191ff" opacity="0.4" />
-        <rect x="294.60911" y="251" width="16" height="16" fill="#4191ff" opacity="0.8" />
-        <rect x="317.60911" y="251" width="16" height="16" fill="#4191ff" />
-        <rect x="271.60911" y="352" width="16" height="16" fill="#4191ff" opacity="0.4" />
-        <rect x="294.60911" y="352" width="16" height="16" fill="#4191ff" opacity="0.8" />
-        <rect x="317.60911" y="352" width="16" height="16" fill="#4191ff" />
-        <circle cx="316.60911" cy="538" r="79" fill="#2f2e41" />
-        <rect x="280.60911" y="600" width="24" height="43" fill="#2f2e41" />
-        <rect x="328.60911" y="600" width="24" height="43" fill="#2f2e41" />
-        <ellipse cx="300.60911" cy="643.5" rx="20" ry="7.5" fill="#2f2e41" />
-        <ellipse cx="348.60911" cy="642.5" rx="20" ry="7.5" fill="#2f2e41" />
-        <circle cx="318.60911" cy="518" r="27" fill="#fff" />
-        <circle cx="318.60911" cy="518" r="9" fill="#3f3d56" />
-        <path
-          d="M271.36733,565.03228c-6.37889-28.56758,14.01185-57.43392,45.544-64.47477s62.2651,10.41,68.644,38.9776-14.51861,39.10379-46.05075,46.14464S277.74622,593.59986,271.36733,565.03228Z"
-          transform="translate(-31.39089 -100.5)"
-          fill="#4191ff"
-        />
-        <ellipse
-          cx="417.21511"
-          cy="611.34365"
-          rx="39.5"
-          ry="12.40027"
-          transform="translate(-238.28665 112.98044) rotate(-23.17116)"
-          fill="#2f2e41"
-        />
-        <ellipse
-          cx="269.21511"
-          cy="664.34365"
-          rx="39.5"
-          ry="12.40027"
-          transform="translate(-271.07969 59.02084) rotate(-23.17116)"
-          fill="#2f2e41"
-        />
-        <path
-          d="M394,661.5c0,7.732-19.90861,23-42,23s-43-14.268-43-22,20.90861-6,43-6S394,653.768,394,661.5Z"
-          transform="translate(-31.39089 -100.5)"
-          fill="#fff"
-        />
-      </svg>
-      <h1 className="fs-32 mt-5">{title || "You have no access to this resource"}</h1>
-      <Button
-        label={buttonLabel || "Return to homepage"}
-        className="mt-5"
-        primary
-        size="l"
-        onClick={() => navigate("/")}
-      />
-    </div>
-  );
-};

package/src/Elements/Tooltip/Tooltip.tsx

@@ -1,116 +0,0 @@
-import clsx from "clsx";
-import {
-  cloneElement,
-  Dispatch,
-  FC,
-  ReactElement,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { createPortal } from "react-dom";
-import "./tooltip.scss";
-
-type Position = "left" | "right" | "top" | "bottom";
-interface Props {
-  label?: string;
-  position?: Position;
-  disabled?: boolean;
-  className?: string;
-  children: ReactElement;
-}
-export const Tooltip: FC<Props> = ({
-  label,
-  position = "bottom",
-  disabled,
-  className,
-  children,
-}) => {
-  const [newPosition, setNewPosition] = useState<Position | "">("");
-
-  const containerRef = useRef<any>(null);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!disabled && !!label) {
-      const container = containerRef.current;
-      const tooltip = tooltipRef.current;
-
-      const onMouseEnter = () => {
-        if (container && tooltip) {
-          setAbsolutePosition(container, tooltip, position, setNewPosition);
-          tooltip?.classList.add("visible");
-        }
-      };
-      const onMouseLeave = () => tooltip?.classList.remove("visible");
-
-      container?.addEventListener("mouseenter", onMouseEnter);
-      container?.addEventListener("mouseleave", onMouseLeave);
-
-      return () => {
-        container?.removeEventListener("mouseenter", onMouseEnter);
-        container?.removeEventListener("mouseleave", onMouseLeave);
-      };
-    }
-  }, [disabled, label, position]);
-
-  return !!label && !disabled ? (
-    <>
-      {cloneElement(children, { ref: containerRef })}
-      {createPortal(
-        <div ref={tooltipRef} className={clsx("tooltip-container", className)}>
-          <div className="tooltip">
-            <div className={clsx("arrow", newPosition || position)} />
-            <div>{label}</div>
-          </div>
-        </div>,
-        document.body
-      )}
-    </>
-  ) : (
-    children
-  );
-};
-
-const setAbsolutePosition = (
-  containerEl: HTMLDivElement,
-  targetEl: HTMLDivElement,
-  position: Position,
-  setNewPosition: Dispatch<SetStateAction<Position | "">>
-) => {
-  const containerRect = containerEl.getBoundingClientRect();
-  const tooltipRect = targetEl.getBoundingClientRect();
-
-  if (position === "bottom" || position === "top") {
-    const bottom = Math.floor(containerRect.bottom + 16);
-    const top = Math.floor(containerRect.top - tooltipRect.height - 16);
-    const leftCenter = Math.floor(
-      containerRect.left + containerRect.width / 2 - tooltipRect.width / 2
-    );
-    const reverse =
-      position === "top"
-        ? top < 0
-        : bottom + tooltipRect.height > window.innerHeight;
-
-    setNewPosition(reverse ? (position === "bottom" ? "top" : "bottom") : "");
-
-    targetEl.style.top = `${
-      position === "bottom" ? (reverse ? top : bottom) : reverse ? bottom : top
-    }px`;
-    targetEl.style.left = `${leftCenter}px`;
-  } else if (position === "right") {
-    targetEl.style.top =
-      Math.floor(
-        containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
-      ) + "px";
-    targetEl.style.left = Math.floor(containerRect.right + 16) + "px";
-  } else if (position === "left") {
-    targetEl.style.top =
-      Math.floor(
-        containerRect.top + containerRect.height / 2 - tooltipRect.height / 2
-      ) + "px";
-    targetEl.style.left =
-      Math.floor(containerRect.left - tooltipRect.width - 16) + "px";
-  }
-};

package/src/Elements/Tooltip/tooltip.scss

@@ -1,46 +0,0 @@
-.tooltip-container {
-  position: fixed;
-  border-radius: 8px;
-  background: #222;
-  color: #fff;
-  font-size: 12px;
-  font-weight: bold;
-  white-space: nowrap;
-  padding: 8px 16px;
-  text-align: center;
-  z-index: 1001;
-  transition: 0.3s opacity;
-  &:not(.visible) {
-    visibility: hidden;
-    opacity: 0;
-  }
-}
-.tooltip {
-  position: relative;
-  height: 100%;
-  .arrow {
-    position: absolute;
-    border: 8px solid #222;
-    z-index: 1001;
-    &.top {
-      top: calc(100% + 8px);
-      left: calc(50% - 8px);
-      border-color: #222 transparent transparent transparent;
-    }
-    &.bottom {
-      bottom: calc(100% + 8px);
-      left: calc(50% - 8px);
-      border-color: transparent transparent #222 transparent;
-    }
-    &.left {
-      top: calc(50% - 8px);
-      left: calc(100% + 16px);
-      border-color: transparent transparent transparent #222;
-    }
-    &.right {
-      top: calc(50% - 8px);
-      right: calc(100% + 16px);
-      border-color: transparent #222 transparent transparent;
-    }
-  }
-}

package/src/Elements/Wrappers/ConditionalWrapper.tsx

@@ -1,10 +0,0 @@
-import { FC, ReactElement } from "react";
-
-interface Props {
-  condition: boolean;
-  wrapper: (children: ReactElement) => ReactElement;
-  children: ReactElement;
-}
-
-export const ConditionalWrapper: FC<Props> = ({ condition, wrapper, children }) =>
-  condition ? wrapper(children) : children;