@kivid/native-components 1.0.0-alpha.5 → 1.0.0-alpha.7

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";
+
+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,
+    ...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 buttonStyle = merge(
+    buttonVariants({
+      size,
+      corners,
+      selected: isSelected,
+    }),
+    className
+  );
+
+  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 (
+    <Animated.View
+      style={{
+        opacity: animatedValue,
+      }}
+    >
+      <Pressable
+        ref={ref}
+        className={buttonStyle}
+        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="text-chia-900"
+          numberOfLines={1}
+        >
+          {children}
+        </Typography>
+      </Pressable>
+    </Animated.View>
+  );
+}

package/src/components/SelectButton/types.ts

@@ -0,0 +1,20 @@
+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>;
+}

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-semibold text-[16px] leading-[18px] placeholder:text-chia-600 pt-[3px]",
+  {
+    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,145 @@
+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 = "",
+  ...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 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="This is a error"
+      variant={TooltipVariantEnum.ERROR}
+      className={tooltipClassName}
+    >
+      <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>
+        {renderSeal()}
+      </Pressable>
+    </Tooltip>
+  );
+}
+
+TextInput.displayName = "TextInput";
+
+export default TextInput;

package/src/components/TextInput/types.ts

@@ -0,0 +1,24 @@
+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;
+  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,3 +1,5 @@
+import { SizeEnum } from "../../../../enums";
+
 export enum IconVariants {
   SUCCESS = "success",
   ERROR = "error",
@@ -5,8 +7,11 @@ export enum IconVariants {
   ADD = "add",
   CUSTOM = "custom",
 }
+
+export type IconSize = SizeEnum.SMALL | SizeEnum.MEDIUM | SizeEnum.LARGE;
+
 export interface IconProps {
   variants: IconVariants;
-  size?: "small" | "medium" | "large";
+  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

@@ -3,19 +3,20 @@ import { Icon, Marker } from "./components";
 import type { TitleProps } from "./types";
 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",
+}

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;
+}