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

package/src/components/Seal/index.tsx

@@ -12,14 +12,16 @@ import {
   LeftIcon,
   AlertIcon,
 } from "./components";
-import { merge } from "@butterfly/tailwind-preset";
+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,132 @@
+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}
+        />
+      );
+    }
+
+    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: 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,74 @@
+import { cva } from "class-variance-authority";
+
+export const textInputContainerVariants = cva(
+  "flex-row items-center border border-chia-400 bg-chia-100 h-[64px]",
+  {
+    variants: {
+      corners: {
+        small: "rounded-500",
+        medium: "rounded-700",
+      },
+      showLabel: {
+        true: "gap-400 px-600 py-500",
+        false: "px-600 py-500",
+      },
+      error: {
+        true: "border-blackberry-500",
+        false: "border-chia-400",
+      },
+
+      disabled: {
+        true: "opacity-40",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      corners: "medium",
+      showLabel: false,
+      error: false,
+      disabled: false,
+    },
+  }
+);
+
+export const textInputContentVariants = cva("flex-1 flex-col text-chia-900", {
+  variants: {
+    showLabel: {
+      true: "gap-0",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    showLabel: false,
+  },
+});
+
+export const textInputFieldVariants = cva(
+  "font-nunito-bold text-[16px] leading-[18px] placeholder:text-chia-600 pt-[3px] android:pb-0 android:pl-0",
+  {
+    variants: {
+      disabled: {
+        true: "text-chia-900",
+        false: "",
+      },
+      isValid: {
+        true: "text-chia-900",
+        false: "",
+      },
+      error: {
+        true: "text-blackberry-500",
+        false: "",
+      },
+      showLabel: {
+        true: "min-h-700",
+        false: "min-h-800",
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+      isValid: false,
+      error: false,
+      showLabel: false,
+    },
+  }
+);

package/src/components/TextInput/enums.ts

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

package/src/components/TextInput/index.tsx

@@ -0,0 +1,159 @@
+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 } 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,
+  label,
+  value,
+  onChangeText,
+  disabled = false,
+  error,
+  isValid,
+  className = "",
+  inputClassName = "",
+  labelClassName = "",
+  placeholder = "Placeholder",
+  accessibilityLabel,
+  containerTestID,
+  ref,
+  tooltipClassName = "",
+  tooltipPointerClassName,
+  tooltipContainerClassName,
+  rightIcon,
+  ...rest
+}: TextInputProps) {
+  const inputRef = useRef<RNTextInput>(null);
+  const hasLabel = !!label;
+  const hasError = !!error;
+
+  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,
+            error: !!error,
+            disabled,
+            showLabel: hasLabel,
+          }),
+          className
+        )}
+        onPress={() => {
+          if (!disabled) {
+            inputRef.current?.focus();
+          }
+        }}
+        disabled={disabled}
+      >
+        <View
+          className={merge(textInputContentVariants({ showLabel: hasLabel }))}
+        >
+          {label && (
+            <Typography
+              variant="label_small"
+              weight="600"
+              className={labelClassName}
+            >
+              {label}:
+            </Typography>
+          )}
+
+          <RNTextInput
+            value={value}
+            onChangeText={handleChangeText}
+            editable={!disabled}
+            placeholder={placeholder}
+            className={merge(
+              textInputFieldVariants({
+                disabled,
+                isValid,
+                error: hasError,
+                showLabel: hasLabel,
+              }),
+              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,27 @@
+import {
+  TextInputProps as RNTextInputProps,
+  TextInput as RNTextInput,
+} from "react-native";
+import { TextInputCornersEnum } from "./enums";
+
+export type TextInputCorners = TextInputCornersEnum;
+
+export interface TextInputProps
+  extends Omit<RNTextInputProps, "value" | "onChangeText"> {
+  corners?: TextInputCorners;
+  label?: string;
+  value?: string;
+  disabled?: boolean;
+  error?: string;
+  isValid?: boolean;
+  className?: string;
+  inputClassName?: string;
+  labelClassName?: string;
+  containerTestID?: string;
+  tooltipClassName?: string;
+  tooltipPointerClassName?: string;
+  tooltipContainerClassName?: string;
+  rightIcon?: React.ReactNode;
+  onChangeText?: (text: string) => void;
+  ref?: React.RefObject<RNTextInput | null>;
+}

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

@@ -1,21 +1,22 @@
 import { View } from "react-native";
 import { Icon, Marker } from "./components";
 import type { TitleProps } from "./types";
-import { merge } from "@butterfly/tailwind-preset";
+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",
+}