Add a QRCode component

Run on an Apple M4. renderToString, React 19.2.0 in its production build,
median of 3 rounds of 2000 renders:

qr-code-styling 1.9.2 is absent because it needs a DOM and does not survive
renderToString.

Bundle, esbuild, minified, gzip -9, React external:

Separately, and measuring the library rather than the component proposed here,
there is a published benchmark of the encoder on CI: ubuntu-24.04, Node
v24.21.0, ECL pinned to M, median of 3 runs,
https://qrcode.ttsalpha.com/benchmark.

It is worth quoting only as calibration between two different machines. That
runner is about 1.7x slower than mine on qrcode.react and react-qr-code, and
once that is taken out the proposed component lands where toSVGString lands
rather than where the library's own React component lands, which is what a
render with no effects and no state should do.

Run against a built packages/ui. React, qrcode.react, react-qr-code and
qr-code-styling are installed in a throwaway folder next to the repo.

render-bench.mjs

// Measures the path flowbite-react would actually ship: buildQR geometry
// rendered by a flowbite-react component, against the React QR libraries a
// maintainer would reach for instead. Server rendering, so the numbers are not
// clouded by jsdom.
import { createElement } from "react";
import { renderToString } from "react-dom/server";
import { QRCode } from "../flowbite-react/packages/ui/dist/index.js";
import { QRCodeSVG } from "qrcode.react";
import ReactQRCode from "react-qr-code";

const ITERATIONS = 2000;
const ROUNDS = 3;

const subjects = [
  {
    name: "flowbite-react QRCode",
    render: (value) => renderToString(createElement(QRCode, { value })),
  },
  {
    name: "flowbite-react QRCode (styled)",
    render: (value) =>
      renderToString(
        createElement(QRCode, {
          value,
          dotStyle: "rounded",
          cornerStyle: "extra-rounded",
          cornerColor: "#14b8a6",
        }),
      ),
  },
  {
    name: "qrcode.react",
    render: (value) => renderToString(createElement(QRCodeSVG, { value })),
  },
  {
    name: "react-qr-code",
    render: (value) => renderToString(createElement(ReactQRCode, { value })),
  },
];

function time(subject) {
  for (let i = 0; i < 200; i++)
    subject.render(`https://flowbite-react.com/warmup/${i}`);
  const start = process.hrtime.bigint();
  for (let i = 0; i < ITERATIONS; i++)
    subject.render(`https://flowbite-react.com/docs/${i}`);
  return Number(process.hrtime.bigint() - start) / 1e6;
}

const median = (xs) => [...xs].sort((a, b) => a - b)[Math.floor(xs.length / 2)];

console.log(
  `node ${process.version} | ${ITERATIONS} renders x ${ROUNDS} rounds, median\n`,
);
console.log(
  "library".padEnd(32) + "renders/s".padStart(12) + "ms/render".padStart(12),
);

for (const subject of subjects) {
  const ms = median(Array.from({ length: ROUNDS }, () => time(subject)));
  const perSecond = Math.round((ITERATIONS / ms) * 1000);
  console.log(
    subject.name.padEnd(32) +
      String(perSecond).padStart(12) +
      (ms / ITERATIONS).toFixed(3).padStart(12),
  );
}

run-render-bench.sh

#!/bin/bash
# flowbite-react's dist resolves `react` from the fork's node_modules while the
# bench resolves its own, which React rejects as two copies. Bundling with one
# alias for each collapses them, and the production define keeps the numbers off
# React's development paths.
set -e
cd "$(dirname "$0")"
HERE=$(pwd)
./node_modules/.bin/esbuild render-bench.mjs --bundle --platform=node --format=cjs \
  --define:process.env.NODE_ENV='"production"' \
  --alias:react="$HERE/node_modules/react" \
  --alias:react-dom="$HERE/node_modules/react-dom" \
  --outfile=out-render-bench.cjs --log-level=error
node out-render-bench.cjs

measure-delta.sh

#!/bin/bash
# What a flowbite-react consumer pays for QRCode: the gzip difference between a
# bundle that imports it and one that does not, plus a check that a consumer who
# leaves it alone pays nothing.
set -e
cd "$(dirname "$0")"
UI=../flowbite-react/packages/ui/dist/index.js

build() {
  echo "export { $2 } from \"$UI\";" > "tmp-$1.js"
  ./node_modules/.bin/esbuild "tmp-$1.js" --bundle --minify --format=esm \
    --external:react --external:react-dom --external:react/jsx-runtime \
    --outfile="out-$1.js" --log-level=error
  rm "tmp-$1.js"
}

build baseline "Progress"
build withqr "Progress, QRCode"

base_min=$(wc -c < out-baseline.js)
base_gz=$(gzip -9 -c out-baseline.js | wc -c)
qr_min=$(wc -c < out-withqr.js)
qr_gz=$(gzip -9 -c out-withqr.js | wc -c)

printf '%-28s %10s %10s\n' bundle minified gzip
printf '%-28s %10s %10s\n' "Progress" "$base_min" "$base_gz"
printf '%-28s %10s %10s\n' "Progress + QRCode" "$qr_min" "$qr_gz"
printf '%-28s %10s %10s\n' "delta" "$((qr_min - base_min))" "$((qr_gz - base_gz))"

if grep -q "flowbite-qr-code" out-baseline.js; then
  echo "tree-shaking: FAIL, QRCode reached a bundle that never imports it"
else
  echo "tree-shaking: ok, no QRCode code in the bundle that never imports it"
fi

measure-size.sh

#!/bin/bash
# Minified + gzip -9 size of each QR library, React kept external.
set -e
cd "$(dirname "$0")"
printf '%-22s %10s %10s\n' library minified gzip
for entry in libs/*.js; do
  name=$(basename "$entry" .js)
  ./node_modules/.bin/esbuild "$entry" --bundle --minify --format=esm \
    --external:react --external:react-dom --external:react/jsx-runtime \
    --outfile="out-lib-$name.js" --log-level=error
  min=$(wc -c < "out-lib-$name.js")
  gz=$(gzip -9 -c "out-lib-$name.js" | wc -c)
  printf '%-22s %10s %10s\n' "$name" "$min" "$gz"
done

scan-check.mjs

// Renders every documented variant, rasterises it and decodes it back. A style
// that a decoder cannot read has no business being in the docs.
import { mkdirSync, writeFileSync } from "node:fs";
import { createElement } from "react";
import { renderToStaticMarkup } from "react-dom/server";
import { Resvg } from "@resvg/resvg-js";
import jsQR from "jsqr";
import { QRCode } from "../flowbite-react/packages/ui/dist/index.js";

const VALUE = "https://flowbite-react.com";
const LOGO =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E" +
  "%3Crect width='48' height='48' rx='12' fill='%231a56db'/%3E" +
  "%3Cpath d='M15 24h18M24 15v18' stroke='white' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E";

// `card` is what sits behind the symbol when it is drawn on a transparent
// background, which is how the docs render it: the page card shows through.
const LIGHT = "#ffffff";
const DARK = "#111827";

const variants = [
  ["default", {}],
  ["dot-square", { dotStyle: "square" }],
  ["dot-circle", { dotStyle: "circle" }],
  ["dot-rounded", { dotStyle: "rounded" }],
  ["corner-square", { cornerStyle: "square" }],
  ["corner-rounded", { cornerStyle: "rounded" }],
  ["corner-extra-rounded", { cornerStyle: "extra-rounded" }],
  ["corner-circle", { cornerStyle: "circle", cornerDotStyle: "circle" }],
  ["colors", { dotColor: "#1a56db", backgroundColor: "#eff6ff" }],
  [
    "colors-split",
    {
      dotStyle: "rounded",
      dotColor: "#111827",
      cornerColor: "#14b8a6",
      cornerDotColor: "#f43f5e",
    },
  ],
  ["ecl-L", { errorCorrectionLevel: "L" }],
  ["ecl-M", { errorCorrectionLevel: "M" }],
  ["ecl-Q", { errorCorrectionLevel: "Q" }],
  ["ecl-H", { errorCorrectionLevel: "H" }],
  ["logo-default", { logo: { src: LOGO } }],
  [
    "logo-max",
    { logo: { src: LOGO, size: 1, margin: 1, radius: 1, hideDots: true } },
  ],
  [
    "logo-styled",
    {
      logo: { src: LOGO, size: 0.6, margin: 1, radius: 1, hideDots: true },
      dotStyle: "rounded",
      cornerStyle: "extra-rounded",
    },
  ],
  // Dark mode: currentColor turns the modules light and the card stays dark, so
  // the symbol is inverted. Scanners have to cope with that for the theme story
  // in the docs to hold.
  ["dark-mode", { dotColor: "#ffffff" }, DARK],
  ["dark-mode-rounded", { dotColor: "#ffffff", dotStyle: "rounded" }, DARK],
  [
    "dark-mode-corners",
    { dotColor: "#ffffff", cornerColor: "#14b8a6", cornerDotColor: "#f43f5e" },
    DARK,
  ],
];

mkdirSync("scan-out", { recursive: true });

let failures = 0;
console.log("variant".padEnd(24) + "decoded".padStart(10));

for (const [name, props, card = LIGHT] of variants) {
  const svg = renderToStaticMarkup(
    createElement(QRCode, { value: VALUE, size: 512, ...props }),
  );
  writeFileSync(`scan-out/${name}.svg`, svg);

  const png = new Resvg(svg, {
    fitTo: { mode: "width", value: 512 },
    background: card,
  }).render();
  writeFileSync(`scan-out/${name}.png`, png.asPng());

  const { width, height, pixels } = png;
  const decoded = jsQR(Uint8ClampedArray.from(pixels), width, height);
  const ok = decoded?.data === VALUE;
  if (!ok) failures++;
  console.log(
    name.padEnd(24) +
      (ok ? "ok" : decoded ? "WRONG VALUE" : "FAILED").padStart(10),
  );
}

console.log(
  `\n${variants.length - failures}/${variants.length} variants decoded`,
);
process.exit(failures ? 1 : 0);

run-scan-check.sh

#!/bin/bash
# Same React duplication problem as the render bench, same fix.
set -e
cd "$(dirname "$0")"
HERE=$(pwd)
./node_modules/.bin/esbuild scan-check.mjs --bundle --platform=node --format=cjs \
  --define:process.env.NODE_ENV='"production"' \
  --alias:react="$HERE/node_modules/react" \
  --alias:react-dom="$HERE/node_modules/react-dom" \
  --external:@resvg/resvg-js \
  --outfile=out-scan-check.cjs --log-level=error
node out-scan-check.cjs