feature components

deskripsi:
- BaseBox, TextCustom
- Perbaikan home & profile

components/Box/BaseBox.tsx

@@ -0,0 +1,59 @@
+import { AccentColor } from "@/constants/color-palet";
+import { StyleProp, TouchableHighlight, View, ViewStyle } from "react-native";
+
+interface BaseBoxProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  marginBottom?: number;
+  padding?: number;
+  paddingInline?: number;
+}
+
+export default function BaseBox({
+  children,
+  style,
+  onPress,
+  marginBottom = 16,
+  padding = 12,
+}: BaseBoxProps) {
+  return (
+    <>
+      {onPress ? (
+        <TouchableHighlight
+          onPress={onPress}
+          style={[
+            {
+              backgroundColor: AccentColor.darkblue,
+              borderColor: AccentColor.blue,
+              borderWidth: 1,
+              borderRadius: 10,
+              marginBottom,
+              padding,
+            },
+            style,
+          ]}
+          // activeOpacity={0.7}
+        >
+          <View>{children}</View>
+        </TouchableHighlight>
+      ) : (
+        <View
+          style={[
+            {
+              backgroundColor: AccentColor.darkblue,
+              borderColor: AccentColor.blue,
+              borderWidth: 1,
+              borderRadius: 10,
+              marginBottom,
+              padding,
+            },
+            style,
+          ]}
+        >
+          {children}
+        </View>
+      )}
+    </>
+  );
+}

components/Grid/GridCustom.tsx

@@ -0,0 +1,113 @@
+import React, { createContext, useContext, useMemo } from "react";
+import { StyleSheet, useWindowDimensions, View, ViewStyle } from "react-native";
+
+// Tipe untuk span
+type SpanValue = {
+  base?: number;
+  md?: number;
+  lg?: number;
+};
+
+// Props untuk Grid.Col
+interface ColProps {
+  children: React.ReactNode;
+  span?: number | SpanValue;
+  style?: ViewStyle;
+}
+
+// Props untuk Grid
+interface GridProps {
+  children: React.ReactNode;
+  gap?: number;
+  columns?: number;
+  containerStyle?: ViewStyle;
+}
+
+// Context untuk menyimpan konfigurasi grid
+type GridContextType = {
+  gap: number;
+  columns: number;
+};
+
+const GridContext = createContext<GridContextType>({
+  gap: 0,
+  columns: 12,
+});
+
+const useGrid = () => useContext(GridContext);
+
+// Helper untuk menentukan span berdasarkan lebar layar
+const getSpan = (
+  spanProp: number | SpanValue | undefined,
+  width: number
+): number => {
+  if (typeof spanProp === "number") return spanProp;
+
+  const span = spanProp || { base: 12 };
+
+  if (width >= 992 && span.lg) return span.lg;
+  if (width >= 768 && span.md) return span.md;
+  return span.base ?? 12;
+};
+
+// Grid Component
+const GridComponent: React.FC<GridProps> = ({
+  children,
+  gap = 6,
+  columns = 12,
+  containerStyle,
+}) => {
+  const contextValue = useMemo(() => ({ gap, columns }), [gap, columns]);
+
+  return (
+    <GridContext.Provider value={contextValue}>
+      <View
+        style={[
+          styles.container,
+          { marginHorizontal: -gap / 2 },
+          containerStyle,
+        ]}
+      >
+        {React.Children.map(children, (child) =>
+          React.isValidElement(child)
+            ? React.cloneElement(child as React.ReactElement<ColProps>, {})
+            : child
+        )}
+      </View>
+    </GridContext.Provider>
+  );
+};
+
+// Grid.Col Component
+const Col: React.FC<ColProps> = ({ children, span, style }) => {
+  const { gap, columns } = useGrid();
+  const { width } = useWindowDimensions();
+
+  const colSpan = getSpan(span, width);
+  const margin = gap / 2;
+
+  const styles = StyleSheet.create({
+    col: {
+      flexBasis: `${(100 / columns) * colSpan}%`,
+      paddingVertical: margin,
+    //   marginBottom: gap,
+      marginBlock: gap,
+    },
+  });
+
+  return <View style={[styles.col, style]}>{children}</View>;
+};
+
+// Export bersama-sama
+const Grid = Object.assign(GridComponent, { Col });
+
+export default Grid;
+
+// Styles
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    justifyContent: "flex-start",
+  },
+});

components/Text/TextCustom.tsx

@@ -5,7 +5,10 @@ import {
   TEXT_SIZE_SMALL,
 } from "@/constants/constans-value";
 import React from "react";
-import { StyleProp, Text as RNText, TextStyle, StyleSheet } from "react-native";
+import { Text as RNText, StyleProp, StyleSheet, TextStyle } from "react-native";
+
+// Tambahkan type TextAlignProps agar lebih type-safe
+type TextAlign = "left" | "center" | "right";
 
 interface TextCustomProps {
   children: string;
@@ -13,7 +16,9 @@ interface TextCustomProps {
   bold?: boolean;
   semiBold?: boolean;
   size?: "default" | "large" | "small";
-  color?: "default" | "primary" | "secondary";
+  color?: "default" | "yellow" | "red";
+  align?: TextAlign; // Prop untuk alignment
+  truncate?: boolean | number;
 }
 
 const TextCustom: React.FC<TextCustomProps> = ({
@@ -23,6 +28,8 @@ const TextCustom: React.FC<TextCustomProps> = ({
   semiBold = false,
   size = "default",
   color = "default",
+  align = "left", // Default alignment
+  truncate = false,
 }) => {
   const getStyle = () => {
     let selectedStyles = [];
@@ -39,8 +46,13 @@ const TextCustom: React.FC<TextCustomProps> = ({
     else if (size === "small") selectedStyles.push(styles.small);
 
     // Color
-    if (color === "primary") selectedStyles.push(styles.primaryColor);
-    else if (color === "secondary") selectedStyles.push(styles.secondaryColor);
+    if (color === "yellow") selectedStyles.push(styles.yellow);
+    else if (color === "red") selectedStyles.push(styles.red);
+
+    // Alignment
+    if (align) {
+      selectedStyles.push({ textAlign: align });
+    }
 
     // Override with passed style
     if (style) selectedStyles.push(style);
@@ -48,16 +60,26 @@ const TextCustom: React.FC<TextCustomProps> = ({
     return selectedStyles;
   };
 
-  return <RNText style={getStyle()}>{children}</RNText>;
+  return (
+    <RNText
+      numberOfLines={
+        typeof truncate === "number" ? truncate : truncate ? 1 : undefined
+      }
+      ellipsizeMode="tail"
+      style={getStyle()}
+    >
+      {children}
+    </RNText>
+  );
 };
 
 export default TextCustom;
 
 export const styles = StyleSheet.create({
   default: {
-    // fontFamily: "Poppins-Regular", // Ganti dengan font yang kamu gunakan
     fontSize: TEXT_SIZE_MEDIUM,
     color: MainColor.white,
+    fontFamily: "Poppins-Regular",
   },
   bold: {
     fontFamily: "Poppins-Bold",
@@ -73,10 +95,10 @@ export const styles = StyleSheet.create({
   small: {
     fontSize: TEXT_SIZE_SMALL,
   },
-  primaryColor: {
-    color: "#007AFF", // Warna utama aplikasi kamu
+  yellow: {
+    color: MainColor.yellow,
   },
-  secondaryColor: {
-    color: "#666",
+  red: {
+    color: MainColor.red,
   },
 });

components/index.ts

@@ -8,12 +8,15 @@ import DrawerCustom from "./Drawer/DrawerCustom";
 import MenuDrawerDynamicGrid from "./Drawer/MenuDrawerDynamicGird";
 // ShareComponent
 import ViewWrapper from "./_ShareComponent/ViewWrapper";
-import TruncatedText from "./_ShareComponent/TruncatedText";
 import Spacing from "./_ShareComponent/Spacing";
 // Text
 import TextCustom from "./Text/TextCustom";
 // TextInput
 import { TextInputCustom } from "./TextInput/TextInputCustom";
+// Grid
+import Grid from "./Grid/GridCustom";
+// Box
+import BaseBox from "./Box/BaseBox";
 
 export {
   AlertCustom,
@@ -25,10 +28,13 @@ export {
   MenuDrawerDynamicGrid,
   // ShareComponent
   Spacing,
-  TruncatedText,
   ViewWrapper,
   // Text
   TextCustom,
   // TextInput
   TextInputCustom,
+  // Grid
+  Grid,
+  // Box
+  BaseBox,
 };