react-native-yastools 1.0.2 → 1.0.4

package/README.md

@@ -1,17 +1,17 @@
-# 🚀 React Native Yastools
+# React Native Yastools
 
 A collection of **premium, high-performance** UI components and utilities for React Native. Built for speed, aesthetics, and developer experience.
 
-## ✨ Features
+## Features
 
-*   **🎨  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.
+*   **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
+## Installation
 
 ```bash
 npm install react-native-yastools
@@ -23,9 +23,9 @@ yarn add react-native-yastools
 
 ---
 
-## 🛠️ Components
+## Components
 
-### 🟢 Button
+### Button
 A highly versatile button with built-in loading states, scaling animations, and debounce protection.
 
 ```tsx
@@ -35,13 +35,13 @@ import { Button } from 'react-native-yastools';
   text="Confirm Order"
   onPress={handleCheckout}
   primaryColor="#007AFF"
-  animateScale={0.95} // 🪄 Smooth press animation
-  debounceTime={500}  // 🛡️ Prevents double-taps
+  animateScale={0.95} // Smooth press animation
+  debounceTime={500}  // Prevents double-taps
   fetching={isLoading}
 />
 ```
 
-### 💬 ConfirmationPopUp (Modal)
+### ConfirmationPopUp
 A beautiful, promise-based confirmation dialog.
 
 ```tsx
@@ -59,9 +59,43 @@ import { ConfirmationPopUp } from 'react-native-yastools';
 />
 ```
 
+### CheckBox
+A customizable checkbox with label support and flexible styling.
+
+```tsx
+import { CheckBox } from 'react-native-yastools';
+
+<CheckBox
+  checked={isChecked}
+  onToggle={(val) => setIsChecked(val)}
+  label="I agree to the Terms"
+  activeColor="#00E676"
+  disabled={false}
+/>
+```
+
+### BottomTabs
+A customizable bottom navigation bar to easily manage app routing.
+
+```tsx
+import { BottomTabs } from 'react-native-yastools';
+
+const tabs = [
+  { name: 'Home', route: 'Home', icon: require('./assets/home.png') },
+  { name: 'Profile', route: 'Profile', icon: require('./assets/profile.png') },
+];
+
+<BottomTabs
+  navigation={navigation} // React Navigation prop
+  currentRoute="Home"
+  tabs={tabs}
+  activeColor="#007AFF"
+/>
+```
+
 ---
 
-## 🎨 Theme & Utils
+## Theme & Utils
 
 The library exposes its core theme and interaction helpers:
 
@@ -77,12 +111,11 @@ const safeHandler = preventMultiPress(() => console.log('Safe!'), 1000);
 
 ---
 
-## 🤝 Contributing
+Built by [**Yassine Ben Zriouil**](https://ybz.vercel.app/).
+
+
+## Contributing
 
 1.  Clone the repo
 2.  Run `npm install`
 3.  Test changes with `npm run local-publish`
-
----
-
-Built with ❤️ by **Yassine Ben Zriouil**.

package/dist/components/Button/index.js

@@ -3,7 +3,7 @@ import { TouchableOpacity, Text, ActivityIndicator, View, Image, Animated, } fro
 // Internal styles and theme
 import styles from './styles';
 import COLORS from '../../theme';
-import { preventMultiPress, usePressScale } from '../../interactions';
+import { preventMultiPress, usePressScale } from '../../utils/interactions';
 const AnimatedTouchableOpacity = Animated.createAnimatedComponent(TouchableOpacity);
 /**
  * Button - A customizable button component for React Native

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

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

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import CheckBox from '../index';
+describe('CheckBox', () => {
+    it('renders correctly', () => {
+        const { getByTestId } = render(<CheckBox checked={false} onToggle={() => { }} testID="checkbox"/>);
+        expect(getByTestId('checkbox')).toBeTruthy();
+    });
+    it('displays label when provided', () => {
+        const { getByText } = render(<CheckBox checked={false} onToggle={() => { }} label="Accept Terms"/>);
+        expect(getByText('Accept Terms')).toBeTruthy();
+    });
+    it('calls onToggle when pressed', () => {
+        const onToggleMock = jest.fn();
+        const { getByTestId } = render(<CheckBox checked={false} onToggle={onToggleMock} testID="checkbox"/>);
+        fireEvent.press(getByTestId('checkbox'));
+        expect(onToggleMock).toHaveBeenCalledWith(true);
+        expect(onToggleMock).toHaveBeenCalledTimes(1);
+    });
+    it('calls onToggle with false when checked is true', () => {
+        const onToggleMock = jest.fn();
+        const { getByTestId } = render(<CheckBox checked={true} onToggle={onToggleMock} testID="checkbox"/>);
+        fireEvent.press(getByTestId('checkbox'));
+        expect(onToggleMock).toHaveBeenCalledWith(false);
+    });
+    it('does not call onToggle when disabled', () => {
+        const onToggleMock = jest.fn();
+        const { getByTestId } = render(<CheckBox checked={false} onToggle={onToggleMock} disabled testID="checkbox"/>);
+        fireEvent.press(getByTestId('checkbox'));
+        expect(onToggleMock).not.toHaveBeenCalled();
+    });
+    it('renders checked state correctly', () => {
+        // This is a visual test, but we can verify props/styles if needed, 
+        // or just rely on the component integration. 
+        // In React Native testing library, verifying styles is possible but often brittle.
+        // We'll trust the logic verification above.
+        const { getByTestId } = render(<CheckBox checked={true} onToggle={() => { }} testID="checkbox"/>);
+        expect(getByTestId('checkbox')).toBeTruthy();
+    });
+});

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

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

package/dist/components/CheckBox/index.js

@@ -0,0 +1,32 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, Image, View, Text } from 'react-native';
+import styles from './styles';
+import CheckIcon from '../../assets/imgs/whiteCheck.png';
+import COLORS from '../../theme';
+/**
+ * CheckBox - A customizable checkbox component
+ */
+const CheckBox = ({ checked = false, onToggle, label, disabled = false, activeColor = COLORS.primary, inactiveColor = COLORS.gray, checkColor, containerStyle, labelStyle, boxStyle, testID, }) => {
+    const handlePress = () => {
+        if (!disabled && onToggle) {
+            onToggle(!checked);
+        }
+    };
+    const boxStyles = [
+        styles.box,
+        !checked && { borderColor: inactiveColor },
+        checked && styles.checkedBox,
+        checked && { backgroundColor: activeColor, borderColor: activeColor },
+        disabled && styles.disabledBox,
+        boxStyle,
+    ];
+    return (<TouchableOpacity style={[styles.container, containerStyle]} onPress={handlePress} activeOpacity={0.8} disabled={disabled} testID={testID}>
+      <View style={boxStyles}>
+        {checked && (<Image source={CheckIcon} style={[styles.icon, checkColor ? { tintColor: checkColor } : undefined]}/>)}
+      </View>
+      {label && (<Text style={[styles.label, disabled && styles.disabledLabel, labelStyle]}>
+          {label}
+        </Text>)}
+    </TouchableOpacity>);
+};
+export default memo(CheckBox);

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

@@ -0,0 +1,48 @@
+declare const styles: {
+    container: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    touchable: {
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    box: {
+        width: number;
+        height: number;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+    };
+    checkedBox: {
+        width: number;
+        height: number;
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+    };
+    disabledBox: {
+        backgroundColor: string;
+        borderColor: string;
+    };
+    icon: {
+        width: number;
+        height: number;
+        resizeMode: "contain";
+    };
+    label: {
+        marginLeft: number;
+        fontSize: number;
+        color: string;
+    };
+    disabledLabel: {
+        color: string;
+    };
+};
+export default styles;

package/dist/components/CheckBox/styles.js

@@ -0,0 +1,50 @@
+import { StyleSheet } from 'react-native';
+import COLORS, { FONT_SIZES } from '../../theme';
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    touchable: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    box: {
+        width: 24,
+        height: 24,
+        borderWidth: 1,
+        borderColor: COLORS.gray,
+        borderRadius: 5,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: COLORS.white,
+    },
+    checkedBox: {
+        width: 24,
+        height: 24,
+        borderWidth: 1,
+        borderColor: COLORS.primary,
+        borderRadius: 5,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: COLORS.primary,
+    },
+    disabledBox: {
+        backgroundColor: COLORS.grayBg,
+        borderColor: COLORS.gray,
+    },
+    icon: {
+        width: 16,
+        height: 16,
+        resizeMode: 'contain',
+    },
+    label: {
+        marginLeft: 10,
+        fontSize: FONT_SIZES.f16 || 16,
+        color: COLORS.black,
+    },
+    disabledLabel: {
+        color: COLORS.gray,
+    },
+});
+export default styles;

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

@@ -0,0 +1,47 @@
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+export interface CheckBoxProps {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked: boolean;
+    /**
+     * Callback function called when the checkbox is toggled
+     */
+    onToggle: (checked: boolean) => void;
+    /**
+     * Optional label text to display next to the checkbox
+     */
+    label?: string;
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Color of the box when checked (defaults to theme primary)
+     */
+    activeColor?: string;
+    /**
+     * Color of the box when unchecked (defaults to theme lightGray or border color)
+     */
+    inactiveColor?: string;
+    /**
+     * Color of the checkmark icon (defaults to white)
+     */
+    checkColor?: string;
+    /**
+     * Additional style for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Additional style for the label text
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Additional style for the checkbox square
+     */
+    boxStyle?: StyleProp<ViewStyle>;
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+}

package/dist/components/CheckBox/type.js

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

package/dist/index.d.ts

@@ -4,5 +4,7 @@ export { default as BottomTabs } from './components/BottomTabs';
 export type { BottomTabsProps, TabItem } from './components/BottomTabs';
 export { default as ConfirmationPopUp } from './components/ConfirmationPopUp';
 export type { ConfirmationPopUpProps } from './components/ConfirmationPopUp';
+export { default as CheckBox } from './components/CheckBox';
+export type { CheckBoxProps } from './components/CheckBox/type';
 export { default as COLORS, FONT_FAMILY, FONT_SIZES } from './theme';
-export * from './interactions';
+export * from './utils/interactions';

package/dist/index.js

@@ -2,7 +2,8 @@
 export { default as Button } from './components/Button/index';
 export { default as BottomTabs } from './components/BottomTabs';
 export { default as ConfirmationPopUp } from './components/ConfirmationPopUp';
+export { default as CheckBox } from './components/CheckBox';
 // Theme utilities (for customization)
 export { default as COLORS, FONT_FAMILY, FONT_SIZES } from './theme';
 // Utils
-export * from './interactions';
+export * from './utils/interactions';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-yastools",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,6 +25,10 @@
   "author": "",
   "license": "ISC",
   "description": "React Native Utility Files and Utility Components ",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YassineBenZriouil/react-native-yastools"
+  },
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-native": ">=0.64.0"
@@ -82,4 +86,4 @@
       "!src/**/*.d.ts"
     ]
   }
-}
+}

package/src/components/Button/index.tsx

@@ -14,7 +14,7 @@ import {
 import styles from './styles';
 import COLORS from '../../theme';
 import { ButtonProps } from './type';
-import { preventMultiPress, usePressScale } from '../../interactions';
+import { preventMultiPress, usePressScale } from '../../utils/interactions';
 
 export type { ButtonProps };
 
@@ -79,7 +79,7 @@ const Button: React.FC<ButtonProps> = ({
     !disabled && primaryColor && { backgroundColor: primaryColor },
     disabled && disabledColor && { backgroundColor: disabledColor },
     // Support both prop names for backwards compatibility
-    additionalStyle 
+    additionalStyle
   ];
 
   // Combine animated style
@@ -92,7 +92,7 @@ const Button: React.FC<ButtonProps> = ({
       onPressOut={isAnimated ? handlePressOut : undefined}
       activeOpacity={activeOpacity}
       disabled={disabled || fetching}
-      style={[animatedStyle]} 
+      style={[animatedStyle]}
     >
       <View style={containerStyle} testID={testID}>
         {fetching ? (

package/src/components/CheckBox/__tests__/CheckBox.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import CheckBox from '../index';
+
+describe('CheckBox', () => {
+    it('renders correctly', () => {
+        const { getByTestId } = render(
+            <CheckBox checked={false} onToggle={() => { }} testID="checkbox" />
+        );
+        expect(getByTestId('checkbox')).toBeTruthy();
+    });
+
+    it('displays label when provided', () => {
+        const { getByText } = render(
+            <CheckBox checked={false} onToggle={() => { }} label="Accept Terms" />
+        );
+        expect(getByText('Accept Terms')).toBeTruthy();
+    });
+
+    it('calls onToggle when pressed', () => {
+        const onToggleMock = jest.fn();
+        const { getByTestId } = render(
+            <CheckBox checked={false} onToggle={onToggleMock} testID="checkbox" />
+        );
+
+        fireEvent.press(getByTestId('checkbox'));
+        expect(onToggleMock).toHaveBeenCalledWith(true);
+        expect(onToggleMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onToggle with false when checked is true', () => {
+        const onToggleMock = jest.fn();
+        const { getByTestId } = render(
+            <CheckBox checked={true} onToggle={onToggleMock} testID="checkbox" />
+        );
+
+        fireEvent.press(getByTestId('checkbox'));
+        expect(onToggleMock).toHaveBeenCalledWith(false);
+    });
+
+    it('does not call onToggle when disabled', () => {
+        const onToggleMock = jest.fn();
+        const { getByTestId } = render(
+            <CheckBox checked={false} onToggle={onToggleMock} disabled testID="checkbox" />
+        );
+
+        fireEvent.press(getByTestId('checkbox'));
+        expect(onToggleMock).not.toHaveBeenCalled();
+    });
+
+    it('renders checked state correctly', () => {
+        // This is a visual test, but we can verify props/styles if needed, 
+        // or just rely on the component integration. 
+        // In React Native testing library, verifying styles is possible but often brittle.
+        // We'll trust the logic verification above.
+        const { getByTestId } = render(
+            <CheckBox checked={true} onToggle={() => { }} testID="checkbox" />
+        );
+        expect(getByTestId('checkbox')).toBeTruthy();
+    });
+});

package/src/components/CheckBox/index.tsx

@@ -0,0 +1,64 @@
+import React, { memo } from 'react';
+import { TouchableOpacity, Image, View, Text, ViewStyle } from 'react-native';
+import styles from './styles';
+import CheckIcon from '../../assets/imgs/whiteCheck.png';
+import COLORS from '../../theme';
+import { CheckBoxProps } from './type';
+
+/**
+ * CheckBox - A customizable checkbox component
+ */
+const CheckBox: React.FC<CheckBoxProps> = ({
+  checked = false,
+  onToggle,
+  label,
+  disabled = false,
+  activeColor = COLORS.primary,
+  inactiveColor = COLORS.gray,
+  checkColor,
+  containerStyle,
+  labelStyle,
+  boxStyle,
+  testID,
+}) => {
+  const handlePress = () => {
+    if (!disabled && onToggle) {
+      onToggle(!checked);
+    }
+  };
+
+  const boxStyles: ViewStyle[] = [
+    styles.box,
+    !checked && { borderColor: inactiveColor },
+    checked && styles.checkedBox,
+    checked && { backgroundColor: activeColor, borderColor: activeColor },
+    disabled && styles.disabledBox,
+    boxStyle as ViewStyle,
+  ];
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, containerStyle]}
+      onPress={handlePress}
+      activeOpacity={0.8}
+      disabled={disabled}
+      testID={testID}
+    >
+      <View style={boxStyles}>
+        {checked && (
+          <Image
+            source={CheckIcon}
+            style={[styles.icon, checkColor ? { tintColor: checkColor } : undefined]}
+          />
+        )}
+      </View>
+      {label && (
+        <Text style={[styles.label, disabled && styles.disabledLabel, labelStyle]}>
+          {label}
+        </Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+export default memo(CheckBox);

package/src/components/CheckBox/styles.ts

@@ -0,0 +1,54 @@
+import { StyleSheet } from 'react-native';
+import COLORS, { FONT_SIZES } from '../../theme';
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  touchable: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  box: {
+    width: 24,
+    height: 24,
+    borderWidth: 1,
+    borderColor: COLORS.gray,
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.white,
+  },
+  checkedBox: {
+    width: 24,
+    height: 24,
+    borderWidth: 1,
+    borderColor: COLORS.primary,
+    borderRadius: 5,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.primary,
+  },
+  disabledBox: {
+    backgroundColor: COLORS.grayBg,
+    borderColor: COLORS.gray,
+  },
+  icon: {
+    width: 16,
+    height: 16,
+    resizeMode: 'contain',
+  },
+  label: {
+    marginLeft: 10,
+    fontSize: FONT_SIZES.f16 || 16,
+    color: COLORS.black,
+  },
+  disabledLabel: {
+    color: COLORS.gray,
+  },
+});
+
+export default styles;
+
+

package/src/components/CheckBox/type.ts

@@ -0,0 +1,58 @@
+import { StyleProp, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+
+export interface CheckBoxProps {
+    /**
+     * Whether the checkbox is checked
+     */
+    checked: boolean;
+
+    /**
+     * Callback function called when the checkbox is toggled
+     */
+    onToggle: (checked: boolean) => void;
+
+    /**
+     * Optional label text to display next to the checkbox
+     */
+    label?: string;
+
+    /**
+     * Whether the checkbox is disabled
+     */
+    disabled?: boolean;
+
+    /**
+     * Color of the box when checked (defaults to theme primary)
+     */
+    activeColor?: string;
+
+    /**
+     * Color of the box when unchecked (defaults to theme lightGray or border color)
+     */
+    inactiveColor?: string;
+
+    /**
+     * Color of the checkmark icon (defaults to white)
+     */
+    checkColor?: string;
+
+    /**
+     * Additional style for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Additional style for the label text
+     */
+    labelStyle?: StyleProp<TextStyle>;
+
+    /**
+     * Additional style for the checkbox square
+     */
+    boxStyle?: StyleProp<ViewStyle>;
+
+    /**
+     * Test ID for testing
+     */
+    testID?: string;
+}

package/src/index.ts

@@ -1,5 +1,5 @@
 // Components
-export {default as Button } from './components/Button/index';
+export { default as Button } from './components/Button/index';
 export type { ButtonProps } from './components/Button';
 
 export { default as BottomTabs } from './components/BottomTabs';
@@ -8,9 +8,12 @@ export type { BottomTabsProps, TabItem } from './components/BottomTabs';
 export { default as ConfirmationPopUp } from './components/ConfirmationPopUp';
 export type { ConfirmationPopUpProps } from './components/ConfirmationPopUp';
 
+export { default as CheckBox } from './components/CheckBox';
+export type { CheckBoxProps } from './components/CheckBox/type';
+
 
 // Theme utilities (for customization)
 export { default as COLORS, FONT_FAMILY, FONT_SIZES } from './theme';
 
 // Utils
-export * from './interactions';
+export * from './utils/interactions';