ripal-ui 1.1.394 → 2.0.0

package/elements/Dialog.tsx

@@ -1,87 +0,0 @@
-import React from "react";
-import { Pressable, StyleSheet, View, TouchableOpacity, ViewStyle } from "react-native";
-import config from "../config";
-import Text from "./Text";
-import Inline from "./Inline";
-
-interface DialogActionsProps {
-	children: React.ReactNode;
-}
-
-const DialogActions: React.FC<DialogActionsProps> = ({ children }) => {
-	return (
-		<Inline
-			justifyContent="flex-end"
-			gap={0}
-			style={{
-				...styles.action_area,
-				paddingTop: 20,
-				marginTop: 20 / 2,
-			}}
-		>
-			{children}
-		</Inline>
-	);
-};
-
-interface DialogProps {
-	spacer?: number;
-	children: React.ReactNode;
-	visible: boolean;
-	onDismiss: () => void;
-}
-
-const Dialog: React.FC<DialogProps> = ({ spacer = 20, children, visible, onDismiss }) => {
-	if (visible) {
-		return (
-			<>
-				<TouchableOpacity style={styles.overlay} />
-				<Pressable style={styles.container} onPress={onDismiss}>
-					<Pressable
-						style={{
-							...styles.content,
-							padding: spacer,
-							gap: spacer / 2,
-						}}
-					>
-						{children}
-					</Pressable>
-				</Pressable>
-			</>
-		);
-	}
-	return null; // Return null when not visible
-};
-
-const styles = StyleSheet.create({
-	overlay: {
-		backgroundColor: `#000000aa`,
-		position: 'absolute',
-		top: 0,
-		left: 0,
-		right: 0,
-		bottom: 0,
-		zIndex: 10,
-	},
-	container: {
-		position: 'absolute',
-		top: 0,
-		left: 0,
-		right: 0,
-		bottom: 0,
-		zIndex: 15,
-		alignItems: 'center',
-		justifyContent: 'center',
-	},
-	content: {
-		backgroundColor: '#fff',
-		width: '90%',
-		borderRadius: 12,
-	},
-	action_area: {
-		borderTopWidth: 1,
-		borderTopColor: config.colors.slate[200],
-	},
-});
-
-export { Dialog, DialogActions };

package/elements/Dropdown.tsx

@@ -1,88 +0,0 @@
-import React, { useState } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-import config from "../config";
-import Text from "./Text";
-import Inline from "./Inline";
-import Ionicons from "@expo/vector-icons/Ionicons";
-
-type OptionType<T> = 
-	| T[]  // Array of objects
-	| string[]; // Array of strings
-
-interface DropdownProps<T> {
-	options: OptionType<T>;
-	value: T | null;
-	setValue: (value: T) => void;
-	onChange?: (value: T) => void;
-	color?: string;
-	label?: string | null;
-	placeholder?: string;
-	objectKey?: keyof T | null; // Key for accessing properties if options are objects
-	withSearch?: boolean;
-}
-
-const Dropdown = <T,>({
-	options,
-	value,
-	setValue,
-	onChange,
-	color = config.colors.primary,
-	label = null,
-	placeholder = 'Choose',
-	objectKey = null,
-	withSearch = false,
-}: DropdownProps<T>) => {
-	const [isExpanded, setExpanded] = useState(false);
-	const isObject = Array.isArray(options) && typeof options[0] === 'object';
-
-	return (
-		<View style={{ gap: 5 }}>
-			{label !== null && <Text size={12} weight="400Regular">{label}</Text>}
-			<View style={styles.area}>
-				<Inline onPress={() => setExpanded(!isExpanded)}>
-					<Text style={{ flexGrow: 1 }}>{value || placeholder}</Text>
-					<Ionicons name={isExpanded ? 'chevron-up-outline' : 'chevron-down-outline'} />
-				</Inline>
-
-				{isExpanded && (
-					<ScrollView style={{ maxHeight: 200 }}>
-						{(options as OptionType<T>).map((opt, o) => {
-							const isActive = isObject ? opt[objectKey as keyof T] === value : opt === value;
-							const displayValue = isObject ? opt[objectKey as keyof T] : opt;
-
-							return (
-								<Inline key={o} style={styles.item} onPress={() => {
-									if (onChange) {
-										onChange(opt);
-									} else {
-										setValue(isObject ? opt[objectKey as keyof T] : opt);
-									}
-									setExpanded(false);
-								}}>
-									<Text weight={isActive ? '600SemiBold' : '400Regular'} color={isActive ? color : config.colors.slate[500]}>
-										{displayValue}
-									</Text>
-								</Inline>
-							);
-						})}
-					</ScrollView>
-				)}
-			</View>
-		</View>
-	);
-};
-
-const styles = StyleSheet.create({
-	area: {
-		padding: 15,
-		borderWidth: 1,
-		borderColor: config.colors.slate[200],
-		borderRadius: 12,
-		gap: 15,
-	},
-	item: {
-		height: 40,
-	},
-});
-
-export default Dropdown;

package/elements/Inline.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-import { Pressable, PressableProps, StyleSheet, View, ViewStyle } from "react-native";
-
-interface InlineProps extends PressableProps {
-	children: React.ReactNode;
-	alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
-	justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-	gap?: number;
-	style?: ViewStyle;
-	onPress?: () => void;
-    onLongPress?: () => void;
-}
-
-const Inline: React.FC<InlineProps> = ({
-	children,
-	alignItems = "center",
-	justifyContent = "flex-start",
-	gap = 20,
-	style,
-	onPress,
-	onLayout,
-}) => {
-	return onPress ? (
-		<Pressable
-			style={{
-				flexDirection: 'row',
-				alignItems,
-				justifyContent,
-				gap,
-				...style,
-			}}
-			onPress={onPress}
-			onLayout={onLayout}
-		>
-			{children}
-		</Pressable>
-	) : 
-	<View
-		style={{
-			flexDirection: 'row',
-			alignItems,
-			justifyContent,
-			gap,
-			...style,
-		}}
-		onLayout={onLayout}
-	>
-		{children}
-	</View>
-};
-
-export default Inline;

package/elements/Input.tsx

@@ -1,83 +0,0 @@
-import React, { useState } from "react";
-import { View, TextInput, StyleSheet, TextInputProps, ViewStyle } from "react-native";
-import Text from "./Text";
-import Inline from "./Inline";
-import config from "../config";
-
-interface InputProps {
-    value?: string;
-	label?: string | null;
-	left?: React.ReactNode | null; // Allows for any valid React node
-	right?: React.ReactNode | null; // Allows for any valid React node
-	height?: number;
-	placeholder?: string | null;
-	mode?: TextInputProps["keyboardType"]; // Use keyboardType from TextInputProps
-	secureTextEntry?: boolean;
-	multiline?: boolean;
-	gap?: number;
-	onChangeText: (text: string) => void; // Function to handle text changes
-}
-
-const Input: React.FC<InputProps> = ({
-    value="",
-	label = null,
-	left = null,
-	right = null,
-	height = 50,
-	gap = 20,
-	placeholder = null,
-	mode = "default",
-	multiline = false,
-	secureTextEntry = false,
-	onChangeText,
-}) => {
-	const [isFocused, setFocused] = useState(false);
-
-	return (
-		<View style={{ gap: 5 }}>
-			{label !== null && (
-				<Text size={12} weight="400Regular" color={isFocused ? config.colors.primary : config.colors.slate[500]}>
-					{label}
-				</Text>
-			)}
-			<Inline
-				style={{
-					...styles.input,
-					borderColor: isFocused ? config.colors.primary : config.colors.slate[200],
-				}}
-				gap={gap}
-			>
-				{left !== null && left}
-				<TextInput
-                    value={value}
-					placeholder={placeholder}
-					style={{
-						height: multiline ? 'auto' : height,
-						minHeight: height,
-						paddingVertical: multiline ? 20 : 0,
-						flexGrow: 1,
-					}}
-					onFocus={() => setFocused(true)}
-					onChangeText={onChangeText}
-					onBlur={() => setFocused(false)}
-					// Using 'default' for generic mode
-					keyboardType={mode}
-					multiline={multiline}
-					secureTextEntry={secureTextEntry}
-				/>
-				{right !== null && right}
-			</Inline>
-		</View>
-	);
-};
-
-const styles = StyleSheet.create({
-	input: {
-		flexGrow: 1,
-		borderWidth: 1,
-		borderRadius: 12,
-		paddingHorizontal: 20,
-	},
-});
-
-export default Input;

package/elements/ProgressBar.tsx

@@ -1,52 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { View, StyleSheet, ViewStyle } from "react-native";
-import config from "../config";
-
-interface ProgressBarProps {
-	value: number;
-	from?: number;
-	size?: number;
-	style?: ViewStyle;
-	percentage?: number | null;
-}
-
-const ProgressBar: React.FC<ProgressBarProps> = ({
-	value,
-	from = 100,
-	size = 5,
-	style,
-	percentage = null,
-}) => {
-	const [percent, setPercent] = useState<number | null>(null);
-
-	useEffect(() => {
-		if (percent == null) {
-			setPercent((value / from) * 100);
-		}
-	}, [value, from, percent]); // Add dependencies to useEffect
-
-	return (
-		<View style={{ ...barStyle.area, ...style, height: size }}>
-			<View
-				style={{
-					...barStyle.value,
-					width: `${percent !== null ? percent : 0}%`,
-					height: size,
-				}}
-			></View>
-		</View>
-	);
-};
-
-const barStyle = StyleSheet.create({
-	area: {
-		backgroundColor: config.colors.slate[200],
-		height: 5,
-		flexGrow: 1,
-	},
-	value: {
-		backgroundColor: config.colors.primary,
-	},
-});
-
-export default ProgressBar;

package/elements/SecureStorage.js

@@ -1,27 +0,0 @@
-import * as SecureStore from 'expo-secure-store';
-
-const SecureStorage = {
-	async getItem(key) {
-		return await SecureStore.getItemAsync(key);
-	},
-
-	async setItem(key, value) {
-		return await SecureStore.setItemAsync(key, value);
-	},
-
-	async removeItem(key) {
-		return await SecureStore.deleteItemAsync(key);
-	},
-
-	// optional: to match AsyncStorage signature
-	async clear() {
-		console.warn('SecureStorage.clear() is not supported – SecureStore has no clearAll.');
-	},
-
-	async getAllKeys() {
-		console.warn('SecureStorage.getAllKeys() is not supported – SecureStore cannot list keys.');
-		return [];
-	},
-};
-
-export default SecureStorage;

package/elements/Separator.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import { Dimensions, StyleSheet, View, ViewStyle } from "react-native";
-import Inline from "./Inline";
-import config from "../config";
-import Text from "./Text";
-
-interface SeparatorProps {
-	width?: any;
-	space?: number;
-	height?: number;
-	color?: string;
-	textProps?: React.ComponentProps<typeof Text>;
-	style?: ViewStyle;
-	children?: React.ReactNode;
-}
-
-const Separator: React.FC<SeparatorProps> = ({
-	children,
-	width = "100%",
-	space = 20,
-	height = 1,
-	color = config.colors.slate[200],
-	textProps,
-	style,
-}) => {
-	let theWidth = width;
-	if (typeof width === "string") {
-		let toReturn = [];
-		let w = width.split("");
-		w.map((wi, w) => {
-			if (!isNaN(wi)) {
-				toReturn.push(wi);
-			}
-		});
-		toReturn = parseInt(toReturn.join(""));
-		theWidth = toReturn / 100 * Dimensions.get('screen').width;
-	}
-	return (
-		<Inline justifyContent="center">
-			<View
-                style={{
-					backgroundColor: color,
-					width: theWidth,
-					height: height,
-					marginVertical: space,
-					...style,
-				}}
-			></View>
-			{children && (
-				<Text
-					size={12}
-					style={{
-						position: "absolute",
-						backgroundColor: "#fff",
-						padding: 10,
-						paddingHorizontal: 20,
-					}}
-					{...textProps}
-				>
-					{children}
-				</Text>
-			)}
-		</Inline>
-	);
-};
-
-const styles = StyleSheet.create({
-	// Define your styles here if needed
-});
-
-export default Separator;

package/elements/Skeleton.tsx

@@ -1,64 +0,0 @@
-import React, { useEffect, useRef } from "react";
-import { Animated, StyleSheet, View, ViewStyle } from "react-native";
-import config from "../config";
-
-interface SkeletonProps {
-	color?: string;
-	rounded?: number;
-	width?: any;
-	height?: number;
-	aspectRatio?: number | null;
-}
-
-const Skeleton: React.FC<SkeletonProps> = ({
-	color = config.colors.slate[200],
-	rounded = 8,
-	width = `${Math.floor(Math.random() * (99 - 11 + 1)) + 11}%`,
-	height = 20,
-	aspectRatio = null,
-}) => {
-	const aspectRatioStyles: ViewStyle = { aspectRatio: aspectRatio ?? 1 };
-	const heightStyles: ViewStyle = { height: height };
-	const opacity = useRef(new Animated.Value(1)).current;
-	const defaultStyles: ViewStyle = {
-		backgroundColor: color,
-		width,
-		borderRadius: rounded,
-		opacity,
-	};
-
-	useEffect(() => {
-		const bounce = () => {
-			opacity.setValue(1);
-			Animated.timing(opacity, {
-				toValue: 0.4,
-				duration: 1000,
-				useNativeDriver: true,
-			}).start(() => {
-				Animated.timing(opacity, {
-					toValue: 0.8,
-					duration: 1000,
-					useNativeDriver: true,
-				}).start(bounce);
-			});
-		};
-
-		bounce();
-	}, [opacity]);
-
-	return (
-		<Animated.View
-			style={
-				aspectRatio === null
-					? [defaultStyles, heightStyles]
-					: [defaultStyles, aspectRatioStyles]
-			}
-		/>
-	);
-};
-
-const styles = StyleSheet.create({
-	// Add your styles here if needed
-});
-
-export default Skeleton;

package/elements/Slider.tsx

@@ -1,133 +0,0 @@
-import React, { useRef } from 'react';
-import {
-	View,
-	StyleSheet,
-	PanResponder,
-	Animated,
-	Dimensions,
-	GestureResponderEvent,
-	PanResponderGestureState
-} from 'react-native';
-import config from '../config';
-
-type SliderProps = {
-	start?: number;
-	end?: number;
-	value?: number;
-	rounded?: number;
-	trackColor?: string;
-	color?: string;
-	height?: number;
-	thumbOpacity?: number;
-	thumbColor?: string;
-	onChange?: (value: number) => void;
-	setScrollEnabled?: (enabled: boolean) => void;
-};
-
-const Slider: React.FC<SliderProps> = ({
-	start = 0,
-	end = 100,
-	value = 25,
-	rounded = 8,
-	trackColor = '#ecf0f1',
-	color = config.colors.primary,
-	height = 40,
-	onChange,
-	thumbOpacity = 0.7,
-	thumbColor = '#fff',
-	setScrollEnabled = () => {}
-}) => {
-	const pan = useRef(new Animated.ValueXY()).current;
-	const screenWidth = Dimensions.get('window').width;
-
-	const panResponder = useRef(
-		PanResponder.create({
-			onStartShouldSetPanResponder: () => true,
-			onMoveShouldSetPanResponder: (_: GestureResponderEvent, gestureState: PanResponderGestureState) => {
-				return Math.abs(gestureState.dx) > Math.abs(gestureState.dy);
-			},
-			onPanResponderGrant: () => {
-				setScrollEnabled(false);
-			},
-			onPanResponderMove: (_: GestureResponderEvent, gestureState: PanResponderGestureState) => {
-				const clampedX = Math.max(0, Math.min(screenWidth, gestureState.moveX));
-				let percent = clampedX / screenWidth;
-				let newValue = Math.round(start + percent * (end - start));
-				onChange?.(newValue);
-			},
-			onPanResponderRelease: () => {
-				setScrollEnabled(true);
-				Animated.spring(pan, {
-					toValue: { x: 0, y: 0 },
-					useNativeDriver: false
-				}).start();
-			},
-			onPanResponderTerminate: () => {
-				setScrollEnabled(true);
-				Animated.spring(pan, {
-					toValue: { x: 0, y: 0 },
-					useNativeDriver: false
-				}).start();
-			},
-			onPanResponderTerminationRequest: () => false
-		})
-	).current;
-
-	return (
-		<View
-			style={[styles.touchArea, { height }]}
-			{...panResponder.panHandlers}
-		>
-			<View
-				style={[
-					styles.container,
-					{ height, backgroundColor: trackColor, borderRadius: rounded }
-				]}
-			>
-				<View
-					style={{
-						backgroundColor: color,
-						width: `${value / (end - start) * 100}%`,
-						height,
-						alignItems: 'flex-end',
-						justifyContent: 'center',
-						borderRadius: rounded
-					}}
-				>
-					<View
-						style={{
-							...styles.thumb,
-							height: (60 / 100) * height,
-							marginRight: (rounded / height) * 100 > 25 ? 20 : 10,
-							opacity: thumbOpacity,
-							backgroundColor: thumbColor
-						}}
-					/>
-				</View>
-			</View>
-		</View>
-	);
-};
-
-const styles = StyleSheet.create({
-	touchArea: {
-		width: '100%'
-	},
-	container: {
-		width: '100%',
-		position: 'relative'
-	},
-	thumb_dot: {
-		width: 4,
-		height: 4,
-		backgroundColor: '#fff',
-		borderRadius: 9
-	},
-	thumb: {
-		width: 3,
-		backgroundColor: '#fff',
-		borderRadius: 9
-	}
-});
-
-export default Slider;