@kivid/native-components 1.0.0-alpha.2 → 1.0.0-alpha.21

package/src/components/Title/components/icon/index.tsx

@@ -1,9 +1,10 @@
 import type { IconProps } from "./types";
 import { InformationStatus } from "../../../InformationStatus";
 import { InformationStatusOptionsEnum } from "../../../InformationStatus/enums";
+import { SizeEnum } from "../../../../enums";
 
 export function Icon(props: IconProps) {
-  const { variants, customIcon, size = "medium" } = props;
+  const { variants, customIcon, size = SizeEnum.MEDIUM } = props;
 
   function renderIcon() {
     if (variants === "success") {

package/src/components/Title/components/icon/types.ts

@@ -1,12 +1,9 @@
-export enum IconVariants {
-  SUCCESS = "success",
-  ERROR = "error",
-  WARNING = "warning",
-  ADD = "add",
-  CUSTOM = "custom",
-}
+import { StateVariantEnum, SizeEnum } from "../../../../enums";
+
+export type IconSize = SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
+
 export interface IconProps {
-  variants: IconVariants;
-  size?: "small" | "medium" | "large";
+  variants: StateVariantEnum;
+  size?: IconSize;
   customIcon?: React.ReactNode;
 }

package/src/components/Title/components/marker/index.tsx

@@ -1,12 +1,13 @@
 import { View } from "react-native";
 import type { MarkerProps } from "./types";
+import { SizeEnum } from "../../../../enums";
 
 export function Marker(props: MarkerProps) {
-  const { size = "medium", color = "chia" } = props;
+  const { size = SizeEnum.MEDIUM, color = "chia" } = props;
 
   const mappedSize = {
-    small: "w-700 h-300",
-    medium: "w-800 h-[6px]",
+    [SizeEnum.SMALL]: "w-700 h-300",
+    [SizeEnum.MEDIUM]: "w-800 h-[6px]",
   }[size];
 
   const mappedColor = {

package/src/components/Title/components/marker/types.ts

@@ -1,5 +1,9 @@
+import { SizeEnum } from "../../../../enums";
+
+export type MarkerSize = SizeEnum.SMALL | SizeEnum.MEDIUM;
+
 export interface MarkerProps {
-  size?: "small" | "medium";
+  size?: MarkerSize;
   color?:
     | "pear"
     | "java"

package/src/components/Title/index.tsx

@@ -3,19 +3,20 @@ import { Icon, Marker } from "./components";
 import type { TitleProps } from "./types";
 import { merge } from "@kivid/tailwind-preset";
 import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../enums";
 
 function Title(props: TitleProps) {
-  const { children, className, variant = "medium", head } = props;
+  const { children, className, variant = SizeEnum.MEDIUM, head } = props;
 
   const variantClass = cva("", {
     variants: {
       variant: {
-        "2xlarge": "pb-600",
-        xlarge: "pb-500",
-        large: "pb-600",
-        medium: "pb-600",
-        small: "pb-400",
-        xsmall: "pb-400",
+        [SizeEnum.XXLARGE]: "pb-600",
+        [SizeEnum.XLARGE]: "pb-500",
+        [SizeEnum.LARGE]: "pb-600",
+        [SizeEnum.MEDIUM]: "pb-600",
+        [SizeEnum.SMALL]: "pb-400",
+        [SizeEnum.XSMALL]: "pb-400",
       },
     },
   })({ variant });

package/src/components/Title/types.ts

@@ -1,7 +1,17 @@
 import type React from "react";
+import { SizeEnum } from "../../enums";
+
+export type TitleSize =
+  | SizeEnum.XXLARGE
+  | SizeEnum.XLARGE
+  | SizeEnum.LARGE
+  | SizeEnum.MEDIUM
+  | SizeEnum.SMALL
+  | SizeEnum.XSMALL;
+
 export interface TitleProps {
   children: React.ReactNode;
   className?: string;
-  variant?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+  variant?: TitleSize;
   head: React.ReactNode;
 }

package/src/components/Toast/assets/class-variants.ts

@@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority";
+import { ToastPositionEnum, ToastVariantEnum } from "../enums";
+
+const toastVariants = cva(
+  "justify-between min-w-[200px] max-w min-h-12 mx-600 px-500 py-400 gap-400 items-center flex flex-row rounded-700",
+  {
+    variants: {
+      variant: {
+        [ToastVariantEnum.SUCCESS]: "bg-pear-500",
+        [ToastVariantEnum.ERROR]: "bg-blackberry-500",
+        [ToastVariantEnum.WARNING]: "bg-tangerine-500",
+      },
+    },
+    defaultVariants: {
+      variant: ToastVariantEnum.SUCCESS,
+    },
+  }
+);
+
+const containerVariants = cva("absolute z-[800px] w-full min-h-12 flex", {
+  variants: {
+    position: {
+      [ToastPositionEnum.TOP]: "top-1000",
+      [ToastPositionEnum.BOTTOM]: "bottom-1000",
+    },
+  },
+  defaultVariants: {
+    position: ToastPositionEnum.TOP,
+  },
+});
+
+export { toastVariants, containerVariants };

package/src/components/Toast/enums/index.ts

@@ -0,0 +1,2 @@
+export * from "./variant";
+export * from "./position";

package/src/components/Toast/enums/position.ts

@@ -0,0 +1,4 @@
+export enum ToastPositionEnum {
+  TOP = "top",
+  BOTTOM = "bottom",
+}

package/src/components/Toast/enums/variant.ts

@@ -0,0 +1,5 @@
+export enum ToastVariantEnum {
+  SUCCESS = "success",
+  ERROR = "error",
+  WARNING = "warning",
+}

package/src/components/Toast/index.tsx

@@ -0,0 +1,131 @@
+import { useEffect, useRef } from "react";
+import { View, Animated, Pressable } from "react-native";
+import { ToastProps } from "./types";
+import { ToastPositionEnum, ToastVariantEnum } from "./enums";
+import { containerVariants, toastVariants } from "./assets/class-variants";
+
+import { EssentialCloseStroke } from "@kivid/icons/native";
+import Typography from "../Typography";
+import { merge } from "@kivid/tailwind-preset";
+import { Seal } from "../Seal";
+import { SealVariantEnum } from "../Seal/enums";
+import { elevationDown100 } from "../../styles/mixins/shadows";
+
+export function Toast(props: ToastProps) {
+  const {
+    description,
+    isToastOpen,
+    onCloseToast,
+    className,
+    descriptionClassName,
+    durationInMilliSeconds = 3000,
+    position = ToastPositionEnum.TOP,
+    variant = ToastVariantEnum.SUCCESS,
+  } = props;
+
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const isClosingRef = useRef(false);
+
+  useEffect(() => {
+    if (!isToastOpen) return;
+
+    isClosingRef.current = false;
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+
+    timerRef.current = setTimeout(() => {
+      if (isClosingRef.current) return;
+
+      isClosingRef.current = true;
+      Animated.timing(animatedValue, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }).start(() => {
+        onCloseToast(false);
+      });
+    }, durationInMilliSeconds);
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, [isToastOpen]);
+
+  if (!isToastOpen) return null;
+
+  function handleClose() {
+    if (isClosingRef.current) return;
+
+    isClosingRef.current = true;
+    if (timerRef.current) clearTimeout(timerRef.current);
+
+    Animated.timing(animatedValue, {
+      toValue: 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start(() => {
+      onCloseToast(false);
+    });
+  }
+
+  const toastStyle = toastVariants({ variant });
+  const containerStyle = containerVariants({ position });
+
+  const iconMap = {
+    [ToastVariantEnum.SUCCESS]: () => (
+      <Seal variant={SealVariantEnum.SUCCESS} inverted />
+    ),
+    [ToastVariantEnum.ERROR]: () => (
+      <Seal variant={SealVariantEnum.ERROR} inverted />
+    ),
+    [ToastVariantEnum.WARNING]: () => (
+      <Seal variant={SealVariantEnum.ALERT} inverted />
+    ),
+  };
+
+  const Icon = iconMap[variant];
+
+  const animatedStyle = {
+    opacity: animatedValue,
+    transform: [
+      {
+        translateY: animatedValue.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-20, 0],
+        }),
+      },
+    ],
+  };
+
+  return (
+    <Animated.View className={containerStyle} style={animatedStyle}>
+      <View
+        className={merge(toastStyle, className)}
+        style={{
+          boxShadow: elevationDown100,
+        }}
+      >
+        <Icon />
+        <Typography
+          className={merge(
+            "title_small font-bold text-chia-100 truncate flex-1",
+            descriptionClassName
+          )}
+        >
+          {description}
+        </Typography>
+
+        <Pressable className="cursor-pointer" onPress={handleClose}>
+          <EssentialCloseStroke className="text-chia-100" size={30} />
+        </Pressable>
+      </View>
+    </Animated.View>
+  );
+}

package/src/components/Toast/types.ts

@@ -0,0 +1,12 @@
+import type { ToastPositionEnum, ToastVariantEnum } from "./enums";
+
+export interface ToastProps {
+  className?: string;
+  descriptionClassName?: string;
+  description: string;
+  variant?: ToastVariantEnum;
+  position?: ToastPositionEnum;
+  durationInMilliSeconds?: number;
+  isToastOpen: boolean;
+  onCloseToast: (value: boolean) => void;
+}

package/src/components/Toggle/enums/variant.ts

@@ -1,4 +1,4 @@
-export enum VariantEnum {
+export enum ToggleVariantEnum {
   GRAPE = "grape",
   JAVA = "java",
   PEAR = "pear",

package/src/components/Toggle/index.tsx

@@ -1,6 +1,6 @@
 import type { ToggleProps } from "./types";
 import { Pressable, View } from "react-native";
-import { VariantEnum } from "./enums";
+import { ToggleVariantEnum } from "./enums";
 import { merge } from "@kivid/tailwind-preset";
 import { toggleVariants } from "./assets/class-variants";
 
@@ -8,7 +8,7 @@ export function Toggle(props: ToggleProps) {
   const {
     checked,
     disabled = false,
-    variant = VariantEnum.JAVA,
+    variant = ToggleVariantEnum.JAVA,
     onChange,
   } = props;
 

package/src/components/Toggle/types.ts

@@ -1,8 +1,8 @@
-import type { VariantEnum } from "./enums";
+import type { ToggleVariantEnum } from "./enums";
 
 export interface ToggleProps {
   checked: boolean;
   disabled?: boolean;
-  variant?: VariantEnum;
+  variant?: ToggleVariantEnum;
   onChange: (checked: boolean) => void;
 }

package/src/components/Tooltip/assets/class-variant.ts

@@ -0,0 +1,26 @@
+import { cva } from "class-variance-authority";
+import { TooltipVariantEnum } from "../enum";
+
+export const contentVariants = cva(
+  "bg-chia-200 rounded-500 p-400 px-3 py-2 border z-50",
+  {
+    variants: {
+      variant: {
+        [TooltipVariantEnum.ERROR]: "text-red-600 border-blackberry-300",
+        [TooltipVariantEnum.TRIGGER]: "border-chia-400",
+      },
+    },
+  }
+);
+
+export const pointerVariants = cva(
+  "absolute -top-[9px] mx-4 w-0 h-0 border-l-8 border-r-8 border-b-8 border-l-transparent border-r-transparent",
+  {
+    variants: {
+      variant: {
+        [TooltipVariantEnum.ERROR]: "border-b-blackberry-300",
+        [TooltipVariantEnum.TRIGGER]: "border-b-chia-400",
+      },
+    },
+  }
+);

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

@@ -0,0 +1,93 @@
+import { View } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import { ContentProps } from "./types";
+import { TooltipPointerOffsetEnum, TooltipVariantEnum } from "../../enum";
+import { contentVariants, pointerVariants } from "../../assets/class-variant";
+import { SealVariantEnum } from "../../../Seal/enums";
+import { Seal } from "../../../Seal";
+import Typography from "../../../Typography";
+import { SizeEnum } from "../../../../enums";
+
+export function Content(props: ContentProps) {
+  const {
+    message,
+    variant = TooltipVariantEnum.TRIGGER,
+    className,
+    isVisible,
+    translateX,
+    pointerOffset,
+    pointerClassName,
+    containerClassName,
+    onLayout,
+  } = props;
+
+  const pointerStyle = pointerVariants({ variant });
+  const contentStyle = contentVariants({ variant });
+  const mergedContainerClassName = merge(
+    "absolute top-full mt-[9px] z-50 self-center",
+    containerClassName
+  );
+
+  function renderContent() {
+    if (variant === TooltipVariantEnum.ERROR) {
+      return (
+        <View className="flex flex-row items-center gap-2">
+          <Seal variant={SealVariantEnum.ERROR} size={SizeEnum.SMALL} />
+          {typeof message === "string" ? (
+            <Typography
+              className="text-blackberry-500"
+              variant="body_small"
+              weight="600"
+            >
+              {message}
+            </Typography>
+          ) : (
+            message
+          )}
+        </View>
+      );
+    }
+
+    return typeof message === "string" ? (
+      <Typography className="text-chia-900" variant="body_small" weight="600">
+        {message}
+      </Typography>
+    ) : (
+      message
+    );
+  }
+
+  if (!isVisible) return null;
+
+  const mappedPointerPosition: Record<
+    TooltipPointerOffsetEnum,
+    "flex-start" | "flex-end" | "center"
+  > = {
+    [TooltipPointerOffsetEnum.LEFT]: "flex-start",
+    [TooltipPointerOffsetEnum.RIGHT]: "flex-end",
+    [TooltipPointerOffsetEnum.CENTER]: "center",
+  };
+
+  return (
+    <View
+      className={mergedContainerClassName}
+      style={{
+        transform: [{ translateX: translateX ?? 0 }],
+      }}
+      onLayout={onLayout}
+    >
+      <View className={merge(contentStyle, className)}>
+        {renderContent()}
+        <View
+          className={merge(pointerStyle, pointerClassName)}
+          style={{
+            alignSelf:
+              mappedPointerPosition[
+                pointerOffset ?? TooltipPointerOffsetEnum.CENTER
+              ],
+          }}
+        />
+      </View>
+    </View>
+  );
+}

package/src/components/Tooltip/components/Content/types.ts

@@ -0,0 +1,15 @@
+import { LayoutChangeEvent } from "react-native";
+import { TooltipPointerOffsetEnum, TooltipVariantEnum } from "../../enum";
+
+export interface ContentProps {
+  message: string | React.ReactNode;
+  variant?: TooltipVariantEnum;
+  className?: string;
+  pointerClassName?: string;
+  containerClassName?: string;
+  isVisible: boolean;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  translateX?: number;
+  pointerOffset?: TooltipPointerOffsetEnum;
+  onChangeVisibility?: (isVisible: boolean) => void;
+}

package/src/components/Tooltip/components/index.ts

@@ -0,0 +1 @@
+export * from "./Content";

package/src/components/Tooltip/enum/index.ts

@@ -0,0 +1,10 @@
+export enum TooltipVariantEnum {
+  ERROR = "error",
+  TRIGGER = "trigger",
+}
+
+export enum TooltipPointerOffsetEnum {
+  LEFT = "left",
+  CENTER = "center",
+  RIGHT = "right",
+}

package/src/components/Tooltip/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./tooltip-position";

package/src/components/Tooltip/hooks/tooltip-position.ts

@@ -0,0 +1,85 @@
+import { useState, useCallback, useMemo } from "react";
+import { Dimensions, LayoutChangeEvent, LayoutRectangle } from "react-native";
+import { TooltipPointerOffsetEnum } from "../enum";
+
+interface TooltipPositionData {
+  triggerLayout: LayoutRectangle | null;
+  tooltipLayout: LayoutRectangle | null;
+  screenWidth: number;
+  adjustedPosition: {
+    translateX?: number;
+  };
+  pointerOffset?: TooltipPointerOffsetEnum;
+}
+
+export function useTooltipPosition(): {
+  positionData: TooltipPositionData;
+  onTriggerLayout: (event: LayoutChangeEvent) => void;
+  onTooltipLayout: (event: LayoutChangeEvent) => void;
+} {
+  const [triggerLayout, setTriggerLayout] = useState<LayoutRectangle | null>(
+    null
+  );
+  const [tooltipLayout, setTooltipLayout] = useState<LayoutRectangle | null>(
+    null
+  );
+
+  const screenWidth = Dimensions.get("window").width;
+
+  const onTriggerLayout = useCallback((event: LayoutChangeEvent) => {
+    setTriggerLayout(event.nativeEvent.layout);
+  }, []);
+
+  const onTooltipLayout = useCallback((event: LayoutChangeEvent) => {
+    setTooltipLayout(event.nativeEvent.layout);
+  }, []);
+
+  const pointerOffset = useMemo(() => {
+    if (!triggerLayout || !tooltipLayout)
+      return TooltipPointerOffsetEnum.CENTER;
+
+    const elementPositionX = triggerLayout.x;
+    const tooltipPositionXAxis = elementPositionX + tooltipLayout.width;
+
+    if (elementPositionX === 0) {
+      return TooltipPointerOffsetEnum.LEFT;
+    }
+
+    if (tooltipPositionXAxis > screenWidth) {
+      return TooltipPointerOffsetEnum.RIGHT;
+    }
+
+    return TooltipPointerOffsetEnum.CENTER;
+  }, [triggerLayout, tooltipLayout]);
+
+  const calculateAdjustedPosition = useCallback(() => {
+    if (!triggerLayout || !tooltipLayout) {
+      return { translateX: 0 };
+    }
+
+    const elementPositionX = triggerLayout.x;
+    const tooltipPositionXAxis = elementPositionX + tooltipLayout.width;
+
+    if (elementPositionX === 0) {
+      return { translateX: -tooltipLayout.x };
+    }
+
+    if (tooltipPositionXAxis > screenWidth) {
+      return { translateX: tooltipLayout.x };
+    }
+
+    return { translateX: 0 };
+  }, [triggerLayout, tooltipLayout, screenWidth]);
+
+  return {
+    positionData: {
+      triggerLayout,
+      tooltipLayout,
+      screenWidth,
+      adjustedPosition: calculateAdjustedPosition(),
+      pointerOffset,
+    },
+    onTriggerLayout,
+    onTooltipLayout,
+  };
+}

package/src/components/Tooltip/index.tsx

@@ -0,0 +1,90 @@
+import { View, Pressable } from "react-native";
+import { Content } from "./components";
+import { useTooltipPosition } from "./hooks";
+import { TooltipProps } from "./types";
+
+import { TooltipVariantEnum } from "./enum";
+import { useState, useCallback, cloneElement, isValidElement, ReactElement } from "react";
+
+export function Tooltip(props: TooltipProps) {
+  const {
+    children,
+    message,
+    variant = TooltipVariantEnum.TRIGGER,
+    className,
+    containerClassName,
+    pointerClassName,
+    isOpenedByVariantError,
+    onChangeVisibility
+  } = props;
+  const { positionData, onTriggerLayout, onTooltipLayout } =
+    useTooltipPosition();
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleVisibilityChange = useCallback((visible: boolean) => {
+    setIsVisible(visible);
+    onChangeVisibility?.(visible);
+  }, [onChangeVisibility]);
+
+  const handleToggleVisibility = useCallback(() => {
+    const newVisibility = !isVisible;
+    handleVisibilityChange(newVisibility);
+  }, [isVisible, handleVisibilityChange]);
+
+  const renderTriggerContent = () => {
+    if (variant !== TooltipVariantEnum.TRIGGER) {
+      return children;
+    }
+
+    if (isValidElement(children)) {
+      const child = children as ReactElement;
+      const childProps = child.props as any;
+
+      const componentType = child.type as any;
+      const componentName = (typeof componentType === 'function'
+        ? componentType.displayName || componentType.name
+        : componentType) || '';
+      const isButton = componentName === 'Button' ||
+        componentName === 'Pressable' ||
+        componentName === 'TouchableOpacity';
+
+      if (isButton || (childProps && typeof childProps.onPress === 'function')) {
+        return cloneElement(child, {
+          ...childProps,
+          onPress: (...args: any[]) => {
+            if (typeof childProps.onPress === 'function') {
+              childProps.onPress(...args);
+              handleToggleVisibility();
+            }
+          }
+        })
+      }
+    }
+
+    return (
+      <Pressable onPress={handleToggleVisibility}>
+        {children}
+      </Pressable>
+    );
+  };
+
+  return (
+    <View className="relative" onLayout={onTriggerLayout}>
+      {renderTriggerContent()}
+
+      <Content
+        message={message}
+        variant={variant}
+        isVisible={variant === TooltipVariantEnum.TRIGGER ? isVisible : !!isOpenedByVariantError}
+        onLayout={onTooltipLayout}
+        translateX={positionData.adjustedPosition.translateX}
+        pointerOffset={positionData.pointerOffset}
+        className={className}
+        containerClassName={containerClassName}
+        pointerClassName={pointerClassName}
+        onChangeVisibility={handleVisibilityChange}
+      />
+    </View>
+  );
+}