chore: add Prettier configuration and format files

.github/workflows/code-quality.yml

@@ -2,9 +2,9 @@ name: Code Quality Check
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   lint:
@@ -15,11 +15,13 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '22'
-          cache: 'npm'
+          node-version: "22"
+          cache: "npm"
 
       - name: Install dependencies
         run: npm ci
 
       - name: Run linting check
-        run: npm run lint:check
+        run: npm run lint:check
+      - name: Check formatting (Prettier)
+        run: npm run format:check

.github/workflows/npm-publish.yml

@@ -3,7 +3,7 @@ name: Publish to npm on tag
 on:
   push:
     tags:
-      - '*'
+      - "*"
   workflow_dispatch:
 
 jobs:
@@ -14,9 +14,9 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: '22'
-          registry-url: 'https://registry.npmjs.org'
-          
+          node-version: "22"
+          registry-url: "https://registry.npmjs.org"
+
       - run: npm ci
 
       - run: npm run build
@@ -25,4 +25,4 @@ jobs:
 
       - run: npm publish --access public
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.prettierignore

@@ -0,0 +1,16 @@
+# Ignore dependencies
+node_modules/
+
+# Ignore lock files
+package-lock.json
+
+# Ignore build output (if any)
+# dist/
+# build/
+
+# Ignore JS/TS files (handled by Biome)
+*.js
+*.jsx
+*.ts
+*.tsx
+*.json

.prettierrc.json

@@ -0,0 +1,11 @@
+{
+	"printWidth": 80,
+	"tabWidth": 2,
+	"useTabs": false,
+	"semi": true,
+	"singleQuote": false,
+	"trailingComma": "es5",
+	"bracketSpacing": true,
+	"arrowParens": "always",
+	"endOfLine": "lf"
+}

CONTRIBUTING.md

@@ -12,12 +12,14 @@ Ce document est destiné aux développeurs qui maintiennent, modifient ou contri
 ### Installation locale
 
 1. Clonez le dépôt :
+
 ```bash
 git clone https://github.com/killerwolf/visual-image-tool.git
 cd visual-image-tool
 ```
 
 2. Installez les dépendances :
+
 ```bash
 npm install
 ```
@@ -53,6 +55,7 @@ Le projet utilise Rollup pour générer trois formats de distribution :
 3. **CommonJS** (`dist/visual-image-tool.js`) : Format pour Node.js
 
 Pour lancer le build :
+
 ```bash
 npm run build
 ```
@@ -78,6 +81,7 @@ npm link visual-image-tool
 ### Préparation
 
 1. Mettez à jour la version dans `package.json` selon les règles de [SemVer](https://semver.org/) :
+
    - Patch (1.0.x) : Corrections de bugs
    - Minor (1.x.0) : Nouvelles fonctionnalités rétrocompatibles
    - Major (x.0.0) : Changements non rétrocompatibles
@@ -89,16 +93,19 @@ npm link visual-image-tool
 ### Publication
 
 1. Connectez-vous à npm :
+
 ```bash
 npm login
 ```
 
 2. Publiez le package :
+
 ```bash
 npm publish
 ```
 
 Pour une version bêta ou release candidate :
+
 ```bash
 npm publish --tag beta
 ```

README.md

@@ -23,10 +23,10 @@ npm install @h4md1/visual-image-tool
 
 ```javascript
 // ES modules import (recommended)
-import VisualImageTool from '@h4md1/visual-image-tool';
+import VisualImageTool from "@h4md1/visual-image-tool";
 
 // OR CommonJS import
-const VisualImageTool = require('@h4md1/visual-image-tool');
+const VisualImageTool = require("@h4md1/visual-image-tool");
 
 // OR direct usage via script tag (UMD)
 // <script src="node_modules/image-tool/dist/image-tool.umd.js"></script>
@@ -37,12 +37,12 @@ const VisualImageTool = require('@h4md1/visual-image-tool');
 ```javascript
 // Create an instance with an image
 const imageTool = new VisualImageTool.VisualImageTool({
-  imageElement: document.getElementById('myImage'),
+  imageElement: document.getElementById("myImage"),
   debug: true, // Enable debug logs for overlay positioning (optional)
   onChange: (data) => {
-    console.log('Focus point:', data.focusPoint);
-    console.log('Crop zone:', data.cropZone);
-  }
+    console.log("Focus point:", data.focusPoint);
+    console.log("Crop zone:", data.cropZone);
+  },
 });
 ```
 
@@ -71,7 +71,7 @@ const cropZone = imageTool.getCropZone();
 ```javascript
 const imageTool = new VisualImageTool.VisualImageTool({
   // Image element (required) - can be a CSS selector or a DOM element
-  imageElement: '#myImage',
+  imageElement: "#myImage",
 
   // Enable debug logs for overlay positioning (optional)
   debug: true, // Set to true to see overlay positioning logs in the console
@@ -80,34 +80,34 @@ const imageTool = new VisualImageTool.VisualImageTool({
   focusPoint: {
     enabled: true, // Enable/disable the feature
     style: {
-      width: '30px',
-      height: '30px',
-      border: '3px solid white',
-      boxShadow: '0 0 0 2px black, 0 0 5px rgba(0,0,0,0.5)',
-      backgroundColor: 'rgba(255, 0, 0, 0.5)'
-    }
+      width: "30px",
+      height: "30px",
+      border: "3px solid white",
+      boxShadow: "0 0 0 2px black, 0 0 5px rgba(0,0,0,0.5)",
+      backgroundColor: "rgba(255, 0, 0, 0.5)",
+    },
   },
 
   // Crop zone configuration (optional)
   cropZone: {
     enabled: true, // Enable/disable the feature
     style: {
-      border: '1px dashed #fff',
-      backgroundColor: 'rgba(0, 0, 0, 0.4)'
+      border: "1px dashed #fff",
+      backgroundColor: "rgba(0, 0, 0, 0.4)",
     },
     handleStyle: {
-      width: '14px',
-      height: '14px',
-      backgroundColor: 'white',
-      border: '2px solid black',
-      boxShadow: '0 0 3px rgba(0,0,0,0.5)'
-    }
+      width: "14px",
+      height: "14px",
+      backgroundColor: "white",
+      border: "2px solid black",
+      boxShadow: "0 0 3px rgba(0,0,0,0.5)",
+    },
   },
 
   // Callback called on changes (optional)
-  onChange: function(data) {
+  onChange: function (data) {
     // data contains focusPoint, cropZone, focusActive, cropActive
-  }
+  },
 });
 ```
 
@@ -116,42 +116,57 @@ const imageTool = new VisualImageTool.VisualImageTool({
 ### Methods
 
 #### `toggleFocusPoint(active)`
+
 Enables or disables the focus point.
+
 - `active` (boolean, optional): If set, forces the state to this value. If omitted, toggles the current state.
 - Returns: The VisualImageTool instance for chaining.
 
 #### `toggleCropZone(active)`
+
 Enables or disables the crop zone.
+
 - `active` (boolean, optional): If set, forces the state to this value. If omitted, toggles the current state.
 - Returns: The VisualImageTool instance for chaining.
 
 #### `setFocusPoint(x, y)`
+
 Sets the position of the focus point.
+
 - `x` (number): X coordinate in original pixels.
 - `y` (number): Y coordinate in original pixels.
 - Returns: The VisualImageTool instance for chaining.
 
 #### `setCropZone(x, y, width, height)`
+
 Sets the position and dimensions of the crop zone.
+
 - `x` (number): X coordinate in original pixels.
 - `y` (number): Y coordinate in original pixels.
 - `width` (number): Width in original pixels.
 - `height` (number): Height in original pixels.
 - Returns: The VisualImageTool instance for chaining.
 
 #### `getFocusPoint()`
+
 Gets the current position of the focus point.
+
 - Returns: An object `{x, y}` with coordinates in original pixels.
 
 #### `getCropZone()`
+
 Gets the current position and dimensions of the crop zone.
+
 - Returns: An object `{x, y, width, height}` with values in original pixels.
 
 #### `getImageDimensions()`
+
 Gets the original dimensions of the image.
+
 - Returns: An object `{width, height}` with dimensions in original pixels.
 
 #### `destroy()`
+
 Destroys the instance and cleans up resources.
 
 ### Events
@@ -172,27 +187,27 @@ The tool uses the `onChange` callback to notify about changes. This callback rec
 ### React
 
 ```jsx
-import React, { useEffect, useRef } from 'react';
-import VisualImageTool from '@h4md1/visual-image-tool';
+import React, { useEffect, useRef } from "react";
+import VisualImageTool from "@h4md1/visual-image-tool";
 
 function ImageEditor() {
   const imageRef = useRef(null);
   const toolRef = useRef(null);
-  
+
   useEffect(() => {
     if (imageRef.current && !toolRef.current) {
       toolRef.current = new VisualImageTool({
         imageElement: imageRef.current,
         onChange: (data) => {
-          console.log('Updated data:', data);
-        }
+          console.log("Updated data:", data);
+        },
       });
-      
+
       // Enable features
       toolRef.current.toggleFocusPoint(true);
       toolRef.current.toggleCropZone(true);
     }
-    
+
     // Cleanup
     return () => {
       if (toolRef.current) {
@@ -201,7 +216,7 @@ function ImageEditor() {
       }
     };
   }, []);
-  
+
   return (
     <div>
       <img ref={imageRef} src="path/to/image.jpg" alt="Editable" />
@@ -220,22 +235,22 @@ function ImageEditor() {
 </template>
 
 <script>
-import VisualImageTool from '@h4md1/visual-image-tool';
+import VisualImageTool from "@h4md1/visual-image-tool";
 
 export default {
   data() {
     return {
-      imageTool: null
+      imageTool: null,
     };
   },
   mounted() {
     this.imageTool = new VisualImageTool({
       imageElement: this.$refs.editableImage,
       onChange: (data) => {
-        console.log('Updated data:', data);
-      }
+        console.log("Updated data:", data);
+      },
     });
-    
+
     // Enable features
     this.imageTool.toggleFocusPoint(true);
     this.imageTool.toggleCropZone(true);
@@ -245,7 +260,7 @@ export default {
       this.imageTool.destroy();
       this.imageTool = null;
     }
-  }
+  },
 };
 </script>
 ```
@@ -271,12 +286,18 @@ The `demo/` folder contains the following examples:
 - Safari (latest versions)
 - Edge (latest versions)
 
-## Linting and Formatting
+## Code Formatting
+
+This project uses a combination of tools for code formatting and linting to ensure consistency:
 
-This project uses [Biome](https://biomejs.dev/) for code formatting and linting.
+- **[Biome](https://biomejs.dev/)**: Handles formatting and linting for JavaScript (`.js`, `.jsx`), TypeScript (`.ts`, `.tsx`), and JSON (`.json`) files.
+  - Check: `npm run lint:check` (`biome check .`)
+  - Fix: `npm run lint:fix` (`biome check --write .`)
+- **[Prettier](https://prettier.io/)**: Handles formatting for other file types like HTML, CSS, Markdown, etc.
+  - Check: `npm run format:check` (`prettier --check --ignore-unknown .`)
+  - Fix: `npm run format:write` (`prettier --write --ignore-unknown .`)
 
--   Run `npm run lint:check` to check for formatting and linting issues.
--   Run `npm run lint:fix` to automatically fix formatting and safe linting issues.
+These formatting checks are automatically enforced in the CI pipeline (see `.github/workflows/code-quality.yml`) to maintain code quality.
 
 ## License