@kivid/native-components 1.0.0-alpha.1 → 1.0.0-alpha.11

package/src/components/Toast/index.tsx

@@ -0,0 +1,102 @@
+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 { Close } 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);
+
+  useEffect(() => {
+    if (!isToastOpen) return;
+
+    if (timerRef.current) clearTimeout(timerRef.current);
+
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+
+    timerRef.current = setTimeout(() => {
+      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() {
+    onCloseToast(false);
+    if (timerRef.current) clearTimeout(timerRef.current);
+  }
+
+  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];
+
+  return (
+    <Animated.View
+      className={containerStyle}
+    >
+      <View
+        className={merge(toastStyle, className)}
+        style={{
+          boxShadow: elevationDown100
+        }}
+      >
+        <View className="flex flex-row items-center gap-500">
+          <Icon />
+
+          <View className="flex items-center gap-8">
+            <Typography
+              className={merge("title_small font-bold text-chia-100", descriptionClassName)}
+            >
+              {description}
+            </Typography>
+          </View>
+        </View>
+
+        <Pressable className="cursor-pointer" onPress={handleClose}>
+          <Close color="#FAFCFC" 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,14 +1,14 @@
 import type { ToggleProps } from "./types";
 import { Pressable, View } from "react-native";
-import { VariantEnum } from "./enums";
-import { merge } from "@butterfly/tailwind-preset";
+import { ToggleVariantEnum } from "./enums";
+import { merge } from "@kivid/tailwind-preset";
 import { toggleVariants } from "./assets/class-variants";
 
 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>
+  );
+}

package/src/components/Tooltip/types.ts

@@ -0,0 +1,14 @@
+import { ViewStyle } from "react-native";
+import { TooltipVariantEnum } from "./enum";
+
+export interface TooltipProps {
+  children?: React.ReactNode;
+  message: React.ReactNode;
+  variant?: TooltipVariantEnum;
+  className?: string;
+  pointerClassName?: string;
+  containerClassName?: string;
+  style?: ViewStyle;
+  onChangeVisibility?: (isVisible: boolean) => void;
+  isOpenedByVariantError?: boolean;
+}

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

@@ -0,0 +1,56 @@
+import { cva } from "class-variance-authority";
+import { Platform } from "react-native";
+
+const getWeightVariants = () => {
+  if (Platform.OS === "web") {
+    return {
+      "200": "font-[200]",
+      "300": "font-[300]",
+      "400": "font-[400]",
+      "500": "font-[500]",
+      "600": "font-[600]",
+      "700": "font-[700]",
+      "800": "font-[800]",
+      "900": "font-[900]",
+    };
+  }
+
+  return {
+    "200": "font-nunito-extralight",
+    "300": "font-nunito-light",
+    "400": "font-nunito-regular",
+    "500": "font-nunito-medium",
+    "600": "font-nunito-semibold",
+    "700": "font-nunito-bold",
+    "800": "font-nunito-extrabold",
+    "900": "font-nunito-black",
+  };
+};
+
+export const typographyVariants = cva("font-nunito-regular text-chia-900", {
+  variants: {
+    variant: {
+      label_small: "text-[12px] leading-[16px]",
+      label_medium: "text-[14px] leading-[16px]",
+      label_large: "text-[16px] leading-[18px]",
+      body_small: "text-[12px] leading-[16px]",
+      body_medium: "text-[14px] leading-[20px]",
+      body_large: "text-[16px] leading-[24px]",
+      title_small: "text-[16px] leading-[20px]",
+      title_medium: "text-[18px] leading-[22px]",
+      title_large: "text-[22px] leading-[24px]",
+      headline_small: "text-[26px] leading-[32px]",
+      headline_medium: "text-[32px] leading-[36px]",
+      headline_large: "text-[36px] leading-[40px]",
+      display_small: "text-[40px] leading-[48px]",
+      display_medium: "text-[44px] leading-[56px]",
+      display_large: "text-[56px] leading-[64px]",
+    },
+    weight: getWeightVariants(),
+  },
+
+  defaultVariants: {
+    variant: "body_medium",
+    weight: "400",
+  },
+});

package/src/components/Typography/index.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { Text } from "react-native";
 import type { TypographyProps } from "./types";
-import { merge } from "@butterfly/tailwind-preset";
+import { merge } from "@kivid/tailwind-preset";
+import { typographyVariants } from "./assets/class-variants";
 
 /**
  * Universal Typography component for React Native.
@@ -14,26 +15,29 @@ import { merge } from "@butterfly/tailwind-preset";
  *
  * @example
  * // Display text with automatic font mapping
- * <Typography variant="text-display_large_700">Hero Title</Typography>
+ * <Typography variant="display_large" weight="700">Hero Title</Typography>
  *
  * @example
  * // Body text with medium weight
- * <Typography variant="text-body_medium_500">Content text</Typography>
+ * <Typography variant="body_medium" weight="500">Content text</Typography>
  *
  * @example
  * // With additional styling
- * <Typography variant="text-label_small_300" className="text-gray-600">
+ * <Typography variant="label_small" weight="300" className="text-gray-600">
  *   Form label
  * </Typography>
  */
 export const Typography: React.FC<TypographyProps> = ({
   variant,
   className,
-  style,
+  weight,
   children,
   ...props
 }) => {
-  const textClassName = merge(`font-nunito`, variant, className);
+  const textClassName = merge(
+    typographyVariants({ variant, weight }),
+    className
+  );
 
   return (
     <Text className={textClassName} {...props}>

package/src/components/Typography/types.ts

@@ -1,8 +1,10 @@
 import type { TextProps as RNTextProps } from "react-native";
-import type { TypographyVariant } from "@butterfly/tailwind-preset";
+import type { VariantProps } from "class-variance-authority";
+import { typographyVariants } from "./assets/class-variants";
 
-export interface TypographyProps extends Omit<RNTextProps, "children"> {
-  variant: TypographyVariant;
+export interface TypographyProps
+  extends Omit<RNTextProps, "children">,
+    VariantProps<typeof typographyVariants> {
   className?: string;
   children: React.ReactNode;
 }