ripal-ui 1.0.0

package/elements/Dropdown.jsx

@@ -0,0 +1,66 @@
+import React, { useState } from "react";
+import { Pressable, 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";
+
+const Dropdown = ({options, value, setValue, onChange, color = config.colors.primary, label = null, placeholder = 'Choose', objectKey = null, withSearch = false}) => {
+    const [isExpanded, setExpanded] = useState(false);
+    const isObject = objectKey === null ? false : true;
+
+    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.map((opt, o) => {
+                            let isActive = isObject ? opt[objectKey] === value : opt === value;
+                            return (
+                                <Inline key={o} style={styles.item} onPress={() => {
+                                    if (onChange) {
+                                        onChange(opt);
+                                    } else {
+                                        setValue(isObject ? opt[objectKey] : opt);
+                                    }
+                                    setExpanded(false);
+                                }}>
+                                    <Text weight={isActive ? '600SemiBold' : '400Regular'} color={isActive ? color : config.colors.slate[500]}>{isObject ? opt[objectKey] : opt}</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.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+
+const Inline = ({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.jsx

@@ -0,0 +1,48 @@
+import React, { useRef, useState } from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import Text from "./Text";
+import Inline from "./Inline";
+import config from "../config";
+
+const Input = ({label = null, left = null, right = null, height = 50, placeholder = null, mode = "text", 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[100],
+            }}>
+                {
+                    left !== null && left
+                }
+                <TextInput placeholder={placeholder} style={{
+                    height,
+                    flexGrow: 1,
+                }} onFocus={() => setFocused(true)} onChangeText={onChangeText} onBlur={() => setFocused(false)} inputMode={mode} secureTextEntry={secureTextEntry} />
+                {
+                    right !== null && right
+                }
+            </Inline>
+        </View>
+    )
+}
+
+const styles = StyleSheet.create({
+    inline: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    input: {
+        flexGrow: 1,
+        borderWidth: 1,
+        borderRadius: 12,
+        paddingHorizontal: 20,
+    }
+})
+
+export default Input

package/elements/ProgressBar.jsx

@@ -0,0 +1,29 @@
+import React, { useState, useEffect } from "react";
+import { View, StyleSheet } from "react-native";
+import config from "../config";
+
+const ProgressBar = ({value, from = 100, size = 5, style, percentage = null}) => {
+    const [percent, setPercent] = useState(null);
+    useEffect(() => {
+        if (percent == null) {
+            setPercent(value / from * 100);
+        }
+    })
+
+    return (
+        <View style={{...barStyle.area, ...style, height: size}}>
+            <View style={{...barStyle.value, width: `${percent}%`, 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.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import Inline from "./Inline";
+import config from "../config";
+import Text from "./Text";
+
+const Separator = ({children, width = "100%", space = 20, height = 1, color = config.colors.slate[200], textProps}) => {
+    return (
+        <Inline justifyContent="center">
+            <View style={{
+                backgroundColor: color,
+                width, height,
+                marginVertical: space,
+            }}></View>
+            {
+                children &&
+                <Text size={12} style={{
+                    position: 'absolute',
+                    backgroundColor: '#fff',
+                    padding: 10,
+                    paddingHorizontal: 20,
+                }} {...textProps}>{children}</Text>
+            }
+        </Inline>
+    )
+}
+
+const styles = StyleSheet.create({
+    // 
+})
+
+export default Separator

package/elements/Skeleton.jsx

@@ -0,0 +1,50 @@
+import React, { useEffect, useRef } from "react";
+import { Animated, StyleSheet, View } from "react-native";
+import config from "../config";
+
+const Skeleton = ({color = config.colors.slate[200], rounded = 8, width = `${Math.floor(Math.random() * (99 - 11 + 1)) + 11}%`, height = 20, aspectRatio = null}) => {
+    const aspectRatioStyles = { aspectRatio: aspectRatio};
+    const heightStyles = { height: height};
+    const opacity = useRef(new Animated.Value(1)).current;
+    const defaultStyles = {
+        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
+        ]}></Animated.View>
+    )
+}
+
+const styles = StyleSheet.create({
+    // 
+})
+
+export default Skeleton

package/elements/Switch.jsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import config from "../config";
+import Inline from "./Inline";
+
+const Switch = ({active = false, size = 24, spacer = 5, onChange = null}) => {
+    const [isActive, setActive] = useState(active);
+
+    return (
+        <Pressable onPress={() => {
+            setActive(!isActive);
+            if (onChange !== null) {
+                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,
+                }}>
+                    {/*  */}
+                </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.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Text as RNText } 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";
+
+const Text = ({children, weight = "400Regular", size, color = config.colors.slate[500], align = "left", limit = 0, spacing = 0, lineHeight = null, style}) => {
+    const fontName = "Poppins";
+    let [fontsLoaded] = useFonts({
+        Poppins_300Light, Poppins_400Regular, Poppins_500Medium, Poppins_600SemiBold, Poppins_700Bold, Poppins_900Black
+    });
+
+    if (config.appLangs.default !== null) {
+        // children = config.appLangs[config.appLangs.default][children];
+        let 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) {
+        <RNText>{children}</RNText>
+    }
+
+    if (limit > 0 && 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/Toggle.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+
+import config from "../config";
+import Text from "./Text";
+import Inline from "./Inline";
+
+const Toggle = ({options, value, setValue}) => {
+    return (
+        <Inline style={styles.area}>
+            { options.map((opt, o) => {
+                let 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

@@ -0,0 +1,11 @@
+export { default as Button } from './Button';
+export { default as Dialog } from './Dialog';
+export { default as Dropdown } from './Dropdown';
+export { default as Inline } from './Inline';
+export { default as Input } from './Input';
+export { default as ProgressBar } from './ProgressBar';
+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 Toggle } from './Toggle';

package/index.js

@@ -0,0 +1,2 @@
+export * from './elements';
+export * from './components';

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "ripal-ui",
+  "version": "1.0.0",
+  "description": "A collection of React elements and components",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel elements components --out-dir dist"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-native": "^0.70.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.25.6",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7"
+  }
+}