ripal-ui 1.0.1 → 1.0.2

package/elements/Dropdown.tsx

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Pressable, PressableProps, StyleSheet, 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;
+}
+
+const Inline: React.FC<InlineProps> = ({
+	children,
+	alignItems = "center",
+	justifyContent = "flex-start",
+	gap = 20,
+	style,
+	onPress,
+	onLayout,
+}) => {
+	return (
+		<Pressable
+			style={{
+				flexDirection: 'row',
+				alignItems,
+				justifyContent,
+				gap,
+				...style,
+			}}
+			onPress={onPress}
+			onLayout={onLayout}
+		>
+			{children}
+		</Pressable>
+	);
+};
+
+export default Inline;

package/elements/Input.tsx

@@ -0,0 +1,75 @@
+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;
+	onChangeText: (text: string) => void; // Function to handle text changes
+}
+
+const Input: React.FC<InputProps> = ({
+    value="",
+	label = null,
+	left = null,
+	right = null,
+	height = 50,
+	placeholder = null,
+	mode = "default",
+	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],
+				}}
+			>
+				{left !== null && left}
+				<TextInput
+                    value={value}
+					placeholder={placeholder}
+					style={{
+						height,
+						flexGrow: 1,
+					}}
+					onFocus={() => setFocused(true)}
+					onChangeText={onChangeText}
+					onBlur={() => setFocused(false)}
+					// Using 'default' for generic mode
+					keyboardType={mode}
+					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

@@ -0,0 +1,52 @@
+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/Separator.tsx

@@ -0,0 +1,72 @@
+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;
+		console.log(theWidth);
+	}
+	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

@@ -0,0 +1,64 @@
+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/Switch.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { Pressable, StyleSheet, View, ViewStyle } from "react-native";
+import config from "../config";
+import Inline from "./Inline";
+
+interface SwitchProps {
+	active?: boolean;
+	size?: number;
+	spacer?: number;
+	onChange?: () => void;
+}
+
+const Switch: React.FC<SwitchProps> = ({
+	active = false,
+	size = 24,
+	spacer = 5,
+	onChange = null,
+}) => {
+	const [isActive, setActive] = useState(active);
+
+	return (
+		<Pressable
+			onPress={() => {
+				setActive(!isActive);
+				if (onChange) {
+					onChange();
+				}
+				console.log('hehe');
+			}}
+		>
+			<Inline
+				style={{
+					backgroundColor: isActive ? config.colors.green[500] : config.colors.slate[200],
+					padding: spacer,
+					borderRadius: 999,
+					width: size * 2 + spacer + 5,
+				}}
+			>
+				{isActive && <View style={{ flexGrow: 1 }}></View>}
+				<View
+					style={{
+						height: size,
+						...styles.circle,
+					}}
+				>
+					{/* Add any inner content here if needed */}
+				</View>
+			</Inline>
+		</Pressable>
+	);
+};
+
+const styles = StyleSheet.create({
+	area: {
+		backgroundColor: config.colors.slate[100],
+	},
+	circle: {
+		backgroundColor: '#fff',
+		aspectRatio: 1,
+		borderRadius: 9999,
+	},
+});
+
+export default Switch;

package/elements/Text.tsx

@@ -0,0 +1,73 @@
+import React, { FC } from "react";
+import { Text as RNText, TextStyle } from "react-native";
+import { useFonts, Poppins_300Light, Poppins_400Regular, Poppins_500Medium, Poppins_600SemiBold, Poppins_700Bold, Poppins_900Black } from "@expo-google-fonts/poppins";
+import config from "../config";
+
+interface TextProps {
+    children: React.ReactNode;
+    weight?: '300Light' | '400Regular' | '500Medium' | '600SemiBold' | '700Bold' | '900Black';
+    size?: number;
+    color?: string;
+    align?: 'left' | 'right' | 'center' | 'justify';
+    limit?: number;
+    spacing?: number;
+    lineHeight?: number | null;
+    style?: TextStyle;
+}
+
+const Text: FC<TextProps> = ({
+    children,
+    weight = "400Regular",
+    size,
+    color = config.colors.slate[500],
+    align = "left",
+    limit = 0,
+    spacing = 0,
+    lineHeight = null,
+    style
+}) => {
+    const fontName = "Poppins";
+    const [fontsLoaded] = useFonts({
+        Poppins_300Light,
+        Poppins_400Regular,
+        Poppins_500Medium,
+        Poppins_600SemiBold,
+        Poppins_700Bold,
+        Poppins_900Black
+    });
+
+    if (config.appLangs.default !== null) {
+        const ogChildren = children;
+        if (typeof children === "string") {
+            children = children.split('.').reduce((acc, key) => {
+                return acc && acc[key] !== undefined ? acc[key] : ogChildren;
+            }, config.appLangs[config.appLangs.default]);
+        }
+    }
+
+    if (!fontsLoaded) {
+        return <RNText>{children}</RNText>; // Return statement added to properly handle loading state
+    }
+
+    if (limit > 0 && typeof children === "string" && children.length > limit) {
+        children = children.substr(0, limit) + '...';
+    }
+
+    return (
+        <RNText
+            style={{
+                fontSize: size,
+                color: color,
+                letterSpacing: spacing,
+                lineHeight: lineHeight,
+                ...style,
+                fontFamily: `${fontName}_${weight}`,
+                textAlign: align
+            }}
+        >
+            {children}
+        </RNText>
+    );
+};
+
+export default Text;

package/elements/Toast.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from "react";
+import { StyleSheet, View, ViewStyle } from "react-native";
+import Inline from "./Inline";
+import Text from "./Text";
+import config from "../config";
+
+interface ToastProps {
+	label?: string;
+	right?: React.ReactNode; // Allows for any valid React node
+	visible?: boolean;
+	setVisible: (visible: boolean) => void;
+	timeout?: number;
+	containerStyle?: ViewStyle; // Style for the container View
+	style?: ViewStyle; // Additional style for the Toast
+	textProps?: React.ComponentProps<typeof Text>; // Props for the Text component
+}
+
+const Toast: React.FC<ToastProps> = ({
+	label = "Percakapan berhasil dihapus",
+	right = null,
+	visible = true,
+	setVisible,
+	timeout = 3000,
+	containerStyle,
+	textProps,
+}) => {
+	useEffect(() => {
+		if (visible) {
+			const timer = setTimeout(() => {
+				setVisible(false);
+			}, timeout);
+
+			return () => clearTimeout(timer);
+		}
+	}, [visible, setVisible, timeout]);
+
+	return visible ? (
+		<View style={{ ...styles.container, ...containerStyle }}>
+			<Inline style={styles.area}>
+				<Text size={12} style={{ flexGrow: 1 }} color="#fff" {...textProps}>
+					{label}
+				</Text>
+				{right}
+			</Inline>
+		</View>
+	) : null;
+};
+
+const styles = StyleSheet.create({
+	container: {
+		position: 'absolute',
+		bottom: 0,
+		left: 0,
+		right: 0,
+		padding: 20,
+	},
+	area: {
+		backgroundColor: config.colors.slate[800],
+		borderRadius: 999,
+		padding: 20,
+		paddingHorizontal: 30,
+	},
+});
+
+export default Toast;

package/elements/Toggle.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Pressable, StyleSheet, View, ViewStyle } from "react-native";
+import config from "../config";
+import Text from "./Text";
+import Inline from "./Inline";
+
+interface ToggleProps {
+	options: string[];
+	value: any;
+	setValue: (value: string) => void;
+}
+
+const Toggle: React.FC<ToggleProps> = ({ options, value, setValue }) => {
+	return (
+		<Inline style={styles.area}>
+			{options.map((opt, o) => {
+				const isActive = value === opt;
+				return (
+					<Pressable
+						key={o}
+						style={[styles.item, isActive ? styles.item_active : null]}
+						onPress={() => setValue(opt)}
+					>
+						<Text
+							color={isActive ? config.colors.primary : config.colors.slate[500]}
+							weight={isActive ? '600SemiBold' : '400Regular'}
+						>
+							{opt}
+						</Text>
+					</Pressable>
+				);
+			})}
+		</Inline>
+	);
+};
+
+const styles = StyleSheet.create({
+	area: {
+		padding: 10,
+		backgroundColor: config.colors.slate[100],
+		borderRadius: 12,
+	},
+	item: {
+		flexGrow: 1,
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'center',
+		paddingVertical: 10,
+		borderRadius: 12,
+	},
+	item_active: {
+		backgroundColor: '#fff',
+		shadowColor: config.colors.slate[300],
+		shadowOpacity: 0.4,
+		shadowRadius: 12,
+	},
+});
+
+export default Toggle;

package/elements/index.js

@@ -1,5 +1,5 @@
 export { default as Button } from './Button';
-export { default as Dialog } from './Dialog';
+export { Dialog, DialogActions } from './Dialog';
 export { default as Dropdown } from './Dropdown';
 export { default as Inline } from './Inline';
 export { default as Input } from './Input';
@@ -8,4 +8,5 @@ export { default as Separator } from './Separator';
 export { default as Skeleton } from './Skeleton';
 export { default as Switch } from './Switch';
 export { default as Text } from './Text';
+export { default as Toast } from './Toast';
 export { default as Toggle } from './Toggle';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ripal-ui",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A collection of React elements and components",
   "main": "index.js",
   "scripts": {
@@ -9,12 +9,15 @@
   },
   "dependencies": {
     "react": "^18.0.0",
-    "react-native": "^0.70.0"
+    "react-native": "^0.74.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.25.6",
     "@babel/core": "^7.25.2",
     "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7"
+    "@babel/preset-react": "^7.24.7",
+    "@types/react": "^18.3.10",
+    "@types/react-native": "^0.73.0",
+    "typescript": "^5.6.2"
   }
 }