ripal-ui 1.0.0 → 1.0.2

package/elements/ProgressBar.tsx

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

@@ -0,0 +1,72 @@
+import React from "react";
+import { Dimensions, StyleSheet, View, ViewStyle } from "react-native";
+import Inline from "./Inline";
+import config from "../config";
+import Text from "./Text";
+
+interface SeparatorProps {
+	width?: any;
+	space?: number;
+	height?: number;
+	color?: string;
+	textProps?: React.ComponentProps<typeof Text>;
+	style?: ViewStyle;
+	children?: React.ReactNode;
+}
+
+const Separator: React.FC<SeparatorProps> = ({
+	children,
+	width = "100%",
+	space = 20,
+	height = 1,
+	color = config.colors.slate[200],
+	textProps,
+	style,
+}) => {
+	let theWidth = width;
+	if (typeof width === "string") {
+		let toReturn = [];
+		let w = width.split("");
+		w.map((wi, w) => {
+			if (!isNaN(wi)) {
+				toReturn.push(wi);
+			}
+		});
+		toReturn = parseInt(toReturn.join(""));
+		theWidth = toReturn / 100 * Dimensions.get('screen').width;
+		console.log(theWidth);
+	}
+	return (
+		<Inline justifyContent="center">
+			<View
+                style={{
+					backgroundColor: color,
+					width: theWidth,
+					height: height,
+					marginVertical: space,
+					...style,
+				}}
+			></View>
+			{children && (
+				<Text
+					size={12}
+					style={{
+						position: "absolute",
+						backgroundColor: "#fff",
+						padding: 10,
+						paddingHorizontal: 20,
+					}}
+					{...textProps}
+				>
+					{children}
+				</Text>
+			)}
+		</Inline>
+	);
+};
+
+const styles = StyleSheet.create({
+	// Define your styles here if needed
+});
+
+export default Separator;

package/elements/Skeleton.tsx

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

package/elements/Switch.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from "react";
+import { Pressable, StyleSheet, View, ViewStyle } from "react-native";
+import config from "../config";
+import Inline from "./Inline";
+
+interface SwitchProps {
+	active?: boolean;
+	size?: number;
+	spacer?: number;
+	onChange?: () => void;
+}
+
+const Switch: React.FC<SwitchProps> = ({
+	active = false,
+	size = 24,
+	spacer = 5,
+	onChange = null,
+}) => {
+	const [isActive, setActive] = useState(active);
+
+	return (
+		<Pressable
+			onPress={() => {
+				setActive(!isActive);
+				if (onChange) {
+					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,
+					}}
+				>
+					{/* Add any inner content here if needed */}
+				</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.tsx

@@ -0,0 +1,73 @@
+import React, { FC } from "react";
+import { Text as RNText, TextStyle } 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";
+
+interface TextProps {
+    children: React.ReactNode;
+    weight?: '300Light' | '400Regular' | '500Medium' | '600SemiBold' | '700Bold' | '900Black';
+    size?: number;
+    color?: string;
+    align?: 'left' | 'right' | 'center' | 'justify';
+    limit?: number;
+    spacing?: number;
+    lineHeight?: number | null;
+    style?: TextStyle;
+}
+
+const Text: FC<TextProps> = ({
+    children,
+    weight = "400Regular",
+    size,
+    color = config.colors.slate[500],
+    align = "left",
+    limit = 0,
+    spacing = 0,
+    lineHeight = null,
+    style
+}) => {
+    const fontName = "Poppins";
+    const [fontsLoaded] = useFonts({
+        Poppins_300Light,
+        Poppins_400Regular,
+        Poppins_500Medium,
+        Poppins_600SemiBold,
+        Poppins_700Bold,
+        Poppins_900Black
+    });
+
+    if (config.appLangs.default !== null) {
+        const 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) {
+        return <RNText>{children}</RNText>; // Return statement added to properly handle loading state
+    }
+
+    if (limit > 0 && typeof children === "string" && 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/Toast.tsx

@@ -0,0 +1,65 @@
+import React, { useEffect } from "react";
+import { StyleSheet, View, ViewStyle } from "react-native";
+import Inline from "./Inline";
+import Text from "./Text";
+import config from "../config";
+
+interface ToastProps {
+	label?: string;
+	right?: React.ReactNode; // Allows for any valid React node
+	visible?: boolean;
+	setVisible: (visible: boolean) => void;
+	timeout?: number;
+	containerStyle?: ViewStyle; // Style for the container View
+	style?: ViewStyle; // Additional style for the Toast
+	textProps?: React.ComponentProps<typeof Text>; // Props for the Text component
+}
+
+const Toast: React.FC<ToastProps> = ({
+	label = "Percakapan berhasil dihapus",
+	right = null,
+	visible = true,
+	setVisible,
+	timeout = 3000,
+	containerStyle,
+	textProps,
+}) => {
+	useEffect(() => {
+		if (visible) {
+			const timer = setTimeout(() => {
+				setVisible(false);
+			}, timeout);
+
+			return () => clearTimeout(timer);
+		}
+	}, [visible, setVisible, timeout]);
+
+	return visible ? (
+		<View style={{ ...styles.container, ...containerStyle }}>
+			<Inline style={styles.area}>
+				<Text size={12} style={{ flexGrow: 1 }} color="#fff" {...textProps}>
+					{label}
+				</Text>
+				{right}
+			</Inline>
+		</View>
+	) : null;
+};
+
+const styles = StyleSheet.create({
+	container: {
+		position: 'absolute',
+		bottom: 0,
+		left: 0,
+		right: 0,
+		padding: 20,
+	},
+	area: {
+		backgroundColor: config.colors.slate[800],
+		borderRadius: 999,
+		padding: 20,
+		paddingHorizontal: 30,
+	},
+});
+
+export default Toast;

package/elements/Toggle.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Pressable, StyleSheet, View, ViewStyle } from "react-native";
+import config from "../config";
+import Text from "./Text";
+import Inline from "./Inline";
+
+interface ToggleProps {
+	options: string[];
+	value: any;
+	setValue: (value: string) => void;
+}
+
+const Toggle: React.FC<ToggleProps> = ({ options, value, setValue }) => {
+	return (
+		<Inline style={styles.area}>
+			{options.map((opt, o) => {
+				const 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

@@ -1,5 +1,5 @@
 export { default as Button } from './Button';
-export { default as Dialog } from './Dialog';
+export { Dialog, DialogActions } from './Dialog';
 export { default as Dropdown } from './Dropdown';
 export { default as Inline } from './Inline';
 export { default as Input } from './Input';
@@ -8,4 +8,5 @@ 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 Toast } from './Toast';
 export { default as Toggle } from './Toggle';

package/package.json

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

package/scripts/generateConfig.js

@@ -0,0 +1,79 @@
+// ./scripts/generateConfig.js
+const fs = require('fs');
+const path = require('path');
+
+// Define the config file content
+const configContent = `const config = {
+    appName: "",
+    appLangs: {
+        default: null,
+        en: require('./lang/en.json')
+    },
+    colors: {
+        primary: "#3B82F6",
+        transparent: "#ffffff00",
+        white: "#fff",
+        slate: {
+            100: "#F1F5F9",200: "#E2E8F0",300: "#CBD5E1",
+            400: "#94A3B8",500: "#64748B",600: "#475569",
+            700: "#334155",800: "#1E293B",900: "#0F172A",
+        },
+        green: {
+            100: "#DCFCE7",200: "#BBF7D0",300: "#86EFAC ",
+            400: "#4ADE7F",500: "#22C55E",600: "#16A34A",
+            700: "#15803D",800: "#166534",900: "#14532D",
+        },
+        orange: {
+            100: "#FFEDD5",200: "#FED7AA",300: "#FDBA74",
+            400: "#FB923C",500: "#F87316",600: "#EA580C",
+            700: "#C2410C",800: "#9A3412",900: "#7C2D12",
+        },
+        purple: {
+            100: "#F3E8FF",200: "#E9D5FF",300: "#D8B4FE",
+            400: "#C084FC",500: "#A855F7",600: "#9333EA",
+            700: "#7E22CE",800: "#6B21A8",900: "#581C87",
+        },
+        blue: {
+            100: "#D8EAFE",200: "#BFD8FE",300: "#94C5FD",
+            400: "#60A5FA",500: "#3B82F6",600: "#2563EB",
+            700: "#1D4ED8",800: "#1E41AF",900: "#1E3A8A",
+        },
+        red: {
+            100: "#FEE2E2",200: "#FECACA",300: "#FCA5A5",
+            400: "#F87171",500: "#EF4444",600: "#DC2626",
+            700: "#B91C1C",800: "#991B1B",900: "#7F1D1D",
+        },
+        lime: {
+            100: "#ECFCCB",200: "#D9F99D",300: "#BEF264",
+            400: "#A3E635",500: "#84CC16",600: "#65A30D",
+            700: "#4D7C0F",800: "#3F6212",900: "#365314",
+        },
+        yellow: {
+            100: "#FEF9C3",200: "#FEF08A",300: "#FDE047",
+            400: "#FACC15",500: "#EAB308",600: "#CA8A04",
+            700: "#A16207",800: "#854D0E",900: "#713F12",
+        }
+    }
+}
+
+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 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';