ui-rn 1.0.19 → 2.0.1

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;
-};
+};

package/src/Touch/Block.tsx

@@ -1,35 +1,18 @@
-import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { Style } from './Style'
-import { Props } from './Props'
-import { isArray, isString } from 'underscore';
-import LinearGradient from 'react-native-linear-gradient'
+import React from "react";
+import { View } from "react-native";
+import { Style } from "./Style";
+import { Props } from "./Props";
 
-type TouchableOpacityRef = React.ComponentRef<typeof View>
-const Block = React.forwardRef<TouchableOpacityRef, Props>(({ style, ...props }, ref) => {
-  if (props?.hidden) return <></>
-  //@ts-ignore
-  if (isArray(props.background) && props.background.length > 1 && props.background.every(i => isString(i)))
+type TouchableOpacityRef = React.ComponentRef<typeof View>;
+const Block = React.forwardRef<TouchableOpacityRef, Props>(
+  ({ style, ...props }, ref) => {
+    if (props?.hidden) return <></>;
     return (
-      <LinearGradient
-        //@ts-ignore
-        colors={props.background}
-        start={props.gradient == "vertical" ? { x: 0, y: 0 } : { x: 0, y: 0 }}
-        end={props.gradient == "vertical" ? { x: 0, y: 1 } : { x: 1, y: 0 }}
-        style={[Style(props), style]}>
+      <View ref={ref} style={[Style(props), style]} {...props}>
         {props.children}
-      </LinearGradient >
-    )
-  //@ts-ignore
-  return (<View ref={ref} style={[Style(props), style]}
-    {...props}>
-    {props.children}
-  </View>
-  )
-})
-
-export default Block
-const styles = StyleSheet.create({
-  defaultTouch: {
+      </View>
+    );
   },
-})
+);
+
+export default Block;

package/src/Touch/Props.ts

@@ -1,5 +1,4 @@
-import { IColor } from "../config"
-import { StyleProp, FlexStyle, TouchableWithoutFeedbackProps, ViewStyle } from "react-native"
+import { FlexStyle, TouchableWithoutFeedbackProps, ViewStyle } from "react-native"
 import { MakeProp } from "./makeStyle"
 
 /**
@@ -29,6 +28,7 @@ export interface PropsApp {
   h100?: boolean
   /** Center content both horizontally and vertically */
   mid?: boolean
+  middle?: boolean
   /** Set flex direction to row */
   row?: boolean
   /** Center content horizontally */
@@ -50,7 +50,7 @@ export interface PropsApp {
   /** Set height to 100% */
   height100?: boolean
   /** Background color or gradient colors */
-  background?: Array<IColor> | Array<(string)> | string
+  background?: string
   /** Gradient direction */
   gradient?: 'vertical' | 'horizontal'
   /** Set flex to 1 */

package/src/Touch/Style.ts

@@ -1,7 +1,6 @@
 import { StyleProp, ViewStyle, StyleSheet, Dimensions } from "react-native";
 import { isArray, isEmpty, isNumber, isObject, isString } from "underscore";
 import { Props } from './Props'
-import { Colors } from "../config";
 import { makeStyle } from "./makeStyle";
 
 /**

package/src/Touch/Touch.tsx

@@ -1,16 +1,14 @@
-import React from 'react'
-import { StyleSheet, TouchableOpacity } from 'react-native'
-import { Style } from './Style'
-import { Props } from './Props'
-import { isArray, isString } from 'underscore'
-import LinearGradient from 'react-native-linear-gradient'
+import React from "react";
+import { TouchableOpacity } from "react-native";
+import { Style } from "./Style";
+import { Props } from "./Props";
 
-type TouchableOpacityRef = React.ComponentRef<typeof TouchableOpacity>
+type TouchableOpacityRef = React.ComponentRef<typeof TouchableOpacity>;
 
 /**
  * Touch component that extends TouchableOpacity with additional styling capabilities
  * Supports gradient backgrounds and custom styling options
- * 
+ *
  * @component
  * @example
  * ```tsx
@@ -18,18 +16,10 @@ type TouchableOpacityRef = React.ComponentRef<typeof TouchableOpacity>
  * <Touch onPress={() => console.log('pressed')}>
  *   <Text>Press me</Text>
  * </Touch>
- * 
- * // With gradient background
- * <Touch 
- *   background={['#ff0000', '#00ff00']}
- *   gradient="vertical"
- *   onPress={() => console.log('pressed')}
- * >
- *   <Text>Gradient Button</Text>
- * </Touch>
- * 
+ *
+ *
  * // With custom styling
- * <Touch 
+ * <Touch
  *   mid={true}
  *   row={true}
  *   paddingOption={{ all: 10 }}
@@ -39,36 +29,20 @@ type TouchableOpacityRef = React.ComponentRef<typeof TouchableOpacity>
  * </Touch>
  * ```
  */
-const Touch = React.forwardRef<TouchableOpacityRef, Props>(({ style, ...props }, ref) => {
-  if (props?.hidden) return <></>
-  //@ts-ignore
-  if (isArray(props.background) && props.background.length > 1 && props.background.every(i => isString(i)))
+const Touch = React.forwardRef<TouchableOpacityRef, Props>(
+  ({ style, ...props }, ref) => {
+    if (props?.hidden) return <></>;
     return (
       <TouchableOpacity
         ref={ref}
-        {...props}
         activeOpacity={props.activeOpacity || 0.5}
+        style={[Style(props), style]}
+        {...props}
       >
-        <LinearGradient
-          //@ts-ignore
-          colors={props.background}
-          start={props.gradient == "vertical" ? { x: 0, y: 0 } : { x: 0, y: 0 }}
-          end={props.gradient == "vertical" ? { x: 0, y: 1 } : { x: 1, y: 0 }}
-          style={[Style(props), style]}
-        >
-          {props.children}
-        </LinearGradient >
+        {props.children}
       </TouchableOpacity>
-    )
-  return (
-    <TouchableOpacity
-      ref={ref}
-      activeOpacity={props.activeOpacity || 0.5}
-      style={[Style(props), style]}
-      {...props}>
-      {props.children}
-    </TouchableOpacity>
-  )
-})
+    );
+  },
+);
 
-export default Touch
+export default Touch;

package/src/Touch/TouchScale.tsx

@@ -1,70 +1,52 @@
-
-import React, { ReactNode, useCallback } from 'react';
-import { Animated, TouchableOpacity, ViewProps, } from 'react-native';
-import { Style } from './Style'
-import { Props } from './Props'
-import { isArray } from 'underscore';
-import LinearGradient from 'react-native-linear-gradient'
-import isColor from "validate-color";
+import React, { ReactNode, useCallback } from "react";
+import { Animated, TouchableOpacity, ViewProps } from "react-native";
+import { Style } from "./Style";
+import { Props } from "./Props";
 
 interface ButtonScaleProps extends Props {
-    scaleValue?: number
-    scale?: boolean
-    containerStyle?: ViewProps['style']
+  scaleValue?: number;
+  scale?: boolean;
+  containerStyle?: ViewProps["style"];
 }
-type TouchableOpacityRef = React.ComponentRef<typeof TouchableOpacity>
+type TouchableOpacityRef = React.ComponentRef<typeof TouchableOpacity>;
 
-const Touch = React.forwardRef<TouchableOpacityRef, ButtonScaleProps>(({ scaleValue = 1.1, style, background, containerStyle, ...props }, ref) => {
-    if (props?.hidden) return <></>
+const Touch = React.forwardRef<TouchableOpacityRef, ButtonScaleProps>(
+  ({ 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();
+      Animated.spring(animatedButtonScale, {
+        toValue: scaleValue,
+        useNativeDriver: true,
+      }).start();
     }, [scaleValue]);
     const onPressOut = useCallback(() => {
-        Animated.spring(animatedButtonScale, {
-            toValue: 1,
-            useNativeDriver: true,
-        }).start();
+      Animated.spring(animatedButtonScale, {
+        toValue: 1,
+        useNativeDriver: true,
+      }).start();
     }, []);
-    if (isArray(background) && background.length > 1 && background.every(i => isColor(i)))
-        return (
-
-            <TouchableOpacity
-                ref={ref}
-                onPressIn={onPressIn}
-                onPressOut={onPressOut}
-                {...props}
-                activeOpacity={props.activeOpacity || 1}
-            >
-                <Animated.View style={[{ transform: [{ scale: animatedButtonScale }] }, Style(props), style]}>
-                    <LinearGradient
-                        colors={background}
-                        start={props.gradient == "vertical" ? { x: 0, y: 0 } : { x: 0, y: 0 }}
-                        end={props.gradient == "vertical" ? { x: 0, y: 1 } : { x: 1, y: 0 }}
-                        style={[Style(props), style,]}
-                    >
-                        {props.children}
-                    </LinearGradient>
-                </Animated.View>
-            </TouchableOpacity>
-
-        )
     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>
-    )
-});
+      <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
+export default Touch;

package/src/Touch/makeStyle.ts

@@ -1,9 +1,6 @@
-import { StyleSheet } from "react-native";
+import { StyleSheet, ViewStyle } from "react-native";
 import { isNaN, isNumber } from "underscore";
 
-/**
- * Enum of predefined color names that can be used for background colors
- */
 enum COLORS {
     "white" = 1,
     "red",
@@ -15,15 +12,7 @@ enum COLORS {
     "gray",
     "primary"
 }
-
-/** Type for color modifiers that can be used as boolean flags */
-type ColorModifiers = Partial<Record<keyof typeof COLORS, boolean>>;
-
-/**
- * Mapping of short property names to their full React Native style property names
- * This allows for shorter, more convenient style property names
- */
-const SHORT_VARIATIONS = {
+const PROPS = {
     bg: "backgroundColor",
     background: "backgroundColor",
     w: "width",
@@ -36,7 +25,9 @@ const SHORT_VARIATIONS = {
     maxH: "maxHeight",
     pad: "padding",
     padH: "paddingHorizontal",
+    horizontal: "paddingHorizontal",
     padV: "paddingVertical",
+    vertical: "paddingVertical",
     padL: "paddingLeft",
     padT: "paddingTop",
     padR: "paddingRight",
@@ -51,6 +42,7 @@ const SHORT_VARIATIONS = {
     border: 'borderWidth',
     borderW: 'borderWidth',
     borderR: "borderRadius",
+    radius: "borderRadius",
     borderC: "borderColor",
     borderLW: "borderLeftWidth",
     borderTW: "borderTopWidth",
@@ -63,58 +55,58 @@ const SHORT_VARIATIONS = {
     bottom: 'bottom',
     right: 'right',
     opacity: 'opacity'
+} as const;
+
+const isColorKey = (key: string): key is ColorKey => {
+    return key in COLORS;
 };
 
-/** Type for short property names */
-export type ShortKey = keyof typeof SHORT_VARIATIONS;
+const isShortKey = (key: string): key is ShortKey => {
+    return key in PROPS;
+};
 
-/** Type for converting string keys to a record of boolean/number/string values */
+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>;
 
-/** Type combining short property names and color modifiers */
-export type MakeProp = Convert<ShortKey> & ColorModifiers
 
-/**
- * Creates a React Native style object from props using short property names
- * Supports color names, hyphenated properties, and direct style properties
- * 
- * @param props - Object containing style properties
- * @returns React Native style object
- * 
- * @example
- * ```tsx
- * // Using color names
- * makeStyle({ white: true }) // { backgroundColor: 'white' }
- * 
- * // Using hyphenated properties
- * makeStyle({ 'pad-10': true }) // { padding: 10 }
- * 
- * // Using direct properties
- * makeStyle({ width: 100 }) // { width: 100 }
- * ```
- */
-export const makeStyle = (props: { [key: string]: any }) => {
-    const style: { [key: string]: number | string } = {};
+export const makeStyle = <T>(props: { [key: string]: any }) => {
+    const style: ViewStyle = {};
+
     Object.keys(props).forEach((key) => {
-        const match = key.match(/^(\w+)-(\w+)$/) as string[]
-        // console.debug(key, match)
-        if (COLORS[key]) {
-            style['backgroundColor'] = key
-        }
-        else if (match) {
-            const value = isNaN(parseInt(match[2], 10)) ? match[2] : parseInt(match[2], 10)
-            // console.debug('value', value)
-            // console.debug('value', parseInt(match[2], 10))
-            // console.debug('value', isNumber(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+)$/);
+
+        // 🎨 Color
+        if (isColorKey(key)) {
+            style.backgroundColor = key;
+            return;
         }
-        else {
-            if (SHORT_VARIATIONS[key]) {
-                style[SHORT_VARIATIONS[key]] = props[key]
+
+        // 🔹 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 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;
-};
+};

package/src/index.tsx

@@ -2,6 +2,4 @@ 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'
-export { default as LoadingView } from './Loading'
-export { Loading } from './Loading'
+export { default as Layout } from './Layout'

package/Example/index.tsx

@@ -1,31 +0,0 @@
-import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
-import React from 'react';
-import { Block } from 'ui-rn';
-import { LinearGradient } from 'react-native-linear-gradient';
-export default function App() {
-    return (
-        <>
-
-            <LinearGradient
-                colors={['#FF6B6B', '#4ECDC4']}
-                start={{ x: 0, y: 0 }}
-                end={{ x: 0, y: 1 }}
-            >
-                <TouchableOpacity style={{ padding: 20, borderRadius: 10 }}>
-                    <Text style={{ color: 'white' }}>Gradient Block</Text>
-                </TouchableOpacity>
-            </LinearGradient>
-            <Text style={{ fontWeight: 'bold', fontStyle: 'italic', fontSize: 16, color: 'blue', alignItems: 'center' }}></Text>
-            <TouchableOpacity
-                style={{
-                    padding: 10,
-                    backgroundColor:'blue',
-                    borderRadius: 10,
-                }}
-            >
-                <Text style={{ color: 'white', alignItems: 'center' }}>Press Me</Text>
-            </TouchableOpacity>
-        </>
-    );
-}
-