@kivid/native-components 1.0.0-alpha.20 → 1.0.0-alpha.22

package/src/components/DatePicker/index.tsx

@@ -0,0 +1,203 @@
+import { useState, useMemo, useCallback } from 'react';
+import { View } from 'react-native';
+import { Calendar, DateData, LocaleConfig } from 'react-native-calendars';
+import { format } from 'date-fns';
+import { ptBR } from 'date-fns/locale';
+import type { DatePickerProps } from './types';
+
+import { defaultTheme } from './assets/theme';
+import Typography from '../Typography';
+import { ArrowLeftStroke, ArrowRightStroke } from '@kivid/icons/native';
+
+LocaleConfig.locales['pt-br'] = {
+  monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
+  monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
+  dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
+  dayNamesShort: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S'],
+  today: 'Hoje'
+};
+LocaleConfig.defaultLocale = 'pt-br';
+
+export function DatePicker(props: DatePickerProps) {
+  const {
+    selectedDates,
+    onSelectedDatesChange,
+    initialDate,
+    minDate,
+    maxDate,
+    markedDates: externalMarkedDates,
+    unavailableDates,
+    theme: customTheme,
+    selectionType,
+    ...rest
+  } = props;
+
+
+  const [currentMonth, setCurrentMonth] = useState<string>(
+    initialDate || format(new Date(), 'yyyy-MM-dd'),
+  );
+
+  const onDayPress = useCallback(
+    (day: DateData) => {
+      const dateString = day.dateString;
+
+      if (unavailableDates?.includes(dateString)) {
+        return;
+      }
+
+      if (externalMarkedDates?.[dateString]) {
+        return;
+      }
+
+      if (!selectionType) {
+        onSelectedDatesChange(dateString);
+
+        return;
+      }
+
+      if (selectionType === 'multi-dot') {
+        onSelectedDatesChange((prev) => {
+          const isSelected = prev.includes(dateString);
+          const newDates = isSelected
+            ? prev.filter((d) => d !== dateString)
+            : [...prev, dateString];
+          return newDates;
+        });
+        return;
+      }
+    },
+    [onSelectedDatesChange, selectionType, externalMarkedDates, unavailableDates],
+  );
+
+  const markedDates = useMemo(() => {
+    const filteredExternalMarkedDates = externalMarkedDates
+      ? Object.keys(externalMarkedDates).reduce((acc, date) => {
+        if (!unavailableDates?.includes(date)) {
+          acc[date] = externalMarkedDates[date];
+        }
+        return acc;
+      }, {} as typeof externalMarkedDates)
+      : {};
+
+    const marked = { ...filteredExternalMarkedDates };
+
+    if (unavailableDates) {
+      unavailableDates.forEach((date) => {
+        marked[date] = {
+          disabled: true,
+          disableTouchEvent: true,
+          textColor: '#D1D5DB',
+          dotColor: '#D1D5DB',
+        };
+      });
+    }
+
+    if (filteredExternalMarkedDates) {
+      Object.keys(filteredExternalMarkedDates).forEach((date) => {
+        marked[date] = {
+          ...marked[date],
+          disableTouchEvent: true,
+          selected: true,
+          selectedColor: '#EAE0FF',
+          selectedTextColor: '#1F2937',
+        };
+      });
+    }
+
+    if (!selectionType && selectedDates && selectedDates.length > 0) {
+      const firstDate = selectedDates[0];
+      if (!unavailableDates?.includes(firstDate)) {
+        marked[firstDate] = {
+          ...marked[firstDate],
+          selected: true,
+          selectedColor: '#EAE0FF',
+          selectedTextColor: '#1F2937',
+        };
+      }
+      return marked;
+    }
+
+    if (selectionType === 'multi-dot') {
+      selectedDates.forEach((date) => {
+        if (!unavailableDates?.includes(date)) {
+          marked[date] = {
+            ...marked[date],
+            selected: true,
+            selectedColor: '#EAE0FF',
+            selectedTextColor: '#1F2937',
+          };
+        }
+      });
+      return marked;
+    }
+
+    return marked;
+  }, [selectedDates, externalMarkedDates, selectionType, unavailableDates]);
+
+  const mergedTheme = {
+    ...defaultTheme,
+    ...customTheme,
+  };
+
+  const handlePressArrowLeft = useCallback(
+    (subtractMonth: () => void) => {
+      subtractMonth();
+    },
+    [],
+  );
+
+  const handlePressArrowRight = useCallback(
+    (addMonth: () => void) => {
+      addMonth();
+    },
+    [],
+  );
+
+  const handleMonthChange = useCallback((date: DateData) => {
+    setCurrentMonth(date.dateString);
+  }, []);
+
+  return (
+    <View >
+      <Calendar
+        current={currentMonth}
+        onDayPress={onDayPress}
+        onMonthChange={handleMonthChange}
+        onPressArrowLeft={handlePressArrowLeft}
+        onPressArrowRight={handlePressArrowRight}
+        markedDates={markedDates}
+        minDate={minDate}
+        maxDate={maxDate}
+        theme={mergedTheme}
+        enableSwipeMonths
+        hideExtraDays={false}
+        markingType={selectionType}
+        firstDay={0}
+        renderArrow={(direction) => (
+          <View
+            className='items-center border p-400 mb-600 rounded-500 border-chia-400 bg-chia-100'>
+            {direction === 'left' ? (
+              <ArrowLeftStroke size={24} className="text-gray-900" />
+            ) : (
+              <ArrowRightStroke size={24} className="text-gray-900" />
+            )}
+          </View>
+        )}
+        renderHeader={(date) => {
+          const formattedDate = format(new Date(date), 'MMMM yy', {
+            locale: ptBR,
+          });
+          const capitalizedDate =
+            formattedDate.charAt(0).toUpperCase() + formattedDate.slice(1);
+
+          return (
+            <View className="items-center translate-y-[-8px]">
+              <Typography variant='label_large' weight='700'>{capitalizedDate}</Typography>
+            </View>
+          );
+        }}
+        {...rest}
+      />
+    </View>
+  );
+}

package/src/components/DatePicker/types.ts

@@ -0,0 +1,20 @@
+import { CalendarProps } from "react-native-calendars";
+import { MarkingTypes } from "react-native-calendars/src/types";
+
+export interface DatePickerProps extends Omit<CalendarProps, "onDayPress"> {
+  onDateSelect?: (
+    date: string,
+    additionalData?: string[] | { start: string; end: string }
+  ) => void;
+  initialDate?: string;
+  minDate?: string;
+  maxDate?: string;
+  markedDates?: CalendarProps["markedDates"];
+  theme?: CalendarProps["theme"];
+  selectionType?: MarkingTypes;
+  unavailableDates?: string[];
+  selectedDates: string[];
+  onSelectedDatesChange: (
+    dateOrUpdater: string | ((prev: string[]) => string[])
+  ) => void;
+}

package/src/components/IconButton/index.tsx

@@ -106,6 +106,7 @@ export function IconButton(props: IconButtonProps) {
       }}
       disabled={disabled}
       accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
       accessibilityState={{
         disabled: disabled,
         selected: selected,

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

@@ -0,0 +1,35 @@
+import { cva } from "class-variance-authority";
+
+export const messageInputContainerVariants = cva(
+  "flex-row items-center border border-chia-400 bg-chia-100 rounded-700 min-h-[48px]",
+  {
+    variants: {
+      disabled: {
+        true: "opacity-40",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  }
+);
+
+export const messageInputContentVariants = cva(
+  "flex-1 flex-col text-chia-900 px-600"
+);
+
+export const messageInputFieldVariants = cva(
+  "font-nunito-bold text-[16px] leading-[20px] placeholder:text-chia-600 ios:pt-[3px] android:p-0",
+  {
+    variants: {
+      disabled: {
+        true: "",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      disabled: false,
+    },
+  }
+);

package/src/components/MessageInput/index.tsx

@@ -0,0 +1,121 @@
+import { useRef } from "react";
+import { View, TextInput as RNTextInput, Pressable } from "react-native";
+import { merge } from "@kivid/tailwind-preset";
+import type { MessageInputProps } from "./types";
+import {
+  messageInputContainerVariants,
+  messageInputContentVariants,
+  messageInputFieldVariants,
+} from "./assets/class-variants";
+import { EssentialSendStroke } from "@kivid/icons/native";
+import { IconButton } from "../IconButton";
+
+export function MessageInput({
+  value = "",
+  onChangeText,
+  disabled = false,
+  className = "",
+  inputClassName = "",
+  placeholder = "Type a message...",
+  accessibilityLabel,
+  containerTestID,
+  ref,
+  onSend,
+  sendButtonDisabled = false,
+  sendButtonAccessibilityLabel = "Send message",
+  multiline = false,
+  ...rest
+}: MessageInputProps) {
+  const inputRef = useRef<RNTextInput>(null);
+
+  const handleChangeText = (text: string) => {
+    onChangeText?.(text);
+  };
+
+  const handleSend = () => {
+    if (!disabled && !sendButtonDisabled && onSend) {
+      onSend(value);
+    }
+  };
+
+  const getAccessibilityLabel = () => {
+    if (accessibilityLabel) return accessibilityLabel;
+
+    let labelText = "Message input";
+
+    if (disabled) labelText += ", disabled";
+
+    return labelText;
+  };
+
+  const isSendButtonDisabled = disabled || sendButtonDisabled;
+
+  return (
+    <Pressable
+      testID={containerTestID}
+      className={merge(
+        messageInputContainerVariants({
+          disabled,
+        }),
+        className
+      )}
+      onPress={() => {
+        if (!disabled) {
+          inputRef.current?.focus();
+        }
+      }}
+      disabled={disabled}
+      accessibilityRole="none"
+      accessibilityState={{
+        disabled,
+      }}
+    >
+      <View className={merge(messageInputContentVariants())}>
+        <RNTextInput
+          value={value}
+          onChangeText={handleChangeText}
+          editable={!disabled}
+          placeholder={placeholder}
+          multiline={multiline}
+          className={merge(
+            messageInputFieldVariants({
+              disabled,
+            }),
+            inputClassName
+          )}
+          accessibilityLabel={getAccessibilityLabel()}
+          accessibilityState={{
+            disabled,
+          }}
+          {...rest}
+          ref={(instance) => {
+            inputRef.current = instance;
+
+            if (ref) {
+              ref.current = instance;
+            }
+          }}
+        />
+      </View>
+
+      <IconButton
+        onPress={handleSend}
+        disabled={isSendButtonDisabled}
+        className="mr-400"
+        accessibilityRole="button"
+        accessibilityLabel={sendButtonAccessibilityLabel}
+        accessibilityState={{
+          disabled: isSendButtonDisabled,
+        }}
+        testID="send-button"
+        icon={
+          <EssentialSendStroke width={24} height={24} className="text-white" />
+        }
+      />
+    </Pressable>
+  );
+}
+
+MessageInput.displayName = "MessageInput";
+
+export default MessageInput;

package/src/components/MessageInput/types.ts

@@ -0,0 +1,18 @@
+import {
+  TextInputProps as RNTextInputProps,
+  TextInput as RNTextInput,
+} from "react-native";
+
+export interface MessageInputProps
+  extends Omit<RNTextInputProps, "value" | "onChangeText"> {
+  value?: string;
+  disabled?: boolean;
+  className?: string;
+  inputClassName?: string;
+  containerTestID?: string;
+  onChangeText?: (text: string) => void;
+  onSend?: (text: string) => void;
+  ref?: React.RefObject<RNTextInput | null>;
+  sendButtonDisabled?: boolean;
+  sendButtonAccessibilityLabel?: string;
+}

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

@@ -1,22 +1,30 @@
 import { cva } from "class-variance-authority";
 
 export const textInputContainerVariants = cva(
-  "flex-row items-center border border-chia-400 bg-chia-100 h-[64px]",
+  "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: "",
@@ -24,27 +32,32 @@ export const textInputContainerVariants = cva(
     },
     defaultVariants: {
       corners: "medium",
+      size: "large",
       showLabel: false,
+      showLeftIcon: false,
       error: false,
       disabled: false,
     },
   }
 );
 
-export const textInputContentVariants = cva("flex-1 flex-col text-chia-900", {
-  variants: {
-    showLabel: {
-      true: "gap-0",
-      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,
     },
-  },
-  defaultVariants: {
-    showLabel: false,
-  },
-});
+  }
+);
 
 export const textInputFieldVariants = cva(
-  "font-nunito-bold text-[16px] leading-[18px] text-chia-900 placeholder:text-chia-600 ios:pt-[3px] android:p-0",
+  "flex-1 font-nunito-bold text-[16px] leading-[20px] placeholder:text-chia-600 android:p-0 min-w-0",
   {
     variants: {
       disabled: {
@@ -63,12 +76,18 @@ export const textInputFieldVariants = cva(
         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

@@ -2,3 +2,9 @@ export enum TextInputCornersEnum {
   SMALL = "small",
   MEDIUM = "medium",
 }
+
+export enum TextInputSizeEnum {
+  SMALL = "small",
+  MEDIUM = "medium",
+  LARGE = "large",
+}

package/src/components/TextInput/index.tsx

@@ -4,7 +4,7 @@ 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 { TextInputCornersEnum, TextInputSizeEnum } from "./enums";
 import {
   textInputContainerVariants,
   textInputContentVariants,
@@ -17,6 +17,7 @@ import { TooltipVariantEnum } from "../Tooltip/enum";
 
 export function TextInput({
   corners = TextInputCornersEnum.MEDIUM,
+  size = TextInputSizeEnum.LARGE,
   label,
   value,
   onChangeText,
@@ -33,12 +34,14 @@ export function TextInput({
   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;
 
@@ -93,9 +96,11 @@ export function TextInput({
         className={merge(
           textInputContainerVariants({
             corners,
+            size,
             error: !!error,
             disabled,
             showLabel: hasLabel,
+            showLeftIcon: hasLeftIcon,
           }),
           className
         )}
@@ -106,6 +111,7 @@ export function TextInput({
         }}
         disabled={disabled}
       >
+        {leftIcon && <View className="mr-400">{leftIcon}</View>}
         <View
           className={merge(textInputContentVariants({ showLabel: hasLabel }))}
         >
@@ -124,12 +130,14 @@ export function TextInput({
             onChangeText={handleChangeText}
             editable={!disabled}
             placeholder={placeholder}
+            textAlignVertical="center"
             className={merge(
               textInputFieldVariants({
                 disabled,
                 isValid,
                 error: hasError,
                 showLabel: hasLabel,
+                size,
               }),
               inputClassName
             )}

package/src/components/TextInput/types.ts

@@ -2,13 +2,15 @@ import {
   TextInputProps as RNTextInputProps,
   TextInput as RNTextInput,
 } from "react-native";
-import { TextInputCornersEnum } from "./enums";
+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;
@@ -21,6 +23,7 @@ export interface TextInputProps
   tooltipClassName?: string;
   tooltipPointerClassName?: string;
   tooltipContainerClassName?: string;
+  leftIcon?: React.ReactNode;
   rightIcon?: React.ReactNode;
   onChangeText?: (text: string) => void;
   ref?: React.RefObject<RNTextInput | null>;

package/src/components/index.ts

@@ -22,6 +22,9 @@ export * from "./OtpInput";
 export * from "./OtpInput/enums";
 export type * from "./OtpInput/types";
 
+export * from "./MessageInput";
+export type * from "./MessageInput/types";
+
 export * from "./HighlightedText";
 export type * from "./HighlightedText/types";
 
@@ -78,3 +81,8 @@ export type * from "./PageIndicators/types";
 export * from "./ActionButton";
 export type * from "./ActionButton/types";
 
+export * from "./MessageInput";
+export type * from "./MessageInput/types";
+
+export * from "./DatePicker";
+export type * from "./DatePicker/types";