style: apply prettier formatting to documentation files

- Format EXAMPLES.md with consistent code block styling
- Fix line endings in capture-screenshots.js
- Apply consistent markdown formatting to README.md

Author: meabed

EXAMPLES.md

@@ -29,12 +29,14 @@ php -S localhost:8080 -t examples  # Using PHP
 ### 📄 Available Example Pages
 
 #### 1. **Main Interactive Demo** (`index.html`)
+
 - Live customization controls
 - Real-time preview
 - Export functionality
 - All basic options
 
 #### 2. **Advanced Customization** (`advanced-demo.html`)
+
 - 100+ QR code variations
 - All shape combinations
 - Gradient examples
@@ -43,18 +45,21 @@ php -S localhost:8080 -t examples  # Using PHP
 - Logo integration
 
 #### 3. **Simple Usage** (`simple-usage.html`)
+
 - Basic implementation
 - Common use cases
 - Template examples (WiFi, vCard, etc.)
 - Copy & paste code snippets
 
 #### 4. **API Documentation** (`api-docs.html`)
+
 - Complete props reference
 - Method documentation
 - TypeScript interfaces
 - Hook examples
 
 #### 5. **Detectability Test** (`qr-test.html`)
+
 - Test QR code scanning
 - Contrast validation
 - Real-time detectability feedback
@@ -67,18 +72,15 @@ php -S localhost:8080 -t examples  # Using PHP
 ```tsx
 import { ReactQrCode } from '@devmehq/react-qr-code'
 
-<ReactQrCode 
-  value="https://example.com"
-  size={256}
-/>
+;<ReactQrCode value="https://example.com" size={256} />
 ```
 
 ### With Custom Styling
 
 ```tsx
 import { AdvancedQRCode } from '@devmehq/react-qr-code'
 
-<AdvancedQRCode
+;<AdvancedQRCode
   value="https://example.com"
   size={300}
   eyeShape="rounded"
@@ -95,7 +97,7 @@ import { AdvancedQRCode } from '@devmehq/react-qr-code'
   bodyGradient={{
     type: 'linear',
     colors: ['#667EEA', '#764BA2'],
-    angle: 45
+    angle: 45,
   }}
 />
 ```
@@ -116,7 +118,7 @@ import { AdvancedQRCode } from '@devmehq/react-qr-code'
 ```tsx
 import { AdvancedQRCode, QRHelpers } from '@devmehq/react-qr-code'
 
-<AdvancedQRCode
+;<AdvancedQRCode
   value={QRHelpers.wifi('NetworkName', 'password123', 'WPA2')}
   theme="professional"
 />
@@ -131,7 +133,7 @@ import { AdvancedQRCode, QRHelpers } from '@devmehq/react-qr-code'
     lastName: 'Doe',
     phone: '+1234567890',
     email: 'john@example.com',
-    organization: 'ACME Corp'
+    organization: 'ACME Corp',
   })}
   theme="elegant"
 />
@@ -142,36 +144,42 @@ import { AdvancedQRCode, QRHelpers } from '@devmehq/react-qr-code'
 The library includes 25+ professionally designed themes:
 
 ### Minimal & Clean
+
 - `minimal` - Clean black and white
 - `monochrome` - Grayscale elegance
 - `elegant` - Sophisticated style
 - `professional` - Business ready
 
 ### Colorful & Vibrant
+
 - `ocean` - Deep blue waves
 - `sunset` - Warm orange/pink
 - `forest` - Natural greens
 - `rainbow` - Full spectrum
 - `aurora` - Northern lights
 
 ### Tech & Modern
+
 - `neon` - Bright cyber green
 - `cyberpunk` - Tech noir
 - `retrowave` - 80s aesthetic
 - `gradient` - Modern gradients
 
 ### Nature & Earth
+
 - `earth` - Natural browns
 - `nature` - Green harmony
 - `ice` - Cool blues
 - `fire` - Hot reds
 
 ### Metallic
+
 - `gold` - Luxurious gold
 - `silver` - Sleek silver
 - `bronze` - Warm bronze
 
 ### Special
+
 - `cosmic` - Space theme
 - `pastel` - Soft colors
 - `dark` - Dark mode
@@ -181,6 +189,7 @@ The library includes 25+ professionally designed themes:
 ## 🔧 Customization Options
 
 ### Eye (Finder Pattern) Shapes
+
 - `square` - Classic square
 - `circle` - Smooth circles
 - `rounded` - Rounded corners
@@ -193,6 +202,7 @@ The library includes 25+ professionally designed themes:
 - `cat` - Cat eyes
 
 ### Body (Data Module) Shapes
+
 - `square` - Traditional pixels
 - `circle` - Circular dots
 - `rounded` - Soft corners
@@ -213,6 +223,7 @@ The library includes 25+ professionally designed themes:
 - `fluid` - Fluid design
 
 ### Background Patterns
+
 - `none` - Solid color
 - `dots` - Dot pattern
 - `lines` - Line pattern
@@ -229,11 +240,13 @@ The library includes 25+ professionally designed themes:
 ## 📊 Performance Tips
 
 1. **Use Canvas for Large QR Codes**
+
    ```tsx
    <ReactQrCode renderAs="canvas" size={512} />
    ```
 
 2. **Enable Lazy Loading**
+
    ```tsx
    <AdvancedQRCode lazy={true} />
    ```
@@ -246,24 +259,22 @@ The library includes 25+ professionally designed themes:
 4. **Batch Rendering**
    ```tsx
    // Render multiple QR codes efficiently
-   const codes = data.map(item => (
-     <AdvancedQRCode
-       key={item.id}
-       value={item.value}
-       lazy={true}
-     />
+   const codes = data.map((item) => (
+     <AdvancedQRCode key={item.id} value={item.value} lazy={true} />
    ))
    ```
 
 ## 🧪 Testing Detectability
 
 Use the `qr-test.html` page to:
+
 1. Test QR code scanning with real devices
 2. Validate contrast ratios
 3. Check error correction levels
 4. Verify logo doesn't interfere
 
 ### Recommended Contrast Ratios
+
 - **Minimum**: 3:1
 - **Recommended**: 7:1
 - **Best**: 10:1+
@@ -281,6 +292,7 @@ Use the `qr-test.html` page to:
 ## 🎯 Common Use Cases
 
 ### Event Tickets
+
 ```tsx
 <AdvancedQRCode
   value={`TICKET:${eventId}:${userId}`}
@@ -290,15 +302,13 @@ Use the `qr-test.html` page to:
 ```
 
 ### Product Labels
+
 ```tsx
-<AdvancedQRCode
-  value={`PRODUCT:${sku}:${batch}`}
-  theme="minimal"
-  size={150}
-/>
+<AdvancedQRCode value={`PRODUCT:${sku}:${batch}`} theme="minimal" size={150} />
 ```
 
 ### Restaurant Menus
+
 ```tsx
 <AdvancedQRCode
   value="https://restaurant.com/menu"
@@ -308,6 +318,7 @@ Use the `qr-test.html` page to:
 ```
 
 ### Social Media
+
 ```tsx
 <AdvancedQRCode
   value={`instagram://user?username=${username}`}
@@ -320,4 +331,4 @@ Use the `qr-test.html` page to:
 - [GitHub Repository](https://github.com/devmehq/react-qr-code)
 - [NPM Package](https://www.npmjs.com/package/@devmehq/react-qr-code)
 - [Issue Tracker](https://github.com/devmehq/react-qr-code/issues)
-- [Discussions](https://github.com/devmehq/react-qr-code/discussions)
+- [Discussions](https://github.com/devmehq/react-qr-code/discussions)

README.md

@@ -192,6 +192,7 @@ function App() {
 ```
 
 **25+ Built-in Themes:**
+
 - `minimal`, `gradient`, `ocean`, `sunset`, `forest`
 - `neon`, `cyberpunk`, `retrowave`, `pastel`, `dark`
 - `colorful`, `monochrome`, `gold`, `silver`, `bronze`
@@ -350,10 +351,8 @@ import { ReactQrCode, QRHelpers } from '@devmehq/react-qr-code'
   // Eye (finder pattern) shapes
   eyeShape="rounded" // square, circle, rounded, leaf, star, diamond, hexagon, octagon, flower, cat
   eyeFrameShape="rounded" // square, circle, rounded, dots, lines, zigzag, waves, cross, mesh, gradient
-  
-  // Body (data module) shapes  
+  // Body (data module) shapes
   bodyShape="circle" // square, circle, rounded, diamond, star, hexagon, octagon, triangle, cross, plus, dots, lines, zigzag, waves, noise, circuit, organic, fluid
-  
   // Background patterns
   backgroundPattern="dots" // none, dots, lines, grid, mesh, circuit, waves, noise, gradient, radial, hexagon, triangle
 />
@@ -406,40 +405,45 @@ interface AdvancedQRCodeProps {
   value: string
   size?: number
   level?: 'L' | 'M' | 'Q' | 'H'
-  
+
   // Themes
   theme?: PresetTheme
-  colorBlindMode?: 'none' | 'protanopia' | 'deuteranopia' | 'tritanopia' | 'achromatopsia'
-  
+  colorBlindMode?:
+    | 'none'
+    | 'protanopia'
+    | 'deuteranopia'
+    | 'tritanopia'
+    | 'achromatopsia'
+
   // Shapes
   eyeShape?: EyeShape
   eyeFrameShape?: EyeFrameShape
   bodyShape?: BodyShape
-  
+
   // Colors
   eyeColor?: string | GradientConfig
   eyeFrameColor?: string | GradientConfig
   bodyColor?: string | GradientConfig
   backgroundColor?: string | GradientConfig
-  
+
   // Gradients
   eyeGradient?: GradientConfig
   bodyGradient?: GradientConfig
   backgroundGradient?: GradientConfig
-  
+
   // Patterns
   backgroundPattern?: BackgroundPattern
-  
+
   // Effects
   animationType?: 'none' | 'fade' | 'scale' | 'rotate' | 'slide' | 'bounce'
   glowEffect?: boolean
   shadowEffect?: boolean
-  
+
   // Logo
   logo?: string
   logoSize?: number
   logoExcavate?: boolean
-  
+
   // Actions
   enableDownload?: boolean
   enableCopy?: boolean

test/capture-screenshots.js

@@ -47,7 +47,7 @@ async function captureScreenshots() {
   try {
     for (const pageConfig of PAGES_TO_CAPTURE) {
       const page = await browser.newPage()
-      
+
       if (pageConfig.viewport) {
         await page.setViewport(pageConfig.viewport)
       } else {
@@ -56,12 +56,15 @@ async function captureScreenshots() {
 
       const url = `${SERVER_URL}/${pageConfig.url}`
       console.log(`📸 Capturing ${pageConfig.name} from ${url}`)
-      
+
       await page.goto(url, { waitUntil: 'networkidle2' })
-      await new Promise(resolve => setTimeout(resolve, 2000))
+      await new Promise((resolve) => setTimeout(resolve, 2000))
 
       // Capture full page
-      const screenshotPath = path.join(SCREENSHOTS_DIR, `${pageConfig.name}.png`)
+      const screenshotPath = path.join(
+        SCREENSHOTS_DIR,
+        `${pageConfig.name}.png`
+      )
       await page.screenshot({ path: screenshotPath, fullPage: true })
       console.log(`   ✅ Saved: ${screenshotPath}`)
 
@@ -90,8 +93,10 @@ async function captureScreenshots() {
     // Capture individual QR code examples
     const page = await browser.newPage()
     await page.setViewport({ width: 1920, height: 1080 })
-    await page.goto(`${SERVER_URL}/advanced-demo.html`, { waitUntil: 'networkidle2' })
-    await new Promise(resolve => setTimeout(resolve, 3000))
+    await page.goto(`${SERVER_URL}/advanced-demo.html`, {
+      waitUntil: 'networkidle2',
+    })
+    await new Promise((resolve) => setTimeout(resolve, 3000))
 
     // Capture specific QR code examples
     const examples = [
@@ -107,7 +112,10 @@ async function captureScreenshots() {
       try {
         const element = await page.$(example.selector)
         if (element) {
-          const screenshotPath = path.join(SCREENSHOTS_DIR, `${example.name}.png`)
+          const screenshotPath = path.join(
+            SCREENSHOTS_DIR,
+            `${example.name}.png`
+          )
           await element.screenshot({ path: screenshotPath })
           console.log(`   ✅ Saved QR: ${screenshotPath}`)
         }
@@ -118,10 +126,9 @@ async function captureScreenshots() {
 
     await page.close()
     console.log('\n✨ Screenshots captured successfully!')
-    
   } finally {
     await browser.close()
   }
 }
 
-captureScreenshots().catch(console.error)
+captureScreenshots().catch(console.error)