V3.0.1 stable

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "eslint.options": {},
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
+    "source.fixAll.eslint": "always"
   },
   "eslint.run": "onSave",
   "editor.defaultFormatter": "esbenp.prettier-vscode",

lefthook.yml

@@ -0,0 +1,42 @@
+# EXAMPLE USAGE:
+#
+#   Refer for explanation to following link:
+#   https://evilmartians.github.io/lefthook/configuration/
+#
+# pre-push:
+#   jobs:
+#     - name: packages audit
+#       tags:
+#         - frontend
+#         - security
+#       run: yarn audit
+#
+#     - name: gems audit
+#       tags:
+#         - backend
+#         - security
+#       run: bundle audit
+#
+# pre-commit:
+#   parallel: true
+#   jobs:
+#     - run: yarn eslint {staged_files}
+#       glob: "*.{js,ts,jsx,tsx}"
+#
+#     - name: rubocop
+#       glob: "*.rb"
+#       exclude:
+#         - config/application.rb
+#         - config/routes.rb
+#       run: bundle exec rubocop --force-exclusion {all_files}
+#
+#     - name: govet
+#       files: git ls-files -m
+#       glob: "*.go"
+#       run: go vet {files}
+#
+#     - script: "hello.js"
+#       runner: node
+#
+#     - script: "hello.go"
+#       runner: go run

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindinventory/react-native-boilerplate",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "React Native Template",
   "repository": "https://github.com/Mindinventory/react-native-boilerplate.git",
   "author": "Mindinventory",
@@ -9,8 +9,7 @@
   "private": false,
   "scripts": {
     "android": "cd MIBoilerplate/ && npx react-native run-android",
-    "ios": "cd MIBoilerplate/ && npx react-native run-ios",
-    "prepare": "husky"
+    "ios": "cd MIBoilerplate/ && npx react-native run-ios"
   },
   "bin": {
     "@mindinventory/react-native-boilerplate": "./bin/index.js"
@@ -39,7 +38,7 @@
   "devDependencies": {
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "husky": "^9.1.6"
+    "lefthook": "^1.10.4"
   },
   "dependencies": {
     "chalk": "^5.3.0",

script.js

@@ -12,12 +12,13 @@ const installDependencies = () => {
   );
 
   console.log("Installing dependencies... 🛠️\n");
+  console.log("dependencies Installation started... 🛠️\n");
   execSync(`yarn`, { stdio: "inherit" });
   console.log("Dependencies installed successfully. 🚀\n");
 
-  console.log("bundle Installing 🛠️\n");
-  execSync(`bundle`, { stdio: "inherit" });
-  console.log("bundle installed successfully.🚀\n");
+  // console.log("bundle Installing 🛠️\n");
+  // execSync(`bundle`, { stdio: "inherit" });
+  // console.log("bundle installed successfully.🚀\n");
 
   console.log("pod-install Installing 🛠️\n");
   execSync(`npx pod-install`, { stdio: "inherit" });
@@ -60,21 +61,27 @@ yarn-error.log*
       stdio: "inherit",
       shell: true,
     });
+
+    console.log("Installing lefthook... 🛠️\n");
+    execSync(`npx lefthook install`, { stdio: "inherit" });
+    console.log("lefthook installed successfully. 🚀\n");
   } catch (error) {
     console.error(`🚨 An error occurred while initializing git: ${error}`);
   }
 };
 
 const main = async () => {
-  execSync("git init", { stdio: "inherit" });
-  installDependencies();
-  initializeGit();
+  try {
+    installDependencies();
+    execSync("git init", { stdio: "inherit" });
+    initializeGit();
+  } catch (error) {
+    console.error(`🚨 Critical error: ${error}`);
+    process.exit(1);
+  }
 };
 
-new Promise((resolve) => {
-  main();
-  resolve();
-})
+main()
   .then(() => {
     console.log(
       "- 🎉  Congrats! Your project is ready with @mindinventory/react-native-boilerplate! 🎉\n"
@@ -89,6 +96,7 @@ new Promise((resolve) => {
     console.log(
       "- ⭐ If you love this boilerplate, give us a star, you will be a ray of sunshine in our lives :) https://github.com/Mindinventory/react-native-boilerplate\n"
     );
+    console.log("completed :::::::: Mindinventory React native boilerplate 🚀");
   })
   .catch((error) => {
     console.error(`🚨 An error occurred with post init script: ${error}`);

src/gitHandler.js

@@ -1,12 +1,16 @@
 const { exec } = require('child_process');
 var util = require('util')
+const {loading} = require("./helper");
 
 const execAsync = util.promisify(exec)
 
 async function gitInitialize() {
   await execAsync("git init", { stdio: "inherit" });
   await execAsync("git add .");
   await execAsync(`git commit -m 'Initial commit'`);
+  let installingLeftHook = await loading('🛠️\u00A0Installing LeftHook...')
+  await execAsync(`npx lefthook install`);
+  installingLeftHook.succeed("LeftHook installed successfully");
 }
 
 module.exports = {

templates/CliTemplate/blueprints/Button/Button.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { memo } from 'react';
 import {
+  ActivityIndicator,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -13,23 +14,33 @@ import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withSpring,
+  WithSpringConfig,
 } from 'react-native-reanimated';
 
 import { useColor } from '@src/context';
 import { moderateScale, Palette, scaleHeight } from '@src/utils';
 
 import { Text } from '../Text/Text';
 
-const AnimatedButtonComponent =
-  Animated.createAnimatedComponent(TouchableOpacity);
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
+
+type ButtonVariant = 'standard' | 'outlined';
 
 interface ExtraButtonProps {
+  variant?: ButtonVariant; // Outlined or standard
   buttonContainerStyle?: StyleProp<ViewStyle>;
   titleContainerStyle?: StyleProp<ViewStyle>;
   titleStyle?: StyleProp<TextStyle>;
   title?: React.ReactNode;
   rightIcon?: JSX.Element;
   leftIcon?: JSX.Element;
+  activeOpacity?: number;
+  springConfig?: WithSpringConfig;
+  disableScaleAnimation?: boolean;
+  isLoading?: boolean; // Show loader
+  loaderColor?: string; // Default loader color customization
+  customLoader?: React.ReactNode; // Custom loader component
+  disabled?: boolean; // Disable the button
 }
 
 export type AnimatedButtonProps = Omit<
@@ -41,9 +52,15 @@ export type AnimatedButtonProps = Omit<
 
 export type ButtonProps = AnimatedButtonProps & ExtraButtonProps;
 
-export const AnimatedTouchableOpacity = React.memo(
-  (props: AnimatedButtonProps) => {
-    const { containerStyle } = props;
+export const AnimatedTouchableOpacity = memo(
+  ({
+    activeOpacity = 0.8,
+    children,
+    containerStyle,
+    disableScaleAnimation = false,
+    springConfig,
+    ...rest
+  }: AnimatedButtonProps & ExtraButtonProps) => {
     const scaleValue = useSharedValue(1);
 
     const animatedButtonStyle = useAnimatedStyle(() => {
@@ -52,51 +69,125 @@ export const AnimatedTouchableOpacity = React.memo(
       };
     });
 
+    const handlePressIn = () => {
+      if (!disableScaleAnimation) {
+        scaleValue.value = withSpring(0.9, springConfig);
+      }
+    };
+
+    const handlePressOut = () => {
+      if (!disableScaleAnimation) {
+        scaleValue.value = withSpring(1, springConfig);
+      }
+    };
+
     return (
-      <AnimatedButtonComponent
+      <AnimatedTouchable
         style={[containerStyle, animatedButtonStyle]}
-        onPressIn={() => (scaleValue.value = withSpring(0.9))}
-        onPressOut={() => (scaleValue.value = withSpring(1))}
-        activeOpacity={0.8}
-        {...props}>
-        {props.children}
-      </AnimatedButtonComponent>
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={activeOpacity}
+        {...rest}>
+        {children}
+      </AnimatedTouchable>
     );
   }
 );
 
-export const Button = React.memo((props: ButtonProps) => {
-  const { buttonContainerStyle, title, titleContainerStyle, titleStyle } =
-    props;
+export const Button = memo((props: ButtonProps) => {
+  const {
+    activeOpacity,
+    buttonContainerStyle,
+    customLoader,
+    disabled = false,
+    disableScaleAnimation,
+    isLoading = false,
+    leftIcon,
+    loaderColor,
+    rightIcon,
+    springConfig,
+    title,
+    titleContainerStyle,
+    titleStyle,
+    variant = 'standard',
+    ...rest
+  } = props;
 
   const { color } = useColor();
+  const styles = createButtonStyles(color);
 
-  const styles = buttonStyles(color);
+  // Determine styles based on variant
+  const variantStyle =
+    variant === 'outlined'
+      ? {
+          backgroundColor: 'transparent',
+          borderColor: color.primaryColor,
+          borderWidth: 2,
+        }
+      : {
+          backgroundColor: disabled ? color.secondaryColor : color.primaryColor,
+        };
 
   return (
     <AnimatedTouchableOpacity
-      containerStyle={[styles.buttonContainer, buttonContainerStyle]}
-      {...props}>
+      containerStyle={[
+        styles.buttonContainer,
+        variantStyle,
+        buttonContainerStyle,
+        disabled && styles.disabledContainer,
+      ]}
+      activeOpacity={disabled ? 1 : activeOpacity}
+      springConfig={springConfig}
+      disableScaleAnimation={disableScaleAnimation || disabled}
+      disabled={disabled}
+      {...rest}>
       <View style={[styles.titleContainer, titleContainerStyle]}>
-        {props.leftIcon}
-        <Text preset="h3" color={color.textColor} style={titleStyle}>
-          {title}
-        </Text>
-        {props.rightIcon}
+        {isLoading ? (
+          customLoader || (
+            <ActivityIndicator
+              color={loaderColor || color.textColor}
+              style={styles.loader}
+            />
+          )
+        ) : (
+          <>
+            {leftIcon}
+            {title && (
+              <Text
+                color={
+                  variant === 'outlined'
+                    ? color.primaryColor
+                    : color.buttonTextColor
+                }
+                style={[titleStyle, disabled && styles.disabledText]}>
+                {title}
+              </Text>
+            )}
+            {rightIcon}
+          </>
+        )}
       </View>
     </AnimatedTouchableOpacity>
   );
 });
 
-const buttonStyles = ({ primaryColor }: Palette) =>
+const createButtonStyles = ({ secondaryColor }: Palette) =>
   StyleSheet.create({
     buttonContainer: {
       alignItems: 'center',
-      backgroundColor: primaryColor,
       borderRadius: moderateScale(60),
       height: scaleHeight(45),
       width: '100%',
     },
+    disabledContainer: {
+      backgroundColor: secondaryColor,
+    },
+    disabledText: {
+      color: secondaryColor,
+    },
+    loader: {
+      height: scaleHeight(20),
+    },
     titleContainer: {
       alignItems: 'center',
       flexDirection: 'row',