@allurereport/web-awesome 3.0.0-beta.3

package/src/components/commons/Tooltip/index.tsx

@@ -0,0 +1,123 @@
+import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
+import { FunctionalComponent, VNode } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";
+import { Text } from "@/components/commons/Typography";
+import * as styles from "./styles.scss";
+
+interface TooltipWrapperProps {
+  tooltipText?: string;
+  tooltipTextAfterClick?: string;
+  tooltipComponent?: FunctionalComponent | VNode;
+  children: VNode;
+  placement?: "top" | "bottom" | "left" | "right";
+  triggerMode?: "hover" | "click";
+  autoHideDelay?: number;
+  isTriggerActive?: boolean;
+}
+
+const Tooltip = ({ children }) => (
+  <div className={styles[`custom-tooltip`]}>
+    <Text className="tooltip-content" size={"s"} bold>
+      {children}
+    </Text>
+  </div>
+);
+
+export const TooltipWrapper: FunctionalComponent<TooltipWrapperProps> = ({
+  tooltipText,
+  tooltipTextAfterClick,
+  tooltipComponent,
+  children,
+  placement = "top",
+  triggerMode = "hover",
+  autoHideDelay = 600,
+  isTriggerActive = true,
+}) => {
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const triggerRef = useRef<HTMLDivElement | null>(null);
+  const [isVisible, setIsVisible] = useState(false);
+  const [currentText, setCurrentText] = useState(tooltipText);
+  const hideTimer = useRef<number | null>(null);
+
+  useEffect(() => {
+    setCurrentText(tooltipText);
+    const updatePosition = () => {
+      if (triggerRef.current && tooltipRef.current) {
+        computePosition(triggerRef.current, tooltipRef.current, {
+          placement,
+          middleware: [offset(6), flip(), shift({ padding: 5 })],
+        }).then(({ x, y }) => {
+          if (tooltipRef.current) {
+            Object.assign(tooltipRef.current.style, {
+              left: `${x}px`,
+              top: `${y}px`,
+              position: "absolute",
+              "z-index": 100,
+            });
+          }
+        });
+      }
+    };
+
+    const cleanup = () =>
+      triggerRef.current && tooltipRef.current
+        ? autoUpdate(triggerRef.current, tooltipRef.current, updatePosition)
+        : () => {};
+
+    if (isVisible) {
+      updatePosition();
+    }
+
+    return cleanup();
+  }, [isVisible, placement, tooltipText]);
+
+  const onMouseEnter = () => {
+    if (triggerMode === "hover" && isTriggerActive) setIsVisible(true);
+
+    if (triggerMode === "click" && hideTimer.current) {
+      clearTimeout(hideTimer.current);
+    }
+  };
+
+  const onMouseLeave = () => {
+    if (triggerMode === "hover") {
+      setIsVisible(false);
+      setCurrentText(tooltipText);
+    } else if (triggerMode === "click" && isVisible) {
+      hideTimer.current = window.setTimeout(() => {
+        setIsVisible(false);
+      }, autoHideDelay);
+    }
+  };
+
+  const onClick = () => {
+    if (triggerMode === "click") {
+      if (triggerRef.current && isTriggerActive) {
+        setIsVisible(true);
+        if (hideTimer.current) {
+          clearTimeout(hideTimer.current);
+        }
+      }
+    }
+    if (tooltipTextAfterClick) {
+      setCurrentText(tooltipTextAfterClick);
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (hideTimer.current) {
+        clearTimeout(hideTimer.current);
+      }
+    };
+  }, []);
+
+  const tooltipContent = tooltipComponent ? tooltipComponent : <Tooltip>{currentText}</Tooltip>;
+
+  return (
+    <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick}>
+      <div ref={triggerRef}>{children}</div>
+      <div ref={tooltipRef}>{isVisible && tooltipContent}</div>
+    </div>
+  );
+};

package/src/components/commons/Tooltip/styles.scss

@@ -0,0 +1,38 @@
+.custom-tooltip {
+  z-index: 1000;
+  background-color: var(--constant-bg-base-modal);
+  color: var(--constant-on-text-primary);
+  padding: 2px 8px;
+  border-radius: 6px;
+  font-size: 12px;
+  max-width: 600px;
+  min-width: max-content;
+}
+
+.custom-tooltip--top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 4px;
+}
+
+.custom-tooltip--bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+}
+
+.custom-tooltip--left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-top: 4px;
+}
+
+.custom-tooltip--right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-top: 4px;
+}

package/src/components/commons/Typography/index.tsx

@@ -0,0 +1,99 @@
+import { clsx } from "clsx";
+import type { FunctionalComponent, JSX } from "preact";
+
+export const Text: FunctionalComponent<
+  (
+    | {
+        type?: "paragraph";
+        size?: "s" | "m" | "l";
+      }
+    | {
+        type: "ui";
+        size: "s" | "m" | "l" | "xs";
+      }
+  ) & {
+    /**
+     * Additional class name
+     */
+    className?: string;
+    bold?: boolean;
+    tag?: keyof JSX.IntrinsicElements;
+  } & Omit<JSX.HTMLAttributes, "type" | "size" | "className" | "bold" | "tag">
+> = (props) => {
+  const { size = "m", tag: Tag = "span", type = "paragraph", bold = false, className, children, ...rest } = props;
+
+  if (type === "paragraph") {
+    return (
+      // @ts-expect-error this is fine
+      <Tag {...rest} className={clsx(`paragraphs-text-${size}${bold ? "-bold" : ""}`, className)}>
+        {children}
+      </Tag>
+    );
+  }
+
+  if (type === "ui") {
+    return (
+      // @ts-expect-error this is fine
+      <Tag {...rest} className={clsx(`ui-text-${size}-ui${bold ? "-bold" : ""}`, className)}>
+        {children}
+      </Tag>
+    );
+  }
+
+  return null;
+};
+
+export const Code: FunctionalComponent<
+  {
+    type?: "paragraph" | "ui";
+    size?: "s" | "m";
+    /**
+     * Additional class name
+     */
+    className?: string;
+    bold?: boolean;
+    tag?: keyof JSX.IntrinsicElements;
+  } & Omit<JSX.HTMLAttributes, "type" | "size" | "className" | "bold" | "tag">
+> = (props) => {
+  const { size = "m", tag: Tag = "span", type = "paragraph", bold = false, className, children, ...rest } = props;
+
+  if (type === "paragraph") {
+    return (
+      // @ts-expect-error this is fine
+      <Tag {...rest} className={clsx(`paragraphs-code-${size}${bold ? "-bold" : ""}`, className)}>
+        {children}
+      </Tag>
+    );
+  }
+
+  if (type === "ui") {
+    return (
+      // @ts-expect-error this is fine
+      <Tag {...rest} className={clsx(`ui-code-${size}-ui${bold ? "-bold" : ""}`, className)}>
+        {children}
+      </Tag>
+    );
+  }
+
+  return null;
+};
+
+export const Heading: FunctionalComponent<
+  {
+    size?: "s" | "m" | "l";
+    /**
+     * Additional class name
+     */
+    className?: string;
+    tag?: keyof JSX.IntrinsicElements;
+  } & Omit<JSX.HTMLAttributes, "size" | "className" | "tag">
+> = (props) => {
+  const { size = "m", tag: Tag = "span", className, children, ...rest } = props;
+
+  return (
+    // @ts-expect-error this is fine
+    <Tag {...rest} className={clsx(`headings-head-${size}`, className)}>
+      {children}
+    </Tag>
+  );
+};

package/src/hooks/useDebouncedCallback.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from "preact/hooks";
+
+const DEFAULT_TIMEOUT = 300;
+
+function debounce(cb: () => void, timeout = DEFAULT_TIMEOUT) {
+  let timer: ReturnType<typeof setTimeout>;
+
+  return (...args: unknown[]) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      cb.apply(this, args);
+    }, timeout);
+  };
+}
+
+export function useDebouncedCallback<Callback extends (...args: unknown[]) => void>(
+  cb: Callback,
+  timeout = DEFAULT_TIMEOUT,
+) {
+  const cbRef = useRef(cb);
+
+  cbRef.current = cb;
+
+  useEffect(() => {
+    return () => {
+      cbRef.current = (() => {}) as Callback;
+    };
+  }, []);
+
+  return useCallback<Callback>(debounce((...args) => cbRef.current(...args), timeout) as Callback, [timeout]);
+}

package/src/i18n/constants.ts

@@ -0,0 +1,105 @@
+export const AVAILABLE_LOCALES = ["en", "ru", "pl", "es", "pt", "de", "am", "az", "fr", "it", "ja", "he", "ka", "kr", "nl", "sv", "tr", "zh"] as const;
+
+export const DEFAULT_LOCALE = "en";
+
+export type LangLocale = (typeof AVAILABLE_LOCALES)[number];
+
+export const LANG_LOCALE: Record<
+  LangLocale,
+  {
+    short: string;
+    full: string;
+    iso: string;
+  }
+> = {
+  en: {
+    short: "Eng",
+    full: "English",
+    iso: "en-US",
+  },
+  ru: {
+    short: "Ру",
+    full: "Русский",
+    iso: "ru-RU",
+  },
+  pl: {
+    short: "Pl",
+    full: "Polski",
+    iso: "pl-PL",
+  },
+  es: {
+    short: "Es",
+    full: "Español",
+    iso: "es-ES",
+  },
+  pt: {
+    short: "Pt",
+    full: "Português",
+    iso: "pt-PT",
+  },
+  de: {
+    short: "De",
+    full: "Deutsch",
+    iso: "de-DE",
+  },
+  am: {
+    short: "Am",
+    full: "አማርኛ",
+    iso: "am-ET",
+  },
+  az: {
+    short: "Az",
+    full: "Azərbaycan",
+    iso: "az-AZ",
+  },
+  fr: {
+    short: "Fr",
+    full: "Français",
+    iso: "fr-FR",
+  },
+  it: {
+    short: "It",
+    full: "Italiano",
+    iso: "it-IT",
+  },
+  ja: {
+    short: "Ja",
+    full: "日本語",
+    iso: "ja-JP",
+  },
+  he: {
+    short: "He",
+    full: "עברית",
+    iso: "he-IL",
+  },
+  ka: {
+    short: "Ka",
+    full: "ქართული",
+    iso: "ka-GE",
+  },
+  kr: {
+    short: "Kr",
+    full: "한국어",
+    iso: "kr-KR",
+  },
+  nl: {
+    short: "Nl",
+    full: "Nederlands",
+    iso: "nl-NL",
+  },
+  sv: {
+    short: "Sv",
+    full: "Svenska",
+    iso: "sv-SE",
+  },
+  tr: {
+    short: "Tr",
+    full: "Türkçe",
+    iso: "tr-TR",
+  },
+  zh: {
+    short: "Zh",
+    full: "中文",
+    iso: "zh-CN",
+  }
+};

package/src/i18n/locales/am.json

@@ -0,0 +1,115 @@
+{
+  "statuses": {
+    "passed": "անցած",
+    "failed": "ձախողված",
+    "broken": "կոտրված",
+    "skipped": "բաց թողնված",
+    "unknown": "անհայտ",
+    "total": "ընդհանուր",
+    "flakyTests": "անհուսալի",
+    "newTests": "նոր",
+    "retryTests": "կրկնություն"
+  },
+  "testSummary": {
+    "all": "Բոլոր թեստերը",
+    "flaky": "Անհուսալի թեստեր",
+    "retry": "Կրկնված թեստեր",
+    "new": "Նոր թեստեր"
+  },
+  "tabs": {
+    "total": "Բոլոր"
+  },
+  "search": {
+    "search": "Որոնում",
+    "search-placeholder": "Անվանում կամ ID"
+  },
+  "filters": {
+    "more-filters": "Լրացուցիչ ֆիլտրեր",
+    "enable-filter": "Միացնել \"{filter}\" ֆիլտրը",
+    "flaky": "Անհուսալի",
+    "retry": "Կրկնություն",
+    "new": "Նոր"
+  },
+  "sort-by": {
+    "sort-by-text": "Դասավորել ըստ:",
+    "sort-by-category": "Դասավորել ըստ",
+    "direction-category": "Ուղղություն"
+  },
+  "sort-by.values": {
+    "order": "Կարգ",
+    "alphabet": "Այբուբեն",
+    "duration": "Տևողություն",
+    "status": "Կարգավիճակ"
+  },
+  "sort-by.directions": {
+    "order-desc": "Վերջինը – Առաջինը",
+    "order-asc": "Առաջինը – Վերջինը",
+    "order-asc-short": "Առաջինը",
+    "order-desc-short": "Վերջինը",
+    "alphabet-asc": "Ա – Ֆ",
+    "alphabet-desc": "Ֆ – Ա",
+    "alphabet-asc-short": "Ա – Ֆ",
+    "alphabet-desc-short": "Ֆ – Ա",
+    "duration-asc": "1 – 9",
+    "duration-desc": "9 – 1",
+    "duration-asc-short": "1 – 9",
+    "duration-desc-short": "9 – 1",
+    "status-asc": "Ինչպես ֆիլտրերի ցանկում",
+    "status-desc": "Հակադարձված",
+    "status-asc-short": "Սովորական",
+    "status-desc-short": "Հակադարձված"
+  },
+  "empty": {
+    "no-results": "Արդյունքներ չեն գտնվել",
+    "no-attachments-results": "Կցորդների մասին տեղեկություններ չկան",
+    "no-history-results": "Պատմության մասին տեղեկություններ չկան",
+    "no-retries-results": "Կրկնությունների մասին տեղեկություններ չկան"
+  },
+  "severity": {
+    "blocker": "արգելափակում",
+    "critical": "կրիտիկական",
+    "normal": "նորմալ",
+    "minor": "աննշան",
+    "trivial": "աննշան"
+  },
+  "execution": {
+    "name": "Կատարում",
+    "body": "Թեստի մարմին",
+    "setup": "Պատրաստում",
+    "teardown": "Ավարտում"
+  },
+  "ui": {
+    "labels": "Պիտակներ",
+    "metadata": "Մետատվյալներ",
+    "parameters": "Պարամետրեր",
+    "description": "Նկարագրություն",
+    "links": "Հղումներ",
+    "overview": "Ակնարկ",
+    "history": "Պատմություն",
+    "attachments": "Կցորդներ",
+    "retries": "Կրկնություններ",
+    "error": "Սխալ",
+    "goToStep": "Գնալ քայլին",
+    "showLess": "Ցուցադրել պակաս",
+    "showMore": "Ցուցադրել ավելին",
+    "copy": "Պատճենել",
+    "at": "է"
+  },
+  "controls": {
+    "newTabAttachment": "Բացել նոր ներդիրում",
+    "nextTR": "Հաջորդ թեստի արդյունքը",
+    "prevTR": "Նախորդ թեստի արդյունքը",
+    "downloadAttachment": "Ներբեռնել կցորդը",
+    "backto": "Վերադառնալ",
+    "clipboard": "Պատճենել սեղմատախտակին",
+    "clipboardError": "Սխալ. Հավանաբար ձեր զննարկիչը չի աջակցում այս գործառույթին",
+    "clipboardSuccess": "Հաջողությամբ պատճենվեց",
+    "collapse": "Կծկել",
+    "expand": "Ընդլայնել",
+    "fullscreen": "Լրիվ էկրան",
+    "language": "Փոխել լեզուն"
+  },
+  "errors": {
+    "missedAttachment": "Կցորդը չի գտնվել"
+  }
+}

package/src/i18n/locales/az.json

@@ -0,0 +1,115 @@
+{
+  "statuses": {
+    "passed": "keçdi",
+    "failed": "uğursuz",
+    "broken": "sınıq",
+    "skipped": "keçildi",
+    "unknown": "naməlum",
+    "total": "cəmi",
+    "flakyTests": "etibarsız",
+    "newTests": "yeni",
+    "retryTests": "təkrar"
+  },
+  "testSummary": {
+    "all": "Bütün testlər",
+    "flaky": "Etibarsız testlər",
+    "retry": "Təkrar testlər",
+    "new": "Yeni testlər"
+  },
+  "tabs": {
+    "total": "Bütün"
+  },
+  "search": {
+    "search": "Axtarış",
+    "search-placeholder": "Ad və ya ID"
+  },
+  "filters": {
+    "more-filters": "Daha çox filtr",
+    "enable-filter": "\"{filter}\" filtrlərini aktiv edin",
+    "flaky": "Etibarsız",
+    "retry": "Təkrar",
+    "new": "Yeni"
+  },
+  "sort-by": {
+    "sort-by-text": "Sıralamaq üzrə:",
+    "sort-by-category": "Sıralamaq üzrə",
+    "direction-category": "İstiqamət"
+  },
+  "sort-by.values": {
+    "order": "Sıra",
+    "alphabet": "Əlifba",
+    "duration": "Müddət",
+    "status": "Status"
+  },
+  "sort-by.directions": {
+    "order-desc": "Sonuncu – Birinci",
+    "order-asc": "Birinci – Sonuncu",
+    "order-asc-short": "Birinci",
+    "order-desc-short": "Sonuncu",
+    "alphabet-asc": "A – Z",
+    "alphabet-desc": "Z – A",
+    "alphabet-asc-short": "A – Z",
+    "alphabet-desc-short": "Z – A",
+    "duration-asc": "1 – 9",
+    "duration-desc": "9 – 1",
+    "duration-asc-short": "1 – 9",
+    "duration-desc-short": "9 – 1",
+    "status-asc": "Filtr siyahısına uyğun",
+    "status-desc": "Tərsinə çevrilmiş",
+    "status-asc-short": "Adi",
+    "status-desc-short": "Tərs"
+  },
+  "empty": {
+    "no-results": "Nəticə tapılmadı",
+    "no-attachments-results": "Əlavə məlumatı mövcud deyil",
+    "no-history-results": "Tarixçə məlumatı mövcud deyil",
+    "no-retries-results": "Təkrar məlumatı mövcud deyil"
+  },
+  "severity": {
+    "blocker": "bloklayıcı",
+    "critical": "kritik",
+    "normal": "normal",
+    "minor": "kiçik",
+    "trivial": "əhəmiyyətsiz"
+  },
+  "execution": {
+    "name": "İcra",
+    "body": "Test məzmunu",
+    "setup": "Hazırlıq",
+    "teardown": "Yekunlaşma"
+  },
+  "ui": {
+    "labels": "Etiketlər",
+    "metadata": "Metaməlumat",
+    "parameters": "Parametrlər",
+    "description": "Təsvir",
+    "links": "Keçidlər",
+    "overview": "Ümumi baxış",
+    "history": "Tarixçə",
+    "attachments": "Əlavələr",
+    "retries": "Təkrarlar",
+    "error": "Səhv",
+    "goToStep": "Addıma keç",
+    "showLess": "Daha az göstər",
+    "showMore": "Daha çox göstər",
+    "copy": "Kopyala",
+    "at": "üçün"
+  },
+  "controls": {
+    "newTabAttachment": "Yeni sekmede aç",
+    "nextTR": "Növbəti test nəticəsi",
+    "prevTR": "Əvvəlki test nəticəsi",
+    "downloadAttachment": "Əlavəni yüklə",
+    "backto": "Geri dön",
+    "clipboard": "Panoya kopyala",
+    "clipboardError": "Səhv. Görünür, bu xüsusiyyət brauzeriniz tərəfindən dəstəklənmir",
+    "clipboardSuccess": "Uğurla kopyalandı",
+    "collapse": "Daralt",
+    "expand": "Genişləndir",
+    "fullscreen": "Tam ekran",
+    "language": "Dili dəyiş"
+  },
+  "errors": {
+    "missedAttachment": "Əlavə tapılmadı"
+  }
+}