@herca/rn-kit 0.1.0

package/src/Color/README.md

@@ -0,0 +1,54 @@
+# 📦 Konstanta: Color
+Konstanta Color berisi daftar token warna yang digunakan untuk styling antarmuka aplikasi menggunakan React Native. Warna-warna ini disusun berdasarkan tema dan gradasi, cocok digunakan bersama desain sistem seperti Design Token.
+
+## 🎨 Struktur Warna
+✅ Base
+Warna dasar utama:
+
+white100: putih solid
+
+white60: putih transparan 60%
+
+black100: hitam solid
+
+black60: hitam transparan 60%
+
+### ⚪ Gray (abu-abu)
+Gradasi abu-abu dari terang (gray.50) hingga gelap (gray.950), cocok untuk teks, latar, border, dsb.
+
+### 🔵 Primary
+Gradasi warna utama (biru), digunakan untuk tombol, highlight, atau elemen penting lainnya.
+
+### 🟠 Warning
+Warna peringatan, digunakan untuk menandai hal-hal seperti alert, notifikasi kuning, dll.
+
+### 🔴 Danger
+Warna untuk kondisi berbahaya atau error (merah).
+
+### 🟢 Success
+Digunakan untuk kondisi berhasil atau sukses (hijau).
+
+### 🔷 Info
+Warna tambahan untuk informasi, notifikasi, atau status sekunder.
+
+### 🟧 Orange
+Warna oranye, alternatif dari primary/warning.
+
+### 🟣 Purple
+Warna ungu, bisa digunakan untuk status spesial atau branding.
+
+🧱 Divider
+divider.25: Warna pembatas antar elemen UI.
+
+📴 Disabled
+disabled.25: Warna untuk elemen non-aktif.
+
+## Cara menggunakan 
+
+```tsx
+import Color from '@herca/rn-kit';
+
+<View style={{ backgroundColor: Color.primary[500] }} />
+<Text style={{ color: Color.gray[900] }}>Teks</Text>
+
+```

package/src/Color/type.tsx

@@ -0,0 +1,9 @@
+export type ColorVariantType =
+  | 'default'
+  | 'success'
+  | 'danger'
+  | 'primary'
+  | 'warning'
+  | 'info'
+  | 'purple'
+  | 'orange';

package/src/DatePicker/DatePicker.tsx

@@ -0,0 +1,78 @@
+import { useCallback, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import BottomSheet from '../BottomSheet/BottomSheet';
+import Calendar from '../Calendar/Calendar';
+import Button from '../Button/Button';
+import { type DateRangeProps } from '../Calendar/CalendarPropsType';
+interface DatePickerProps {
+  onChange: (selectedDate: DateRangeProps) => void;
+  isOpen: boolean;
+  onClose: () => void;
+  [key: string]: any;
+}
+
+export default function DatePicker({
+  onChange,
+  isOpen,
+  onClose,
+  ...calendarProps
+}: DatePickerProps) {
+  const [valueDatepicker, setValueDatepicker] = useState<DateRangeProps>({
+    startDate: null,
+    endDate: null,
+    date: null,
+  });
+
+  const handleOnChangeCalendar = useCallback((value: DateRangeProps) => {
+    setValueDatepicker(value);
+  }, []);
+
+  const handleOnPressSubmitButton = useCallback(() => {
+    onChange?.(valueDatepicker);
+    onClose?.();
+  }, [valueDatepicker, onChange, onClose]);
+
+  const handleOnPressCancelButton = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+
+  return (
+    <View>
+      <BottomSheet
+        isOpen={isOpen}
+        onClose={onClose}
+        footer={
+          <View style={styles.footerContainer}>
+            <View style={styles.buttonWrapper}>
+              <Button
+                variant="tertiary"
+                title="Batalkan"
+                color="primary"
+                onPress={handleOnPressCancelButton}
+              />
+            </View>
+            <View style={styles.buttonWrapper}>
+              <Button
+                title="Terapkan"
+                color="primary"
+                onPress={handleOnPressSubmitButton}
+              />
+            </View>
+          </View>
+        }
+      >
+        <Calendar onChange={handleOnChangeCalendar} {...calendarProps} />
+      </BottomSheet>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  footerContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  buttonWrapper: {
+    flex: 1,
+  },
+});

package/src/DatePicker/MonthPicker.tsx

@@ -0,0 +1,204 @@
+import { useState, useCallback } 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';
+
+type PickerMode = 'single' | 'range' | 'multiple';
+
+interface MonthPickerProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  onChange?: (
+    value: number[] | { startDate: number | null; endDate: number | null }
+  ) => void;
+  mode?: PickerMode;
+}
+
+export default function MonthPicker({
+  isOpen,
+  onClose,
+  onChange,
+  mode = 'single',
+}: MonthPickerProps) {
+  const [rangeValue, setRangeValue] = useState<{
+    startDate: number | null;
+    endDate: number | null;
+  }>({ startDate: null, endDate: null });
+  const [multipleValue, setMultipleValue] = useState<number[]>([]);
+  const [singleValue, setSingleValue] = useState<number | null>(null);
+
+  const handleSelectMonth = useCallback(
+    (month: number) => {
+      if (mode === 'single') {
+        setSingleValue(month);
+      } else if (mode === 'range') {
+        if (
+          rangeValue.startDate === null ||
+          (rangeValue.startDate !== null && rangeValue.endDate !== null)
+        ) {
+          setRangeValue({ startDate: month, endDate: null });
+        } else if (month < rangeValue.startDate) {
+          setRangeValue({ startDate: month, endDate: rangeValue.startDate });
+        } else {
+          setRangeValue({ startDate: rangeValue.startDate, endDate: month });
+        }
+      } else if (mode === 'multiple') {
+        setMultipleValue((prev) =>
+          prev.includes(month)
+            ? prev.filter((m) => m !== month)
+            : [...prev, month]
+        );
+      }
+    },
+    [mode, rangeValue]
+  );
+
+  const isSelected = (month: number) => {
+    if (mode === 'single') return month === singleValue;
+    if (mode === 'range') {
+      const { startDate, endDate } = rangeValue;
+      return (
+        (startDate === month && endDate === null) ||
+        (startDate !== null &&
+          endDate !== null &&
+          month >= startDate &&
+          month <= endDate)
+      );
+    }
+    if (mode === 'multiple') return multipleValue.includes(month);
+    return false;
+  };
+
+  const handleSubmit = () => {
+    if (mode === 'single') {
+      onChange?.(singleValue !== null ? [singleValue] : []);
+    } else if (mode === 'range') {
+      onChange?.(rangeValue);
+    } else {
+      onChange?.(multipleValue);
+    }
+    onClose?.();
+  };
+
+  return (
+    <BottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      footer={
+        <View style={styles.containerBottomSheetFooter}>
+          <View style={styles.flex1}>
+            <Button
+              title="Batal"
+              variant="tertiary"
+              size="medium"
+              color="primary"
+              onPress={onClose}
+            />
+          </View>
+          <View style={styles.flex1}>
+            <Button
+              title="Pilih"
+              color="primary"
+              size="medium"
+              onPress={handleSubmit}
+            />
+          </View>
+        </View>
+      }
+    >
+      <View style={styles.header}>
+        <Typography
+          variant="t1"
+          weight="semibold"
+          color={Color.gray[900]}
+          center
+        >
+          Pilih Bulan
+        </Typography>
+      </View>
+
+      <View style={styles.container}>
+        <FlatList
+          data={generateMonthOptions()}
+          numColumns={3}
+          keyExtractor={(item) => item.value.toString()}
+          contentContainerStyle={styles.yearList}
+          renderItem={({ item }) => {
+            const selected = isSelected(item.value);
+            return (
+              <View style={styles.yearItem}>
+                <TouchableOpacity
+                  onPress={() => handleSelectMonth(item.value)}
+                  style={[
+                    styles.option,
+                    selected ? styles.optionSelected : null,
+                  ]}
+                >
+                  <Typography
+                    variant="p2"
+                    center
+                    weight="semibold"
+                    color={selected ? Color.gray[900] : Color.gray[700]}
+                  >
+                    {item.label}
+                  </Typography>
+                </TouchableOpacity>
+              </View>
+            );
+          }}
+        />
+      </View>
+    </BottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 10,
+  },
+  yearList: {
+    paddingBottom: 12,
+  },
+  yearItem: {
+    width: '30%',
+    margin: '1.66%',
+  },
+  pagination: {
+    marginTop: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 8,
+  },
+  header: {
+    marginBottom: 10,
+  },
+  buttonNav: {
+    backgroundColor: Color.gray[500],
+    borderRadius: 8,
+    padding: 8,
+  },
+  containerBottomSheetFooter: {
+    flexDirection: 'row',
+    flex: 1,
+    gap: 12,
+  },
+  flex1: {
+    flex: 1,
+  },
+  option: {
+    gap: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderWidth: 1,
+    borderRadius: 8,
+    borderColor: Color.base.white100,
+  },
+  optionSelected: {
+    backgroundColor: Color.primary[50],
+    borderColor: Color.primary[300],
+  },
+});

package/src/DatePicker/README.md

@@ -0,0 +1,51 @@
+# 📅 DatePicker Component
+
+Komponen `DatePicker` adalah antarmuka pemilih tanggal yang dibungkus dalam sebuah **BottomSheet**, dan menggunakan komponen `Calendar` di dalamnya. Pengguna dapat memilih tanggal (tunggal atau rentang), lalu mengonfirmasi atau membatalkan pemilihan dengan tombol aksi.
+
+Komponen ini extend dari Calendar, jadi kalian bisa menggunakan semua props yang ada di Calendar [Calendar](../Calendar/README.md)
+
+---
+
+## ✨ Fitur
+
+- Pilih tanggal dalam mode **single** atau **range**
+- Tersedia dalam tampilan **BottomSheet**
+- Terdapat tombol **Batalkan** dan **Terapkan**
+- Terintegrasi dengan `Calendar` dan `Button` custom
+
+---
+
+## ⚙️ Props
+
+| Prop        | Tipe Data                       | Keterangan |
+|-------------|----------------------------------|------------|
+| `mode`      | `'single'` \| `'range'`         | Menentukan mode pemilihan tanggal |
+| `onChange`  | `(value: Date \| [Date, Date]) => void` | Callback saat tanggal dipilih dan tombol **Terapkan** ditekan |
+| `onClose`   | `() => void`                    | Callback saat BottomSheet ditutup |
+| `isOpen`    | `boolean`                       | Menentukan apakah BottomSheet sedang terbuka |
+| `hasError`  | `boolean`                       | (Opsional) Menandai jika terjadi kesalahan validasi |
+
+---
+
+## 🧪 Contoh Penggunaan
+
+```jsx
+import DatePicker from "./components/DatePicker";
+
+function App() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedDate, setSelectedDate] = useState(null);
+
+  return (
+    <>
+      <Button title="Pilih Tanggal" onPress={() => setIsOpen(true)} />
+
+      <DatePicker
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        mode="range"
+        onChange={(date) => setSelectedDate(date)}
+      />
+    </>
+  );
+}

package/src/DatePicker/TimePicker.tsx

@@ -0,0 +1,234 @@
+import React, { useRef, useState, useEffect } from 'react';
+import {
+  View,
+  ScrollView,
+  StyleSheet,
+  Text,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  Dimensions,
+} from 'react-native';
+import BottomSheet from '../BottomSheet/BottomSheet';
+import Button from '../Button/Button';
+import Typography from '../Typography/Typography';
+import Color from '../Color/Color';
+
+const ITEM_HEIGHT = 40;
+const SCREEN_WIDTH = Dimensions.get('window').width;
+const VISIBLE_ITEMS = 5;
+const MIDDLE_INDEX = Math.floor(VISIBLE_ITEMS / 2);
+
+interface TimePickerProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  onChange?: (value: { hour: number; minute: number }) => void;
+}
+
+const generateItems = (max: number) => Array.from({ length: max }, (_, i) => i);
+
+export default function TimePickerWheel({
+  isOpen,
+  onClose,
+  onChange,
+}: TimePickerProps) {
+  const [selectedHour, setSelectedHour] = useState(0);
+  const [selectedMinute, setSelectedMinute] = useState(0);
+
+  const hourRef = useRef<ScrollView>(null);
+  const minuteRef = useRef<ScrollView>(null);
+
+  const padItems = (items: number[], padCount: number) => {
+    return [
+      ...items.slice(-padCount).map((i) => i - items.length),
+      ...items,
+      ...items.slice(0, padCount).map((i) => i + items.length),
+    ];
+  };
+
+  const hours = padItems(generateItems(24), MIDDLE_INDEX);
+  const minutes = padItems(generateItems(60), MIDDLE_INDEX);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => {
+        scrollToIndex(hourRef, selectedHour + MIDDLE_INDEX);
+        scrollToIndex(minuteRef, selectedMinute + MIDDLE_INDEX);
+      }, 100);
+    }
+  }, [isOpen, selectedMinute, selectedHour]);
+
+  const scrollToIndex = (
+    ref: React.RefObject<ScrollView | null>,
+    index: number
+  ) => {
+    ref.current?.scrollTo({ y: index * ITEM_HEIGHT, animated: true });
+  };
+
+  const handleScrollEnd = (
+    event: NativeSyntheticEvent<NativeScrollEvent>,
+    type: 'hour' | 'minute'
+  ) => {
+    const offsetY = event.nativeEvent.contentOffset.y;
+    const index = Math.round(offsetY / ITEM_HEIGHT);
+    if (type === 'hour') {
+      const realIndex = (((index - MIDDLE_INDEX) % 24) + 24) % 24;
+      setSelectedHour(realIndex);
+      setTimeout(() => scrollToIndex(hourRef, realIndex + MIDDLE_INDEX), 50);
+    } else {
+      const realIndex = (((index - MIDDLE_INDEX) % 60) + 60) % 60;
+      setSelectedMinute(realIndex);
+      setTimeout(() => scrollToIndex(minuteRef, realIndex + MIDDLE_INDEX), 50);
+    }
+  };
+
+  const handleSubmit = () => {
+    onChange?.({ hour: selectedHour, minute: selectedMinute });
+    onClose?.();
+  };
+
+  const renderItem = (value: number, type: 'hour' | 'minute') => {
+    const isSelected =
+      type === 'hour'
+        ? ((value % 24) + 24) % 24 === selectedHour
+        : (value % 60) + (60 % 60) === selectedMinute;
+    const displayValue =
+      type === 'hour'
+        ? (((value % 24) + 24) % 24).toString().padStart(2, '0')
+        : (((value % 60) + 60) % 60).toString().padStart(2, '0');
+
+    return (
+      <View key={`${type}-${value}`} style={styles.item}>
+        <Text style={[styles.itemText, isSelected && styles.selectedItemText]}>
+          {displayValue}
+        </Text>
+      </View>
+    );
+  };
+
+  return (
+    <BottomSheet
+      isOpen={isOpen}
+      onClose={onClose}
+      footer={
+        <View style={styles.footer}>
+          <View style={styles.flex1}>
+            <Button
+              title="Batal"
+              variant="tertiary"
+              onPress={onClose}
+              color="primary"
+              size="medium"
+            />
+          </View>
+          <View style={styles.flex1}>
+            <Button
+              title="Pilih"
+              onPress={handleSubmit}
+              color="primary"
+              size="medium"
+            />
+          </View>
+        </View>
+      }
+    >
+      <Typography
+        variant="t1"
+        weight="semibold"
+        color={Color.gray[900]}
+        center
+        style={{ marginBottom: 16 }}
+      >
+        Pilih Waktu
+      </Typography>
+
+      <View style={styles.container}>
+        {/* Highlight overlay */}
+        <View style={styles.highlightOverlay} pointerEvents="none">
+          <View style={styles.highlight} />
+        </View>
+        <View style={styles.scrollContainer}>
+          <View style={styles.pickerColumn}>
+            <ScrollView
+              ref={hourRef}
+              showsVerticalScrollIndicator={false}
+              snapToInterval={ITEM_HEIGHT}
+              decelerationRate="fast"
+              onMomentumScrollEnd={(e) => handleScrollEnd(e, 'hour')}
+              contentContainerStyle={styles.scrollContent}
+            >
+              {hours.map((h) => renderItem(h, 'hour'))}
+            </ScrollView>
+          </View>
+
+          <View style={styles.pickerColumn}>
+            <ScrollView
+              ref={minuteRef}
+              showsVerticalScrollIndicator={false}
+              snapToInterval={ITEM_HEIGHT}
+              decelerationRate="fast"
+              onMomentumScrollEnd={(e) => handleScrollEnd(e, 'minute')}
+              contentContainerStyle={styles.scrollContent}
+            >
+              {minutes.map((m) => renderItem(m, 'minute'))}
+            </ScrollView>
+          </View>
+        </View>
+      </View>
+    </BottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+    height: ITEM_HEIGHT * VISIBLE_ITEMS,
+    marginBottom: 16,
+  },
+  footer: {
+    flexDirection: 'row',
+    gap: 12,
+  },
+  flex1: {
+    flex: 1,
+  },
+  scrollContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  scrollContent: {
+    paddingVertical: ITEM_HEIGHT * MIDDLE_INDEX,
+  },
+  pickerColumn: {
+    width: SCREEN_WIDTH / 10.5,
+    height: ITEM_HEIGHT * VISIBLE_ITEMS,
+    overflow: 'hidden',
+  },
+  item: {
+    height: ITEM_HEIGHT,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  itemText: {
+    fontSize: 18,
+    color: Color.gray[400],
+  },
+  selectedItemText: {
+    color: Color.gray[900],
+    fontWeight: 'bold',
+    fontSize: 22,
+  },
+  highlightOverlay: {
+    position: 'absolute',
+    zIndex: -1,
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'center',
+  },
+  highlight: {
+    height: ITEM_HEIGHT,
+    zIndex: -1,
+    backgroundColor: Color.primary[50],
+  },
+});