@allurereport/web-awesome 3.0.0-beta.6 → 3.0.0-beta.8

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

@@ -1,48 +0,0 @@
-.toggle {
-  padding: 0;
-  margin: 0;
-  appearance: none;
-  width: 28px;
-  height: 16px;
-  background-color: var(--bg-base-neutral);
-  position: relative;
-  border-radius: 9px;
-  padding: 2px;
-  transition: background-color var(--color-change-transition-duration);
-  cursor: pointer;
-
-  &:hover {
-    background-color: var(--on-icon-secondary);
-  }
-
-  &:active {
-    background-color: var(--on-icon-primary);
-  }
-
-  &:checked {
-    background-color: var(--bg-support-aldebaran);
-
-    &:hover {
-      background-color: var(--bg-support-aldebaran-medium);
-    }
-
-    &:active {
-      background-color: var(--bg-support-aldebaran-heavy);
-    }
-
-    &::after {
-      transform: translateX(12px);
-    }
-  }
-
-  &::after {
-    content: "";
-    display: block;
-    width: 12px;
-    height: 12px;
-    border-radius: 100px;
-    background-color: var(--constant-on-icon-primary);
-    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
-    transition: transform var(--interaction-transition-duration) ease-out;
-  }
-}

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

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

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

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

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