ui-rn 1.0.19 → 2.0.0

package/package.json

@@ -1,19 +1,26 @@
 {
   "name": "ui-rn",
-  "version": "1.0.19",
+  "version": "2.0.0",
   "repository": "https://github.com/package-dev/ui-rn",
   "description": "ui-rn",
   "author": "Phamha98",
   "main": "src/index.tsx",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.70"
+  },
   "dependencies": {
-    "underscore": "^1.13.6",
     "@types/underscore": "^1.11.15",
-    "validate-color": "^2.2.4",
+    "react-native-vector-icons": "^9.2.0",
     "react-native-safe-area-view": "^1.1.1",
-    "react-native-linear-gradient": "^2.8.3",
-    "react-native-indicators": "^0.17.0",
-    "react-native-dropdownalert": "^4.5.1",
-    "react-native-vector-icons": "^9.2.0"
+    "underscore": "^1.13.6"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "react-native": "^0.84.1",
+    "@react-native/typescript-config": "^0.84.1"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/src/Icon/index.tsx

@@ -1,149 +1,102 @@
-import React from 'react'
-import {
-    FlexStyle,
-    StyleProp,
-    StyleSheet,
-    TextProps,
-    TextStyle,
-    TouchableOpacity,
-    ViewProps,
-    ViewStyle,
-} from 'react-native'
-import Ionicons from 'react-native-vector-icons/Ionicons'
-import EvilIcons from 'react-native-vector-icons/EvilIcons'
-import FontAwesome from 'react-native-vector-icons/FontAwesome'
-import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'
-import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
-import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
-import Entypo from 'react-native-vector-icons/Entypo'
-import AntDesign from 'react-native-vector-icons/AntDesign'
-import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons'
-import Feather from 'react-native-vector-icons/Feather'
-import Octicons from 'react-native-vector-icons/Octicons'
-import Fontisto from 'react-native-vector-icons/Fontisto'
-import { IconProps } from 'react-native-vector-icons/Icon'
-import { isArray, isString } from 'underscore'
+import React from "react";
+import { StyleSheet, TouchableOpacity } from "react-native";
+import Ionicons from "react-native-vector-icons/Ionicons";
+import EvilIcons from "react-native-vector-icons/EvilIcons";
+import FontAwesome from "react-native-vector-icons/FontAwesome";
+import FontAwesome5 from "react-native-vector-icons/FontAwesome5";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import MaterialIcons from "react-native-vector-icons/MaterialIcons";
+import Entypo from "react-native-vector-icons/Entypo";
+import AntDesign from "react-native-vector-icons/AntDesign";
+import SimpleLineIcons from "react-native-vector-icons/SimpleLineIcons";
+import Feather from "react-native-vector-icons/Feather";
+import Octicons from "react-native-vector-icons/Octicons";
+import Fontisto from "react-native-vector-icons/Fontisto";
 
 /**
  * Collection of React Native Vector Icons
  * Provides access to various icon sets from react-native-vector-icons
  */
 export const RNVectorIcon = {
-    Ionicons,
-    AntDesign,
-    Entypo,
-    EvilIcons,
-    MaterialIcons,
-    MaterialCommunityIcons,
-    FontAwesome,
-    FontAwesome5,
-    SimpleLineIcons,
-    Feather,
-    Octicons,
-    Fontisto
-}
+  Ionicons,
+  AntDesign,
+  Entypo,
+  EvilIcons,
+  MaterialIcons,
+  MaterialCommunityIcons,
+  FontAwesome,
+  FontAwesome5,
+  SimpleLineIcons,
+  Feather,
+  Octicons,
+  Fontisto,
+};
 
-/** Type definition for available icon sets */
-export type IconType = keyof typeof RNVectorIcon
+export type IconType = keyof typeof RNVectorIcon;
 
-import { Props, } from './PropsStyle'
-import { makeProps } from './makeProps'
+import { Props } from "./PropsStyle";
+import { makeProps } from "./makeProps";
 
-/**
- * IconApp component that provides a unified interface for using various icon sets
- * Supports touch interaction and custom styling
- * 
- * @component
- * @example
- * ```tsx
- * // Basic usage
- * <IconApp name="home" />
- * 
- * // Custom size and color
- * <IconApp 
- *   name="star" 
- *   size={30} 
- *   color="gold" 
- * />
- * 
- * // With touch interaction
- * <IconApp 
- *   name="heart" 
- *   onPress={() => console.log('pressed')} 
- * />
- * 
- * // Using different icon set
- * <IconApp 
- *   type="FontAwesome" 
- *   name="user" 
- * />
- * ```
- */
 export default class IconApp extends React.PureComponent<Props> {
-    /** Default props for the IconApp component */
-    static defaultProps: Props = {
-        size: 23,
-        color: 'gray',
-        name: 'home',
-    }
+  static defaultProps: Props = {
+    size: 23,
+    color: "gray",
+    name: "home",
+  };
 
-    /** Internal state for computed props */
-    res: { color: string, style: any, size: number }
+  res: { color: string; style: any; size: number };
 
-    constructor(props) {
-        super(props)
-        this.res = makeProps(props)
+  constructor(props: Props) {
+    super(props);
+    this.res = makeProps(props);
+  }
+  render() {
+    const { size, color, style } = this.res;
+    if (this.props.name === "none") return null;
+    const IconView = RNVectorIcon[this.props.type || "Ionicons"];
+    if (typeof this.props.onPress != "function") {
+      return (
+        <IconView
+          size={size}
+          color={color}
+          style={style}
+          name={this.props.name}
+          onPress={this.props.onPress}
+        />
+      );
     }
-
-    render() {
-        const { size, color, style } = this.res
-        // console.debug('res', this.res)
-        if (this.props.name === "none") return null
-        const IconView = RNVectorIcon[this.props.type || 'Ionicons']
-        if (typeof this.props.onPress != "function") {
-            return (
-                <IconView
-                    size={size}
-                    color={color}
-                    style={style}
-                    name={this.props.name}
-                    onPress={this.props.onPress}
-                />
-            )
+    return (
+      <TouchableOpacity
+        activeOpacity={this.props.activeOpacity || 0.5}
+        disabled={
+          typeof this.props.onPress == "function" ? this.props.disabled : true
         }
-        return (
-            <TouchableOpacity
-                activeOpacity={this.props.activeOpacity || 0.5}
-                disabled={
-                    typeof this.props.onPress == 'function' ? this.props.disabled : true
-                }
-                style={
-                    [
-                        styles.container,
-                        { ...(this.props.alignSelf && { alignSelf: this.props.alignSelf }) },
-                        this.props.style,
-                        this.props.styleContainer,
-
-                    ]} >
-                <IconView
-                    size={size}
-                    color={color}
-                    style={style}
-                    name={this.props.name}
-                    onPress={this.props.onPress}
-                />
-            </TouchableOpacity>
-        )
-    }
+        style={[
+          styles.container,
+          { ...(this.props.alignSelf && { alignSelf: this.props.alignSelf }) },
+          this.props.style,
+          this.props.styleContainer,
+        ]}
+      >
+        <IconView
+          size={size}
+          color={color}
+          style={style}
+          name={this.props.name}
+          onPress={this.props.onPress}
+        />
+      </TouchableOpacity>
+    );
+  }
 }
 
 /**
  * Default styles for the IconApp component
  */
 const styles = StyleSheet.create({
-    container: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        alignSelf: 'flex-start',
-    },
-})
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
+  },
+});

package/src/Icon/makeProps.ts

@@ -1,11 +1,21 @@
-import { StyleSheet } from "react-native";
-import { isNaN, isNumber } from "underscore";
-enum COLORS { "white" = 1, "red", "blue", "black", "green", "yellow", "pink", "gray", "primary" }
-enum NAMES { "ic_back" = "add-circle", }
-type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
-type NameModifiers = Partial<Record<keyof typeof NAMES, boolean>>;
-
-const SHORT_VARIATIONS = {
+import { StyleSheet, ViewStyle } from "react-native";
+
+enum COLORS {
+    white = 1,
+    red,
+    blue,
+    black,
+    green,
+    yellow,
+    pink,
+    gray,
+    primary,
+}
+
+type ColorKey = keyof typeof COLORS;
+type ColorModifiers = Partial<Record<ColorKey, boolean>>;
+
+const PROPS = {
     mar: "margin",
     marH: "marginHorizontal",
     marV: "marginVertical",
@@ -13,36 +23,69 @@ const SHORT_VARIATIONS = {
     marT: "marginTop",
     marR: "marginRight",
     marB: "marginBottom",
-    zIndex: 'zIndex',
-    opacity: 'opacity',
-    size: 'size',
+    zIndex: "zIndex",
+    opacity: "opacity",
+    size: "size",
+} as const;
+
+export type ShortKey = keyof typeof PROPS;
+
+export type Convert<T extends string> = Partial<
+    Record<T, boolean | number | string>
+>;
 
+export type MakeProp = Convert<ShortKey> & ColorModifiers;
+
+/** type guards */
+const isColorKey = (key: string): key is ColorKey => key in COLORS;
+const isShortKey = (key: string): key is ShortKey =>
+    key in PROPS;
+
+type Result = {
+    size: number;
+    color: string;
+    name: string;
+    style: ViewStyle;
 };
-export type ShortKey = keyof typeof SHORT_VARIATIONS;
-export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>
-export type MakeProp = Convert<ShortKey> & ColorModifiers & NameModifiers
 
-export const makeProps = (props: { [key: string]: any }) => {
-    const style: { [key: string]: number | string } = {};
-    let res = { size: props.size ?? 23, color: props.color ?? 'gray', name: props.name ?? 'home' }
+export const makeProps = (props: Record<string, any>): Result => {
+    const style: ViewStyle = {};
+
+    const res: Omit<Result, "style"> = {
+        size: props.size ?? 23,
+        color: props.color ?? "gray",
+        name: props.name ?? "home",
+    };
+
     Object.keys(props).forEach((key) => {
-        const match = key.match(/^(\w+)-(\w+)$/) as string[]
-        // console.debug('COLORS11', key, COLORS[key])
-        if (COLORS[key]) {
-            console.debug('COLORS22', match)
-            res['color'] = key
-        }
-        if (NAMES[key]) {
-            let match = key.match(/^(\w+)_(\w+)$/) as string[]
-            res['name'] = NAMES[match[1]]
-        }
-        else if (match) {
-            const value = isNaN(parseInt(match[2], 10)) ? match[2] : parseInt(match[2], 10)
-            if (match[1] == 'size') res['size'] = parseInt(match[2], 10)
-            else if (match[1] == 'color') res['color'] = match[2]
-            else if (SHORT_VARIATIONS[match[1]]) style[SHORT_VARIATIONS[match[1]]] = value
+        const match = key.match(/^(\w+)-(\w+)$/);
+
+        // color modifier
+        if (isColorKey(key)) {
+            res.color = key;
+            return;
         }
 
+        if (match) {
+            const rawKey = match[1];
+            const rawValue = match[2];
+
+            const value = isNaN(Number(rawValue))
+                ? rawValue
+                : Number(rawValue);
+
+            if (rawKey === "size") {
+                res.size = Number(rawValue);
+            } else if (rawKey === "color") {
+                res.color = rawValue;
+            } else if (isShortKey(rawKey)) {
+                (style as any)[PROPS[rawKey]] = value;
+            }
+        }
     });
-    return { ...res, style: StyleSheet.create({ style }).style }
-};
+
+    return {
+        ...res,
+        style: StyleSheet.create({ style }).style,
+    };
+};

package/src/Layout.tsx

@@ -1,24 +1,24 @@
-import React from 'react'
-import SafeAreaView, { ForceInsetProp } from 'react-native-safe-area-view'
-import { Platform, StyleProp, ViewStyle } from 'react-native'
+import React from "react";
+import SafeAreaView, { ForceInsetProp } from "react-native-safe-area-view";
+import { StyleProp, ViewStyle } from "react-native";
 export interface LayoutAppProps {
-  children?: any
-  forceInset?: ForceInsetProp
-  forceInsetBot?: ForceInsetProp
-  styleBot?: StyleProp<ViewStyle> | undefined
-  style?: StyleProp<ViewStyle> | undefined
-  isBack?: boolean
-  disable?: boolean
+  children?: any;
+  forceInset?: ForceInsetProp;
+  forceInsetBot?: ForceInsetProp;
+  styleBot?: StyleProp<ViewStyle> | undefined;
+  style?: StyleProp<ViewStyle> | undefined;
+  isBack?: boolean;
+  disable?: boolean;
 }
 export default function Layout({
   children,
-  forceInset = { top: 'always', horizontal: 'never', bottom: 'never' },
-  forceInsetBot = { vertical: 'never' },
+  forceInset = { top: "always", horizontal: "never", bottom: "never" },
+  forceInsetBot = { vertical: "never" },
   styleBot,
   style,
   disable,
 }: LayoutAppProps) {
-  if (disable) return <>{children}</>
+  if (disable) return <>{children}</>;
   return (
     <SafeAreaView
       style={[
@@ -27,7 +27,8 @@ export default function Layout({
         },
         style,
       ]}
-      forceInset={forceInset}>
+      forceInset={forceInset}
+    >
       <SafeAreaView
         style={[
           {
@@ -35,9 +36,10 @@ export default function Layout({
           },
           styleBot,
         ]}
-        forceInset={forceInsetBot}>
+        forceInset={forceInsetBot}
+      >
         {children}
       </SafeAreaView>
     </SafeAreaView>
-  )
+  );
 }

package/src/Text/Props.ts

@@ -1,6 +1,5 @@
 import React from 'react'
 import { TextProps, TextStyle } from 'react-native'
-import {   ILanguage } from '../config'
 import { MakeProp } from './makeStyle'
 interface PropsParent {
     children?: React.ReactNode
@@ -8,10 +7,10 @@ interface PropsParent {
     center?: boolean
     italic?: boolean
     underline?: boolean
-    color?: string 
+    color?: string
     toUpperCase?: boolean
     toLowerCase?: boolean
-    background?: string  
+    background?: string
 }
 //@ts-ignore
 export interface Props extends TextProps, PropsParent, MakeProp {
@@ -25,6 +24,6 @@ export interface Props extends TextProps, PropsParent, MakeProp {
     pink?: boolean
     gray?: boolean
     black?: boolean
-    /** Lang in file VI/EN */
-    lang?: ILanguage
+    lang?: string
+    content?: string
 }

package/src/Text/Style.ts

@@ -1,9 +1,9 @@
-import { Colors } from "../config";
-import { StyleProp, ViewStyle, StyleSheet } from "react-native";
+
+import { StyleSheet } from "react-native";
 
 import { Props } from './Props'
 import { makeStyle } from "./makeStyle";
-export const Style: any = (props: Props, ColorApp = Colors) => {
+export const Style: any = (props: Props) => {
     const PropsConvert = StyleSheet.flatten([
         props.color && { color: props.color },
         props.center && { textAlign: 'center' },

package/src/Text/index.tsx

@@ -1,42 +1,45 @@
-import { Colors, Language } from '../config'
-import React, { isValidElement } from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { Style } from './Style'
-import { Props } from './Props'
-import { isArray, isObject } from 'underscore'
+import React, { isValidElement } from "react";
+import { StyleSheet, Text } from "react-native";
+import { Style } from "./Style";
+import { Props } from "./Props";
+import { isArray, isObject } from "underscore";
 const TextApp: React.FC<Props> = ({ style, children, ...props }) => {
-    const Children = () => {
-        const content = props?.lang ? Language(props?.lang) : undefined
-        if (typeof content !== 'undefined') {
-            if (typeof content == 'string' || typeof content == 'number' || isArray(children)) return content
-            if (typeof content == 'function') return "Error content == 'function'"
-            if (isObject(children)) return JSON.stringify(children)
-            if (isValidElement(content)) return content
-            return React.createElement(Text, {})
-        }
-        if (typeof children !== 'undefined') {
-            if (typeof children == 'string' || typeof children == 'number' || isArray(children)) return children
-            if (isObject(children)) return JSON.stringify(children)
-            if (typeof children == "function") return "Error children == 'function'"
-            if (isValidElement(children)) return children
-            return React.createElement(Text, {}, children)
-        }
+  const Children = () => {
+    const content = props?.lang ?? undefined;
+    if (typeof content !== "undefined") {
+      if (
+        typeof content == "string" ||
+        typeof content == "number" ||
+        isArray(children)
+      )
+        return content;
+      if (typeof content == "function") return "Error content == 'function'";
+      if (isObject(children)) return JSON.stringify(children);
+      if (isValidElement(content)) return content;
+      return React.createElement(Text, {});
     }
-    return (
-        <Text
-            // adjustsFontSizeToFit
-            // selectable
-            style={[styles.default, Style(props), style]}{...props}>
-            {Children()}
-        </Text>
-    )
-}
-export default TextApp
+    if (typeof children !== "undefined") {
+      if (
+        typeof children == "string" ||
+        typeof children == "number" ||
+        isArray(children)
+      )
+        return children;
+      if (isObject(children)) return JSON.stringify(children);
+      if (typeof children == "function") return "Error children == 'function'";
+      if (isValidElement(children)) return children;
+      return React.createElement(Text, {}, children);
+    }
+  };
+  return (
+    <Text style={[styles.default, Style(props), style]} {...props}>
+      {Children()}
+    </Text>
+  );
+};
+export default TextApp;
 const styles = StyleSheet.create({
-    default: {
-        fontWeight: '300',
-        color: Colors('black'),
-        fontSize: 15,
-        paddingTop: 2
-    },
-})
+  default: {
+    fontSize: 14,
+  },
+});

package/src/Text/makeStyle.ts

@@ -1,4 +1,4 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, TextStyle } from "react-native";
 import { isNaN, isNumber } from "underscore";
 enum COLORS {
     "white" = 1,
@@ -11,9 +11,7 @@ enum COLORS {
     "gray",
     "primary"
 }
-type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
-
-const SHORT_VARIATIONS = {
+const PROPS = {
     bg: "backgroundColor",
     background: "backgroundColor",
     color: "color",
@@ -54,31 +52,54 @@ const SHORT_VARIATIONS = {
     bottom: 'bottom',
     right: 'right',
     opacity: 'opacity',
-    //
     size: 'fontSize'
+} as const;
+const isColorKey = (key: string): key is ColorKey => {
+    return key in COLORS;
+};
+
+const isShortKey = (key: string): key is ShortKey => {
+    return key in PROPS;
 };
-export type ShortKey = keyof typeof SHORT_VARIATIONS;
+
+export type ColorKey = keyof typeof COLORS;
+export type ShortKey = keyof typeof PROPS;
 export type Convert<T extends string> = Partial<Record<T, boolean | number | string>>
-export type MakeProp = Convert<ShortKey> & ColorModifiers
+export type MakeProp =
+    Partial<Record<ShortKey, number | string>> &
+    Partial<Record<ColorKey, boolean>> &
+    Record<string, any>;
 
 export const makeStyle = (props: { [key: string]: any }) => {
-    const style: { [key: string]: number | string } = {};
+    const style: TextStyle = {};
     Object.keys(props).forEach((key) => {
-        const match = key.match(/^(\w+)-(\w+)$/) as string[]
-        if (COLORS[key]) {
-            style['color'] = key
-        }
-        else if (match) {
-            const value = isNaN(parseInt(match[2], 10)) ? match[2] : parseInt(match[2], 10)
-            if (SHORT_VARIATIONS[match[1]]) style[SHORT_VARIATIONS[match[1]]] = value
-            else style[match[1]] = value
+        const match = key.match(/^(\w+)-(\w+)$/);
+
+        if (isColorKey(key)) {
+            style.backgroundColor = key;
+            return;
         }
-        else {
-            if (SHORT_VARIATIONS[key]) {
-                style[SHORT_VARIATIONS[key]] = props[key]
+
+        if (match) {
+            const [, rawKey, rawValue] = match;
+
+            const value = isNaN(Number(rawValue))
+                ? rawValue
+                : Number(rawValue);
+
+            if (isShortKey(rawKey)) {
+                style[PROPS[rawKey]] = value as any;
+            } else {
+                (style as any)[rawKey] = value;
             }
-            // else style[key] = props[key]
+            return;
+        }
+
+        // 🔹 Normal props
+        if (isShortKey(key)) {
+            style[PROPS[key]] = props[key] as any;
         }
     });
+
     return StyleSheet.create({ style }).style;
-};
+};