ripal-ui 2.0.0 → 2.0.2

package/README.md

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

package/components/Alert.jsx

@@ -54,7 +54,7 @@ const Alert = ({title, body = null, color = COLORS.primary, icon = null, iconSiz
 const styles = StyleSheet.create({
     container: {
         borderWidth: 1,
-        borderColor: '#ddd',
+        borderColor: COLORS.slate[200],
         borderRadius: 20,
         padding: 10,
     },

package/components/Avatar.jsx

@@ -3,19 +3,6 @@ import Inline from "./Inline";
 import { Image, StyleSheet, View } from "react-native";
 import Text from "./Text";
 
-/**
- * @typedef {Object} AvatarProps
- * @property {string|array} [images] - URI of Avatars image
- * @property {int|null} [size] - Size of the image
- * @property {int|null} [radius] - Rounded level of avatar image (borderRadius)
- * @property {string|null} [borderColor] - Edge color of each image
- * @property {int|null} [borderWidth] - Border with of each image
- * @property {int|null} [limit] - Number of displayed image as in a group
- */
-
-/**
- * @param {AvatarProps} props
- */
 const Avatar = ({
     images,
     size = 48,

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/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;

package/components/Checkbox.jsx

@@ -3,26 +3,14 @@ import { StyleSheet, TouchableOpacity } from "react-native";
 import COLORS from "./COLORS";
 import MaterialIcons from "@react-native-vector-icons/material-icons";
 
-/**
- * @typedef {Object} CheckboxProps
- * @property {int} [size] - Checkbox's outer size
- * @property {boolean} [active] - State to control mark's visibility (useState)
- * @property {void} [setActive] - Function to mutate the state (useState)
- * @property {null} [icon] - Icon component to override the default checkmark icon
- * @property {int|null} [iconSize] - Size of default icon (checkmark)
- */
-
-/**
- * @param {CheckboxProps} props
- */
-const Checkbox = ({size = 20, active, setActive, icon = null, iconSize = 14}) => {
+const Checkbox = ({size = 20, active, color = COLORS.primary, setActive, icon = null, iconSize = 14}) => {
     return (
         <TouchableOpacity style={[
             styles.box,
             { 
                 height: size,
-                borderColor: active ? COLORS.primary : COLORS.slate[300],
-                backgroundColor: active ? COLORS.primary : '#ffffff00'
+                borderColor: active ? color : COLORS.slate[300],
+                backgroundColor: active ? color : '#ffffff00'
             }
         ]} onPress={() => {
             setActive(!active);

package/components/Dialog.jsx

@@ -5,27 +5,6 @@ import Inline from "./Inline";
 import COLORS from "./COLORS";
 import Button from "./Button";
 import MaterialIcons from "@react-native-vector-icons/material-icons";
-/**
- * @typedef {Object} DialogProps
- * @property {boolean} [visible] - State to control dialog visibility (useState)
- * @property {void} [setVisible] - Function to mutate the visible state (useState)
- * @property {void} [onClose] - Close event
- */
-
-/**
- * @typedef {Object} BodyProps
- * @property {int|null} [gap] - Flex gap inside the dialog's body
- */
-
-/**
- * @typedef {Object} TitleProps
- * @property {bool|null} [withClose] - Set to false to hide close button
- */
-
-/**
- * @typedef {Object} ActionProps
- * @property {int|null} [gap] - Flex gap inside the dialog's body
- */
 
 const DialogContext = createContext(null);
 
@@ -35,9 +14,6 @@ const useDialog = () => {
     return ctx;
 };
 
-/**
- * @param {DialogProps} props
- */
 const Dialog = ({
     children,
     visible = false,
@@ -109,9 +85,6 @@ const Dialog = ({
     );
 };
 
-/**
- * @param {BodyProps} props
- */
 Dialog.Body = ({ children, gap = 20 }) => {
     const { close } = useDialog();
 
@@ -122,9 +95,6 @@ Dialog.Body = ({ children, gap = 20 }) => {
     )
 }
 
-/**
- * @param {TitleProps} props
- */
 Dialog.Title = ({ children, withClose = true }) => {
     const { close } = useDialog();
 
@@ -161,9 +131,6 @@ Dialog.Title = ({ children, withClose = true }) => {
     );
 };
 
-/**
- * @param {ActionProps} props
- */
 Dialog.Actions = ({ children, gap = 10 }) => {
     return (
         <Inline style={[styles.action_area]} gap={gap}>

package/components/Grid.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useState, memo } from "react";
+import { StyleSheet, View } from "react-native";
+
+const Grid = ({ children, col = 2, gap = 20, style }) => {
+    const [containerWidth, setContainerWidth] = useState(0);
+    const [itemWidth, setItemWidth] = useState(0);
+    const handleLayout = (event) => {
+        const newWidth = event.nativeEvent.layout.width;
+        setContainerWidth(prev => (prev !== newWidth ? newWidth : prev));
+    };
+    useEffect(() => {
+        if (containerWidth > 0 && col > 0) {
+            const totalGap = gap * (col - 1);
+            const calculatedWidth = (containerWidth - totalGap) / col;
+            setItemWidth(prev => prev !== calculatedWidth ? calculatedWidth : prev);
+        }
+    }, [containerWidth, col, gap]);
+    return (React.createElement(View, { style: [styles.container, { gap }, style], onLayout: handleLayout }, React.Children.map(children, (child, index) => (React.createElement(View, { key: index, style: { width: itemWidth } }, child)))));
+};
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        flexWrap: "wrap"
+    }
+});
+export default memo(Grid);

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/index.js

@@ -1,13 +1,18 @@
 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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ripal-ui",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "description": "Reusable React Native UI components",
   "main": "index.js",
   "react-native": "index.js",