@herca/rn-kit 0.1.0

package/src/Label/Label.tsx

@@ -0,0 +1,119 @@
+import { StyleSheet, View } from 'react-native';
+import React from 'react';
+import Color from '../Color/Color';
+import type { ColorVariantType } from '../Color/type';
+import Typography from '../Typography/Typography';
+import Icon from '../Icon';
+import type { IconNameProps } from '../Icon';
+
+interface LabelProps {
+  label?: string;
+  children?: React.ReactNode;
+  color?: string;
+  icon?: IconNameProps;
+  size?: 'medium' | 'small';
+}
+
+type LabelColor = ColorVariantType;
+
+const validColors: LabelColor[] = [
+  'default',
+  'success',
+  'danger',
+  'primary',
+  'warning',
+  'info',
+  'purple',
+  'orange',
+];
+
+const LABEL_COLOR_MAP: Record<
+  LabelColor,
+  {
+    backgroundColor: string;
+    textColor: string;
+  }
+> = {
+  default: {
+    backgroundColor: Color.gray[50],
+    textColor: Color.gray[900],
+  },
+  success: {
+    backgroundColor: Color.success[50],
+    textColor: Color.success[300],
+  },
+  danger: {
+    backgroundColor: Color.danger[50],
+    textColor: Color.danger[300],
+  },
+  primary: {
+    backgroundColor: Color.primary[50],
+    textColor: Color.primary[300],
+  },
+  warning: {
+    backgroundColor: Color.warning[50],
+    textColor: Color.warning[300],
+  },
+  info: {
+    backgroundColor: Color.info[50],
+    textColor: Color.info[300],
+  },
+  orange: {
+    backgroundColor: Color.orange[50],
+    textColor: Color.orange[300],
+  },
+  purple: {
+    backgroundColor: Color.purple[50],
+    textColor: Color.purple[300],
+  },
+};
+
+export default function Label({
+  label,
+  icon,
+  children,
+  color = 'default',
+}: LabelProps) {
+  const safeColor = validColors.includes(color as LabelColor)
+    ? (color as LabelColor)
+    : 'default';
+  const colors = LABEL_COLOR_MAP[safeColor];
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: colors.backgroundColor }]}
+    >
+      {children ? (
+        children
+      ) : (
+        <View style={styles.content}>
+          {icon && (
+            <Icon name={icon} color={colors.textColor} style={styles.icon} />
+          )}
+          <Typography
+            variant="t2"
+            color={colors.textColor}
+            style={{ color: colors.textColor }}
+          >
+            {label}
+          </Typography>
+        </View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    borderRadius: 4,
+    alignSelf: 'flex-start',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    marginLeft: 4,
+  },
+});

package/src/LabelForm/LabelForm.tsx

@@ -0,0 +1,12 @@
+import { View } from 'react-native';
+import Typography from '../Typography/Typography';
+
+export default function LabelForm({ title }: { title: string }) {
+  return (
+    <View>
+      <Typography variant="t2" weight="semibold">
+        {title}
+      </Typography>
+    </View>
+  );
+}

package/src/List/List.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import Color from '../Color/Color';
+import Theme from '../Theme/Theme';
+import type { ListItemProps, ListProps } from './type';
+
+export default function List({ children, style }: ListProps) {
+  const validChildren = React.Children.toArray(children).filter((child) =>
+    React.isValidElement(child)
+  );
+
+  return (
+    <View style={[styles.container, style]}>
+      {React.Children.map(validChildren, (child, index) => {
+        const isLast = index === validChildren.length - 1;
+        return React.isValidElement<ListItemProps>(child)
+          ? React.cloneElement(child, { isLast })
+          : child;
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    borderWidth: 1,
+    borderRadius: Theme.radius.md,
+    borderColor: Color.gray[100],
+    overflow: 'hidden',
+  },
+});

package/src/List/ListItem.tsx

@@ -0,0 +1,34 @@
+import { StyleSheet, View, TouchableOpacity } from 'react-native';
+import Color from '../Color/Color';
+import Theme from '../Theme/Theme';
+import type { ListItemProps } from './type';
+
+export default function ListItem({
+  children,
+  onPress,
+  style,
+  isLast = false,
+}: ListItemProps) {
+  const Wrapper = onPress ? TouchableOpacity : View;
+
+  return (
+    <Wrapper
+      onPress={onPress}
+      style={[styles.container, !isLast && styles.withBorder, style]}
+    >
+      {children}
+    </Wrapper>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: Theme.spacing.md,
+    paddingVertical: Theme.spacing.sm,
+    backgroundColor: Color.base.white100,
+  },
+  withBorder: {
+    borderBottomWidth: 1,
+    borderBottomColor: Color.gray[100],
+  },
+});

package/src/List/type.tsx

@@ -0,0 +1,14 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+export interface ListItemProps {
+  children: React.ReactNode;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  isLast?: boolean;
+  index?: number;
+}
+
+export interface ListProps {
+  children: React.ReactNode;
+  style?: ViewStyle;
+}

package/src/Loading/Loading.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { View, ActivityIndicator, StyleSheet, Text } from 'react-native';
+
+interface LoadingProps {
+  message?: string;
+  size?: 'small' | 'large' | number;
+  color?: string;
+  variant?: 'circle' | 'square';
+}
+
+const Loading: React.FC<LoadingProps> = ({
+  message = 'Loading...',
+  size = 'large',
+  color = '#007AFF',
+  variant = 'circle',
+}) => {
+  return (
+    <View style={styles.wrapper}>
+      <View
+        style={[
+          styles.container,
+          variant === 'square' ? styles.square : styles.circle,
+        ]}
+      >
+        <ActivityIndicator size={size} color={color} />
+      </View>
+      <Text style={styles.message}>{message}</Text>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flex: 1,
+    zIndex: 2000,
+  },
+  container: {
+    padding: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  circle: {},
+  square: {
+    backgroundColor: '#F0F0F0',
+    borderRadius: 12,
+    width: 100,
+    height: 100,
+  },
+  message: {
+    marginTop: 12,
+    fontSize: 16,
+    color: '#333',
+  },
+});
+
+export default Loading;

package/src/Modal/Modal.tsx

@@ -0,0 +1,179 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  Modal,
+  TouchableOpacity,
+  Animated,
+  type DimensionValue,
+  SafeAreaView,
+  Platform,
+  type ViewStyle,
+} from 'react-native';
+
+interface ModalPopUpProps {
+  isOpen: boolean;
+  onClose?: (isOpen?: boolean) => void;
+  children: React.ReactNode;
+  backdrop?: boolean;
+  closable?: boolean;
+  onRequestClose?: () => void;
+  bgColor?: string;
+  width?: DimensionValue;
+  height?: DimensionValue; // tetap ada, tapi tidak akan digunakan kalau ingin auto height
+  containerStyle?: ViewStyle;
+  modalStyle?: ViewStyle;
+}
+
+const ModalPopUp: React.FC<ModalPopUpProps> = ({
+  isOpen,
+  onClose,
+  children,
+  backdrop = true,
+  closable = true,
+  onRequestClose,
+  bgColor = '#fff',
+  width = '90%',
+  containerStyle,
+  modalStyle,
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const scaleAnim = useState(() => new Animated.Value(0))[0];
+
+  const showModal = useCallback(() => {
+    setIsVisible(true);
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      damping: 15,
+      stiffness: 100,
+    }).start();
+  }, [scaleAnim]);
+
+  const hideModal = useCallback(() => {
+    Animated.spring(scaleAnim, {
+      toValue: 0,
+      useNativeDriver: true,
+    }).start();
+    setTimeout(() => {
+      setIsVisible(false);
+      onClose?.(false);
+    }, 200);
+  }, [scaleAnim, onClose]);
+
+  const handleBackdropPress = useCallback(() => {
+    if (closable) {
+      if (onRequestClose) {
+        onRequestClose();
+      } else {
+        hideModal();
+      }
+    }
+  }, [closable, onRequestClose, hideModal]);
+
+  useEffect(() => {
+    if (isOpen) {
+      showModal();
+    } else {
+      hideModal();
+    }
+  }, [isOpen, showModal, hideModal]);
+
+  const modalContentStyle = StyleSheet.flatten([
+    {
+      transform: [{ scale: scaleAnim }],
+      backgroundColor: bgColor,
+      width: width,
+      maxHeight: '80%' as `${number}%`,
+    },
+    modalStyle,
+  ]);
+
+  return (
+    <Modal
+      transparent
+      visible={isVisible}
+      onRequestClose={handleBackdropPress}
+      statusBarTranslucent
+    >
+      <View style={[styles.modalContainer, containerStyle]}>
+        {backdrop && (
+          <TouchableOpacity
+            style={[styles.backdrop, styles.backdropTouch]}
+            activeOpacity={1}
+            onPress={handleBackdropPress}
+          />
+        )}
+        <Animated.View style={[styles.modalContent, modalContentStyle]}>
+          {closable && (
+            <View style={styles.closeButtonContainer}>
+              <TouchableOpacity
+                onPress={hideModal}
+                style={styles.closeButton}
+                hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+              />
+            </View>
+          )}
+          <SafeAreaView style={styles.contentContainer}>
+            {children}
+          </SafeAreaView>
+        </Animated.View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  },
+  backdropTouch: {
+    width: '100%',
+    height: '100%',
+  },
+  modalContent: {
+    borderRadius: 16,
+    overflow: 'visible',
+    ...Platform.select({
+      ios: {
+        shadowColor: '#000',
+        shadowOffset: {
+          width: 0,
+          height: 2,
+        },
+        shadowOpacity: 0.25,
+        shadowRadius: 4,
+      },
+      android: {
+        elevation: 5,
+      },
+    }),
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 10,
+    right: 10,
+    zIndex: 1,
+  },
+  closeButton: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: '#ccc',
+  },
+  contentContainer: {
+    padding: 16, // bisa diubah sesuai kebutuhan
+  },
+});
+
+export default ModalPopUp;

package/src/NativeRnKit.ts

@@ -0,0 +1,8 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  multiply(a: number, b: number): number;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('RnKit');

package/src/Provider/FooterProvider.tsx

@@ -0,0 +1,26 @@
+import { createContext, useContext, useState, type ReactNode } from 'react';
+
+interface FooterContextType {
+  footer: ReactNode | null;
+  setFooter: (footer: ReactNode | null) => void;
+}
+
+const FooterContext = createContext<FooterContextType | undefined>(undefined);
+
+export const FooterProvider = ({ children }: { children: ReactNode }) => {
+  const [footer, setFooter] = useState<ReactNode | null>(null);
+
+  return (
+    <FooterContext.Provider value={{ footer, setFooter }}>
+      {children}
+    </FooterContext.Provider>
+  );
+};
+
+export const useFooter = () => {
+  const context = useContext(FooterContext);
+  if (!context) {
+    throw new Error('useFooter must be used within a FooterProvider');
+  }
+  return context;
+};

package/src/Provider/LayoutWithFooter.tsx

@@ -0,0 +1,27 @@
+import { StyleSheet, SafeAreaView } from 'react-native';
+import { useFooter } from './Provider';
+import React from 'react';
+import Color from '../Color/Color';
+
+export default function LayoutWithFooter({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { footer } = useFooter();
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <SafeAreaView style={[styles.content, footer && styles.footer]}>
+        {children}
+      </SafeAreaView>
+      {footer}
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Color.base.white100 },
+  content: { flex: 1 },
+  footer: { marginBottom: 60 },
+});

package/src/Provider/Provider.tsx

@@ -0,0 +1,53 @@
+// FooterContext.js
+import { createContext, useContext, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import LayoutWithFooter from './LayoutWithFooter';
+import RequiredUpdateAppsProvider from './RequiredUpdateAppsProvider';
+import { type ReactNode } from 'react';
+import type { RequiredUpdateAppsProviderProps } from './type';
+
+interface FooterContextType {
+  footer: any | null;
+  setFooter: (value: any) => void;
+}
+
+interface ProviderProps {
+  children: ReactNode;
+  requiredUpdated: boolean;
+  updateConfig: RequiredUpdateAppsProviderProps;
+}
+
+const FooterContext = createContext<FooterContextType | undefined>(undefined);
+
+export default function Provider({
+  children,
+  requiredUpdated = false,
+  updateConfig,
+}: ProviderProps) {
+  const [footer, setFooter] = useState(null);
+
+  return (
+    <View style={styles.container}>
+      {requiredUpdated ? (
+        <RequiredUpdateAppsProvider {...updateConfig} />
+      ) : null}
+      <FooterContext.Provider value={{ footer, setFooter }}>
+        <LayoutWithFooter>{children}</LayoutWithFooter>
+      </FooterContext.Provider>
+    </View>
+  );
+}
+
+export const useFooter = () => {
+  const context = useContext(FooterContext);
+  if (context === undefined) {
+    throw new Error('useFooter must be used within a Footer Provider');
+  }
+  return context;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/Provider/RequiredUpdateAppsProvider.tsx

@@ -0,0 +1,58 @@
+import { Image, StyleSheet, View } from 'react-native';
+import { Button, Color, Container, Modal, Typography } from '..';
+import type { RequiredUpdateAppsProviderProps } from './type';
+import { useEffect } from 'react';
+
+export default function RequiredUpdateAppsProvider({
+  title,
+  description,
+  buttonText = 'Update Sekarang',
+  onUpdate,
+}: RequiredUpdateAppsProviderProps) {
+  useEffect(() => {
+    onUpdate?.(false);
+  }, [onUpdate]);
+  return (
+    <View>
+      <Modal height={300} isOpen={true} closable={false}>
+        <Image
+          source={require('../../example/assets/updateapps.png')}
+          style={styles.image}
+        />
+        <Container style={styles.container}>
+          <Typography
+            variant="h4"
+            weight="semibold"
+            color={Color.gray[800]}
+            center
+          >
+            {title}
+          </Typography>
+          <Typography
+            variant="t1"
+            weight="regular"
+            color={Color.gray[600]}
+            center
+          >
+            {description}.
+          </Typography>
+          <View style={{}}>
+            <Button title={buttonText} color="primary" />
+          </View>
+        </Container>
+      </Modal>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  image: {
+    position: 'absolute',
+    marginTop: -60,
+    left: 30,
+  },
+  container: {
+    gap: 20,
+    marginTop: 80,
+  },
+});

package/src/Provider/type.tsx

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

package/src/RadioButton/README.md

@@ -0,0 +1,43 @@
+# 📦 RadioButton – Komponen React Native
+
+Komponen `RadioButton` ini digunakan untuk menampilkan daftar pilihan dalam bentuk radio button di aplikasi React Native.
+![Deskripsi Alt](../../assets/doc/RadioButton/RadioButton.png)
+
+## 📄 Import
+
+```tsx
+import RadioButton from './RadioButton';
+```
+
+## ⚙️ Props
+
+| Nama Props      | Tipe                                       | Default     | Deskripsi                                                                 |
+|------------------|--------------------------------------------|-------------|---------------------------------------------------------------------------|
+| `items`          | `RadioButtonItem[]`                        | -           | Daftar item radio yang ingin ditampilkan.                                |
+| `selectedValue`  | `string \| null`                           | `null`      | Nilai yang saat ini dipilih oleh pengguna.                               |
+| `onChange`       | `(value: string) => void`                  | -           | Fungsi callback saat item dipilih.                                       |
+| `direction`      | `'vertical' \| 'horizontal'`               | `'vertical'`| Arah layout dari item radio: vertikal atau horizontal.                   |
+
+## 📄 Tipe `RadioButtonItem`
+
+```ts
+interface RadioButtonItem {
+  label: string;      // Teks yang ditampilkan untuk radio
+  value: string;      // Nilai yang digunakan untuk identifikasi
+  disabled?: boolean; // Menonaktifkan tombol radio
+}
+```
+
+## 💡 Contoh Penggunaan
+
+```tsx
+<RadioButton
+  items={[
+    { label: 'Laki-laki', value: 'M' },
+    { label: 'Perempuan', value: 'F' },
+  ]}
+  selectedValue={gender}
+  onChange={setGender}
+  direction="horizontal"
+/>
+```