remove qrious from frontend to use node qrcode

frontend/package.json

@@ -48,7 +48,6 @@
     "pg": "^8.11.3",
     "postgres": "^3.4.3",
     "qrcode": "^1.5.3",
-    "qrious": "^4.0.2",
     "svelte-sonner": "^0.3.10",
     "tailwind-merge": "^2.0.0",
     "tailwind-variants": "^0.1.18",

frontend/src/lib/components/QR.svelte

@@ -1,18 +1,11 @@
 <script>
-	import { onMount } from 'svelte'
-	import { default as QrCode } from 'qrious'
+	import QRCode from 'qrcode'
 	import Button from './ui/button/button.svelte'
 	import { toast } from 'svelte-sonner'
 
-	const QRcode = new QrCode()
-
-	export let errorCorrection = 'L'
 	export let background = '#fff'
 	export let color = '#000'
-	export let size = '300'
 	export let value = ''
-	export let padding = 10
-	export let className = 'qrcode'
 	export let code = ''
 
 	let image = ''
@@ -38,21 +31,24 @@
 		}
 	}
 
-	function generateQrCode() {
-		QRcode.set({
-			background,
-			foreground: color,
-			level: errorCorrection,
-			padding,
-			size,
-			value,
-		})
-
-		image = QRcode.toDataURL()
-	}
-
-	export function getImage() {
-		return image
+	async function generateQrCode() {
+		try {
+			image = await QRCode.toDataURL(value, {
+				errorCorrectionLevel: 'L',
+				margin: 1,
+				scale: 20,
+				color: {
+					light: background,
+					dark: color,
+				},
+			})
+		} catch (e) {
+			image = await QRCode.toDataURL(value, {
+				errorCorrectionLevel: 'L',
+				margin: 1,
+				scale: 20,
+			})
+		}
 	}
 
 	$: {
@@ -60,13 +56,9 @@
 			generateQrCode()
 		}
 	}
-
-	onMount(() => {
-		generateQrCode()
-	})
 </script>
 
-<img src={image} alt={value} class={className} />
+<img src={image} alt={value} width={300} height={300} />
 <div class="flex w-full gap-4">
 	<Button class="w-full" on:click={copyImageToClipboard}
 		>Copy Image</Button>

frontend/src/routes/(app)/settings/qr/(components)/DemoQR.svelte

@@ -1,32 +1,31 @@
 <script>
 	import { onMount } from 'svelte'
-	import { default as QrCode } from 'qrious'
+	import QRCode from 'qrcode'
 
-	export let errorCorrection = 'L'
 	export let background = '#fff'
 	export let color = '#000'
-	export let size = '300'
 	export let value = 'example.com/abcdefgh'
-	export let padding = 10
-	export let className = 'qrcode'
 
 	let image = ''
 
-	function generateQrCode() {
+	async function generateQrCode() {
 		if (!document || !window) {
 			return
 		}
-		const QRcode = new QrCode()
-		QRcode.set({
-			background,
-			foreground: color,
-			level: errorCorrection,
-			padding,
-			size,
-			value,
-		})
 
-		image = QRcode.toDataURL()
+		try {
+			image = await QRCode.toDataURL(value, {
+				errorCorrectionLevel: 'L',
+				margin: 1,
+				scale: 20,
+				color: {
+					light: background,
+					dark: color,
+				},
+			})
+		} catch (e) {
+			image = ''
+		}
 	}
 
 	onMount(() => {
@@ -34,4 +33,4 @@
 	})
 </script>
 
-<img src={image} alt={value} class={className} />
+<img src={image} alt={value} width={300} height={300} />