@herca/rn-kit 0.1.113 → 0.1.114

package/src/Input/InputDate.tsx

@@ -1,17 +1,18 @@
-import {
-  Color,
-  DatePicker,
-  Icon,
-  Typography,
-  type CalendarModeType,
-  type DateRangeProps,
-} from '@herca/rn-kit';
+import Color from '../Color/Color';
+import DatePicker from '../DatePicker/DatePicker';
+import Icon from '../Icon/Icon';
+import Typography from '../Typography/Typography';
+import type {
+  CalendarModeType,
+  DateRangeProps,
+} from '../Calendar/CalendarPropsType';
 import { useState, useEffect } from 'react';
 import { Pressable, StyleSheet, TouchableOpacity, View } from 'react-native';
 import type { FormattedDateRangeProps } from '../Calendar/CalendarPropsType';
 import { dateFormatter } from '../function/dateFormatter';
 import { layouting } from '../styles/layouting';
 import { spacing } from '../styles/spacing';
+import { getTestID } from '../helpers/getTestID';
 
 type DatePickerProps = React.ComponentProps<typeof DatePicker>;
 type DatePickerPropsWithoutOnChange = Omit<
@@ -31,6 +32,9 @@ interface BaseProps {
   mode?: CalendarModeType;
   language?: 'en' | 'id';
   hasClear?: boolean;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  testID?: string;
 }
 
 type SingleModeProps = BaseProps & {
@@ -58,6 +62,9 @@ export default function InputDate({
   mode = 'single',
   language,
   hasClear,
+  confirmLabel,
+  cancelLabel,
+  testID,
   ...props
 }: Props) {
   const [isDatePickerOpen, setSelectOpen] = useState<boolean>(false);
@@ -156,15 +163,27 @@ export default function InputDate({
     }
   }, [value, valueDateEnd]);
 
+  // Strip any caller-provided testID out of datePickerProps before spreading
+  // it onto <DatePicker>, so it can never clobber the derived `-sheet` id
+  // below (mirrors the selectProps fix in InputSelect.tsx).
+  const datePickerPropsWithoutTestID = { ...datePickerProps };
+  delete (datePickerPropsWithoutTestID as { testID?: string }).testID;
+
   return (
     <View style={styles.gap4}>
-      <Typography variant="t2" weight="semibold" color={Color.gray[900]}>
+      <Typography
+        testID={getTestID(testID, 'label')}
+        variant="t2"
+        weight="semibold"
+        color={Color.gray[900]}
+      >
         {label}
       </Typography>
 
       <View style={styles.wrapper}>
         {/* sart date */}
         <Pressable
+          testID={getTestID(testID, 'trigger')}
           style={[
             styles.pickerTrigger,
             (value || dateValue) && styles.hasValue,
@@ -178,11 +197,8 @@ export default function InputDate({
           <View style={[layouting.flex.rowCenter, spacing.gap[8]]}>
             {hasClear && (value || dateValue) && (
               <TouchableOpacity
-                style={{
-                  backgroundColor: Color.gray[600],
-                  borderRadius: 999,
-                  padding: 3,
-                }}
+                testID={getTestID(testID, 'clear')}
+                style={styles.clearBtn}
                 onPress={() => {
                   onDateChange?.({
                     date: null,
@@ -207,6 +223,7 @@ export default function InputDate({
         {/* end date */}
         {mode === 'range' && (
           <Pressable
+            testID={getTestID(testID, 'trigger-end')}
             style={[
               styles.pickerTrigger,
               (value || dateValue) && styles.hasValue,
@@ -223,7 +240,8 @@ export default function InputDate({
       </View>
 
       <DatePicker
-        {...datePickerProps}
+        testID={testID}
+        {...datePickerPropsWithoutTestID}
         mode={mode}
         isOpen={isDatePickerOpen}
         onClose={handleCloseDatePicker}
@@ -232,6 +250,8 @@ export default function InputDate({
         onChange={(val: DateRangeProps) => {
           handleDateChange(val);
         }}
+        {...(confirmLabel ? { confirmLabel } : {})}
+        {...(cancelLabel ? { cancelLabel } : {})}
       />
     </View>
   );
@@ -260,4 +280,9 @@ const styles = StyleSheet.create({
     gap: 8,
     alignItems: 'center',
   },
+  clearBtn: {
+    backgroundColor: Color.gray[600],
+    borderRadius: 999,
+    padding: 3,
+  },
 });

package/src/Input/InputFile.tsx

@@ -21,8 +21,10 @@ import type {
   UploadedFile,
 } from './type';
 import { uploadFile } from './helpers/uploadFile';
+import { getTestID } from '../helpers/getTestID';
 
 export default function InputFile({
+  testID,
   title = 'Upload File',
   description = 'File harus berformat JPG, PNG dan PDF',
   accept = [
@@ -367,6 +369,7 @@ export default function InputFile({
     <View style={spacing.gap[12]}>
       {variant === 'default' && (
         <CardTrigger
+          testID={getTestID(testID, 'trigger')}
           title={title}
           hint={hint || (internalErrorMessage as string)}
           hasError={hasError || !!internalErrorMessage}
@@ -379,6 +382,7 @@ export default function InputFile({
       {variant === 'small' && (
         <View style={spacing.gap[4]}>
           <CardTriggerSmall
+            testID={getTestID(testID, 'trigger')}
             files={files}
             title={title}
             hasError={hasError}
@@ -389,9 +393,11 @@ export default function InputFile({
             onDelete={confirmDeleteFile}
           />
           {internalErrorMessage && (
-            <Typography variant="t3" color={Color.danger[500]}>
-              {internalErrorMessage}
-            </Typography>
+            <View testID={getTestID(testID, 'error')}>
+              <Typography variant="t3" color={Color.danger[500]}>
+                {internalErrorMessage}
+              </Typography>
+            </View>
           )}
 
           {files.length > 0 && (
@@ -399,13 +405,14 @@ export default function InputFile({
               {files
                 .filter((file) => !!file.error)
                 .map((file, index) => (
-                  <Typography
+                  <View
                     key={index}
-                    variant="t3"
-                    color={Color.danger[500]}
+                    testID={getTestID(testID, `error-${index}`)}
                   >
-                    {file.hint}
-                  </Typography>
+                    <Typography variant="t3" color={Color.danger[500]}>
+                      {file.hint}
+                    </Typography>
+                  </View>
                 ))}
             </>
           )}
@@ -417,6 +424,7 @@ export default function InputFile({
           <View style={spacing.gap[12]} key={index}>
             {useChangeLabel && (
               <Input
+                testID={getTestID(testID, `file-${index}`)}
                 label={`${changeLableProps?.label || 'Nama Dokumen'} ${index + 1}`}
                 value={file.labelFile}
                 placeholder={
@@ -434,6 +442,7 @@ export default function InputFile({
 
             <View style={spacing.gap[4]}>
               <ItemPreview
+                testID={getTestID(testID, `item-${index}`)}
                 index={index}
                 file={file}
                 loading={file.uploading}
@@ -443,18 +452,21 @@ export default function InputFile({
               />
 
               {file.hint && (
-                <Typography
-                  variant="t3"
-                  color={!file.error ? Color.gray[700] : Color.danger[500]}
-                >
-                  {file.hint}
-                </Typography>
+                <View testID={getTestID(testID, `error-${index}`)}>
+                  <Typography
+                    variant="t3"
+                    color={!file.error ? Color.gray[700] : Color.danger[500]}
+                  >
+                    {file.hint}
+                  </Typography>
+                </View>
               )}
             </View>
           </View>
         ))}
 
       <ModalPicker
+        testID={getTestID(testID, 'sheet')}
         isOpen={isOpenBottomSheetTypeFile}
         onClose={() => setIsOpenBottomSheetTypeFile(false)}
         title={modalPickFileText?.title || 'Upload Dokumen'}
@@ -488,6 +500,7 @@ export default function InputFile({
       />
 
       <ModalDelete
+        testID={getTestID(testID, 'modal-delete')}
         isOpen={isOpenBottomSheetDeleteFile}
         onClose={() => setIsOpenBottomSheetDeleteFile(false)}
         title={modalDeleteText?.title || 'Hapus Dokumen'}

package/src/Input/InputMonth.tsx

@@ -1 +1,152 @@
-export default function InputMonth() {}
+import { useState } from 'react';
+import { View } from 'react-native';
+import MonthPicker from '../DatePicker/MonthPicker';
+import { dateFormatter } from '../function/dateFormatter';
+import PickerField from './partials/PickerField';
+import type { PickerFieldValue } from './type';
+
+interface BaseProps {
+  label?: string;
+  placeholder: string;
+  /** Month number, 1 (January) to 12 (December). */
+  value?: number;
+  onSelectClick?: () => void;
+  onPickerClose?: () => void;
+  onChange?: (value: PickerFieldValue) => void;
+  language?: 'en' | 'id';
+  hasClear?: boolean;
+  title?: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+  testID?: string;
+}
+
+type SingleModeProps = BaseProps & {
+  mode?: 'single';
+  placeholderEnd?: never;
+  valueEnd?: never;
+};
+
+type RangeModeProps = BaseProps & {
+  mode: 'range';
+  placeholderEnd: string;
+  valueEnd?: number;
+};
+
+export type InputMonthProps = SingleModeProps | RangeModeProps;
+
+const EMPTY: PickerFieldValue = {
+  value: null,
+  startValue: null,
+  endValue: null,
+};
+
+/**
+ * Renders the month name for a 1-based month number in the requested language.
+ *
+ * Anything outside 1-12 renders nothing, so the field falls back to its
+ * placeholder. Handing the number straight to Date would quietly roll over --
+ * 0 would read as December of the previous year rather than January.
+ *
+ * The year given to the formatter is arbitrary; only the month is read back.
+ */
+const monthLabel = (
+  month: number | null | undefined,
+  language?: 'en' | 'id'
+) =>
+  month === null || month === undefined || month < 1 || month > 12
+    ? null
+    : dateFormatter({
+        date: new Date(2000, month - 1, 1),
+        options: { pattern: 'MMMM', language },
+      });
+
+export default function InputMonth({
+  label,
+  placeholder,
+  placeholderEnd,
+  value,
+  valueEnd,
+  mode = 'single',
+  onSelectClick,
+  onPickerClose,
+  onChange,
+  language,
+  hasClear,
+  title,
+  cancelLabel,
+  confirmLabel,
+  testID,
+}: InputMonthProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<PickerFieldValue>(EMPTY);
+
+  // A given prop wins, so the field can be driven from outside; otherwise it
+  // shows whatever was last picked.
+  const start = value ?? (mode === 'range' ? selected.startValue : selected.value); // prettier-ignore
+  const end = valueEnd ?? selected.endValue;
+
+  const handleOpen = () => {
+    setIsOpen(true);
+    onSelectClick?.();
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    onPickerClose?.();
+  };
+
+  const handleChange = (
+    picked: number[] | { startDate: number | null; endDate: number | null }
+  ) => {
+    // MonthPicker reports an array in single mode and a pair in range mode,
+    // both 0-based. Shift to 1-based on the way out, so January is 1 for the
+    // consumer -- the picker's indices never leak past this line.
+    const oneBased = (month: number | null | undefined) =>
+      month === null || month === undefined ? null : month + 1;
+
+    const next: PickerFieldValue = Array.isArray(picked)
+      ? { value: oneBased(picked[0]), startValue: null, endValue: null }
+      : {
+          value: null,
+          startValue: oneBased(picked.startDate),
+          endValue: oneBased(picked.endDate),
+        };
+
+    setSelected(next);
+    onChange?.(next);
+  };
+
+  const handleClear = () => {
+    setSelected(EMPTY);
+    onChange?.(EMPTY);
+  };
+
+  return (
+    <View>
+      <PickerField
+        label={label}
+        placeholder={placeholder}
+        placeholderEnd={placeholderEnd}
+        mode={mode}
+        display={monthLabel(start, language)}
+        displayEnd={monthLabel(end, language)}
+        hasClear={hasClear}
+        onPress={handleOpen}
+        onClear={handleClear}
+        testID={testID}
+      />
+
+      <MonthPicker
+        testID={testID}
+        isOpen={isOpen}
+        mode={mode}
+        onClose={handleClose}
+        onChange={handleChange}
+        {...(title ? { title } : {})}
+        {...(cancelLabel ? { cancelLabel } : {})}
+        {...(confirmLabel ? { confirmLabel } : {})}
+      />
+    </View>
+  );
+}

package/src/Input/InputOtp.tsx

@@ -3,6 +3,7 @@ import { StyleSheet, TextInput, View } from 'react-native';
 import Color from '../Color/Color';
 import LabelForm from '../LabelForm/LabelForm';
 import Typography from '../Typography/Typography';
+import { getTestID } from '../helpers/getTestID';
 
 type InputOtpProps = {
   length?: number;
@@ -11,6 +12,7 @@ type InputOtpProps = {
   hint?: string;
   hasError?: boolean;
   inputCenter?: boolean;
+  testID?: string;
 };
 
 const InputOtp: React.FC<InputOtpProps> = ({
@@ -20,6 +22,7 @@ const InputOtp: React.FC<InputOtpProps> = ({
   hint,
   hasError,
   inputCenter = false,
+  testID,
 }) => {
   const inputs = useRef<Array<TextInput | null>>([]);
   const values = useRef<string[]>(Array(length).fill(''));
@@ -50,7 +53,9 @@ const InputOtp: React.FC<InputOtpProps> = ({
 
   return (
     <View style={styles.gap4}>
-      {label ? <LabelForm title={label} /> : null}
+      {label ? (
+        <LabelForm testID={getTestID(testID, 'label')} title={label} />
+      ) : null}
       <View
         style={[
           styles.container,
@@ -68,6 +73,7 @@ const InputOtp: React.FC<InputOtpProps> = ({
           .map((_, i) => (
             <TextInput
               key={i}
+              testID={getTestID(testID, `item-${i}`)}
               style={[
                 styles.input,
                 // eslint-disable-next-line react-native/no-inline-styles
@@ -89,7 +95,11 @@ const InputOtp: React.FC<InputOtpProps> = ({
       </View>
 
       {hint ? (
-        <Typography color={hasError ? Color.danger[500] : ''} variant="t3">
+        <Typography
+          testID={getTestID(testID, 'error')}
+          color={hasError ? Color.danger[500] : ''}
+          variant="t3"
+        >
           {hint}
         </Typography>
       ) : null}

package/src/Input/InputPassword.tsx

@@ -11,17 +11,22 @@ interface InputPasswordProps extends TextInputProps {
   label?: string;
   hint?: string;
   hasError?: boolean;
+  testID?: string;
   onPressIconLeft?: () => void;
   onPressIconRight?: () => void;
 }
 
-export default function InputPassword(props: InputPasswordProps) {
+export default function InputPassword({
+  testID,
+  ...props
+}: InputPasswordProps) {
   const [secureText, setSecureText] = useState(true);
 
   return (
     <View>
       <Input
         {...props}
+        testID={testID}
         iconRight={secureText ? 'Eye' : 'EyeOpen'}
         secureTextEntry={secureText}
         onPressIconRight={() => setSecureText(!secureText)}

package/src/Input/InputSelect.tsx

@@ -1,19 +1,18 @@
-import {
-  Badge,
-  Color,
-  Icon,
-  LabelForm,
-  Select,
-  Typography,
-  type ChipOptionProps,
-  type IconNameProps,
-} from '@herca/rn-kit';
+import Badge from '../Badge/Badge';
+import Color from '../Color/Color';
+import Icon from '../Icon/Icon';
+import LabelForm from '../LabelForm/LabelForm';
+import Select from '../Select/Select';
+import Typography from '../Typography/Typography';
+import type { ChipOptionProps } from '../Chip/type';
+import type { IconNameProps } from '../Icon/type';
 import { useState, useEffect } from 'react';
 import { Pressable, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { spacing } from '../styles/spacing';
 import { border } from '../styles/border';
 import { layouting } from '../styles/layouting';
 import type { Variant } from '../Badge/type';
+import { getTestID } from '../helpers/getTestID';
 
 type SelectProps = React.ComponentProps<typeof Select>;
 type SelectPropsWithoutData = Omit<SelectProps, 'data'>;
@@ -59,6 +58,7 @@ export default function InputSelect({
   useModal = true,
   required,
   labelColor,
+  testID,
   ...props
 }: Props) {
   const [isSelectOpen, setSelectOpen] = useState<boolean>(false);
@@ -83,12 +83,23 @@ export default function InputSelect({
     setInternalValue(value);
   }, [value]);
 
+  // Strip any caller-provided testID out of selectProps before spreading it
+  // onto <Select>, so it can never clobber the derived `-sheet` id below.
+  const selectPropsWithoutTestID = { ...selectProps };
+  delete selectPropsWithoutTestID.testID;
+
   return (
     <View style={spacing.gap[4]}>
-      <LabelForm title={label} required={required} color={labelColor} />
+      <LabelForm
+        testID={getTestID(testID, 'label')}
+        title={label}
+        required={required}
+        color={labelColor}
+      />
 
       <View style={[spacing.gap[4], layouting.flex.grow]}>
         <Pressable
+          testID={getTestID(testID, 'trigger')}
           style={[
             styles.select,
             hasError && border.color.danger[300],
@@ -138,7 +149,11 @@ export default function InputSelect({
           {/* right icon and action */}
           <View style={[layouting.flex.rowCenter, spacing.gap[8]]}>
             {onClear && internalValue && (
-              <TouchableOpacity activeOpacity={0.7} onPress={handleClear}>
+              <TouchableOpacity
+                testID={getTestID(testID, 'clear')}
+                activeOpacity={0.7}
+                onPress={handleClear}
+              >
                 <Icon name="x-circle" size={20} color="#aaa" />
               </TouchableOpacity>
             )}
@@ -152,6 +167,7 @@ export default function InputSelect({
 
         {hint && (
           <Typography
+            testID={getTestID(testID, 'error')}
             variant="t3"
             color={hasError ? Color.danger[500] : Color.gray[700]}
             weight="medium"
@@ -164,8 +180,9 @@ export default function InputSelect({
 
       {useModal && (
         <Select
+          testID={testID}
           isOpen={isSelectOpen}
-          {...selectProps}
+          {...selectPropsWithoutTestID}
           data={options ?? []}
           onClose={handleCloseSelect}
         />

package/src/Input/InputYear.tsx

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+import { View } from 'react-native';
+import YearPicker from '../DatePicker/YearPicker';
+import PickerField from './partials/PickerField';
+import type { PickerFieldValue } from './type';
+
+interface BaseProps {
+  label?: string;
+  placeholder: string;
+  /** A full year, e.g. 2024. */
+  value?: number;
+  onSelectClick?: () => void;
+  onPickerClose?: () => void;
+  onChange?: (value: PickerFieldValue) => void;
+  hasClear?: boolean;
+  /** Static text inside the sheet, so it can follow the host app's language. */
+  title?: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+  testID?: string;
+}
+
+type SingleModeProps = BaseProps & {
+  mode?: 'single';
+  placeholderEnd?: never;
+  valueEnd?: never;
+};
+
+type RangeModeProps = BaseProps & {
+  mode: 'range';
+  placeholderEnd: string;
+  valueEnd?: number;
+};
+
+export type InputYearProps = SingleModeProps | RangeModeProps;
+
+const EMPTY: PickerFieldValue = {
+  value: null,
+  startValue: null,
+  endValue: null,
+};
+
+const yearLabel = (year: number | null | undefined) =>
+  year === null || year === undefined ? null : String(year);
+
+/**
+ * Year counterpart to InputMonth. There is no `language` prop: a year is
+ * digits, and nothing about it changes between locales.
+ */
+export default function InputYear({
+  label,
+  placeholder,
+  placeholderEnd,
+  value,
+  valueEnd,
+  mode = 'single',
+  onSelectClick,
+  onPickerClose,
+  onChange,
+  hasClear,
+  title,
+  cancelLabel,
+  confirmLabel,
+  testID,
+}: InputYearProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<PickerFieldValue>(EMPTY);
+
+  const start = value ?? (mode === 'range' ? selected.startValue : selected.value); // prettier-ignore
+  const end = valueEnd ?? selected.endValue;
+
+  const handleOpen = () => {
+    setIsOpen(true);
+    onSelectClick?.();
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+    onPickerClose?.();
+  };
+
+  const handleChange = (
+    picked: number[] | { startDate: number | null; endDate: number | null }
+  ) => {
+    const next: PickerFieldValue = Array.isArray(picked)
+      ? { value: picked[0] ?? null, startValue: null, endValue: null }
+      : { value: null, startValue: picked.startDate, endValue: picked.endDate };
+
+    setSelected(next);
+    onChange?.(next);
+  };
+
+  const handleClear = () => {
+    setSelected(EMPTY);
+    onChange?.(EMPTY);
+  };
+
+  return (
+    <View>
+      <PickerField
+        label={label}
+        placeholder={placeholder}
+        placeholderEnd={placeholderEnd}
+        mode={mode}
+        display={yearLabel(start)}
+        displayEnd={yearLabel(end)}
+        hasClear={hasClear}
+        onPress={handleOpen}
+        onClear={handleClear}
+        testID={testID}
+      />
+
+      <YearPicker
+        testID={testID}
+        isOpen={isOpen}
+        mode={mode}
+        onClose={handleClose}
+        onChange={handleChange}
+        {...(title ? { title } : {})}
+        {...(cancelLabel ? { cancelLabel } : {})}
+        {...(confirmLabel ? { confirmLabel } : {})}
+      />
+    </View>
+  );
+}

package/src/Input/README_INPUT.md

@@ -22,6 +22,7 @@ Komponen `Input` ini adalah komponen input teks yang dapat dikustomisasi dengan
 | `style`            | `ViewStyle`               | Style tambahan untuk input                                             |
 | `prefix`           | `React.ReactNode`         | Slot `react node` yang bisa diisi oleh seluruh komponen react          |
 | `required`         | `boolean`                 | Jika `true` maka akan menampilkan bintang berwarna merah setelah label |
+| `testID`           | `string`                  | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-input`, `-label`, `-error`, `-clear`, dan `-toggle` untuk elemen terkait. |
 | `...rest`          | `TextInputProps`          | Props lain dari React Native `TextInput`                               |
 
 ---