@herca/rn-kit 0.1.0

package/src/Badge/Badge.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Color from '../Color/Color';
+import Typography from '../Typography/Typography';
+import type { TypographyVariantProps } from '../Typography/type';
+
+type Variant =
+  | 'default'
+  | 'primary'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'orange'
+  | 'purple';
+
+type Size = 'small' | 'medium';
+interface BadgeProps {
+  value?: string | number | React.ReactNode;
+  color: Variant;
+  size?: Size;
+  variant?: Variant;
+  dot?: boolean;
+  children?: React.ReactNode;
+}
+
+const COLORS: Record<Variant, { background: string; fontColor: string }> = {
+  default: { background: Color.gray[100], fontColor: Color.gray[800] },
+  primary: { background: Color.primary[50], fontColor: Color.primary[1000] },
+  success: { background: Color.success[50], fontColor: Color.success[500] },
+  info: { background: Color.info[50], fontColor: Color.info[500] },
+  danger: { background: Color.danger[50], fontColor: Color.danger[600] },
+  warning: { background: Color.warning[50], fontColor: Color.warning[300] },
+  orange: { background: Color.orange[50], fontColor: Color.orange[500] },
+  purple: { background: Color.purple[50], fontColor: Color.purple[500] },
+};
+
+interface SizeStyle {
+  height: number;
+  fontSize: TypographyVariantProps;
+  paddingHorizontal: number;
+  paddingVertical: number;
+  borderRadius: number;
+}
+
+const SIZE_MAP: Record<Size, SizeStyle> = {
+  small: {
+    height: 18,
+    fontSize: 't3',
+    paddingHorizontal: 4,
+    paddingVertical: 2,
+    borderRadius: 4,
+  },
+  medium: {
+    height: 32,
+    fontSize: 't1',
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 8,
+  },
+};
+const Badge: React.FC<BadgeProps> = ({
+  value,
+  size = 'medium',
+  color = 'default',
+  dot = false,
+  children,
+}) => {
+  const safeSize: Size = ['small', 'medium'].includes(size) ? size : 'medium';
+  const { background, fontColor } = COLORS[color];
+  const { height, paddingHorizontal, paddingVertical, borderRadius } =
+    SIZE_MAP[safeSize];
+
+  if (dot) {
+    return (
+      <View
+        style={[
+          styles.dot,
+          {
+            height: height,
+            paddingHorizontal: paddingHorizontal,
+            paddingVertical: paddingVertical,
+            borderRadius: borderRadius,
+            backgroundColor: background,
+          },
+        ]}
+      />
+    );
+  }
+
+  return (
+    <View
+      style={[
+        styles.badge,
+        {
+          height: height,
+          borderRadius: 8,
+          backgroundColor: background,
+          paddingHorizontal: paddingHorizontal,
+          paddingVertical: paddingVertical,
+        },
+      ]}
+    >
+      {children ? (
+        children
+      ) : (
+        <Typography
+          color={fontColor}
+          variant={SIZE_MAP[safeSize].fontSize}
+          weight="medium"
+        >
+          {value}
+        </Typography>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+    flexWrap: 'wrap',
+  },
+  text: {
+    fontWeight: 'bold',
+    textAlign: 'center',
+  },
+  dot: {
+    alignSelf: 'flex-start',
+  },
+});
+
+export default Badge;

package/src/Badge/README.md

@@ -0,0 +1,64 @@
+# 🔖 Badge Component
+
+Komponen `Badge` digunakan untuk menampilkan label kecil yang memberikan informasi tambahan seperti status atau notifikasi.
+![Deskripsi Alt](../../assets/doc/Badge/Badge.png)
+
+## ✨ Fitur
+
+- Mendukung warna varian seperti success, warning, danger, dll
+- Dua ukuran tersedia: `small` dan `medium`
+- Mode `dot` untuk hanya menampilkan titik status kecil
+- Bisa menggunakan `children` untuk isi kustom atau gunakan `value` sebagai isi teks
+
+## 🧱 Props
+
+| Prop       | Tipe                                 | Default     | Deskripsi                                                  |
+|------------|--------------------------------------|-------------|------------------------------------------------------------|
+| `value`    | `string \\| number \\| ReactNode`    | `undefined` | Nilai yang ditampilkan di badge jika `children` tidak ada |
+| `color`    | `'default' \\| 'primary' \\| ...`    | `'default'` | Warna badge                                                |
+| `size`     | `'small'` \\| `'medium'`             | `'medium'`  | Ukuran badge                                               |
+| `dot`      | `boolean`                            | `false`     | Jika `true`, hanya menampilkan titik kecil                 |
+| `children` | `React.ReactNode`                    | `undefined` | Jika ada, akan menggantikan `value` sebagai isi badge     |
+
+## 🎨 Warna yang Tersedia
+
+- `default`
+- `primary`
+- `success`
+- `info`
+- `warning`
+- `danger`
+- `orange`
+- `purple`
+
+## 📏 Ukuran Badge
+
+| Ukuran | Tinggi | Font     | PaddingHorizontal | PaddingVertical | BorderRadius |
+|--------|--------|----------|-------------------|------------------|---------------|
+| small  | 18     | `t3`     | 4                 | 2                | 4             |
+| medium | 24     | `t1`     | 10                | 4                | 8             |
+
+## 📦 Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import Badge from './Badge'; // sesuaikan path
+
+export default function Example() {
+  return (
+    <>
+      {/* Badge dengan value */}
+      <Badge color="success" value="Aktif" />
+
+      {/* Badge dengan dot */}
+      <Badge color="danger" dot />
+
+      {/* Badge dengan children */}
+      <Badge color="warning">
+        <CustomComponent />
+      </Badge>
+    </>
+  );
+}
+
+```

package/src/BottomSheet/BottomSheet.tsx

@@ -0,0 +1,259 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  PanResponder,
+  TouchableOpacity,
+  Animated,
+  Modal,
+  KeyboardAvoidingView,
+  Keyboard,
+  Dimensions,
+  SafeAreaView,
+  Platform,
+  StatusBar,
+  type KeyboardEvent,
+} from 'react-native';
+import Container from '../Ui/Container';
+import Typography from '../Typography/Typography';
+import Color from '../Color/Color';
+import type { BottomSheetHeighProps, BottomSheetProops } from './type';
+
+const statusBarHeight =
+  Platform.OS === 'android' ? (StatusBar.currentHeight ?? 24) : 65;
+const screenHeight = Dimensions.get('window').height;
+const actualScreenHeight = screenHeight - statusBarHeight;
+const DEFAULT_PADDING_BOTTOM = 40;
+export default function BottomSheet({
+  isOpen,
+  onClose,
+  children,
+  backdrop = true,
+  closable = true,
+  onRequestClose,
+  buttonClose = false,
+  height,
+  pullBar,
+  footer,
+}: BottomSheetProops) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [heightFooter, setHeightFooter] = useState(0);
+  const [heighContent, setHeighContent] =
+    useState<BottomSheetHeighProps>('auto');
+  const [maxHeight, setMaxHeight] =
+    useState<BottomSheetHeighProps>(actualScreenHeight);
+  const translateY = useRef(new Animated.Value(600)).current;
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => false,
+      onPanResponderMove: (_, gestureState) => {
+        if (gestureState.dy > 0) {
+          translateY.setValue(gestureState.dy);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (closable && gestureState.dy > 50) {
+          handleRequestClose();
+        } else {
+          resetModalPosition();
+        }
+      },
+    })
+  ).current;
+
+  const hideModal = useCallback(() => {
+    if (closable) {
+      Animated.timing(translateY, {
+        toValue: 500,
+        duration: 300,
+        useNativeDriver: false,
+      }).start(() => {
+        setIsVisible(false);
+        onClose && onClose(false);
+      });
+    }
+  }, [closable, translateY, onClose]);
+
+  const showModal = useCallback(() => {
+    setIsVisible(true);
+    Animated.spring(translateY, {
+      toValue: 0,
+      useNativeDriver: false,
+    }).start();
+  }, [translateY]);
+
+  const handleRequestClose = (e?: any) => {
+    hideModal();
+    onRequestClose && onRequestClose(e);
+  };
+
+  const resetModalPosition = () => {
+    Animated.spring(translateY, {
+      toValue: 0,
+      useNativeDriver: false,
+    }).start();
+  };
+
+  useEffect(() => {
+    if (isOpen) {
+      showModal();
+    } else {
+      hideModal();
+    }
+  }, [isOpen, showModal, hideModal]);
+
+  useEffect(() => {
+    if (height) {
+      setHeighContent(height);
+    }
+  }, [height]);
+
+  useEffect(() => {
+    const keyboardDidShowListener = Keyboard.addListener(
+      'keyboardDidShow',
+      (e: KeyboardEvent) => {
+        const keyboardHeight = e.endCoordinates?.height || 300;
+        setMaxHeight(screenHeight - statusBarHeight - keyboardHeight);
+      }
+    );
+
+    const keyboardDidHideListener = Keyboard.addListener(
+      'keyboardDidHide',
+      () => {
+        setMaxHeight(screenHeight - statusBarHeight);
+      }
+    );
+
+    return () => {
+      keyboardDidShowListener.remove();
+      keyboardDidHideListener.remove();
+    };
+  }, []);
+
+  return (
+    <Modal
+      transparent
+      visible={isVisible}
+      onRequestClose={handleRequestClose}
+      animationType="fade"
+    >
+      <View style={[styles.modalContainer, backdrop && styles.backdrop]}>
+        <TouchableOpacity
+          onPress={handleRequestClose}
+          activeOpacity={1}
+          style={styles.backdropTouchable}
+        />
+
+        <KeyboardAvoidingView
+          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+          enabled
+          style={styles.keyboardAvoiding}
+        >
+          <Animated.View
+            style={[
+              styles.bottomSheet,
+              {
+                transform: [{ translateY }],
+                height: heighContent,
+                maxHeight: maxHeight,
+                paddingBottom: DEFAULT_PADDING_BOTTOM + heightFooter,
+              },
+            ]}
+          >
+            {buttonClose && (
+              <TouchableOpacity
+                onPress={handleRequestClose}
+                style={styles.closeButton}
+              >
+                <Typography>x</Typography>
+              </TouchableOpacity>
+            )}
+            {closable && (
+              <View
+                {...panResponder.panHandlers}
+                style={styles.dragIndicatorContainer}
+              >
+                {pullBar ? pullBar : <View style={styles.dragIndicator} />}
+              </View>
+            )}
+            <SafeAreaView
+              style={[
+                styles.contentContainer,
+                ...(footer ? [styles.contentWithFooter] : []),
+              ]}
+            >
+              <Container>{children}</Container>
+            </SafeAreaView>
+            {footer && (
+              <SafeAreaView
+                onLayout={(event) => {
+                  const { height } = event.nativeEvent.layout;
+                  setHeightFooter(height);
+                }}
+                style={styles.footer}
+              >
+                <Container>{footer}</Container>
+              </SafeAreaView>
+            )}
+          </Animated.View>
+        </KeyboardAvoidingView>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  backdropTouchable: {
+    flex: 1,
+  },
+  keyboardAvoiding: {
+    justifyContent: 'flex-end',
+  },
+  bottomSheet: {
+    backgroundColor: 'white',
+    borderTopLeftRadius: 16,
+    borderTopRightRadius: 16,
+  },
+  closeButton: {
+    position: 'absolute',
+    backgroundColor: 'white',
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 50,
+    top: -50,
+    right: 24,
+    zIndex: 10,
+  },
+  dragIndicatorContainer: {
+    alignItems: 'center',
+    paddingBottom: 20,
+  },
+  dragIndicator: {
+    width: 70,
+    height: 5,
+    marginTop: 10,
+    borderRadius: 2,
+    backgroundColor: '#ccc',
+  },
+  contentContainer: {
+    flexGrow: 1,
+  },
+  contentWithFooter: {},
+  footer: {
+    backgroundColor: Color.base.white100,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    zIndex: 10,
+  },
+});

package/src/BottomSheet/README.md

@@ -0,0 +1,64 @@
+# ⬆️ BottomSheet Component
+
+Komponen `BottomSheet` adalah modal bawah (slide-up) untuk menampilkan konten dinamis, form, konfirmasi, dll, dengan berbagai fitur interaktif seperti gesture drag, keyboard-aware, dan customizable height.
+![Deskripsi Alt](../../assets/doc/BottomSheet/BottomSheet.gif)
+
+---
+
+## 📦 Props
+
+| Prop            | Tipe                             | Default     | Deskripsi                                                                 |
+|------------------|----------------------------------|-------------|---------------------------------------------------------------------------|
+| `isOpen`        | `boolean`                        | -           | Menentukan apakah bottom sheet sedang ditampilkan.                       |
+| `onClose`       | `(isOpen: boolean) => void`      | -           | Callback saat bottom sheet ditutup.                                      |
+| `children`      | `React.ReactNode`                | -           | Konten utama dari bottom sheet.                                          |
+| `backdrop`      | `boolean`                        | `true`      | Menampilkan background semi-transparent.                                 |
+| `closable`      | `boolean`                        | `true`      | Menentukan apakah bisa ditutup dengan drag atau klik di luar.            |
+| `onRequestClose`| `(e: any) => void`               | -           | Dipanggil saat permintaan untuk menutup modal.                           |
+| `buttonClose`   | `boolean`                        | `false`     | Menampilkan tombol X untuk menutup modal.                                |
+| `height`        | `number \| string`               | `'auto'`    | Tinggi dari konten bottom sheet.                                         |
+| `pullBar`       | `React.ReactNode`                | -           | Custom elemen untuk drag indicator.                                      |
+| `footer`        | `React.ReactNode`                | -           | Menambahkan elemen tetap di bawah konten.                                |
+
+---
+
+## ✨ Fitur Unggulan
+
+- Swipe-to-dismiss gesture (drag ke bawah)
+- Keyboard aware (`KeyboardAvoidingView`)
+- Responsif terhadap tampilan iOS dan Android
+- `Animated.spring` untuk transisi yang halus
+- Bisa dikontrol penuh lewat prop `isOpen`
+
+---
+
+## 📐 Contoh Penggunaan
+
+---
+
+```tsx
+import React, { useState } from 'react';
+import { Button, View } from 'react-native';
+import BottomSheet from './BottomSheet';
+
+export default function ExampleScreen() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <View style={{ flex: 1 }}>
+      <Button title="Buka Bottom Sheet" onPress={() => setOpen(true)} />
+
+      <BottomSheet
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        label="Contoh Bottom Sheet"
+        height="70%"
+        buttonClose
+      >
+        <Text>Ini isi dari bottom sheet</Text>
+      </BottomSheet>
+    </View>
+  );
+}
+```
+

package/src/BottomSheet/type.tsx

@@ -0,0 +1,15 @@
+export type BottomSheetHeighProps = `${number}%` | 'auto' | number;
+
+export interface BottomSheetProops {
+  label?: string;
+  isOpen?: boolean;
+  onClose?: (isOpen: boolean) => void;
+  children?: React.ReactNode;
+  backdrop?: boolean;
+  closable?: boolean;
+  onRequestClose?: (e: any) => void;
+  buttonClose?: boolean;
+  height?: BottomSheetHeighProps;
+  pullBar?: React.ReactNode;
+  footer?: React.ReactNode;
+}