@herca/rn-kit 0.1.113 → 0.1.115

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

@@ -1,10 +1,11 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
 import { View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
 import BottomSheet from '../BottomSheet/BottomSheet';
 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';
 
@@ -15,9 +16,16 @@ interface MonthPickerProps {
     value: number[] | { startDate: number | null; endDate: number | null }
   ) => void;
   mode?: PickerMode;
+  /**
+   * The selection to open on, shaped exactly like what `onChange` reports:
+   * an array of 0-based months for single/multiple, a pair for range. Leave
+   * it out to let the sheet keep whatever it was last given by a tap.
+   */
+  value?: number[] | { startDate: number | null; endDate: number | null };
   title?: string;
   cancelLabel?: string;
   confirmLabel?: string;
+  testID?: string;
 }
 
 export default function MonthPicker({
@@ -25,9 +33,11 @@ export default function MonthPicker({
   onClose,
   onChange,
   mode = 'single',
+  value,
   cancelLabel = 'Batal',
   confirmLabel = 'pilih',
   title = 'Pilih Bulan',
+  testID,
 }: MonthPickerProps) {
   const [rangeValue, setRangeValue] = useState<{
     startDate: number | null;
@@ -36,6 +46,31 @@ export default function MonthPicker({
   const [multipleValue, setMultipleValue] = useState<number[]>([]);
   const [singleValue, setSingleValue] = useState<number | null>(null);
 
+  // Compared as a string, not by reference: a parent that rebuilds the value
+  // object on every render would otherwise wipe a selection mid-sheet.
+  const valueKey = JSON.stringify(value ?? null);
+
+  useEffect(() => {
+    const incoming = JSON.parse(valueKey);
+
+    // No value at all means uncontrolled -- the sheet's own state is the
+    // only record of the selection, so don't touch it.
+    if (!isOpen || incoming === null) return;
+
+    if (Array.isArray(incoming)) {
+      setSingleValue(incoming[0] ?? null);
+      setMultipleValue(incoming);
+      setRangeValue({ startDate: null, endDate: null });
+    } else {
+      setSingleValue(null);
+      setMultipleValue([]);
+      setRangeValue({
+        startDate: incoming.startDate ?? null,
+        endDate: incoming.endDate ?? null,
+      });
+    }
+  }, [isOpen, valueKey]);
+
   const handleSelectMonth = useCallback(
     (month: number) => {
       if (mode === 'single') {
@@ -91,12 +126,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 +143,7 @@ export default function MonthPicker({
           </View>
           <View style={styles.flex1}>
             <Button
+              testID={getTestID(testID, 'confirm')}
               title={confirmLabel}
               color="primary"
               size="medium"
@@ -137,6 +175,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,8 @@ 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.                                                                                 |
+| `value`    | `number[] \| { startDate: number \| null; endDate: number \| null }`                  | `undefined` | Pilihan yang ditandai saat sheet dibuka. Bentuknya sama persis dengan yang dilaporkan `onChange`, jadi nilai dari `onChange` bisa langsung dikembalikan ke sini. Jika tidak diisi, picker hanya mengingat pilihan dari tap-nya sendiri. |
+| `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,8 @@ 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.                                                           |
+| `value`    | `number[] \| { startDate: number \| null; endDate: number \| null }`                  | `-`        | Pilihan yang ditandai saat sheet dibuka; halaman ikut berpindah ke tahun tersebut. Bentuknya sama persis dengan yang dilaporkan `onChange`. Jika tidak diisi, picker hanya mengingat pilihan dari tap-nya sendiri. |
+| `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

@@ -1,10 +1,11 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect } from 'react';
 import { View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
 import BottomSheet from '../BottomSheet/BottomSheet';
 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,16 @@ interface YearPickerProps {
     value: number[] | { startDate: number | null; endDate: number | null }
   ) => void;
   mode?: PickerMode;
+  /**
+   * The selection to open on, shaped exactly like what `onChange` reports:
+   * an array of years for single/multiple, a pair for range. Leave it out to
+   * let the sheet keep whatever it was last given by a tap.
+   */
+  value?: number[] | { startDate: number | null; endDate: number | null };
+  title?: string;
+  cancelLabel?: string;
+  confirmLabel?: string;
+  testID?: string;
 }
 
 export default function YearPicker({
@@ -22,6 +33,11 @@ export default function YearPicker({
   onClose,
   onChange,
   mode = 'single',
+  value,
+  title = 'Pilih Tahun',
+  cancelLabel = 'Batal',
+  confirmLabel = 'Pilih',
+  testID,
 }: YearPickerProps) {
   const currentYear = new Date().getFullYear();
   const pageSize = 9;
@@ -50,6 +66,41 @@ export default function YearPicker({
     return years.slice(start, start + pageSize);
   }, [years, pageIndex]);
 
+  // Compared as a string, not by reference: a parent that rebuilds the value
+  // object on every render would otherwise wipe a selection mid-sheet.
+  const valueKey = JSON.stringify(value ?? null);
+
+  useEffect(() => {
+    const incoming = JSON.parse(valueKey);
+
+    // No value at all means uncontrolled -- the sheet's own state is the
+    // only record of the selection, so don't touch it.
+    if (!isOpen || incoming === null) return;
+
+    // The year the sheet should be looking at: a lone selection, or the start
+    // of a range. Years run 121 deep across pages, so without this the sheet
+    // opens on the current year and the highlight is off-screen.
+    let anchor: number | null;
+
+    if (Array.isArray(incoming)) {
+      setSingleValue(incoming[0] ?? null);
+      setMultipleValue(incoming);
+      setRangeValue({ startDate: null, endDate: null });
+      anchor = incoming[0] ?? null;
+    } else {
+      setSingleValue(null);
+      setMultipleValue([]);
+      setRangeValue({
+        startDate: incoming.startDate ?? null,
+        endDate: incoming.endDate ?? null,
+      });
+      anchor = incoming.startDate ?? null;
+    }
+
+    const anchorIndex = anchor === null ? -1 : years.indexOf(anchor);
+    if (anchorIndex !== -1) setPageIndex(Math.floor(anchorIndex / pageSize));
+  }, [isOpen, valueKey, years]);
+
   const handleSelectYear = useCallback(
     (year: number) => {
       if (mode === 'single') {
@@ -103,13 +154,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 +171,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 +190,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 +216,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>
   );

package/src/Icon/Icon.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ViewStyle } from 'react-native';
+import { View, type ViewStyle } from 'react-native';
 import AirPlane from './icons/AirPlane';
 import AlignCenter from './icons/AlignCenter';
 import AlignLeft from './icons/AlignLeft';
@@ -353,6 +353,7 @@ const Icon: React.FC<IconProps> = ({
   size = 24,
   color = '#000',
   style,
+  testID,
 }) => {
   const SelectedIcon = icons[name];
 
@@ -360,7 +361,14 @@ const Icon: React.FC<IconProps> = ({
     return null;
   }
 
-  return <SelectedIcon size={size} color={color} style={style} />;
+  const icon = <SelectedIcon size={size} color={color} style={style} />;
+
+  // The 170 files in ./icons take only size/color and spread nothing, so a
+  // testID handed to them would be dropped. Wrapping is the one-file fix --
+  // and only when an id is actually asked for, so existing call sites keep
+  // their exact tree. Teaching every icon to forward testID would be the
+  // thorough fix; it is a 170-file codemod and not what this change is.
+  return testID ? <View testID={testID}>{icon}</View> : icon;
 };
 
 export default Icon;

package/src/Icon/README.md

@@ -45,6 +45,7 @@ export default function App() {
 | `size`  | number | 24      | Ukuran icon dalam piksel |
 | `color` | string | "#000"  | Warna icon               |
 | `style` | object | `{}`    | Gaya tambahan (optional) |
+| `testID` | `string` | - | ID untuk automation testing. Ikon dibungkus View ber-testID hanya saat prop ini diisi. |
 
 ## Daftar Icon
 

package/src/Icon/type.tsx

@@ -178,4 +178,5 @@ export interface IconProps {
   size?: number;
   color?: string;
   style?: ViewStyle;
+  testID?: string;
 }