@herca/rn-kit 0.1.0

package/src/DatePicker/YearPicker.tsx

@@ -0,0 +1,238 @@
+import { useState, useCallback, useMemo } 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';
+
+type PickerMode = 'single' | 'range' | 'multiple';
+
+interface YearPickerProps {
+  isOpen: boolean;
+  onClose?: () => void;
+  onChange?: (
+    value: number[] | { startDate: number | null; endDate: number | null }
+  ) => void;
+  mode?: PickerMode;
+}
+
+export default function YearPicker({
+  isOpen,
+  onClose,
+  onChange,
+  mode = 'single',
+}: YearPickerProps) {
+  const currentYear = new Date().getFullYear();
+  const pageSize = 9;
+  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 years = useMemo(() => {
+    const start = currentYear - 60;
+    const total = 121;
+    return Array.from({ length: total }, (_, i) => start + i);
+  }, [currentYear]);
+
+  const initialPageIndex = useMemo(() => {
+    const index = years.findIndex((y) => y === currentYear);
+    return Math.floor(index / pageSize);
+  }, [years, currentYear]);
+
+  const [pageIndex, setPageIndex] = useState(initialPageIndex);
+
+  const pageYears = useMemo(() => {
+    const start = pageIndex * pageSize;
+    return years.slice(start, start + pageSize);
+  }, [years, pageIndex]);
+
+  const handleSelectYear = useCallback(
+    (year: number) => {
+      if (mode === 'single') {
+        setSingleValue(year);
+      } else if (mode === 'range') {
+        if (
+          rangeValue.startDate === null ||
+          (rangeValue.startDate !== null && rangeValue.endDate !== null)
+        ) {
+          setRangeValue({ startDate: year, endDate: null });
+        } else if (year < rangeValue.startDate) {
+          setRangeValue({ startDate: year, endDate: rangeValue.startDate });
+        } else {
+          setRangeValue({ startDate: rangeValue.startDate, endDate: year });
+        }
+      } else if (mode === 'multiple') {
+        setMultipleValue((prev) =>
+          prev.includes(year) ? prev.filter((y) => y !== year) : [...prev, year]
+        );
+      }
+    },
+    [mode, rangeValue]
+  );
+
+  const isSelected = (year: number) => {
+    if (mode === 'single') return year === singleValue;
+    if (mode === 'range') {
+      const { startDate, endDate } = rangeValue;
+      return (
+        (startDate === year && endDate === null) ||
+        (startDate !== null &&
+          endDate !== null &&
+          year >= startDate &&
+          year <= endDate)
+      );
+    }
+    if (mode === 'multiple') return multipleValue.includes(year);
+    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}>
+        <TouchableOpacity
+          style={styles.buttonNav}
+          onPress={() => setPageIndex((prev) => Math.max(prev - 1, 0))}
+          disabled={pageIndex === 0}
+        >
+          <Icon name="ArrowLeft" color={Color.base.white100} size={10} />
+        </TouchableOpacity>
+        <Typography variant="t1" weight="semibold" color={Color.gray[900]}>
+          Pilih Tahun
+        </Typography>
+        <TouchableOpacity
+          style={styles.buttonNav}
+          onPress={() =>
+            setPageIndex((prev) =>
+              (prev + 1) * pageSize < years.length ? prev + 1 : prev
+            )
+          }
+          disabled={(pageIndex + 1) * pageSize >= years.length}
+        >
+          <Icon name="ArrowRight" color={Color.base.white100} size={10} />
+        </TouchableOpacity>
+      </View>
+
+      <View style={styles.container}>
+        <FlatList
+          data={pageYears}
+          numColumns={3}
+          keyExtractor={(item) => item.toString()}
+          contentContainerStyle={styles.yearList}
+          renderItem={({ item }) => {
+            const selected = isSelected(item);
+            return (
+              <View style={styles.yearItem}>
+                <TouchableOpacity
+                  onPress={() => handleSelectYear(item)}
+                  style={[
+                    styles.option,
+                    selected ? styles.optionSelected : null,
+                  ]}
+                >
+                  <Typography
+                    variant="p2"
+                    center
+                    weight="semibold"
+                    color={selected ? Color.gray[900] : Color.gray[700]}
+                  >
+                    {item}
+                  </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: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    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/helpers.tsx

@@ -0,0 +1,53 @@
+/**
+ * Menghasilkan array tahun dalam format label/value untuk dropdown.
+ * @param startYear Tahun awal (misal: 2020)
+ * @param endYear Tahun akhir (misal: 2030)
+ * @param pageIndex Indeks halaman
+ * @param pageSize Jumlah item per halaman
+ * @returns Array objek { label, value }
+ */
+export function generateYearOptions(
+  startYear: number,
+  endYear: number,
+  pageIndex: number,
+  pageSize: number
+): { label: string; value: string }[] {
+  const allYears = Array.from(
+    { length: endYear - startYear + 1 },
+    (_, i) => startYear + i
+  );
+  const paginatedYears = allYears.slice(
+    pageIndex * pageSize,
+    (pageIndex + 1) * pageSize
+  );
+  return paginatedYears.map((year) => ({
+    label: year.toString(),
+    value: year.toString(),
+  }));
+}
+
+/**
+ * Menghasilkan array bulan dalam format label/value untuk dropdown.
+ * @returns Array objek { label, value } dengan bulan 0–11
+ */
+export const generateMonthOptions = (): { label: string; value: number }[] => {
+  const monthNames = [
+    'Jan',
+    'Feb',
+    'Mar',
+    'Apr',
+    'Mei',
+    'Jun',
+    'Jul',
+    'Agu',
+    'Sep',
+    'Okt',
+    'Nov',
+    'Des',
+  ] as const;
+
+  return monthNames.map((name, index) => ({
+    label: name,
+    value: index,
+  }));
+};

package/src/Drawing/Drawing.tsx

@@ -0,0 +1,23 @@
+import { StyleSheet, View, Text } from 'react-native';
+
+export default function Drawing() {
+  return (
+    <View style={styles.container}>
+      <Text>Sedang di bangun</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  preview: {
+    width: 335,
+    height: 114,
+    backgroundColor: '#F8F8F8',
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 15,
+  },
+});

package/src/DropDown/DropDown.tsx

@@ -0,0 +1,136 @@
+import { useState, useRef } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  useWindowDimensions,
+  findNodeHandle,
+  UIManager,
+} from 'react-native';
+import Color from '../Color/Color';
+import type { DropDownProps } from './type';
+import type { ChipOptionProps } from '../Chip/type';
+
+const Dropdown = ({
+  options,
+  maxHeight = 200,
+  onSelect,
+  renderButton,
+}: DropDownProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [selected, setSelected] = useState<string | number>();
+  const [dropdownPosition, setDropdownPosition] = useState<'left' | 'right'>(
+    'left'
+  );
+
+  const buttonRef = useRef<View>(null);
+  const windowWidth = useWindowDimensions().width;
+
+  const handleToggle = () => {
+    if (!isOpen) {
+      const handle = findNodeHandle(buttonRef.current);
+      if (handle) {
+        UIManager.measureInWindow(handle, (x, _y, width, _height) => {
+          const middle = windowWidth / 2;
+          setDropdownPosition(x + width / 2 > middle ? 'right' : 'left');
+          setIsOpen(true);
+        });
+      }
+    } else {
+      setIsOpen(false);
+    }
+  };
+
+  const handlePressOption = (value: ChipOptionProps) => {
+    setSelected(value.value);
+    setIsOpen(false);
+    onSelect?.(value.value);
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity
+        ref={buttonRef}
+        style={styles.dropdownButton}
+        onPress={handleToggle}
+      >
+        {renderButton ? (
+          renderButton
+        ) : (
+          <Text>{selected || 'Select an option'}</Text>
+        )}
+      </TouchableOpacity>
+
+      {isOpen && (
+        <View
+          style={[
+            styles.dropdownList,
+            dropdownPosition === 'left' ? styles.left : styles.right,
+          ]}
+        >
+          <ScrollView nestedScrollEnabled style={{ maxHeight }}>
+            {options.map((item, index) => (
+              <TouchableOpacity
+                key={index}
+                onPress={() => handlePressOption(item)}
+                style={[
+                  styles.option,
+                  selected === item.value ? styles.optionSelected : null,
+                ]}
+              >
+                <Text>{item.label}</Text>
+              </TouchableOpacity>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+    </View>
+  );
+};
+
+export default Dropdown;
+
+const styles = StyleSheet.create({
+  container: {
+    // width: 200, // or flexible
+  },
+  dropdownButton: {
+    // borderWidth: 1,
+    // borderColor: '#ccc',
+    // padding: 12,
+    // borderRadius: 6,
+    // backgroundColor: '#fff',
+  },
+  dropdownList: {
+    position: 'absolute',
+    marginTop: 18,
+    padding: 8,
+    zIndex: 9999,
+    gap: 4,
+    borderWidth: 1,
+    borderColor: Color.gray[50],
+    borderRadius: 8,
+    backgroundColor: Color.base.white100,
+    width: 100,
+  },
+  option: {
+    gap: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderWidth: 1,
+    borderRadius: 8,
+    borderColor: Color.base.white100,
+  },
+  optionSelected: {
+    backgroundColor: Color.primary[50],
+    borderColor: Color.primary[300],
+  },
+  left: {
+    left: 0,
+  },
+  right: {
+    right: 0,
+  },
+});

package/src/DropDown/type.tsx

@@ -0,0 +1,9 @@
+import type { ChipOptionProps } from '../Chip/type';
+import React from 'react';
+
+export interface DropDownProps {
+  options: ChipOptionProps[];
+  maxHeight?: number;
+  onSelect?: (value: string | number) => void;
+  renderButton?: React.ReactNode;
+}

package/src/FileView/Image.tsx

@@ -0,0 +1,5 @@
+import { View } from 'react-native';
+
+export default function Image() {
+  return <View></View>;
+}

package/src/FileView/PdfView.tsx

@@ -0,0 +1,33 @@
+import { View, Dimensions, StyleSheet } from 'react-native';
+import Pdf from 'react-native-pdf';
+
+const PdfView = ({ source = null }) => {
+  if (!source) {
+    return <View></View>;
+  }
+  return (
+    <View style={styles.flex}>
+      <Pdf
+        source={source}
+        onLoadComplete={(numberOfPages) => {
+          console.log(`number of pages: ${numberOfPages}`);
+        }}
+        onPageChanged={(page) => {
+          console.log(`current page: ${page}`);
+        }}
+        onError={(error) => {
+          console.log(error);
+        }}
+        style={[styles.flex, { width: Dimensions.get('window').width }]}
+      />
+    </View>
+  );
+};
+
+export default PdfView;
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+});

package/src/Icon/Icon.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { type ViewStyle } from 'react-native';
+import User from './icons/User';
+import Eye from './icons/Eye';
+import XCircle from './icons/XCircle';
+import ArrowRight from './icons/ArrowRight';
+import Document from './icons/Document';
+import Calendar from './icons/Calendar';
+import ExlamationMark from './icons/ExlmationMark';
+import Downnload from './icons/Download';
+import StickyNote from './icons/StickyNote';
+import Pdf from './icons/Pdf';
+import RadioButton from './icons/RadioButton';
+import ArrowBackAlt from './icons/ArrowBackAlt';
+import ArrowForwardAlt from './icons/ArrowForwardAlt';
+import Check from './icons/Check';
+import Filter from './icons/Filter';
+import AirPlane from './icons/AirPlane';
+import Camera from './icons/Camera';
+import Image from './icons/Image';
+import type { IconNameProps, IconProps } from './type';
+import Times from './icons/Times';
+import ArrowDown from './icons/ArrowDown';
+import ArrowUp from './icons/ArrowUp';
+import Search from './icons/Search';
+import Home from './icons/Home';
+import ArrowLeft from './icons/ArrowLeft';
+import EyeOpen from './icons/EyeOpen';
+
+const icons: Record<
+  IconNameProps,
+  React.FC<{ size: number; color: string; style?: ViewStyle }>
+> = {
+  'Home': Home,
+  'Search': Search,
+  'User': User,
+  'Eye': Eye,
+  'EyeOpen': EyeOpen,
+  'ArrowRight': ArrowRight,
+  'ArrowLeft': ArrowLeft,
+  'Document': Document,
+  'Calendar': Calendar,
+  'ExlamationMark': ExlamationMark,
+  'Download': Downnload,
+  'x-circle': XCircle,
+  'StickyNote': StickyNote,
+  'RadioButton': RadioButton,
+  'Pdf': Pdf,
+  'ArrowBackAlt': ArrowBackAlt,
+  'ArrowForwardAlt': ArrowForwardAlt,
+  'Check': Check,
+  'Filter': Filter,
+  'AirPlane': AirPlane,
+  'Camera': Camera,
+  'Image': Image,
+  'Times': Times,
+  'ArrowDown': ArrowDown,
+  'ArrowUp': ArrowUp,
+};
+
+const Icon: React.FC<IconProps> = ({
+  name,
+  size = 24,
+  color = '#000',
+  style,
+}) => {
+  const SelectedIcon = icons[name];
+
+  if (!SelectedIcon) {
+    return null;
+  }
+
+  return <SelectedIcon size={size} color={color} style={style} />;
+};
+
+export default Icon;

package/src/Icon/icons/AirPlane.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const AirPlane: React.FC<Props> = ({ size = 24, color = '#909090', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 13 13" fill="none" style={style}>
+    <Path
+      d="M11.1401 0.891335C11.6288 0.989335 12.0108 1.37133 12.1088 1.86C12.1787 2.21014 12.1687 2.57155 12.0795 2.91728C11.9903 3.26301 11.8241 3.58413 11.5934 3.85667L9.75943 6.02467L11.0554 10.7787C11.0941 10.9204 11.0946 11.0699 11.0569 11.2119C11.0192 11.3539 10.9447 11.4834 10.8408 11.5873L9.97276 12.4553C9.89905 12.529 9.80925 12.5846 9.71042 12.6176C9.61159 12.6507 9.50643 12.6604 9.40322 12.6459C9.30002 12.6314 9.20158 12.5932 9.11566 12.5342C9.02974 12.4752 8.95869 12.3971 8.90809 12.306L6.91276 8.71467L4.74076 10.218V10.7427C4.74076 10.9633 4.65276 11.176 4.49676 11.332L3.37476 12.4533C3.2936 12.5346 3.19301 12.5937 3.08254 12.6252C2.97207 12.6566 2.8554 12.6592 2.74363 12.6328C2.63186 12.6064 2.52869 12.5519 2.44394 12.4744C2.35919 12.3969 2.29567 12.299 2.25943 12.19L1.89676 11.1027L0.809429 10.74C0.70045 10.7038 0.602553 10.6402 0.525046 10.5555C0.447539 10.4707 0.392997 10.3676 0.366607 10.2558C0.340217 10.144 0.342855 10.0274 0.374271 9.91689C0.405687 9.80642 0.464836 9.70583 0.546095 9.62467L1.66809 8.50267C1.74549 8.42529 1.83737 8.36392 1.93849 8.32205C2.03961 8.28019 2.14799 8.25865 2.25743 8.25867H2.78209L4.28543 6.08667L0.694095 4.09133C0.602985 4.04074 0.524862 3.96969 0.465878 3.88377C0.406895 3.79785 0.36866 3.69941 0.354184 3.59621C0.339708 3.493 0.349386 3.38784 0.382456 3.28901C0.415527 3.19018 0.471087 3.10038 0.544762 3.02667L1.41276 2.15867C1.51666 2.05477 1.64619 1.98019 1.7882 1.94249C1.93022 1.90479 2.07968 1.90531 2.22143 1.944L6.97476 3.24L9.14343 1.406C9.41597 1.17532 9.73708 1.00917 10.0828 0.919939C10.4285 0.830708 10.79 0.821368 11.1401 0.891335Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default AirPlane;

package/src/Icon/icons/ArrowBackAlt.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ArrowBackAlt: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 20 9" fill="none" style={style}>
+    <Path
+      d="M19.23 8.9729C19.153 8.9909 19.075 9 18.999 9C18.546 9 18.1361 8.68998 18.0271 8.22998C17.1591 4.56198 13.9071 2 10.1201 2C7.21912 2 4.57692 3.565 3.13892 6H5.00488C5.55788 6 6.00488 6.448 6.00488 7C6.00488 7.552 5.55788 8 5.00488 8H1C0.447 8 0 7.552 0 7V3C0 2.448 0.447 2 1 2C1.553 2 2 2.448 2 3V4.09009C3.876 1.57009 6.87212 0 10.1201 0C14.8391 0 18.8909 3.19502 19.9729 7.77002C20.1009 8.30702 19.768 8.8459 19.23 8.9729Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ArrowBackAlt;

package/src/Icon/icons/ArrowDown.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ArrowDown: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 10 6" fill="none" style={style}>
+    <Path
+      d="M4.99893 5.49999C4.7856 5.49999 4.57224 5.41835 4.40974 5.25585L1.07641 1.92252C0.750573 1.59668 0.750573 1.06996 1.07641 0.744131C1.40224 0.418298 1.92896 0.418298 2.25479 0.744131L4.99893 3.48827L7.74307 0.744131C8.06891 0.418298 8.59562 0.418298 8.92146 0.744131C9.24729 1.06996 9.24729 1.59668 8.92146 1.92252L5.58812 5.25585C5.42562 5.41835 5.21227 5.49999 4.99893 5.49999Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ArrowDown;

package/src/Icon/icons/ArrowForwardAlt.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ArrowForwardAlt: React.FC<Props> = ({
+  size = 24,
+  color = '#000',
+  style,
+}) => (
+  <Svg width={size} height={size} viewBox="0 0 20 9" fill="none" style={style}>
+    <Path
+      d="M20.0003 3.00098V7.00098C20.0003 7.55298 19.5533 8.00098 19.0003 8.00098H14.9954C14.4424 8.00098 13.9954 7.55298 13.9954 7.00098C13.9954 6.44898 14.4424 6.00098 14.9954 6.00098H16.8614C15.4234 3.56598 12.7812 2.00098 9.88017 2.00098C6.09317 2.00098 2.84119 4.56296 1.97319 8.23096C1.86519 8.69096 1.45427 9.00098 1.00127 9.00098C0.925266 9.00098 0.848309 8.99288 0.770309 8.97388C0.233309 8.84688 -0.0996342 8.30802 0.0283658 7.77002C1.11037 3.19502 5.16239 0 9.88139 0C13.1294 0 16.1253 1.57009 18.0013 4.09009V3.00098C18.0013 2.44898 18.4483 2.00098 19.0013 2.00098C19.5543 2.00098 20.0003 2.44898 20.0003 3.00098Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ArrowForwardAlt;

package/src/Icon/icons/ArrowLeft.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+
+interface Props {
+  size?: number;
+  color?: string;
+  style?: object;
+}
+
+const ArrowLeft: React.FC<Props> = ({ size = 24, color = '#000', style }) => (
+  <Svg width={size} height={size} viewBox="0 0 6 10" fill="none" style={style}>
+    <Path
+      d="M4.6669 9.16658C4.45357 9.16658 4.24021 9.08494 4.07771 8.92243L0.744375 5.5891C0.418542 5.26327 0.418542 4.73655 0.744375 4.41072L4.07771 1.07738C4.40354 0.751549 4.93026 0.751549 5.25609 1.07738C5.58193 1.40322 5.58193 1.92993 5.25609 2.25577L2.51195 4.99991L5.25609 7.74405C5.58193 8.06988 5.58193 8.5966 5.25609 8.92243C5.09359 9.08494 4.88023 9.16658 4.6669 9.16658Z"
+      fill={color}
+    />
+  </Svg>
+);
+
+export default ArrowLeft;