@herca/rn-kit 0.1.64 → 0.1.65

package/src/Input/InputDate.tsx

@@ -0,0 +1,216 @@
+import {
+  Color,
+  DatePicker,
+  Icon,
+  Typography,
+  type CalendarModeType,
+  type DateRangeProps,
+} from '@herca/rn-kit';
+import { useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import type { FormattedDateRangeProps } from '../Calendar/CalendarPropsType';
+import { dateFormatter } from '../function/dateFormatter';
+
+type DatePickerProps = React.ComponentProps<typeof DatePicker>;
+type DatePickerPropsWithoutOnChange = Omit<DatePickerProps, 'onChange'>;
+
+interface BaseProps {
+  label: string;
+  placeholder: string;
+  datePickerProps?: DatePickerPropsWithoutOnChange;
+  value?: string;
+  valueDateEnd?: string;
+  onSelectClick?: () => void;
+  onDatePickerClose?: () => void;
+  onDateChange?: (value: DateRangeProps) => void;
+  mode?: CalendarModeType;
+  language?: 'en' | 'id';
+}
+
+type SingleModeProps = BaseProps & {
+  mode?: 'single';
+  placeholderDateEnd?: never;
+};
+
+type RangeModeProps = BaseProps & {
+  mode: 'range';
+  placeholderDateEnd: string;
+};
+
+export type Props = SingleModeProps | RangeModeProps;
+
+export default function InputDate({
+  label,
+  placeholder = 'Select here...',
+  placeholderDateEnd = 'Select here...',
+  datePickerProps,
+  value,
+  valueDateEnd,
+  onSelectClick,
+  onDatePickerClose,
+  onDateChange,
+  mode = 'single',
+  language,
+  ...props
+}: Props) {
+  const [isDatePickerOpen, setSelectOpen] = useState<boolean>(false);
+  const [dateValue, setDateValue] = useState<FormattedDateRangeProps>();
+  const [raw, setRaw] = useState<DateRangeProps>();
+
+  const handleOpenSelect = () => {
+    setSelectOpen(true);
+    onSelectClick?.();
+  };
+
+  const handleCloseDatePicker = () => {
+    setSelectOpen(false);
+    onDatePickerClose?.();
+  };
+
+  const handleDateChange = (val: any) => {
+    onDateChange?.({
+      date: val.date ?? null,
+      startDate: val.startDate ?? null,
+      endDate: val.endDate ?? null,
+    });
+
+    const formattedValue = dateFormatter({
+      date: val.date,
+      options: {
+        language,
+        format: language ? 'localized' : 'default',
+      },
+    });
+
+    const formattedStartDate = dateFormatter({
+      date: val.startDate,
+      options: {
+        language,
+        format: language ? 'localized' : 'default',
+      },
+    });
+
+    const formattedEndDate = dateFormatter({
+      date: val.endDate,
+      options: {
+        language,
+        format: language ? 'localized' : 'default',
+      },
+    });
+
+    setDateValue({
+      date: formattedValue,
+      startDate: formattedStartDate,
+      endDate: formattedEndDate,
+    });
+
+    setRaw(val);
+  };
+
+  const startDate = () => {
+    if (!value) {
+      if (mode === 'single') {
+        return dateValue?.date;
+      } else if (mode === 'range') {
+        return dateValue?.startDate;
+      }
+    }
+
+    return value;
+  };
+
+  const endDate = () => {
+    if (mode === 'single') return null;
+
+    if (!valueDateEnd) {
+      return dateValue?.endDate;
+    }
+
+    return valueDateEnd;
+  };
+
+  const rawValue = () => {
+    if (mode === 'single') {
+      return {
+        date: datePickerProps?.value?.date ?? raw?.date,
+      };
+    } else {
+      return {
+        startDate: datePickerProps?.value?.startDate ?? raw?.startDate,
+        endDate: datePickerProps?.value?.endDate ?? raw?.endDate,
+      };
+    }
+  };
+
+  return (
+    <View style={styles.gap4}>
+      <Typography variant="t2" weight="semibold" color={Color.gray[900]}>
+        {label}
+      </Typography>
+
+      <View style={styles.wrapper}>
+        {/* sart date */}
+        <Pressable
+          style={[styles.pickerTrigger, value !== '' && styles.hasValue]}
+          onPress={handleOpenSelect}
+          {...props}
+        >
+          <Typography variant="t2" color={Color.gray[900]} weight="medium">
+            {startDate() ?? placeholder}
+          </Typography>
+          <Icon name="ArrowDown" size={14} color={Color.gray[700]} />
+        </Pressable>
+
+        {/* end date */}
+        {mode === 'range' && (
+          <Pressable
+            style={[styles.pickerTrigger, value !== '' && styles.hasValue]}
+            onPress={handleOpenSelect}
+            {...props}
+          >
+            <Typography variant="t2" color={Color.gray[900]} weight="medium">
+              {endDate() ?? placeholderDateEnd}
+            </Typography>
+            <Icon name="ArrowDown" size={14} color={Color.gray[700]} />
+          </Pressable>
+        )}
+      </View>
+
+      <DatePicker
+        {...datePickerProps}
+        mode={mode}
+        isOpen={isDatePickerOpen}
+        onClose={handleCloseDatePicker}
+        value={rawValue()}
+        onChange={(val: DateRangeProps) => {
+          handleDateChange(val);
+        }}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  gap4: {
+    gap: 4,
+  },
+  pickerTrigger: {
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    borderWidth: 1,
+    borderColor: Color.gray[200],
+    flex: 1,
+  },
+  hasValue: {
+    borderColor: Color.primary[300],
+  },
+  wrapper: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+  },
+});

package/src/Input/README_INPUT_DATE.md

@@ -0,0 +1,265 @@
+# InputDate Component
+
+Komponen React Native untuk input tanggal dengan dukungan mode single date dan date range. Terintegrasi dengan DatePicker dari `@herca/rn-kit` dan menyediakan UI yang user-friendly untuk pemilihan tanggal.
+
+## Penggunaan Dasar
+
+### Single Date Mode
+
+```jsx
+import InputDate from './InputDate';
+
+function MyForm() {
+  const [date, setDate] = useState('');
+
+  return (
+    <InputDate
+      label="Tanggal Lahir"
+      placeholder="Pilih tanggal"
+      value={date}
+      onDateChange={(val) => setDate(val.date)}
+    />
+  );
+}
+```
+
+### Date Range Mode
+
+```jsx
+import InputDate from './InputDate';
+
+function MyForm() {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+
+  return (
+    <InputDate
+      mode="range"
+      label="Periode"
+      placeholder="Tanggal mulai"
+      placeholderDateEnd="Tanggal selesai"
+      value={startDate}
+      valueDateEnd={endDate}
+      onDateChange={(val) => {
+        setStartDate(val.startDate);
+        setEndDate(val.endDate);
+      }}
+    />
+  );
+}
+```
+
+## Props
+
+### Base Props
+
+| Prop                | Type                              | Default            | Deskripsi                                          |
+| ------------------- | --------------------------------- | ------------------ | -------------------------------------------------- |
+| `label`             | `string`                          | **Required**       | Label yang ditampilkan di atas input               |
+| `placeholder`       | `string`                          | `"Select here..."` | Placeholder untuk tanggal pertama/single           |
+| `value`             | `string`                          | `undefined`        | Nilai tanggal terpilih (formatted)                 |
+| `valueDateEnd`      | `string`                          | `undefined`        | Nilai tanggal akhir untuk mode range (formatted)   |
+| `datePickerProps`   | `DatePickerPropsWithoutOnChange`  | `undefined`        | Props tambahan untuk DatePicker (kecuali onChange) |
+| `onSelectClick`     | `() => void`                      | `undefined`        | Callback ketika input diklik                       |
+| `onDatePickerClose` | `() => void`                      | `undefined`        | Callback ketika DatePicker ditutup                 |
+| `onDateChange`      | `(value: DateRangeProps) => void` | `undefined`        | Callback ketika tanggal berubah                    |
+| `mode`              | `'single' \| 'range'`             | `'single'`         | Mode pemilihan tanggal                             |
+| `language`          | `'en' \| 'id'`                    | `undefined`        | Bahasa untuk format tanggal                        |
+
+### Single Mode Specific Props
+
+Ketika `mode` tidak diset atau `mode="single"`:
+
+| Prop                 | Type    | Deskripsi                     |
+| -------------------- | ------- | ----------------------------- |
+| `placeholderDateEnd` | `never` | Tidak tersedia di single mode |
+
+### Range Mode Specific Props
+
+Ketika `mode="range"`:
+
+| Prop                 | Type     | Deskripsi                                      |
+| -------------------- | -------- | ---------------------------------------------- |
+| `placeholderDateEnd` | `string` | **Required** - Placeholder untuk tanggal akhir |
+
+## Return Value dari onDateChange
+
+Callback `onDateChange` menerima objek dengan struktur:
+
+```typescript
+{
+  date: string | null; // Untuk single mode
+  startDate: string | null; // Untuk range mode (tanggal mulai)
+  endDate: string | null; // Untuk range mode (tanggal selesai)
+}
+```
+
+## Contoh Penggunaan
+
+### Single Date dengan Language
+
+```jsx
+<InputDate
+  label="Select Date"
+  placeholder="Choose a date"
+  mode="single"
+  language="id"
+  onDateChange={(val) => console.log(val.date)}
+/>
+```
+
+### Date Range dengan Controlled Values
+
+```jsx
+function BookingForm() {
+  const [dateRange, setDateRange] = useState({
+    start: '',
+    end: '',
+  });
+
+  return (
+    <InputDate
+      mode="range"
+      label="Periode Booking"
+      placeholder="Check-in"
+      placeholderDateEnd="Check-out"
+      value={dateRange.start}
+      valueDateEnd={dateRange.end}
+      onDateChange={(val) => {
+        setDateRange({
+          start: val.startDate || '',
+          end: val.endDate || '',
+        });
+      }}
+    />
+  );
+}
+```
+
+### Dengan Custom DatePicker Props
+
+```jsx
+<InputDate
+  label="Tanggal Lahir"
+  placeholder="Pilih tanggal"
+  datePickerProps={{
+    minDate: new Date('1900-01-01'),
+    maxDate: new Date(),
+    value: { date: new Date() },
+  }}
+  onDateChange={(val) => console.log(val)}
+/>
+```
+
+### Dengan Event Callbacks
+
+```jsx
+<InputDate
+  label="Appointment Date"
+  placeholder="Select date"
+  onSelectClick={() => console.log('Picker opened')}
+  onDatePickerClose={() => console.log('Picker closed')}
+  onDateChange={(val) => {
+    console.log('Date changed:', val);
+  }}
+/>
+```
+
+### English Language Format
+
+```jsx
+<InputDate
+  label="Birth Date"
+  placeholder="Select date"
+  language="en"
+  onDateChange={(val) => console.log(val.date)}
+/>
+```
+
+### Indonesian Language Format
+
+```jsx
+<InputDate
+  label="Tanggal Lahir"
+  placeholder="Pilih tanggal"
+  language="id"
+  onDateChange={(val) => console.log(val.date)}
+/>
+```
+
+## Fitur
+
+- ✅ Dua mode: Single date dan Date range
+- ✅ Support multi-bahasa (English & Indonesian)
+- ✅ Controlled component dengan value props
+- ✅ Auto-formatting tanggal berdasarkan bahasa
+- ✅ Visual feedback untuk nilai yang sudah dipilih
+- ✅ Terintegrasi dengan DatePicker dari @herca/rn-kit
+- ✅ TypeScript support dengan discriminated unions untuk type safety
+- ✅ Customizable melalui datePickerProps
+- ✅ Event callbacks untuk lifecycle DatePicker
+
+## Styling
+
+Komponen menggunakan styling internal dengan karakteristik:
+
+- Border color berubah ke `primary[300]` ketika ada nilai terpilih
+- Layout responsive dengan flexbox
+- Gap 8px antara input start date dan end date (mode range)
+- Border radius 8px dengan padding yang konsisten
+- Typography menggunakan variant `t2` dari @herca/rn-kit
+
+## State Management Internal
+
+Komponen mengelola beberapa state internal:
+
+- `isDatePickerOpen`: Status buka/tutup DatePicker
+- `dateValue`: Nilai tanggal yang sudah diformat
+- `raw`: Nilai tanggal raw dari DatePicker
+
+State internal ini memungkinkan komponen bekerja baik sebagai controlled maupun uncontrolled component.
+
+## TypeScript
+
+Komponen menggunakan discriminated unions untuk type safety antara single dan range mode:
+
+```typescript
+type SingleModeProps = BaseProps & {
+  mode?: 'single';
+  placeholderDateEnd?: never;
+};
+
+type RangeModeProps = BaseProps & {
+  mode: 'range';
+  placeholderDateEnd: string;
+};
+
+export type Props = SingleModeProps | RangeModeProps;
+```
+
+Ini memastikan `placeholderDateEnd` hanya required ketika `mode="range"`.
+
+## Dependencies
+
+- `@herca/rn-kit` - Untuk komponen DatePicker, Icon, Typography, dan Color
+- `react-native` - Core components (View, Pressable, StyleSheet)
+
+## Best Practices
+
+1. **Selalu provide label yang jelas** untuk accessibility
+2. **Gunakan language prop** untuk konsistensi format tanggal di aplikasi
+3. **Handle onDateChange** untuk update state parent component
+4. **Gunakan controlled values** untuk form validation
+5. **Provide meaningful placeholders** yang menjelaskan expected input
+
+## Catatan
+
+- Props tambahan akan diteruskan ke Pressable trigger
+- Nilai yang dikembalikan via `onDateChange` selalu dalam format yang sudah diproses menggunakan `dateFormatter`
+- Raw value dari DatePicker tetap tersimpan untuk keperluan internal
+- Komponen dapat bekerja sebagai controlled maupun uncontrolled component
+- Border color otomatis berubah ketika ada nilai terpilih untuk visual feedback
+
+## License
+
+MIT

package/src/Ui/README_VIEWINSETS.md

@@ -0,0 +1,126 @@
+# ViewInsets Component
+
+Komponen React Native yang menyediakan padding otomatis berdasarkan safe area insets untuk menghindari area sistem seperti notch, status bar, dan navigation bar.
+
+## Instalasi
+
+Komponen ini membutuhkan dependency berikut:
+
+```bash
+npm install react-native-safe-area-context
+# atau
+yarn add react-native-safe-area-context
+```
+
+Pastikan untuk membungkus aplikasi Anda dengan `SafeAreaProvider`:
+
+```jsx
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+
+function App() {
+  return <SafeAreaProvider>{/* Konten aplikasi Anda */}</SafeAreaProvider>;
+}
+```
+
+## Penggunaan Dasar
+
+```jsx
+import ViewInsets from './ViewInsets';
+
+function MyScreen() {
+  return (
+    <ViewInsets useTop useBottom>
+      {/* Konten Anda */}
+    </ViewInsets>
+  );
+}
+```
+
+## Props
+
+| Prop        | Type                   | Default      | Deskripsi                                               |
+| ----------- | ---------------------- | ------------ | ------------------------------------------------------- |
+| `children`  | `React.ReactNode`      | **Required** | Konten yang akan ditampilkan di dalam container         |
+| `useTop`    | `boolean`              | `false`      | Menambahkan padding top sesuai safe area inset atas     |
+| `useBottom` | `boolean`              | `false`      | Menambahkan padding bottom sesuai safe area inset bawah |
+| `useLeft`   | `boolean`              | `false`      | Menambahkan padding left sesuai safe area inset kiri    |
+| `useRight`  | `boolean`              | `false`      | Menambahkan padding right sesuai safe area inset kanan  |
+| `style`     | `StyleProp<ViewStyle>` | `undefined`  | Style tambahan untuk container                          |
+| `...rest`   | `ViewProps`            | -            | Props lainnya akan diteruskan ke komponen View          |
+
+## Contoh Penggunaan
+
+### Layar dengan Safe Area Atas dan Bawah
+
+```jsx
+<ViewInsets useTop useBottom>
+  <Text>Konten aman dari notch dan navigation bar</Text>
+</ViewInsets>
+```
+
+### Layar dengan Safe Area Atas Saja
+
+```jsx
+<ViewInsets useTop>
+  <Text>Konten aman dari status bar/notch</Text>
+</ViewInsets>
+```
+
+### Layar dengan Safe Area di Semua Sisi
+
+```jsx
+<ViewInsets useTop useBottom useLeft useRight>
+  <Text>Konten aman dari semua area sistem</Text>
+</ViewInsets>
+```
+
+### Dengan Custom Style
+
+```jsx
+<ViewInsets
+  useTop
+  useBottom
+  style={{ backgroundColor: '#fff', paddingHorizontal: 16 }}
+>
+  <Text>Konten dengan style tambahan</Text>
+</ViewInsets>
+```
+
+### Dengan Props View Lainnya
+
+```jsx
+<ViewInsets useTop useBottom testID="main-container" accessible={true}>
+  <Text>Konten dengan props accessibility</Text>
+</ViewInsets>
+```
+
+## Fitur
+
+- ✅ Otomatis menangani safe area insets
+- ✅ Kontrol granular untuk setiap sisi (atas, bawah, kiri, kanan)
+- ✅ Performa optimal dengan `useMemo` untuk menghindari re-render tidak perlu
+- ✅ Mendukung semua props dari komponen View React Native
+- ✅ TypeScript support dengan type definitions lengkap
+- ✅ Default `flex: 1` untuk kemudahan layout
+
+## Catatan
+
+- Komponen ini secara default menggunakan `flex: 1` pada container
+- Safe area insets akan disesuaikan secara otomatis berdasarkan perangkat
+- Berguna untuk menghindari area yang tertutup oleh notch, status bar, home indicator, dll
+- Dapat dikombinasikan dengan style custom untuk kebutuhan layout yang lebih kompleks
+
+## TypeScript
+
+Komponen ini sudah dilengkapi dengan TypeScript definitions. Interface `ViewInsetsProps` extends dari `ViewProps` sehingga mendukung semua props dari View React Native.
+
+```typescript
+interface ViewInsetsProps extends ViewProps {
+  children: React.ReactNode;
+  useTop?: boolean;
+  useBottom?: boolean;
+  useLeft?: boolean;
+  useRight?: boolean;
+  bottomType?: 'inset' | 'tabbar'; // Prop ini didefinisikan tapi belum diimplementasikan
+}
+```

package/src/Ui/ViewInsets.tsx

@@ -0,0 +1,46 @@
+import { StyleSheet, View, type ViewProps } from 'react-native';
+import React, { useMemo } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+interface ViewInsetsProps extends ViewProps {
+  children: React.ReactNode;
+  useTop?: boolean;
+  useBottom?: boolean;
+  useLeft?: boolean;
+  useRight?: boolean;
+  bottomType?: 'inset' | 'tabbar';
+}
+
+const ViewInsets: React.FC<ViewInsetsProps> = ({
+  children,
+  style,
+  useTop = false,
+  useBottom = false,
+  useLeft = false,
+  useRight = false,
+  ...rest
+}) => {
+  const insets = useSafeAreaInsets();
+
+  const defaultStyle = useMemo(
+    () =>
+      StyleSheet.create({
+        container: {
+          paddingTop: useTop ? insets.top : 0,
+          paddingBottom: useBottom ? insets.bottom : 0,
+          paddingLeft: useLeft ? insets.left : 0,
+          paddingRight: useRight ? insets.right : 0,
+          flex: 1,
+        },
+      }),
+    [insets, useTop, useBottom, useLeft, useRight]
+  );
+
+  return (
+    <View style={[defaultStyle.container, style]} {...rest}>
+      {children}
+    </View>
+  );
+};
+
+export default ViewInsets;