@herca/rn-kit 0.1.0

package/src/Calendar/Calendar.tsx

@@ -0,0 +1,382 @@
+import { useState } from 'react';
+import { View, StyleSheet, TouchableOpacity, Pressable } from 'react-native';
+import Color from '../Color/Color';
+import type {
+  CalendarTypes,
+  DayNameTuple,
+  MarkedDate,
+  WeekDay,
+} from './CalendarPropsType';
+import Icon from '../Icon';
+import Typography from '../Typography/Typography';
+import Dropdown from '../DropDown/DropDown';
+import {
+  generateMonthOptions,
+  generateYearOptions,
+} from '../DatePicker/helpers';
+
+const DAYS: DayNameTuple = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+const DEFAULT_SELECTED_BACKGROUND_COLOR = Color.primary[1000];
+const DEFAULT_SELECTED_TEXT_COLOR = Color.base.white100;
+const DEFAULT_DISABLED_BACKGROUND_COLOR = Color.base.white100;
+const DEFAULT_DISABLED_TEXT_COLOR = Color.gray[400];
+
+const Calendar = ({
+  markedDates = {},
+  disabledDays,
+  minDate = null,
+  maxDate = null,
+  mode = 'single',
+  onChange,
+  selectedBackgroundColor = DEFAULT_SELECTED_BACKGROUND_COLOR,
+  selectedTextColor = DEFAULT_SELECTED_TEXT_COLOR,
+  disabledBackgroundColor = DEFAULT_DISABLED_BACKGROUND_COLOR,
+  disabledTextColor = DEFAULT_DISABLED_TEXT_COLOR,
+  dayName = DAYS,
+}: CalendarTypes) => {
+  const [currentDate, setCurrentDate] = useState(new Date());
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEndDate] = useState<Date | null>(null);
+
+  const getDaysInMonth = (month: number, year: number) =>
+    new Date(year, month + 1, 0).getDate();
+
+  const formatDateKey = (date: Date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
+  const generateCalendarMatrix = () => {
+    const matrix = [];
+    const year = currentDate.getFullYear();
+    const month = currentDate.getMonth();
+    const firstDay = new Date(year, month, 1).getDay();
+    const maxDays = getDaysInMonth(month, year);
+    const prevMonth = month === 0 ? 11 : month - 1;
+    const prevYear = month === 0 ? year - 1 : year;
+    const prevMonthDays = getDaysInMonth(prevMonth, prevYear);
+
+    let row = [];
+
+    // prev month
+    for (let i = 0; i < firstDay; i++) {
+      const day = prevMonthDays - firstDay + i + 1;
+      row.push({
+        date: new Date(prevYear, prevMonth, day),
+        from: 'prev',
+      });
+    }
+
+    // current month
+    for (let day = 1; day <= maxDays; day++) {
+      row.push({
+        date: new Date(year, month, day),
+        from: 'current',
+      });
+      if (row.length === 7) {
+        matrix.push(row);
+        row = [];
+      }
+    }
+
+    // next month
+    let nextDay = 1;
+    const nextMonth = month === 11 ? 0 : month + 1;
+    const nextYear = month === 11 ? year + 1 : year;
+    if (row.length > 0) {
+      while (row.length < 7) {
+        row.push({
+          date: new Date(nextYear, nextMonth, nextDay),
+          from: 'next',
+        });
+        nextDay++;
+      }
+      matrix.push(row);
+    }
+
+    return matrix;
+  };
+
+  const normalizeDate = (date: Date) => {
+    const d = new Date(date);
+    d.setHours(0, 0, 0, 0);
+    return d;
+  };
+
+  const goToNextMonth = () => {
+    const newDate = new Date(currentDate);
+    newDate.setMonth(newDate.getMonth() + 1);
+    setCurrentDate(newDate);
+  };
+
+  const goToPrevMonth = () => {
+    const newDate = new Date(currentDate);
+    newDate.setMonth(newDate.getMonth() - 1);
+    setCurrentDate(newDate);
+  };
+
+  const handleOnSelectYearDropdown = (value: string | number) => {
+    const newDate = new Date(currentDate);
+    newDate.setFullYear(Number(value));
+    setCurrentDate(newDate);
+  };
+  const handleOnSelectMonthDropdown = (value: string | number) => {
+    const newDate = new Date(currentDate);
+    newDate.setMonth(value as number);
+    setCurrentDate(newDate);
+  };
+  const isWeekDay = (day: number): day is WeekDay => day >= 0 && day <= 6;
+
+  const isDisabledDate = (date: Date) => {
+    const dayOfWeek = date.getDay();
+    if (isWeekDay(dayOfWeek) && disabledDays?.[dayOfWeek]) return true;
+    if (minDate && date < minDate) return true;
+    if (maxDate && date > maxDate) return true;
+    return false;
+  };
+
+  const isSameDate = (a: Date | null, b: Date) =>
+    !!a && a.getTime() === b.getTime();
+
+  const isDateInRange = (date: Date) =>
+    startDate && endDate && date >= startDate && date <= endDate;
+
+  const isMarkDisableDate = (mark: MarkedDate | undefined) => !!mark?.disabled;
+
+  const setBackgroundDay = (date: Date, keyWeek: WeekDay) => {
+    const key = formatDateKey(date);
+    const mark = markedDates[key];
+    const inRange = isDateInRange(date);
+    const isStart = isSameDate(startDate, date);
+    const isEnd = isSameDate(endDate, date);
+    if (disabledDays && disabledDays[keyWeek]) {
+      return typeof disabledDays[keyWeek] === 'object' &&
+        disabledDays[keyWeek].hasOwnProperty('backgroundColor')
+        ? disabledDays[keyWeek].backgroundColor!
+        : disabledBackgroundColor;
+    }
+
+    if (isDisabledDate(date)) return disabledBackgroundColor;
+    if (
+      (mode === 'single' && isStart) ||
+      (mode === 'range' && (isStart || isEnd))
+    ) {
+      return selectedBackgroundColor;
+    }
+    if (mark?.selected) return mark.backgroundColor || selectedBackgroundColor;
+    if (inRange) return Color.primary[50];
+    return 'white';
+  };
+
+  const setTextColor = (date: Date, keyWeek: WeekDay) => {
+    const key = formatDateKey(date);
+    const mark = markedDates[key];
+    const isStart = isSameDate(startDate, date);
+    const isEnd = isSameDate(endDate, date);
+
+    if (disabledDays && disabledDays[keyWeek]) {
+      return typeof disabledDays[keyWeek] === 'object' &&
+        disabledDays[keyWeek].hasOwnProperty('textColor')
+        ? disabledDays[keyWeek].textColor!
+        : disabledTextColor;
+    }
+
+    if (isDisabledDate(date)) return disabledTextColor;
+    if (
+      (mode === 'single' && isStart) ||
+      (mode === 'range' && (isStart || isEnd))
+    ) {
+      return selectedTextColor;
+    }
+    if (mark?.selected) return mark?.textColor || selectedTextColor;
+    return Color.gray[600];
+  };
+
+  const handlePressDay = (date: Date) => {
+    const selected = normalizeDate(date);
+    if (mode === 'single') {
+      setStartDate(selected);
+      setEndDate(null);
+      onChange?.({ date: selected });
+    } else {
+      if (!startDate || (startDate && endDate)) {
+        setStartDate(selected);
+        setEndDate(null);
+        onChange?.({ startDate: selected, endDate: null });
+      } else if (selected >= startDate) {
+        setEndDate(selected);
+        onChange?.({ startDate, endDate: selected });
+      } else {
+        setStartDate(selected);
+        setEndDate(null);
+        onChange?.({ startDate: selected, endDate: null });
+      }
+    }
+  };
+
+  const calendarMatrix = generateCalendarMatrix();
+  const year = currentDate.getFullYear();
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <TouchableOpacity style={styles.buttonNav} onPress={goToPrevMonth}>
+          <Icon name="ArrowLeft" color={Color.base.white100} size={10} />
+        </TouchableOpacity>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Dropdown
+            options={generateMonthOptions()}
+            onSelect={handleOnSelectMonthDropdown}
+            renderButton={
+              <View style={styles.containerDropDown}>
+                <Icon name="ArrowDown" size={10} />
+                <Typography
+                  variant="t1"
+                  weight="semibold"
+                  color={Color.gray[900]}
+                >
+                  {currentDate.toLocaleString('default', { month: 'long' })}
+                </Typography>
+              </View>
+            }
+            maxHeight={300}
+          />
+
+          <Dropdown
+            options={generateYearOptions(2010, 2050, 0, 50)}
+            onSelect={handleOnSelectYearDropdown}
+            renderButton={
+              <View style={styles.containerDropDown}>
+                <Typography
+                  variant="t1"
+                  weight="semibold"
+                  color={Color.gray[900]}
+                >
+                  {year}
+                </Typography>
+                <Icon name="ArrowDown" size={10} />
+              </View>
+            }
+            maxHeight={200}
+          />
+        </View>
+        <TouchableOpacity style={styles.buttonNav} onPress={goToNextMonth}>
+          <Icon name="ArrowRight" color={Color.base.white100} size={10} />
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.weekRow}>
+        {dayName.map((day, index) => (
+          <Typography
+            key={index}
+            weight="medium"
+            variant="t2"
+            center
+            color={Color.gray[600]}
+            style={{ width: 32, textAlign: 'center' }}
+          >
+            {day}
+          </Typography>
+        ))}
+      </View>
+
+      {calendarMatrix.map((week, rowIndex) => (
+        <View key={rowIndex} style={styles.weekRow}>
+          {week.map((cell, colIndex) => {
+            const date = cell.date;
+            const day = date.getDate();
+            const key = formatDateKey(date);
+            const mark = markedDates[key];
+
+            const disabled = isMarkDisableDate(mark) || isDisabledDate(date);
+            const backgroundColor = setBackgroundDay(date, colIndex as WeekDay);
+            const textColor = setTextColor(date, colIndex as WeekDay);
+            return (
+              <Pressable
+                disabled={disabled}
+                key={key}
+                onPress={() => handlePressDay(date)}
+              >
+                <View style={[styles.dayCell, { backgroundColor }]}>
+                  <Typography variant="t2" weight="medium" color={textColor}>
+                    {day}
+                  </Typography>
+                </View>
+                <View style={styles.baseDot}>
+                  {mark?.dots && Array.isArray(mark.dots) && (
+                    <View style={styles.dotsContainer}>
+                      {mark.dots.map((dot: string, index: number) => {
+                        const dotColor = (mark.selected && dot) || dot || 'red';
+                        return (
+                          <View
+                            key={index}
+                            style={[styles.dot, { backgroundColor: dotColor }]}
+                          />
+                        );
+                      })}
+                    </View>
+                  )}
+                </View>
+              </Pressable>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 10,
+    height: 56,
+    gap: 8,
+  },
+  weekRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 4,
+  },
+  dayCell: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 32,
+    width: 32,
+    borderRadius: 50,
+    margin: 1,
+  },
+  buttonNav: {
+    backgroundColor: Color.gray[500],
+    borderRadius: 8,
+    padding: 8,
+  },
+  baseDot: {
+    height: 10,
+    marginBottom: 5,
+  },
+  dotsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    marginTop: 2,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    marginHorizontal: 1,
+  },
+  containerDropDown: {
+    flexDirection: 'row',
+    gap: 8,
+    alignItems: 'center',
+  },
+});
+
+export default Calendar;

package/src/Calendar/CalendarPropsType.tsx

@@ -0,0 +1,60 @@
+import type { GestureResponderEvent } from 'react-native';
+
+export type CalendarMatrix = number[][];
+
+export type DisabledDayStyle = {
+  backgroundColor?: string | undefined;
+  textColor?: string | undefined;
+};
+
+export type WeekDay = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+
+export type DateProps = Date | undefined | null;
+
+export type DateRangeProps = {
+  startDate?: DateProps;
+  endDate?: DateProps;
+  date?: DateProps;
+};
+
+export type CalendarDisabledProp = {
+  backgroundColor?: string | undefined;
+  textColor?: string | undefined;
+};
+
+export type MarkedDate = {
+  selected?: boolean;
+  backgroundColor?: string;
+  textColor?: string;
+  disabled?: CalendarDisabledProp | boolean;
+  dots?: string[];
+};
+
+export type DayNameTuple = [
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+  string,
+];
+
+export interface CalendarTypes {
+  mode?: 'single' | 'range';
+  markedDates?: {
+    [date: string]: MarkedDate;
+  };
+  minDate?: Date | null;
+  maxDate?: Date | null;
+  onPress?: (event: GestureResponderEvent) => void;
+  onChange?: (value: DateRangeProps) => void;
+  selectedBackgroundColor?: string;
+  selectedTextColor?: string;
+  disabledBackgroundColor?: string;
+  disabledTextColor?: string;
+  disabledDays?: {
+    [day in WeekDay]?: boolean | DisabledDayStyle;
+  };
+  dayName?: DayNameTuple;
+}

package/src/Calendar/README.md

@@ -0,0 +1,73 @@
+# 📆 Komponen Kalender Kustom (React Native)
+
+Komponen kalender ini dibuat menggunakan React Native dan memungkinkan pengguna untuk memilih tanggal tunggal maupun rentang tanggal, serta mendukung fitur penandaan dan pembatasan tanggal.
+
+---
+
+## 🚀 Fitur Utama
+
+- Tampilan kalender bulanan
+- Pilihan mode: tanggal tunggal (`single`) atau rentang tanggal (`range`)
+- Menandai tanggal dengan warna atau indikator
+- Menonaktifkan tanggal tertentu atau hari-hari tertentu (misalnya hanya aktif Senin–Jumat)
+- Navigasi antar bulan
+- Batas minimum dan maksimum tanggal yang bisa dipilih
+
+---
+
+## 🧩 Props (Properti)
+
+| Prop                      | Tipe Data                              | Nilai Contoh / Opsi                                   | Keterangan                                                |
+| ------------------------- | -------------------------------------- | ----------------------------------------------------- | --------------------------------------------------------- |
+| `mode`                    | `'single'` \| `'range'`                | `'single'` (default), `'range'`                       | Menentukan apakah memilih 1 tanggal atau rentang tanggal  |
+| `markedDates`             | `object`                               | `{ '2025-06-10': { marked: true, dotColor: 'red' } }` | Untuk menandai tanggal tertentu                           |
+| `disabledDates`           | `string[]`                             | `['2025-06-10', '2025-06-11']`                        | Tanggal yang tidak bisa dipilih                           |
+| `disabledDays`            | `{ [key: number]: boolean }`           | `{ 0: true, 6: true }`                                | Menonaktifkan hari dalam seminggu (0 = Minggu, 6 = Sabtu) |
+| `minDate`                 | `Date`                                 | `new Date(2025, 5, 1)`                                | Tanggal paling awal yang bisa dipilih                     |
+| `maxDate`                 | `Date`                                 | `new Date(2025, 5, 30)`                               | Tanggal paling akhir yang bisa dipilih                    |
+| `onChange`                | `(date: Date \| [Date, Date]) => void` | —                                                     | Fungsi callback saat tanggal dipilih                      |
+| `selectedBackgroundColor` | `string` (CSS color)                   | `'#0f62fe'`                                           | Warna latar belakang tanggal yang dipilih                 |
+| `selectedTextColor`       | `string` (CSS color)                   | `'#ffffff'`                                           | Warna teks pada tanggal yang dipilih                      |
+
+
+---
+
+## 📦 Instalasi
+
+Komponen ini bersifat kustom dan belum tersedia sebagai package npm. Salin file `Calendar.tsx` ke dalam proyek React Native-mu.
+
+### Kebutuhan:
+- React Native
+- TypeScript (opsional, tapi direkomendasikan)
+- `dayjs` sebagai pengganti `moment.js` jika diperlukan
+
+---
+
+## 🧠 Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import Calendar from './Calendar';
+
+export default function App() {
+  const handleDateChange = (date: Date | [Date, Date]) => {
+    console.log('Tanggal dipilih:', date);
+  };
+
+  return (
+    <Calendar
+      mode="range"
+      markedDates={{
+        '2025-06-10': { selected: true },
+        '2025-06-11': { marked: true, dotColor: 'red' },
+      }}
+      disabledDates={['2025-06-15']}
+      disabledDays={{ 0: true, 6: true }} // Nonaktifkan Minggu dan Sabtu
+      minDate={new Date(2025, 5, 1)} // 1 Juni 2025
+      maxDate={new Date(2025, 5, 30)} // 30 Juni 2025
+      onChange={handleDateChange}
+      selectedBackgroundColor="#0f62fe"
+      selectedTextColor="#fff"
+    />
+  );
+}

package/src/CheckBox/CheckBox.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react';
+import { Pressable, View, Text, StyleSheet } from 'react-native';
+import { Color, Icon } from '@herca/rn-kit'; // Pastikan Icon sudah tersedia
+
+interface CheckBoxProps {
+  checked?: boolean;
+  onChange?: (checked: boolean) => void;
+  label?: string | React.ReactNode;
+  disabled?: boolean;
+  renderLabel?: () => React.ReactNode;
+}
+
+const CheckBox: React.FC<CheckBoxProps> = ({
+  checked = false,
+  onChange,
+  label,
+  disabled = false,
+  renderLabel,
+}) => {
+  const [value, setValue] = useState<boolean>(false);
+
+  const handlePress = () => {
+    const newValue = !value;
+    setValue(newValue);
+    onChange?.(newValue);
+  };
+
+  useEffect(() => {
+    setValue(checked);
+  }, [checked]);
+
+  return (
+    <Pressable
+      onPress={() => !disabled && handlePress()}
+      style={styles.container}
+    >
+      <View
+        style={[
+          styles.checkBox,
+          value && styles.checked,
+          disabled && styles.disabled,
+        ]}
+      >
+        {value && <Icon name="Check" size={14} color={Color.base.white100} />}
+      </View>
+      {label && <Text style={styles.label}>{label}</Text>}
+      {renderLabel?.()}
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  checkBox: {
+    width: 20,
+    height: 20,
+    borderWidth: 2,
+    borderColor: Color.gray[500],
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    marginRight: 8,
+  },
+  checked: {
+    backgroundColor: Color.primary[1000],
+    borderColor: Color.primary[1000],
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  label: {
+    fontSize: 14,
+    color: '#333',
+  },
+});
+
+export default CheckBox;

package/src/CheckBox/CheckBoxList.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Typography, Color, CheckBox } from '@herca/rn-kit';
+
+interface CheckBoxListItem {
+  label: string;
+  value: string;
+}
+
+interface CheckBoxListProps {
+  items: CheckBoxListItem[];
+  selectedValues: string[];
+  onChange: (selected: string[]) => void;
+  direction?: 'vertical' | 'horizontal';
+}
+
+const CheckBoxList: React.FC<CheckBoxListProps> = ({
+  items,
+  selectedValues,
+  onChange,
+  direction = 'vertical',
+}) => {
+  const toggleValue = (value: string) => {
+    const newSelected = selectedValues.includes(value)
+      ? selectedValues.filter((v) => v !== value)
+      : [...selectedValues, value];
+
+    onChange(newSelected);
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        direction === 'horizontal' && styles.horizontal,
+      ]}
+    >
+      {items.map((item) => (
+        <CheckBox
+          key={item.value}
+          checked={selectedValues.includes(item.value)}
+          onChange={() => toggleValue(item.value)}
+          renderLabel={() => (
+            <Typography variant="t2" weight="medium" color={Color.gray[800]}>
+              {item.label}
+            </Typography>
+          )}
+        />
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 12,
+  },
+  horizontal: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+});
+
+export default CheckBoxList;

package/src/CheckBox/README_CHECKBOX.md

@@ -0,0 +1,46 @@
+# 📦 Komponen CheckBox
+
+Komponen `CheckBox` digunakan untuk menampilkan input kotak centang (checkbox) interaktif dalam aplikasi React Native Anda.
+
+---
+
+## ✅ Fitur Utama
+
+- Centang dan hilangkan centang (toggle)
+- Dukungan label teks atau komponen kustom
+- Dapat dinonaktifkan (`disabled`)
+- Dukungan ikon (dengan komponen `Icon`)
+
+---
+
+## 🚀 Cara Penggunaan
+
+```tsx
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import CheckBox from './CheckBox';
+
+export default function App() {
+  const [isChecked, setIsChecked] = useState(false);
+
+  return (
+    <View>
+      <CheckBox
+        checked={isChecked}
+        onChange={setIsChecked}
+        label="Saya menyetujui syarat dan ketentuan"
+      />
+    </View>
+  );
+}
+```
+
+##⚙️ Props
+
+| Prop          | Tipe                         | Deskripsi                                                    |                                                                |
+| ------------- | ---------------------------- | ------------------------------------------------------------ | -------------------------------------------------------------- |
+| `checked`     | `boolean`                    | Status awal checkbox (centang atau tidak). Default: `false`. |                                                                |
+| `onChange`    | `(checked: boolean) => void` | Fungsi callback saat status checkbox berubah.                |                                                                |
+| `label`       | \`string \\                  | React.ReactNode\`                                            | Label teks atau komponen yang ditampilkan di samping checkbox. |
+| `disabled`    | `boolean`                    | Jika `true`, checkbox tidak bisa ditekan. Default: `false`.  |                                                                |
+| `renderLabel` | `() => React.ReactNode`      | Alternatif render untuk label kustom selain `label`.         |                                                                |