@herca/rn-kit

UI Kit untuk pengembangan aplikasi internal HerCa.

Kit ini dirancang untuk mempercepat proses pengembangan antarmuka pengguna dengan pendekatan minimal terhadap penggunaan style manual. Beberapa komponen dibuat fix dan konsisten agar tampilan aplikasi memiliki nuansa yang seragam.

Catatan: Jika menggunakan UI Kit ini, tidak disarankan untuk menambahkan style atau melakukan kustomisasi manual. Untuk kebutuhan kustomisasi, gunakan konfigurasi Theme yang telah disediakan.

❌ Contoh Penggunaan yang Tidak Disarankan

import { View, Text, StyleSheet } from 'react-native';

return (
  <View style={styles.container}>
    <Text style={styles.text}>
      Hello World
    </Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    padding: 10,
    textAlign: 'center',
  },
  text: {
    fontSize: 10,
    fontWeight: 'bold',
  },
});

✅ Contoh Penggunaan yang Disarankan

import { Container, Center, Typography } from '@herca/rn-kit';

return (
  <Container>
    <Center>
      <Typography variant="t2" weight="bold">
        Hello World
      </Typography>
    </Center>
  </Container>
);

📦 Instalasi

Dengan npm

npm install @herca/rn-kit

Atau dengan yarn

yarn add @herca/rn-kit

Pod install

cd ios
pod install

Wrap content utama dengan Provider

import {Provider} from '@herca/rn-kit';
const Stack = createNativeStackNavigator();

const App = () => {
  return (
    <Provider>
      <YoyrCode>
    </Provider>
  )
}

🚀 Penggunaan

import { Button } from '@herca/rn-kit';

<Button title="Click Me" />

📚 Komponen Tersedia

🔹 1. Input / Form Components

Komponen untuk mengumpulkan input dari pengguna.

• Button
• Checkbox
• Checkbox List
• Chip-(Select)
• ChipItem
• CounterButton
• DatePicker
• DropDown
• Input
• Input Select
• Input Date
• InputOtp
• Input Month
• Input Password
• Input Time
• Input Year
• Radio Button
• Select
• Switch
• TextArea
• InputFile

🔹 2. Overlay

Komponen yang muncul di atas konten utama untuk interaksi sementara.

• Bottom Sheet
• Modal

🔹 3. Disclosure / Navigation Components

Komponen untuk menyembunyikan atau menampilkan konten.

• Accordion
• Step
• Tab

🔹 4. Feedback

Komponen untuk memberikan umpan balik atau informasi kepada pengguna.

• Alert
• Badge
• Toast

🔹 5. Data Display

Komponen untuk menampilkan informasi atau elemen visual.

• Avatar
• AvatarGroup
• Calendar
• Color
• Container
• Card
• Devider
• Drawing
• Footer
• ViewInsets
• Icon
• List
• Timeline
• Typography
• Skeleton
• PdfView

Contex

• Provider

Function

• Date Formatter

🤝 Kontribusi

Silakan baca panduan kontribusi pada CONTRIBUTING.md untuk mengetahui alur pengembangan dan kontribusi pada proyek ini.

📄 Lisensi

MIT License