@inceptionbg/iui 1.0.0

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@inceptionbg/iui",
+  "version": "1.0.0",
+  "description": "UI components, elements & utils for Inception ecosystem",
+  "files": [
+    "src"
+  ],
+  "main": "src/index.ts",
+  "scripts": {
+    "build": "rollup -c"
+  },
+  "author": "Aleksandar Sadzak",
+  "license": "ISC",
+  "dependencies": {
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "clsx": "^1.2.1",
+    "moment": "^2.29.4",
+    "react-toastify": "^9.1.3",
+    "rollup-plugin-postcss": "^4.0.2"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.2",
+    "@rollup/plugin-node-resolve": "^15.1.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@rollup/plugin-typescript": "^11.1.2",
+    "rollup": "^3.26.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-dts": "^5.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@types/react-router-dom": "^5.3.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.1",
+    "sass": "^1.63.6"
+  }
+}

package/src/Elements/Accordions/Accordions.tsx

@@ -0,0 +1,64 @@
+import { FC, useState } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+import { ITab } from "types/ITab";
+import { faArrowsToLine } from "icons/light/faArrowsToLine";
+import { faArrowsUpDown } from "icons/light/faArrowsUpDown";
+import { Collapse } from "Elements/Helper/Collapse";
+
+interface Props {
+  tabs: ITab[];
+  initialValue?: string;
+  compact?: boolean;
+  className?: string;
+}
+export const Accordions: FC<Props> = ({
+  tabs: allTabs,
+  initialValue,
+  compact,
+  className,
+}) => {
+  const tabs = allTabs.filter((tab) => !tab.hidden);
+  const [selected, setSelected] = useState(initialValue || "");
+
+  return !!tabs.length ? (
+    <div className={className}>
+      <div className="iui-accordions">
+        {tabs.map((tab) => (
+          <div
+            key={tab.value}
+            className={clsx("iui-accordion", {
+              selected: selected === tab.value,
+              compact,
+            })}
+          >
+            <div
+              className={clsx("summary clickable", {
+                disabled: tab.disabled,
+              })}
+              onClick={
+                tab.disabled
+                  ? undefined
+                  : () => setSelected(selected === tab.value ? "" : tab.value)
+              }
+            >
+              <div className="flex center">
+                {tab.icon && (
+                  <FontAwesomeIcon icon={tab.icon} className="iui-icon" />
+                )}
+                {tab.label}
+              </div>
+              <FontAwesomeIcon
+                icon={tab.value === selected ? faArrowsToLine : faArrowsUpDown}
+                className="collapse-icon"
+              />
+            </div>
+            <Collapse isOpen={selected === tab.value}>
+              <div className="p-4">{tab.component}</div>
+            </Collapse>
+          </div>
+        ))}
+      </div>
+    </div>
+  ) : null;
+};

package/src/Elements/Alert/Alert.tsx

@@ -0,0 +1,31 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import clsx from "clsx";
+import { FC, ReactNode } from "react";
+import "./alert.scss";
+import { infoIcons } from "utils/icons";
+
+interface Props {
+  text?: string;
+  severity: "success" | "info" | "warning" | "error";
+  fitContent?: boolean;
+  className?: string;
+  children?: ReactNode;
+}
+
+export const Alert: FC<Props> = ({
+  text,
+  severity,
+  fitContent,
+  className,
+  children,
+}) => (
+  <div
+    className={clsx("iui-alert", severity, className, {
+      "width-fit": fitContent,
+    })}
+  >
+    <FontAwesomeIcon icon={infoIcons[severity]} />
+    {text}
+    {children}
+  </div>
+);

package/src/Elements/Alert/alert.scss

@@ -0,0 +1,36 @@
+.iui-alert {
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  font-size: 13px;
+  svg {
+    font-size: 18px;
+    opacity: 0.9;
+    margin-right: 12px;
+  }
+  &.success {
+    background: var(--success01);
+    svg {
+      color: var(--success);
+    }
+  }
+  &.info {
+    background: var(--info01);
+    svg {
+      color: var(--info);
+    }
+  }
+  &.warning {
+    background: var(--warning01);
+    svg {
+      color: var(--warning);
+    }
+  }
+  &.error {
+    background: var(--error01);
+    svg {
+      color: var(--error);
+    }
+  }
+}

package/src/Elements/Button/Button.tsx

@@ -0,0 +1,55 @@
+import { ButtonHTMLAttributes, forwardRef, MouseEventHandler } from "react";
+import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import "./button.scss";
+
+interface Props {
+  label: string;
+  icon?: IconDefinition;
+  iconEnd?: IconDefinition;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+  primary?: boolean;
+  outlined?: boolean;
+  active?: boolean;
+  className?: string;
+  size?: "xs" | "s" | "m" | "l";
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+}
+
+export const Button = forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      label,
+      icon,
+      iconEnd,
+      onClick,
+      disabled,
+      primary,
+      outlined,
+      active,
+      className,
+      size = "m",
+      buttonProps,
+    },
+    ref
+  ) => (
+    <button
+      ref={ref}
+      disabled={disabled}
+      className={clsx("iui-btn", className, size, {
+        primary,
+        outlined,
+        active,
+      })}
+      onClick={onClick}
+      type={buttonProps?.type || onClick ? "button" : "submit"}
+      {...buttonProps}
+    >
+      {icon && <FontAwesomeIcon icon={icon} />}
+      <div className="iui-btn-label">{label}</div>
+      {iconEnd && <FontAwesomeIcon icon={iconEnd} />}
+    </button>
+  )
+);

package/src/Elements/Button/IconButton.tsx

@@ -0,0 +1,42 @@
+import { ButtonHTMLAttributes, forwardRef, MouseEventHandler } from "react";
+import clsx from "clsx";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+
+interface Props {
+  icon: IconDefinition;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+  className?: string;
+  active?: boolean;
+  buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+  //   outlined?: boolean;
+  //   size?: "s" | "m" | "l";
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      icon,
+      onClick,
+      disabled,
+      className,
+      active,
+      buttonProps,
+      //   outlined,
+      //   size = "m",
+    },
+    ref
+  ) => (
+    <button
+      ref={ref}
+      disabled={disabled}
+      className={clsx("iui-btn iui-icon-btn", className, { active })}
+      onClick={onClick}
+      type={buttonProps?.type || onClick ? "button" : "submit"}
+      {...buttonProps}
+    >
+      <FontAwesomeIcon icon={icon} />
+    </button>
+  )
+);

package/src/Elements/Button/button.scss

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

@@ -0,0 +1,175 @@
+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 { faTriangleExclamation } from "icons/regular/faTriangleExclamation";
+import { ConditionalWrapper } from "Elements/Wrappers/ConditionalWrapper";
+import { faCircleInfo } from "icons/regular/faCircleInfo";
+import { Button } from "Elements/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

@@ -0,0 +1,39 @@
+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>
+  );
+};