feature : Husky & Prettier Addition - For formatting code

.babelrc

@@ -1,21 +1,16 @@
 {
-    "presets": [
-        "@babel/preset-env",
-        "@babel/preset-react"
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "root": ["./src"],
+        "alias": {
+          "test": "./test",
+          "underscore": "lodash"
+        }
+      }
     ],
-    "plugins": [
-        [
-            "module-resolver",
-            {
-                "root": [
-                    "./src"
-                ],
-                "alias": {
-                    "test": "./test",
-                    "underscore": "lodash"
-                }
-            }
-        ],
-        "@babel/plugin-transform-async-to-generator"
-    ]
-}
+    "@babel/plugin-transform-async-to-generator"
+  ]
+}

.githooks/commit-msg

@@ -0,0 +1,17 @@
+#!/bin/sh
+
+commit_msg_file=$1
+commit_msg=$(cat "$commit_msg_file")
+
+
+# Define your commit message convention (e.g., starts with "feat:", "fix:", etc.)
+commit_regex="^(feature|bugfix|chore|docs|style|refactor|test|enhancement) .+"
+
+if ! echo "$commit_msg" | grep -E "$commit_regex" ; then
+    echo "Aborting commit. Your commit message does not follow the conventional format."
+    echo "Example - <feature|bugfix|chore|docs|style|refactor|test|enhancement>: (<scope>) - <description>"
+    exit 1
+fi
+
+# If the commit message matches the convention, the script exits successfully.
+exit 0

.githooks/pre-push

@@ -0,0 +1,16 @@
+#!/bin/sh
+
+npm run re:build
+
+npx prettier --write .
+
+npm run re:format
+
+# Check that the code is compiling properly
+if [ $? -ne 0 ]; then
+    echo "ReScript build failed. Aborting commit."
+    exit 1
+else 
+    echo "✨ Code compiled successfully. ✨"
+    exit 0
+fi

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,4 +1,5 @@
 ## Type of Change
+
 <!-- Put an `x` in the boxes that apply -->
 
 - [ ] Bugfix
@@ -10,10 +11,11 @@
 - [ ] CI/CD
 
 ## Description
-<!-- Describe your changes in detail -->
 
+<!-- Describe your changes in detail -->
 
 ## Motivation and Context
+
 <!--
 Why is this change required? What problem does it solve?
 If it fixes an open issue, please link to the issue here.
@@ -23,15 +25,15 @@ can focus on the implementation (unless its an obvious bug or documentation fix
 that will have little conversation).
 -->
 
-
 ## How did you test it?
+
 <!--
 Did you write an integration/unit/API test to verify the code changes?
 Or did you test this change manually (provide relevant screenshots)?
 -->
 
-
 ## Checklist
+
 <!-- Put an `x` in the boxes that apply -->
 
 - [ ] I ran `npm run re:build`

README.md

@@ -67,9 +67,11 @@ Follow these simple steps to set up Hyperswitch on your local machine.
 Feature flags allows the users to enable or disable certain functionalities or flows in the control center.
 
 ### Using feature flags
-The FeatureFlag.json file can be found under config/FeatueFlag.json. By default, all the feature flags is turned off (`False` value). 
+
+The FeatureFlag.json file can be found under config/FeatueFlag.json. By default, all the feature flags is turned off (`False` value).
 
 ### Feature flag descriptions
+
 #### Generate report
 
 The `generate_report` feature flag controls the ability to generate detailed reports on payments, refunds, and disputes. When enabled, this allows users to pull reports covering the previous 6 months of transaction data. The reports can provide insights into trends, identify issues, and inform business decisions.
@@ -264,6 +266,7 @@ curl https://raw.githubusercontent.com/juspay/hyperswitch/main/aws/hyperswitch_c
 Once the script is executed, you will receive a Public IP as the response (e.g. http://34.207.75.225). This IP is the base URL for accessing the application's APIs
 
 #### Clean Up
+
 If you want to delete the application from your account simply run the below clean up script. Ypu need to install JQ for this. For more information, [click here](https://jqlang.github.io/jq/download/)
 
 ```

bsconfig.json

@@ -5,10 +5,7 @@
     "version": 4,
     "mode": "classic"
   },
-  "bsc-flags": [
-    "-bs-super-errors",
-    "-open RescriptCore"
-  ],
+  "bsc-flags": ["-bs-super-errors", "-open RescriptCore"],
   "sources": {
     "dir": "src",
     "subdirs": true
@@ -28,4 +25,4 @@
     "rescript-debounce-react",
     "@rescript/core"
   ]
-}
+}

config/FeatureFlag.json

@@ -22,4 +22,4 @@
   "mixpanel": false,
   "business_profile": false,
   "generate_report": false
-}
+}

jest.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-    testEnvironment: "jsdom",
-    moduleFileExtensions: ["js", "mjs"],
-    testMatch: ["**/tests/**/*Test.bs.js"],
+  testEnvironment: "jsdom",
+  moduleFileExtensions: ["js", "mjs"],
+  testMatch: ["**/tests/**/*Test.bs.js"],
 };

package.json

@@ -5,6 +5,8 @@
   "author": "Shiva Nandan <[email protected]>",
   "license": "MIT",
   "scripts": {
+    "pre-commit": "git config core.hooksPath .githooks && chmod +x .githooks/commit-msg && bash .githooks/commit-msg",
+    "pre-push": "git config core.hooksPath .githooks && chmod +x .githooks/pre-push && bash .githooks/pre-push",
     "start": "chmod +x ./replace_env.sh && ./replace_env.sh && cp env-config.js ./public/hyperswitch && APP_VERSION=$npm_package_version && appName=hyperswitch webpack serve --config webpack.dev.js",
     "start:server_compiler": "webpack --config webpack.server.js --watch",
     "prod:start": "webpack serve --config webpack.dev.js",
@@ -23,20 +25,28 @@
     "unit:test": "cd tests && npx rescript build -with-deps && jest unit_test",
     "revert:test": "cd tests && npx rescript clean -with-deps && cd .. && npx rescript build -with-deps"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run pre-commit",
+      "pre-push": "npm run pre-push"
+    }
+  },
   "devDependencies": {
     "@glennsl/rescript-jest": "^0.10.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
     "copy-webpack-plugin": "^9.0.0",
     "css-loader": "^5.0.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
     "file-loader": "^6.2.0",
+    "husky": "^8.0.3",
     "jest-environment-jsdom": "^29.6.4",
     "mini-css-extract-plugin": "^1.3.1",
     "monaco-editor-webpack-plugin": "^7.0.1",
     "node-fetch": "^2.6.1",
     "postcss": "^8.3.6",
     "postcss-loader": "^4.1.0",
     "postcss-preset-env": "^6.7.0",
+    "prettier": "^3.1.0",
     "react-refresh": "^0.10.0",
     "rescript": "^10.1.2",
     "serve": "^14.2.1",

src/components/CustomCharts/highcharts.css

@@ -1,6 +1,6 @@
 .highcharts-data-label-connector {
-    stroke-dasharray: 2, 2;
-    stroke: #151A1F;
-    opacity: 0.3;
-    stroke-width: 2px;
-}
+  stroke-dasharray: 2, 2;
+  stroke: #151a1f;
+  opacity: 0.3;
+  stroke-width: 2px;
+}

src/components/DonutProgress.css

@@ -4,39 +4,39 @@
  */
 
 .CircularProgressbar {
-    /*
+  /*
      * This fixes an issue where the CircularProgressbar svg has
      * 0 width inside a "display: flex" container, and thus not visible.
      */
-    width: 100%;
-    /*
+  width: 100%;
+  /*
      * This fixes a centering issue with CircularProgressbarWithChildren:
      * https://github.com/kevinsqi/react-circular-progressbar/issues/94
      */
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 .CircularProgressbar .CircularProgressbar-path {
-    stroke: #3e98c7;
-    stroke-linecap: round;
-    transition: stroke-dashoffset 0.5s ease 0s;
+  stroke: #3e98c7;
+  stroke-linecap: round;
+  transition: stroke-dashoffset 0.5s ease 0s;
 }
 
 .CircularProgressbar .CircularProgressbar-trail {
-    stroke: #e2e2e2;
-    /* Used when trail is not full diameter, i.e. when props.circleRatio is set */
-    stroke-linecap: round;
+  stroke: #e2e2e2;
+  /* Used when trail is not full diameter, i.e. when props.circleRatio is set */
+  stroke-linecap: round;
 }
 
 .CircularProgressbar .CircularProgressbar-text {
-    fill: #3e98c7;
-    font-size: 20px;
-    /* dominant-baseline: middle; */
-    text-anchor: middle;
+  fill: #3e98c7;
+  font-size: 20px;
+  /* dominant-baseline: middle; */
+  text-anchor: middle;
 }
 
 .CircularProgressbar .CircularProgressbar-background {
-    fill: #d6d6d6;
+  fill: #d6d6d6;
 }
 
 /*
@@ -48,18 +48,19 @@
    *     percentage={50}
    *   />
    */
-.CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-background {
-    fill: #3e98c7;
+.CircularProgressbar.CircularProgressbar-inverted
+  .CircularProgressbar-background {
+  fill: #3e98c7;
 }
 
 .CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-text {
-    fill: #fff;
+  fill: #fff;
 }
 
 .CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-path {
-    stroke: #fff;
+  stroke: #fff;
 }
 
 .CircularProgressbar.CircularProgressbar-inverted .CircularProgressbar-trail {
-    stroke: transparent;
-}
+  stroke: transparent;
+}

src/components/Pagination.res

@@ -74,37 +74,31 @@ let make = (~resultsPerPage, ~totalResults, ~currentPage, ~paginate, ~btnCount=4
           customButtonStyle="!h-10"
           onClick={_evt => paginate(Js.Math.max_int(1, currentPage - 1))}
         />
-        {
-
-          pageNumbers
-          ->Js.Array2.filter(nonEmpty)
-          ->Js.Array2.mapi((number, idx) => {
-            let isSelected = number == currentPage
+        {pageNumbers
+        ->Js.Array2.filter(nonEmpty)
+        ->Js.Array2.mapi((number, idx) => {
+          let isSelected = number == currentPage
 
-            <Button
-              key={idx->string_of_int}
-              text={number->string_of_int}
-              onClick={_evt => paginate(number)}
-              buttonType
-              customButtonStyle="!h-10 border-left-1 border-right-1"
-              buttonState={if isSelected {
-                NoHover
-              } else {
-                Normal
-              }}
-            />
-          })
-          ->React.array
-        }
+          <Button
+            key={idx->string_of_int}
+            text={number->string_of_int}
+            onClick={_evt => paginate(number)}
+            buttonType
+            customButtonStyle="!h-10 border-left-1 border-right-1"
+            buttonState={if isSelected {
+              NoHover
+            } else {
+              Normal
+            }}
+          />
+        })
+        ->React.array}
         <Button
           rightIcon
           buttonType
           onClick={_evt => paginate(currentPage + 1)}
           customButtonStyle="!h-10"
-          buttonState={
-            if (
-            currentPage < Belt.Array.length(pageNumbers) 
-          ) {
+          buttonState={if currentPage < Belt.Array.length(pageNumbers) {
             Normal
           } else {
             Disabled

src/components/highcharts.css

@@ -1,26 +1,25 @@
 .highchart-sankey .highcharts-link {
-    fill: rgba(109, 115, 127, 0.2);
-
+  fill: rgba(109, 115, 127, 0.2);
 }
 
 .highchart-sankey .highcharts-link:hover,
 .highchart-sankey .highcharts-link.highcharts-point-hover {
-    fill: rgba(109, 115, 127, 0.6);
+  fill: rgba(109, 115, 127, 0.6);
 }
 
 .highchart-sankey .highcharts-label-box.highcharts-tooltip-box {
-    stroke: none;
+  stroke: none;
 }
 
 .highchart-sankey .highcharts-label tspan.highcharts-text-outline {
-    stroke: transparent;
+  stroke: transparent;
 }
 
 span.highcharts-title {
-    width: 100% !important;
-    padding-right: 20px;
+  width: 100% !important;
+  padding-right: 20px;
 }
 
- .highcharts-yaxis-grid .highcharts-grid-line {
-    stroke-dasharray: 4, 6; 
+.highcharts-yaxis-grid .highcharts-grid-line {
+  stroke-dasharray: 4, 6;
 }