ripal-ui 1.0.1 → 1.0.2

package/components/BottomSheet.tsx

@@ -0,0 +1,197 @@
+import React, { useEffect, useRef, useState, ReactNode } from 'react';
+import {
+	Animated,
+	View,
+	TouchableOpacity,
+	StyleSheet,
+	Dimensions,
+	PanResponder,
+	TouchableWithoutFeedback,
+	ScrollView,
+	Keyboard,
+} from 'react-native';
+import { Separator, Text } from '../elements';
+import config from '../config';
+
+const { height: screenHeight } = Dimensions.get('window');
+
+// Define props interface
+interface BottomSheetProps {
+	isVisible: boolean;
+	onClose: () => void;
+	children: ReactNode;
+	height?: number | string;
+	scroll?: boolean;
+	style?: object;
+	contentContainerStyle?: object;
+}
+
+const BottomSheet: React.FC<BottomSheetProps> = ({
+	isVisible,
+	onClose,
+	children,
+	height = 'auto',
+	scroll = false,
+	style,
+	contentContainerStyle,
+}) => {
+	const [visible, setVisible] = useState(isVisible);
+	const translateY = useRef(new Animated.Value(screenHeight)).current;
+	const scrollOffset = useRef(0); // Keep track of ScrollView offset
+	const keyboardHeight = useRef(new Animated.Value(0)).current; // Use Animated.Value for keyboard height
+
+	// Create a PanResponder to handle the dragging gesture
+	const panResponder = useRef(
+		PanResponder.create({
+			onMoveShouldSetPanResponder: (evt, gestureState) => {
+				return Math.abs(gestureState.dy) > 5;
+			},
+			onPanResponderMove: (evt, gestureState) => {
+				translateY.setValue(Math.max(gestureState.dy, 0));
+			},
+			onPanResponderRelease: (evt, gestureState) => {
+				const isClosing = gestureState.dy > 100;
+				if (isClosing) {
+					Animated.timing(translateY, {
+						toValue: screenHeight,
+						duration: 300,
+						useNativeDriver: false,
+					}).start(() => setVisible(false));
+					onClose();
+				} else {
+					Animated.timing(translateY, {
+						toValue: 0,
+						duration: 300,
+						useNativeDriver: false,
+					}).start();
+				}
+			},
+		})
+	).current;
+
+	useEffect(() => {
+		if (isVisible) {
+			setVisible(true);
+			Animated.timing(translateY, {
+				toValue: 0,
+				duration: 300,
+				useNativeDriver: false,
+			}).start();
+		} else {
+			Animated.timing(translateY, {
+				toValue: screenHeight,
+				duration: 300,
+				useNativeDriver: false,
+			}).start(() => setVisible(false));
+		}
+	}, [isVisible]);
+
+	useEffect(() => {
+		// Handle keyboard show and hide
+		const keyboardDidShowListener = Keyboard.addListener(
+			'keyboardDidShow',
+			(event) => {
+				Animated.timing(keyboardHeight, {
+					toValue: event.endCoordinates.height,
+					duration: 300,
+					useNativeDriver: false, // Layout animation
+				}).start();
+			}
+		);
+		const keyboardDidHideListener = Keyboard.addListener(
+			'keyboardDidHide',
+			() => {
+				Animated.timing(keyboardHeight, {
+					toValue: 0,
+					duration: 300,
+					useNativeDriver: false, // Layout animation
+				}).start();
+			}
+		);
+
+		// Cleanup listeners on component unmount
+		return () => {
+			keyboardDidShowListener.remove();
+			keyboardDidHideListener.remove();
+		};
+	}, []);
+
+	if (!visible) return null;
+
+	return (
+		<View style={StyleSheet.absoluteFill}>
+			{/* Background Overlay */}
+			<TouchableWithoutFeedback onPress={onClose}>
+				<View style={styles.overlay} />
+			</TouchableWithoutFeedback>
+
+			{/* Bottom Sheet */}
+			<Animated.View
+				{...panResponder.panHandlers}
+				style={[
+					styles.sheet,
+					{ height: height, ...style },
+					{
+						transform: [
+							{ translateY },
+							{ translateY: keyboardHeight.interpolate({
+								inputRange: [0, 1],
+								outputRange: [0, -1], // Interpolate for smoother transition
+							}) }
+						]
+					},
+				]}
+			>
+				{/* Children */}
+				<View style={styles.dragIndicatorContainer}>
+					<TouchableWithoutFeedback {...panResponder.panHandlers}>
+						<Separator height={6} style={{ borderRadius: 99 }} width='12%' color={config.colors.slate[300]} />
+					</TouchableWithoutFeedback>
+				</View>
+				
+				<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+					<View>
+						{scroll ? (
+							<ScrollView
+								onScroll={(e) => (scrollOffset.current = e.nativeEvent.contentOffset.y)} // Update scrollOffset correctly
+								scrollEventThrottle={16}
+								showsVerticalScrollIndicator={false}
+								contentContainerStyle={contentContainerStyle}
+							>
+								{children}
+							</ScrollView>
+						) : (
+							children
+						)}
+					</View>
+				</TouchableWithoutFeedback>
+			</Animated.View>
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	overlay: {
+		...StyleSheet.absoluteFillObject,
+		backgroundColor: 'rgba(0, 0, 0, 0.7)', // Semi-transparent black
+	},
+	sheet: {
+		position: 'absolute',
+		bottom: 0,
+		left: 0,
+		right: 0,
+		paddingHorizontal: 20,
+		paddingBottom: 20,
+		backgroundColor: '#fff',
+		borderTopLeftRadius: 20,
+		borderTopRightRadius: 20,
+		elevation: 5,
+	},
+	dragIndicatorContainer: {
+		width: '100%',
+		alignItems: 'center',
+		paddingVertical: 10,
+	},
+});
+
+export default BottomSheet;

package/components/Carousel.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Dimensions, Pressable, ScrollView, StyleSheet, View, ViewStyle } from "react-native";
+import { Text } from "../elements";
+
+// Define types for the CarouselItem props
+interface CarouselItemProps {
+    children: React.ReactNode;
+    itemWidth: number;
+    onPress?: () => void;
+    style?: ViewStyle;
+}
+
+// Define the CarouselItem component
+const CarouselItem: React.FC<CarouselItemProps> = ({ children, itemWidth, onPress, style }) => {
+    return (
+        <Pressable style={{ width: itemWidth, ...style }} onPress={onPress}>
+            {children}
+        </Pressable>
+    );
+};
+
+// Define types for the Carousel props
+interface CarouselProps {
+    children: React.ReactNode;
+    itemWidth?: number;
+    showIndicator?: boolean;
+}
+
+// Define the Carousel component
+const Carousel: React.FC<CarouselProps> = ({
+    children,
+    itemWidth = 0.6 * Dimensions.get('window').width,
+    showIndicator = false,
+}) => {
+    return (
+        <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={showIndicator}
+            contentContainerStyle={styles.container}
+        >
+            <View></View>
+            {React.Children.map(children, (child) =>
+                React.cloneElement(child as React.ReactElement<any>, { itemWidth })
+            )}
+            <View></View>
+        </ScrollView>
+    );
+};
+
+// Define styles
+const styles = StyleSheet.create({
+    area: {
+        // Add any specific styles if needed
+    },
+    container: {
+        gap: 20,
+    },
+});
+
+// Export components
+export { Carousel, CarouselItem };

package/components/Circle.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import { Pressable, StyleSheet, PressableProps, ViewStyle } from "react-native";
+import config from "../config";
+
+interface CircleProps extends PressableProps {
+	size?: number; // Optional size for the circle
+	color?: string; // Optional color for the circle
+	rounded?: number; // Optional rounded value for the border radius
+	children?: React.ReactNode; // Allows for any valid React node
+	onPress?: () => void; // Optional onPress function
+}
+
+const Circle: React.FC<CircleProps> = ({
+	size = 24,
+	color = config.colors.primary,
+	children,
+	onPress,
+	rounded = 999,
+}) => {
+	return (
+		<Pressable
+			onPress={onPress}
+			style={{
+				...styles.area,
+				backgroundColor: color,
+				height: size,
+				width: size, // Added width to maintain aspect ratio
+				borderRadius: rounded,
+			}}
+		>
+			{children}
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	area: {
+		aspectRatio: 1,
+		alignItems: 'center',
+		justifyContent: 'center',
+	},
+});
+
+export default Circle;

package/components/Tab.tsx

@@ -0,0 +1,90 @@
+import React, { useState, ReactNode } from "react";
+import { Pressable, ScrollView, StyleSheet, View } from "react-native";
+import Text from "../elements/Text";
+import Inline from "../elements/Inline";
+import config from "../config";
+
+// Define the props for the TabScreen component
+interface TabScreenProps {
+    children: ReactNode;
+}
+
+// TabScreen component
+const TabScreen: React.FC<TabScreenProps> = ({ children }) => {
+    return <>{children}</>;
+};
+
+// Define the props for the Tab component
+interface TabProps {
+    children: React.ReactElement<{ title: string }>[];
+}
+
+// Tab component
+const Tab: React.FC<TabProps> = ({ children }) => {
+    const [index, setIndex] = useState(0);
+
+    return (
+        <View>
+            {
+                children.length > 3 ? (
+                    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tab_area}>
+                        {children.map((child, c) => {
+                            const isActive = c === index;
+                            return (
+                                <Pressable
+                                    key={c}
+                                    style={{
+                                        ...styles.tab_item,
+                                        borderBottomColor: isActive ? config.colors.primary : config.colors.slate[200],
+                                    }}
+                                    onPress={() => setIndex(c)}
+                                >
+                                    <Text 
+                                        color={isActive ? config.colors.primary : config.colors.slate[500]}
+                                        weight={isActive ? "600SemiBold" : "400Regular"}
+                                    >
+                                        {child.props.title}
+                                    </Text>
+                                </Pressable>
+                            );
+                        })}
+                    </ScrollView>
+                ) : (
+                    <Inline style={styles.tab_area} gap={0}>
+                        {children.map((child, c) => {
+                            const isActive = c === index;
+                            return (
+                                <Inline justifyContent="center" key={c} style={{
+                                    ...styles.tab_item,
+                                    borderBottomColor: isActive ? config.colors.primary : config.colors.slate[200],
+                                }} onPress={() => setIndex(c)}>
+                                    <Text 
+                                        color={isActive ? config.colors.primary : config.colors.slate[500]}
+                                        weight={isActive ? "600SemiBold" : "400Regular"}
+                                    >
+                                        {child.props.title}
+                                    </Text>
+                                </Inline>
+                            );
+                        })}
+                    </Inline>
+                )
+            }
+            {children[index]}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    tab_area: {
+        marginBottom: 10,
+    },
+    tab_item: {
+        paddingHorizontal: 20,
+        paddingVertical: 12,
+        flexGrow: 1,
+        borderBottomWidth: 1,
+    }
+});
+
+export { Tab, TabScreen };

package/components/{Table.jsx → Table.tsx}

@@ -1,10 +1,18 @@
 import React from 'react';
-import { View, ScrollView, StyleSheet } from 'react-native';
+import { View, ScrollView, StyleSheet, ViewStyle } from 'react-native';
 import Text from '../elements/Text';
 import config from '../config';
 
+// Define the types for the Cell component props
+interface CellProps {
+    children: React.ReactNode;
+    isHeader?: boolean;
+    width?: number;
+    flexible?: boolean;
+}
+
 // Cell component
-const Cell = ({ children, isHeader, width, flexible }) => {
+const Cell: React.FC<CellProps> = ({ children, isHeader = false, width, flexible = false }) => {
     return (
         <View style={[styles.cell, { width: flexible ? 'auto' : width, flex: flexible ? 1 : undefined }]}>
             <Text weight={isHeader ? '600SemiBold' : '400Regular'}>
@@ -14,37 +22,51 @@ const Cell = ({ children, isHeader, width, flexible }) => {
     );
 };
 
+// Define the types for the Row component props
+interface RowProps {
+    children: React.ReactNode;
+    isHeader?: boolean;
+    cellWidth?: number;
+    flexible?: boolean;
+}
+
 // Row component
-const Row = ({ children, isHeader, cellWidth, flexible }) => {
+const Row: React.FC<RowProps> = ({ children, isHeader = false, cellWidth, flexible = false }) => {
     return (
         <View style={styles.row}>
             {React.Children.map(children, (child) =>
-                React.cloneElement(child, { isHeader, width: cellWidth, flexible })
+                React.cloneElement(child as React.ReactElement, { isHeader, width: cellWidth, flexible })
             )}
         </View>
     );
 };
 
+// Define the types for the Table component props
+interface TableProps {
+    children: React.ReactNode;
+    cellWidth?: number;
+}
+
 // Table component with dynamic width adjustment and scroll if more than 3 cells
-const Table = ({ children, cellWidth = 100 }) => {
+const Table: React.FC<TableProps> = ({ children, cellWidth = 100 }) => {
     // Determine if any row has more than 3 cells
     const hasManyCells = React.Children.toArray(children).some(child => {
-        return React.Children.count(child.props.children) > 3;
+        return React.Children.count((child as React.ReactElement).props.children) > 3;
     });
 
     return hasManyCells ? (
         <ScrollView horizontal>
-            <View style={styles.table}>
+            <View>
                 {React.Children.map(children, (child, index) => (
                     // Automatically pass `isHeader` for the first row (index 0)
-                    React.cloneElement(child, { isHeader: index === 0, cellWidth, flexible: false })
+                    React.cloneElement(child as React.ReactElement, { isHeader: index === 0, cellWidth, flexible: false })
                 ))}
             </View>
         </ScrollView>
     ) : (
-        <View style={styles.table}>
+        <View>
             {React.Children.map(children, (child, index) => (
-                React.cloneElement(child, { isHeader: index === 0, cellWidth, flexible: true })
+                React.cloneElement(child as React.ReactElement, { isHeader: index === 0, cellWidth, flexible: true })
             ))}
         </View>
     );

package/components/index.ts

@@ -0,0 +1,5 @@
+export { default as Circle } from './Circle';
+export { default as BottomSheet } from './BottomSheet';
+export { Carousel, CarouselItem } from "./Carousel";
+export { Table, Cell, Row } from './Table';
+export { Tab, TabScreen } from "./Tab";

package/config.js

@@ -1,79 +1,4 @@
-// config.js
-import path from 'path';
-import fs from 'fs';
+// import config from "../../ripal-ui.config.js"
+import config from "../ripal-ui.config.js"
 
-let config = {}; // Placeholder for the config values
-
-// Define the default config
-const defaultConfig = {
-    appName: "",
-    appLangs: {
-        default: null,
-        en: require('./lang/en.json')
-    },
-    colors: {
-        primary: "#3B82F6",
-        transparent: "#ffffff00",
-        white: "#fff",
-        slate: {
-            100: "#F1F5F9",200: "#E2E8F0",300: "#CBD5E1",
-            400: "#94A3B8",500: "#64748B",600: "#475569",
-            700: "#334155",800: "#1E293B",900: "#0F172A",
-        },
-        green: {
-            100: "#DCFCE7",200: "#BBF7D0",300: "#86EFAC ",
-            400: "#4ADE7F",500: "#22C55E",600: "#16A34A",
-            700: "#15803D",800: "#166534",900: "#14532D",
-        },
-        orange: {
-            100: "#FFEDD5",200: "#FED7AA",300: "#FDBA74",
-            400: "#FB923C",500: "#F87316",600: "#EA580C",
-            700: "#C2410C",800: "#9A3412",900: "#7C2D12",
-        },
-        purple: {
-            100: "#F3E8FF",200: "#E9D5FF",300: "#D8B4FE",
-            400: "#C084FC",500: "#A855F7",600: "#9333EA",
-            700: "#7E22CE",800: "#6B21A8",900: "#581C87",
-        },
-        blue: {
-            100: "#D8EAFE",200: "#BFD8FE",300: "#94C5FD",
-            400: "#60A5FA",500: "#3B82F6",600: "#2563EB",
-            700: "#1D4ED8",800: "#1E41AF",900: "#1E3A8A",
-        },
-        red: {
-            100: "#FEE2E2",200: "#FECACA",300: "#FCA5A5",
-            400: "#F87171",500: "#EF4444",600: "#DC2626",
-            700: "#B91C1C",800: "#991B1B",900: "#7F1D1D",
-        },
-        lime: {
-            100: "#ECFCCB",200: "#D9F99D",300: "#BEF264",
-            400: "#A3E635",500: "#84CC16",600: "#65A30D",
-            700: "#4D7C0F",800: "#3F6212",900: "#365314",
-        },
-        yellow: {
-            100: "#FEF9C3",200: "#FEF08A",300: "#FDE047",
-            400: "#FACC15",500: "#EAB308",600: "#CA8A04",
-            700: "#A16207",800: "#854D0E",900: "#713F12",
-        }
-    }
-}
-
-try {
-    // Resolve the path to ripal-ui.config.js in the user's project root
-    const configFilePath = path.resolve(process.cwd(), 'ripal-ui.config.js');
-
-    // Check if the config file exists
-    if (fs.existsSync(configFilePath)) {
-        // Load and parse the config file
-        config = require(configFilePath);
-    } else {
-        console.warn("ripal-ui.config.js not found. Using default config.");
-        config = defaultConfig;
-    }
-} catch (error) {
-    console.error("Error loading ripal-ui.config.js:", error);
-    config = defaultConfig; // Fallback to default config in case of an error
-}
-
-// Export the loaded config
-export default config;
+export default config