From d76ea0d2f7d6283a13e24bc67c64aae0776373aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=A6Ltorio?= <aeltorio@universidadatlantico.org>
Date: Fri, 28 Jun 2024 20:19:34 +0200
Subject: [PATCH] v1.5

---
 package-lock.json           | 39 ++++++++++++++++++++-------
 package.json                |  2 +-
 src/App.tsx                 | 54 +++++++++++++++++++++++++------------
 src/Components/Download.tsx |  5 ++--
 src/Context.tsx             |  6 +++--
 src/index.tsx               | 13 ++++-----
 yarn.lock                   | 19 +++++++------
 7 files changed, 92 insertions(+), 46 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 30f3ba6..35d9a72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,7 @@
       "name": "custom-qr-code-styling",
       "version": "0.2.0",
       "dependencies": {
-        "qr-code-styling": "^1.6.0-rc.1",
+        "@liquid-js/qr-code-styling": "^3.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
@@ -3205,6 +3205,31 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz",
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw=="
     },
+    "node_modules/@liquid-js/qr-code-styling": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@liquid-js/qr-code-styling/-/qr-code-styling-3.1.1.tgz",
+      "integrity": "sha512-tl11pz53jMisrcRgXSOAcTH4WW+pc3u0qG4+SDE8mCVw6gP0gSEpIJSPQcK+tX6q/8w7U+bCe+Kqdewt8dkjAw==",
+      "peerDependencies": {
+        "@xmldom/xmldom": "^0.8.10",
+        "file-type": "^19.0.0",
+        "qrcode-generator": "^1.4.4",
+        "sharp": ">0.32.1 <1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@xmldom/xmldom": {
+          "optional": true
+        },
+        "file-type": {
+          "optional": true
+        },
+        "qrcode-generator": {
+          "optional": true
+        },
+        "sharp": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": {
       "version": "5.1.1-v1",
       "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz",
@@ -14065,18 +14090,12 @@
         "teleport": ">=0.2.0"
       }
     },
-    "node_modules/qr-code-styling": {
-      "version": "1.6.0-rc.1",
-      "resolved": "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz",
-      "integrity": "sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==",
-      "dependencies": {
-        "qrcode-generator": "^1.4.3"
-      }
-    },
     "node_modules/qrcode-generator": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz",
-      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw=="
+      "integrity": "sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==",
+      "optional": true,
+      "peer": true
     },
     "node_modules/qs": {
       "version": "6.11.0",
diff --git a/package.json b/package.json
index 255d37d..97a060f 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.2.0",
   "private": false,
   "dependencies": {
-    "qr-code-styling": "^1.6.0-rc.1",
+    "@liquid-js/qr-code-styling":"^3.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
diff --git a/src/App.tsx b/src/App.tsx
index c5f05e6..e2cc43f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useState, useEffect, useRef, useContext, useReducer } from 'react'
-import { DotType, CornerSquareType, CornerDotType } from 'qr-code-styling'
+import { DotType, CornerSquareType, CornerDotType } from "@liquid-js/qr-code-styling"
 import { AppContext } from './Context'
 import Header from './Components/Header'
 import Tabs from './Components/Tabs'
@@ -69,11 +69,11 @@ const initialOptions: Options = {
   removeBrand: false,
   image: defaultBrand,
   imageMargin: 10,
-  mainShape: 'dots',
+  mainShape: DotType.dot,
   shapeColor: '#1E2470',
-  squareShape: 'extra-rounded',
+  squareShape: CornerSquareType.extraRounded,
   squareColor: '#008ADC',
-  cornersDotShape: 'dot',
+  cornersDotShape: CornerDotType.dot,
   cornersDotColor: '#D90012',
   errorCorrectionLevel: 'H'
 }
@@ -116,11 +116,14 @@ function App() {
   const handleOptions = (event: React.ChangeEvent<HTMLInputElement & HTMLSelectElement>) => {
     const { type, name, value, checked, files } = event.target
 
-    setOptions((prev) => ({
-      ...prev,
-      [name]: type === 'checkbox' ? checked : value
-    }))
-    if (!files) return
+
+    if (!files) {
+      setOptions((prev) => ({
+        ...prev,
+        [name]: type === 'checkbox' ? checked : value
+      }))
+      return
+    }
 
     const image = files[0]
     uploadError.current = ''
@@ -145,9 +148,11 @@ function App() {
       }
 
       fileReader.onload = () => {
+        const image  = fileReader.result as string
+
         setOptions((prev) => ({
           ...prev,
-          image: fileReader.result as string
+          image: image
         }))
       }
       fileReader.readAsDataURL(image)
@@ -201,7 +206,7 @@ function App() {
       },
       width: options.size,
       height: options.size,
-      image,
+      image: image,
       dotsOptions: {
         type: options.mainShape,
         color: options.shapeColor
@@ -215,7 +220,7 @@ function App() {
         color: options.cornersDotColor
       },
       imageOptions: {
-        margin: options.imageMargin
+        margin: options.imageMargin === undefined ? 0 : options.imageMargin/10,
       }
     })
   }, [qrCode, options])
@@ -322,11 +327,16 @@ function App() {
                   onChange={handleOptions}
                 >
                   <option value='square'>Square</option>
+                  <option value='small-square'>Small square</option>
                   <option value='dots'>Dots</option>
+                  <option value='random-dot'>Random dots</option>
                   <option value='rounded'>Rounded</option>
                   <option value='extra-rounded'>Extra rounded</option>
                   <option value='classy'>Classy</option>
                   <option value='classy-rounded'>Classy rounded</option>
+                  <option value='vertical-line'>Vertical lines</option>
+                  <option value='horizontal-line'>Horizontal lines</option>
+                  <option value='diamond'>Diamond</option>
                 </select>
               </div>
             </div>
@@ -363,9 +373,12 @@ function App() {
                   value={options.squareShape}
                   onChange={handleOptions}
                 >
-                  <option value='square'>Square</option>
-                  <option value='dot'>Dot</option>
-                  <option value='extra-rounded'>Extra rounded</option>
+                  <option value={CornerSquareType.square}>Square</option>
+                  <option value={CornerSquareType.dot}>Dot</option>
+                  <option value={CornerSquareType.extraRounded}>Extra rounded</option>
+                  <option value={CornerSquareType.classy}>Classy</option>
+                  <option value={CornerSquareType.inpoint}>Inpoint</option>
+                  <option value={CornerSquareType.outpoint}>Outpoint</option>
                 </select>
               </div>
             </div>
@@ -402,8 +415,13 @@ function App() {
                   value={options.cornersDotShape}
                   onChange={handleOptions}
                 >
-                  <option value='square'>Square</option>
-                  <option value='dot'>Dot</option>
+                  <option value={CornerDotType.square}>Square</option>
+                  <option value={CornerDotType.dot}>Dot</option>
+                  <option value={CornerDotType.classy}>Classy</option>
+                  <option value={CornerDotType.extraRounded}>Extra rounded</option>
+                  <option value={CornerDotType.heart}>Heart</option>
+                  <option value={CornerDotType.inpoint}>Inpoint</option>
+                  <option value={CornerDotType.outpoint}>Outpoint</option>
                 </select>
               </div>
             </div>
@@ -464,6 +482,7 @@ function App() {
                 <div className='col-sm-6'>
                   <select
                     id='internalImage'
+                    title='Internal Logo'
                     className='form-select'
                     name='image'
                     value={options.image}
@@ -506,6 +525,7 @@ function App() {
                     id='errorCorrectionLevel'
                     className='form-select'
                     name='errorCorrectionLevel'
+                    title='Error Correction Level'
                     value={options.errorCorrectionLevel}
                     onChange={handleOptions}
                   >
diff --git a/src/Components/Download.tsx b/src/Components/Download.tsx
index c35fee6..10a6af6 100644
--- a/src/Components/Download.tsx
+++ b/src/Components/Download.tsx
@@ -1,10 +1,11 @@
 import React, { useCallback, useContext } from 'react'
 import { AppContext } from '../Context'
-
+import { browserUtils } from '@liquid-js/qr-code-styling'
 const Download = (): JSX.Element => {
   const { qrCode } = useContext(AppContext)
 
-  const handleDownload = useCallback((ext: string) => qrCode.download(ext), [qrCode])
+  
+  const handleDownload = useCallback((ext: string) => browserUtils?.download(qrCode, ext as any), [qrCode])
 
   return (
     <div className='d-flex align-items-center pt-4'>
diff --git a/src/Context.tsx b/src/Context.tsx
index 5f8c8c1..b91f978 100644
--- a/src/Context.tsx
+++ b/src/Context.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, createRef, useEffect } from 'react'
-import QRCodeStyling from 'qr-code-styling'
+import {QRCodeStyling} from "@liquid-js/qr-code-styling"
 
 const canvasRef = createRef<HTMLDivElement>()
 
@@ -17,7 +17,9 @@ const qrCode = new QRCodeStyling({
   image: `${window.location.origin}/scanme.svg`,
 
   imageOptions: {
-    crossOrigin: 'anonymous'
+    crossOrigin: 'anonymous',
+    margin: 1,
+    imageSize: 0.5
   }
 })
 
diff --git a/src/index.tsx b/src/index.tsx
index d338533..d404bf9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,16 +1,17 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import ContextProvider from './Context'
 import App from './App'
 import './bootstrap.min.css'
 import './App.css'
 
-ReactDOM.render(
+const container = document.getElementById('root');
+if (!container) throw new Error('Container not found');
+const root = ReactDOM.createRoot(container); // Créez le root avec le conteneur
+root.render(
   <React.StrictMode>
     <ContextProvider>
       <App />
     </ContextProvider>
-  </React.StrictMode>,
-  document.getElementById('root')
-)
-
+  </React.StrictMode>
+);
diff --git a/yarn.lock b/yarn.lock
index c66b1a4..5c6d42f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1619,6 +1619,11 @@
   resolved "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz"
   integrity sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==
 
+"@liquid-js/qr-code-styling@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/@liquid-js/qr-code-styling/-/qr-code-styling-3.1.1.tgz"
+  integrity sha512-tl11pz53jMisrcRgXSOAcTH4WW+pc3u0qG4+SDE8mCVw6gP0gSEpIJSPQcK+tX6q/8w7U+bCe+Kqdewt8dkjAw==
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz"
@@ -4795,6 +4800,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@^2.3.2, fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
@@ -7658,14 +7668,7 @@ q@^1.1.2:
   resolved "https://registry.npmjs.org/q/-/q-1.5.1.tgz"
   integrity sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw==
 
-qr-code-styling@^1.6.0-rc.1:
-  version "1.6.0-rc.1"
-  resolved "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz"
-  integrity sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==
-  dependencies:
-    qrcode-generator "^1.4.3"
-
-qrcode-generator@^1.4.3:
+qrcode-generator@^1.4.4:
   version "1.4.4"
   resolved "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz"
   integrity sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==