ripal-ui 1.1.395 → 2.0.2

package/README.md

@@ -0,0 +1,3 @@
+# Ripal UI
+
+The doc is working in progress (still)

package/components/Alert.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import Inline from "./Inline";
+import Text from "./Text";
+import COLORS from "./COLORS";
+
+/**
+ * @typedef {Object} AlertProps
+ * @property {string} title - Alert title text
+ * @property {string|null} [body] - Optional body text
+ * @property {string} [color] - Accent color
+ * @property {React.ReactNode|null} [icon] - Icon element
+ * @property {number} [iconSize] - Icon size
+ * @property {import("react-native").StyleProp<import("react-native").ViewStyle>} [iconStyle]
+ * @property {import("react-native").StyleProp<import("react-native").ViewStyle>} [contentStyle]
+ */
+
+/**
+ * @param {AlertProps} props
+ */
+const Alert = ({title, body = null, color = COLORS.primary, icon = null, iconSize = 42, iconStyle, contentStyle}) => {
+    return (
+        <Inline style={[
+            styles.container
+        ]} gap={15} alignItems={body === null ? 'center' : 'flex-start'}>
+            {
+                icon !== null &&
+                <View style={[
+                    styles.icon, 
+                    {
+                        height: iconSize,
+                        aspectRatio: 1,
+                        backgroundColor: color,
+                    },
+                    iconStyle
+                ]}>
+                    {icon}
+                </View>
+            }
+            <View style={[
+                styles.content,
+                contentStyle,
+            ]}>
+                <Text style={{fontWeight: '700'}} color={COLORS.slate[800]}>{title}</Text>
+                {
+                    body &&
+                    <Text size={12}>{body}</Text>
+                }
+            </View>
+        </Inline>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        borderWidth: 1,
+        borderColor: COLORS.slate[200],
+        borderRadius: 20,
+        padding: 10,
+    },
+    icon: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: 15,
+    },
+    content: {
+        gap: 10,
+        flexGrow: 1,
+        flexBasis: 20,
+        flexShrink: 1,
+    }
+});
+
+export default Alert;

package/components/Avatar.jsx

@@ -0,0 +1,144 @@
+import React from "react";
+import Inline from "./Inline";
+import { Image, StyleSheet, View } from "react-native";
+import Text from "./Text";
+
+const Avatar = ({
+    images,
+    size = 48,
+    radius = 999,
+    borderColor = '#fff',
+    borderWidth = 4,
+    limit = 3
+}) => {
+    const theImages = Array.isArray(images) ? images : images ? [images] : [];
+
+    const visibleImages = theImages.slice(0, limit);
+    const remainingImages = theImages.slice(limit);
+    const remaining = remainingImages.length;
+
+    // only render max 4 in grid
+    const gridImages = remainingImages.slice(0, 4);
+    const gridCount = gridImages.length;
+
+    const avatarStyle = {
+        height: size,
+        width: size,
+        borderRadius: radius,
+        borderColor,
+        borderWidth,
+    };
+
+    const getGridLayout = (count) => {
+        switch (count) {
+            case 1:
+                return [{ width: '100%', height: '100%' }];
+
+            case 2:
+                return [
+                    { width: '50%', height: '100%' },
+                    { width: '50%', height: '100%' }
+                ];
+
+            case 3:
+                return [
+                    { width: '50%', height: '50%' },
+                    { width: '50%', height: '50%' },
+                    { width: '100%', height: '50%' }
+                ];
+
+            default: // 4
+                return [
+                    { width: '50%', height: '50%' },
+                    { width: '50%', height: '50%' },
+                    { width: '50%', height: '50%' },
+                    { width: '50%', height: '50%' }
+                ];
+        }
+    };
+
+    const gridLayout = getGridLayout(gridCount);
+
+    return (
+        <Inline gap={0}>
+            {visibleImages.map((img, i) => (
+                <Image
+                    key={i}
+                    source={{ uri: img }}
+                    style={[
+                        styles.img,
+                        avatarStyle,
+                        {
+                            marginLeft: i === 0 ? 0 : -(size / 2.25),
+                        }
+                    ]}
+                />
+            ))}
+
+            {remaining > 0 && (
+                <View
+                    style={[
+                        styles.img,
+                        avatarStyle,
+                        {
+                            marginLeft: -(size / 2.25),
+                            overflow: 'hidden',
+                        }
+                    ]}
+                >
+                    <View style={styles.grid}>
+                        {gridImages.map((img, i) => (
+                            <Image
+                                key={i}
+                                source={{ uri: img }}
+                                style={[
+                                    styles.gridImg,
+                                    gridLayout[i]
+                                ]}
+                            />
+                        ))}
+                    </View>
+
+                    <View style={styles.overlay}>
+                        <Text style={[styles.overlayText, { fontSize: size * 0.28 }]}>
+                            +{remaining}
+                        </Text>
+                    </View>
+                </View>
+            )}
+        </Inline>
+    );
+};
+
+const styles = StyleSheet.create({
+    img: {
+        backgroundColor: '#ddd',
+    },
+
+    grid: {
+        flex: 1,
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+
+    gridImg: {
+    },
+
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        backgroundColor: 'rgba(0,0,0,0.45)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+
+    overlayText: {
+        color: '#fff',
+        fontWeight: '700',
+    }
+});
+
+export default Avatar;

package/components/BottomSheet.jsx

@@ -0,0 +1,187 @@
+// BottomSheet.jsx
+import React, { useEffect, useRef, useState } from "react";
+import {
+    Animated, ScrollView, StyleSheet, TouchableWithoutFeedback, Platform, Pressable,
+    KeyboardAvoidingView,
+    Keyboard,
+} from "react-native";
+
+const OFFSCREEN = 1500;
+const CLOSE_THRESHOLD = -100;
+
+const BottomSheet = ({ visible = false, setVisible = null, onClose = null, children, style = null }) => {
+    const [isClosing, setClosing] = useState(false);
+    const [isVisible, setIsVisible] = useState(visible);
+
+    useEffect(() => {
+        if (!visible) return;
+
+        translateY.setValue(OFFSCREEN);
+
+        Animated.timing(translateY, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true,
+        }).start();
+
+        setClosing(false);
+
+    }, [visible]);
+
+    const translateY = useRef(new Animated.Value(OFFSCREEN)).current;
+    const keyboardShowEvent = Platform.OS === "ios" ? "keyboardWillShow" : "keyboardDidShow";
+    const keyboardHideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+
+    const backdropOpacity = translateY.interpolate({
+        inputRange: [0, 300],
+        outputRange: [0.4, 0],
+        extrapolate: "clamp",
+    });
+
+    useEffect(() => {
+        const keyboardDidShowListener = Keyboard.addListener(keyboardShowEvent, event => {
+            let keyboardHeight = event.endCoordinates.height - 81;
+            
+            Animated.timing(translateY, {
+                toValue: -keyboardHeight,
+                duration: 300,
+                useNativeDriver: true,
+            }).start();
+        });
+        const keyboardDidHideListener = Keyboard.addListener(keyboardHideEvent, event => {
+            Animated.timing(translateY, {
+                toValue: 0,
+                duration: 300,
+                useNativeDriver: true,
+            }).start();
+        });
+
+        return () => {
+            keyboardDidShowListener.remove();
+            keyboardDidHideListener.remove();
+        }
+    }, []);
+
+    useEffect(() => {
+        translateY.setValue(OFFSCREEN);
+        Animated.timing(translateY, {
+            toValue: 0,
+            duration: 300,
+            useNativeDriver: true,
+        }).start();
+
+        setClosing(false);
+    }, []);
+
+    // animate out when isClosing turns true
+    useEffect(() => {
+        if (!isClosing) return;
+
+            Animated.timing(translateY, {
+                toValue: OFFSCREEN,
+                duration: 300,
+                useNativeDriver: true,
+            }).start(() => {
+            // after closing animation: tell parent to remove this component
+            if (typeof onClose === "function") {
+                onClose();
+            }
+            if (setVisible) {
+                setVisible(false);
+            }
+            // just in case it's not unmounted immediately, reset state/value
+            setClosing(false);
+            translateY.setValue(OFFSCREEN);
+        });
+    }, [isClosing]);
+
+    // handle backdrop press
+    const handleBackdropPress = () => {
+        
+        if (!isClosing) {
+            setClosing(true);
+        };
+    };
+
+    if (!visible) return null;
+
+    return (
+        <Pressable style={styles.wrapper} pointerEvents="box-none" onPress={handleBackdropPress}>
+            {/* Animated backdrop */}
+            <TouchableWithoutFeedback onPress={handleBackdropPress}>
+                <Animated.View
+                    style={[
+                        styles.backdrop,
+                        { opacity: backdropOpacity },
+                    ]}
+                />
+            </TouchableWithoutFeedback>
+
+            <KeyboardAvoidingView
+                behavior={Platform.OS === "ios" ? "padding" : undefined}
+                keyboardVerticalOffset={Platform.OS === "ios" ? 60 : 0} // tweak if needed
+                style={{ flex: 1, justifyContent: "flex-end" }}
+            >
+                <Animated.View
+                    style={[
+                        styles.container_outer,
+                        { transform: [
+                            { translateY },
+                        ] },
+                    ]}
+                >
+                    <ScrollView
+                        contentContainerStyle={{ flexGrow: 1, justifyContent: 'flex-end', borderRadius: 12 }}
+                        scrollEventThrottle={16}
+                        // allow bigger overscroll on Android/iOS
+                        bounces={true}
+                        overScrollMode={Platform.OS === "android" ? "always" : undefined}
+                        onScroll={(event) => {
+                            const pos = event.nativeEvent.contentOffset.y;
+                            // if user pulls down far enough, start closing
+                            if (pos < CLOSE_THRESHOLD && !isClosing) {
+                                setClosing(true);
+                            }
+                        }}
+                        nestedScrollEnabled
+                    >
+                        <Pressable style={[styles.container, style]}>
+                            {children}
+                        </Pressable>
+                    </ScrollView>
+                </Animated.View>
+            </KeyboardAvoidingView>
+        </Pressable>
+    );
+};
+
+const styles = StyleSheet.create({
+    wrapper: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 999,
+        justifyContent: "flex-end",
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+        backgroundColor: "#000",
+    },
+    container_outer: {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 0,
+        top: 0,
+        paddingTop: 90, // same as your earlier paddingTop
+        justifyContent: "flex-end",
+        alignContent: "flex-end",
+    },
+    container: {
+        backgroundColor: "#fff",
+        padding: 20,
+        paddingVertical: 30,
+        borderTopLeftRadius: 12,
+        borderTopRightRadius: 12,
+    },
+});
+
+export default BottomSheet;

package/components/Breadcrumb.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import Inline from "./Inline";
+import Text from "./Text";
+import MaterialIcons from "@react-native-vector-icons/material-icons";
+import COLORS from "./COLORS";
+
+const Breadcrumb = ({items, gap = 5, icon = null}) => {
+    const isLast = (index) => index === items.length - 1;
+    return (
+        <Inline gap={gap}>
+            { items.map((item, i) => (
+                <Inline key={i} gap={gap}>
+                    <TouchableOpacity key={i} style={[styles.item, isLast(i) ? styles.item_active : null]} onPress={() => {
+                        if (item.hasOwnProperty('onPress')) {
+                            item.onPress(item);
+                        }
+                    }}>
+                        <Text 
+                            size={13}
+                            color={isLast(i) ? COLORS.primary : COLORS.slate[700]}
+                            style={{ fontWeight: isLast(i) ? '600' : '400' }}
+                        >{item.text}</Text>
+                    </TouchableOpacity>
+                    {
+                        i !== items.length - 1 &&
+                        <>
+                        {icon ? icon : <MaterialIcons name="chevron-right" size={14} />}
+                        </>
+                    }
+                </Inline>
+            )) }
+        </Inline>
+    )
+}
+
+const styles = StyleSheet.create({
+    item: {
+        borderRadius: 8,
+    },
+    item_active: {
+        padding: 8,
+        paddingHorizontal: 12,
+        backgroundColor: `${COLORS.primary}20`,
+    }
+})
+
+export default Breadcrumb;

package/components/Button.jsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import Inline from "./Inline";
+import Text from "./Text";
+import COLORS from "./COLORS";
+
+const Button = ({children, full = false, circle = false, color = COLORS.primary, size = 36, style, onPress, onLongPress, accent = 'primary', align = "center"}) => {
+    let computedStyles = {
+        flexGrow: full ? 1 : 0,
+    };
+    
+    if (accent === "primary") {
+        computedStyles['backgroundColor'] = color;
+        computedStyles['textColor'] = COLORS.white;
+    } else if (accent === "secondary") {
+        computedStyles['backgroundColor'] = `${color}30`;
+        computedStyles['textColor'] = color;
+    } else if (accent == "tertiary") {
+        computedStyles['backgroundColor'] = `${color}00`,
+        computedStyles['textColor'] = color;
+    }
+
+    computedStyles['justifyContent'] = align === "left" ? "flex-start" : align === "right" ? "flex-end" : align;
+
+    return (
+        <Inline>
+            <Inline style={[
+                styles.button,
+                computedStyles,
+                circle ? {...styles.circle_button, height: size } : null,
+                style
+            ]} onPress={onPress} onLongPress={onLongPress}>
+                {typeof children === "string" ?
+                    <Text color={computedStyles.textColor} style={{fontWeight: '700'}}>{children}</Text>
+                :
+                    children
+                }
+            </Inline>
+        </Inline>
+    )
+}
+
+const styles = StyleSheet.create({
+    button: {
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: COLORS.primary,
+        borderRadius: 99,
+        padding: 12,
+        paddingHorizontal: 20,
+    },
+    circle_button: {
+        padding: 0,paddingHorizontal: 0,
+        aspectRatio: 1,
+    }
+});
+
+export default Button;

package/components/COLORS.js

@@ -0,0 +1,138 @@
+const COLORS = {
+	black: "#000",
+	white: "#fff",
+	primary: "#2196f3",
+
+	amber: {
+		50: "#fffbeb",
+		100: "#fef3c6", 200: "#fee685", 300: "#ffd230", 400: "#ffb900", 500: "#fe9a00",
+		600: "#e17100", 700: "#bb4d00", 800: "#973c00", 900: "#7b3306", 950: "#461901"
+	},
+	blue: {
+		50: "#eff6ff",
+		100: "#dbeafe", 200: "#bedbff", 300: "#8ec5ff", 400: "#51a2ff", 500: "#2b7fff",
+		600: "#155dfc", 700: "#1447e6", 800: "#193cb8", 900: "#1c398e", 950: "#162456"
+	},
+	cyan: {
+		50: "#ecfeff",
+		100: "#cefafe", 200: "#a2f4fd", 300: "#53eafd", 400: "#00d3f2", 500: "#00b8db",
+		600: "#0092b8", 700: "#007595", 800: "#005f78", 900: "#104e64", 950: "#053345"
+	},
+	emerald: {
+		50: "#ecfdf5",
+		100: "#d0fae5", 200: "#a4f4cf", 300: "#5ee9b5", 400: "#00d492", 500: "#00bc7d",
+		600: "#009966", 700: "#007a55", 800: "#006045", 900: "#004f3b", 950: "#002c22"
+	},
+	fuchsia: {
+		50: "#fdf4ff",
+		100: "#fae8ff", 200: "#f6cfff", 300: "#f4a8ff", 400: "#ed6aff", 500: "#e12afb",
+		600: "#c800de", 700: "#a800b7", 800: "#8a0194", 900: "#721378", 950: "#4b004f"
+	},
+	gray: {
+		50: "#f9fafb",
+		100: "#f3f4f6", 200: "#e5e7eb", 300: "#d1d5dc", 400: "#99a1af", 500: "#6a7282",
+		600: "#4a5565", 700: "#364153", 800: "#1e2939", 900: "#101828", 950: "#030712"
+	},
+	green: {
+		50: "#f0fdf4",
+		100: "#dcfce7", 200: "#b9f8cf", 300: "#7bf1a8", 400: "#05df72", 500: "#00c950",
+		600: "#00a63e", 700: "#008236", 800: "#016630", 900: "#0d542b", 950: "#032e15"
+	},
+	indigo: {
+		50: "#eef2ff",
+		100: "#e0e7ff", 200: "#c6d2ff", 300: "#a3b3ff", 400: "#7c86ff", 500: "#615fff",
+		600: "#4f39f6", 700: "#432dd7", 800: "#372aac", 900: "#312c85", 950: "#1e1a4d"
+	},
+	lime: {
+		50: "#f7fee7",
+		100: "#ecfcca", 200: "#d8f999", 300: "#bbf451", 400: "#9ae600", 500: "#7ccf00",
+		600: "#5ea500", 700: "#497d00", 800: "#3c6300", 900: "#35530e", 950: "#192e03"
+	},
+	mauve: {
+		50: "#fafafa",
+		100: "#f3f1f3", 200: "#e7e4e7", 300: "#d7d0d7", 400: "#a89ea9", 500: "#79697b",
+		600: "#594c5b", 700: "#463947", 800: "#2a212c", 900: "#1d161e", 950: "#0c090c"
+	},
+	mist: {
+		50: "#f9fbfb",
+		100: "#f1f3f3", 200: "#e3e7e8", 300: "#d0d6d8", 400: "#9ca8ab", 500: "#67787c",
+		600: "#4b585b", 700: "#394447", 800: "#22292b", 900: "#161b1d", 950: "#090b0c"
+	},
+	neutral: {
+		50: "#fafafa",
+		100: "#f5f5f5", 200: "#e5e5e5", 300: "#d4d4d4", 400: "#a1a1a1", 500: "#737373",
+		600: "#525252", 700: "#404040", 800: "#262626", 900: "#171717", 950: "#0a0a0a"
+	},
+	olive: {
+		50: "#fbfbf9",
+		100: "#f4f4f0", 200: "#e8e8e3", 300: "#d8d8d0", 400: "#abab9c", 500: "#7c7c67",
+		600: "#5b5b4b", 700: "#474739", 800: "#2b2b22", 900: "#1d1d16", 950: "#0c0c09"
+	},
+	orange: {
+		50: "#fff7ed",
+		100: "#ffedd4", 200: "#ffd6a7", 300: "#ffb86a", 400: "#ff8904", 500: "#ff6900",
+		600: "#f54900", 700: "#ca3500", 800: "#9f2d00", 900: "#7e2a0c", 950: "#441306"
+	},
+	pink: {
+		50: "#fdf2f8",
+		100: "#fce7f3", 200: "#fccee8", 300: "#fda5d5", 400: "#fb64b6", 500: "#f6339a",
+		600: "#e60076", 700: "#c6005c", 800: "#a3004c", 900: "#861043", 950: "#510424"
+	},
+	purple: {
+		50: "#faf5ff",
+		100: "#f3e8ff", 200: "#e9d4ff", 300: "#dab2ff", 400: "#c27aff", 500: "#ad46ff",
+		600: "#9810fa", 700: "#8200db", 800: "#6e11b0", 900: "#59168b", 950: "#3c0366"
+	},
+	red: {
+		50: "#fef2f2",
+		100: "#ffe2e2", 200: "#ffc9c9", 300: "#ffa2a2", 400: "#ff6467", 500: "#fb2c36",
+		600: "#e7000b", 700: "#c10007", 800: "#9f0712", 900: "#82181a", 950: "#460809"
+	},
+	rose: {
+		50: "#fff1f2",
+		100: "#ffe4e6", 200: "#ffccd3", 300: "#ffa1ad", 400: "#ff637e", 500: "#ff2056",
+		600: "#ec003f", 700: "#c70036", 800: "#a50036", 900: "#8b0836", 950: "#4d0218"
+	},
+	sky: {
+		50: "#f0f9ff",
+		100: "#dff2fe", 200: "#b8e6fe", 300: "#74d4ff", 400: "#00bcff", 500: "#00a6f4",
+		600: "#0084d1", 700: "#0069a8", 800: "#00598a", 900: "#024a70", 950: "#052f4a"
+	},
+	slate: {
+		50: "#f8fafc",
+		100: "#f1f5f9", 200: "#e2e8f0", 300: "#cad5e2", 400: "#90a1b9", 500: "#62748e",
+		600: "#45556c", 700: "#314158", 800: "#1d293d", 900: "#0f172b", 950: "#020618"
+	},
+	stone: {
+		50: "#fafaf9",
+		100: "#f5f5f4", 200: "#e7e5e4", 300: "#d6d3d1", 400: "#a6a09b", 500: "#79716b",
+		600: "#57534d", 700: "#44403b", 800: "#292524", 900: "#1c1917", 950: "#0c0a09"
+	},
+	taupe: {
+		50: "#fbfaf9",
+		100: "#f3f1f1", 200: "#e8e4e3", 300: "#d8d2d0", 400: "#aba09c", 500: "#7c6d67",
+		600: "#5b4f4b", 700: "#473c39", 800: "#2b2422", 900: "#1d1816", 950: "#0c0a09"
+	},
+	teal: {
+		50: "#f0fdfa",
+		100: "#cbfbf1", 200: "#96f7e4", 300: "#46ecd5", 400: "#00d5be", 500: "#00bba7",
+		600: "#009689", 700: "#00786f", 800: "#005f5a", 900: "#0b4f4a", 950: "#022f2e"
+	},
+	violet: {
+		50: "#f5f3ff",
+		100: "#ede9fe", 200: "#ddd6ff", 300: "#c4b4ff", 400: "#a684ff", 500: "#8e51ff",
+		600: "#7f22fe", 700: "#7008e7", 800: "#5d0ec0", 900: "#4d179a", 950: "#2f0d68"
+	},
+	yellow: {
+		50: "#fefce8",
+		100: "#fef9c2", 200: "#fff085", 300: "#ffdf20", 400: "#fdc700", 500: "#f0b100",
+		600: "#d08700", 700: "#a65f00", 800: "#894b00", 900: "#733e0a", 950: "#432004"
+	},
+	zinc: {
+		50: "#fafafa",
+		100: "#f4f4f5", 200: "#e4e4e7", 300: "#d4d4d8", 400: "#9f9fa9", 500: "#71717b",
+		600: "#52525c", 700: "#3f3f46", 800: "#27272a", 900: "#18181b", 950: "#09090b"
+	}
+};
+
+export default COLORS;

package/components/Card.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { ImageBackground, StyleSheet, View } from "react-native";
+import Text from "./Text";
+import COLORS from "./COLORS";
+
+const Card = ({children, image = null, radius = 15, style, imageStyle}) => {
+    return (
+        <ImageBackground source={{uri: image}} imageStyle={[
+            {
+                borderRadius: radius,
+            },
+            imageStyle
+        ]} style={[
+            styles.card,
+            {
+                borderRadius: radius,
+            },
+            style
+        ]}>
+            {children}
+        </ImageBackground>
+    )
+}
+
+const styles = StyleSheet.create({
+    card: {
+        padding: 20,
+        borderWidth: 1,
+        borderColor: COLORS.slate[200]
+    }
+})
+
+export default Card;