react-native-yastools 1.0.1 → 1.0.2

package/README.md

@@ -1,11 +1,17 @@
-# Yastools React Native Utils
+# 🚀 React Native Yastools
 
-[![CI](https://github.com/YassineBenZriouil/react-native-yastools/actions/workflows/ci.yml/badge.svg)](https://github.com/YassineBenZriouil/react-native-yastools/actions/workflows/ci.yml)
-[![npm version](https://badge.fury.io/js/react-native-yastools.svg)](https://www.npmjs.com/package/react-native-yastools)
+A collection of **premium, high-performance** UI components and utilities for React Native. Built for speed, aesthetics, and developer experience.
 
-A collection of reusable React Native utility components.
+## ✨ Features
 
-## Installation
+*   **🎨  Themable:** Fully customizable design system.
+*   **⚡  Performant:** Optimized for high frame rates and smooth interactions.
+*   **📱  Native Feel:** Haptic feedback and native animations baked in.
+*   **🔌  Plug & Play:** Zero-config components ready to drop into your app.
+
+---
+
+## 📦 Installation
 
 ```bash
 npm install react-native-yastools
@@ -13,161 +19,70 @@ npm install react-native-yastools
 yarn add react-native-yastools
 ```
 
-### Peer Dependencies
-
-This package requires the following peer dependencies to be installed in your project:
-
-- `react` >= 17.0.0
-- `react-native` >= 0.64.0
-
-## Components
+> **Note:** Ensure you have `react-native-reanimated` installed if you plan to use advanced animations.
 
-### YasButton
+---
 
-A customizable button component with built-in loading state, debounce functionality, and theming support.
+## 🛠️ Components
 
-#### Basic Usage
+### 🟢 Button
+A highly versatile button with built-in loading states, scaling animations, and debounce protection.
 
 ```tsx
-import { YasButton } from 'react-native-yastools';
-
-const MyComponent = () => {
-  return (
-    <YasButton
-      text="Click Me"
-      onPress={() => console.log('Button pressed!')}
-    />
-  );
-};
+import { Button } from 'react-native-yastools';
+
+<Button 
+  text="Confirm Order"
+  onPress={handleCheckout}
+  primaryColor="#007AFF"
+  animateScale={0.95} // 🪄 Smooth press animation
+  debounceTime={500}  // 🛡️ Prevents double-taps
+  fetching={isLoading}
+/>
 ```
 
-#### With Loading State
+### 💬 ConfirmationPopUp (Modal)
+A beautiful, promise-based confirmation dialog.
 
 ```tsx
-import { YasButton } from 'react-native-yastools';
-
-const MyComponent = () => {
-  const [loading, setLoading] = useState(false);
-
-  const handlePress = async () => {
-    setLoading(true);
-    await someAsyncOperation();
-    setLoading(false);
-  };
-
-  return (
-    <YasButton
-      text="Submit"
-      onPress={handlePress}
-      fetching={loading}
-      loaderColor="#FFFFFF"
-    />
-  );
-};
+import { ConfirmationPopUp } from 'react-native-yastools';
+
+<ConfirmationPopUp
+  visible={isVisible}
+  title="Delete Account?"
+  message="This action cannot be undone."
+  onConfirm={deleteUser}
+  onClose={() => setVisible(false)}
+  confirmText="Delete"
+  cancelText="Keep"
+  loading={isDeleting}
+/>
 ```
 
-#### With Custom Styling
+---
 
-```tsx
-import { YasButton } from 'react-native-yastools';
-
-const MyComponent = () => {
-  return (
-    <YasButton
-      text="Custom Button"
-      onPress={() => {}}
-      primaryColor="#FF6B6B"
-      disabledColor="#CCCCCC"
-      additionalStyle={{
-        width: 200,
-        height: 60,
-        borderRadius: 30,
-      }}
-      textStyle={{
-        fontSize: 18,
-        fontWeight: 'bold',
-      }}
-    />
-  );
-};
-```
+## 🎨 Theme & Utils
 
-#### With Icon
+The library exposes its core theme and interaction helpers:
 
 ```tsx
-import { YasButton } from 'react-native-yastools';
-
-const MyComponent = () => {
-  return (
-    <YasButton
-      text="Settings"
-      icon={require('./assets/settings-icon.png')}
-      onPress={() => navigation.navigate('Settings')}
-    />
-  );
-};
-```
+import { COLORS, preventMultiPress } from 'react-native-yastools';
 
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `onPress` | `() => void` | **Required** | Callback function when button is pressed |
-| `text` | `string` | `undefined` | Text to display on the button |
-| `icon` | `ImageSourcePropType` | `undefined` | Icon to display on the button |
-| `disabled` | `boolean` | `false` | Whether the button is disabled |
-| `fetching` | `boolean` | `false` | Whether to show loading indicator |
-| `additionalStyle` | `StyleProp<ViewStyle>` | `undefined` | Additional styles for the button container |
-| `textStyle` | `StyleProp<TextStyle>` | `undefined` | Custom styles for the button text |
-| `iconStyle` | `StyleProp<ImageStyle>` | `undefined` | Custom styles for the icon |
-| `loaderColor` | `string` | Theme primary | Color of the loading indicator |
-| `primaryColor` | `string` | `#007AFF` | Custom primary/background color |
-| `disabledColor` | `string` | `#E5E5E5` | Custom disabled background color |
-| `debounceTime` | `number` | `1000` | Debounce time in ms to prevent multiple clicks |
-| `activeOpacity` | `number` | `0.8` | Opacity when pressing the button |
-| `testID` | `string` | `undefined` | Test ID for testing purposes |
-
-## Theme Customization
-
-You can import the default theme values to use in your own components:
+// Use standard colors
+const myStyle = { color: COLORS.primary };
 
-```tsx
-import { COLORS, FONT_SIZES, FONT_FAMILY } from 'react-native-yastools';
-
-const styles = StyleSheet.create({
-  container: {
-    backgroundColor: COLORS.primary,
-  },
-  text: {
-    fontSize: FONT_SIZES.f16,
-  },
-});
+// Wrap your own handlers
+const safeHandler = preventMultiPress(() => console.log('Safe!'), 1000);
 ```
 
-## Development
-
-### Running Tests
-
-```bash
-npm test
-
-# Watch mode
-npm run test:watch
-
-# Coverage report
-npm run test:coverage
-```
-
-### Building
-
-```bash
-npm run build
-```
+---
 
-## Contributing
+## 🤝 Contributing
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+1.  Clone the repo
+2.  Run `npm install`
+3.  Test changes with `npm run local-publish`
 
-## License
+---
 
-ISC
+Built with ❤️ by **Yassine Ben Zriouil**.

package/dist/components/BottomTabs/__tests__/BottomTabs.test.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import BottomTabs from '../index';
+// Mock navigation
+const mockNavigate = jest.fn();
+const mockNavigation = {
+    navigate: mockNavigate,
+};
+// Sample tabs for testing
+const sampleTabs = [
+    { name: 'Home', route: 'Home', icon: { uri: 'https://example.com/home.png' } },
+    { name: 'Search', route: 'Search', icon: { uri: 'https://example.com/search.png' } },
+    { name: 'Profile', route: 'Profile', icon: { uri: 'https://example.com/profile.png' } },
+];
+describe('BottomTabs', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    it('renders all tabs correctly', () => {
+        const { getByText } = render(<BottomTabs navigation={mockNavigation} currentRoute="Home" tabs={sampleTabs}/>);
+        expect(getByText('Home')).toBeTruthy();
+        expect(getByText('Search')).toBeTruthy();
+        expect(getByText('Profile')).toBeTruthy();
+    });
+    it('navigates to correct route when tab is pressed', () => {
+        const { getByText } = render(<BottomTabs navigation={mockNavigation} currentRoute="Home" tabs={sampleTabs}/>);
+        fireEvent.press(getByText('Search'));
+        expect(mockNavigate).toHaveBeenCalledWith('Search');
+    });
+    it('calls onTabPress callback when provided', () => {
+        const onTabPressMock = jest.fn();
+        const { getByText } = render(<BottomTabs navigation={mockNavigation} currentRoute="Home" tabs={sampleTabs} onTabPress={onTabPressMock}/>);
+        fireEvent.press(getByText('Profile'));
+        expect(onTabPressMock).toHaveBeenCalledWith('Profile');
+        expect(mockNavigate).toHaveBeenCalledWith('Profile');
+    });
+    it('does not navigate when tab is disabled', () => {
+        const disabledTabs = [
+            { name: 'Home', route: 'Home', icon: { uri: 'https://example.com/home.png' } },
+            { name: 'Search', route: 'Search', icon: { uri: 'https://example.com/search.png' }, disabled: true },
+        ];
+        const { getByText } = render(<BottomTabs navigation={mockNavigation} currentRoute="Home" tabs={disabledTabs}/>);
+        fireEvent.press(getByText('Search'));
+        expect(mockNavigate).not.toHaveBeenCalled();
+    });
+    it('applies custom testID to tabs', () => {
+        const tabsWithTestId = [
+            { name: 'Home', route: 'Home', icon: { uri: 'https://example.com/home.png' }, testID: 'home-tab' },
+        ];
+        const { getByTestId } = render(<BottomTabs navigation={mockNavigation} currentRoute="Home" tabs={tabsWithTestId}/>);
+        expect(getByTestId('home-tab')).toBeTruthy();
+    });
+    it('renders with container testID', () => {
+        const { getByTestId } = render(<BottomTabs navigation={mockNavigation} currentRoute="Home" tabs={sampleTabs} testID="bottom-tabs"/>);
+        expect(getByTestId('bottom-tabs')).toBeTruthy();
+    });
+    it('renders empty when no tabs are provided', () => {
+        const { queryByText } = render(<BottomTabs navigation={mockNavigation} currentRoute="Home" tabs={[]}/>);
+        expect(queryByText('Home')).toBeNull();
+    });
+    it('handles single tab correctly', () => {
+        const singleTab = [
+            { name: 'Home', route: 'Home', icon: { uri: 'https://example.com/home.png' } },
+        ];
+        const { getByText, queryByText } = render(<BottomTabs navigation={mockNavigation} currentRoute="Home" tabs={singleTab}/>);
+        expect(getByText('Home')).toBeTruthy();
+        expect(queryByText('Search')).toBeNull();
+    });
+});

package/dist/components/BottomTabs/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { BottomTabsProps, TabItem } from './type';
+export type { BottomTabsProps, TabItem };
+declare const _default: React.NamedExoticComponent<BottomTabsProps>;
+export default _default;

package/dist/components/BottomTabs/index.js

@@ -0,0 +1,82 @@
+import React, { memo, useCallback } from 'react';
+import { TouchableOpacity, Image, View, Text } from 'react-native';
+import styles from './styles';
+import { COLORS } from '../../theme';
+/**
+ * BottomTabs - A customizable bottom navigation component for React Native
+ *
+ * @example
+ * ```tsx
+ * import { BottomTabs } from 'react-native-yastools';
+ *
+ * const tabs = [
+ *   { name: 'Home', route: 'Home', icon: require('./icons/home.png') },
+ *   { name: 'Search', route: 'Search', icon: require('./icons/search.png') },
+ *   { name: 'Profile', route: 'Profile', icon: require('./icons/profile.png') },
+ * ];
+ *
+ * <BottomTabs
+ *   navigation={navigation}
+ *   currentRoute="Home"
+ *   tabs={tabs}
+ *   activeColor="#007AFF"
+ * />
+ * ```
+ */
+const BottomTabs = ({ navigation, currentRoute, tabs, containerStyle, tabItemStyle, activeTabItemStyle, textStyle, activeTextStyle, iconStyle, activeIconStyle, activeColor, inactiveColor, onTabPress, activeOpacity = 0.8, testID, }) => {
+    const handleTabPress = useCallback((tab) => {
+        if (tab.disabled)
+            return;
+        // Call custom callback if provided
+        if (onTabPress) {
+            onTabPress(tab.route);
+        }
+        // Navigate to the route
+        navigation.navigate(tab.route);
+    }, [navigation, onTabPress]);
+    const renderTab = useCallback((tab, index) => {
+        const isActive = currentRoute === tab.route;
+        // Determine icon tint color
+        const iconTintColor = isActive
+            ? activeColor || COLORS.primary
+            : inactiveColor || COLORS.black;
+        // Determine text color
+        const textColor = isActive
+            ? activeColor || COLORS.primary
+            : inactiveColor || COLORS.black;
+        // Determine which icon to use
+        const iconSource = isActive && tab.activeIcon ? tab.activeIcon : tab.icon;
+        // Merge styles based on active state
+        const tabStyle = isActive
+            ? [styles.navItemActive, tabItemStyle, activeTabItemStyle]
+            : [styles.navItem, tabItemStyle];
+        const tabTextStyle = isActive
+            ? [styles.navTextActive, { color: textColor }, textStyle, activeTextStyle]
+            : [styles.navText, { color: textColor }, textStyle];
+        const tabIconStyle = isActive
+            ? [styles.navIconActive, { tintColor: iconTintColor }, iconStyle, activeIconStyle]
+            : [styles.navIcon, { tintColor: iconTintColor }, iconStyle];
+        return (<TouchableOpacity key={`tab-${tab.route}-${index}`} style={tabStyle} activeOpacity={activeOpacity} onPress={() => handleTabPress(tab)} disabled={tab.disabled} testID={tab.testID || `tab-${tab.route}`}>
+          <Image resizeMode="contain" source={iconSource} style={tabIconStyle}/>
+          <Text style={tabTextStyle} numberOfLines={1}>
+            {tab.name}
+          </Text>
+        </TouchableOpacity>);
+    }, [
+        currentRoute,
+        activeColor,
+        inactiveColor,
+        tabItemStyle,
+        activeTabItemStyle,
+        textStyle,
+        activeTextStyle,
+        iconStyle,
+        activeIconStyle,
+        activeOpacity,
+        handleTabPress,
+    ]);
+    return (<View style={[styles.BottomTabsContainer, containerStyle]} testID={testID}>
+      {tabs.map(renderTab)}
+    </View>);
+};
+export default memo(BottomTabs);

package/dist/components/BottomTabs/styles.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Default styles for the BottomTabs component
+ * Uses standard React Native StyleSheet for maximum compatibility
+ */
+declare const _default: {
+    BottomTabsContainer: {
+        width: "100%";
+        flexDirection: "row";
+        backgroundColor: string;
+        paddingBottom: number;
+    };
+    navItem: {
+        flex: number;
+        justifyContent: "flex-end";
+        alignItems: "center";
+        paddingVertical: number;
+    };
+    navItemActive: {
+        flex: number;
+        justifyContent: "flex-end";
+        alignItems: "center";
+        paddingVertical: number;
+    };
+    navText: {
+        fontFamily: string;
+        fontSize: number;
+        marginTop: number;
+    };
+    navTextActive: {
+        fontFamily: string;
+        fontSize: number;
+        marginTop: number;
+    };
+    navIcon: {
+        width: number;
+        height: number;
+    };
+    navIconActive: {
+        width: number;
+        height: number;
+    };
+};
+export default _default;

package/dist/components/BottomTabs/styles.js

@@ -0,0 +1,44 @@
+import { StyleSheet, Platform } from 'react-native';
+import COLORS, { FONT_SIZES, FONT_FAMILY } from '../../theme';
+/**
+ * Default styles for the BottomTabs component
+ * Uses standard React Native StyleSheet for maximum compatibility
+ */
+export default StyleSheet.create({
+    BottomTabsContainer: {
+        width: '100%',
+        flexDirection: 'row',
+        backgroundColor: COLORS.white,
+        paddingBottom: Platform.OS === 'ios' ? 10 : 0,
+    },
+    navItem: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        paddingVertical: 8,
+    },
+    navItemActive: {
+        flex: 1,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        paddingVertical: 8,
+    },
+    navText: {
+        fontFamily: FONT_FAMILY.InterRegular,
+        fontSize: FONT_SIZES.f11,
+        marginTop: 5,
+    },
+    navTextActive: {
+        fontFamily: FONT_FAMILY.InterRegular,
+        fontSize: FONT_SIZES.f11,
+        marginTop: 5,
+    },
+    navIcon: {
+        width: 20,
+        height: 20,
+    },
+    navIconActive: {
+        width: 20,
+        height: 20,
+    },
+});

package/dist/components/BottomTabs/type.d.ts

@@ -0,0 +1,53 @@
+import { StyleProp, ViewStyle, TextStyle, ImageSourcePropType, ImageStyle } from 'react-native';
+/**
+ * Represents a single tab item in the BottomTabs component
+ */
+export interface TabItem {
+    /** Display name shown below the icon */
+    name: string;
+    /** Route name to navigate to when tab is pressed */
+    route: string;
+    /** Icon to display for the tab (required) */
+    icon: ImageSourcePropType;
+    /** Optional: Active state icon (if different from default) */
+    activeIcon?: ImageSourcePropType;
+    /** Optional: Whether this tab is disabled */
+    disabled?: boolean;
+    /** Optional: Test ID for testing purposes */
+    testID?: string;
+}
+/**
+ * Props for the BottomTabs component
+ */
+export interface BottomTabsProps {
+    /** Navigation object from React Navigation */
+    navigation: any;
+    /** Currently active route name */
+    currentRoute: string;
+    /** Array of tab items to render */
+    tabs: TabItem[];
+    /** Optional: Custom styles for the container */
+    containerStyle?: StyleProp<ViewStyle>;
+    /** Optional: Custom styles for tab items */
+    tabItemStyle?: StyleProp<ViewStyle>;
+    /** Optional: Custom styles for active tab items */
+    activeTabItemStyle?: StyleProp<ViewStyle>;
+    /** Optional: Custom styles for tab text */
+    textStyle?: StyleProp<TextStyle>;
+    /** Optional: Custom styles for active tab text */
+    activeTextStyle?: StyleProp<TextStyle>;
+    /** Optional: Custom styles for tab icons */
+    iconStyle?: StyleProp<ImageStyle>;
+    /** Optional: Custom styles for active tab icons */
+    activeIconStyle?: StyleProp<ImageStyle>;
+    /** Optional: Active color for icons and text (overrides theme) */
+    activeColor?: string;
+    /** Optional: Inactive color for icons and text (overrides theme) */
+    inactiveColor?: string;
+    /** Optional: Callback when a tab is pressed (receives route name) */
+    onTabPress?: (route: string) => void;
+    /** Optional: Active opacity when pressing tabs (default: 0.8) */
+    activeOpacity?: number;
+    /** Test ID for testing purposes */
+    testID?: string;
+}

package/dist/components/BottomTabs/type.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Button/__tests__/Button.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Button/__tests__/{YasButton.test.js → Button.test.js}

@@ -1,31 +1,31 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
-import YasButton from '../index';
-describe('YasButton', () => {
+import Button from '../index';
+describe('Button', () => {
     it('renders correctly with text', () => {
-        const { getByText } = render(<YasButton text="Press Me" onPress={() => { }}/>);
+        const { getByText } = render(<Button text="Press Me" onPress={() => { }}/>);
         expect(getByText('Press Me')).toBeTruthy();
     });
     it('calls onPress when pressed', () => {
         const onPressMock = jest.fn();
-        const { getByText } = render(<YasButton text="Press Me" onPress={onPressMock}/>);
+        const { getByText } = render(<Button text="Press Me" onPress={onPressMock}/>);
         fireEvent.press(getByText('Press Me'));
         expect(onPressMock).toHaveBeenCalledTimes(1);
     });
     it('does not call onPress when disabled', () => {
         const onPressMock = jest.fn();
-        const { getByText } = render(<YasButton text="Press Me" onPress={onPressMock} disabled/>);
+        const { getByText } = render(<Button text="Press Me" onPress={onPressMock} disabled/>);
         fireEvent.press(getByText('Press Me'));
         expect(onPressMock).not.toHaveBeenCalled();
     });
     it('shows loading indicator when fetching', () => {
-        const { queryByText, getByTestId } = render(<YasButton text="Press Me" onPress={() => { }} fetching testID="button"/>);
+        const { queryByText, getByTestId } = render(<Button text="Press Me" onPress={() => { }} fetching testID="button"/>);
         expect(queryByText('Press Me')).toBeNull();
     });
     it('debounces multiple rapid presses', () => {
         jest.useFakeTimers();
         const onPressMock = jest.fn();
-        const { getByText } = render(<YasButton text="Press Me" onPress={onPressMock} debounceTime={1000}/>);
+        const { getByText } = render(<Button text="Press Me" onPress={onPressMock} debounceTime={1000}/>);
         const button = getByText('Press Me');
         fireEvent.press(button);
         fireEvent.press(button);
@@ -37,7 +37,7 @@ describe('YasButton', () => {
         jest.useRealTimers();
     });
     it('applies custom primary color', () => {
-        const { getByTestId } = render(<YasButton text="Press Me" onPress={() => { }} primaryColor="#FF0000" testID="custom-button"/>);
+        const { getByTestId } = render(<Button text="Press Me" onPress={() => { }} primaryColor="#FF0000" testID="custom-button"/>);
         const button = getByTestId('custom-button');
         const flattenedStyle = Array.isArray(button.props.style)
             ? button.props.style.flat().reduce((acc, style) => ({ ...acc, ...style }), {})
@@ -46,7 +46,7 @@ describe('YasButton', () => {
     });
     it('renders without text when only icon is provided', () => {
         const mockIcon = { uri: 'https://example.com/icon.png' };
-        const { queryByText } = render(<YasButton onPress={() => { }} icon={mockIcon}/>);
+        const { queryByText } = render(<Button onPress={() => { }} icon={mockIcon}/>);
         expect(queryByText('Press Me')).toBeNull();
     });
 });

package/dist/components/Button/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { YasButtonProps } from './type';
-export type { YasButtonProps };
-declare const _default: React.NamedExoticComponent<YasButtonProps>;
+import { ButtonProps } from './type';
+export type { ButtonProps };
+declare const _default: React.NamedExoticComponent<ButtonProps>;
 export default _default;