feat: enhance QR code component with customizable options

bun.lock

@@ -6,6 +6,7 @@
       "name": "@svelte-atoms/core",
       "dependencies": {
         "@floating-ui/dom": "^1.7.0",
+        "@qrcode-js/browser": "^1.2.0",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "es-toolkit": "^1.37.2",
@@ -188,6 +189,10 @@
 
     "@publint/pack": ["@publint/pack@0.1.2", "", {}, "sha512-S+9ANAvUmjutrshV4jZjaiG8XQyuJIZ8a4utWmN/vW1sgQ9IfBnPndwkmQYw53QmouOIytT874u65HEmu6H5jw=="],
 
+    "@qrcode-js/browser": ["@qrcode-js/browser@1.2.0", "", { "dependencies": { "@qrcode-js/core": "^1.2.0" } }, "sha512-Xea0Rp7UgN9FdocAyY8/0HhBBY7T4F8r/ww8OsoVcC1ftj1XwD9wn5n2yWCwzuYW3rNmBweJGMaYp5hTvwFscQ=="],
+
+    "@qrcode-js/core": ["@qrcode-js/core@1.2.0", "", {}, "sha512-ebwoLU3DPne43moTpApKxSnbpGa9MBsGiKObhDKSw/7nKOhc5OkfLYQA7o8OBUaiRvls1ejsmQzBYIoMMedLKQ=="],
+
     "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.52.4", "", { "os": "android", "cpu": "arm" }, "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA=="],
 
     "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.52.4", "", { "os": "android", "cpu": "arm64" }, "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w=="],

package.json

@@ -452,6 +452,7 @@
 	},
 	"dependencies": {
 		"@floating-ui/dom": "^1.7.0",
+		"@qrcode-js/browser": "^1.2.0",
 		"clsx": "^2.1.1",
 		"date-fns": "^4.1.0",
 		"es-toolkit": "^1.37.2",

src/lib/components/qr-code/index.ts

@@ -1 +1,2 @@
 export { default as QRCode } from './qr-code.svelte';
+export * from './types';

src/lib/components/qr-code/qr-code.stories.svelte

@@ -16,7 +16,10 @@
 		<Root>
 			{#snippet children({})}
 				<div class="flex h-full w-full items-center justify-center">
-					<QrCodeComponent value="Hello World" />
+					<QrCodeComponent
+						class="text-primary-foreground bg-primary size-64 rounded-2xl p-1"
+						value="Hello World 123"
+					/>
 				</div>
 			{/snippet}
 		</Root>

src/lib/components/qr-code/qr-code.svelte

@@ -1,25 +1,75 @@
 <script lang="ts">
-	import { cn } from '$svelte-atoms/core/utils';
-	import { Icon } from '../icon';
-	import type { renderSVG } from 'uqr';
+	import type { QRCodeBrowser } from '@qrcode-js/browser';
+	import { HtmlAtom } from '../atom';
+	import type { QRCodeProps } from './types';
 
-	let { class: klass = '', value = '' } = $props();
+	type Render = typeof QRCodeBrowser;
 
-	type Render = typeof renderSVG;
+	let {
+		class: klass = '',
+		value = '',
+		finder = {
+			round: 0.5
+		},
+		dots = {
+			scale: 0.75,
+			round: 1
+		},
+		drawFunction = 'telegram',
+		gradient = undefined,
+		logo = undefined,
+		margin = undefined,
+		qr = undefined,
+		...restProps
+	}: QRCodeProps = $props();
 
+	let canvasElement: HTMLCanvasElement | undefined = $state();
+
+	let clientWidth = $state(0);
+	let isReady = $state(false);
 	let render: Render | undefined = $state();
+	let computedColor = $state('black');
+
+	import('@qrcode-js/browser').then((result) => {
+		render = result.QRCodeBrowser;
+	});
+
+	$effect(() => {
+		if (!canvasElement) return;
+		if (!render) return;
+		if (!isReady) render;
+
+		// Get the computed color from the canvas element
+		computedColor = getComputedStyle(canvasElement).color;
+
+		const qrcode = render(canvasElement);
 
-	const code = $derived(
-		render?.(value, { blackColor: 'currentColor', whiteColor: 'transparent', border: 0 })
-	);
+		qrcode.setOptions({
+			text: value,
+			size: clientWidth,
+			color: computedColor,
+			dots,
+			finder,
+			drawFunction,
+			...(gradient && { gradient }),
+			...(margin && { margin }),
+			...(logo && { logo }),
+			...(qr && { qr })
+		});
 
-	import('uqr').then((result) => {
-		render = result.renderSVG;
+		qrcode.draw();
 	});
 </script>
 
-<Icon class={cn('aspect-square h-20', klass)}>
-	{#if code}
-		{@html code}
-	{/if}
-</Icon>
+<HtmlAtom class={[klass]} {...restProps}>
+	<div bind:clientWidth class="size-full">
+		<canvas
+			{@attach (node) => {
+				canvasElement = node;
+				isReady = true;
+			}}
+			width={clientWidth}
+			height={clientWidth}
+		></canvas>
+	</div>
+</HtmlAtom>

src/lib/components/qr-code/types.ts

@@ -0,0 +1,15 @@
+import type { QRCodeBrowser } from '@qrcode-js/browser';
+
+type QRCodeOptions = Parameters<ReturnType<typeof QRCodeBrowser>['setOptions']>[0];
+
+export type QRCodeProps = {
+	class?: string;
+	value: string;
+	finder?: QRCodeOptions['finder'];
+	dots?: QRCodeOptions['dots'];
+	drawFunction?: QRCodeOptions['drawFunction'];
+	gradient?: QRCodeOptions['gradient'];
+	logo?: QRCodeOptions['logo'];
+	margin?: QRCodeOptions['margin'];
+	qr?: QRCodeOptions['qr'];
+};