@herca/rn-kit 0.1.64 → 0.1.66

package/lib/module/Input/InputDate.js

@@ -0,0 +1,170 @@
+"use strict";
+
+import { Color, DatePicker, Icon, Typography } from '@herca/rn-kit';
+import { useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { dateFormatter } from "../function/dateFormatter.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function InputDate({
+  label,
+  placeholder = 'Select here...',
+  placeholderDateEnd = 'Select here...',
+  datePickerProps,
+  value,
+  valueDateEnd,
+  onSelectClick,
+  onDatePickerClose,
+  onDateChange,
+  mode = 'single',
+  language,
+  ...props
+}) {
+  const [isDatePickerOpen, setSelectOpen] = useState(false);
+  const [dateValue, setDateValue] = useState();
+  const [raw, setRaw] = useState();
+  const handleOpenSelect = () => {
+    setSelectOpen(true);
+    onSelectClick?.();
+  };
+  const handleCloseDatePicker = () => {
+    setSelectOpen(false);
+    onDatePickerClose?.();
+  };
+  const handleDateChange = val => {
+    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 /*#__PURE__*/_jsxs(View, {
+    style: styles.gap4,
+    children: [/*#__PURE__*/_jsx(Typography, {
+      variant: "t2",
+      weight: "semibold",
+      color: Color.gray[900],
+      children: label
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.wrapper,
+      children: [/*#__PURE__*/_jsxs(Pressable, {
+        style: [styles.pickerTrigger, value !== '' && styles.hasValue],
+        onPress: handleOpenSelect,
+        ...props,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "t2",
+          color: Color.gray[900],
+          weight: "medium",
+          children: startDate() ?? placeholder
+        }), /*#__PURE__*/_jsx(Icon, {
+          name: "ArrowDown",
+          size: 14,
+          color: Color.gray[700]
+        })]
+      }), mode === 'range' && /*#__PURE__*/_jsxs(Pressable, {
+        style: [styles.pickerTrigger, value !== '' && styles.hasValue],
+        onPress: handleOpenSelect,
+        ...props,
+        children: [/*#__PURE__*/_jsx(Typography, {
+          variant: "t2",
+          color: Color.gray[900],
+          weight: "medium",
+          children: endDate() ?? placeholderDateEnd
+        }), /*#__PURE__*/_jsx(Icon, {
+          name: "ArrowDown",
+          size: 14,
+          color: Color.gray[700]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(DatePicker, {
+      ...datePickerProps,
+      mode: mode,
+      isOpen: isDatePickerOpen,
+      onClose: handleCloseDatePicker,
+      value: rawValue(),
+      onChange: val => {
+        handleDateChange(val);
+      }
+    })]
+  });
+}
+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'
+  }
+});
+//# sourceMappingURL=InputDate.js.map

package/lib/module/Input/InputDate.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Color","DatePicker","Icon","Typography","useState","Pressable","StyleSheet","View","dateFormatter","jsx","_jsx","jsxs","_jsxs","InputDate","label","placeholder","placeholderDateEnd","datePickerProps","value","valueDateEnd","onSelectClick","onDatePickerClose","onDateChange","mode","language","props","isDatePickerOpen","setSelectOpen","dateValue","setDateValue","raw","setRaw","handleOpenSelect","handleCloseDatePicker","handleDateChange","val","date","startDate","endDate","formattedValue","options","format","formattedStartDate","formattedEndDate","rawValue","style","styles","gap4","children","variant","weight","color","gray","wrapper","pickerTrigger","hasValue","onPress","name","size","isOpen","onClose","onChange","create","gap","paddingVertical","paddingHorizontal","borderRadius","flexDirection","justifyContent","alignItems","borderWidth","borderColor","flex","primary"],"sourceRoot":"../../../src","sources":["Input/InputDate.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/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/lib/module/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/lib/module/Ui/ViewInsets.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import { StyleSheet, View } from 'react-native';
+import React, { useMemo } from 'react';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ViewInsets = ({
+  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 /*#__PURE__*/_jsx(View, {
+    style: [defaultStyle.container, style],
+    ...rest,
+    children: children
+  });
+};
+export default ViewInsets;
+//# sourceMappingURL=ViewInsets.js.map

package/lib/module/Ui/ViewInsets.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["StyleSheet","View","React","useMemo","useSafeAreaInsets","jsx","_jsx","ViewInsets","children","style","useTop","useBottom","useLeft","useRight","rest","insets","defaultStyle","create","container","paddingTop","top","paddingBottom","bottom","paddingLeft","left","paddingRight","right","flex"],"sourceRoot":"../../../src","sources":["Ui/ViewInsets.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,IAAI,QAAwB,cAAc;AAC/D,OAAOC,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,iBAAiB,QAAQ,gCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWnE,MAAMC,UAAqC,GAAGA,CAAC;EAC7CC,QAAQ;EACRC,KAAK;EACLC,MAAM,GAAG,KAAK;EACdC,SAAS,GAAG,KAAK;EACjBC,OAAO,GAAG,KAAK;EACfC,QAAQ,GAAG,KAAK;EAChB,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,MAAM,GAAGX,iBAAiB,CAAC,CAAC;EAElC,MAAMY,YAAY,GAAGb,OAAO,CAC1B,MACEH,UAAU,CAACiB,MAAM,CAAC;IAChBC,SAAS,EAAE;MACTC,UAAU,EAAET,MAAM,GAAGK,MAAM,CAACK,GAAG,GAAG,CAAC;MACnCC,aAAa,EAAEV,SAAS,GAAGI,MAAM,CAACO,MAAM,GAAG,CAAC;MAC5CC,WAAW,EAAEX,OAAO,GAAGG,MAAM,CAACS,IAAI,GAAG,CAAC;MACtCC,YAAY,EAAEZ,QAAQ,GAAGE,MAAM,CAACW,KAAK,GAAG,CAAC;MACzCC,IAAI,EAAE;IACR;EACF,CAAC,CAAC,EACJ,CAACZ,MAAM,EAAEL,MAAM,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,CAC/C,CAAC;EAED,oBACEP,IAAA,CAACL,IAAI;IAACQ,KAAK,EAAE,CAACO,YAAY,CAACE,SAAS,EAAET,KAAK,CAAE;IAAA,GAAKK,IAAI;IAAAN,QAAA,EACnDA;EAAQ,CACL,CAAC;AAEX,CAAC;AAED,eAAeD,UAAU","ignoreList":[]}