@dryanovski/react-native-components 1.0.0 → 1.0.1

package/lib/module/providers/README.md

@@ -0,0 +1,22 @@
+# ThemeProvider
+
+Design to manage and provide theming capabilities to your application.
+
+## Usage
+
+```tsx
+import { ThemeProvider } from '@dryanovski/react-native-components';
+
+const App = () => {
+  return (
+    <ThemeProvider theme="dark">
+      <YourAppComponents />
+    </ThemeProvider>
+  );
+};
+```
+
+## Props
+
+- `theme`: A string representing the theme to be applied (e.g., "light", "dark").
+- `children`: The child components that will have access to the theme context.

package/lib/module/providers/ThemeProvider.js

@@ -1,11 +1,66 @@
 "use strict";
 
-import React from 'react';
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useColorScheme as useDeviceColorScheme } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Create a ThemeContext with default value null
+ * @type {React.Context<ThemeContextType | null>}
+ */
+const ThemeContext = /*#__PURE__*/React.createContext(null);
+
+/**
+ * Give access to theme context
+ * @returns {ThemeContextType} The current theme context
+ * @throws Will throw an error if used outside of ThemeProvider
+ * @example
+ * const { theme, changeTheme } = useTheme();
+ * console.log(theme); // 'light' | 'dark' | 'system'
+ */
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+/**
+ * ThemeProvider component to manage and provide theme context
+ * @param {React.ReactNode} children - The child components
+ * @param {ThemeVariants} theme - The current theme ('light', 'dark', 'system')
+ * @param {ThemeVariants} defaultTheme - The default theme if none is provided
+ * @param {(theme: ThemeVariants) => void} onThemeChange - Callback when theme changes
+ * @returns {JSX.Element} The ThemeProvider component
+ *
+ * @example
+ * <ThemeProvider theme="dark" onThemeChange={(theme) => console.log(theme)}>
+ *   <App />
+ * </ThemeProvider>
+ */
 export const ThemeProvider = ({
-  children
+  children,
+  theme,
+  defaultTheme = 'light',
+  onThemeChange = () => undefined
 }) => {
-  return /*#__PURE__*/_jsx(_Fragment, {
+  const deviceColorscheme = useDeviceColorScheme();
+  const [currentTheme, setTheme] = useState(theme || defaultTheme);
+  useEffect(() => {
+    onThemeChange && theme && onThemeChange(theme);
+  }, [theme, onThemeChange]);
+  const changeTheme = useCallback(newTheme => {
+    if (newTheme === 'system') {
+      setTheme(deviceColorscheme === 'dark' ? 'dark' : 'light');
+      return;
+    }
+    setTheme(newTheme);
+  }, [deviceColorscheme]);
+  return /*#__PURE__*/_jsx(ThemeContext.Provider, {
+    value: {
+      theme: currentTheme,
+      changeTheme
+    },
     children: children
   });
 };

package/lib/module/providers/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","Fragment","_Fragment","jsx","_jsx","ThemeProvider","children"],"sourceRoot":"../../../src","sources":["providers/ThemeProvider.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA;AAG1B,OAAO,MAAMC,aAA2C,GAAGA,CAAC;EAAEC;AAAS,CAAC,KAAK;EAC3E,oBAAOF,IAAA,CAAAF,SAAA;IAAAI,QAAA,EAAGA;EAAQ,CAAG,CAAC;AACxB,CAAC;AAED,eAAeD,aAAa","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useContext","useEffect","useState","useColorScheme","useDeviceColorScheme","jsx","_jsx","ThemeContext","createContext","useTheme","context","Error","ThemeProvider","children","theme","defaultTheme","onThemeChange","undefined","deviceColorscheme","currentTheme","setTheme","changeTheme","newTheme","Provider","value"],"sourceRoot":"../../../src","sources":["providers/ThemeProvider.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,UAAU,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAC3E,SAASC,cAAc,IAAIC,oBAAoB,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOtE;AACA;AACA;AACA;AACA,MAAMC,YAAY,gBAAGT,KAAK,CAACU,aAAa,CAA0B,IAAI,CAAC;;AAEvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,GAAGA,CAAA,KAAM;EAC5B,MAAMC,OAAO,GAAGV,UAAU,CAACO,YAAY,CAAC;EACxC,IAAI,CAACG,OAAO,EAAE;IACZ,MAAM,IAAIC,KAAK,CAAC,8CAA8C,CAAC;EACjE;EACA,OAAOD,OAAO;AAChB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAME,aAA2C,GAAGA,CAAC;EAC1DC,QAAQ;EACRC,KAAK;EACLC,YAAY,GAAG,OAAO;EACtBC,aAAa,GAAGA,CAAA,KAAMC;AACxB,CAAC,KAAK;EACJ,MAAMC,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAM,CAACe,YAAY,EAAEC,QAAQ,CAAC,GAAGlB,QAAQ,CACvCY,KAAK,IAAIC,YACX,CAAC;EAEDd,SAAS,CAAC,MAAM;IACde,aAAa,IAAIF,KAAK,IAAIE,aAAa,CAACF,KAAK,CAAC;EAChD,CAAC,EAAE,CAACA,KAAK,EAAEE,aAAa,CAAC,CAAC;EAE1B,MAAMK,WAAW,GAAGtB,WAAW,CAC5BuB,QAAuB,IAAK;IAC3B,IAAIA,QAAQ,KAAK,QAAQ,EAAE;MACzBF,QAAQ,CAACF,iBAAiB,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;MACzD;IACF;IACAE,QAAQ,CAACE,QAAQ,CAAC;EACpB,CAAC,EACD,CAACJ,iBAAiB,CACpB,CAAC;EAED,oBACEZ,IAAA,CAACC,YAAY,CAACgB,QAAQ;IAACC,KAAK,EAAE;MAAEV,KAAK,EAAEK,YAAY;MAAEE;IAAY,CAAE;IAAAR,QAAA,EAChEA;EAAQ,CACY,CAAC;AAE5B,CAAC;AAED,eAAeD,aAAa","ignoreList":[]}

package/lib/module/providers/ThemeProvider.test.js

@@ -0,0 +1,384 @@
+"use strict";
+
+import { act, renderHook, waitFor } from '@testing-library/react-native';
+import React from 'react';
+import { useColorScheme as useDeviceColorScheme } from 'react-native';
+import { ThemeProvider, useTheme } from "./ThemeProvider.js";
+
+// Mock react-native's useColorScheme hook
+import { jsx as _jsx } from "react/jsx-runtime";
+jest.mock('react-native', () => ({
+  useColorScheme: jest.fn()
+}));
+const mockedUseDeviceColorScheme = useDeviceColorScheme;
+describe('ThemeProvider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockedUseDeviceColorScheme.mockReturnValue('light');
+  });
+  describe('useTheme hook', () => {
+    it('should throw error when used outside ThemeProvider', () => {
+      // Suppress console.error for this test
+      const originalError = console.error;
+      console.error = jest.fn();
+      expect(() => {
+        renderHook(() => useTheme());
+      }).toThrow('useTheme must be used within a ThemeProvider');
+      console.error = originalError;
+    });
+    it('should return theme context when used inside ThemeProvider', () => {
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current).toHaveProperty('theme');
+      expect(result.current).toHaveProperty('changeTheme');
+    });
+  });
+  describe('ThemeProvider component', () => {
+    it('should use defaultTheme when no theme prop is provided and device is in light mode', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "light",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('light');
+    });
+    it('should use defaultTheme even when device is in dark mode', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+
+      // defaultTheme is 'light' by default, so it should use 'light' even though device is 'dark'
+      expect(result.current.theme).toBe('light');
+    });
+    it('should use provided theme prop over device color scheme', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        theme: "light",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('light');
+    });
+    it('should use custom defaultTheme when provided', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "dark",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('dark');
+    });
+    it('should call onThemeChange when theme prop is provided', async () => {
+      const onThemeChange = jest.fn();
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        theme: "light",
+        onThemeChange: onThemeChange,
+        children: children
+      });
+      renderHook(() => useTheme(), {
+        wrapper
+      });
+      await waitFor(() => {
+        expect(onThemeChange).toHaveBeenCalledWith('light');
+      });
+    });
+    it('should not call onThemeChange when no theme prop is provided', () => {
+      const onThemeChange = jest.fn();
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        onThemeChange: onThemeChange,
+        children: children
+      });
+      renderHook(() => useTheme(), {
+        wrapper
+      });
+
+      // onThemeChange should not be called when theme prop is not provided
+      expect(onThemeChange).not.toHaveBeenCalled();
+    });
+  });
+  describe('changeTheme function', () => {
+    it('should change theme to dark', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "light",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('light');
+      act(() => {
+        result.current.changeTheme('dark');
+      });
+      expect(result.current.theme).toBe('dark');
+    });
+    it('should change theme to light', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "dark",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('dark');
+      act(() => {
+        result.current.changeTheme('light');
+      });
+      expect(result.current.theme).toBe('light');
+    });
+    it('should use device color scheme when theme is set to "system"', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "light",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('light');
+      act(() => {
+        result.current.changeTheme('system');
+      });
+      expect(result.current.theme).toBe('dark');
+    });
+    it('should switch to light theme when system theme is set and device is in light mode', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "dark",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('dark');
+      act(() => {
+        result.current.changeTheme('system');
+      });
+      expect(result.current.theme).toBe('light');
+    });
+    it('should handle multiple theme changes', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "light",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('light');
+      act(() => {
+        result.current.changeTheme('dark');
+      });
+      expect(result.current.theme).toBe('dark');
+      act(() => {
+        result.current.changeTheme('light');
+      });
+      expect(result.current.theme).toBe('light');
+      act(() => {
+        result.current.changeTheme('system');
+      });
+      expect(result.current.theme).toBe('light');
+    });
+    it('should respect device color scheme when changing to system theme', () => {
+      // Mock device as dark initially
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "light",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+
+      // Initially should be light (from defaultTheme)
+      expect(result.current.theme).toBe('light');
+
+      // Change to system should use device color scheme (dark)
+      act(() => {
+        result.current.changeTheme('system');
+      });
+      expect(result.current.theme).toBe('dark');
+    });
+    it('should update system theme when device color scheme is light', () => {
+      // Mock device as light
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "dark",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+
+      // Initially should be dark (from defaultTheme)
+      expect(result.current.theme).toBe('dark');
+
+      // Change to system should use device color scheme (light)
+      act(() => {
+        result.current.changeTheme('system');
+      });
+      expect(result.current.theme).toBe('light');
+    });
+  });
+  describe('edge cases', () => {
+    it('should handle undefined device color scheme', () => {
+      mockedUseDeviceColorScheme.mockReturnValue(undefined);
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "light",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('light');
+    });
+    it('should handle null device color scheme', () => {
+      mockedUseDeviceColorScheme.mockReturnValue(null);
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "dark",
+        children: children
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      expect(result.current.theme).toBe('dark');
+    });
+    it('should maintain theme stability with same changeTheme callback reference', () => {
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "light",
+        children: children
+      });
+      const {
+        result,
+        rerender
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      const initialChangeTheme = result.current.changeTheme;
+      rerender({});
+
+      // changeTheme should maintain reference stability due to useCallback
+      expect(result.current.changeTheme).toBe(initialChangeTheme);
+    });
+  });
+  describe('integration tests', () => {
+    it('should work with nested providers', () => {
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "light",
+        children: /*#__PURE__*/_jsx(ThemeProvider, {
+          defaultTheme: "dark",
+          children: children
+        })
+      });
+      const {
+        result
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+
+      // Should use the innermost provider
+      expect(result.current.theme).toBe('dark');
+    });
+    it('should maintain theme state across re-renders', () => {
+      const wrapper = ({
+        children
+      }) => /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: "light",
+        children: children
+      });
+      const {
+        result,
+        rerender
+      } = renderHook(() => useTheme(), {
+        wrapper
+      });
+      act(() => {
+        result.current.changeTheme('dark');
+      });
+      expect(result.current.theme).toBe('dark');
+      rerender({});
+      expect(result.current.theme).toBe('dark');
+    });
+  });
+});
+//# sourceMappingURL=ThemeProvider.test.js.map

package/lib/module/providers/ThemeProvider.test.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["act","renderHook","waitFor","React","useColorScheme","useDeviceColorScheme","ThemeProvider","useTheme","jsx","_jsx","jest","mock","fn","mockedUseDeviceColorScheme","describe","beforeEach","clearAllMocks","mockReturnValue","it","originalError","console","error","expect","toThrow","wrapper","children","result","current","toHaveProperty","defaultTheme","theme","toBe","onThemeChange","toHaveBeenCalledWith","not","toHaveBeenCalled","changeTheme","undefined","rerender","initialChangeTheme"],"sourceRoot":"../../../src","sources":["providers/ThemeProvider.test.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/providers/ThemeProvider.d.ts

@@ -1,5 +1,27 @@
 import React from 'react';
-import type { ThemeProviderProps } from './types';
+import type { ThemeContextType, ThemeProviderProps } from './types';
+/**
+ * Give access to theme context
+ * @returns {ThemeContextType} The current theme context
+ * @throws Will throw an error if used outside of ThemeProvider
+ * @example
+ * const { theme, changeTheme } = useTheme();
+ * console.log(theme); // 'light' | 'dark' | 'system'
+ */
+export declare const useTheme: () => ThemeContextType;
+/**
+ * ThemeProvider component to manage and provide theme context
+ * @param {React.ReactNode} children - The child components
+ * @param {ThemeVariants} theme - The current theme ('light', 'dark', 'system')
+ * @param {ThemeVariants} defaultTheme - The default theme if none is provided
+ * @param {(theme: ThemeVariants) => void} onThemeChange - Callback when theme changes
+ * @returns {JSX.Element} The ThemeProvider component
+ *
+ * @example
+ * <ThemeProvider theme="dark" onThemeChange={(theme) => console.log(theme)}>
+ *   <App />
+ * </ThemeProvider>
+ */
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
 export default ThemeProvider;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/lib/typescript/src/providers/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAEtD,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAE5E,OAAO,KAAK,EACV,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,SAAS,CAAC;AAQjB;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,wBAMpB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+BtD,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/typescript/src/providers/ThemeProvider.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ThemeProvider.test.d.ts.map

package/lib/typescript/src/providers/ThemeProvider.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.test.d.ts","sourceRoot":"","sources":["../../../../src/providers/ThemeProvider.test.tsx"],"names":[],"mappings":""}

package/lib/typescript/src/providers/types.d.ts

@@ -1,5 +1,21 @@
+/**
+ * Theme variants type definition
+ */
+export type ThemeVariants = 'light' | 'dark' | 'system';
+/**
+ * ThemeProvider component props definition
+ */
 export type ThemeProviderProps = {
     children: React.ReactNode;
-    configuration?: {};
+    theme?: ThemeVariants;
+    defaultTheme?: ThemeVariants;
+    onThemeChange?: (theme: ThemeVariants) => void;
+};
+/**
+ * Theme context type definition
+ */
+export type ThemeContextType = {
+    theme: ThemeVariants;
+    changeTheme: (theme: ThemeVariants) => void;
 };
 //# sourceMappingURL=types.d.ts.map

package/lib/typescript/src/providers/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/providers/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,EAAE,CAAC;CACpB,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/providers/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAExD;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,YAAY,CAAC,EAAE,aAAa,CAAC;IAG7B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,aAAa,CAAC;IAGrB,WAAW,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dryanovski/react-native-components",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Collection of reusable React Native components for building mobile applications.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -17,12 +17,6 @@
     "src",
     "lib"
   ],
-  "scripts": {
-    "test": "jest",
-    "lint": "eslint \"**/*.{js,ts,tsx}\"",
-    "clean": "del-cli lib",
-    "prepare": "bob build"
-  },
   "keywords": [
     "react-native",
     "ios",
@@ -36,6 +30,7 @@
     "@react-native-community/cli": "latest",
     "@react-native/babel-preset": "0.78.2",
     "@react-native/eslint-config": "^0.78.0",
+    "@testing-library/react-native": "^13.3.3",
     "@types/jest": "^29.5.5",
     "@types/react": "^19.0.12",
     "babel-plugin-module-resolver": "^5.0.2",
@@ -56,6 +51,7 @@
     "react-native-screens": "~4.16.0",
     "react-native-svg": "15.12.1",
     "react-native-worklets": "0.5.1",
+    "react-test-renderer": "19.1.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
@@ -67,14 +63,6 @@
     "react-native-svg": "^15.12.1",
     "react-native-worklets": "0.5.1"
   },
-  "jest": {
-    "preset": "react-native",
-    "passWithNoTests": true,
-    "modulePathIgnorePatterns": [
-      "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
-    ]
-  },
   "prettier": {
     "quoteProps": "consistent",
     "singleQuote": true,
@@ -108,5 +96,20 @@
     "languages": "js",
     "type": "library",
     "version": "0.51.1"
+  },
+  "dependencies": {
+    "@react-native/eslint-plugin": "^0.82.1",
+    "@typescript-eslint/eslint-plugin": "^8.48.1",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-jest": "^29.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-native": "^5.0.0"
+  },
+  "scripts": {
+    "test": "jest",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "clean": "del-cli lib"
   }
-}
+}

package/src/providers/README.md

@@ -0,0 +1,22 @@
+# ThemeProvider
+
+Design to manage and provide theming capabilities to your application.
+
+## Usage
+
+```tsx
+import { ThemeProvider } from '@dryanovski/react-native-components';
+
+const App = () => {
+  return (
+    <ThemeProvider theme="dark">
+      <YourAppComponents />
+    </ThemeProvider>
+  );
+};
+```
+
+## Props
+
+- `theme`: A string representing the theme to be applied (e.g., "light", "dark").
+- `children`: The child components that will have access to the theme context.

package/src/providers/ThemeProvider.test.tsx

@@ -0,0 +1,340 @@
+import { act, renderHook, waitFor } from '@testing-library/react-native';
+import React from 'react';
+import { useColorScheme as useDeviceColorScheme } from 'react-native';
+import { ThemeProvider, useTheme } from './ThemeProvider';
+
+// Mock react-native's useColorScheme hook
+jest.mock('react-native', () => ({
+  useColorScheme: jest.fn(),
+}));
+
+const mockedUseDeviceColorScheme = useDeviceColorScheme as jest.MockedFunction<
+  typeof useDeviceColorScheme
+>;
+
+describe('ThemeProvider', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockedUseDeviceColorScheme.mockReturnValue('light');
+  });
+
+  describe('useTheme hook', () => {
+    it('should throw error when used outside ThemeProvider', () => {
+      // Suppress console.error for this test
+      const originalError = console.error;
+      console.error = jest.fn();
+
+      expect(() => {
+        renderHook(() => useTheme());
+      }).toThrow('useTheme must be used within a ThemeProvider');
+
+      console.error = originalError;
+    });
+
+    it('should return theme context when used inside ThemeProvider', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider>{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current).toHaveProperty('theme');
+      expect(result.current).toHaveProperty('changeTheme');
+    });
+  });
+
+  describe('ThemeProvider component', () => {
+    it('should use defaultTheme when no theme prop is provided and device is in light mode', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should use defaultTheme even when device is in dark mode', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider>{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      // defaultTheme is 'light' by default, so it should use 'light' even though device is 'dark'
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should use provided theme prop over device color scheme', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider theme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should use custom defaultTheme when provided', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should call onThemeChange when theme prop is provided', async () => {
+      const onThemeChange = jest.fn();
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider theme="light" onThemeChange={onThemeChange}>
+          {children}
+        </ThemeProvider>
+      );
+
+      renderHook(() => useTheme(), { wrapper });
+
+      await waitFor(() => {
+        expect(onThemeChange).toHaveBeenCalledWith('light');
+      });
+    });
+
+    it('should not call onThemeChange when no theme prop is provided', () => {
+      const onThemeChange = jest.fn();
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider onThemeChange={onThemeChange}>{children}</ThemeProvider>
+      );
+
+      renderHook(() => useTheme(), { wrapper });
+
+      // onThemeChange should not be called when theme prop is not provided
+      expect(onThemeChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('changeTheme function', () => {
+    it('should change theme to dark', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+
+      act(() => {
+        result.current.changeTheme('dark');
+      });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should change theme to light', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('dark');
+
+      act(() => {
+        result.current.changeTheme('light');
+      });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should use device color scheme when theme is set to "system"', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+
+      act(() => {
+        result.current.changeTheme('system');
+      });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should switch to light theme when system theme is set and device is in light mode', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('dark');
+
+      act(() => {
+        result.current.changeTheme('system');
+      });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should handle multiple theme changes', () => {
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+
+      act(() => {
+        result.current.changeTheme('dark');
+      });
+      expect(result.current.theme).toBe('dark');
+
+      act(() => {
+        result.current.changeTheme('light');
+      });
+      expect(result.current.theme).toBe('light');
+
+      act(() => {
+        result.current.changeTheme('system');
+      });
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should respect device color scheme when changing to system theme', () => {
+      // Mock device as dark initially
+      mockedUseDeviceColorScheme.mockReturnValue('dark');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      // Initially should be light (from defaultTheme)
+      expect(result.current.theme).toBe('light');
+
+      // Change to system should use device color scheme (dark)
+      act(() => {
+        result.current.changeTheme('system');
+      });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should update system theme when device color scheme is light', () => {
+      // Mock device as light
+      mockedUseDeviceColorScheme.mockReturnValue('light');
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      // Initially should be dark (from defaultTheme)
+      expect(result.current.theme).toBe('dark');
+
+      // Change to system should use device color scheme (light)
+      act(() => {
+        result.current.changeTheme('system');
+      });
+
+      expect(result.current.theme).toBe('light');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle undefined device color scheme', () => {
+      mockedUseDeviceColorScheme.mockReturnValue(undefined);
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('light');
+    });
+
+    it('should handle null device color scheme', () => {
+      mockedUseDeviceColorScheme.mockReturnValue(null);
+
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should maintain theme stability with same changeTheme callback reference', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result, rerender } = renderHook(() => useTheme(), { wrapper });
+
+      const initialChangeTheme = result.current.changeTheme;
+
+      rerender({});
+
+      // changeTheme should maintain reference stability due to useCallback
+      expect(result.current.changeTheme).toBe(initialChangeTheme);
+    });
+  });
+
+  describe('integration tests', () => {
+    it('should work with nested providers', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">
+          <ThemeProvider defaultTheme="dark">{children}</ThemeProvider>
+        </ThemeProvider>
+      );
+
+      const { result } = renderHook(() => useTheme(), { wrapper });
+
+      // Should use the innermost provider
+      expect(result.current.theme).toBe('dark');
+    });
+
+    it('should maintain theme state across re-renders', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <ThemeProvider defaultTheme="light">{children}</ThemeProvider>
+      );
+
+      const { result, rerender } = renderHook(() => useTheme(), { wrapper });
+
+      act(() => {
+        result.current.changeTheme('dark');
+      });
+      expect(result.current.theme).toBe('dark');
+
+      rerender({});
+      expect(result.current.theme).toBe('dark');
+    });
+  });
+});

package/src/providers/ThemeProvider.tsx

@@ -1,8 +1,77 @@
-import React from 'react';
-import type { ThemeProviderProps } from './types';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+import { useColorScheme as useDeviceColorScheme } from 'react-native';
+import type {
+  ThemeContextType,
+  ThemeProviderProps,
+  ThemeVariants,
+} from './types';
 
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
-  return <>{children}</>;
+/**
+ * Create a ThemeContext with default value null
+ * @type {React.Context<ThemeContextType | null>}
+ */
+const ThemeContext = React.createContext<ThemeContextType | null>(null);
+
+/**
+ * Give access to theme context
+ * @returns {ThemeContextType} The current theme context
+ * @throws Will throw an error if used outside of ThemeProvider
+ * @example
+ * const { theme, changeTheme } = useTheme();
+ * console.log(theme); // 'light' | 'dark' | 'system'
+ */
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+/**
+ * ThemeProvider component to manage and provide theme context
+ * @param {React.ReactNode} children - The child components
+ * @param {ThemeVariants} theme - The current theme ('light', 'dark', 'system')
+ * @param {ThemeVariants} defaultTheme - The default theme if none is provided
+ * @param {(theme: ThemeVariants) => void} onThemeChange - Callback when theme changes
+ * @returns {JSX.Element} The ThemeProvider component
+ *
+ * @example
+ * <ThemeProvider theme="dark" onThemeChange={(theme) => console.log(theme)}>
+ *   <App />
+ * </ThemeProvider>
+ */
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  theme,
+  defaultTheme = 'light',
+  onThemeChange = () => undefined,
+}) => {
+  const deviceColorscheme = useDeviceColorScheme();
+  const [currentTheme, setTheme] = useState<ThemeVariants>(
+    theme || defaultTheme
+  );
+
+  useEffect(() => {
+    onThemeChange && theme && onThemeChange(theme);
+  }, [theme, onThemeChange]);
+
+  const changeTheme = useCallback(
+    (newTheme: ThemeVariants) => {
+      if (newTheme === 'system') {
+        setTheme(deviceColorscheme === 'dark' ? 'dark' : 'light');
+        return;
+      }
+      setTheme(newTheme);
+    },
+    [deviceColorscheme]
+  );
+
+  return (
+    <ThemeContext.Provider value={{ theme: currentTheme, changeTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
 };
 
 export default ThemeProvider;

package/src/providers/types.ts

@@ -1,4 +1,26 @@
+/**
+ * Theme variants type definition
+ */
+export type ThemeVariants = 'light' | 'dark' | 'system';
+
+/**
+ * ThemeProvider component props definition
+ */
 export type ThemeProviderProps = {
   children: React.ReactNode;
-  configuration?: {};
+  theme?: ThemeVariants;
+  defaultTheme?: ThemeVariants;
+
+  //Callback when theme changes
+  onThemeChange?: (theme: ThemeVariants) => void;
+};
+
+/**
+ * Theme context type definition
+ */
+export type ThemeContextType = {
+  theme: ThemeVariants;
+
+  // Actions
+  changeTheme: (theme: ThemeVariants) => void;
 };