@herca/rn-kit 0.1.112 → 0.1.114

package/src/Chip/Chip.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { Dimensions, FlatList, StyleSheet } from 'react-native';
 import {
   type ChipOptionProps,
@@ -7,6 +7,7 @@ import {
   type ChipValue,
 } from './type';
 import ChipItem from './ChipItem';
+import { getTestID } from '../helpers/getTestID';
 
 const Chip: React.FC<ChipProps> = ({
   options,
@@ -25,6 +26,7 @@ const Chip: React.FC<ChipProps> = ({
   onEndReached,
   footer,
   header,
+  testID,
 }) => {
   const isHorizontal = direction === 'horizontal';
   const [chipItemWidth, setChipItemWidth] = useState(0);
@@ -40,12 +42,22 @@ const Chip: React.FC<ChipProps> = ({
     normalizeSelected(selected)
   );
 
+  // Sync only when the `selected` prop's own value changes, tracked against a
+  // ref rather than against internalSelected. Comparing to internalSelected
+  // made this effect watch the state it writes: every internal pick differed
+  // from the prop and was immediately reverted, so an uncontrolled Chip could
+  // never hold — or show — a selection. The ref is needed because `selected`
+  // defaults to a fresh [] each render, which would otherwise retrigger the
+  // reset on every pass.
+  const lastSelectedProp = useRef(JSON.stringify(normalizeSelected(selected)));
+
   useEffect(() => {
-    const newSelected = normalizeSelected(selected);
-    if (JSON.stringify(newSelected) !== JSON.stringify(internalSelected)) {
-      setInternalSelected(newSelected);
+    const serialized = JSON.stringify(normalizeSelected(selected));
+    if (serialized !== lastSelectedProp.current) {
+      lastSelectedProp.current = serialized;
+      setInternalSelected(normalizeSelected(selected));
     }
-  }, [selected, internalSelected]);
+  }, [selected]);
 
   const isSelected = (value: ChipValue) => internalSelected.includes(value);
 
@@ -89,6 +101,7 @@ const Chip: React.FC<ChipProps> = ({
       renderItem={({ item }) => (
         <ChipItem
           item={item}
+          itemTestID={getTestID(testID, `option-${item.value}`)}
           isSelected={() => isSelected(item.value)}
           color={color}
           block={block}

package/src/Chip/ChipItem.tsx

@@ -13,6 +13,7 @@ export default function ChipItem({
   isHorizontal,
   onPress,
   onLayout,
+  itemTestID,
 }: ChipItem) {
   const validColors: ColorVariantType[] = [
     'default',
@@ -67,6 +68,7 @@ export default function ChipItem({
   return (
     <Pressable
       key={item.value}
+      testID={itemTestID}
       style={[
         styles.chip,
         getSizeStyle(),

package/src/Chip/README.md

@@ -11,7 +11,7 @@ Komponen `Chip` digunakan untuk menampilkan daftar pilihan seperti tag, filter,
 | Nama Props       | Tipe                                         | Default        | Deskripsi                                                                 |
 |------------------|----------------------------------------------|----------------|--------------------------------------------------------------------------|
 | `options`        | `ChipOption[]`                               | –              | Daftar opsi yang akan ditampilkan. Setiap opsi memiliki `label`, `value`, dan opsional `disabled`. |
-| `selected`       | `string \| string[] \| null \| undefined` | `[]`           | Nilai yang dipilih. Bisa berupa string (single), array (multiple), atau null. |
+| `selected`       | `string \| string[] \| null \| undefined` | `[]`           | Nilai yang dipilih. Bisa string (single), array (multiple), atau null. Opsional: kalau dilewat, Chip menyimpan pilihannya sendiri (uncontrolled). |
 | `onSelect`       | `(value: string \| string[]) => void`       | –              | Fungsi callback saat chip dipilih. Akan mengembalikan value terpilih. |
 | `multiple`       | `boolean`                                    | `false`        | Jika `true`, bisa memilih lebih dari satu chip.                        |
 | `direction`      | `'horizontal' \| 'vertical'`                | `'horizontal'` | Arah layout chip: horizontal (dalam baris) atau vertical (ke bawah).    |
@@ -21,6 +21,7 @@ Komponen `Chip` digunakan untuk menampilkan daftar pilihan seperti tag, filter,
 | `renderItem`     | `(item, isSelected, isDisabled) => ReactNode`| –              | Jika ingin custom tampilan chip secara manual.                          |
 | `header`     | ReactElement| –              | Jika ingin chip mempunyai header.                          |
 | `footer`     | ReactElement| –              | Jika ingin chip mempunyai footer.                          |
+| `testID`     | `string` | –              | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-option-{value}` untuk tiap chip item (Chip sendiri tidak merender testID pada root).  |
 
 ---
 
@@ -89,4 +90,27 @@ interface ChipOption {
 - gunakan scrollable = false jika ingin membungkus di ScrollView
 ---
 
-© 2025 – Komponen Chip by YourTeam
+© 2025 – Komponen Chip by YourTeam
+
+## Controlled vs uncontrolled
+
+Kirim `selected` kalau state pilihan disimpan di luar. Chip akan mengikuti
+nilai prop itu setiap kali berubah:
+
+```jsx
+const [selected, setSelected] = useState(['apple']);
+
+<Chip options={options} selected={selected} onSelect={setSelected} multiple />
+```
+
+Lewati `selected` kalau tidak perlu menyimpannya sendiri. Chip mengurus
+pilihannya secara internal dan `onSelect` cukup dipakai untuk membaca hasil:
+
+```jsx
+<Chip options={options} onSelect={(value) => console.log(value)} multiple />
+```
+
+Jangan mengirim `selected` dengan nilai tetap sambil mengharapkan chip tidak
+pernah menyala — chip tetap menyala dari state internalnya. Untuk chip yang
+murni tampilan, kendalikan `selected` sungguhan dan jangan perbarui di
+`onSelect`.

package/src/Chip/README_CHIP_ITEM.md

@@ -17,6 +17,7 @@ Komponen `ChipItem` merupakan komponen presentasional dalam bentuk "chip" atau "
 | `isHorizontal` | `boolean`                                                                                        | `false`      | Jika true, maka `block` akan diabaikan agar chip tetap fleksibel secara horizontal |
 | `onPress`      | `(disabled: boolean, val: ChipOptionProps) => void`                                              | `undefined`  | Callback saat chip ditekan                                                         |
 | `onLayout`     | `(event: LayoutChangeEvent) => void`                                                             | `undefined`  | Callback ketika layout chip dihitung oleh React Native                             |
+| `itemTestID`   | `string`                                                                                         | `undefined`  | ID untuk automation testing (Maestro/Detox/Appium), diterapkan langsung ke `Pressable` chip tanpa suffix tambahan. Biasanya diisi otomatis oleh `Chip` sebagai `{testID}-option-{value}`. |
 
 ---
 

package/src/Chip/type.tsx

@@ -135,6 +135,7 @@ export interface ChipItem {
   isHorizontal?: boolean;
   onPress?: (isDisabled: boolean, value: ChipOptionProps) => void;
   onLayout?: (event: LayoutChangeEvent) => void;
+  itemTestID?: string;
 }
 export interface ChipProps {
   options: ChipOptionProps[];
@@ -153,4 +154,5 @@ export interface ChipProps {
   refreshing?: boolean;
   footer?: React.ComponentType<any> | React.ReactElement | null | undefined;
   header?: React.ComponentType<any> | React.ReactElement | null | undefined;
+  testID?: string;
 }

package/src/CounterButton/CounterButton.tsx

@@ -4,6 +4,7 @@ import Color from '../Color/Color';
 import Icon from '../Icon';
 import type { CounterButtonType } from './type';
 import { fontSizeMap } from '../Typography/type';
+import { getTestID } from '../helpers/getTestID';
 
 export default function CounterButton({
   variant = 'default',
@@ -13,6 +14,7 @@ export default function CounterButton({
   max,
   disabledDecrease = false,
   disabledIncrease = false,
+  testID,
 }: CounterButtonType) {
   const [count, setCount] = useState<number>(value);
   const [inputValue, setInputValue] = useState<string>(String(value));
@@ -74,6 +76,7 @@ export default function CounterButton({
       ]}
     >
       <Pressable
+        testID={getTestID(testID, 'decrement')}
         style={[
           variant === 'default' ? styles.buttonDefault : styles.buttonColor,
           isDecreaseDisabled && variant === 'color'
@@ -99,6 +102,7 @@ export default function CounterButton({
       </Pressable>
 
       <TextInput
+        testID={getTestID(testID, 'input')}
         style={[
           styles.input,
           { fontSize: fontSizeMap['t3'], color: Color.gray[900] },
@@ -109,6 +113,7 @@ export default function CounterButton({
       />
 
       <Pressable
+        testID={getTestID(testID, 'increment')}
         style={[
           variant === 'default' ? styles.buttonDefault : styles.buttonColor,
           isIncreaseDisabled && variant === 'color'

package/src/CounterButton/README.md

@@ -24,6 +24,7 @@ Komponen `CounterButton` adalah tombol penghitung sederhana (+ / -) yang digunak
 | `variant` | `'default'` \| `'color'`     | `'default'` | Menentukan gaya visual: `default` (outline) atau `color` (filled).       |
 | `disabledDecrease` | boolean    | `'false'` | disabled decrease    |
 | `disabledIncrease` | boolean    | `'false'` | disabled increase    |
+| `testID`  | `string`                     | `undefined` | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-decrement`, `-input`, dan `-increment` untuk tiap elemen. |
 
 ---
 

package/src/CounterButton/type.tsx

@@ -6,4 +6,5 @@ export interface CounterButtonType {
   max?: number;
   disabledDecrease?: boolean;
   disabledIncrease?: boolean;
+  testID?: string;
 }

package/src/DatePicker/DatePicker.tsx

@@ -11,6 +11,7 @@ import {
   type DateRangeProps,
 } from '../Calendar/CalendarPropsType';
 import Color from '../Color/Color';
+import { getTestID } from '../helpers/getTestID';
 
 interface DatePickerProps extends CalendarTypes {
   onChange: (selectedDate: DateRangeProps) => void;
@@ -26,6 +27,7 @@ interface DatePickerProps extends CalendarTypes {
   cancelLabel?: string;
   isCancelButtonDisabled?: boolean;
   isConfirmButtonDisabled?: boolean;
+  testID?: string;
 }
 
 export default function DatePicker({
@@ -42,6 +44,7 @@ export default function DatePicker({
   cancelLabel = 'Batalkan',
   isCancelButtonDisabled = false,
   isConfirmButtonDisabled = false,
+  testID,
   ...calendarProps
 }: DatePickerProps) {
   const [errorValidate, setErrorValidate] = useState<boolean>(false);
@@ -136,12 +139,14 @@ export default function DatePicker({
   return (
     <View>
       <BottomSheet
+        testID={getTestID(testID, 'sheet')}
         isOpen={isOpen}
         onClose={onClose}
         footer={
           <View style={styles.footerContainer}>
             <View style={styles.buttonWrapper}>
               <Button
+                testID={getTestID(testID, 'cancel')}
                 variant="tertiary"
                 title={cancelLabel}
                 color="primary"
@@ -151,6 +156,7 @@ export default function DatePicker({
             </View>
             <View style={styles.buttonWrapper}>
               <Button
+                testID={getTestID(testID, 'confirm')}
                 title={confirmLabel}
                 color="primary"
                 onPress={handleOnPressSubmitButton}
@@ -166,11 +172,21 @@ export default function DatePicker({
           onChange={handleOnChangeCalendar}
           {...calendarProps}
         />
-        <Alert
-          color="danger"
-          message={hint ? hint : 'Error validation'}
-          hide={!errorValidate}
-        />
+        {testID ? (
+          <View testID={getTestID(testID, 'error')}>
+            <Alert
+              color="danger"
+              message={hint ? hint : 'Error validation'}
+              hide={!errorValidate}
+            />
+          </View>
+        ) : (
+          <Alert
+            color="danger"
+            message={hint ? hint : 'Error validation'}
+            hide={!errorValidate}
+          />
+        )}
       </BottomSheet>
     </View>
   );

package/src/DatePicker/MonthPicker.tsx

@@ -5,6 +5,7 @@ import Typography from '../Typography/Typography';
 import Button from '../Button/Button';
 import Color from '../Color/Color';
 import { generateMonthOptions } from './helpers';
+import { getTestID } from '../helpers/getTestID';
 
 type PickerMode = 'single' | 'range' | 'multiple';
 
@@ -18,6 +19,7 @@ interface MonthPickerProps {
   title?: string;
   cancelLabel?: string;
   confirmLabel?: string;
+  testID?: string;
 }
 
 export default function MonthPicker({
@@ -28,6 +30,7 @@ export default function MonthPicker({
   cancelLabel = 'Batal',
   confirmLabel = 'pilih',
   title = 'Pilih Bulan',
+  testID,
 }: MonthPickerProps) {
   const [rangeValue, setRangeValue] = useState<{
     startDate: number | null;
@@ -91,12 +94,14 @@ export default function MonthPicker({
 
   return (
     <BottomSheet
+      testID={getTestID(testID, 'sheet')}
       isOpen={isOpen}
       onClose={onClose}
       footer={
         <View style={styles.containerBottomSheetFooter}>
           <View style={styles.flex1}>
             <Button
+              testID={getTestID(testID, 'cancel')}
               title={cancelLabel}
               variant="tertiary"
               size="medium"
@@ -106,6 +111,7 @@ export default function MonthPicker({
           </View>
           <View style={styles.flex1}>
             <Button
+              testID={getTestID(testID, 'confirm')}
               title={confirmLabel}
               color="primary"
               size="medium"
@@ -137,6 +143,7 @@ export default function MonthPicker({
             return (
               <View style={styles.yearItem}>
                 <TouchableOpacity
+                  testID={getTestID(testID, `option-${item.value}`)}
                   onPress={() => handleSelectMonth(item.value)}
                   style={[
                     styles.option,

package/src/DatePicker/README_DATEPICKER.md

@@ -26,6 +26,7 @@ Komponen ini extend dari Calendar, jadi kalian bisa menggunakan semua props yang
 | `isOpen`    | `boolean`                       | Menentukan apakah BottomSheet sedang terbuka |
 | `hasError`  | `boolean`                       | (Opsional) Menandai jika terjadi kesalahan validasi |
 | `value`     | DateRangeProps                  | (Opsional) set default value |
+| `testID`    | `string`                        | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-sheet`, `-cancel`, `-confirm`, dan `-error`. |
 
 ---
 

package/src/DatePicker/README_MONTHPICKER.md

@@ -14,6 +14,7 @@ Komponen **MonthPicker** adalah komponen pemilih bulan berbasis **React Native**
 | `onClose`  | `() => void`                                                                          | `undefined` | Callback yang dipanggil saat pengguna menekan tombol **Batal** atau menutup **BottomSheet**.                     |
 | `onChange` | `(value: number[] \| { startDate: number \| null; endDate: number \| null }) => void` | `undefined` | Callback yang dipanggil ketika pengguna menekan tombol **Pilih**. Parameter yang dikirim tergantung pada `mode`. |
 | `mode`     | `'single' \| 'range' \| 'multiple'`                                                   | `'single'`  | Menentukan cara pemilihan bulan.                                                                                 |
+| `testID`   | `string`                                                                              | `undefined` | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-sheet`, `-cancel`, `-confirm`, dan `-option-{value}` untuk tiap bulan. |
 
 ### Bentuk *value* yang Dikirim oleh `onChange`
 

package/src/DatePicker/README_TIMEPICKER.md

@@ -12,6 +12,7 @@
 | `onClose`  | `() => void`                                        | `-`                    | Callback saat pengguna menutup **BottomSheet** atau menekan tombol **Batal**.                 |
 | `onChange` | `(value: { hour: number; minute: number }) => void` | `-`                    | Callback saat pengguna menekan tombol **Pilih**. Objek yang dikirim berisi `hour` & `minute`. |
 | `value`    | `{ hour: number; minute: number }`                  | `{hour: 0, minute: 0}` | Props untuk mengontrol value dari parent                                                      |
+| `testID`   | `string`                                            | `-`                    | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-sheet`, `-cancel`, `-confirm`, `-hour`, dan `-minute`. |
 
 ### Bentuk _value_ `onChange`
 

package/src/DatePicker/README_YEARPICKER.md

@@ -18,6 +18,7 @@ Semua outputnya dibungkus dalam komponen **BottomSheet** untuk konsistensi UI.
 | `onClose`  | `() => void`                                                                          | `-`        | Dipanggil saat pengguna menutup picker atau menekan **Batal**.                       |
 | `onChange` | `(value: number[] \| { startDate: number \| null; endDate: number \| null }) => void` | `-`        | Dipanggil setelah pengguna menekan **Pilih**. Bentuk *value* bergantung pada `mode`. |
 | `mode`     | `'single' \| 'range' \| 'multiple'`                                                   | `'single'` | Menentukan mode pemilihan.                                                           |
+| `testID`   | `string`                                                                              | `-`        | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-sheet`, `-cancel`, `-confirm`, dan `-option-{year}` untuk tiap tahun. |
 
 ### Bentuk *value* `onChange`
 

package/src/DatePicker/TimePicker.tsx

@@ -13,6 +13,7 @@ import Button from '../Button/Button';
 import Color from '../Color/Color';
 import Typography from '../Typography/Typography';
 import AnimatedItem from './partials/AnimatedItem';
+import { getTestID } from '../helpers/getTestID';
 
 const ITEM_HEIGHT = 40;
 const SCREEN_WIDTH = Dimensions.get('window').width;
@@ -29,6 +30,7 @@ interface TimePickerProps {
   title?: string;
   confirmLabel?: string;
   cancelLabel?: string;
+  testID?: string;
 }
 
 const generateInfiniteData = (max: number, cycles: number) => {
@@ -44,6 +46,7 @@ export default function TimePickerWheel({
   title = 'Pilih Waktu',
   cancelLabel = 'Batal',
   confirmLabel = 'Pilih',
+  testID,
 }: TimePickerProps) {
   const [selectedHour, setSelectedHour] = useState<number>(value?.hour ?? 0);
   const [selectedMinute, setSelectedMinute] = useState<number>(
@@ -188,12 +191,14 @@ export default function TimePickerWheel({
 
   return (
     <BottomSheet
+      testID={getTestID(testID, 'sheet')}
       isOpen={isOpen}
       onClose={onClose}
       footer={
         <View style={styles.footer}>
           <View style={styles.flex1}>
             <Button
+              testID={getTestID(testID, 'cancel')}
               title={cancelLabel}
               variant="tertiary"
               onPress={onClose}
@@ -203,6 +208,7 @@ export default function TimePickerWheel({
           </View>
           <View style={styles.flex1}>
             <Button
+              testID={getTestID(testID, 'confirm')}
               title={confirmLabel}
               onPress={handleSubmit}
               color="primary"
@@ -232,6 +238,7 @@ export default function TimePickerWheel({
           {/* Hour Picker */}
           <View style={styles.pickerColumn}>
             <Animated.FlatList
+              testID={getTestID(testID, 'hour')}
               ref={hourRef}
               data={hours}
               renderItem={renderHourItem}
@@ -258,6 +265,7 @@ export default function TimePickerWheel({
           {/* Minute Picker */}
           <View style={styles.pickerColumn}>
             <Animated.FlatList
+              testID={getTestID(testID, 'minute')}
               ref={minuteRef}
               data={minutes}
               renderItem={renderMinuteItem}

package/src/DatePicker/YearPicker.tsx

@@ -5,6 +5,7 @@ import Typography from '../Typography/Typography';
 import Button from '../Button/Button';
 import Color from '../Color/Color';
 import Icon from '../Icon';
+import { getTestID } from '../helpers/getTestID';
 
 type PickerMode = 'single' | 'range' | 'multiple';
 
@@ -15,6 +16,10 @@ interface YearPickerProps {
     value: number[] | { startDate: number | null; endDate: number | null }
   ) => void;
   mode?: PickerMode;
+  title?: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+  testID?: string;
 }
 
 export default function YearPicker({
@@ -22,6 +27,10 @@ export default function YearPicker({
   onClose,
   onChange,
   mode = 'single',
+  title = 'Pilih Tahun',
+  cancelLabel = 'Batal',
+  confirmLabel = 'Pilih',
+  testID,
 }: YearPickerProps) {
   const currentYear = new Date().getFullYear();
   const pageSize = 9;
@@ -103,13 +112,15 @@ export default function YearPicker({
 
   return (
     <BottomSheet
+      testID={getTestID(testID, 'sheet')}
       isOpen={isOpen}
       onClose={onClose}
       footer={
         <View style={styles.containerBottomSheetFooter}>
           <View style={styles.flex1}>
             <Button
-              title="Batal"
+              testID={getTestID(testID, 'cancel')}
+              title={cancelLabel}
               variant="tertiary"
               size="medium"
               color="primary"
@@ -118,7 +129,8 @@ export default function YearPicker({
           </View>
           <View style={styles.flex1}>
             <Button
-              title="Pilih"
+              testID={getTestID(testID, 'confirm')}
+              title={confirmLabel}
               color="primary"
               size="medium"
               onPress={handleSubmit}
@@ -136,7 +148,7 @@ export default function YearPicker({
           <Icon name="ArrowLeft" color={Color.base.white100} size={10} />
         </TouchableOpacity>
         <Typography variant="t1" weight="semibold" color={Color.gray[900]}>
-          Pilih Tahun
+          {title}
         </Typography>
         <TouchableOpacity
           style={styles.buttonNav}
@@ -162,6 +174,7 @@ export default function YearPicker({
             return (
               <View style={styles.yearItem}>
                 <TouchableOpacity
+                  testID={getTestID(testID, `option-${item}`)}
                   onPress={() => handleSelectYear(item)}
                   style={[
                     styles.option,

package/src/Drawing/Drawing.tsx

@@ -16,6 +16,7 @@ interface DrawingProps {
   disabled?: boolean;
   hint?: string;
   hasError?: boolean;
+  testID?: string;
 }
 
 const Drawing = ({
@@ -26,6 +27,7 @@ const Drawing = ({
   disabled,
   hint,
   hasError,
+  testID,
 }: DrawingProps) => {
   const ref = useRef<SignatureViewRef | null>(null);
 
@@ -108,7 +110,7 @@ const Drawing = ({
   }, [dataURL]);
 
   return (
-    <View style={styles.container}>
+    <View testID={testID} style={styles.container}>
       <View style={styles.drawerContainer}>
         <SignatureCanvas
           key={canvasKey}

package/src/Drawing/README.md

@@ -56,3 +56,4 @@ export default function SignatureForm() {
 | Prop     | Tipe                                   | Default     | Deskripsi                                                                                                             |
 | -------- | -------------------------------------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
 | `onDraw` | `(value?: string \| undefined) ⇒ void` | `undefined` | Callback berisi tanda tangan **base64** saat pengguna menggambar (dipicu otomatis di `onDraw`). |
+| `testID` | `string` | `undefined` | ID untuk automation testing (Maestro/Detox/Appium). Diterapkan langsung ke elemen akar, tanpa suffix. |

package/src/DropDown/DropDown.tsx

@@ -14,6 +14,7 @@ import {
 import Color from '../Color/Color';
 import type { DropDownProps } from './type';
 import type { ChipOptionProps } from '../Chip/type';
+import { getTestID } from '../helpers/getTestID';
 
 const Dropdown = ({
   options,
@@ -23,6 +24,7 @@ const Dropdown = ({
   renderItem,
   width,
   value,
+  testID,
 }: DropDownProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selected, setSelected] = useState<string | number>();
@@ -67,12 +69,17 @@ const Dropdown = ({
 
   return (
     <>
-      <TouchableOpacity ref={buttonRef} onPress={handleToggle}>
+      <TouchableOpacity
+        testID={getTestID(testID, 'trigger')}
+        ref={buttonRef}
+        onPress={handleToggle}
+      >
         {renderButton}
       </TouchableOpacity>
       {isOpen && (
         <Modal transparent animationType="none" visible>
           <Pressable
+            testID={getTestID(testID, 'modal')}
             style={StyleSheet.absoluteFillObject}
             onPress={() => setIsOpen(false)}
           />
@@ -95,6 +102,10 @@ const Dropdown = ({
               {options.map((item, idx) => (
                 <TouchableOpacity
                   key={idx}
+                  testID={getTestID(
+                    testID,
+                    item.value != null ? `option-${item.value}` : `item-${idx}`
+                  )}
                   onPress={() => handlePressOption(item)}
                   style={[
                     styles.option,

package/src/DropDown/README.md

@@ -26,6 +26,7 @@ Serta modul standar React Native: `Modal`, `ScrollView`, dll. Tidak memerlukan l
 | `renderItem`   | `React.ReactNode`                   | `undefined` | Elemen yang dipakai sebagai tombol di tiap item yang ada di dalam dropdown |
 | `width`        | `number`                            | `undefined` | Angka yang digunakan untuk mengatur lebar pembungkus list                  |
 | `value`        | `number \| string`                  | `undefined` | Props yang dapat memungkinkan state selected dari luar                     |
+| `testID`       | `string`                            | `undefined` | ID untuk automation testing (Maestro/Detox/Appium). Menurunkan `-trigger`, `-modal`, dan `-option-{value}` (atau `-item-{index}` jika opsi tidak memiliki `value`) untuk tiap opsi.  |
 
 ### Struktur `ChipOptionProps`
 

package/src/DropDown/type.tsx

@@ -9,4 +9,5 @@ export interface DropDownProps {
   renderItem?: (item: ChipOptionProps, index: number) => React.ReactNode;
   width?: number;
   value?: string | number | null;
+  testID?: string;
 }

package/src/FileView/PDF_VIEW_README.md

@@ -13,3 +13,14 @@ npm install react-native-pdf
 # atau
 yarn add react-native-pdf
 ```
+
+---
+
+## Props
+
+| Props    | Tipe                              | Wajib | Default | Deskripsi                                                                                             |
+| -------- | --------------------------------- | ----- | ------- | ----------------------------------------------------------------------------------------------------- |
+| `source` | `{ uri, headers, cache, ... }`    | ✅     | -       | Sumber dokumen PDF. Kalau kosong, komponen merender container placeholder.                            |
+| `testID` | `string`                          | ❌     | -       | ID untuk automation testing (Maestro/Detox/Appium). Tetap terpasang pada placeholder saat `source` kosong. |
+
+Props lain diteruskan apa adanya ke `Pdf` dari `react-native-pdf`.

package/src/FileView/PdfView.tsx

@@ -14,13 +14,14 @@ type Source = {
 
 interface Props extends React.ComponentProps<typeof Pdf> {
   source: Source;
+  testID?: string;
 }
 
-const PdfView = ({ source, ...props }: Props) => {
-  if (!source) return <View />;
+const PdfView = ({ source, testID, ...props }: Props) => {
+  if (!source) return <View testID={testID} />;
 
   return (
-    <View style={styles.container}>
+    <View testID={testID} style={styles.container}>
       <Pdf source={source} style={styles.pdf} {...props} />
     </View>
   );