@digigov/ui 0.26.2 → 0.26.3

package/es/app/QrCodeViewer/types.js

@@ -0,0 +1 @@
+export {};

package/es/app/QrCodeViewer/utils.js

@@ -0,0 +1,95 @@
+var DEFAULT_IMG_SCALE = 0.1;
+export var MARGIN_SIZE = 4;
+export function generatePath(modules) {
+  var margin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  var ops = [];
+  modules.forEach(function (row, y) {
+    var start = null;
+    row.forEach(function (cell, x) {
+      if (!cell && start !== null) {
+        // M0 0h7v1H0z injects the space with the move and drops the comma,
+        // saving a char per operation
+        ops.push("M".concat(start + margin, " ").concat(y + margin, "h").concat(x - start, "v1H").concat(start + margin, "z"));
+        start = null;
+        return;
+      } // end of row, clean up or skip
+
+
+      if (x === row.length - 1) {
+        if (!cell) {
+          // We would have closed the op above already so this can only mean
+          // 2+ light modules in a row.
+          return;
+        }
+
+        if (start === null) {
+          // Just a single dark module.
+          ops.push("M".concat(x + margin, ",").concat(y + margin, " h1v1H").concat(x + margin, "z"));
+        } else {
+          // Otherwise finish the current line.
+          ops.push("M".concat(start + margin, ",").concat(y + margin, " h").concat(x + 1 - start, "v1H").concat(start + margin, "z"));
+        }
+
+        return;
+      }
+
+      if (cell && start === null) {
+        start = x;
+      }
+    });
+  });
+  return ops.join('');
+} // We could just do this in generatePath, except that we want to support
+// non-Path2D canvas, so we need to keep it an explicit step.
+
+export function excavateModules(modules, excavation) {
+  return modules.slice().map(function (row, y) {
+    if (y < excavation.y || y >= excavation.y + excavation.h) {
+      return row;
+    }
+
+    return row.map(function (cell, x) {
+      if (x < excavation.x || x >= excavation.x + excavation.w) {
+        return cell;
+      }
+
+      return false;
+    });
+  });
+}
+export function getImageSettings(cells, size, includeMargin, imageSettings) {
+  if (imageSettings == null) {
+    return null;
+  }
+
+  var margin = includeMargin ? MARGIN_SIZE : 0;
+  var numCells = cells.length + margin * 2;
+  var defaultSize = Math.floor(size * DEFAULT_IMG_SCALE);
+  var scale = numCells / size;
+  var w = (imageSettings.width || defaultSize) * scale;
+  var h = (imageSettings.height || defaultSize) * scale;
+  var x = imageSettings.x == null ? cells.length / 2 - w / 2 : imageSettings.x * scale;
+  var y = imageSettings.y == null ? cells.length / 2 - h / 2 : imageSettings.y * scale;
+  var excavation;
+
+  if (imageSettings.excavate) {
+    var floorX = Math.floor(x);
+    var floorY = Math.floor(y);
+    var ceilW = Math.ceil(w + x - floorX);
+    var ceilH = Math.ceil(h + y - floorY);
+    excavation = {
+      x: floorX,
+      y: floorY,
+      w: ceilW,
+      h: ceilH
+    };
+  }
+
+  return {
+    x: x,
+    y: y,
+    h: h,
+    w: w,
+    excavation: excavation
+  };
+}

package/es/app/index.js

@@ -1,6 +1,7 @@
 export * from '@digigov/ui/app/App';
 export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
+export * from '@digigov/ui/app/QrCodeViewer';
 export * from '@digigov/ui/app/Header';
 export * from '@digigov/ui/app/i18n';
 export * from '@digigov/ui/app/I18nText';

package/es/registry.js

@@ -48,6 +48,10 @@ import * as _digigov_ui_app_OutdatedBrowserBanner from '@digigov/ui/app/Outdated
 import * as _digigov_ui_app_PageTitle from '@digigov/ui/app/PageTitle';
 import * as _digigov_ui_app_PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
 import * as _digigov_ui_app_QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
+import * as _digigov_ui_app_QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+import * as _digigov_ui_app_QrCodeViewer_qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
+import * as _digigov_ui_app_QrCodeViewer_types from '@digigov/ui/app/QrCodeViewer/types';
+import * as _digigov_ui_app_QrCodeViewer_utils from '@digigov/ui/app/QrCodeViewer/utils';
 import * as _digigov_ui_core_Accordion from '@digigov/ui/core/Accordion';
 import * as _digigov_ui_core_BackLink from '@digigov/ui/core/BackLink';
 import * as _digigov_ui_core_Base from '@digigov/ui/core/Base';
@@ -216,6 +220,10 @@ export default {
   '@digigov/ui/app/PageTitle': lazyImport(_digigov_ui_app_PageTitle),
   '@digigov/ui/app/PhaseBannerHeader': lazyImport(_digigov_ui_app_PhaseBannerHeader),
   '@digigov/ui/app/QrCodeScanner': lazyImport(_digigov_ui_app_QrCodeScanner),
+  '@digigov/ui/app/QrCodeViewer': lazyImport(_digigov_ui_app_QrCodeViewer),
+  '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(_digigov_ui_app_QrCodeViewer_qrcodegen),
+  '@digigov/ui/app/QrCodeViewer/types': lazyImport(_digigov_ui_app_QrCodeViewer_types),
+  '@digigov/ui/app/QrCodeViewer/utils': lazyImport(_digigov_ui_app_QrCodeViewer_utils),
   '@digigov/ui/core/Accordion': lazyImport(_digigov_ui_core_Accordion),
   '@digigov/ui/core/BackLink': lazyImport(_digigov_ui_core_BackLink),
   '@digigov/ui/core/Base': lazyImport(_digigov_ui_core_Base),

package/esm/app/QrCodeViewer/QRCode.stories.js

@@ -0,0 +1,8 @@
+/* eslint-disable digigov/no-relative-imports */
+import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+export default {
+  title: 'Digigov UI/app/QrCodeViewer',
+  component: QrCodeViewer
+};
+export * from './__stories__/Default';
+export * from './__stories__/Custom';

package/esm/app/QrCodeViewer/__stories__/Custom.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+import logo from '@digigov/ui/govgr/images/greek-government-base64';
+export var Custom = function Custom() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(QrCodeViewer, {
+    value: "https://www.gov.gr/",
+    size: 126,
+    bgColor: '#ededed',
+    fgColor: '#003375',
+    level: 'H',
+    includeMargin: false,
+    imageSettings: {
+      src: "".concat(logo),
+      x: undefined,
+      y: undefined,
+      height: 35,
+      width: 50,
+      excavate: true
+    }
+  }));
+};
+export default Custom;

package/esm/app/QrCodeViewer/__stories__/Default.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+
+var _ref = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(QrCodeViewer, {
+  value: "https://www.gov.gr/"
+}));
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/app/QrCodeViewer/index.js

@@ -0,0 +1,224 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "style", "imageSettings"],
+    _excluded2 = ["value", "size", "level", "bgColor", "fgColor", "includeMargin", "imageSettings"],
+    _excluded3 = ["renderAs"];
+import React, { useRef, useEffect, useState } from 'react';
+import qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
+import { generatePath, excavateModules, getImageSettings, MARGIN_SIZE } from '@digigov/ui/app/QrCodeViewer/utils';
+var DEFAULT_SIZE = 128;
+var DEFAULT_LEVEL = 'L';
+var DEFAULT_BGCOLOR = '#FFFFFF';
+var DEFAULT_FGCOLOR = '#000000';
+var DEFAULT_INCLUDEMARGIN = false;
+
+var SUPPORTS_PATH2D = function () {
+  try {
+    new Path2D().addPath(new Path2D());
+  } catch (e) {
+    return false;
+  }
+
+  return true;
+}();
+
+var ERROR_LEVEL_MAP = {
+  L: qrcodegen.QrCode.Ecc.LOW,
+  M: qrcodegen.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen.QrCode.Ecc.QUARTILE,
+  H: qrcodegen.QrCode.Ecc.HIGH
+};
+
+function QrCodeViewerCanvas(props) {
+  var value = props.value,
+      _props$size = props.size,
+      size = _props$size === void 0 ? DEFAULT_SIZE : _props$size,
+      _props$level = props.level,
+      level = _props$level === void 0 ? DEFAULT_LEVEL : _props$level,
+      _props$bgColor = props.bgColor,
+      bgColor = _props$bgColor === void 0 ? DEFAULT_BGCOLOR : _props$bgColor,
+      _props$fgColor = props.fgColor,
+      fgColor = _props$fgColor === void 0 ? DEFAULT_FGCOLOR : _props$fgColor,
+      _props$includeMargin = props.includeMargin,
+      includeMargin = _props$includeMargin === void 0 ? DEFAULT_INCLUDEMARGIN : _props$includeMargin,
+      style = props.style,
+      imageSettings = props.imageSettings,
+      otherProps = _objectWithoutProperties(props, _excluded);
+
+  var imgSrc = imageSettings === null || imageSettings === void 0 ? void 0 : imageSettings.src;
+
+  var _canvas = useRef(null);
+
+  var _image = useRef(null); // We're just using this state to trigger rerenders when images load. We
+  // Don't actually read the value anywhere. A smarter use of useEffect would
+  // depend on this value.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isImgLoaded = _useState2[0],
+      setIsImageLoaded = _useState2[1];
+
+  useEffect(function () {
+    // Always update the canvas. It's cheap enough and we want to be correct
+    // with the current state.
+    if (_canvas.current !== null) {
+      var canvas = _canvas.current;
+      var ctx = canvas.getContext('2d');
+
+      if (!ctx) {
+        return;
+      }
+
+      var cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+      var margin = includeMargin ? MARGIN_SIZE : 0;
+      var numCells = cells.length + margin * 2;
+      var calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
+      var image = _image.current;
+      var haveImageToRender = calculatedImageSettings != null && image !== null && image.complete && image.naturalHeight !== 0 && image.naturalWidth !== 0;
+
+      if (haveImageToRender && calculatedImageSettings) {
+        if (calculatedImageSettings.excavation != null) {
+          cells = excavateModules(cells, calculatedImageSettings.excavation);
+        }
+      } // We're going to scale this so that the number of drawable units
+      // matches the number of cells. This avoids rounding issues, but does
+      // result in some potentially unwanted single pixel issues between
+      // blocks, only in environments that don't support Path2D.
+
+
+      var pixelRatio = window.devicePixelRatio || 1;
+      canvas.height = canvas.width = size * pixelRatio;
+      var scale = size / numCells * pixelRatio;
+      ctx.scale(scale, scale); // Draw solid background, only paint dark modules.
+
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, numCells, numCells);
+      ctx.fillStyle = fgColor;
+
+      if (SUPPORTS_PATH2D) {
+        // $FlowFixMe: Path2D c'tor doesn't support args yet.
+        ctx.fill(new Path2D(generatePath(cells, margin)));
+      } else {
+        cells.forEach(function (row, rdx) {
+          row.forEach(function (cell, cdx) {
+            if (cell) {
+              ctx.fillRect(cdx + margin, rdx + margin, 1, 1);
+            }
+          });
+        });
+      }
+
+      if (haveImageToRender && calculatedImageSettings) {
+        if (image instanceof HTMLImageElement) {
+          ctx.drawImage(image, calculatedImageSettings.x + margin, calculatedImageSettings.y + margin, calculatedImageSettings.w, calculatedImageSettings.h);
+        }
+      }
+    }
+  }); // Ensure we mark image loaded as false here so we trigger updating the
+  // canvas in our other effect.
+
+  useEffect(function () {
+    setIsImageLoaded(false);
+  }, [imgSrc, isImgLoaded]);
+
+  var canvasStyle = _extends({
+    height: size,
+    width: size
+  }, style);
+
+  var img;
+
+  if (imgSrc != null) {
+    img = /*#__PURE__*/React.createElement("img", {
+      src: imgSrc,
+      key: imgSrc,
+      style: {
+        display: 'none'
+      },
+      onLoad: function onLoad() {
+        setIsImageLoaded(true);
+      },
+      ref: _image
+    });
+  }
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", _extends({
+    style: canvasStyle,
+    height: size,
+    width: size,
+    ref: _canvas
+  }, otherProps)), img);
+}
+
+function QrCodeViewerSVG(props) {
+  var value = props.value,
+      _props$size2 = props.size,
+      size = _props$size2 === void 0 ? DEFAULT_SIZE : _props$size2,
+      _props$level2 = props.level,
+      level = _props$level2 === void 0 ? DEFAULT_LEVEL : _props$level2,
+      _props$bgColor2 = props.bgColor,
+      bgColor = _props$bgColor2 === void 0 ? DEFAULT_BGCOLOR : _props$bgColor2,
+      _props$fgColor2 = props.fgColor,
+      fgColor = _props$fgColor2 === void 0 ? DEFAULT_FGCOLOR : _props$fgColor2,
+      _props$includeMargin2 = props.includeMargin,
+      includeMargin = _props$includeMargin2 === void 0 ? DEFAULT_INCLUDEMARGIN : _props$includeMargin2,
+      imageSettings = props.imageSettings,
+      otherProps = _objectWithoutProperties(props, _excluded2);
+
+  var cells = qrcodegen.QrCode.encodeText(value, ERROR_LEVEL_MAP[level]).getModules();
+  var margin = includeMargin ? MARGIN_SIZE : 0;
+  var numCells = cells.length + margin * 2;
+  var calculatedImageSettings = getImageSettings(cells, size, includeMargin, imageSettings);
+  var image;
+
+  if (imageSettings != null && calculatedImageSettings != null) {
+    if (calculatedImageSettings.excavation != null) {
+      cells = excavateModules(cells, calculatedImageSettings.excavation);
+    }
+
+    image = /*#__PURE__*/React.createElement("image", {
+      xlinkHref: imageSettings.src,
+      height: calculatedImageSettings.h,
+      width: calculatedImageSettings.w,
+      x: calculatedImageSettings.x + margin,
+      y: calculatedImageSettings.y + margin,
+      preserveAspectRatio: "none"
+    });
+  } // Drawing strategy: instead of a rect per module, we're going to create a
+  // single path for the dark modules and layer that on top of a light rect,
+  // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
+  // way faster than DOM ops.
+  // For level 1, 441 nodes -> 2
+  // For level 40, 31329 -> 2
+
+
+  var fgPath = generatePath(cells, margin);
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    height: size,
+    width: size,
+    viewBox: "0 0 ".concat(numCells, " ").concat(numCells)
+  }, otherProps), /*#__PURE__*/React.createElement("path", {
+    fill: bgColor,
+    d: "M0,0 h".concat(numCells, "v").concat(numCells, "H0z"),
+    shapeRendering: "crispEdges"
+  }), /*#__PURE__*/React.createElement("path", {
+    fill: fgColor,
+    d: fgPath,
+    shapeRendering: "crispEdges"
+  }), image);
+}
+
+export var QrCodeViewer = function QrCodeViewer(props) {
+  var renderAs = props.renderAs,
+      otherProps = _objectWithoutProperties(props, _excluded3);
+
+  if (renderAs === 'svg') {
+    return /*#__PURE__*/React.createElement(QrCodeViewerSVG, otherProps);
+  }
+
+  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, otherProps);
+};
+export default QrCodeViewer;

package/esm/app/QrCodeViewer/index.mdx

@@ -0,0 +1,21 @@
+---
+id: qr-code
+title: QrCodeViewer
+
+---
+
+```bash
+import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+``` 
+
+## How to use
+
+### Default QrCodeViewer
+
+<Story packageName="@digigov/ui" component="app/QrCodeViewer" story="Default.tsx" />
+
+### Custom QrCodeViewer
+
+<Story packageName="@digigov/ui" component="app/QrCodeViewer" story="Custom.tsx" />
+
+