ripal-ui 1.1.394 → 2.0.0

package/elements/Switch.tsx

@@ -1,63 +0,0 @@
-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();
-				}
-			}}
-		>
-			<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

@@ -1,95 +0,0 @@
-import React, { FC, useEffect, useState } 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";
-import SecureStorage from "./SecureStorage";
-import * as Font from "expo-font";
-
-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, setFontsLoaded] = useState(false);
-
-    useEffect(() => {
-        Font.loadAsync({
-            Poppins_300Light: require("@expo-google-fonts/poppins/300Light/Poppins_300Light.ttf"),
-            Poppins_400Regular: require("@expo-google-fonts/poppins/400Regular/Poppins_400Regular.ttf"),
-            Poppins_500Medium: require("@expo-google-fonts/poppins/500Medium/Poppins_500Medium.ttf"),
-            Poppins_600SemiBold: require("@expo-google-fonts/poppins/600SemiBold/Poppins_600SemiBold.ttf"),
-            Poppins_700Bold: require("@expo-google-fonts/poppins/700Bold/Poppins_700Bold.ttf"),
-            Poppins_900Black: require("@expo-google-fonts/poppins/900Black/Poppins_900Black.ttf"),
-        })
-        .then(() => setFontsLoaded(true))
-        .catch((err) => console.error("Font loading error:", err));
-    }, []);
-
-    const [lang, setLang] = useState(config.appLangs.default);
-
-    useEffect(() => {
-        SecureStorage.getItem('app_lang').then(appLang => {
-            if (appLang != null) {
-                setLang(appLang);
-            }
-        });
-    }, []);
-
-    if (lang !== null) {
-        const ogChildren = children;
-        if (typeof children === "string") {
-            children = children.split('.').reduce((acc, key) => {
-                return acc && acc[key] !== undefined ? acc[key] : ogChildren;
-            }, config.appLangs[lang]);
-        }
-    }
-
-    if (!fontsLoaded) {
-        console.error('Failed to load font');
-        
-        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,
-                letterSpacing: spacing,
-                lineHeight: lineHeight ?? undefined,
-                fontFamily: `${fontName}_${weight}`,
-                textAlign: align,
-                },
-                style,
-            ]}
-        >
-            {children}
-        </RNText>
-    );
-};
-
-export default Text;

package/elements/Toast.tsx

@@ -1,71 +0,0 @@
-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;
-	color?: string;
-	right?: React.ReactNode; // Allows for any valid React node
-	visible?: boolean;
-	onDismiss: () => 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,
-	color = config.colors.slate[800],
-	onDismiss,
-	timeout = 3000,
-	containerStyle,
-	style,
-	textProps,
-}) => {
-	useEffect(() => {
-		if (visible) {
-			const timer = setTimeout(() => {
-				onDismiss();
-			}, timeout);
-
-			return () => clearTimeout(timer);
-		}
-	}, [visible, onDismiss, timeout]);
-
-	return visible ? (
-		<View style={{ ...styles.container, ...containerStyle }}>
-			<Inline style={{
-				...styles.area,
-				backgroundColor: color,
-				...style
-			}}>
-				<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: {
-		borderRadius: 999,
-		padding: 20,
-		paddingHorizontal: 30,
-	},
-});
-
-export default Toast;

package/elements/Toggle.tsx

@@ -1,59 +0,0 @@
-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,14 +0,0 @@
-export { default as Button } from './Button';
-export { default as ColorPicker } from './ColorPicker';
-export { Dialog, DialogActions } 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 Slider } from './Slider';
-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/index.d.ts

@@ -1,237 +0,0 @@
-// index.d.ts
-declare module 'ripal-ui' {
-	import * as React from 'react';
-    import { ViewStyle, TextInputProps } from 'react-native';
-
-	type Size = 'sm' | 'md' | 'lg';
-	type Variant = 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
-
-	// Button
-	export interface ButtonProps {
-		children: React.ReactNode;
-        accent?: 'primary' | 'secondary' | 'tertiary';
-        onPress?: () => void;
-        onLongPress?: () => void;
-        color?: string;
-        height?: number;
-        circle?: boolean;
-        justifyContent?: ViewStyle['justifyContent'];
-        style?: ViewStyle;
-        textProps?: Record<string, unknown>;
-	}
-	export const Button: React.FC<ButtonProps>;
-
-    // ColorPicker
-	export interface ColorPickerProps {
-		value?: string;
-        label?: string;
-        onChange?: (color: string) => void;
-	}
-	export const ColorPicker: React.FC<ColorPickerProps>;
-
-	// Input
-	export interface InputProps {
-		value?: string;
-        label?: string | null;
-        left?: React.ReactNode | null; // Allows for any valid React node
-        right?: React.ReactNode | null; // Allows for any valid React node
-        height?: number;
-        placeholder?: string | null;
-        mode?: TextInputProps["keyboardType"]; // Use keyboardType from TextInputProps
-        secureTextEntry?: boolean;
-        multiline?: boolean;
-        gap?: number;
-        onChangeText: (text: string) => void; // Function to handle text changes
-	}
-	export const Input: React.FC<InputProps>;
-
-    // ProgressBar
-	export interface ProgressBarProps {
-		value: number;
-        from?: number;
-        size?: number;
-        style?: ViewStyle;
-        percentage?: number | null;
-	}
-	export const ProgressBar: React.FC<ProgressBarProps>;
-
-    // Separator
-	export interface SeparatorProps {
-		width?: any;
-        space?: number;
-        height?: number;
-        color?: string;
-        textProps?: React.ComponentProps<typeof Text>;
-        style?: ViewStyle;
-        children?: React.ReactNode;
-	}
-	export const Separator: React.FC<SeparatorProps>;
-
-	// Checkbox
-	export interface CheckboxProps {
-		checked?: boolean;
-		onChange?: (checked: boolean) => void;
-		label?: string;
-		disabled?: boolean;
-	}
-	export const Checkbox: React.FC<CheckboxProps>;
-
-	// Text
-	export 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;
-	}
-	export const Text: React.FC<TextProps>;
-
-	// Circle
-	export interface CircleProps {
-		size?: number;
-		color?: string;
-		children?: React.ReactNode;
-	}
-	export const Circle: React.FC<CircleProps>;
-
-	// Row
-	export interface RowProps {
-		children?: React.ReactNode;
-		justify?: 'start' | 'center' | 'end' | 'between' | 'around';
-		align?: 'start' | 'center' | 'end' | 'stretch';
-		gap?: number;
-		className?: string;
-	}
-	export const Row: React.FC<RowProps>;
-
-	// Inline
-	export interface InlineProps {
-		children: React.ReactNode;
-        alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
-        justifyContent?: "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly";
-        gap?: number;
-        style?: ViewStyle;
-        onPress?: () => void;
-        onLongPress?: () => void;
-	}
-	export const Inline: React.FC<InlineProps>;
-
-	// Cell
-	export interface CellProps {
-		children?: React.ReactNode;
-		width?: number | string;
-	}
-	export const Cell: React.FC<CellProps>;
-
-	// // BottomSheet
-	// export interface BottomSheetProps {
-	// 	open: boolean;
-	// 	onClose: () => void;
-	// 	children?: React.ReactNode;
-	// }
-	// export const BottomSheet: React.FC<BottomSheetProps>;
-
-	// Skeleton
-	export interface SkeletonProps {
-		color?: string;
-        rounded?: number;
-        width?: any;
-        height?: number;
-        aspectRatio?: number | null;
-	}
-	export const Skeleton: React.FC<SkeletonProps>;
-
-    // Slider
-	export interface SliderProps {
-		start?: number;
-        end?: number;
-        value?: number;
-        rounded?: number;
-        trackColor?: string;
-        color?: string;
-        height?: number;
-        thumbOpacity?: number;
-        thumbColor?: string;
-        onChange?: (value: number) => void;
-        setScrollEnabled?: (enabled: boolean) => void;
-	}
-	export const Slider: React.FC<SliderProps>;
-
-    // Switch
-	export interface SwitchProps {
-		active?: boolean;
-        size?: number;
-        spacer?: number;
-        onChange?: () => void;
-	}
-	export const Switch: React.FC<SwitchProps>;
-
-	// Dialog
-	export interface DialogProps {
-		spacer?: number;
-        children: React.ReactNode;
-        visible: boolean;
-        onDismiss: () => void;
-	}
-	export const Dialog: React.FC<DialogProps>;
-
-    // DialogActions
-	export interface DialogActionsProps {
-		children: React.ReactNode;
-	}
-	export const DialogActions: React.FC<DialogActionsProps>;
-
-    type OptionType<T> = T[] | string[];
-
-	export interface DropdownProps<T> {
-		options: OptionType<T>;
-		value: T | null;
-		setValue: (value: T) => void;
-		onChange?: (value: T) => void;
-		color?: string;
-		label?: string | null;
-		placeholder?: string;
-		objectKey?: keyof T | null;
-		withSearch?: boolean;
-	}
-
-	// Generic component declaration
-	export function Dropdown<T>(props: DropdownProps<T>): React.ReactElement;
-
-    // Toast
-	export interface ToastProps {
-		label?: string;
-        color?: string;
-        right?: React.ReactNode; // Allows for any valid React node
-        visible?: boolean;
-        onDismiss: () => 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
-	}
-	export const Toast: React.FC<ToastProps>;
-
-    // Toggle
-	export interface ToggleProps {
-		options: string[];
-        value: any;
-        setValue: (value: string) => void;
-	}
-	export const Toggle: React.FC<ToggleProps>;
-
-	// // Table
-	// export interface TableProps<T = any> {
-	// 	data: T[];
-	// 	columns: {
-	// 		title: string;
-	// 		key: keyof T;
-	// 		render?: (row: T) => React.ReactNode;
-	// 	}[];
-	// }
-	// export const Table: React.FC<TableProps>;
-}

package/scripts/generateConfig.js

@@ -1,80 +0,0 @@
-// ./scripts/generateConfig.js
-const fs = require('fs');
-const path = require('path');
-const { exec } = require('child_process');
-
-// 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.');
-}