@herca/rn-kit 0.1.5 → 0.1.7

package/src/Modal/Modal.tsx

@@ -20,7 +20,7 @@ interface ModalPopUpProps {
   onRequestClose?: () => void;
   bgColor?: string;
   width?: DimensionValue;
-  height?: DimensionValue; // tetap ada, tapi tidak akan digunakan kalau ingin auto height
+  height?: DimensionValue;
   containerStyle?: ViewStyle;
   modalStyle?: ViewStyle;
 }
@@ -172,7 +172,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#ccc',
   },
   contentContainer: {
-    padding: 16, // bisa diubah sesuai kebutuhan
+    padding: 16,
   },
 });
 

package/src/Modal/README.md

@@ -0,0 +1,39 @@
+# 🧊 ModalPopUp
+ModalPopUp adalah komponen modal animasi dengan skala, dukungan backdrop, tombol close opsional, dan fleksibilitas ukuran serta gaya. Cocok untuk dialog, form, atau konfirmasi.
+
+### 📦 Contoh Penggunaan
+```tsx
+import React, { useState } from 'react';
+import { Text, Button } from 'react-native';
+import ModalPopUp from '@herca/rn-kit/ModalPopUp';
+
+export default function ExampleModal() {
+  const [visible, setVisible] = useState(false);
+
+  return (
+    <>
+      <Button title="Buka Modal" onPress={() => setVisible(true)} />
+      <ModalPopUp isOpen={visible} onClose={() => setVisible(false)}>
+        <Text style={{ fontSize: 18 }}>Ini adalah isi modal</Text>
+      </ModalPopUp>
+    </>
+  );
+}
+
+```
+
+## 🧩 API Reference
+
+| Prop             | Type                         | Default     | Keterangan                                                            |
+| ---------------- | ---------------------------- | ----------- | --------------------------------------------------------------------- |
+| `isOpen`         | `boolean`                    | —           | Status untuk membuka/tutup modal.                                     |
+| `onClose`        | `(isOpen?: boolean) => void` | `undefined` | Callback saat modal ditutup (baik via backdrop atau tombol close).    |
+| `children`       | `ReactNode`                  | —           | Konten utama modal.                                                   |
+| `backdrop`       | `boolean`                    | `true`      | Apakah backdrop gelap ditampilkan di belakang modal.                  |
+| `closable`       | `boolean`                    | `true`      | Apakah tombol close (lingkaran kecil di kanan atas) ditampilkan.      |
+| `onRequestClose` | `() => void`                 | `undefined` | Callback khusus saat backdrop ditekan (jika ingin override behavior). |
+| `bgColor`        | `string`                     | `"#fff"`    | Warna latar belakang modal.                                           |
+| `width`          | `DimensionValue`             | `"90%"`     | Lebar modal. Bisa `px`, `%`, atau nilai `number`.                     |
+| `height`         | `DimensionValue`             | `undefined` | Tinggi modal (opsional, gunakan scroll jika tidak cukup).             |
+| `containerStyle` | `ViewStyle`                  | `undefined` | Gaya tambahan untuk wrapper container (pusat layar).                  |
+| `modalStyle`     | `ViewStyle`                  | `undefined` | Gaya tambahan untuk modal box.                                        |

package/src/Provider/Provider.tsx

@@ -5,6 +5,7 @@ import LayoutWithFooter from './LayoutWithFooter';
 import RequiredUpdateAppsProvider from './RequiredUpdateAppsProvider';
 import { type ReactNode } from 'react';
 import type { RequiredUpdateAppsProviderProps } from './type';
+import Color from '../Color/Color';
 
 interface FooterContextType {
   footer: any | null;
@@ -13,8 +14,8 @@ interface FooterContextType {
 
 interface ProviderProps {
   children: ReactNode;
-  requiredUpdated: boolean;
-  updateConfig: RequiredUpdateAppsProviderProps;
+  requiredUpdated?: boolean;
+  updateConfig?: RequiredUpdateAppsProviderProps;
 }
 
 const FooterContext = createContext<FooterContextType | undefined>(undefined);
@@ -48,6 +49,7 @@ export const useFooter = () => {
 
 const styles = StyleSheet.create({
   container: {
+    backgroundColor: Color.base.white100,
     flex: 1,
   },
 });

package/src/Provider/type.tsx

@@ -1,6 +1,6 @@
 export interface RequiredUpdateAppsProviderProps {
-  title: string;
-  description: string;
+  title?: string;
+  description?: string;
   buttonText?: string;
   onUpdate?: (value: boolean) => void;
 }

package/src/Step/README.md

@@ -0,0 +1,91 @@
+# 🪜 Step & StepItem
+Komponen Step menampilkan alur proses bertahap (wizard / progress indicator) dengan header horizontal yang dapat digeser, serta area konten untuk setiap langkah.
+Setiap titik/langkah diwakili oleh StepItem.
+
+## 📦 Contoh Penggunaan
+
+```tsx
+import React, { useState } from 'react';
+import { View, Text } from 'react-native';
+import Step from '@herca/rn-kit/Step';
+import StepItem from '@herca/rn-kit/Step/StepItem';
+
+export default function CheckoutWizard() {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  return (
+    <Step current={currentStep} onChangeStep={(i) => setCurrentStep(i)}>
+      {/* Header & konten otomatis dipasangkan berdasarkan urutan */}
+      <StepItem title="Alamat">
+        <Text>Form Alamat Pengiriman</Text>
+      </StepItem>
+
+      <StepItem title="Pembayaran">
+        <Text>Metode Pembayaran</Text>
+      </StepItem>
+
+      <StepItem title="Konfirmasi">
+        <Text>Ringkasan & Konfirmasi Pesanan</Text>
+      </StepItem>
+    </Step>
+  );
+}
+
+```
+## 🧩 API Reference
+
+### Step 
+| Prop           | Type                                   | Wajib | Default | Deskripsi                                                                   |
+| -------------- | -------------------------------------- | ----- | ------- | --------------------------------------------------------------------------- |
+| `children`     | `ReactElement<StepItemProps>` \| array | ✅     | —       | Satu atau beberapa `StepItem`.                                              |
+| `current`      | `number`                               | ✅     | —       | Indeks langkah aktif (dimulai dari `0`).                                    |
+| `onChangeStep` | `(activeIndex: number) => void`        | ✅     | —       | Callback yang dipicu setiap kali nilai `current` berubah di dalam komponen. |
+
+
+### StepItem
+
+Digunakan dua kali:
+
+Sebagai header (ikon lingkaran + garis) – otomatis di‐render oleh Step.
+
+Sebagai konten – ditampilkan bila index-nya sama dengan current.
+
+| Prop       | Type                                                          | Wajib | Default     | Deskripsi                                                          |
+| ---------- | ------------------------------------------------------------- | ----- | ----------- | ------------------------------------------------------------------ |
+| `children` | `ReactNode`                                                   | ✅     | —           | Konten yang muncul ketika langkah ini aktif.                       |
+| `color`    | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌     | `'primary'` | Warna lingkaran & garis pada header.                               |
+| `title`    | `string`                                                      | ❌     | `''`        | (Opsional) Judul untuk ditampilkan di header (bisa dikustom lagi). |
+
+## ⚙️ Cara Kerja
+
+1. Header Scrollable
+
+    - Lebar setiap header item fix (stepWidth = 100).
+
+    - Jika total lebar < perangkat, item otomatis di-center; jika lebih, bisa digeser horizontal.
+
+    - Ketika current berubah, ScrollView.scrollTo() memastikan item aktif selalu di tengah layar.
+
+2. Lingkaran Status
+
+    - isActive → lingkaran berwarna solid (Color.info[500]).
+
+    - isCompleted (index < current) → gaya sama dengan aktif (bisa diubah jika ingin beda).
+
+    - Item terakhir otomatis tanpa garis setelah lingkaran.
+
+3. Konten
+
+    - Hanya langkah aktif yang dirender di area konten (childrenArray[current]).
+
+    - Jika konten berupa FlatList, properti nestedScrollEnabled diaktifkan agar scrolling mulus di nested list.
+
+## 💡 Tips & Praktik Terbaik
+
+| Kebutuhan                 | Saran Implementasi                                                                                  |
+| ------------------------- | --------------------------------------------------------------------------------------------------- |
+| **Navigasi Manual**       | Ubah state `current` dari luar (`setCurrentStep`).                                                  |
+| **Validasi Tiap Langkah** | Jalankan pengecekan sebelum menaikkan `current`; mis. pastikan form valid.                          |
+| **Kustom Warna/Ikon**     | Edit `COLOR_MAP` atau tambahkan prop `icon` pada `StepItem` jika ingin ikon berbeda di bullet.      |
+| **Langkah Dinamis**       | Karena `children` berupa array, Anda bisa `.filter()` atau `.slice()` sebelum mem-pass ke `<Step>`. |
+| **Tema Gelap**            | Sesuaikan `Color.info[500]`, `Color.info[50]`, dll.                                                 |

package/src/Timeline/README.md

@@ -0,0 +1,80 @@
+# 🗂️ Timeline & TimelineItem
+Timeline menampilkan rangkaian peristiwa secara vertikal—mirip “stepper” atau “activity feed”.
+Setiap node diwakili oleh TimelineItem yang menampilkan titik (bullet icon) dan garis vertikal terhubung.
+
+## Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import { Text } from 'react-native';
+import Timeline from '@herca/rn-kit/Timeline';
+import TimelineItem from '@herca/rn-kit/Timeline/TimelineItem';
+
+export default function OrderHistory() {
+  return (
+    <Timeline>
+      <TimelineItem color="success">
+        <Text>Pesanan dibuat • 10 Jan 2025</Text>
+      </TimelineItem>
+
+      <TimelineItem color="primary">
+        <Text>Dikemas • 11 Jan 2025</Text>
+      </TimelineItem>
+
+      <TimelineItem color="warning">
+        <Text>Dalam pengiriman • 12 Jan 2025</Text>
+      </TimelineItem>
+
+      <TimelineItem color="danger">
+        <Text>Gagal diterima • 14 Jan 2025</Text>
+      </TimelineItem>
+    </Timeline>
+  );
+}
+
+```
+
+## Props
+
+### Timeline
+| Prop       | Type        | Wajib | Default | Deskripsi                          |
+| ---------- | ----------- | ----- | ------- | ---------------------------------- |
+| `children` | `ReactNode` | ✅     | —       | Satu atau beberapa `TimelineItem`. |
+
+
+### TimelineItem
+| Prop       | Type                                                          | Wajib | Default     | Deskripsi                                             |
+| ---------- | ------------------------------------------------------------- | ----- | ----------- | ----------------------------------------------------- |
+| `children` | `ReactNode`                                                   | ✅     | —           | Konten untuk node timeline: teks, ikon tambahan, dsb. |
+| `color`    | `'primary' \| 'success' \| 'warning' \| 'danger' \| 'purple'` | ❌     | `'primary'` | Skema warna titik (`RadioButton`) dan garis vertikal. |
+
+
+## ⚙️ Cara Kerja
+
+1. Bullet & Line
+
+    - Bullet dirender dengan komponen Icon (name="RadioButton") memakai warna dari color.
+
+    - Garis vertikal (borderLeftWidth: 1) menggunakan borderStyle: 'dashed'. Tingginya dihitung secara dinamis (contentHeight - 20) agar garis mulai tepat di bawah bullet.
+
+2. Penghitungan Tinggi
+
+    - onLayout pada wrapper konten mengukur tinggi aktual item.
+
+    - Hasil pengukuran dipakai untuk menyesuaikan panjang garis, menjaga visual konsisten meskipun konten memiliki tinggi berbeda.
+
+3. Layout
+
+    - Komponen dibangun dengan flexDirection: 'row', bullet di kiri, konten di kanan (flex: 1).
+
+    - Margin horizontal (marginRight: 8) menjaga jarak antara bullet dan konten.
+
+## 💡 Tips Penggunaan
+- Item Terakhir Tanpa Garis
+Bila ingin menghilangkan garis pada item terakhir, buat prop opsional mis. isLast dan kondisikan tinggi garis menjadi 0.
+
+- Interaktif
+Anda bebas menambahkan tombol, TouchableOpacity, atau ikon status di dalam children.
+
+- Kustomisasi Warna
+Untuk warna tambahan, update COLOR_MAP dan tipe ColorKey pada TimelineItem.

package/src/Timeline/Timeline.tsx

@@ -1,9 +1,15 @@
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 interface Timeline {
   children: React.ReactNode;
 }
 
 export default function Timeline({ children }: Timeline) {
-  return <View>{children}</View>;
+  return <View style={styles.gap14}>{children}</View>;
 }
+
+const styles = StyleSheet.create({
+  gap14: {
+    gap: 14,
+  },
+});

package/src/Timeline/TimelineItem.tsx

@@ -14,7 +14,7 @@ type ColorKey = keyof typeof COLOR_MAP;
 
 interface TimelineItemProps {
   children: React.ReactNode;
-  color: ColorKey;
+  color?: ColorKey;
 }
 
 export default function TimelineItem({
@@ -22,12 +22,25 @@ export default function TimelineItem({
   color = 'primary',
 }: TimelineItemProps) {
   const [contentHeight, setContentHeight] = useState(0);
+  const renderDashes = (count: number) => {
+    return Array.from({ length: count }).map((_, index) => (
+      <View
+        key={index}
+        style={{
+          width: 1,
+          height: 4,
+          backgroundColor: Color.gray[400],
+          marginVertical: 2,
+        }}
+      />
+    ));
+  };
 
   return (
     <View style={styles.container}>
       <View style={styles.contentLeft}>
         <Icon name="RadioButton" color={COLOR_MAP[color]} />
-        <View style={[styles.border, { height: contentHeight - 20 }]} />
+        <View>{renderDashes(Math.floor((contentHeight - 20) / 6))}</View>
       </View>
       <View
         style={styles.flex}
@@ -52,10 +65,10 @@ const styles = StyleSheet.create({
   },
   border: {
     width: 1,
+    borderWidth: 1,
     borderLeftWidth: 1,
     borderLeftColor: Color.gray[400],
     borderStyle: 'dashed',
-    marginTop: 4,
   },
   flex: {
     flex: 1,

package/src/Toast/README.md

@@ -0,0 +1,71 @@
+# 🌐 ToastProvider & useToast()
+ToastProvider adalah context global untuk menampilkan notifikasi Toast dari bagian manapun dalam aplikasi Anda. Digunakan bersama dengan hook useToast() untuk memanggil toast secara imperatif.
+
+## ⚙️ Setup
+1. Bungkus aplikasi Anda dengan ToastProvider
+
+```tsx
+import React from 'react';
+import { ToastProvider } from '@herca/rn-kit';
+
+export default function App() {
+  return (
+    <ToastProvider>
+      {/* Seluruh aplikasi Anda */}
+    </ToastProvider>
+  );
+}
+
+```
+
+2. Gunakan useToast() di dalam komponen
+
+
+```tsx
+import React from 'react';
+import { Button } from '@herca/rn-kit';
+import { useToast } from '@herca/rn-kit';
+
+export default function Dashboard() {
+  const toast = useToast();
+
+  const handleSuccess = () => {
+    toast.show('Data berhasil disimpan', {
+      color: 'success',
+      icon: 'CheckCircle',
+      duration: 4000,
+    });
+  };
+
+  return <Button title="Simpan" onPress={handleSuccess} />;
+}
+
+```
+
+## 🧩 API Reference
+### ✅ ToastProvider
+Menyediakan context global toast. Harus membungkus komponen root Anda.
+
+| Prop       | Type        | Required | Description                       |
+| ---------- | ----------- | -------- | --------------------------------- |
+| `children` | `ReactNode` | ✅        | Semua komponen di dalam aplikasi. |
+
+
+### useToast() Hook
+| Function                  | Type                                                |
+| ------------------------- | --------------------------------------------------- |
+| `show(message, options?)` | `(message: string, options?: ToastOptions) => void` |
+
+### ToastOptions
+| Option     | Type               | Default            | Description                        |
+| ---------- | ------------------ | ------------------ | ---------------------------------- |
+| `color`    | `ColorVariantType` | `'default'`        | Warna latar belakang dan teks.     |
+| `icon`     | `IconNameProps`    | `'ExlamationMark'` | Ikon di samping pesan.             |
+| `duration` | `number` (ms)      | `3000`             | Waktu tampil Toast sebelum hilang. |
+
+## ❗ Error Handling
+Error: useToast must be used within a ToastProvider
+```tsx
+Error: useToast must be used within a ToastProvider
+
+```

package/src/Ui/README_CARD.md

@@ -0,0 +1,76 @@
+# 🃏 Card
+
+Komponen Card digunakan sebagai wadah tampilan (container) dengan desain yang konsisten seperti border, padding, dan optional background (warna atau gambar). Cocok digunakan untuk membungkus informasi atau konten secara visual terstruktur.
+
+## Contoh Penggunaan
+
+``` tsx
+import { Card, Color, Container, Typography } from '@herca/rn-kit';
+import { View } from 'react-native';
+
+export default function CardScreen() {
+  return (
+    <View>
+      <Container>
+        <Typography variant="h4" weight="semibold">
+          Default
+        </Typography>
+        <Card>
+          <Typography color={Color.gray[800]} weight="bold">
+            What is Lorem Ipsum?
+          </Typography>
+          <Typography color={Color.gray[800]}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry's standard dummy text
+            ever since the 1500s, when an unknown printer took a galley of type
+            and scrambled it to make a type specimen book. It has survived not
+            only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged.
+          </Typography>
+        </Card>
+        <Typography variant="h4" weight="semibold">
+          Background Image
+        </Typography>
+        <Card backgroundImage={require('../assets/sp_banner.png')}>
+          <Typography color={Color.base.white100} weight="bold">
+            What is Lorem Ipsum?
+          </Typography>
+          <Typography color={Color.base.white100}>
+            Lorem Ipsum is simply dummy text of
+          </Typography>
+        </Card>
+        <Typography variant="h4" weight="semibold">
+          Background Color
+        </Typography>
+        <Card backgroundColor={Color.primary[1000]}>
+          <Typography color={Color.base.white100} weight="bold">
+            What is Lorem Ipsum?
+          </Typography>
+          <Typography color={Color.base.white100}>
+            Lorem Ipsum is simply dummy text of the printing and typesetting
+            industry. Lorem Ipsum has been the industry's standard dummy text
+            ever since the 1500s,
+          </Typography>
+        </Card>
+      </Container>
+    </View>
+  );
+}
+
+```
+
+## Props
+
+| Props             | Tipe                          | Wajib | Default | Deskripsi                                            |
+| ----------------- | ----------------------------- | ----- | ------- | ---------------------------------------------------- |
+| `children`        | `ReactNode`                   | ✅     | -       | Komponen atau konten di dalam Card.                  |
+| `style`           | `StyleProp<ViewStyle>`        | ❌     | -       | Gaya tambahan untuk Card (padding, margin, dsb).     |
+| `backgroundImage` | `ImageSourcePropType` (`any`) | ❌     | -       | Gambar latar belakang menggunakan `ImageBackground`. |
+| `backgroundColor` | `string`                      | ❌     | `#fff`  | Warna latar belakang Card.                           |
+
+## Catatan 
+- Saat backgroundImage digunakan, ImageBackground akan membungkus children dan otomatis mengikuti styling dari Card.
+
+- Jika Anda ingin menambahkan padding pada konten dalam Card, pastikan Anda menambahkannya di level children atau buat pembungkus tambahan jika padding default tidak cukup.
+
+- Kompatibel dengan semua komponen React Native seperti Text, Image, TouchableOpacity, dll.

package/src/Ui/README_CONTAINER.md

@@ -0,0 +1,26 @@
+# 📦 Container
+Komponen Container adalah pembungkus layout umum yang memberikan padding horizontal dan vertikal secara konsisten untuk konten di dalamnya. Cocok digunakan untuk membungkus seluruh tampilan atau bagian utama dari layar.
+
+## 📐 Contoh Penggunaan
+
+```tsx
+import React from 'react';
+import { Text } from 'react-native';
+import Container from '@herca/rn-kit/Container';
+
+export default function HomeScreen() {
+  return (
+    <Container>
+      <Text>Selamat datang di aplikasi kami!</Text>
+    </Container>
+  );
+}
+
+
+```
+
+## props
+| Prop       | Tipe                   | Wajib | Default | Deskripsi                                                    |
+| ---------- | ---------------------- | ----- | ------- | ------------------------------------------------------------ |
+| `children` | `ReactNode`            | ✅     | -       | Komponen atau tampilan yang dibungkus di dalam container.    |
+| `style`    | `StyleProp<ViewStyle>` | ❌     | -       | Tambahan gaya jika ingin menimpa atau menambah gaya default. |

package/src/index.tsx

@@ -37,7 +37,6 @@ export { default as Switch } from './Input/Switch';
 export { default as CheckBox } from './CheckBox/CheckBox';
 export { default as CheckBoxList } from './CheckBox/CheckBoxList';
 export { default as RadioButton } from './RadioButton/RadioButton';
-export { default as SwitchButton } from './SwitchButton/SwitchButton';
 export { default as Icon } from './Icon/Icon';
 export { default as Modal } from './Modal/Modal';
 export { default as Label } from './Label/Label';

package/lib/module/SwitchButton/SwitchButton.js

@@ -1,8 +0,0 @@
-"use strict";
-
-import { View } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function SwitchButton() {
-  return /*#__PURE__*/_jsx(View, {});
-}
-//# sourceMappingURL=SwitchButton.js.map

package/lib/module/SwitchButton/SwitchButton.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["View","jsx","_jsx","SwitchButton"],"sourceRoot":"../../../src","sources":["SwitchButton/SwitchButton.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEpC,eAAe,SAASC,YAAYA,CAAA,EAAG;EACrC,oBAAOD,IAAA,CAACF,IAAI,IAAO,CAAC;AACtB","ignoreList":[]}

package/lib/module/TextArea/TextArea.js

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=TextArea.js.map

package/lib/module/TextArea/TextArea.js.map

@@ -1 +0,0 @@
-{"version":3,"names":[],"sourceRoot":"../../../src","sources":["TextArea/TextArea.tsx"],"mappings":"","ignoreList":[]}

package/lib/typescript/src/SwitchButton/SwitchButton.d.ts

@@ -1,2 +0,0 @@
-export default function SwitchButton(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SwitchButton.d.ts.map

package/lib/typescript/src/SwitchButton/SwitchButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SwitchButton.d.ts","sourceRoot":"","sources":["../../../../src/SwitchButton/SwitchButton.tsx"],"names":[],"mappings":"AAEA,MAAM,CAAC,OAAO,UAAU,YAAY,4CAEnC"}

package/lib/typescript/src/TextArea/TextArea.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=TextArea.d.ts.map

package/lib/typescript/src/TextArea/TextArea.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../src/TextArea/TextArea.tsx"],"names":[],"mappings":""}

package/src/SwitchButton/SwitchButton.tsx

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