ripal-ui 1.1.394 → 2.0.0

package/components/BottomSheet.tsx

@@ -1,197 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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/DatePicker.jsx

@@ -1,181 +0,0 @@
-import React, { useState } from 'react';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import moment from 'moment';
-import config from '../config';
-import Text from '../elements/Text';
-import Circle from './Circle';
-import { Ionicons } from '@expo/vector-icons';
-
-// Calendar component
-const CalendarView = () => {
-    const [selectedDate, setSelectedDate] = useState(moment());
-
-    // Get the start of the current month
-    const startOfMonth = selectedDate.clone().startOf('month');
-    
-    // Get the days to display in the calendar
-    const daysInMonth = selectedDate.daysInMonth();
-    const startDayOfWeek = startOfMonth.day(); // Get the day of the week (0-6)
-
-    // Get current day (to highlight it)
-    const currentDay = moment();
-
-    // Function to handle month navigation
-    const changeMonth = (direction) => {
-        const newDate = selectedDate.clone().add(direction, 'month');
-        setSelectedDate(newDate);
-    };
-
-    // Function to handle date selection
-    const selectDate = (day) => {
-        const newSelectedDate = selectedDate.clone().date(day);
-        setSelectedDate(newSelectedDate);
-    };
-
-    // Render the day headers (Sun, Mon, etc.)
-    const renderDayHeaders = () => {
-        const dayNames = moment.weekdaysShort(); // ['Sun', 'Mon', ...]
-        return (
-            <View style={styles.dayHeaderRow}>
-                {dayNames.map((day, index) => (
-                    <Text weight='600SemiBold' color={config.colors.slate[600]} key={index}>{day}</Text>
-                ))}
-            </View>
-        );
-    };
-
-    // Generate the list of days for the calendar (including blank days for padding)
-    const renderCalendarDays = () => {
-        const days = [];
-        // Add blank spaces for the days before the start of the month
-        for (let i = 0; i < startDayOfWeek; i++) {
-            days.push(null);
-        }
-        // Add actual days of the month
-        for (let i = 1; i <= daysInMonth; i++) {
-            days.push(i);
-        }
-        return days;
-    };
-
-    return (
-        <View style={styles.container}>
-            {/* Month Navigation */}
-            <View style={styles.monthContainer}>
-                <Circle color='#fff' onPress={() => changeMonth(-1)}>
-                    <Ionicons name="chevron-back-outline" />
-                </Circle>
-                <Text style={{flexGrow: 1}} align='center' color={config.colors.primary} weight='600SemiBold'>
-                    {selectedDate.format('MMMM YYYY')}
-                </Text>
-                <Circle color='#fff' onPress={() => changeMonth(1)}>
-                    <Ionicons name="chevron-forward-outline" />
-                </Circle>
-            </View>
-
-            <Text>{selectedDate.format('Y-mm-DD')}</Text>
-
-            {/* Day Headers */}
-            {renderDayHeaders()}
-
-            {/* Calendar Days */}
-            <View style={styles.daysGrid}>
-                {renderCalendarDays().map((day, index) => {
-                    let isActive = day === selectedDate.date() && selectedDate.isSame(currentDay, 'month');
-                    return (
-                        (
-                            <TouchableOpacity
-                                key={index}
-                                style={{
-                                    ...styles.dayContainer,
-                                    backgroundColor: isActive ? config.colors.primary : '#fff'
-                                }}
-                                onPress={() => day && selectDate(day)}
-                            >
-                                {day ? (
-                                    <Text color={isActive ? '#fff' : config.colors.slate[500]} style={[
-                                        styles.dayText,
-                                        // Highlight current day in bold
-                                        day === currentDay.date() && selectedDate.isSame(currentDay, 'month') ? styles.currentDayText : null,
-                                    ]}>
-                                        {day}
-                                    </Text>
-                                ) : (
-                                    <Text style={styles.blankDay}></Text>
-                                )}
-                            </TouchableOpacity>
-                        )
-                    )
-                })}
-            </View>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        padding: 16,
-        backgroundColor: '#fff',
-        flex: 1,
-    },
-    monthContainer: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        marginBottom: 16,
-    },
-    monthText: {
-        fontSize: 20,
-        fontWeight: 'bold',
-    },
-    navButton: {
-        fontSize: 16,
-        color: '#007bff',
-    },
-    dayHeaderRow: {
-        flexDirection: 'row',
-        justifyContent: 'space-between',
-        marginBottom: 10,
-    },
-    dayHeaderText: {
-        width: '14%', // Ensure each day header takes up 1/7 of the row
-        textAlign: 'center',
-        fontWeight: 'bold',
-    },
-    daysGrid: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-    },
-    dayContainer: {
-        width: '14.28%', // Ensures 7 items per row (100 / 7 = 14.28)
-        height: 46,
-        justifyContent: 'center',
-        alignItems: 'center',
-        borderRadius: 999,
-    },
-    dayText: {
-        fontSize: 16,
-    },
-    selectedDayText: {
-        backgroundColor: '#007bff',
-        color: '#fff',
-        borderRadius: 20,
-        // paddingHorizontal: 10,
-        // paddingVertical: 5,
-    },
-    selectedDayHighlight: {
-        backgroundColor: '#007bff',
-        color: '#fff',
-        borderRadius: 20,
-        paddingHorizontal: 10,
-        paddingVertical: 5,
-    },
-    currentDayText: {
-        fontWeight: 'bold', // Bold the current day
-    },
-    blankDay: {
-        height: 0,
-    },
-});
-
-export default CalendarView;

package/components/Tab.tsx

@@ -1,90 +0,0 @@
-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.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-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: 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'}>
-                {children}
-            </Text>
-        </View>
-    );
-};
-
-// Define the types for the Row component props
-interface RowProps {
-    children: React.ReactNode;
-    isHeader?: boolean;
-    cellWidth?: number;
-    flexible?: boolean;
-}
-
-// Row component
-const Row: React.FC<RowProps> = ({ children, isHeader = false, cellWidth, flexible = false }) => {
-    return (
-        <View style={styles.row}>
-            {React.Children.map(children, (child) =>
-                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: 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 as React.ReactElement).props.children) > 3;
-    });
-
-    return hasManyCells ? (
-        <ScrollView horizontal>
-            <View>
-                {React.Children.map(children, (child, index) => (
-                    // Automatically pass `isHeader` for the first row (index 0)
-                    React.cloneElement(child as React.ReactElement, { isHeader: index === 0, cellWidth, flexible: false })
-                ))}
-            </View>
-        </ScrollView>
-    ) : (
-        <View>
-            {React.Children.map(children, (child, index) => (
-                React.cloneElement(child as React.ReactElement, { isHeader: index === 0, cellWidth, flexible: true })
-            ))}
-        </View>
-    );
-};
-
-export { Table, Row, Cell };
-
-const styles = StyleSheet.create({
-    row: {
-        flexDirection: 'row',
-        borderBottomWidth: 1,
-        borderColor: config.colors.slate[200],
-    },
-    cell: {
-        padding: 10,
-        borderColor: config.colors.slate[200],
-        justifyContent: 'center',
-    },
-    cellText: {
-        fontSize: 16,
-    },
-    headerText: {
-        fontSize: 16,
-        fontWeight: 'bold',
-    }
-});

package/components/index.ts

@@ -1,5 +0,0 @@
-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,4 +0,0 @@
-import config from "../../ripal-ui.config.js"
-// import config from "../ripal-ui.config.js"
-
-export default config