@shelfadmin/qr-design-kit

Typed QR code design rendering kit for ShelfAdmin tenants. It wraps qr-code-styling behind a small, serializable configuration type so tenant QR designs can be stored as JSON and rendered client-side in real time.

Install

npm install @shelfadmin/qr-design-kit

The consuming apps in this monorepo install it from the local checkout, e.g. in fogotex-backoffice/package.json:

{
  "dependencies": {
    "@shelfadmin/qr-design-kit": "file:../qr-design-kit"
  }
}

Run npm run build in this package first so dist/ exists.

Concepts

A QrDesignConfig describes how a QR looks (dot shape/color, corner styles, gradients, background, center image sizing, error-correction level). It is a subset of the underlying library options and is safe to persist in a jsonb column or send over the wire.

The QR payload (the encoded URL) is provided separately at render time, so a single design renders many different units without storing anything per unit.

Usage

Live preview in the DOM

import { renderQrDesign, DEFAULT_QR_DESIGN } from "@shelfadmin/qr-design-kit";

const qr = renderQrDesign({
  data: "https://tenant.shelfadmin.com/scan/tenant/units/123",
  config: DEFAULT_QR_DESIGN,
  logoUrl: "https://.../logo.png",
  size: 256,
});

qr.append(document.getElementById("qr-container")!);

Data URL / Blob (previews, uploads, downloads)

import { qrDesignToDataUrl, qrDesignToBlob } from "@shelfadmin/qr-design-kit";

const dataUrl = await qrDesignToDataUrl({ data, config });     // PNG data URL
const blob = await qrDesignToBlob({ data, config }, "png");    // for upload/download

Exports

• QrDesignConfig and related types (QrDotType, QrGradient, ...)
• DEFAULT_QR_DESIGN — baseline classic-square design used as a fallback
• renderQrDesign(params) — returns a qr-code-styling instance
• buildQrOptions(params) — maps a config to raw qr-code-styling options
• qrDesignToDataUrl(params, ext?) / qrDesignToBlob(params, ext?)

Development

npm install
npm run build       # bundle to dist/ (ESM + CJS + d.ts)
npm run typecheck