@herca/rn-kit 0.1.113 → 0.1.115

package/src/Input/InputYear.tsx

@@ -0,0 +1,134 @@
+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;
+
+  // What the sheet should open on. Without this the picker only knows about
+  // taps it saw itself, so a value coming from a prop -- or a clear -- would
+  // show in the field but leave the sheet blank.
+  const pickerValue =
+    mode === 'range'
+      ? { startDate: start ?? null, endDate: end ?? null }
+      : ([start].filter((y) => y !== null && y !== undefined) as number[]);
+
+  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}
+        value={pickerValue}
+        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`                               |
 
 ---

package/src/Input/README_INPUT_DATE.md

@@ -66,6 +66,7 @@ function MyForm() {
 | `mode`              | `'single' \| 'range'`             | `'single'`         | Mode pemilihan tanggal                             |
 | `language`          | `'en' \| 'id'`                    | `undefined`        | Bahasa untuk format tanggal                        |
 | `hasClear`          | `boolean`                         | `false`            | Nilai boolean untuk menampilkan opsi hapus tanggal |
+| `testID`            | `string`                          | `undefined`        | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-trigger`, `-trigger-end` (mode range), `-label`, `-clear`. `testID` mentah diteruskan ke `DatePicker`, yang menurunkan suffix-nya sendiri: `-sheet`, `-cancel`, `-confirm`, `-error`. |
 
 ### Single Mode Specific Props
 
@@ -264,3 +265,20 @@ Ini memastikan `placeholderDateEnd` hanya required ketika `mode="range"`.
 ## License
 
 MIT
+
+## Teks statis pada picker
+
+`confirmLabel` dan `cancelLabel` mengganti teks tombol di sheet, tanpa perlu
+menyusurinya lewat `datePickerProps`:
+
+```jsx
+<InputDate
+  label="Date"
+  placeholder="Pick a date"
+  confirmLabel="Apply"
+  cancelLabel="Cancel"
+/>
+```
+
+Default-nya `'Terapkan'` dan `'Batalkan'`. Kalau kunci yang sama juga diisi di
+`datePickerProps`, prop eksplisit di atas yang menang.

package/src/Input/README_INPUT_FILE.md

@@ -145,6 +145,7 @@ export default function ExampleScreen() {
 | `modalDeleteText`   | `ModalOption & confirmBtn`        | `undefined`                                      | Teks kustom pada modal konfirmasi hapus file.                                                                                      |
 | `hasError`          | `boolean`                         | `false`                                          | Menampilkan state error pada input.                                                                                                |
 | `onUploading`       | `(isUploading?: boolean) => void` | `undefiend`                                      | Expose value uploading ke parent                                                                                                   |
+| `testID`            | `string`                          | `undefined`                                      | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-trigger`, `-file-{index}` (field nama dokumen per file, field-nya sendiri `-file-{index}-input`), `-item-{index}` (preview per file), `-error` (error umum, mis. ukuran melebihi batas), `-error-{index}` (error per file), `-sheet`, dan `-modal-delete`. |
 
 ### Default Variant Props (`variant?: 'default'`)
 

package/src/Input/README_INPUT_MONTH.md

@@ -0,0 +1,132 @@
+# InputMonth
+
+Field bulan yang dibuka lewat `MonthPicker`. Bentuk dan alurnya mengikuti
+`InputDate`: satu trigger (dua kalau `mode="range"`), tombol clear opsional,
+dan sheet yang muncul saat trigger ditekan.
+
+Yang dipilih hanya **bulan**, tanpa tahun — sama seperti `MonthPicker` yang
+dibungkusnya. Kalau butuh bulan sekaligus tahun, pasangkan dengan
+[`InputYear`](./README_INPUT_YEAR.md).
+
+## Import
+
+```jsx
+import { InputMonth } from '@herca/rn-kit';
+```
+
+## Contoh Penggunaan
+
+```jsx
+const [month, setMonth] = useState<number>();
+
+<InputMonth
+  label="Bulan lahir"
+  placeholder="Pilih bulan"
+  value={month}
+  hasClear
+  onChange={({ value }) => setMonth(value ?? undefined)}
+/>;
+```
+
+### Mode range
+
+```jsx
+const [range, setRange] = useState({ start: undefined, end: undefined });
+
+<InputMonth
+  mode="range"
+  label="Periode"
+  placeholder="Bulan mulai"
+  placeholderEnd="Bulan selesai"
+  value={range.start}
+  valueEnd={range.end}
+  onChange={({ startValue, endValue }) =>
+    setRange({ start: startValue ?? undefined, end: endValue ?? undefined })
+  }
+/>;
+```
+
+### Bahasa
+
+```jsx
+<InputMonth label="Month" placeholder="Pick one" value={1} language="en" />
+// menampilkan "January"; tanpa language menampilkan "Januari"
+```
+
+## Props
+
+| Props            | Tipe                       | Wajib | Default    | Deskripsi                                                                                         |
+| ---------------- | -------------------------- | ----- | ---------- | ------------------------------------------------------------------------------------------------- |
+| `label`          | `string`                   | ❌     | -          | Teks label di atas trigger. Kalau kosong, elemen labelnya tidak dirender sama sekali.             |
+| `placeholder`    | `string`                   | ✅     | -          | Teks trigger saat belum ada nilai.                                                                |
+| `placeholderEnd` | `string`                   | ✅\*   | -          | Placeholder trigger kedua. Wajib dan hanya berlaku saat `mode="range"`.                           |
+| `value`          | `number`                   | ❌     | -          | Nomor bulan, `1` (Januari) sampai `12` (Desember). Kalau diisi, ia menang atas pilihan internal. Di luar 1–12 dianggap kosong. |
+| `valueEnd`       | `number`                   | ❌     | -          | Nomor bulan akhir, `1`–`12`. Hanya berlaku saat `mode="range"`.                                    |
+| `mode`           | `'single' \| 'range'`      | ❌     | `'single'` | Satu bulan, atau rentang dua bulan.                                                               |
+| `language`       | `'en' \| 'id'`             | ❌     | `'id'`     | Bahasa nama bulan yang ditampilkan.                                                               |
+| `hasClear`       | `boolean`                  | ❌     | `false`    | Menampilkan tombol clear saat ada nilai.                                                          |
+| `onChange`       | `(v: PickerFieldValue) => void` | ❌ | -          | Dipanggil saat pilihan dikonfirmasi atau dibersihkan.                                             |
+| `onSelectClick`  | `() => void`               | ❌     | -          | Dipanggil saat trigger ditekan.                                                                   |
+| `onPickerClose`  | `() => void`               | ❌     | -          | Dipanggil saat sheet ditutup.                                                                     |
+| `title`          | `string`                   | ❌     | `'Pilih Bulan'` | Judul sheet, diteruskan ke `MonthPicker`.                                                    |
+| `cancelLabel`    | `string`                   | ❌     | `'Batal'`  | Label tombol batal di sheet.                                                                      |
+| `confirmLabel`   | `string`                   | ❌     | `'pilih'`  | Label tombol konfirmasi di sheet.                                                                 |
+| `testID`         | `string`                   | ❌     | -          | ID untuk automation testing. Lihat tabel di bawah.                                                |
+
+\* Wajib secara tipe hanya ketika `mode="range"`.
+
+## Bentuk nilai
+
+`onChange` selalu menerima bentuk yang sama, apa pun mode-nya:
+
+```ts
+interface PickerFieldValue {
+  value: number | null; // terisi di mode single
+  startValue: number | null; // terisi di mode range
+  endValue: number | null; // terisi di mode range
+}
+```
+
+Hanya satu sisi yang terisi, ditentukan `mode`. Saat dibersihkan, ketiganya
+`null`.
+
+**Bulan dihitung dari 1**, jadi Januari adalah `1` dan Desember `12` — baik
+untuk prop `value` maupun untuk yang dilaporkan `onChange`. `MonthPicker` di
+baliknya memakai indeks 0–11, tapi indeks itu tidak pernah bocor ke luar.
+
+## testID turunan
+
+| Suffix           | Elemen                                     |
+| ---------------- | ------------------------------------------ |
+| `-label`         | Label di atas trigger                      |
+| `-trigger`       | Trigger utama                              |
+| `-trigger-end`   | Trigger kedua (hanya `mode="range"`)       |
+| `-clear`         | Tombol clear (hanya saat ada nilai)        |
+| `-sheet`         | `BottomSheet` milik `MonthPicker`          |
+| `-option-{i}`    | Opsi bulan di sheet, memakai indeks 0–11 milik `MonthPicker` |
+| `-confirm`       | Tombol konfirmasi di sheet                 |
+| `-cancel`        | Tombol batal di sheet                      |
+
+`testID` diteruskan mentah ke `MonthPicker`, jadi id sheet dan opsinya
+diturunkan dari basis yang sama — polanya sama seperti `InputDate` dengan
+`DatePicker`.
+
+## Teks statis
+
+Semua teks bawaan sheet berbahasa Indonesia dan bisa diganti dari sini, jadi
+tidak perlu menyentuh `MonthPicker` langsung:
+
+```jsx
+<InputMonth
+  label="Month"
+  placeholder="Pick a month"
+  language="en"
+  title="Choose a month"
+  cancelLabel="Cancel"
+  confirmLabel="Apply"
+/>
+```
+
+`language` mengatur nama bulan; `title`, `cancelLabel` dan `confirmLabel`
+mengatur teks statis sheet. Keduanya terpisah — mengubah `language` tidak ikut
+menerjemahkan tombolnya.

package/src/Input/README_INPUT_OTP.md

@@ -32,6 +32,7 @@ Salin file `InputOtp.tsx` ke proyek React Native Anda dan import sesuai kebutuha
 | `hint`        | `string`                | -       | Pesan kecil di bawah input (misal instruksi atau error)                                  |
 | `hasError`    | `boolean`               | false   | Jika `true`, border input berubah warna merah (indikasi error)                           |
 | `inputCenter` | `boolean`               | false   | Jika `true`, maka seluruh input field akan memposisikan diri ke tengah secara horizontal |
+| `testID`      | `string`                | -       | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-item-{index}` untuk tiap kotak digit, `-label`, dan `-error`. |
 
 ---
 

package/src/Input/README_INPUT_SELECT.md

@@ -71,6 +71,7 @@ export default function Example() {
 | `useModal`      | `boolean`                           | `true`             | Gunakan modal untuk menampilkan opsi                 |
 | `required`      | `boolean`                           | `false`            | Untuk menampilkan indikator bintang di label         |
 | `labelColor`    | `stirng`                            | `true`             | Untuk mengubah warna label                           |
+| `testID`        | `string`                            | `undefined`        | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-trigger`, `-label`, `-clear`, `-error`. `testID` mentah diteruskan ke `Select`, yang menurunkan suffix-nya sendiri: `-sheet` (body bottom sheet), `-search-input` (field pencarian), `-submit` (mode multiple), `-option-{value}` (tiap opsi). |
 
 ### Pressable Props
 

package/src/Input/README_INPUT_YEAR.md

@@ -0,0 +1,115 @@
+# InputYear
+
+Field tahun yang dibuka lewat `YearPicker`. Kembarannya
+[`InputMonth`](./README_INPUT_MONTH.md) — bentuk, prop, dan bentuk nilainya
+sama persis.
+
+Tidak ada prop `language`: tahun berupa angka, dan tidak ada yang berubah
+antar-locale.
+
+## Import
+
+```jsx
+import { InputYear } from '@herca/rn-kit';
+```
+
+## Contoh Penggunaan
+
+```jsx
+const [year, setYear] = useState<number>();
+
+<InputYear
+  label="Tahun masuk"
+  placeholder="Pilih tahun"
+  value={year}
+  hasClear
+  onChange={({ value }) => setYear(value ?? undefined)}
+/>;
+```
+
+### Mode range
+
+```jsx
+<InputYear
+  mode="range"
+  label="Periode"
+  placeholder="Tahun mulai"
+  placeholderEnd="Tahun selesai"
+  onChange={({ startValue, endValue }) => console.log(startValue, endValue)}
+/>
+```
+
+### Bersama InputMonth
+
+`MonthPicker` tidak membawa tahun, jadi bulan-dan-tahun disusun dari dua field:
+
+```jsx
+<InputMonth label="Bulan" placeholder="Pilih bulan" onChange={onMonthChange} />
+<InputYear label="Tahun" placeholder="Pilih tahun" onChange={onYearChange} />
+```
+
+## Props
+
+| Props            | Tipe                            | Wajib | Default    | Deskripsi                                                                    |
+| ---------------- | ------------------------------- | ----- | ---------- | ----------------------------------------------------------------------------- |
+| `label`          | `string`                        | ❌     | -          | Teks label di atas trigger. Kalau kosong, elemen labelnya tidak dirender.    |
+| `placeholder`    | `string`                        | ✅     | -          | Teks trigger saat belum ada nilai.                                           |
+| `placeholderEnd` | `string`                        | ✅\*   | -          | Placeholder trigger kedua. Wajib dan hanya berlaku saat `mode="range"`.      |
+| `value`          | `number`                        | ❌     | -          | Tahun penuh, mis. `2024`. Kalau diisi, ia menang atas pilihan internal.      |
+| `valueEnd`       | `number`                        | ❌     | -          | Tahun akhir. Hanya berlaku saat `mode="range"`.                              |
+| `mode`           | `'single' \| 'range'`           | ❌     | `'single'` | Satu tahun, atau rentang dua tahun.                                          |
+| `hasClear`       | `boolean`                       | ❌     | `false`    | Menampilkan tombol clear saat ada nilai.                                     |
+| `onChange`       | `(v: PickerFieldValue) => void` | ❌     | -          | Dipanggil saat pilihan dikonfirmasi atau dibersihkan.                        |
+| `onSelectClick`  | `() => void`                    | ❌     | -          | Dipanggil saat trigger ditekan.                                              |
+| `onPickerClose`  | `() => void`                    | ❌     | -          | Dipanggil saat sheet ditutup.                                                |
+| `title`          | `string`                        | ❌     | `'Pilih Tahun'` | Judul sheet, diteruskan ke `YearPicker`.                                |
+| `cancelLabel`    | `string`                        | ❌     | `'Batal'`  | Label tombol batal di sheet.                                                 |
+| `confirmLabel`   | `string`                        | ❌     | `'Pilih'`  | Label tombol konfirmasi di sheet.                                            |
+| `testID`         | `string`                        | ❌     | -          | ID untuk automation testing. Suffix-nya sama dengan `InputMonth`.            |
+
+\* Wajib secara tipe hanya ketika `mode="range"`.
+
+## Bentuk nilai
+
+Sama dengan `InputMonth`:
+
+```ts
+interface PickerFieldValue {
+  value: number | null; // terisi di mode single
+  startValue: number | null; // terisi di mode range
+  endValue: number | null; // terisi di mode range
+}
+```
+
+## Rentang tahun
+
+`YearPicker` menampilkan 121 tahun: 60 tahun sebelum sampai 60 tahun sesudah
+tahun berjalan. Rentang itu belum bisa diatur lewat prop.
+
+## testID turunan
+
+| Suffix         | Elemen                               |
+| -------------- | ------------------------------------ |
+| `-label`       | Label di atas trigger                |
+| `-trigger`     | Trigger utama                        |
+| `-trigger-end` | Trigger kedua (hanya `mode="range"`) |
+| `-clear`       | Tombol clear (hanya saat ada nilai)  |
+| `-sheet`       | `BottomSheet` milik `YearPicker`     |
+| `-option-{th}` | Opsi tahun, mis. `-option-2024`      |
+| `-confirm`     | Tombol konfirmasi di sheet           |
+| `-cancel`      | Tombol batal di sheet                |
+
+## Teks statis
+
+Semua teks bawaan sheet berbahasa Indonesia dan bisa diganti dari sini, jadi
+tidak perlu menyentuh `YearPicker` langsung:
+
+```jsx
+<InputYear
+  label="Year"
+  placeholder="Pick a year"
+  title="Choose a year"
+  cancelLabel="Cancel"
+  confirmLabel="Apply"
+/>
+```

package/src/Input/Switch.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import LabelForm from '../LabelForm/LabelForm';
 import Typography from '../Typography/Typography';
 import Color from '../Color/Color';
+import { getTestID } from '../helpers/getTestID';
 
 interface SwitchProps {
   label?: string;
@@ -12,6 +13,7 @@ interface SwitchProps {
   hint?: string;
   hasError?: true;
   disabled?: boolean;
+  testID?: string;
 }
 export default function Switch({
   label,
@@ -21,6 +23,7 @@ export default function Switch({
   hint,
   hasError,
   disabled = false,
+  testID,
 }: SwitchProps) {
   const isControlled = value !== undefined;
   const [internalValue, setInternalValue] = useState<boolean>(false);
@@ -62,8 +65,11 @@ export default function Switch({
 
   return (
     <View style={{ gap: 4, opacity: disabled ? 0.5 : 1 }}>
-      {label ? <LabelForm title={label} /> : null}
+      {label ? (
+        <LabelForm title={label} testID={getTestID(testID, 'label')} />
+      ) : null}
       <Pressable
+        testID={testID}
         style={styles.touchArea}
         onPress={handlePress}
         disabled={disabled}

package/src/Input/TextArea.tsx

@@ -2,6 +2,7 @@ import { StyleSheet, TextInput, View } from 'react-native';
 import LabelForm from '../LabelForm/LabelForm';
 import Color from '../Color/Color';
 import Typography from '../Typography/Typography';
+import { getTestID } from '../helpers/getTestID';
 import type { TextAreaProps } from './type';
 
 export default function TextArea({
@@ -12,6 +13,7 @@ export default function TextArea({
   hint,
   onChangeText,
   required,
+  testID,
   ...props
 }: TextAreaProps) {
   const handleOnChangeText = (value: string) => {
@@ -20,7 +22,13 @@ export default function TextArea({
 
   return (
     <View style={styles.gap}>
-      {label ? <LabelForm required={required} title={label} /> : null}
+      {label ? (
+        <LabelForm
+          testID={getTestID(testID, 'label')}
+          required={required}
+          title={label}
+        />
+      ) : null}
 
       <View
         style={[
@@ -32,6 +40,7 @@ export default function TextArea({
         ]}
       >
         <TextInput
+          testID={getTestID(testID, 'input')}
           onChangeText={handleOnChangeText}
           editable
           multiline
@@ -43,7 +52,11 @@ export default function TextArea({
         />
       </View>
       {hint ? (
-        <Typography color={hasError ? Color.danger[500] : ''} variant="t2">
+        <Typography
+          testID={getTestID(testID, 'error')}
+          color={hasError ? Color.danger[500] : ''}
+          variant="t2"
+        >
           {hint}
         </Typography>
       ) : null}

package/src/Input/partials/InputFile/CardTrigger.tsx

@@ -13,6 +13,7 @@ interface Props {
   onPress?: () => void;
   hasError?: boolean;
   hint?: string;
+  testID?: string;
 }
 
 export default function CardTrigger({
@@ -22,6 +23,7 @@ export default function CardTrigger({
   onPress,
   hint,
   hasError,
+  testID,
 }: Props) {
   return (
     <Card
@@ -54,6 +56,7 @@ export default function CardTrigger({
           </Typography>
         </View>
         <Button
+          testID={testID}
           color="primary"
           title={btnSelect}
           size="small"

package/src/Input/partials/InputFile/CardTriggerSmall.tsx

@@ -22,6 +22,7 @@ interface Props {
   onReplace?: (index: number) => void;
   onDelete?: (index: number) => void;
   hasError?: boolean;
+  testID?: string;
 }
 
 export default function CardTriggerSmall({
@@ -33,6 +34,7 @@ export default function CardTriggerSmall({
   onPreview,
   onReplace,
   hasError,
+  testID,
 }: Props) {
   const Component = files?.length === 0 ? View : TouchableOpacity;
   return (
@@ -48,7 +50,7 @@ export default function CardTriggerSmall({
             files.length > 0 ? layouting.flex.col : {},
             files.length > 0 ? spacing.gap[6] : {},
           ]}
-          {...(files?.length > 0 && { onPress: onChooseFile })}
+          {...(files?.length > 0 && { onPress: onChooseFile, testID })}
         >
           <Image
             source={require('../../assets/input-file.png')}
@@ -65,6 +67,7 @@ export default function CardTriggerSmall({
 
         {files.length === 0 && (
           <Button
+            testID={testID}
             title={textButton}
             color="primary"
             size="small"

package/src/Input/partials/InputFile/ItemPreview.tsx

@@ -9,6 +9,7 @@ import Card from '../../../Ui/Card';
 import Color from '../../../Color/Color';
 import Typography from '../../../Typography/Typography';
 import Icon from '../../../Icon';
+import { getTestID } from '../../../helpers/getTestID';
 import type { FileItem } from '../../type';
 
 interface Props {
@@ -19,6 +20,7 @@ interface Props {
   onDelete: (index: number) => void;
   variant?: 'default' | 'small';
   loading?: boolean;
+  testID?: string;
 }
 
 export default function ItemPreview({
@@ -29,12 +31,14 @@ export default function ItemPreview({
   onReplace,
   variant = 'default',
   loading = false,
+  testID,
 }: Props) {
   const Wrapper = variant === 'default' ? Card : View;
 
   return (
     <Wrapper>
       <TouchableOpacity
+        testID={testID}
         onPress={onPress}
         style={styles.containerPreview}
         activeOpacity={0.7}
@@ -125,11 +129,17 @@ export default function ItemPreview({
               />
             )}
 
-            <TouchableOpacity onPress={() => onReplace(index)}>
+            <TouchableOpacity
+              testID={getTestID(testID, 'replace')}
+              onPress={() => onReplace(index)}
+            >
               <Icon name="rotate-right" size={18} color={Color.gray[700]} />
             </TouchableOpacity>
 
-            <TouchableOpacity onPress={() => onDelete(index)}>
+            <TouchableOpacity
+              testID={getTestID(testID, 'delete')}
+              onPress={() => onDelete(index)}
+            >
               <Icon name="Times" size={12} color={Color.gray[700]} />
             </TouchableOpacity>
           </View>