ui-rn 2.0.4 → 2.0.6

package/dist/src/Touch/Touch.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { Style } from "./Style";
+/**
+ * Touch component that extends TouchableOpacity with additional styling capabilities
+ * Supports gradient backgrounds and custom styling options
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Touch onPress={() => console.log('pressed')}>
+ *   <Text>Press me</Text>
+ * </Touch>
+ *
+ *
+ * // With custom styling
+ * <Touch
+ *   mid={true}
+ *   row={true}
+ *   paddingOption={{ all: 10 }}
+ *   onPress={() => console.log('pressed')}
+ * >
+ *   <Text>Styled Button</Text>
+ * </Touch>
+ * ```
+ */
+const Touch = React.forwardRef(({ style, ...props }, ref) => {
+    if (props?.hidden)
+        return <></>;
+    return (<TouchableOpacity ref={ref} activeOpacity={props.activeOpacity || 0.5} style={[Style(props), style]} {...props}>
+        {props.children}
+      </TouchableOpacity>);
+});
+export default Touch;

package/dist/src/Touch/TouchScale.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ViewProps } from "react-native";
+import { Props } from "./Props";
+interface ButtonScaleProps extends Props {
+    scaleValue?: number;
+    scale?: boolean;
+    containerStyle?: ViewProps["style"];
+}
+declare const Touch: React.ForwardRefExoticComponent<ButtonScaleProps & React.RefAttributes<import("react-native").View>>;
+export default Touch;

package/dist/src/Touch/TouchScale.js

@@ -0,0 +1,30 @@
+import React, { useCallback } from "react";
+import { Animated, TouchableOpacity } from "react-native";
+import { Style } from "./Style";
+const Touch = React.forwardRef(({ scaleValue = 1.1, style, background, containerStyle, ...props }, ref) => {
+    if (props?.hidden)
+        return <></>;
+    const animatedButtonScale = React.useRef(new Animated.Value(1)).current;
+    const onPressIn = useCallback(() => {
+        Animated.spring(animatedButtonScale, {
+            toValue: scaleValue,
+            useNativeDriver: true,
+        }).start();
+    }, [scaleValue]);
+    const onPressOut = useCallback(() => {
+        Animated.spring(animatedButtonScale, {
+            toValue: 1,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    return (<TouchableOpacity ref={ref} onPressIn={onPressIn} onPressOut={onPressOut} activeOpacity={props.activeOpacity || 1} style={containerStyle} {...props}>
+        <Animated.View style={[
+            { transform: [{ scale: animatedButtonScale }] },
+            Style(props),
+            style,
+        ]}>
+          {props.children}
+        </Animated.View>
+      </TouchableOpacity>);
+});
+export default Touch;

package/dist/src/Touch/makeStyle.d.ts

@@ -0,0 +1,65 @@
+import { ViewStyle } from "react-native";
+declare enum COLORS {
+    "white" = 1,
+    "red" = 2,
+    "blue" = 3,
+    "black" = 4,
+    "green" = 5,
+    "yellow" = 6,
+    "pink" = 7,
+    "gray" = 8,
+    "primary" = 9
+}
+declare const PROPS: {
+    readonly bg: "backgroundColor";
+    readonly background: "backgroundColor";
+    readonly w: "width";
+    readonly width: "width";
+    readonly minW: "minWidth";
+    readonly maxW: "maxWidth";
+    readonly h: "height";
+    readonly height: "height";
+    readonly minH: "minHeight";
+    readonly maxH: "maxHeight";
+    readonly pad: "padding";
+    readonly padH: "paddingHorizontal";
+    readonly horizontal: "paddingHorizontal";
+    readonly padV: "paddingVertical";
+    readonly vertical: "paddingVertical";
+    readonly padL: "paddingLeft";
+    readonly padT: "paddingTop";
+    readonly padR: "paddingRight";
+    readonly padB: "paddingBottom";
+    readonly mar: "margin";
+    readonly marH: "marginHorizontal";
+    readonly marV: "marginVertical";
+    readonly marL: "marginLeft";
+    readonly marT: "marginTop";
+    readonly marR: "marginRight";
+    readonly marB: "marginBottom";
+    readonly border: "borderWidth";
+    readonly borderW: "borderWidth";
+    readonly borderR: "borderRadius";
+    readonly radius: "borderRadius";
+    readonly borderC: "borderColor";
+    readonly borderLW: "borderLeftWidth";
+    readonly borderTW: "borderTopWidth";
+    readonly borderRW: "borderRightWidth";
+    readonly borderBW: "borderBottomWidth";
+    readonly flex: "flex";
+    readonly zIndex: "zIndex";
+    readonly left: "left";
+    readonly top: "top";
+    readonly bottom: "bottom";
+    readonly right: "right";
+    readonly opacity: "opacity";
+};
+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 ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
+export type MakeProp = Convert<ShortKey> & ColorModifiers;
+export declare const makeStyle: <T>(props: {
+    [key: string]: any;
+}) => ViewStyle;
+export {};

package/dist/src/Touch/makeStyle.js

@@ -0,0 +1,94 @@
+import { StyleSheet } from "react-native";
+import { isNaN } from "underscore";
+var COLORS;
+(function (COLORS) {
+    COLORS[COLORS["white"] = 1] = "white";
+    COLORS[COLORS["red"] = 2] = "red";
+    COLORS[COLORS["blue"] = 3] = "blue";
+    COLORS[COLORS["black"] = 4] = "black";
+    COLORS[COLORS["green"] = 5] = "green";
+    COLORS[COLORS["yellow"] = 6] = "yellow";
+    COLORS[COLORS["pink"] = 7] = "pink";
+    COLORS[COLORS["gray"] = 8] = "gray";
+    COLORS[COLORS["primary"] = 9] = "primary";
+})(COLORS || (COLORS = {}));
+const PROPS = {
+    bg: "backgroundColor",
+    background: "backgroundColor",
+    w: "width",
+    width: "width",
+    minW: "minWidth",
+    maxW: "maxWidth",
+    h: "height",
+    height: "height",
+    minH: "minHeight",
+    maxH: "maxHeight",
+    pad: "padding",
+    padH: "paddingHorizontal",
+    horizontal: "paddingHorizontal",
+    padV: "paddingVertical",
+    vertical: "paddingVertical",
+    padL: "paddingLeft",
+    padT: "paddingTop",
+    padR: "paddingRight",
+    padB: "paddingBottom",
+    mar: "margin",
+    marH: "marginHorizontal",
+    marV: "marginVertical",
+    marL: "marginLeft",
+    marT: "marginTop",
+    marR: "marginRight",
+    marB: "marginBottom",
+    border: 'borderWidth',
+    borderW: 'borderWidth',
+    borderR: "borderRadius",
+    radius: "borderRadius",
+    borderC: "borderColor",
+    borderLW: "borderLeftWidth",
+    borderTW: "borderTopWidth",
+    borderRW: "borderRightWidth",
+    borderBW: "borderBottomWidth",
+    flex: 'flex',
+    zIndex: 'zIndex',
+    left: 'left',
+    top: 'top',
+    bottom: 'bottom',
+    right: 'right',
+    opacity: 'opacity'
+};
+const isColorKey = (key) => {
+    return key in COLORS;
+};
+const isShortKey = (key) => {
+    return key in PROPS;
+};
+export const makeStyle = (props) => {
+    const style = {};
+    Object.keys(props).forEach((key) => {
+        const match = key.match(/^(\w+)-(\w+)$/);
+        // 🎨 Color
+        if (isColorKey(key)) {
+            style.backgroundColor = key;
+            return;
+        }
+        // 🔹 Hyphen syntax (pad-10)
+        if (match) {
+            const [, rawKey, rawValue] = match;
+            const value = isNaN(Number(rawValue))
+                ? rawValue
+                : Number(rawValue);
+            if (isShortKey(rawKey)) {
+                style[PROPS[rawKey]] = value;
+            }
+            else {
+                style[rawKey] = value;
+            }
+            return;
+        }
+        // 🔹 Normal props
+        if (isShortKey(key)) {
+            style[PROPS[key]] = props[key];
+        }
+    });
+    return StyleSheet.create({ style }).style;
+};

package/dist/src/Touch/utils.d.ts

@@ -0,0 +1,5 @@
+export declare function sliceTextAndNumber(input: string): {
+    text: string | null;
+    number: number | null;
+};
+export declare function replaceAll(str?: string, search?: string, replacement?: string): string;

package/dist/src/Touch/utils.js

@@ -0,0 +1,23 @@
+export function sliceTextAndNumber(input) {
+    let text = "";
+    let number = "";
+    let mid = false;
+    for (let i = 0; i < input.length; i++) {
+        const currentChar = input[i];
+        if (!isNaN(parseInt(currentChar)) && mid == false) {
+            mid = i;
+        }
+    }
+    if (mid) {
+        text = input.slice(0, mid);
+        number = input.slice(mid);
+    }
+    // Log.d('mid', { mid, text, number })
+    return {
+        text: mid ? text : null,
+        number: mid ? Number(number) : null,
+    };
+}
+export function replaceAll(str = '', search = '', replacement = '') {
+    return str.replace(new RegExp(search, 'g'), replacement); //[g] ~~ search global
+}

package/dist/src/index.d.ts

@@ -0,0 +1,5 @@
+export { default as Touch } from './Touch/Touch';
+export { default as Block } from './Touch/Block';
+export { default as Text } from './Text';
+export { default as Icon } from './Icon';
+export { default as Layout } from './Layout';

package/dist/src/index.js

@@ -0,0 +1,5 @@
+export { default as Touch } from './Touch/Touch';
+export { default as Block } from './Touch/Block';
+export { default as Text } from './Text';
+export { default as Icon } from './Icon';
+export { default as Layout } from './Layout';

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "ui-rn",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "repository": "https://github.com/package-dev/ui-rn",
   "description": "ui-rn",
   "author": "Phamha98",
-  "main": "src/index.tsx",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "peerDependencies": {
     "react": ">=18",
     "react-native": ">=0.70"

package/src/Icon/PropsStyle.tsx

@@ -0,0 +1,32 @@
+import {
+    RNVectorIcon,
+} from "./index"
+import React from 'react'
+import {
+    FlexStyle,
+    StyleProp,
+    StyleSheet,
+    TextProps,
+    TextStyle,
+    TouchableOpacity,
+    ViewProps,
+    ViewStyle,
+} from 'react-native'
+
+import { isArray, isEmpty, isNumber, isObject, isString } from "underscore";
+import { MakeProp } from "./makeProps";
+export interface Props extends MakeProp {
+    name: string
+    size?: number
+    type?: keyof typeof RNVectorIcon
+    onPress?: () => void
+    styleContainer?: StyleProp<ViewStyle>
+    style?: StyleProp<TextStyle>
+    alignSelf?: FlexStyle['alignSelf']
+    disabled?: boolean
+    activeOpacity?: number
+    color?: string
+
+}
+
+

package/src/Icon/index.tsx

@@ -0,0 +1,102 @@
+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,
+};
+
+export type IconType = keyof typeof RNVectorIcon;
+
+import { Props } from "./PropsStyle";
+import { makeProps } from "./makeProps";
+
+export default class IconApp extends React.PureComponent<Props> {
+  static defaultProps: Props = {
+    size: 23,
+    color: "gray",
+    name: "home",
+  };
+
+  res: { color: string; style: any; size: number };
+
+  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}
+        />
+      );
+    }
+    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>
+    );
+  }
+}
+
+/**
+ * Default styles for the IconApp component
+ */
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start",
+  },
+});

package/src/Icon/makeProps.ts

@@ -0,0 +1,91 @@
+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",
+    marL: "marginLeft",
+    marT: "marginTop",
+    marR: "marginRight",
+    marB: "marginBottom",
+    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 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+)$/);
+
+        // 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,
+    };
+};

package/src/Text/index.tsx

@@ -1,9 +1,9 @@
 import React, { isValidElement } from "react";
-import { StyleSheet, Text } from "react-native";
+import { StyleSheet, Text as RNText } 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 Text: React.FC<Props> = ({ style, children, ...props }) => {
   const Children = () => {
     const content = props?.lang ?? undefined;
     if (typeof content !== "undefined") {
@@ -16,7 +16,7 @@ const TextApp: React.FC<Props> = ({ style, children, ...props }) => {
       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 React.createElement(RNText, {});
     }
     if (typeof children !== "undefined") {
       if (
@@ -28,16 +28,16 @@ const TextApp: React.FC<Props> = ({ style, children, ...props }) => {
       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 React.createElement(RNText, {}, children);
     }
   };
   return (
-    <Text style={[styles.default, Style(props), style]} {...props}>
+    <RNText style={[styles.default, Style(props), style]} {...props}>
       {Children()}
-    </Text>
+    </RNText>
   );
 };
-export default TextApp;
+export default Text;
 const styles = StyleSheet.create({
   default: {
     fontSize: 14,

package/src/Text/makeStyle.ts

@@ -65,11 +65,8 @@ const isShortKey = (key: string): key is ShortKey => {
 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 =
-    Partial<Record<ShortKey, number | string>> &
-    Partial<Record<ColorKey, boolean>> &
-    Record<string, any>;
-
+export type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
+export type MakeProp = Convert<ShortKey> & ColorModifiers
 export const makeStyle = (props: { [key: string]: any }) => {
     const style: TextStyle = {};
     Object.keys(props).forEach((key) => {

package/src/Touch/Block.tsx

@@ -4,7 +4,7 @@ import { Style } from "./Style";
 import { Props } from "./Props";
 
 type TouchableOpacityRef = React.ComponentRef<typeof View>;
-const Block = React.forwardRef<TouchableOpacityRef, Props>(
+const Block = React.forwardRef<View, Props>(
   ({ style, ...props }, ref) => {
     if (props?.hidden) return <></>;
     return (

package/src/Touch/makeStyle.ts

@@ -68,11 +68,8 @@ const isShortKey = (key: string): key is ShortKey => {
 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 =
-    Partial<Record<ShortKey, number | string>> &
-    Partial<Record<ColorKey, boolean>> &
-    Record<string, any>;
-
+export type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
+export type MakeProp = Convert<ShortKey> & ColorModifiers
 
 export const makeStyle = <T>(props: { [key: string]: any }) => {
     const style: ViewStyle = {};

package/tsconfig.json

@@ -19,5 +19,5 @@
     "skipLibCheck": true, // 👈 cực quan trọng (giảm 90% lỗi)
     "strict": true
   },
-  "include": ["src"]
+  "include": ["src", "Example.tsx"]
 }