@kivid/native-components 1.0.0-alpha.24 → 1.0.0-alpha.25

package/src/components/Dropdown/index.tsx

@@ -0,0 +1,213 @@
+import React, { useState, useRef, useEffect } from "react";
+import { View, Pressable, Modal, TouchableWithoutFeedback } from "react-native";
+import { Typography } from "../Typography";
+import type { DropdownProps } from "./types";
+import { ArrowChevronDownStroke } from "@kivid/icons/native";
+import { Animated, Easing } from "react-native";
+import { IconButton } from "../IconButton";
+import { IconButtonSizeEnum } from "../IconButton/enums";
+import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../enums";
+
+export function Dropdown(props: DropdownProps) {
+  const {
+    label,
+    value,
+    placeholder,
+    disabled = false,
+    className,
+    leftButtonText,
+    hidePlaceholder = false,
+    children,
+    iconButtonTrigger,
+    iconButtonAlign = "right",
+    size = SizeEnum.MEDIUM,
+    corner = SizeEnum.SMALL,
+  } = props;
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [dropdownLayout, setDropdownLayout] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+  const triggerRef = useRef<View>(null);
+
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.timing(rotateAnim, {
+      toValue: isOpen ? 1 : 0,
+      duration: 200,
+      easing: Easing.out(Easing.ease),
+      useNativeDriver: true,
+    }).start();
+  }, [isOpen, rotateAnim]);
+
+  const rotate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0deg", "180deg"],
+  });
+
+
+  const handlePress = () => {
+    if (disabled) return;
+
+    triggerRef.current?.measureInWindow((x, y, width, height) => {
+      setDropdownLayout({
+        top: y + height + 4,
+        left: x,
+        width: width,
+      });
+      setIsOpen(true);
+    });
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  const textStyle = cva("text-chia-900", {
+    variants: {
+      placeholder: {
+        true: "text-chia-600",
+        false: "text-chia-900",
+      },
+    },
+  });
+
+  const dropdownStyle = cva("bg-chia-100 border border-chia-400 px-500 ", {
+    variants: {
+      size: {
+        [SizeEnum.SMALL]: "py-400",
+        [SizeEnum.MEDIUM]: "py-600",
+      },
+      corner: {
+        [SizeEnum.SMALL]: "rounded-400",
+        [SizeEnum.MEDIUM]: "rounded-700",
+      },
+    },
+  });
+
+  const triggerPositionStyle = cva("flex-row w-full", {
+    variants: {
+      align: {
+        left: "justify-start",
+        right: "justify-end",
+        center: "justify-center",
+      },
+    },
+  });
+
+  function renderVariant() {
+    const displayPlaceholder = !!placeholder && !value;
+    if (hidePlaceholder) {
+      return null;
+    }
+
+    return (
+      <View className="flex-row justify-between gap-100">
+        <Typography
+          variant="label_large"
+          weight="700"
+          className={textStyle({ placeholder: displayPlaceholder })}
+        >
+          {displayPlaceholder ? placeholder : value}
+        </Typography>
+      </View>
+    );
+  }
+
+  function renderTrigger() {
+    if (iconButtonTrigger) {
+      return (
+        <View className={triggerPositionStyle({ align: iconButtonAlign })}>
+          <IconButton
+            onPress={handlePress}
+            disabled={disabled}
+            size={IconButtonSizeEnum.MEDIUM}
+            {...iconButtonTrigger}
+          />
+        </View>
+      );
+    }
+
+    return (
+      <Pressable
+        onPress={handlePress}
+        disabled={disabled}
+        className={dropdownStyle({ size, corner })}
+      >
+        <View className="flex-row justify-between items-center">
+          <View className="">
+            <View className="flex-col">
+              {label && (
+                <Typography
+                  variant="label_small"
+                  weight="600"
+                  className="text-chia-900"
+                >
+                  {label}
+                </Typography>
+              )}
+            </View>
+
+            {renderVariant()}
+          </View>
+
+          <View className="flex-row items-center gap-400">
+            {leftButtonText && (
+              <Typography
+                variant="label_medium"
+                weight="700"
+              >
+                {leftButtonText}
+              </Typography>
+            )}
+            <Animated.View
+              style={{
+                transform: [{ rotate }],
+              }}
+            >
+              <ArrowChevronDownStroke size={24} className="text-chia-900" />
+            </Animated.View>
+          </View>
+        </View>
+      </Pressable>
+    )
+  }
+
+  return (
+    <>
+      <View ref={triggerRef} className={className}>
+        {renderTrigger()}
+      </View>
+
+      <Modal
+        visible={isOpen}
+        transparent
+        animationType="fade"
+        onRequestClose={handleClose}
+      >
+        <TouchableWithoutFeedback onPress={handleClose}>
+          <View className="flex-1">
+            <TouchableWithoutFeedback>
+              <View
+                style={{
+                  position: "absolute",
+                  top: dropdownLayout.top,
+                  left: dropdownLayout.left,
+                  width: dropdownLayout.width,
+                  zIndex: 9999,
+                }}
+                className="bg-white border border-gray-200 rounded-xl shadow-lg"
+              >
+                {children}
+              </View>
+            </TouchableWithoutFeedback>
+          </View>
+        </TouchableWithoutFeedback>
+      </Modal>
+    </>
+  );
+}

package/src/components/Dropdown/types.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { IconButtonProps } from "../IconButton/types";
+import { SizeEnum } from "../../enums";
+
+export interface DropdownProps {
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  leftButtonText?: string;
+  hidePlaceholder?: boolean;
+  children: ReactNode;
+  iconButtonTrigger?: IconButtonProps;
+  iconButtonAlign?: "left" | "right" | "center";
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM;
+  corner?: SizeEnum.SMALL | SizeEnum.MEDIUM;
+}

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

@@ -0,0 +1,83 @@
+import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../../enums";
+
+const tabContainerVariants = cva(["flex-row w-full"], {
+  variants: {
+    size: {
+      [SizeEnum.MEDIUM]: "",
+      [SizeEnum.SMALL]: "",
+    },
+  },
+  defaultVariants: {
+    size: SizeEnum.MEDIUM,
+  },
+});
+
+const dividerVariants = cva(
+  [
+    "w-full",
+  ],
+  {
+    variants: {
+      selected: {
+        true: "h-200 bg-grape-500",
+        false: "h-[1px] bg-chia-400",
+      },
+      size: {
+        [SizeEnum.MEDIUM]: "mt-500",
+        [SizeEnum.SMALL]: "mt-400",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+      size: SizeEnum.MEDIUM,
+    },
+  }
+);
+
+const tabLabelVariants = cva("", {
+  variants: {
+    selected: {
+      true: "text-chia-900",
+      false: "text-chia-700",
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});
+
+const tabCountVariants = cva(
+  ["px-300 rounded-300 items-center justify-center ml-400"],
+  {
+    variants: {
+      selected: {
+        true: "bg-grape-500",
+        false: "bg-chia-400",
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  }
+);
+
+const tabCountTextVariants = cva("", {
+  variants: {
+    selected: {
+      true: "text-chia-100",
+      false: "text-chia-700",
+    },
+  },
+  defaultVariants: {
+    selected: false,
+  },
+});
+
+export {
+  tabContainerVariants,
+  dividerVariants,
+  tabLabelVariants,
+  tabCountVariants,
+  tabCountTextVariants,
+};

package/src/components/Tab/index.tsx

@@ -0,0 +1,92 @@
+import { Pressable, View } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import type { TabProps } from "./types";
+import {
+  tabContainerVariants,
+  dividerVariants,
+  tabLabelVariants,
+  tabCountVariants,
+  tabCountTextVariants,
+} from "./assets/class-variants";
+import { Typography } from "../Typography";
+import { SizeEnum } from "../../enums";
+
+export function Tab(props: TabProps) {
+  const {
+    items,
+    onTabChange,
+    size = SizeEnum.MEDIUM,
+    className,
+    selectedTab,
+    customDividerColor,
+    customDividerComponent,
+  } = props;
+
+  const handleTabPress = (index: number) => {
+    onTabChange?.(index);
+  };
+
+  const containerStyle = merge(tabContainerVariants({ size }), className);
+
+  return (
+    <View className={containerStyle} accessibilityRole="tablist">
+      {items.map((item, index) => {
+        const selected = selectedTab === index;
+        const buttonStyle = merge("flex-1 flex-col items-center justify-center", className);
+        const labelStyle = tabLabelVariants({ selected });
+        const countTextStyle = tabCountTextVariants({ selected });
+
+        const dividerStyle = (selected && customDividerColor)
+          ? merge(dividerVariants({ selected, size }), customDividerColor)
+          : dividerVariants({ selected, size });
+
+        const countContainerStyle = (selected && customDividerColor)
+          ? merge(tabCountVariants({ selected }), customDividerColor)
+          : tabCountVariants({ selected });
+
+        const renderDivider = () => {
+          if (selected && customDividerComponent) {
+            return customDividerComponent;
+          }
+
+          return (
+            <View className={dividerStyle} />
+          )
+        };
+
+        return (
+          <Pressable
+            key={index}
+            testID={`tab-${index}`}
+            className={buttonStyle}
+            onPress={() => handleTabPress(index)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected }}
+          >
+            <View className="flex flex-row">
+              <Typography
+                variant={size === SizeEnum.MEDIUM ? "label_medium" : "label_small"}
+                weight="700"
+                className={labelStyle}
+              >
+                {item.label}
+              </Typography>
+              {item.count !== undefined && (
+                <View className={countContainerStyle}>
+                  <Typography
+                    variant="label_small"
+                    weight="700"
+                    className={countTextStyle}
+                  >
+                    {item.count}
+                  </Typography>
+                </View>
+              )}
+            </View>
+            {renderDivider()}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/src/components/Tab/types.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import { SizeEnum } from "../../enums";
+
+export type TabSize = SizeEnum.SMALL | SizeEnum.MEDIUM;
+
+export interface TabItem {
+  label: string;
+  count?: number;
+}
+
+export interface TabProps{
+  items: TabItem[];
+  onTabChange: (index: number) => void;
+  size?: TabSize;
+  className?: string;
+  customDividerColor?: string;
+  customDividerComponent?: ReactNode;
+  selectedTab: number;
+  selected?: boolean;
+}

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

@@ -3,7 +3,7 @@ import type { MarkerProps } from "./types";
 import { SizeEnum } from "../../../../enums";
 
 export function Marker(props: MarkerProps) {
-  const { size = SizeEnum.MEDIUM, color = "chia" } = props;
+  const { size = SizeEnum.MEDIUM, color = "chia", customMarkerComponent } = props;
 
   const mappedSize = {
     [SizeEnum.SMALL]: "w-700 h-300",
@@ -22,5 +22,13 @@ export function Marker(props: MarkerProps) {
     ghost: "bg-chia-200",
   }[color];
 
-  return <View className={`${mappedColor} ${mappedSize} rounded-500`} />;
+  function renderMarker() {
+    if (customMarkerComponent) {
+      return customMarkerComponent
+    }
+
+    return <View className={`${mappedColor} ${mappedSize} rounded-500`} />;
+  }
+
+  return renderMarker();
 }

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

@@ -3,6 +3,7 @@ import { SizeEnum } from "../../../../enums";
 export type MarkerSize = SizeEnum.SMALL | SizeEnum.MEDIUM;
 
 export interface MarkerProps {
+  customMarkerComponent?: React.ReactNode;
   size?: MarkerSize;
   color?:
     | "pear"

package/src/components/index.ts

@@ -86,3 +86,9 @@ export type * from "./MessageInput/types";
 
 export * from "./DatePicker";
 export type * from "./DatePicker/types";
+
+export * from "./Tab";
+export type * from "./Tab/types";
+
+export * from "./Dropdown";
+export type * from "./Dropdown/types";