@digigov/ui 1.0.0-88820b1e → 1.0.0-8b33e4c8

package/es/app/QrCodeScanner/__stories__/Default.js

@@ -1,52 +0,0 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { Suspense, useState } from 'react';
-import { QrCodeScanner } from '@digigov/ui/app/QrCodeScanner';
-import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
-import { Heading } from '@digigov/ui/typography/Heading';
-
-var _ref = /*#__PURE__*/React.createElement("div", null, "Loading...");
-
-export var Default = function Default() {
-  var _useState = useState({
-    message: ''
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      error = _useState2[0],
-      setError = _useState2[1];
-
-  var validate = function validate(rawData) {
-    var url = new URL(rawData);
-    return url.origin === window.location.origin;
-  };
-
-  var handleScan = function handleScan(data) {
-    if (data) {
-      var url = new URL(data);
-      setError({
-        message: ''
-      });
-      alert('The page will navigate to ' + url.pathname); // or you can use the router to redirect like so:
-      // eg. router.push(url.pathname);
-    }
-  };
-
-  var handleError = function handleError() {
-    setError({
-      message: 'scan.data_error'
-    });
-  };
-
-  return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: _ref
-  }, /*#__PURE__*/React.createElement(QrCodeScanner, {
-    style: {
-      maxWidth: '400px'
-    },
-    validate: validate,
-    onScan: handleScan,
-    onError: handleError
-  }, error.message && /*#__PURE__*/React.createElement(ErrorSummary, null, /*#__PURE__*/React.createElement(Heading, {
-    size: "sm"
-  }, error.message))));
-};
-export default Default;

package/es/app/QrCodeScanner/index.js

@@ -1,66 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "validate", "onScan", "onError", "dataType", "legacyMode"];
-import React from 'react';
-var QrReader = /*#__PURE__*/React.lazy(function () {
-  return import('@uides/react-qr-reader');
-});
-
-/**
- * QRCodeScanner assumes that the data provided inside the QR code image,
- * are a HTTP link, thus it uses the `encodeURI` function to escape
- * all scanned data that will be forwarded to the `onScan` function
- *
- * When a QR code is scanned, before we run the `onScan` callback function,
- * we do the following:
- *
- * 1. Run a validator function provided in the props of QrCodeScanner component
- *    that receives the *raw* scanned data and returns a boolean type. (eg. check
- *    if it's a gov.gr subdomain, or that it matches the current domain)
- * 2. If the validator returns `true`, then construct a URL object from the data provided
- *    and check if the protocol is `https` and the `origin` is the same as the origin of this page
- * 2. Automatically fallback to the `onError` callback function, if the validation or url check fail
- * 3. Finally, run `onScan` callback function with the scanned data encoded as a URI.
- *
- */
-export var QrCodeScanner = function QrCodeScanner(_ref) {
-  var children = _ref.children,
-      validate = _ref.validate,
-      onScan = _ref.onScan,
-      onError = _ref.onError,
-      _ref$dataType = _ref.dataType,
-      dataType = _ref$dataType === void 0 ? 'url' : _ref$dataType,
-      _ref$legacyMode = _ref.legacyMode,
-      legacyMode = _ref$legacyMode === void 0 ? false : _ref$legacyMode,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  if (dataType === 'text') {
-    console.warn("Security Warning! The `text` dataType could be used to inject XSS code to your application database or user DOM.\n\nIn order to be safe, you can:\n1. Use a sanitizer function inside the `onScan` callback function that makes sure the data is not posing a threat to your app\n2. Contact @digigov-ui for any further details and feature requests.\n3. Read more about xss https://owasp.org/www-community/attacks/xss/\n");
-  }
-
-  var handleOnScan = function handleOnScan(data) {
-    if (data) {
-      if (dataType === 'url') {
-        if (!data.match(/^https?:\/\/([a-z0-9-]*\.?)*(:?)(([a-z0-9-]*)\/)*([a-z0-9-]*)$/gi)) {
-          return onError(new Error('@digigov-ui XSS Validation failed: qr code payload should follow the pattern `https://example.com/data/:id`'));
-        }
-      } // run a validator function provided by the application code
-
-
-      if (validate && !validate(data)) {
-        return onError(new Error('Custom QR Code payload validation failed'));
-      } // proceed with application defined callback function
-
-
-      onScan(data);
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QrReader, _extends({
-    delay: 100,
-    onError: onError,
-    onScan: handleOnScan,
-    legacyMode: legacyMode
-  }, props)), children);
-};
-export default QrCodeScanner;

package/es/app/QrCodeScanner/index.spec.js

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { mount } from 'enzyme';
-import QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
-it('renders the qr code scanner', function () {
-  expect(mount( /*#__PURE__*/React.createElement(React.Suspense, {
-    fallback: "<div>loading...</div>"
-  }, /*#__PURE__*/React.createElement(QrCodeScanner, {
-    onScan: function onScan(args) {
-      console.log(args);
-    },
-    onError: function onError(args) {
-      console.log(args);
-    }
-  })))).toMatchSnapshot();
-});

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

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

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

@@ -1,22 +0,0 @@
-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/es/app/QrCodeViewer/__stories__/Default.js

@@ -1,11 +0,0 @@
-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/es/app/QrCodeViewer/index.js

@@ -1,156 +0,0 @@
-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"];
-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
-};
-var QrCodeViewerCanvas = /*#__PURE__*/React.forwardRef(function QrCodeViewerCanvas(props, ref) {
-  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 = ref || 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);
-});
-export var QrCodeViewer = /*#__PURE__*/React.forwardRef(function QrCodeViewer(props, ref) {
-  return /*#__PURE__*/React.createElement(QrCodeViewerCanvas, _extends({}, props, {
-    ref: ref
-  }));
-});