Feature:

Add:
- Component alert system
- Page collaboration Id

Fix:
- Box base
- Menu drawer dibuatkan interface

# No Issue '

components/Alert/AlertDefaultSystem.ts

@@ -0,0 +1,31 @@
+import { Alert } from "react-native";
+
+export default function AlertDefaultSystem({
+  title,
+  message,
+  textLeft,
+  textRight,
+  onPressLeft,
+  onPressRight,
+}: {
+  title: string;
+  message: string;
+  textLeft: string;
+  textRight: string;
+  onPressLeft?: () => void;
+  onPressRight?: () => void;
+}) {
+  return Alert.alert(title, message, [
+    {
+      style: "cancel",
+      text: textLeft,
+      onPress: () => onPressLeft?.(),
+    },
+    {
+      style: "default",
+      text: textRight,
+      isPreferred: true,
+      onPress: () => onPressRight?.(),
+    },
+  ]);
+}

components/Box/BoxWithHeaderInformation.tsx

@@ -12,7 +12,7 @@ export default function BoxWithHeaderSection({
 }) {
   return (
     <>
-      <BaseBox href={href} onPress={onPress} paddingTop={5}>
+      <BaseBox href={href} onPress={onPress} style={{ paddingTop: 5 }}>
         {children}
       </BaseBox>
     </>

components/Drawer/MenuDrawerDynamicGird.tsx

@@ -2,13 +2,26 @@ import { AccentColor, MainColor } from "@/constants/color-palet";
 import { TEXT_SIZE_SMALL } from "@/constants/constans-value";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { IMenuDrawerItem } from "../_Interface/types";
+import { Href } from "expo-router";
 
-const MenuDrawerDynamicGrid = ({ data, columns = 3, onPressItem }: any) => {
+type IMenuDrawerItemProps = {
+    icon: React.ReactNode;
+    label: string;
+    path?: Href;
+    color?: string;
+}
+
+interface MenuDrawerDynamicGridProps {
+    data: IMenuDrawerItemProps[];
+    columns?: number;
+    onPressItem?: (item: IMenuDrawerItemProps) => void;
+}
+const MenuDrawerDynamicGrid = ({ data, columns = 4, onPressItem }: MenuDrawerDynamicGridProps) => {
   const numColumns = columns;
 
   return (
     <View style={styles.container}>
-      {data.map((item: IMenuDrawerItem, index: any) => (
+      {data.map((item: IMenuDrawerItemProps, index: any) => (
         <TouchableOpacity
           key={index}
           style={[styles.itemContainer, { flexBasis: `${100 / numColumns}%` }]}

components/index.ts

@@ -1,5 +1,6 @@
 // Alert
 import AlertCustom from "./Alert/AlertCustom";
+import AlertDefaultSystem from "./Alert/AlertDefaultSystem";
 // Button
 import LeftButtonCustom from "./Button/BackButton";
 import ButtonCenteredOnly from "./Button/ButtonCenteredOnly";
@@ -42,33 +43,31 @@ import ScrollableCustom from "./Scroll/ScrollCustom";
 // ShareComponent
 import AvatarUsernameAndOtherComponent from "./_ShareComponent/AvataraAndOtherHeaderComponent";
 import Spacing from "./_ShareComponent/Spacing";
-import ViewWrapper from "./_ShareComponent/ViewWrapper";
 import TabBarBackground from "./_ShareComponent/TabBarBackground";
+import ViewWrapper from "./_ShareComponent/ViewWrapper";
 
 export {
   AlertCustom,
+  AlertDefaultSystem,
   // Image
   AvatarCustom,
   // ShareComponent
   AvatarUsernameAndOtherComponent,
+  // Button
+  LeftButtonCustom as BackButton,
   // Box
   BaseBox,
   BoxButtonOnFooter,
-  BoxWithHeaderSection,
-  // Button
-  LeftButtonCustom as BackButton,
-  ButtonCenteredOnly,
+  BoxWithHeaderSection, ButtonCenteredOnly,
   ButtonCustom,
-  FloatingButton,
-  DotButton,
   // Center
   CenterCustom,
   // Clickable
   ClickableCustom,
   // Divider
-  DividerCustom,
+  DividerCustom, DotButton,
   // Drawer
-  DrawerCustom,
+  DrawerCustom, FloatingButton,
   // Grid
   Grid,
   InformationBox,
@@ -82,9 +81,8 @@ export {
   SelectCustom,
   // ShareComponent
   Spacing,
-  TabBarBackground,
   // Stack
-  StackCustom,
+  StackCustom, TabBarBackground,
   // TextArea
   TextAreaCustom,
   // Text
@@ -92,5 +90,6 @@ export {
   // TextInput
   TextInputCustom,
   // ViewWrapper
-  ViewWrapper,
+  ViewWrapper
 };
+