ui-rn 2.0.4 → 2.0.6

package/Example.tsx

@@ -0,0 +1,15 @@
+import { StyleSheet, View } from 'react-native'
+import React from 'react'
+import { Text, Block,Icon } from './src/index'
+
+export default function Example() {
+  return (
+    <View>
+      <Block pad-40 />
+      <Text pink color='red' />
+      <Icon name='red'/>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({})

package/dist/Example.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function Example(): React.JSX.Element;

package/dist/Example.js

@@ -0,0 +1,11 @@
+import { StyleSheet, View } from 'react-native';
+import React from 'react';
+import { Text, Block, Icon } from './src/index';
+export default function Example() {
+    return (<View>
+      <Block pad-40/>
+      <Text pink color='red'/>
+      <Icon name='red'/>
+    </View>);
+}
+const styles = StyleSheet.create({});

package/dist/src/Layout.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { 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;
+}
+export default function Layout({ children, forceInset, forceInsetBot, styleBot, style, disable, }: LayoutAppProps): React.JSX.Element;

package/dist/src/Layout.js

@@ -0,0 +1,21 @@
+import React from "react";
+import SafeAreaView from "react-native-safe-area-view";
+export default function Layout({ children, forceInset = { top: "always", horizontal: "never", bottom: "never" }, forceInsetBot = { vertical: "never" }, styleBot, style, disable, }) {
+    if (disable)
+        return <>{children}</>;
+    return (<SafeAreaView style={[
+            {
+                flex: 1,
+            },
+            style,
+        ]} forceInset={forceInset}>
+      <SafeAreaView style={[
+            {
+                flex: 1,
+            },
+            styleBot,
+        ]} forceInset={forceInsetBot}>
+        {children}
+      </SafeAreaView>
+    </SafeAreaView>);
+}

package/dist/src/Text/Props.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TextProps, TextStyle } from 'react-native';
+import { MakeProp } from './makeStyle';
+interface PropsParent {
+    children?: React.ReactNode;
+    bold?: boolean | TextStyle['fontWeight'];
+    center?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    color?: string;
+    toUpperCase?: boolean;
+    toLowerCase?: boolean;
+    background?: string;
+}
+export interface Props extends TextProps, PropsParent, MakeProp {
+    backgroundColor?: string;
+    primary?: boolean;
+    white?: boolean;
+    red?: boolean;
+    blue?: boolean;
+    green?: boolean;
+    yellow?: boolean;
+    pink?: boolean;
+    gray?: boolean;
+    black?: boolean;
+    lang?: string;
+    content?: string;
+}
+export {};

package/dist/src/Text/Props.js

@@ -0,0 +1 @@
+export {};

package/dist/src/Text/Style.d.ts

@@ -0,0 +1 @@
+export declare const Style: any;

package/dist/src/Text/Style.js

@@ -0,0 +1,17 @@
+import { StyleSheet } from "react-native";
+import { makeStyle } from "./makeStyle";
+export const Style = (props) => {
+    const PropsConvert = StyleSheet.flatten([
+        props.color && { color: props.color },
+        props.center && { textAlign: 'center' },
+        props.italic && { fontStyle: 'italic' },
+        props.bold && { fontWeight: typeof props.bold == "boolean" ? '500' : props.bold },
+        props.underline && { textDecorationLine: 'underline' },
+        props.toUpperCase && { textTransform: 'uppercase' },
+        props.toLowerCase && { textTransform: 'lowercase' },
+    ]);
+    return [
+        makeStyle(props),
+        PropsConvert,
+    ];
+};

package/dist/src/Text/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { Props } from "./Props";
+declare const Text: React.FC<Props>;
+export default Text;

package/dist/src/Text/index.js

@@ -0,0 +1,44 @@
+import React, { isValidElement } from "react";
+import { StyleSheet, Text as RNText } from "react-native";
+import { Style } from "./Style";
+import { isArray, isObject } from "underscore";
+const Text = ({ style, children, ...props }) => {
+    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(RNText, {});
+        }
+        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(RNText, {}, children);
+        }
+    };
+    return (<RNText style={[styles.default, Style(props), style]} {...props}>
+      {Children()}
+    </RNText>);
+};
+export default Text;
+const styles = StyleSheet.create({
+    default: {
+        fontSize: 14,
+    },
+});

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

@@ -0,0 +1,64 @@
+import { TextStyle } 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 color: "color";
+    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 padV: "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 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";
+    readonly size: "fontSize";
+};
+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: (props: {
+    [key: string]: any;
+}) => TextStyle;
+export {};

package/dist/src/Text/makeStyle.js

@@ -0,0 +1,91 @@
+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",
+    color: "color",
+    w: "width",
+    width: "width",
+    minW: "minWidth",
+    maxW: "maxWidth",
+    h: "height",
+    height: "height",
+    minH: "minHeight",
+    maxH: "maxHeight",
+    pad: "padding",
+    padH: "paddingHorizontal",
+    padV: "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",
+    borderC: "borderColor",
+    borderLW: "borderLeftWidth",
+    borderTW: "borderTopWidth",
+    borderRW: "borderRightWidth",
+    borderBW: "borderBottomWidth",
+    flex: 'flex',
+    zIndex: 'zIndex',
+    left: 'left',
+    top: 'top',
+    bottom: 'bottom',
+    right: 'right',
+    opacity: 'opacity',
+    size: 'fontSize'
+};
+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+)$/);
+        if (isColorKey(key)) {
+            style.color = key;
+            return;
+        }
+        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/Block.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { View } from "react-native";
+import { Props } from "./Props";
+declare const Block: React.ForwardRefExoticComponent<Props & React.RefAttributes<View>>;
+export default Block;

package/dist/src/Touch/Block.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { View } from "react-native";
+import { Style } from "./Style";
+const Block = React.forwardRef(({ style, ...props }, ref) => {
+    if (props?.hidden)
+        return <></>;
+    return (<View ref={ref} style={[Style(props), style]} {...props}>
+        {props.children}
+      </View>);
+});
+export default Block;

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

@@ -0,0 +1,128 @@
+import { FlexStyle, TouchableWithoutFeedbackProps, ViewStyle } from "react-native";
+import { MakeProp } from "./makeStyle";
+/**
+ * Interface for application-specific props that extend React Native's style properties
+ * @interface PropsApp
+ */
+export interface PropsApp {
+    /** Border radius for top corners */
+    borderUpRadius?: number;
+    /** Border radius for bottom corners */
+    borderDownRadius?: number;
+    /** Flexbox alignment along cross axis */
+    alignItems?: FlexStyle['alignItems'];
+    /** Flexbox alignment for self */
+    alignSelf?: FlexStyle['alignSelf'];
+    /** Flexbox alignment along main axis */
+    justifyContent?: FlexStyle['justifyContent'];
+    /** Border style (solid, dashed, dotted) */
+    borderStyle?: ViewStyle['borderStyle'];
+    /** Opacity of the view */
+    opacity?: ViewStyle['opacity'];
+    /** Overflow behavior */
+    overflow?: ViewStyle['overflow'];
+    /** Set width to 100% */
+    w100?: boolean;
+    /** Set height to 100% */
+    h100?: boolean;
+    /** Center content both horizontally and vertically */
+    mid?: boolean;
+    middle?: boolean;
+    /** Set flex direction to row */
+    row?: boolean;
+    /** Center content horizontally */
+    alignCenter?: boolean;
+    /** Center content vertically */
+    justifyCenter?: boolean;
+    /** Make border radius circular */
+    borderCircle?: boolean;
+    /** Center content horizontally and space between vertically */
+    centerBetween?: boolean;
+    /** Space content evenly along main axis */
+    justifyBetween?: boolean;
+    /** Hide overflow content */
+    overHidden?: boolean;
+    /** Set width and height to same value */
+    square?: number;
+    /** Set width to 100% */
+    width100?: boolean;
+    /** Set height to 100% */
+    height100?: boolean;
+    /** Background color or gradient colors */
+    background?: string;
+    /** Gradient direction */
+    gradient?: 'vertical' | 'horizontal';
+    /** Set flex to 1 */
+    flexOne?: boolean;
+    flex1?: boolean;
+    /** Shadow color or boolean to enable default shadow */
+    shadowColor?: string | boolean;
+    /** Border options for each side */
+    borderOption?: {
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+        color?: string;
+    };
+    /** Position options for absolute positioning */
+    positionOption?: {
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+    };
+    /** Padding options for each side */
+    paddingOption?: {
+        all?: number;
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+    };
+    /** Padding options for vertical and horizontal */
+    paddingFlex?: {
+        vertical?: number;
+        horizontal?: number;
+    };
+    /** Margin options for vertical and horizontal */
+    marginFlex?: {
+        vertical?: number;
+        horizontal?: number;
+    };
+    /** Margin options for each side */
+    marginOption?: {
+        all?: number;
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+    };
+    /** Shadow configuration options */
+    shadowOption?: {
+        color?: string;
+        width?: number;
+        height?: number;
+        opacity?: number;
+        radius?: number;
+        elevation?: number;
+    };
+    /** Custom style character */
+    styleChar?: string;
+    /** Set width to screen width */
+    widthScreen?: boolean;
+    /** Set height to screen height */
+    heightScreen?: boolean;
+}
+/**
+ * Main Props interface that combines TouchableWithoutFeedbackProps, PropsApp, and MakeProp
+ * @interface Props
+ */
+export interface Props extends TouchableWithoutFeedbackProps, PropsApp, MakeProp {
+    /** Child components */
+    children?: React.ReactNode;
+    /** Hide the component */
+    hidden?: boolean;
+    /** Opacity when pressed */
+    activeOpacity?: number;
+}

package/dist/src/Touch/Props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,31 @@
+/**
+ * Style utility function that generates React Native styles based on provided props
+ * This function combines various style properties into a single style object
+ *
+ * @param props - Style properties object containing various style configurations
+ * @returns Array containing base styles and computed styles
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <View style={Style({ mid: true, row: true })}>
+ *
+ * // With position options
+ * <View style={Style({
+ *   positionOption: { top: 10, left: 20 },
+ *   paddingOption: { all: 10 }
+ * })}>
+ *
+ * // With shadow
+ * <View style={Style({
+ *   shadowOption: {
+ *     color: '#000',
+ *     width: 2,
+ *     height: 2,
+ *     opacity: 0.5,
+ *     radius: 5
+ *   }
+ * })}>
+ * ```
+ */
+export declare const Style: any;

package/dist/src/Touch/Style.js

@@ -0,0 +1,118 @@
+import { StyleSheet, Dimensions } from "react-native";
+import { isEmpty, isString } from "underscore";
+import { makeStyle } from "./makeStyle";
+/**
+ * Style utility function that generates React Native styles based on provided props
+ * This function combines various style properties into a single style object
+ *
+ * @param props - Style properties object containing various style configurations
+ * @returns Array containing base styles and computed styles
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <View style={Style({ mid: true, row: true })}>
+ *
+ * // With position options
+ * <View style={Style({
+ *   positionOption: { top: 10, left: 20 },
+ *   paddingOption: { all: 10 }
+ * })}>
+ *
+ * // With shadow
+ * <View style={Style({
+ *   shadowOption: {
+ *     color: '#000',
+ *     width: 2,
+ *     height: 2,
+ *     opacity: 0.5,
+ *     radius: 5
+ *   }
+ * })}>
+ * ```
+ */
+export const Style = (props) => {
+    const PropsApp = StyleSheet.flatten([
+        // Layout properties
+        props.alignItems && { alignItems: props.alignItems },
+        props.justifyContent && { justifyContent: props.justifyContent },
+        props.borderStyle && { borderStyle: props.borderStyle },
+        props.overflow && { overflow: props.overflow },
+        // Border radius properties
+        props.borderUpRadius && { borderTopLeftRadius: (props.borderUpRadius), borderTopRightRadius: (props.borderUpRadius) },
+        props.borderDownRadius && { borderBottomLeftRadius: (props.borderUpRadius), borderBottomRightRadius: (props.borderUpRadius) },
+        // Layout shortcuts
+        props.mid && { alignItems: 'center', justifyContent: 'center' },
+        props.row && { flexDirection: 'row' },
+        props.width100 && { width: '100%' },
+        props.height100 && { height: '100%' },
+        props.square && { width: props.square, height: props.square },
+        props.borderCircle && { borderRadius: 1000 },
+        props.alignCenter && { alignItems: 'center' },
+        props.justifyCenter && { justifyContent: 'center' },
+        props.justifyBetween && { justifyContent: 'space-between' },
+        props.overHidden && { overflow: 'hidden' },
+        props.centerBetween && { alignItems: 'center', justifyContent: 'space-between', },
+        // Position options
+        props.positionOption && {
+            position: 'absolute',
+            top: props.positionOption?.top,
+            bottom: props.positionOption?.bottom,
+            left: props.positionOption?.left,
+            right: props.positionOption?.right,
+        },
+        // Padding options
+        props.paddingOption && {
+            paddingLeft: props.paddingOption?.all || props.paddingOption?.left,
+            paddingTop: props.paddingOption?.all || props.paddingOption?.top,
+            paddingRight: props.paddingOption?.all || props.paddingOption?.right,
+            paddingBottom: props.paddingOption?.all || props.paddingOption?.bottom,
+        },
+        // Margin options
+        props.marginOption && {
+            marginLeft: props.marginOption?.all || props.marginOption?.left,
+            marginTop: props.marginOption?.all || props.marginOption?.top,
+            marginRight: props.marginOption?.all || props.marginOption?.right,
+            marginBottom: props.marginOption?.all || props.marginOption?.bottom,
+        },
+        // Border options
+        props.borderOption && {
+            borderLeftWidth: props.borderOption.left,
+            borderTopWidth: props.borderOption.top,
+            borderBottomWidth: props.borderOption.bottom,
+            borderRightWidth: props.borderOption.right,
+            borderColor: props.borderOption.color,
+        },
+        // Shadow options
+        !isEmpty(props.shadowOption) && {
+            shadowColor: props.shadowOption?.color,
+            shadowOffset: {
+                width: props.shadowOption?.width,
+                height: props.shadowOption?.height,
+            },
+            shadowOpacity: props.shadowOption?.opacity,
+            shadowRadius: props.shadowOption?.radius,
+            elevation: props.shadowOption?.elevation,
+        },
+        // Default shadow
+        props.shadowColor && {
+            shadowColor: isString(props.shadowColor) ? props.shadowColor : '#000',
+            shadowOffset: { width: 2, height: 2, },
+            shadowOpacity: 1,
+            shadowRadius: 10,
+            elevation: 2,
+        },
+        // Width and height shortcuts
+        props.w100 && { width: '100%' },
+        props.h100 && { height: '100%' },
+        props.flex1 && { flex: 1 },
+        props.flexOne && { flex: 1 },
+        // Screen dimensions
+        props.widthScreen && { width: Dimensions.get('screen').width },
+        props.heightScreen && { height: Dimensions.get('screen').height },
+    ]);
+    return [
+        makeStyle(props),
+        PropsApp,
+    ];
+};

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { Props } from "./Props";
+/**
+ * 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>
+ * ```
+ */
+declare const Touch: React.ForwardRefExoticComponent<Props & React.RefAttributes<import("react-native").View>>;
+export default Touch;