ripal-ui 1.0.1 → 1.0.2

package/scripts/generateConfig.js

@@ -3,8 +3,7 @@ const fs = require('fs');
 const path = require('path');
 
 // Define the config file content
-const configContent = `
-const config = {
+const configContent = `const config = {
     appName: "",
     appLangs: {
         default: null,
@@ -61,13 +60,20 @@ export default config
 `;
 
 // Path to generate the config file in the user's project root
-const configFilePath = path.resolve(process.cwd(), 'ripal-ui.config.js');
+const configFilePath = path.resolve(process.cwd(), '../../ripal-ui.config.js');
+const langDirPath = path.resolve(process.cwd(), '../../lang');
+const enJsonFilePath = path.resolve(langDirPath, 'en.json');
 
 // Check if the config file already exists
 if (!fs.existsSync(configFilePath)) {
     // Write the config file
     fs.writeFileSync(configFilePath, configContent);
     console.log('ripal-ui.config.js has been generated in the root project.');
+
+    fs.mkdirSync(langDirPath, {recursive: true});
+
+    const enContent = JSON.stringify({ say_hello: "Hello world"}, null, 4);
+    fs.writeFileSync(enJsonFilePath, enContent);
 } else {
     console.log('ripal-ui.config.js already exists. No changes made.');
-}
+}

package/components/Circle.jsx

@@ -1,24 +0,0 @@
-import React from "react";
-import { Pressable, StyleSheet } from "react-native";
-import config from "../config";
-
-const Circle = ({size = 24, color = config.colors.primary, children, onPress, rounded = 999}) => {
-    return (
-        <Pressable onPress={onPress} style={{
-            ...styles.area,
-            backgroundColor: color,
-            height: size,
-            borderRadius: rounded
-        }}>{children}</Pressable>
-    )
-}
-
-const styles = StyleSheet.create({
-    area: {
-        aspectRatio: 1,
-        alignItems: 'center',
-        justifyContent: 'center',
-    }
-})
-
-export default Circle;

package/components/Tab.jsx

@@ -1,71 +0,0 @@
-import React, { useState } from "react";
-import { Pressable, ScrollView, StyleSheet, View } from "react-native";
-import Text from "../elements/Text";
-import Inline from "../elements/Inline";
-import config from "../config";
-
-const TabScreen = ({children}) => {
-    return children;
-}
-
-const Tab = ({children}) => {
-    const [index, setIndex] = useState(0);
-
-    return (
-        <View>
-            {
-                children.length > 3 ?
-                <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tab_area}>
-                    { children.map((child, c) => {
-                        let isActive = c === index;
-                        return (
-                            <Pressable key={c} style={{
-                                ...styles.tab_item,
-                                borderBottomColor: isActive ? config.colors.primary : config.colors.slate[200],
-                            }} onPress={() => setIndex(c)}>
-                                <Text 
-                                    color={isActive ? config.colors.primary : config.colors.slate[500]}
-                                    weight={isActive ? "600SemiBold" : "400Regular"}
-                                >{child.props.title}</Text>
-                            </Pressable>
-                        )
-                    })}
-                </ScrollView>
-                :
-                <Inline style={styles.tab_area} gap={0}>
-                    { children.map((child, c) => {
-                        let isActive = c === index;
-                        return (
-                            <Inline justifyContent="center" key={c} style={{
-                                ...styles.tab_item,
-                                borderBottomColor: isActive ? config.colors.primary : config.colors.slate[200],
-                            }} onPress={() => setIndex(c)}>
-                                <Text 
-                                    color={isActive ? config.colors.primary : config.colors.slate[500]}
-                                    weight={isActive ? "600SemiBold" : "400Regular"}
-                                >{child.props.title}</Text>
-                            </Inline>
-                        )
-                    })}
-                </Inline>
-            }
-            {
-                children[index]
-            }
-        </View>
-    )
-}
-
-const styles = StyleSheet.create({
-    tab_area: {
-        marginBottom: 10,
-    },
-    tab_item: {
-        paddingHorizontal: 20,
-        paddingVertical: 12,
-        flexGrow: 1,
-        borderBottomWidth: 1,
-    }
-})
-
-export { Tab, TabScreen }

package/components/index.js

@@ -1,4 +0,0 @@
-export { default as Circle } from './Circle';
-export { default as DatePicker } from './DatePicker';
-export { default as Tab } from './Tab';
-export { default as Table } from './Table';

package/elements/Dialog.jsx

@@ -1,64 +0,0 @@
-import React from "react";
-import { Pressable, StyleSheet, View } from "react-native";
-import config from "../config";
-import Text from "./Text";
-import Inline from "./Inline";
-import { TouchableOpacity } from "react-native";
-
-const DialogActions = ({children}) => {
-    return (
-        <Inline justifyContent="flex-end" gap={0} style={{
-            ...styles.action_area,
-            paddingTop: 20,
-            marginTop: 20 / 2,
-        }}>{children}</Inline>
-    )
-}
-
-const Dialog = ({spacer = 20, children, visible, onDismiss}) => {
-    if (visible) {
-        return (
-            <>
-                <TouchableOpacity style={styles.overlay}></TouchableOpacity>
-                <Pressable style={styles.container} onPress={() => {
-                    onDismiss();
-                }}>
-                    <Pressable style={{
-                        ...styles.content,
-                        padding: spacer,
-                        gap: spacer / 2,
-                    }}>
-                        {children}
-                    </Pressable>
-                </Pressable>
-            </>
-        )
-    }
-}
-
-const styles = StyleSheet.create({
-    overlay: {
-        backgroundColor: `#000000aa`,
-        position: 'absolute',
-        top: 0, left: 0, right: 0, bottom: 0,
-        zIndex: 10,
-    },
-    container: {
-        position: 'absolute',
-        top: 0, left: 0, right: 0, bottom: 0,
-        zIndex: 15,
-        alignItems: 'center',
-        justifyContent: 'center',
-    },
-    content: {
-        backgroundColor: '#fff',
-        width: '90%',
-        borderRadius: 12,
-    },
-    action_area: {
-        borderTopWidth: 1,
-        borderTopColor: config.colors.slate[200],
-    }
-})
-
-export {Dialog, DialogActions}

package/elements/Dropdown.jsx

@@ -1,66 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,48 +0,0 @@
-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