first commit

example/src/App.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import { StyleSheet, View, Text } from 'react-native';
-import { ThemeUiProvider } from 'react-native-themeui';
+import { Box, ThemeUiProvider } from 'react-native-themeui';
 
 export default function App() {
 
@@ -12,7 +12,9 @@ export default function App() {
   return (
     <ThemeUiProvider>
       <View style={styles.container}>
-        <Text>Result:</Text>
+        <Box  >
+          <Text>Result:</Text>
+        </Box>
       </View>
     </ThemeUiProvider>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-themeui",
-  "version": "1.1.1",
+  "version": "1.0.1",
   "description": "Essential cross-platform UI components for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -70,7 +70,7 @@
     "react": "18.2.0",
     "react-native": "0.72.3",
     "react-native-builder-bob": "^0.20.0",
-    "react-native-safe-area-context": "^3.1.9",
+    "react-native-safe-area-context": "^4.7.1",
     "release-it": "^15.0.0",
     "typescript": "^5.0.2"
   },

src/components/Box/index.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+
+import { View } from "react-native"
+import { usePropsResolution } from "../../hooks/usePropsResolution"
+import { BoxProps } from './types';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+
+const Box: FC<BoxProps> = ({ children, ...props }) => {
+    const { ...resolvedProps } = usePropsResolution('Box', props);
+
+    if (props.safeArea) {
+        return (
+            <SafeAreaView {...resolvedProps}>{children}</SafeAreaView>
+        )
+    }
+
+    return (
+        <View {...resolvedProps} >
+            {children}
+        </View>
+    )
+}
+
+export default Box

src/components/Box/types.ts

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

src/components/Button/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+import { View } from "react-native"
+import { usePropsResolution } from "../../hooks/usePropsResolution"
+import { ButtonProps } from './types';
+
+
+const Button: FC<ButtonProps> = ({ children, ...props }) => {
+    const { ...resolvedProps } = usePropsResolution('Button', props);
+
+    return (
+        <View {...resolvedProps} >
+            {children}
+        </View>
+    )
+}
+
+export default Button

src/components/Button/types.ts

@@ -0,0 +1,7 @@
+import { PseudoComponentProps } from '../../contexts/theme';
+import type { ViewProps } from 'react-native';
+
+
+export interface ButtonProps extends ViewProps, PseudoComponentProps<ViewProps["style"]> {
+
+}

src/components/Text/index.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+
+import { Text as TxtComp } from "react-native"
+import { usePropsResolution } from "../../hooks/usePropsResolution"
+import { TextProps } from './types';
+
+
+const Text: FC<TextProps> = ({ children, ...props }) => {
+    const { ...resolvedProps } = usePropsResolution('Text', props);
+
+    return (
+        <TxtComp {...resolvedProps} >
+            {children}
+        </TxtComp>
+    )
+}
+
+export default Text

src/components/Text/types.ts

@@ -0,0 +1,7 @@
+import { PseudoComponentProps } from '../../contexts/theme';
+import type { TextProps as TextCompProps } from 'react-native';
+
+
+export interface TextProps extends TextCompProps, PseudoComponentProps<TextCompProps["style"]> {
+
+}

src/components/index.ts

@@ -0,0 +1,7 @@
+import Box from "./Box";
+import Text from "./Text";
+
+export {
+    Box,
+    Text
+}

src/contexts/ThemeUiProvider.tsx

@@ -0,0 +1,30 @@
+import React, { FC, ReactNode, useState, createContext } from "react";
+import defaultTheme, { ThemeUiTypes, ThemeActionTypes } from "./theme";
+
+interface ThemeUiProviderProps {
+    children: ReactNode
+    mode?: 'light' | 'dark'
+}
+
+
+const ThemeUiContext = createContext<ThemeUiTypes>(defaultTheme);
+const ThemeUiActionContext = createContext<ThemeActionTypes>({
+    setThemeMode: () => { }
+});
+
+const ThemeUiProvider: FC<ThemeUiProviderProps> = ({ children, mode = "light" }) => {
+    const [theme, setTheme] = useState<ThemeUiTypes>({ ...defaultTheme, mode });
+
+    const setThemeMode = (mode: 'light' | 'dark' = 'light') => setTheme({ ...theme, mode });
+
+    return (
+        <ThemeUiContext.Provider value={theme}>
+            <ThemeUiActionContext.Provider value={{ setThemeMode }}>
+                {children}
+            </ThemeUiActionContext.Provider>
+        </ThemeUiContext.Provider>
+    )
+}
+
+export { ThemeUiContext, ThemeUiActionContext }
+export default ThemeUiProvider;

src/contexts/theme.ts

@@ -0,0 +1,96 @@
+import { ButtonProps } from "../components/Button/types";
+
+export interface PseudoComponentProps<T> {
+  _light?: T
+  _dark?: T
+}
+
+interface ThemeUiTypes {
+  mode: 'light' | 'dark';
+  colors: {
+    light: {
+      Box: BoxProps['style']
+      Text: TextProps['style']
+      Button: ButtonProps['style']
+    },
+    dark: {
+      Box: BoxProps['style']
+      Text: TextProps['style']
+      Button: ButtonProps['style']
+    }
+  }
+  components: {
+    Button: {}
+    Box: {},
+    Text: {
+      style: {
+        color: string;
+      }
+    }
+  }
+}
+
+export const colors: { light: any, dark: any } = {
+  light: {
+    Box: {
+      backgroundColor: 'white',
+    },
+    Text: {
+      color: "black"
+    },
+    Button: {
+      backgroundColor: 'blue'
+    }
+  },
+  dark: {
+    Box: {
+      backgroundColor: 'black',
+    },
+    Text: {
+      color: "white"
+    },
+    Button: {
+      backgroundColor: 'blue'
+    }
+  }
+}
+const theme: ThemeUiTypes = {
+  mode: 'light',
+  colors: colors,
+  components: {
+    Box: {
+      backgroundColor: 'red',
+    },
+    Text: {
+      style: {
+        color: "white"
+      }
+    },
+    Button: {
+      style: {
+        backgroundColor: 'blue'
+      }
+    }
+  }
+};
+
+
+
+interface ThemeActionTypes {
+  setThemeMode: (mode: 'light' | 'dark') => void;
+}
+
+
+export interface BoxProps {
+  style?: {
+    backgroundColor?: string;
+  }
+}
+export interface TextProps {
+  style?: {
+    color?: string;
+  }
+}
+
+export { ThemeUiTypes, ThemeActionTypes };
+export default theme;