DApp-1551 blocks/Tooltip

src/blocks/index.ts

@@ -4,6 +4,7 @@ export { HoverableSVG, type HoverableSVGProps } from './hoverableSVG';
 export { Separator, type SeparatorProps } from './separator';
 export { Skeleton, type SkeletonProps } from './skeleton';
 export { Text, type TextProps } from './text';
+export { Tooltip, type TooltipProps } from './tooltip';
 
 export * from './Blocks.colors';
 export * from './Blocks.constants';

src/blocks/tooltip/Tooltip.constants.ts

@@ -0,0 +1,10 @@
+import type { TooltipProps } from './Tooltip.types';
+
+export const tooltipCSSPropsKeys: (keyof TooltipProps)[] = [
+  'height',
+  'maxHeight',
+  'minHeight',
+  'maxWidth',
+  'minWidth',
+  'width',
+];

src/blocks/tooltip/Tooltip.tsx

@@ -0,0 +1,102 @@
+import { type FC, useRef, useState } from 'react';
+import styled from 'styled-components';
+import type { TooltipContainerProps, TooltipProps } from './Tooltip.types';
+import { fadeInAnimation, fadeOutAnimation, getTooltipPositionalCSS, getTooltipResponsiveCSS } from './Tooltip.utils';
+import { getBlocksColor } from 'blocks/Blocks.utils';
+import { useDimensions } from 'hooks/useDimensions';
+
+import { tooltipCSSPropsKeys } from './Tooltip.constants';
+
+const StyledTooltip = styled.div.withConfig({
+  shouldForwardProp: (prop, defaultValidatorFn) =>
+    !tooltipCSSPropsKeys.includes(prop as keyof TooltipProps) && defaultValidatorFn(prop),
+})<TooltipProps>`
+  /* Tooltip responsive styles */
+  ${(props) => getTooltipResponsiveCSS(props)}
+
+  /* Tooltip default styles */
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  z-index: 10;
+  padding: 8px;
+  position: absolute;
+  border-radius: 12px;
+  background-color: ${getBlocksColor('light', 'black')};
+  visibility: ${({ visible }) => (visible ? 'visible' : 'hidden')};
+  animation: ${({ visible }) => (visible ? fadeInAnimation : fadeOutAnimation)} 0.1s ease-in-out;
+
+  /* Tooltip position */
+  ${(props) => getTooltipPositionalCSS(props)}
+
+  ${(props) => props.css || ''};
+`;
+
+const TooltipContainer = styled.div<TooltipContainerProps>`
+  position: relative;
+  cursor: ${({ trigger }) => (trigger === 'click' ? 'pointer' : 'default')};
+`;
+
+const TooltipTitle = styled.div`
+  color: ${getBlocksColor('light', 'white')};
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 130%;
+`;
+
+const TooltipDescription = styled.div`
+  color: ${getBlocksColor('light', 'gray-400')};
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+const Tooltip: FC<TooltipProps> = ({
+  tooltipPosition = 'top-right',
+  width = 'max-content',
+  maxWidth = '171px',
+  trigger = 'hover',
+  children,
+  description,
+  title,
+  overlay,
+  ...props
+}) => {
+  const [visible, setVisible] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const { width: containerWidth, height: containerHeight } = useDimensions(containerRef);
+
+  const showTooltip = () => setVisible(true);
+  const hideTooltip = () => setVisible(false);
+
+  return (
+    <TooltipContainer
+      ref={containerRef}
+      onMouseEnter={trigger === 'hover' ? showTooltip : undefined}
+      onClick={trigger === 'click' ? () => setVisible((prev) => !prev) : undefined}
+      onMouseLeave={hideTooltip}
+      trigger={trigger}
+    >
+      <StyledTooltip
+        {...props}
+        {...{ tooltipPosition, visible, containerWidth, containerHeight, width, maxWidth }}
+      >
+        {overlay ? (
+          overlay
+        ) : (
+          <>
+            {title && <TooltipTitle>{title}</TooltipTitle>}
+            {description && <TooltipDescription>{description}</TooltipDescription>}
+          </>
+        )}
+      </StyledTooltip>
+      {children}
+    </TooltipContainer>
+  );
+};
+
+Tooltip.displayName = 'Tooltip';
+
+export { Tooltip };

src/blocks/tooltip/Tooltip.types.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+
+import type { BlockWithoutStyleProp, ResponsiveProp, SpaceType, ValueOf } from '../Blocks.types';
+import type { FlattenSimpleInterpolation } from 'styled-components';
+
+export type TooltipResponsiveProps = {
+  /* Sets height css property */
+  height?: ResponsiveProp<string>;
+  /* Sets margin css property */
+  margin?: ResponsiveProp<SpaceType>;
+  /* Sets max-height css property */
+  maxHeight?: ResponsiveProp<string>;
+  /* Sets min-height css property */
+  minHeight?: ResponsiveProp<string>;
+  /* Sets max-width css property */
+  maxWidth?: ResponsiveProp<string>;
+  /* Sets min-width css property */
+  minWidth?: ResponsiveProp<string>;
+  /* Sets width css property */
+  width?: ResponsiveProp<string>;
+};
+
+export type TooltipPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+export type TooltipComponentProps = {
+  /* Additional prop from styled components to apply custom css to Tooltip */
+  css?: FlattenSimpleInterpolation;
+  /* Child react nodes rendered by Tooltip */
+  children?: ReactNode;
+  /* Overlay content component of the Tooltip */
+  overlay?: ReactNode;
+  /* Title of the Tooltip */
+  title?: string;
+  /* Description to be displayed in the tooltip */
+  description?: string;
+  /* Position of the Tooltip */
+  tooltipPosition?: TooltipPosition;
+  /* Boolean value indicating whether Tooltip is visible */
+  visible?: boolean;
+  /* Width of the tooltip container */
+  containerWidth?: number;
+  /* Height of the toolip container */
+  containerHeight?: number;
+};
+
+export type TooltipContainerProps = {
+  /* Trigger for the Tooltip to open */
+  trigger?: 'hover' | 'click';
+};
+
+export type TooltipProps = TooltipResponsiveProps &
+  TooltipComponentProps &
+  TooltipContainerProps &
+  BlockWithoutStyleProp<HTMLDivElement>;
+
+export type TooltipResponsiveCSSProperties =
+  | 'height'
+  | 'max-height'
+  | 'min-height'
+  | 'max-width'
+  | 'min-width'
+  | 'width';
+
+export type TooltipResponsivePropValues = ValueOf<TooltipResponsiveProps>;
+
+export type TooltipResponsiveCSSPropertiesData = {
+  propName: TooltipResponsiveCSSProperties;
+  prop: TooltipResponsivePropValues;
+};

src/blocks/tooltip/Tooltip.utils.ts

@@ -0,0 +1,72 @@
+import { keyframes } from 'styled-components';
+import { getResponsiveCSS } from '../Blocks.utils';
+import type { TooltipResponsiveCSSPropertiesData, TooltipResponsiveProps, TooltipProps } from './Tooltip.types';
+
+const getTooltipResponsiveCSSProperties = (props: TooltipResponsiveProps): TooltipResponsiveCSSPropertiesData[] => [
+  { propName: 'height', prop: props.height },
+  { propName: 'max-height', prop: props.maxHeight },
+  { propName: 'min-height', prop: props.minHeight },
+  { propName: 'max-width', prop: props.maxWidth },
+  { propName: 'min-width', prop: props.minWidth },
+  { propName: 'width', prop: props.width },
+];
+
+export const getTooltipResponsiveCSS = (props: TooltipResponsiveProps) => {
+  const data = getTooltipResponsiveCSSProperties(props);
+  return getResponsiveCSS(data);
+};
+
+export const fadeInAnimation = keyframes`
+  from {
+    transform: scale(.25);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+`;
+
+export const fadeOutAnimation = keyframes`
+  from {
+    transform: scale(1);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(.25);
+    opacity: 1;
+  }
+`;
+
+export const getTooltipPositionalCSS = ({ tooltipPosition, containerHeight }: TooltipProps) => {
+  switch (tooltipPosition) {
+    case 'bottom-right':
+      return `
+        left: 0px;
+        border-top-left-radius: 4px;
+        top: ${containerHeight}px;
+      `;
+    case 'bottom-left':
+      return `
+        right: 0px;
+        border-top-right-radius: 4px;
+        top: ${containerHeight}px;
+      `;
+    case 'top-left':
+      return `
+        right: 0px;
+        border-bottom-right-radius: 4px;
+        bottom: ${containerHeight}px;
+      `;
+    case 'top-right':
+      return `
+        left: 0px;
+        border-bottom-left-radius: 4px;
+        bottom: ${containerHeight}px;
+      `;
+    default:
+      return '';
+  }
+};

src/blocks/tooltip/index.ts

@@ -0,0 +1,4 @@
+export * from './Tooltip';
+export * from './Tooltip.types';
+export * from './Tooltip.utils';
+export * from './Tooltip.constants';

src/hooks/useDimensions.tsx

@@ -0,0 +1,20 @@
+import { RefObject, useMemo, useSyncExternalStore } from 'react';
+
+function subscribeToResize(callback: () => void) {
+  window.addEventListener('resize', callback);
+
+  return () => {
+    window.removeEventListener('resize', callback);
+  };
+}
+
+export function useDimensions(ref: RefObject<HTMLElement>) {
+  const dimensions = useSyncExternalStore(subscribeToResize, () =>
+    JSON.stringify({
+      width: ref.current?.offsetWidth ?? 0,
+      height: ref.current?.offsetHeight ?? 0,
+    })
+  );
+
+  return useMemo(() => JSON.parse(dimensions), [dimensions]);
+}