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

package/src/components/Dropdown/index.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useRef, useEffect } from "react";
-import { View, Pressable, Modal, TouchableWithoutFeedback } from "react-native";
+import React from "react";
+import { View, Pressable } 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";
+import { merge } from "@kivid/tailwind-preset";
 
 export function Dropdown(props: DropdownProps) {
   const {
@@ -16,6 +16,7 @@ export function Dropdown(props: DropdownProps) {
     placeholder,
     disabled = false,
     className,
+    contentBoxClassName,
     leftButtonText,
     hidePlaceholder = false,
     children,
@@ -23,48 +24,14 @@ export function Dropdown(props: DropdownProps) {
     iconButtonAlign = "right",
     size = SizeEnum.MEDIUM,
     corner = SizeEnum.SMALL,
+    isActive = false,
+    onActiveChange,
   } = 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);
+    onActiveChange(!isActive);
   };
 
   const textStyle = cva("text-chia-900", {
@@ -89,6 +56,9 @@ export function Dropdown(props: DropdownProps) {
     },
   });
 
+  const triggerStyle = merge(dropdownStyle({ size, corner }), className);
+  const boxStyle = merge("absolute top-full left-0 w-full mt-100 z-50 bg-white border border-gray-200 rounded-xl shadow-lg", contentBoxClassName);
+
   const triggerPositionStyle = cva("flex-row w-full", {
     variants: {
       align: {
@@ -136,7 +106,7 @@ export function Dropdown(props: DropdownProps) {
       <Pressable
         onPress={handlePress}
         disabled={disabled}
-        className={dropdownStyle({ size, corner })}
+        className={triggerStyle}
       >
         <View className="flex-row justify-between items-center">
           <View className="">
@@ -164,13 +134,13 @@ export function Dropdown(props: DropdownProps) {
                 {leftButtonText}
               </Typography>
             )}
-            <Animated.View
+            <View
               style={{
-                transform: [{ rotate }],
+                transform: [{ rotate: isActive ? "180deg" : "0deg" }],
               }}
             >
               <ArrowChevronDownStroke size={24} className="text-chia-900" />
-            </Animated.View>
+            </View>
           </View>
         </View>
       </Pressable>
@@ -178,36 +148,18 @@ export function Dropdown(props: DropdownProps) {
   }
 
   return (
-    <>
-      <View ref={triggerRef} className={className}>
+    <View className={className}>
+      <View className="relative">
         {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>
-    </>
+        {isActive && (
+          <>
+            <View className={boxStyle}>
+              {children}
+            </View>
+          </>
+        )}
+      </View>
+    </View>
   );
 }

package/src/components/Dropdown/types.ts

@@ -8,6 +8,7 @@ export interface DropdownProps {
   placeholder?: string;
   disabled?: boolean;
   className?: string;
+  contentBoxClassName?: string;
   leftButtonText?: string;
   hidePlaceholder?: boolean;
   children: ReactNode;
@@ -15,4 +16,6 @@ export interface DropdownProps {
   iconButtonAlign?: "left" | "right" | "center";
   size?: SizeEnum.SMALL | SizeEnum.MEDIUM;
   corner?: SizeEnum.SMALL | SizeEnum.MEDIUM;
+  isActive: boolean;
+  onActiveChange: (isActive: boolean) => void;
 }

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

@@ -40,6 +40,10 @@ const buttonVariants = cva(
           "bg-chia-100 text-chia-900 border border-chia-400",
           "disabled:bg-chia-200 disabled:opacity-50 disabled:text-chia-900",
         ],
+        [ListButtonVariantEnum.GHOST]: [
+          "bg-transparent text-chia-900 border-0",
+          "disabled:bg-chia-200 disabled:opacity-50 disabled:text-chia-900",
+        ],
       },
       size: {
         [SizeEnum.SMALL]: "py-400 pr-400 pl-600",

package/src/components/ListButton/assets/design-system-showcase.ts

@@ -499,4 +499,73 @@ export const listButtonShowcaseVariants: Record<
       iconRight: true,
     },
   ],
+  ghost: [
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.SMALL,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.LARGE,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.MEDIUM,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      disabled: true,
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      iconLeft: true,
+    },
+    {
+      variant: ListButtonVariantEnum.GHOST,
+      size: SizeEnum.SMALL,
+      corners: CornersEnum.MEDIUM,
+      children: "Label Text",
+      iconColor: "#393E3E",
+      iconLeft: true,
+      iconRight: true,
+    },
+  ],
 };

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

@@ -6,4 +6,5 @@ export enum ListButtonVariantEnum {
   BLACKBERRY = "blackberry",
   CHIA = "chia",
   OUTLINE = "outline",
+  GHOST = "ghost",
 }

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

@@ -0,0 +1,96 @@
+import { cva } from "class-variance-authority";
+
+export const textInputContainerVariants = cva(
+  "flex-row px-600 py-500 border-b border-r border-l border-chia-400 bg-chia-100 min-h-[120px]",
+  {
+    variants: {
+      corners: {
+        small: "rounded-500",
+        medium: "rounded-700",
+      },
+      error: {
+        true: "border-blackberry-500",
+        false: "border-chia-400",
+      },
+      disabled: {
+        true: "opacity-40",
+        false: "",
+      },
+      insideLabel: {
+        true: "border-t-0 rounded-100",
+        false: "border-t",
+      },
+    },
+    compoundVariants: [
+      {
+        insideLabel: true,
+        corners: "small",
+        class: "rounded-bl-500 rounded-br-500",
+      },
+      {
+        insideLabel: true,
+        corners: "medium",
+        class: "rounded-bl-700 rounded-br-700",
+      },
+    ],
+    defaultVariants: {
+      corners: "medium",
+      error: false,
+      disabled: false,
+      insideLabel: false,
+    },
+  }
+);
+
+export const labelVariant = cva("flex-row w-full justify-between", {
+  variants: {
+    insideLabel: {
+      true: "border-t border-l border-r border-chia-400 bg-chia-100 px-600 pt-500",
+      false: "mb-400",
+    },
+    corners: {
+      small: "rounded-tl-500 rounded-tr-500",
+      medium: "rounded-tl-700 rounded-tr-700",
+    },
+  },
+  defaultVariants: {
+    insideLabel: false,
+    corners: "medium",
+  },
+})
+
+export const textInputFieldVariants = cva(
+  "flex-1 font-nunito-bold text-[16px] leading-[20px] placeholder:text-chia-600 android:p-0 min-w-0",
+  {
+    variants: {
+      disabled: {
+        true: "",
+        false: "",
+      },
+      isValid: {
+        true: "text-chia-900",
+        false: "",
+      },
+      error: {
+        true: "text-blackberry-500",
+        false: "",
+      },
+      showLabel: {
+        true: "min-h-700",
+        false: "min-h-800",
+      },
+      size: {
+        small: "ios:pt-[3px]",
+        medium: "ios:pt-[3px]",
+        large: "ios:pt-[2px]",
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+      isValid: false,
+      error: false,
+      showLabel: false,
+      size: "large",
+    },
+  }
+);

package/src/components/TextAreaInput/enums.ts

@@ -0,0 +1,4 @@
+export enum TextAreaInputCornersEnum {
+  SMALL = "small",
+  MEDIUM = "medium",
+}

package/src/components/TextAreaInput/index.tsx

@@ -0,0 +1,119 @@
+import { View, TextInput as RNTextInput, Pressable } from 'react-native';
+
+import { TextAreaInputProps } from './types';
+import { Tooltip } from '../Tooltip';
+import { TooltipVariantEnum } from '../Tooltip/enum';
+import Typography from '../Typography';
+import { TextAreaInputCornersEnum } from './enums';
+import { labelVariant, textInputContainerVariants, textInputFieldVariants } from './assets/class-variants';
+import { merge } from '@kivid/tailwind-preset';
+import { useRef } from 'react';
+
+export function TextAreaInput(props: TextAreaInputProps) {
+  const {
+    value,
+    onChangeText,
+    onBlur,
+    placeholder,
+    label,
+    error,
+    maxLength = 200,
+    disabled = false,
+    corners = TextAreaInputCornersEnum.MEDIUM,
+    insideLabel = false,
+    className,
+    inputClassName,
+    labelClassName,
+    tooltipClassName,
+    tooltipPointerClassName,
+    tooltipContainerClassName,
+    showMaxLength = true,
+    containerTestID,
+    ...rest
+  } = props;
+  const currentLength = value?.length || 0;
+  const hasLabel = !!label;
+  const hasError = !!error;
+
+  const inputRef = useRef<RNTextInput>(null);
+
+  const handleChangeText = (text: string) => {
+    if (text.length <= maxLength) {
+      onChangeText?.(text);
+    }
+  };
+
+  const formattedCurrentLength = currentLength.toString().padStart(3, '0');
+
+  return (
+    <Tooltip
+      isOpenedByVariantError={hasError}
+      message={error}
+      variant={TooltipVariantEnum.ERROR}
+      className={tooltipClassName}
+      pointerClassName={tooltipPointerClassName}
+      containerClassName={tooltipContainerClassName}
+    >
+      <View className={labelVariant({ insideLabel, corners })}>
+        {label && (
+          <Typography
+            variant="label_small"
+            weight="600"
+            className={merge("text-chia-900", labelClassName)}
+          >
+            {label}
+          </Typography>
+        )}
+
+        {showMaxLength && (
+          <Typography
+            variant="label_small"
+            weight="500"
+            className="text-chia-600"
+          >
+            {formattedCurrentLength}/{maxLength}
+          </Typography>
+        )}
+      </View>
+
+      <Pressable
+        testID={containerTestID}
+        className={merge(
+          textInputContainerVariants({
+            corners,
+            error: !!error,
+            disabled,
+            insideLabel,
+          }),
+          className
+        )}
+        onPress={() => {
+          if (!disabled) {
+            inputRef.current?.focus();
+          }
+        }}
+        disabled={disabled}
+      >
+        <RNTextInput
+          value={value}
+          onChangeText={handleChangeText}
+          onBlur={onBlur}
+          placeholder={placeholder}
+          multiline
+          maxLength={maxLength}
+          placeholderTextColor="#9CA3AF"
+          textAlignVertical="top"
+          className={merge(
+            textInputFieldVariants({
+              disabled,
+              error: hasError,
+              showLabel: hasLabel,
+            }),
+            inputClassName
+          )}
+          {...rest}
+        />
+      </Pressable>
+    </Tooltip>
+  );
+}

package/src/components/TextAreaInput/types.ts

@@ -0,0 +1,28 @@
+import {
+  TextInputProps as RNTextInputProps,
+  TextInput as RNTextInput,
+} from "react-native";
+import { TextAreaInputCornersEnum } from "./enums";
+
+export type TextAreaInputCorners = TextAreaInputCornersEnum;
+
+export interface TextAreaInputProps
+  extends Omit<RNTextInputProps, "value" | "onChangeText"> {
+  corners?: TextAreaInputCorners;
+  label?: string;
+  value?: string;
+  disabled?: boolean;
+  error?: string;
+  className?: string;
+  inputClassName?: string;
+  labelClassName?: string;
+  containerTestID?: string;
+  tooltipClassName?: string;
+  tooltipPointerClassName?: string;
+  tooltipContainerClassName?: string;
+  maxLength?: number;
+  showMaxLength?: boolean;
+  insideLabel?: boolean;
+  onChangeText?: (text: string) => void;
+  ref?: React.RefObject<RNTextInput | null>;
+}

package/src/components/index.ts

@@ -50,6 +50,7 @@ export * from "./Toast/enums";
 export type * from "./Toast/types";
 
 export * from "./Tooltip";
+export * from "./Tooltip/enum";
 export type * from "./Tooltip/types";
 
 export * from "./ListButton";
@@ -92,3 +93,7 @@ export type * from "./Tab/types";
 
 export * from "./Dropdown";
 export type * from "./Dropdown/types";
+
+export * from "./TextAreaInput";
+export * from "./TextAreaInput/enums";
+export type * from "./TextAreaInput/types";