Merge pull request #111 from kunai-consulting/qr-code-overlay-reworked

QRCode Overlay reworked.
kunai-consulting · Feb 4, 2025 · 4cbe57e · 4cbe57e
2 parents 0ce6386 + 78c0e44
commit 4cbe57e
Show file tree

Hide file tree

Showing 17 changed files with 235 additions and 169 deletions.
diff --git a/.changeset/grumpy-pets-float.md b/.changeset/grumpy-pets-float.md
@@ -0,0 +1,5 @@
+---
+"@kunai-consulting/qwik": patch
+---
+
+QRCode Overlay reworked.
diff --git a/apps/docs/src/routes/qr-code/examples/base.tsx b/apps/docs/src/routes/qr-code/examples/base.tsx
@@ -1,10 +1,19 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useStyles$ } from "@builder.io/qwik";
 import { QRCode } from "@kunai-consulting/qwik";
+import styles from "./qr-code.css?inline";
 
 export default component$(() => {
+  useStyles$(styles);
   return (
-    <QRCode.Root value="https://qwikui.com" size={200} level="L" margin={4}>
-      <QRCode.Canvas />
+    <QRCode.Root value="https://qwikui.com" level="H">
+      <QRCode.Frame class="qr-code-frame">
+        <QRCode.PatternSvg
+          width="200"
+          height="200"
+        >
+          <QRCode.PatternPath fill="black" />
+        </QRCode.PatternSvg>
+      </QRCode.Frame>
     </QRCode.Root>
   );
 });
diff --git a/apps/docs/src/routes/qr-code/examples/multiple.tsx b/apps/docs/src/routes/qr-code/examples/multiple.tsx
@@ -1,17 +1,40 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useStyles$ } from "@builder.io/qwik";
 import { QRCode } from "@kunai-consulting/qwik";
 import qwikLogo from "~/routes/qr-code/examples/qwik-ui.svg";
+import styles from "./qr-code.css?inline";
 
 export default component$(() => {
+  useStyles$(styles);
   return (
-    <div>
-      <QRCode.Root value="https://qwikui.com" size={200} level="L" margin={4}>
-        <QRCode.Canvas />
+    <div style={{ display: "flex", gap: "20px" }}>
+      <QRCode.Root value="https://qwikui.com" level="H">
+        <QRCode.Frame class="qr-code-frame">
+          <QRCode.PatternSvg
+            width="200"
+            height="200"
+          >
+            <QRCode.PatternPath fill="black" />
+          </QRCode.PatternSvg>
+        </QRCode.Frame>
       </QRCode.Root>
 
-      <QRCode.Root value="https://qwikui.com" size={200} level="H" margin={4}>
-        <QRCode.Canvas />
-        <QRCode.Overlay image={qwikLogo} size={35} />
+      <QRCode.Root value="https://qwikui.com" level="H">
+        <QRCode.Frame class="qr-code-frame">
+          <QRCode.PatternSvg
+            width="200"
+            height="200"
+          >
+            <QRCode.PatternPath fill="black" />
+          </QRCode.PatternSvg>
+        </QRCode.Frame>
+        <QRCode.Overlay>
+          <img
+            src={qwikLogo}
+            alt="Qwik Logo"
+            height={75}
+            width={75}
+          />
+        </QRCode.Overlay>
       </QRCode.Root>
     </div>
   );

diff --git a/apps/docs/src/routes/qr-code/examples/overlay-custom-color.tsx b/apps/docs/src/routes/qr-code/examples/overlay-custom-color.tsx
@@ -1,23 +1,32 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useStyles$ } from "@builder.io/qwik";
 import { QRCode } from "@kunai-consulting/qwik";
 import qwikLogo from "./qwik-ui.svg";
+import styles from "./qr-code.css?inline";
 
 export default component$(() => {
+  useStyles$(styles);
   return (
     <QRCode.Root
       value="https://qwikui.com"
-      size={200}
       level="H"
-      margin={4}
       aria-label="Scan this QR code to visit our website"
-      background="yellow"
-      foreground="black"
     >
-      <QRCode.Overlay
-        image={qwikLogo}
-        size={35}
-      />
-      <QRCode.Canvas />
+      <QRCode.Frame class="qr-code-custom-frame">
+        <QRCode.PatternSvg
+          width="200"
+          height="200"
+        >
+          <QRCode.PatternPath fill="blue" />
+        </QRCode.PatternSvg>
+      </QRCode.Frame>
+      <QRCode.Overlay>
+        <img
+          src={qwikLogo}
+          alt="Qwik Logo"
+          height={75}
+          width={75}
+        />
+      </QRCode.Overlay>
     </QRCode.Root>
   );
 });
diff --git a/apps/docs/src/routes/qr-code/examples/overlay.tsx b/apps/docs/src/routes/qr-code/examples/overlay.tsx
@@ -1,21 +1,28 @@
-import { component$ } from "@builder.io/qwik";
+import { component$, useStyles$ } from "@builder.io/qwik";
 import { QRCode } from "@kunai-consulting/qwik";
 import qwikLogo from "./qwik-ui.svg";
+import styles from "./qr-code.css?inline";
 
 export default component$(() => {
+  useStyles$(styles);
   return (
-    <QRCode.Root
-      value="https://qwikui.com"
-      size={200}
-      level="H"
-      margin={4}
-      aria-label="Scan this QR code to visit our website"
-    >
-      <QRCode.Overlay
-        image={qwikLogo}
-        size={35}
-      />
-      <QRCode.Canvas />
+    <QRCode.Root value="https://qwikui.com" level="H">
+      <QRCode.Frame class="qr-code-frame">
+        <QRCode.PatternSvg
+          width="200"
+          height="200"
+        >
+          <QRCode.PatternPath fill="black" />
+        </QRCode.PatternSvg>
+      </QRCode.Frame>
+      <QRCode.Overlay>
+        <img
+          src={qwikLogo}
+          alt="Qwik Logo"
+          height={75}
+          width={75}
+        />
+      </QRCode.Overlay>
     </QRCode.Root>
   );
 });
diff --git a/apps/docs/src/routes/qr-code/examples/qr-code.css b/apps/docs/src/routes/qr-code/examples/qr-code.css
@@ -0,0 +1,9 @@
+.qr-code-frame {
+    padding: 24px;
+    background: white;
+}
+
+.qr-code-custom-frame {
+    padding: 24px;
+    background: yellow;
+}
diff --git a/libs/components/src/qr-code/index.ts b/libs/components/src/qr-code/index.ts
@@ -1,3 +1,5 @@
 export { QRCodeRoot as Root } from "./qr-code-root";
-export { QRCodeCanvas as Canvas } from "./qr-code-canvas";
+export { QRCodeFrame as Frame } from "./qr-code-frame";
+export { QRCodePatternSvg as PatternSvg } from "./qr-code-pattern-svg";
+export { QRCodePatternPath as PatternPath } from "./qr-code-pattern-path";
 export { QRCodeOverlay as Overlay } from "./qr-code-overlay";
diff --git a/libs/components/src/qr-code/qr-code-canvas.tsx b/libs/components/src/qr-code/qr-code-canvas.tsx
diff --git a/libs/components/src/qr-code/qr-code-context.ts b/libs/components/src/qr-code/qr-code-context.ts
@@ -1,18 +1,9 @@
 import { type Signal, createContextId } from "@builder.io/qwik";
 
-export interface QRCodeOverlay {
-  image: string;
-  size?: number;
-}
-
 export interface QRCodeContext {
   value: Signal<string>;
-  size: Signal<number>;
   level: Signal<"L" | "M" | "Q" | "H">;
-  margin: Signal<number>;
-  overlay: Signal<QRCodeOverlay | undefined>;
-  background: Signal<string>;
-  foreground: Signal<string>;
+  data: Signal<boolean[][]>;
 }
 
 export const qrCodeContextId = createContextId<QRCodeContext>("qr-code-context");
diff --git a/libs/components/src/qr-code/qr-code-frame.tsx b/libs/components/src/qr-code/qr-code-frame.tsx
@@ -0,0 +1,9 @@
+import { type PropsOf, Slot, component$ } from "@builder.io/qwik";
+
+export const QRCodeFrame = component$((props: PropsOf<"div">) => {
+  return (
+    <div data-qds-qr-code-frame {...props}>
+      <Slot />
+    </div>
+  );
+});
diff --git a/libs/components/src/qr-code/qr-code-overlay.tsx b/libs/components/src/qr-code/qr-code-overlay.tsx
@@ -1,23 +1,9 @@
-import { component$, useContext, useTask$ } from "@builder.io/qwik";
-import { qrCodeContextId } from "./qr-code-context";
-
-export interface OverlayProps {
-  image: string;
-  size?: number;
-}
-
-export const QRCodeOverlay = component$<OverlayProps>((props) => {
-  const context = useContext(qrCodeContextId);
-
-  useTask$(({ track }) => {
-    track(() => props.image);
-    track(() => props.size);
-
-    context.overlay.value = {
-      image: props.image,
-      size: props.size
-    };
-  });
-
-  return null;
+import { type PropsOf, Slot, component$ } from "@builder.io/qwik";
+
+export const QRCodeOverlay = component$((props: PropsOf<"div">) => {
+  return (
+    <div {...props} data-qds-qr-overlay>
+      <Slot />
+    </div>
+  );
 });
diff --git a/libs/components/src/qr-code/qr-code-pattern-path.tsx b/libs/components/src/qr-code/qr-code-pattern-path.tsx
@@ -0,0 +1,23 @@
+import { type PropsOf, component$, useContext } from "@builder.io/qwik";
+import { qrCodeContextId } from "./qr-code-context";
+
+export const QRCodePatternPath = component$((props: PropsOf<"path">) => {
+  const context = useContext(qrCodeContextId);
+
+  const pathData = context.data.value.reduce((acc, row, y) => {
+    row.forEach((isBlack, x) => {
+      if (isBlack) {
+        acc += `M ${x} ${y} h 1 v 1 h -1 z `;
+      }
+    });
+    return acc;
+  }, "");
+
+  return (
+    <path
+      {...props}
+      d={pathData}
+      data-qds-qr-pattern-path
+    />
+  );
+});
diff --git a/libs/components/src/qr-code/qr-code-pattern-svg.tsx b/libs/components/src/qr-code/qr-code-pattern-svg.tsx
@@ -0,0 +1,20 @@
+import { type PropsOf, Slot, component$, useContext } from "@builder.io/qwik";
+import { qrCodeContextId } from "./qr-code-context";
+
+export const QRCodePatternSvg = component$((props: PropsOf<"svg">) => {
+  const context = useContext(qrCodeContextId);
+  const size = context.data.value.length;
+
+  const viewBox = `0 0 ${size} ${size}`;
+
+  return (
+    <svg
+      {...props}
+      viewBox={viewBox}
+      data-qds-qr-pattern-svg
+      aria-hidden="true"
+    >
+      <Slot />
+    </svg>
+  );
+});