QRCode

1import { Text as PDFText, Rect, StyleSheet, Svg, View } from '@react-pdf/renderer';
2import type { Style } from '@react-pdf/types';
3import QRCode from 'qrcode';
4import { usePdfxTheme, useSafeMemo } from '../lib/pdfx-theme-context';
5type PdfxTheme = ReturnType<typeof usePdfxTheme>;
6 
7export type QRCodeErrorLevel = 'L' | 'M' | 'Q' | 'H';
8 
9/**
10 * QR code rendered as an SVG grid for use in PDF documents.
11 * Props - `value` | `size` | `color` | `backgroundColor` | `errorLevel` | `margin` | `caption` | `style`
12 * @see {@link PdfQRCodeProps}
13 */
14export interface PdfQRCodeProps {
15  /** Custom styles to merge with component defaults */
16  style?: Style;
17  value: string;
18  size?: number;
19  color?: string;
20  backgroundColor?: string;
21  errorLevel?: QRCodeErrorLevel;
22  margin?: number;
23  caption?: string;
24  children?: never;
25}
26 
27const THEME_COLOR_KEYS = ['foreground','muted','mutedForeground','primary','primaryForeground','accent','destructive','success','warning','info'] as const;
28function resolveColor(value: string, colors: Record<string, string>): string {
29  return THEME_COLOR_KEYS.includes(value as (typeof THEME_COLOR_KEYS)[number]) ? colors[value] : value;
30}
31function createQRCodeStyles(t: PdfxTheme) {
32  const { spacing } = t.primitives;
33  return StyleSheet.create({
34    container: { alignItems: 'center' },
35    caption: {
36      fontFamily: t.typography.body.fontFamily,
37      fontSize: t.primitives.typography.xs,
38      color: t.colors.mutedForeground,
39      marginTop: spacing[1],
40      textAlign: 'center',
41    },
42  });
43}
44 
45function generateQRMatrix(
46  value: string,
47  errorLevel: QRCodeErrorLevel,
48  margin: number
49): boolean[][] {
50  const qr = QRCode.create(value, { errorCorrectionLevel: errorLevel });
51  const { size, data } = qr.modules;
52  const totalSize = size + margin * 2;
53  const matrix: boolean[][] = [];
54  for (let row = 0; row < totalSize; row++) {
55    const rowData: boolean[] = [];
56    for (let col = 0; col < totalSize; col++) {
57      const isInMargin =
58        row < margin || row >= size + margin || col < margin || col >= size + margin;
59      if (isInMargin) {
60        rowData.push(false);
61      } else {
62        rowData.push(data[(row - margin) * size + (col - margin)] === 1);
63      }
64    }
65    matrix.push(rowData);
66  }
67  return matrix;
68}
69 
70export function PdfQRCode({
71  value,
72  size = 100,
73  color = '#000000',
74  backgroundColor = '#ffffff',
75  errorLevel = 'M',
76  margin = 2,
77  caption,
78  style,
79}: PdfQRCodeProps) {
80  const theme = usePdfxTheme();
81// … truncated