feat: new components added

.github/workflows/ci.yml

@@ -45,17 +45,4 @@ jobs:
         uses: ./.github/actions/setup
 
       - name: Build package
-        run: yarn prepack
-
-  build-web:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup
-        uses: ./.github/actions/setup
-
-      - name: Build example for Web
-        run: |
-          yarn example expo export:web
+        run: yarn prepack

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-themeui",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Essential cross-platform UI components for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/components/Box/index.tsx

@@ -1,25 +1,18 @@
 import React, { FC } from 'react';
 
-import { View } from "react-native"
-import { usePropsResolution } from "../../hooks/usePropsResolution"
+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);
+  const { ...resolvedProps } = usePropsResolution('Box', props);
 
-    if (props.safeArea) {
-        return (
-            <SafeAreaView {...resolvedProps}>{children}</SafeAreaView>
-        )
-    }
+  if (props.safeArea) {
+    return <SafeAreaView {...resolvedProps}>{children}</SafeAreaView>;
+  }
 
-    return (
-        <View {...resolvedProps} >
-            {children}
-        </View>
-    )
-}
+  return <View {...resolvedProps}>{children}</View>;
+};
 
-export default Box
+export default Box;

src/components/Box/types.ts

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

src/components/Button/index.tsx

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

src/components/Button/types.ts

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

src/components/Icon/index.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+
+import { View } from 'react-native';
+import { usePropsResolution } from '../../hooks/usePropsResolution';
+import { IconProps } from './types';
+
+const Icon: FC<IconProps> = ({ children, as, name, ...props }) => {
+  console.log({ as, name });
+  const { ...resolvedProps } = usePropsResolution('Button', props);
+  return <View {...resolvedProps}>{children}</View>;
+};
+
+export default Icon;

src/components/Icon/types.ts

@@ -0,0 +1,9 @@
+import { PseudoComponentProps } from '../../contexts/theme';
+import type { ViewProps } from 'react-native';
+
+export interface IconProps
+  extends ViewProps,
+    PseudoComponentProps<ViewProps['style']> {
+  as: React.ReactNode;
+  name: string;
+}

src/components/Text/index.tsx

@@ -1,18 +1,13 @@
 import React, { FC } from 'react';
 
-import { Text as TxtComp } from "react-native"
-import { usePropsResolution } from "../../hooks/usePropsResolution"
+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);
+  const { ...resolvedProps } = usePropsResolution('Text', props);
 
-    return (
-        <TxtComp {...resolvedProps} >
-            {children}
-        </TxtComp>
-    )
-}
+  return <TxtComp {...resolvedProps}>{children}</TxtComp>;
+};
 
-export default Text
+export default Text;

src/components/Text/types.ts

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

src/components/index.ts

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

src/contexts/ThemeUiProvider.tsx

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