feat: new components added

src/components/Box/index.tsx

@@ -4,9 +4,12 @@ import { View } from 'react-native';
 import { usePropsResolution } from '../../hooks/usePropsResolution';
 import { BoxProps } from './types';
 import { SafeAreaView } from 'react-native-safe-area-context';
+import { omit } from '../../utils';
 
 const Box: FC<BoxProps> = ({ children, ...props }) => {
-  const { ...resolvedProps } = usePropsResolution('Box', props);
+  const { ...resolvedProps } = usePropsResolution('Box', {
+    ...omit(props),
+  });
 
   if (props.safeArea) {
     return <SafeAreaView {...resolvedProps}>{children}</SafeAreaView>;

src/components/Box/types.ts

@@ -1,8 +1,9 @@
+import { SafeAreaProps, GeneralStyles } from '../../types';
 import { PseudoComponentProps } from '../../contexts/theme';
 import type { ViewProps } from 'react-native';
 
 export interface BoxProps
   extends ViewProps,
-    PseudoComponentProps<ViewProps['style']> {
-  safeArea?: boolean;
-}
+    SafeAreaProps,
+    GeneralStyles,
+    PseudoComponentProps<ViewProps['style']> {}

src/components/Button/index.tsx

@@ -6,14 +6,15 @@ import { ButtonProps } from './types';
 import Text from '../Text';
 
 const Button: FC<ButtonProps> = ({ children, title, ...props }) => {
-  const { ...resolvedProps } = usePropsResolution('Button', props);
+  const { ...resolvedProps } = usePropsResolution('Button', {
+    style: styles.button,
+    ...props,
+  });
   return (
-    <TouchableOpacity style={styles.button} {...resolvedProps}>
+    <TouchableOpacity {...resolvedProps}>
       {title ? <Text style={styles.buttonText}>{title}</Text> : children}
     </TouchableOpacity>
   );
-
-  // return <BtnComp {...resolvedProps}>{children}</BtnComp>;
 };
 
 const styles = StyleSheet.create({

src/components/Icon/index.tsx

@@ -1,14 +1,13 @@
-import React, { memo } from 'react';
+import React, { FC, memo } from 'react';
 import { usePropsResolution } from '../../hooks/usePropsResolution';
 import { IconProps } from './types';
+import { omit } from '../../utils';
 
-const Icon = (props: IconProps) => {
-  const { as, ...resolvedProps } = usePropsResolution('Icon', props);
-  return React.cloneElement(as, {
-    ...resolvedProps,
-    //@ts-ignore
-    ...as.props,
-  });
+const Icon: FC<IconProps> = ({ as, ...props }) => {
+  const Comp = as;
+
+  const { ...resolvedProps } = usePropsResolution('Icon', omit(props, 'as'));
+  return <Comp {...resolvedProps} />;
 };
 
 export default memo(Icon);

src/components/Icon/types.ts

@@ -1,37 +1,24 @@
-export interface IconProps {
-  as?: any;
-  /**
-   * The viewBox of the icon.
-   */
-  // viewBox?: string;
-  /**
-   * The size of the icon.
-   */
-  size?: number;
+import { OpaqueColorValue, TextProps } from 'react-native';
 
+export interface IconProps extends TextProps {
+  as?: React.ReactNode | any;
   /**
-   * The color of the icon.
-   */
-  // color?: string;
-  color?: string;
-  /**
+   * Size of the icon, can also be passed as fontSize in the style object.
    *
+   * @default 12
    */
-  // focusable?: boolean;
-  /**
-   *
-   */
-  children?: JSX.Element[] | JSX.Element;
-  /**
-   *
-   */
-  name?: string;
+  size?: number;
   /**
+   * Name of the icon to show
    *
+   * See Icon Explorer app
+   * {@link https://expo.github.io/vector-icons/}
    */
-  // stroke?: string;
+  name: string;
   /**
+   * Color of the icon. Can be a string or OpaqueColorValue (returned from
+   * PlatformColor(..))
    *
    */
-  // strokeWidth?: string;
+  color?: string | OpaqueColorValue;
 }

src/contexts/theme.ts

@@ -62,11 +62,14 @@ export const colors: { light: any; dark: any } = {
       },
       dark: false,
     },
+    Icon: {
+      color: 'rgb(28, 28, 30)',
+    },
     Box: {
       backgroundColor: 'white',
     },
     Text: {
-      color: 'black',
+      color: 'rgb(28, 28, 30)',
     },
     Button: {
       backgroundColor: 'blue',
@@ -84,11 +87,14 @@ export const colors: { light: any; dark: any } = {
       },
       dark: true,
     },
+    Icon: {
+      color: 'rgb(229, 229, 231)',
+    },
     Box: {
       backgroundColor: 'black',
     },
     Text: {
-      color: 'white',
+      color: 'rgb(229, 229, 231)',
     },
     Button: {
       backgroundColor: 'blue',

src/hooks/usePropsResolution.tsx

@@ -1,74 +1,82 @@
+/* eslint-disable prettier/prettier */
 import { useContext } from 'react';
 import { ThemeUiContext } from '../contexts/ThemeUiProvider';
 import { omit, pick } from '../utils';
 //test
 export function usePropsResolution(
-  component: 'Box' | 'Text' | 'Button' | 'Icon' | 'Pressable',
-  incomingProps: any,
-  state?: any,
-  _config?: {
-    componentTheme?: any;
-    resolveResponsively?: string[];
-    ignoreProps?: string[];
-    cascadePseudoProps?: boolean;
-    extendTheme?: string[];
-  }
+    component: 'Box' | 'Text' | 'Button' | 'Icon' | 'Pressable',
+    incomingProps: any,
+    state?: any,
+    _config?: {
+        componentTheme?: any;
+        resolveResponsively?: string[];
+        ignoreProps?: string[];
+        cascadePseudoProps?: boolean;
+        extendTheme?: string[];
+    }
 ) {
-  const { mode, colors } = useContext(ThemeUiContext);
+    const { mode, colors } = useContext(ThemeUiContext);
+
+    const optionalStyle = mode === 'light' ? incomingProps?._light : incomingProps?._dark;
+    const style: any = colors[mode][component];
+    if (component === 'Icon') {
+        return {
+            ...style,
+            ...optionalStyle,
+            ...incomingProps
+        }
+    }
+
+    if (component === 'Button') {
+        const btnStyles: string[] = [
+            'borderRadius',
+            'backgroundColor',
+            'borderColor',
+            'borderWidth',
+            'fontSize',
+            'fontWeight',
+            'fontFamily',
+            'padding',
+            'margin',
+            'width',
+            'height',
+            'marginBottom',
+            'marginTop',
+            'marginLeft',
+            'marginRight',
+            'paddingBottom',
+            'paddingTop',
+            'paddingLeft',
+            'paddingRight',
+            'alignSelf',
+            'alignItems',
+            'justifyContent',
+            'flexDirection',
+            'flexGrow',
+            'flexShrink',
+            'flexWrap',
+            'position',
+            'top',
+            'bottom',
+            'left',
+            'right',
+        ];
+        return {
+            ...omit(incomingProps, btnStyles),
+            ...optionalStyle,
+            style: { ...incomingProps?.style, ...pick(incomingProps, ...btnStyles) },
+            ...state,
+        };
+    }
 
-  const optionalStyle =
-    mode === 'light' ? incomingProps?._light : incomingProps?._dark;
-  const style: any = colors[mode][component];
-  if (component === 'Button') {
-    const btnStyles: string[] = [
-      'borderRadius',
-      'backgroundColor',
-      'borderColor',
-      'borderWidth',
-      'fontSize',
-      'fontWeight',
-      'fontFamily',
-      'padding',
-      'margin',
-      'width',
-      'height',
-      'marginBottom',
-      'marginTop',
-      'marginLeft',
-      'marginRight',
-      'paddingBottom',
-      'paddingTop',
-      'paddingLeft',
-      'paddingRight',
-      'alignSelf',
-      'alignItems',
-      'justifyContent',
-      'flexDirection',
-      'flexGrow',
-      'flexShrink',
-      'flexWrap',
-      'position',
-      'top',
-      'bottom',
-      'left',
-      'right',
-    ];
     return {
-      ...omit(incomingProps, btnStyles),
-      ...optionalStyle,
-      style: { ...incomingProps?.style, ...pick(incomingProps, ...btnStyles) },
-      ...state,
+        ...incomingProps,
+        style: {
+            ...style,
+            ...optionalStyle,
+            ...incomingProps?.style,
+        },
+        ...state,
     };
-  }
-
-  return {
-    ...incomingProps,
-    style: {
-      ...style,
-      ...optionalStyle,
-      ...incomingProps?.style,
-    },
-    ...state,
-  };
 }
 // git commit -m "feat: new components added"

src/index.tsx

@@ -7,6 +7,7 @@ import ThemeUiProvider, {
 } from './contexts/ThemeUiProvider';
 import { useTheme } from './hooks/useTheme';
 import Pressable from './components/Pressable';
+import Icon from './components/Icon';
 
 export {
   ThemeUiContext,
@@ -17,4 +18,5 @@ export {
   useTheme,
   Button,
   Pressable,
+  Icon,
 };

src/types/GeneralStyles.ts

@@ -0,0 +1,21 @@
+export interface GeneralStyles {
+  rounded?: boolean;
+  w?: number | string;
+  h?: number | string;
+  m?: number | string;
+  mt?: number | string;
+  mr?: number | string;
+  mb?: number | string;
+  ml?: number | string;
+  mx?: number | string;
+  my?: number | string;
+  p?: number | string;
+  pt?: number | string;
+  pr?: number | string;
+  pb?: number | string;
+  pl?: number | string;
+  px?: number | string;
+  py?: number | string;
+  bg?: string;
+  bgColor?: string;
+}

src/types/index.tsx

@@ -1,2 +1,3 @@
 export * from './PlatformProps';
 export * from './ExtraProps';
+export * from './GeneralStyles';