@herca/rn-kit 0.1.0

package/src/RadioButton/RadioButton.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useState } from 'react';
+import { View, StyleSheet, Pressable } from 'react-native';
+import { Typography, Color } from '@herca/rn-kit';
+
+interface RadioButtonItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+interface RadioButtonProps {
+  items: RadioButtonItem[];
+  selectedValue: string | null;
+  onChange?: (value: string) => void;
+  direction?: 'vertical' | 'horizontal';
+}
+
+const RadioButton: React.FC<RadioButtonProps> = ({
+  items,
+  selectedValue,
+  onChange,
+  direction = 'vertical',
+}) => {
+  const [internalValue, setInternalValue] = useState<string | null>(
+    selectedValue
+  );
+
+  useEffect(() => {
+    // If no value is selected, set the first non-disabled item as selected
+    if (selectedValue === null) {
+      const firstValidItem = items.find((item) => !item.disabled);
+      if (firstValidItem) {
+        setInternalValue(firstValidItem.value);
+        onChange?.(firstValidItem.value);
+      }
+    } else {
+      setInternalValue(selectedValue);
+    }
+  }, [selectedValue, items, onChange]);
+
+  const handleOnPress = (item: RadioButtonItem) => {
+    if (!item.disabled) {
+      setInternalValue(item.value);
+      onChange?.(item.value);
+    }
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        direction === 'horizontal' && styles.horizontal,
+      ]}
+    >
+      {items.map((item) => {
+        const isChecked = internalValue === item.value;
+        return (
+          <View key={item.value} style={styles.item}>
+            <Pressable
+              onPress={() => handleOnPress(item)}
+              style={[styles.radioContainer, item.disabled && styles.disabled]}
+            >
+              <View
+                style={[styles.outerCircle, isChecked && styles.checkedOuter]}
+              >
+                {isChecked && <View style={styles.innerCircle} />}
+              </View>
+              <Typography variant="t2" weight="medium" color={Color.gray[800]}>
+                {item.label}
+              </Typography>
+            </Pressable>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 8,
+  },
+  horizontal: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginRight: 16,
+  },
+  radioContainer: {
+    gap: 8,
+    flexDirection: 'row',
+  },
+  outerCircle: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    borderWidth: 2,
+    borderColor: Color.gray[500] || '#ccc',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  checkedOuter: {
+    borderColor: Color.primary[1000] || '#007bff',
+  },
+  innerCircle: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    backgroundColor: Color.primary[1000] || '#007bff',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+});
+
+export default RadioButton;

package/src/Select/README.md

@@ -0,0 +1,78 @@
+# 📦 Select Component
+
+Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan dukungan pencarian, multiple select, custom item renderer, dan pull-to-refresh.
+
+## 🚀 Fitur
+
+- ✅ Bottom Sheet
+- 🔍 Pencarian dengan debounce
+- 🔁 Pull-to-refresh support
+- 🔘 Multiple/Single select
+- 🎨 Custom render item
+- ⚠️ Validasi jika required
+- 🔄 Loading state
+
+## 📦 Props
+
+| Prop         | Tipe                                            | Default       | Keterangan |
+|--------------|--------------------------------------------------|---------------|------------|
+| `isOpen`     | `boolean`                                       | `false`       | Menentukan apakah bottom sheet terbuka |
+| `data`       | `ChipOptionProps[]`                             | -             | Data pilihan untuk ditampilkan |
+| `multiple`   | `boolean`                                       | `false`       | Mengizinkan multiple selection |
+| `renderItem` | `(item, selected, disabled) => React.ReactNode` | -             | Kustom tampilan item |
+| `onSubmit`   | `(selected: ChipSelectedProps) => void`         | -             | Callback saat tombol submit ditekan |
+| `onClose`    | `(val: boolean) => void`                        | -             | Callback saat bottom sheet ditutup |
+| `onSearch`   | `(val: string) => void`                         | -             | Callback saat input pencarian berubah |
+| `required`   | `boolean`                                       | `false`       | Jika `true`, validasi input saat submit |
+| `loading`    | `boolean`                                       | `false`       | Menampilkan loading saat data di-fetch |
+| `delaySearch`| `number`                                        | `300`         | Delay pencarian dalam milidetik |
+| `height`     | `BottomSheetHeighProps`                         | -             | Ukuran tinggi BottomSheet |
+| `onRefresh`  | `() => void`                                    | -             | Callback saat pull-to-refresh dilakukan |
+
+## 📌 Contoh Penggunaan
+
+```tsx
+import Select from './components/Select/Select';
+
+const MyScreen = () => {
+  const [open, setOpen] = useState(false);
+
+  const data = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+  ];
+
+  const handleSubmit = (selected) => {
+    console.log('Selected:', selected);
+  };
+
+  return (
+    <>
+      <Button title="Pilih Data" onPress={() => setOpen(true)} />
+      <Select
+        isOpen={open}
+        data={data}
+        multiple={true}
+        onClose={() => setOpen(false)}
+        onSubmit={handleSubmit}
+        onSearch={(val) => console.log('Search:', val)}
+        onRefresh={() => console.log('Refresh triggered')}
+        required={true}
+        loading={false}
+      />
+    </>
+  );
+};
+```
+
+## 🔧 Catatan
+
+- Komponen ini membutuhkan komponen-komponen pendukung:  
+  - `BottomSheet`
+  - `Input`
+  - `Button`
+  - `Chip`
+  - `Loading`
+  - `Toast` (untuk validasi/error)
+
+- Jika ingin menambahkan animasi shimmer saat loading, bisa modifikasi komponen `Loading`.

package/src/Select/README_Select.md

@@ -0,0 +1,78 @@
+# 📦 Select Component
+
+Komponen `Select` adalah komponen pemilihan data berbasis bottom sheet dengan dukungan pencarian, multiple select, custom item renderer, dan pull-to-refresh.
+
+## 🚀 Fitur
+
+- ✅ Bottom Sheet
+- 🔍 Pencarian dengan debounce
+- 🔁 Pull-to-refresh support
+- 🔘 Multiple/Single select
+- 🎨 Custom render item
+- ⚠️ Validasi jika required
+- 🔄 Loading state
+
+## 📦 Props
+
+| Prop         | Tipe                                            | Default       | Keterangan |
+|--------------|--------------------------------------------------|---------------|------------|
+| `isOpen`     | `boolean`                                       | `false`       | Menentukan apakah bottom sheet terbuka |
+| `data`       | `ChipOptionProps[]`                             | -             | Data pilihan untuk ditampilkan |
+| `multiple`   | `boolean`                                       | `false`       | Mengizinkan multiple selection |
+| `renderItem` | `(item, selected, disabled) => React.ReactNode` | -             | Kustom tampilan item |
+| `onSubmit`   | `(selected: ChipSelectedProps) => void`         | -             | Callback saat tombol submit ditekan |
+| `onClose`    | `(val: boolean) => void`                        | -             | Callback saat bottom sheet ditutup |
+| `onSearch`   | `(val: string) => void`                         | -             | Callback saat input pencarian berubah |
+| `required`   | `boolean`                                       | `false`       | Jika `true`, validasi input saat submit |
+| `loading`    | `boolean`                                       | `false`       | Menampilkan loading saat data di-fetch |
+| `delaySearch`| `number`                                        | `300`         | Delay pencarian dalam milidetik |
+| `height`     | `BottomSheetHeighProps`                         | -             | Ukuran tinggi BottomSheet |
+| `onRefresh`  | `() => void`                                    | -             | Callback saat pull-to-refresh dilakukan |
+
+## 📌 Contoh Penggunaan
+
+```tsx
+import Select from './components/Select/Select';
+
+const MyScreen = () => {
+  const [open, setOpen] = useState(false);
+
+  const data = [
+    { label: 'Option 1', value: '1' },
+    { label: 'Option 2', value: '2' },
+  ];
+
+  const handleSubmit = (selected) => {
+    console.log('Selected:', selected);
+  };
+
+  return (
+    <>
+      <Button title="Pilih Data" onPress={() => setOpen(true)} />
+      <Select
+        isOpen={open}
+        data={data}
+        multiple={true}
+        onClose={() => setOpen(false)}
+        onSubmit={handleSubmit}
+        onSearch={(val) => console.log('Search:', val)}
+        onRefresh={() => console.log('Refresh triggered')}
+        required={true}
+        loading={false}
+      />
+    </>
+  );
+};
+```
+
+## 🔧 Catatan
+
+- Komponen ini membutuhkan komponen-komponen pendukung:  
+  - `BottomSheet`
+  - `Input`
+  - `Button`
+  - `Chip`
+  - `Loading`
+  - `Toast` (untuk validasi/error)
+
+- Jika ingin menambahkan animasi shimmer saat loading, bisa modifikasi komponen `Loading`.

package/src/Select/Select.tsx

@@ -0,0 +1,115 @@
+import {
+  View,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  Keyboard,
+} from 'react-native';
+import { useState, useEffect } from 'react';
+import { type SelectProps } from './type';
+import BottomSheet from '../BottomSheet/BottomSheet';
+import Button from '../Button/Button';
+import Input from '../Input/Input';
+import Chip from '../Chip/Chip';
+import { type ChipSelectedProps } from '../Chip/type';
+import { useToast } from '../Toast/ToastContext';
+import Loading from '../Loading/Loading';
+export default function Select({
+  isOpen,
+  data,
+  renderItem,
+  onClose,
+  onSubmit,
+  multiple,
+  onSearch,
+  required = false,
+  loading = false,
+  delaySearch = 300,
+  height,
+  onRefresh,
+  refreshing,
+}: SelectProps) {
+  const [isOpenSelect, setIsOpenSelect] = useState<boolean | undefined>(false);
+  const [selected, setSelected] = useState<ChipSelectedProps>();
+  const { show } = useToast();
+  useEffect(() => {
+    setIsOpenSelect(isOpen);
+  }, [isOpen]);
+
+  const handleOnCloseBottom = (val: boolean) => {
+    onClose?.(val);
+  };
+
+  const handleOnPresSubmitSelect = (): boolean => {
+    if (required && (!selected || selected.length === 0)) {
+      show('Please fill a item');
+      return false;
+    }
+    setIsOpenSelect(false);
+    onSubmit?.(selected ? selected : []);
+    return true;
+  };
+
+  const handleOnSearch = (val: string) => {
+    setTimeout(() => {
+      onSearch?.(val);
+    }, delaySearch);
+  };
+  return (
+    <BottomSheet
+      onClose={handleOnCloseBottom}
+      isOpen={isOpenSelect}
+      height={height}
+      footer={
+        <Button
+          title="lanjutkan"
+          color="primary"
+          onPress={handleOnPresSubmitSelect}
+        />
+      }
+    >
+      <View style={styles.container}>
+        <View style={styles.containerSearch}>
+          <TouchableWithoutFeedback
+            onPress={Keyboard.dismiss}
+            accessible={false}
+          >
+            <Input
+              submitBehavior="submit"
+              icon="Search"
+              placeholder="Search"
+              onChangeText={(val) => handleOnSearch(val)}
+            />
+          </TouchableWithoutFeedback>
+        </View>
+        {loading ? (
+          <Loading />
+        ) : (
+          <Chip
+            options={data}
+            direction="vertical"
+            scrollable={true}
+            selected={selected}
+            multiple={multiple}
+            onSelect={setSelected}
+            color="primary"
+            size="large"
+            renderItem={renderItem}
+            onRefresh={onRefresh}
+            block
+            refreshing={refreshing}
+          />
+        )}
+      </View>
+    </BottomSheet>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 190,
+  },
+  containerSearch: {
+    gap: 14,
+    padding: 12,
+  },
+});

package/src/Select/type.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { ChipOnSelectProps, ChipOptionProps } from '../Chip/type';
+import type { BottomSheetHeighProps } from '../BottomSheet/type';
+
+export interface SelectDataProps {
+  value: string | number;
+  label: string | number;
+}
+
+export type SelectRenderItemProps = (
+  item: ChipOptionProps,
+  selected: boolean,
+  disabled: boolean
+) => React.ReactNode;
+
+export interface SelectProps {
+  isOpen?: boolean;
+  multiple?: boolean;
+  data: ChipOptionProps[];
+  renderItem?: SelectRenderItemProps;
+  onSubmit?: ChipOnSelectProps;
+  onClose?: (val: boolean) => void;
+  onSearch?: (val: string) => void;
+  required?: boolean;
+  loading?: boolean;
+  delaySearch?: number;
+  height?: BottomSheetHeighProps;
+  onRefresh?: () => void;
+  refreshing?: boolean;
+}

package/src/Step/Step.tsx

@@ -0,0 +1,92 @@
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Dimensions, ScrollView } from 'react-native';
+import Color from '../Color/Color';
+import type { StepItemProps, StepProps } from './type';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+const Step = ({ children, current = 0, onChangeStep }: StepProps) => {
+  const childrenArray = React.Children.toArray(children).filter(
+    React.isValidElement
+  ) as React.ReactElement<StepItemProps>[];
+  const totalSteps = childrenArray.length;
+
+  const scrollRef = useRef<ScrollView>(null);
+  const stepWidth = 100;
+  useEffect(() => {
+    onChangeStep?.(current);
+
+    if (scrollRef.current) {
+      scrollRef.current.scrollTo({
+        x: Math.max(0, current * stepWidth) - screenWidth / 2 + stepWidth / 2,
+        animated: true,
+      });
+    }
+  }, [current, onChangeStep]);
+
+  return (
+    <View style={styles.container}>
+      {/* Header */}
+      <View style={[styles.headerContainer]}>
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={[
+            styles.containerScrollView,
+            {
+              justifyContent:
+                totalSteps * stepWidth < screenWidth ? 'center' : 'flex-start',
+            },
+          ]}
+        >
+          {childrenArray.map((child, index) =>
+            React.cloneElement(child, {
+              index,
+              isActive: index === current,
+              isCompleted: index < current,
+              isLast: index === totalSteps - 1,
+              isHeader: true,
+              style: { width: stepWidth },
+            })
+          )}
+        </ScrollView>
+      </View>
+
+      {/* Content */}
+      <View style={styles.content}>
+        {childrenArray[current] &&
+          React.cloneElement(childrenArray[current], {
+            index: current,
+            isActive: true,
+            isCompleted: false,
+            isLast: current === totalSteps - 1,
+            isHeader: false,
+          })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  headerContainer: {
+    paddingHorizontal: 24,
+    width: screenWidth,
+    backgroundColor: Color.info[50],
+    paddingVertical: 16,
+  },
+  contentContainer: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+  containerScrollView: {
+    flexGrow: 1,
+  },
+});
+
+export default Step;

package/src/Step/StepItem.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  type FlatListProps,
+} from 'react-native';
+import Color from '../Color/Color';
+import type { StepItemProps } from './type';
+
+const StepItem = ({
+  index = 0,
+  isActive,
+  isCompleted,
+  isLast,
+  isHeader,
+  children,
+  style,
+}: StepItemProps) => {
+  if (isHeader) {
+    return (
+      <View style={[styles.headerItem, style]}>
+        <View
+          style={[
+            styles.circle,
+            isCompleted && styles.completed,
+            isActive && styles.active,
+          ]}
+        >
+          <Text style={styles.circleText}>{index + 1}</Text>
+        </View>
+        {!isLast && <View style={styles.line} />}
+      </View>
+    );
+  }
+
+  if (React.isValidElement(children) && children.type === FlatList) {
+    const flatListElement = children as React.ReactElement<FlatListProps<any>>;
+    return React.cloneElement(flatListElement, {
+      style: [styles.content, flatListElement.props.style],
+      contentContainerStyle: [
+        styles.listContent,
+        flatListElement.props.contentContainerStyle,
+      ],
+      nestedScrollEnabled: true,
+    });
+  }
+
+  return <View style={styles.content}>{children}</View>;
+};
+const styles = StyleSheet.create({
+  headerItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  circle: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: '#ccc',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  circleText: {
+    color: '#fff',
+    fontWeight: 'bold',
+  },
+  active: {
+    backgroundColor: Color.info[500],
+  },
+  completed: {
+    backgroundColor: Color.info[500],
+  },
+  line: {
+    width: 40,
+    height: 2,
+    backgroundColor: Color.info[500],
+    marginHorizontal: 8,
+  },
+  content: {
+    flex: 1,
+  },
+  listContent: {},
+});
+export default StepItem;

package/src/Step/type.tsx

@@ -0,0 +1,18 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import React, { type ReactElement } from 'react';
+
+export interface StepItemProps {
+  index?: number;
+  isActive?: boolean;
+  isCompleted?: boolean;
+  isLast?: boolean;
+  isHeader?: boolean;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  title?: string;
+}
+export interface StepProps {
+  children: ReactElement<StepItemProps> | ReactElement<StepItemProps>[];
+  current: number;
+  onChangeStep: (e: any) => void;
+}

package/src/SwitchButton/SwitchButton.tsx

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

package/src/Theme/Theme.tsx

@@ -0,0 +1,28 @@
+const Theme = {
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    xxl: 32,
+  },
+  radius: {
+    sm: 4,
+    md: 8,
+    lg: 12,
+    full: 999,
+  },
+  size: {
+    icon: 24,
+    inputHeight: 40,
+    buttonHeight: 48,
+  },
+  zIndex: {
+    base: 1,
+    dropdown: 10,
+    modal: 100,
+    toast: 999,
+  },
+};
+export default Theme;

package/src/Timeline/Timeline.tsx

@@ -0,0 +1,9 @@
+import { View } from 'react-native';
+
+interface Timeline {
+  children: React.ReactNode;
+}
+
+export default function Timeline({ children }: Timeline) {
+  return <View>{children}</View>;
+}