ripal-ui 1.1.395 → 2.0.2

package/components/ProgressBar.jsx

@@ -0,0 +1,65 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import COLORS from "./COLORS";
+import Text from "./Text";
+import Inline from "./Inline";
+
+const ProgressBar = ({value, label = null, displayValue = true, labelPosition = 'left', from = null, color = COLORS.primary, height = 24, radius = 999}) => {
+    const [width, setWidth] = useState(0);
+
+    useEffect(() => {
+        if (from === null) {
+            setWidth(value);
+        } else {
+            let percentage = value / from * 100;
+            setWidth(percentage);
+        }
+    }, [value, from]);
+
+    return (
+        <View style={{ gap: 10 }}>
+            {
+                (label !== null) &&
+                <Inline justifyContent={labelPosition?.toLowerCase() === "left" ? 'flex-start' : 'flex-end'}>
+                    {typeof label === "string" ? <Text>{label}</Text> : label}
+                </Inline>
+            }
+            <View style={[
+                styles.container,
+                {
+                    minHeight: height,
+                    backgroundColor: `${color}20`,
+                    borderRadius: radius,
+                }
+            ]}>
+                <Inline justifyContent={'flex-end'} style={[
+                    styles.bar,
+                    {
+                        minHeight: height,
+                        backgroundColor: color,
+                        borderRadius: radius,
+                        width: `${width}%`,
+                        paddingHorizontal: displayValue ? 10 : 0,
+                        // padding: displayValue ? 5 : 0,
+                    }
+                ]}>
+                    {
+                        displayValue &&
+                        <Text color="#fff" style={{fontWeight: '700'}}>{value}%</Text>
+                    }
+                </Inline>
+            </View>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        // 
+    },
+    bar: {
+        // 
+    }
+});
+
+export default ProgressBar

package/components/Rate.jsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import Inline from "./Inline";
+import MaterialIcons from "@react-native-vector-icons/material-icons";
+import COLORS from "./COLORS";
+
+const Rate = ({rating = 4, setRating = null, icon = null, gap = 5}) => {
+    return (
+        <Inline gap={gap}>
+            {
+                [1,1,1,1,1].map((item, i) => {
+                    let color = i + 1 <= rating ? COLORS.yellow[500] : COLORS.slate[300];
+
+                    if (icon !== null) {
+                        return icon({
+                            color
+                        })
+                    }
+
+                    return (
+                        <TouchableOpacity key={i} onPress={() => {
+                            if (setRating !== null) {
+                                setRating(i + 1);
+                            }
+                        }}>
+                            <MaterialIcons name="star" size={24} color={color} />
+                        </TouchableOpacity>
+                    )
+                })
+            }
+        </Inline>
+    )
+}
+
+const styles = StyleSheet.create({
+    // 
+})
+
+export default Rate;

package/components/Slider.jsx

@@ -0,0 +1,219 @@
+import MaterialIcons from "@react-native-vector-icons/material-icons";
+import React, { useRef, useState } from "react";
+import { View, StyleSheet, PanResponder } from "react-native";
+
+const Slider = ({
+	height = 20,
+	value = 0,
+	range = false,
+	onChange = () => {},
+	min = 0,
+	max = 100,
+	thumbRadius = 6,
+}) => {
+
+	const trackWidth = useRef(0);
+
+	const [state, setState] = useState(
+		range
+			? { min: value[0], max: value[1] }
+			: { value }
+	);
+
+	const clamp = (v, minv, maxv) =>
+		Math.min(maxv, Math.max(minv, v));
+
+	const percentToValue = (p) =>
+		min + p * (max - min);
+
+	const valueToPercent = (v) =>
+		(v - min) / (max - min);
+
+	const activeThumb = useRef(null);
+
+	const updateFromGesture = (x) => {
+
+		const percent = clamp(x / trackWidth.current, 0, 1);
+		const newValue = percentToValue(percent);
+
+		if (range) {
+
+			if (activeThumb.current === "min") {
+
+				const v = clamp(newValue, min, state.max);
+
+				setState(s => ({ ...s, min: v }));
+				onChange([v, state.max]);
+
+			} else {
+
+				const v = clamp(newValue, state.min, max);
+
+				setState(s => ({ ...s, max: v }));
+				onChange([state.min, v]);
+
+			}
+
+		} else {
+
+			setState({ value: newValue });
+			onChange(newValue);
+
+		}
+
+	};
+
+	const panResponder = useRef(
+		PanResponder.create({
+
+			onStartShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponder: () => true,
+
+			onPanResponderGrant: (evt) => {
+
+				const x = evt.nativeEvent.locationX;
+
+				if (range) {
+
+					const percent = x / trackWidth.current;
+
+					const distMin = Math.abs(percent - valueToPercent(state.min));
+					const distMax = Math.abs(percent - valueToPercent(state.max));
+
+					activeThumb.current =
+						distMin < distMax ? "min" : "max";
+
+				} else {
+					activeThumb.current = "single";
+				}
+
+				updateFromGesture(x);
+
+			},
+
+			onPanResponderMove: (evt) => {
+
+				updateFromGesture(evt.nativeEvent.locationX);
+
+			},
+
+			onPanResponderTerminationRequest: () => false,
+			onPanResponderTerminate: () => {},
+			onShouldBlockNativeResponder: () => true,
+
+		})
+	).current;
+
+	const percentMin = range
+		? valueToPercent(state.min)
+		: valueToPercent(state.value);
+
+	const percentMax = range
+		? valueToPercent(state.max)
+		: null;
+
+	return (
+
+		<View style={styles.container}>
+			<View
+				style={[styles.track, { height }]}
+				{...panResponder.panHandlers}
+				onLayout={(e) => {
+					trackWidth.current =
+						e.nativeEvent.layout.width;
+				}}
+			>
+
+				<View
+					style={[
+						styles.fill,
+						range
+							? {
+								left: `${percentMin * 100}%`,
+								width: `${(percentMax - percentMin) * 100}%`
+							}
+							: {
+								width: `${percentMin * 100}%`
+							}
+					]}
+				/>
+
+				<View
+					style={[
+						styles.thumb,
+						{
+							left: `${percentMin * 100}%`,
+							height: height + 10,
+							width: height * 1.25,
+							marginLeft: -(height * 0.6),
+							borderRadius: thumbRadius
+						}
+					]}
+				>
+					<MaterialIcons
+						name="drag-indicator"
+						size={height * 0.75}
+						color="#888"
+					/>
+				</View>
+
+				{range && (
+					<View
+						style={[
+							styles.thumb,
+							{
+								left: `${percentMax * 100}%`,
+								height: height + 10,
+								width: height * 1.25,
+								marginLeft: -(height * 0.6),
+								borderRadius: thumbRadius
+							}
+						]}
+					>
+						<MaterialIcons
+							name="drag-indicator"
+							size={height * 0.75}
+							color="#888"
+						/>
+					</View>
+				)}
+
+			</View>
+
+		</View>
+
+	);
+};
+
+const styles = StyleSheet.create({
+
+	container: {
+		justifyContent: "center"
+	},
+
+	track: {
+		width: "100%",
+		backgroundColor: "#eee",
+		borderRadius: 999,
+		justifyContent: "center"
+	},
+
+	fill: {
+		position: "absolute",
+		height: "100%",
+		backgroundColor: "#3b82f6",
+		borderRadius: 999
+	},
+
+	thumb: {
+		position: "absolute",
+		backgroundColor: "#fff",
+		borderWidth: 1,
+		borderColor: "#ddd",
+		alignItems: "center",
+		justifyContent: "center"
+	}
+
+});
+
+export default Slider;

package/components/Switch.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import Inline from "./Inline";
+import { StyleSheet, View } from "react-native";
+import COLORS from "./COLORS";
+import Text from "./Text";
+
+const Switch = ({active, setActive, size = 24}) => {
+
+    return (
+        <Inline>
+            <Inline style={[
+                styles.container,
+                {
+                    width: ((size + 15) * 2) - 5,
+                    backgroundColor: active ? COLORS.green[500] : COLORS.gray[300]
+                }
+            ]} justifyContent={active ? 'flex-end' : 'flex-start'} onPress={() => {
+                setActive(!active);
+            }}>
+                <View style={[
+                    styles.btn,
+                    {
+                        height: size,
+                        width: size + 15,
+                    }
+                ]} />
+            </Inline>
+        </Inline>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: COLORS.slate[200],
+        padding: 5,
+        borderRadius: 999,
+    },
+    btn: {
+        width: '100%',
+        backgroundColor: '#fff',
+        borderRadius: 99,
+    }
+})
+
+export default Switch;

package/components/Table.jsx

@@ -0,0 +1,67 @@
+import React, { createContext, useContext, useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import Text from "./Text";
+import Inline from "./Inline";
+import COLORS from "./COLORS";
+
+const TableContext = createContext(null);
+const useTable = () => {
+    const ctx = useContext(TableContext);
+    if (!ctx) throw new Error("Table subcomponents must be used inside Table");
+    return ctx;
+};
+
+const Table = ({ children, colsWidth }) => {
+    const [width, setWidth] = useState(0);
+
+    return (
+        <TableContext.Provider value={{
+            colsWidth: colsWidth ?? [],
+            width,
+        }}>
+            <ScrollView showsHorizontalScrollIndicator={false} horizontal style={{height: 'auto'}} contentContainerStyle={{ flexDirection: 'column', height: 'auto' }} onLayout={e => {
+                setWidth(e.nativeEvent.layout.width);
+            }}>
+                {children}
+            </ScrollView>
+        </TableContext.Provider>
+    )
+}
+
+Table.Row = ({ children, isHeader }) => {
+    const { colsWidth } = useTable();
+
+    return (
+        <Inline style={{
+            ...styles.row,
+            backgroundColor: isHeader ? COLORS.slate[200] : '#ffffff00'
+        }}>
+            {children}
+        </Inline>
+    )
+}
+Table.Cell = ({ children, index }) => {
+    const { colsWidth, width } = useTable();
+
+    return (
+        <View style={{
+            width: colsWidth[index] ?? 'auto',
+        }}>
+            { typeof children === "string" ?
+                <Text>{children}</Text>
+                : children
+            }
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    row: {
+        padding: 10,
+        paddingHorizontal: 20,
+        borderRadius: 8,
+    }
+})
+
+
+export default Table;

package/components/Text.jsx

@@ -0,0 +1,56 @@
+import React, { useEffect, useState } from "react";
+import { Text as RNText } from "react-native";
+import COLORS from "./COLORS";
+
+const Text = ({ children, style, size, align, limit, spacing, lineHeight = null, color = COLORS.stone[600] }) => {
+    const [toRender, setToRender] = useState(children);
+
+    useEffect(() => {
+        if (!limit) {
+            setToRender(children);
+            return;
+        }
+
+        if (typeof children !== "string") {
+            setToRender(children);
+            return;
+        }
+
+        let truncated = children;
+        let isTruncated = false;
+
+        if (typeof limit === "number") {
+            if (children.length > limit) {
+                truncated = children.substring(0, limit);
+                isTruncated = true;
+            }
+        } else if (typeof limit === "object" && limit.count) {
+            const words = children.split(" ");
+            if (words.length > limit.count) {
+                truncated = words.slice(0, limit.count).join(" ");
+                isTruncated = true;
+            }
+        }
+
+        setToRender(isTruncated ? truncated + "..." : truncated);
+    }, [children, limit]);
+
+    return (
+        <RNText
+            style={[
+                {
+                    fontSize: size,
+                    textAlign: align,
+                    lineHeight: lineHeight ?? undefined,
+                    letterSpacing: spacing ?? undefined,
+                    color,
+                },
+                style
+            ]}
+        >
+            {toRender}
+        </RNText>
+    );
+};
+
+export default Text;

package/components/Toggle.jsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import Inline from "./Inline";
+import COLORS from "./COLORS";
+import Text from "./Text";
+
+const Toggle = ({ options = [], value = null, setValue, onChange, objectKey = null }) => {
+
+    const getOptionValue = (opt) => {
+        if (objectKey && typeof opt === 'object') {
+            return opt[objectKey];
+        }
+        return opt;
+    };
+
+    const isActive = (opt, index) => {
+        if (value === null) {
+            return index === 0;
+        }
+
+        // compare primitive directly
+        if (typeof opt !== 'object') {
+            return value === opt;
+        }
+
+        // compare object by key
+        if (objectKey) {
+            return value?.[objectKey] === opt?.[objectKey];
+        }
+
+        // fallback: strict reference
+        return value === opt;
+    };
+
+    const handlePress = (opt) => {
+        setValue?.(opt);
+        onChange?.(opt);
+    };
+
+    return (
+        <Inline>
+            <Inline gap={0} style={styles.area}>
+                {options.map((opt, index) => {
+
+                    const active = isActive(opt, index);
+
+                    return (
+                        <TouchableOpacity
+                            key={index}
+                            onPress={() => handlePress(opt)}
+                            style={[
+                                styles.item,
+                                active && styles.item_active
+                            ]}
+                        >
+                            <Text size={13} color={active ? COLORS.primary : COLORS.slate[500]} style={{fontWeight: active ? '700' : '400'}}>
+                                {getOptionValue(opt)}
+                            </Text>
+                        </TouchableOpacity>
+                    );
+
+                })}
+            </Inline>
+        </Inline>
+    );
+};
+
+const styles = StyleSheet.create({
+    area: {
+        borderRadius: 999,
+        backgroundColor: COLORS.slate[100],
+        padding: 5,
+    },
+    item: {
+        padding: 10,
+        paddingHorizontal: 20,
+        borderRadius: 99,
+    },
+    item_active: {
+        backgroundColor: '#fff',
+        shadowColor: '#ddd',
+        shadowOpacity: 0.8,
+        shadowOffset: { width: 1, height: 1},
+        shadowRadius: 10,
+    }
+});
+
+export default Toggle;

package/index.js

@@ -1,2 +1,21 @@
-export * from './elements';
-export * from './components';
+export { default as Alert } from "./components/Alert";
+export { default as Avatar } from "./components/Avatar";
+export { default as BottomSheet } from "./components/BottomSheet";
+export { default as Breadcrumb } from "./components/Breadcrumb";
+export { default as Button } from "./components/Button";
+export { default as Card } from "./components/Card";
+export { default as Checkbox } from "./components/Checkbox";
+export { default as COLORS } from "./components/COLORS";
+export { default as Dialog } from "./components/Dialog";
+export { default as Divider } from "./components/Divider";
+export { default as Dropdown } from "./components/Dropdown";
+export { default as Grid } from "./components/Grid";
+export { default as Inline } from "./components/Inline";
+export { default as Input } from "./components/Input";
+export { default as ProgressBar } from "./components/ProgressBar";
+export { default as Rate } from "./components/Rate";
+export { default as Slider } from "./components/Slider";
+export { default as Switch } from "./components/Switch";
+export { default as Table } from "./components/Table";
+export { default as Text } from "./components/Text";
+export { default as Toggle } from "./components/Toggle";

package/package.json

@@ -1,28 +1,24 @@
 {
   "name": "ripal-ui",
-  "version": "1.1.395",
-  "description": "A collection of React elements and components",
+  "version": "2.0.2",
+  "description": "Reusable React Native UI components",
   "main": "index.js",
-  "types": "index.d.ts",
-  "scripts": {
-    "build": "babel elements components --out-dir dist",
-    "postinstall": "node ./scripts/generateConfig.js"
-  },
-  "dependencies": {
-    "expo-secure-store": "~15.0.7",
-    "react": "^19.1.0",
-    "react-native": "^0.81.5"
-  },
+  "react-native": "index.js",
+  "files": [
+    "components",
+    "index.js"
+  ],
+  "keywords": [
+    "react-native",
+    "ui",
+    "components"
+  ],
+  "author": "Your Name",
+  "license": "MIT",
+
   "peerDependencies": {
-    "@expo-google-fonts/poppins": ">=0.3.0",
-    "expo-font": ">=11.0.0"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.25.6",
-    "@babel/core": "^7.25.2",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
-    "@types/react": "^19.0.0",
-    "typescript": "^5.6.2"
+    "react": ">=18",
+    "react-native": ">=0.70",
+    "@react-native-vector-icons/material-icons": ">=12"
   }
-}
+}

package/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-    presets: ['@babel/preset-env', '@babel/preset-react']
-};