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

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

@@ -1,12 +1,13 @@
 import { cva } from "class-variance-authority";
+import { SizeEnum } from "../../../enums";
 
 export const sealVariants = cva(
   "flex items-center justify-center transition ease-in-out pointer-events-none w-fit stroke-none",
   {
     variants: {
       size: {
-        small: "w-600 h-600 rounded-300",
-        medium: "w-700 h-700 rounded-500",
+        [SizeEnum.SMALL]: "w-600 h-600 rounded-300",
+        [SizeEnum.MEDIUM]: "w-700 h-700 rounded-500",
       },
       variant: {
         add: "bg-grape-500",

package/src/components/Seal/components/AddIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const AddIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const AddIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/AlertIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const AlertIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const AlertIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/ErrorIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const ErrorIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const ErrorIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/LeftIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const LeftIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const LeftIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/MinusIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const MinusIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const MinusIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/RightIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const RightIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const RightIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/components/SuccessIcon/index.tsx

@@ -1,10 +1,14 @@
 import type { SealIconProps } from "../../types";
 import { Path, Svg } from "react-native-svg";
+import { SizeEnum } from "../../../../enums";
 
-export const SuccessIcon = ({ size = "medium", ...props }: SealIconProps) => {
+export const SuccessIcon = ({
+  size = SizeEnum.MEDIUM,
+  ...props
+}: SealIconProps) => {
   const sizes = {
-    small: 16,
-    medium: 24,
+    [SizeEnum.SMALL]: 16,
+    [SizeEnum.MEDIUM]: 24,
   };
 
   return (

package/src/components/Seal/index.tsx

@@ -14,12 +14,14 @@ import {
 } from "./components";
 import { merge } from "@kivid/tailwind-preset";
 import { sealVariants } from "./assets/class-variants";
+import { SizeEnum } from "../../enums";
 
 export const Seal: React.FC<SealProps> = ({
   variant,
-  size = "medium",
+  size = SizeEnum.MEDIUM,
   inverted = false,
   className = "",
+  testID,
 }) => {
   const mappedColorByVariant = {
     add: inverted ? "#7A50D9" : "#F2F7F7",
@@ -46,6 +48,7 @@ export const Seal: React.FC<SealProps> = ({
   return (
     <View
       className={merge(sealVariants({ size, variant, inverted }), className)}
+      testID={testID}
     >
       <Icon size={size} color={mappedColorByVariant[variant]} />
     </View>

package/src/components/Seal/types.ts

@@ -1,18 +1,20 @@
 import type { SvgProps } from "react-native-svg";
 import { SealVariantEnum } from "./enums";
+import { SizeEnum } from "../../enums";
 
 export type SealVariant = SealVariantEnum;
 
+export type SealSize = SizeEnum.SMALL | SizeEnum.MEDIUM;
+
 export interface SealIconProps extends SvgProps {
   size?: SealSize;
 }
 
-export type SealSize = "small" | "medium";
-
 export interface SealProps {
   variant: SealVariant;
   size?: SealSize;
   inverted?: boolean;
   disabled?: boolean;
   className?: string;
+  testID?: string;
 }

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

@@ -0,0 +1,28 @@
+import { cva } from "class-variance-authority";
+import { SizeEnum, CornersEnum } from "../../../enums";
+
+const buttonVariants = cva(["flex-row items-center justify-start gap-400"], {
+  variants: {
+    size: {
+      [SizeEnum.SMALL]: ["pl-400 pr-600 py-400"],
+      [SizeEnum.MEDIUM]: ["pl-400 pr-600 py-500"],
+      [SizeEnum.LARGE]: ["pl-400 pr-700 py-600"],
+    },
+    corners: {
+      [CornersEnum.SMALL]: "rounded-500",
+      [CornersEnum.MEDIUM]: "rounded-700",
+    },
+    selected: {
+      true: "bg-grape-100 disabled:bg-grape-100 disabled:opacity-30 border border-grape-200",
+      false:
+        "bg-chia-100 border-100 border-chia-400 disabled:bg-chia-200 disabled:opacity-50",
+    },
+  },
+  defaultVariants: {
+    selected: false,
+    size: SizeEnum.MEDIUM,
+    corners: CornersEnum.MEDIUM,
+  },
+});
+
+export { buttonVariants };

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

@@ -0,0 +1,4 @@
+export enum SelectButtonVariantEnum {
+  RADIO = "radio",
+  CHECKBOX = "checkbox",
+}

package/src/components/SelectButton/index.tsx

@@ -0,0 +1,133 @@
+import { useRef } from "react";
+import { Pressable, Animated, GestureResponderEvent } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import type { SelectButtonProps } from "./types";
+import { Typography } from "../Typography";
+import { buttonVariants } from "./assets/class-variants";
+import { RadioInput } from "../RadioInput";
+import { RadioInputVariantEnum } from "../RadioInput/enums";
+import { CheckboxInput } from "../CheckboxInput";
+import { CheckboxVariantEnum } from "../CheckboxInput/enums";
+import { SelectButtonVariantEnum } from "./enums";
+import { SizeEnum, CornersEnum } from "../../enums";
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export function SelectButton(props: SelectButtonProps) {
+  const {
+    variant = SelectButtonVariantEnum.CHECKBOX,
+    size = SizeEnum.LARGE,
+    corners = CornersEnum.MEDIUM,
+    isSelected,
+    disabled = false,
+    className,
+    children,
+    onPress,
+    accessibilityLabel,
+    ref,
+    onPressIn,
+    onPressOut,
+    numberOfLines = 1,
+
+    ...rest
+  } = props;
+
+  const animatedValue = useRef(new Animated.Value(1)).current;
+
+  const typographyVariantMap = {
+    [SizeEnum.SMALL]: "label_small",
+    [SizeEnum.MEDIUM]: "label_medium",
+    [SizeEnum.LARGE]: "label_large",
+  } as const;
+
+  const typographyVariant = typographyVariantMap[size];
+
+  function handlePress() {
+    onPress?.();
+  }
+
+  function renderContent() {
+    if (variant === SelectButtonVariantEnum.RADIO) {
+      return (
+        <RadioInput
+          variant={RadioInputVariantEnum.GRAPE}
+          isSelected={isSelected}
+          disabled={disabled}
+          className="pointer-events-none"
+        />
+      );
+    }
+
+    return (
+      <CheckboxInput
+        variant={CheckboxVariantEnum.GRAPE}
+        isChecked={isSelected}
+        disabled={disabled}
+        className="pointer-events-none"
+      />
+    );
+  }
+
+  const handlePressIn = (event: GestureResponderEvent) => {
+    Animated.timing(animatedValue, {
+      toValue: 0.7,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    onPressIn?.(event);
+  };
+
+  const handlePressOut = (event: GestureResponderEvent) => {
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration: 100,
+      useNativeDriver: true,
+    }).start();
+
+    onPressOut?.(event);
+  };
+
+  return (
+    <AnimatedPressable
+      ref={ref}
+      className={merge(
+        buttonVariants({
+          size,
+          corners,
+          selected: isSelected,
+        }),
+        className
+      )}
+      style={{
+        opacity: disabled ? 0.3 : animatedValue,
+      }}
+      disabled={disabled}
+      onPress={handlePress}
+      onPressIn={handlePressIn}
+      onPressOut={handlePressOut}
+      accessibilityRole="button"
+      accessibilityLabel={
+        accessibilityLabel ||
+        (typeof children === "string" ? children : "Button")
+      }
+      accessibilityState={{
+        disabled: disabled,
+        selected: isSelected,
+      }}
+      pointerEvents={disabled ? "none" : "auto"}
+      {...rest}
+    >
+      {renderContent()}
+
+      <Typography
+        variant={typographyVariant}
+        weight="700"
+        className="truncate flex-1 text-chia-900"
+        numberOfLines={numberOfLines}
+      >
+        {children}
+      </Typography>
+    </AnimatedPressable>
+  );
+}

package/src/components/SelectButton/types.ts

@@ -0,0 +1,21 @@
+import type { VariantProps } from "class-variance-authority";
+import { buttonVariants } from "./assets/class-variants";
+import { PressableProps, View } from "react-native";
+import { SelectButtonVariantEnum } from "./enums";
+import { SizeEnum, CornersEnum } from "../../enums";
+
+export interface SelectButtonProps
+  extends VariantProps<typeof buttonVariants>,
+    PressableProps {
+  size?: SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
+  corners?: CornersEnum.SMALL | CornersEnum.MEDIUM;
+  isSelected: boolean;
+  disabled?: boolean;
+  className?: string;
+  variant?: SelectButtonVariantEnum;
+  children?: React.ReactNode;
+  onPress?: () => void;
+  accessibilityLabel?: string;
+  ref?: React.RefObject<View | null>;
+  numberOfLines?: number;
+}

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

@@ -0,0 +1,93 @@
+import { cva } from "class-variance-authority";
+
+export const textInputContainerVariants = cva(
+  "flex-row items-center border border-chia-400 bg-chia-100",
+  {
+    variants: {
+      corners: {
+        small: "rounded-500",
+        medium: "rounded-700",
+      },
+      size: {
+        small: "h-[48px]",
+        medium: "h-[56px]",
+        large: "h-[64px]",
+      },
+      showLabel: {
+        true: "gap-400 px-600 py-500",
+        false: "px-600 py-500",
+      },
+      showLeftIcon: {
+        true: "",
+        false: "",
+      },
+      error: {
+        true: "border-blackberry-500",
+        false: "border-chia-400",
+      },
+      disabled: {
+        true: "opacity-40",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      corners: "medium",
+      size: "large",
+      showLabel: false,
+      showLeftIcon: false,
+      error: false,
+      disabled: false,
+    },
+  }
+);
+
+export const textInputContentVariants = cva(
+  "flex-1 flex-col text-chia-900 shrink min-w-0",
+  {
+    variants: {
+      showLabel: {
+        true: "gap-0",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      showLabel: false,
+    },
+  }
+);
+
+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/TextInput/enums.ts

@@ -0,0 +1,10 @@
+export enum TextInputCornersEnum {
+  SMALL = "small",
+  MEDIUM = "medium",
+}
+
+export enum TextInputSizeEnum {
+  SMALL = "small",
+  MEDIUM = "medium",
+  LARGE = "large",
+}

package/src/components/TextInput/index.tsx

@@ -0,0 +1,167 @@
+import { useRef } from "react";
+import { View, TextInput as RNTextInput, Pressable } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import { Seal } from "../Seal";
+import { SealVariantEnum } from "../Seal/enums";
+import type { TextInputProps } from "./types";
+import { TextInputCornersEnum, TextInputSizeEnum } from "./enums";
+import {
+  textInputContainerVariants,
+  textInputContentVariants,
+  textInputFieldVariants,
+} from "./assets/class-variants";
+import Typography from "../Typography";
+import { SizeEnum } from "../../enums";
+import { Tooltip } from "../Tooltip";
+import { TooltipVariantEnum } from "../Tooltip/enum";
+
+export function TextInput({
+  corners = TextInputCornersEnum.MEDIUM,
+  size = TextInputSizeEnum.LARGE,
+  label,
+  value,
+  onChangeText,
+  disabled = false,
+  error,
+  isValid,
+  className = "",
+  inputClassName = "",
+  labelClassName = "",
+  placeholder = "Placeholder",
+  accessibilityLabel,
+  containerTestID,
+  ref,
+  tooltipClassName = "",
+  tooltipPointerClassName,
+  tooltipContainerClassName,
+  leftIcon,
+  rightIcon,
+  ...rest
+}: TextInputProps) {
+  const inputRef = useRef<RNTextInput>(null);
+  const hasLabel = !!label;
+  const hasError = !!error;
+  const hasLeftIcon = !!leftIcon;
+
+  const shouldShowSeal = error || isValid;
+
+  const renderSeal = () => {
+    if (!shouldShowSeal) return null;
+
+    const testID = error ? "seal-error" : "seal-success";
+    const sealVariant = error ? SealVariantEnum.ERROR : SealVariantEnum.SUCCESS;
+
+    return (
+      <View className={"w-700 h-700"}>
+        <Seal variant={sealVariant} size={SizeEnum.MEDIUM} testID={testID} />
+      </View>
+    );
+  };
+
+  const renderRightIcon = () => {
+    if (rightIcon) {
+      return rightIcon;
+    }
+
+    return renderSeal();
+  };
+
+  const handleChangeText = (text: string) => {
+    onChangeText?.(text);
+  };
+
+  const getAccessibilityLabel = () => {
+    if (accessibilityLabel) return accessibilityLabel;
+
+    let labelText = label || "Text input";
+
+    if (error) labelText += `, error: ${error}`;
+    if (isValid) labelText += `, isValid`;
+    if (disabled) labelText += ", disabled";
+
+    return labelText;
+  };
+
+  return (
+    <Tooltip
+      isOpenedByVariantError={hasError}
+      message={error}
+      variant={TooltipVariantEnum.ERROR}
+      className={tooltipClassName}
+      pointerClassName={tooltipPointerClassName}
+      containerClassName={tooltipContainerClassName}
+    >
+      <Pressable
+        testID={containerTestID}
+        className={merge(
+          textInputContainerVariants({
+            corners,
+            size,
+            error: !!error,
+            disabled,
+            showLabel: hasLabel,
+            showLeftIcon: hasLeftIcon,
+          }),
+          className
+        )}
+        onPress={() => {
+          if (!disabled) {
+            inputRef.current?.focus();
+          }
+        }}
+        disabled={disabled}
+      >
+        {leftIcon && <View className="mr-400">{leftIcon}</View>}
+        <View
+          className={merge(textInputContentVariants({ showLabel: hasLabel }))}
+        >
+          {label && (
+            <Typography
+              variant="label_small"
+              weight="600"
+              className={merge("text-chia-900", labelClassName)}
+            >
+              {label}:
+            </Typography>
+          )}
+
+          <RNTextInput
+            value={value}
+            onChangeText={handleChangeText}
+            editable={!disabled}
+            placeholder={placeholder}
+            textAlignVertical="center"
+            className={merge(
+              textInputFieldVariants({
+                disabled,
+                isValid,
+                error: hasError,
+                showLabel: hasLabel,
+                size,
+              }),
+              inputClassName
+            )}
+            accessibilityLabel={getAccessibilityLabel()}
+            accessibilityState={{
+              disabled,
+            }}
+            {...rest}
+            ref={(instance) => {
+              inputRef.current = instance;
+
+              if (ref) {
+                ref.current = instance;
+              }
+            }}
+          />
+        </View>
+
+        {renderRightIcon()}
+      </Pressable>
+    </Tooltip>
+  );
+}
+
+TextInput.displayName = "TextInput";
+
+export default TextInput;

package/src/components/TextInput/types.ts

@@ -0,0 +1,30 @@
+import {
+  TextInputProps as RNTextInputProps,
+  TextInput as RNTextInput,
+} from "react-native";
+import { TextInputCornersEnum, TextInputSizeEnum } from "./enums";
+
+export type TextInputCorners = TextInputCornersEnum;
+export type TextInputSize = TextInputSizeEnum;
+
+export interface TextInputProps
+  extends Omit<RNTextInputProps, "value" | "onChangeText"> {
+  corners?: TextInputCorners;
+  size?: TextInputSize;
+  label?: string;
+  value?: string;
+  disabled?: boolean;
+  error?: string;
+  isValid?: boolean;
+  className?: string;
+  inputClassName?: string;
+  labelClassName?: string;
+  containerTestID?: string;
+  tooltipClassName?: string;
+  tooltipPointerClassName?: string;
+  tooltipContainerClassName?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onChangeText?: (text: string) => void;
+  ref?: React.RefObject<RNTextInput | null>;
+}