ripal-ui 1.1.394 → 2.0.0

package/README.md

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

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: '#ddd',
+        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,157 @@
+import React from "react";
+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,
+    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/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/Checkbox.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+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}) => {
+    return (
+        <TouchableOpacity style={[
+            styles.box,
+            { 
+                height: size,
+                borderColor: active ? COLORS.primary : COLORS.slate[300],
+                backgroundColor: active ? COLORS.primary : '#ffffff00'
+            }
+        ]} onPress={() => {
+            setActive(!active);
+        }}>
+            {
+                active &&
+                <>
+                { icon !== null ? icon :
+                <MaterialIcons name="check" size={iconSize} color={'#fff'} />}
+                </>
+            }
+        </TouchableOpacity>
+    )
+}
+
+const styles = StyleSheet.create({
+    box: {
+        borderWidth: 1,
+        borderRadius: 6,
+        aspectRatio: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+    }
+})
+
+export default Checkbox;