@digigov/ui 2.0.0-f2d82d25 → 2.0.0-rc.0

package/app/QrCodeScanner/QrCodeScanner.stories.d.ts

@@ -1,8 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { QrCodeScanner as component };
-    export let displayName: string;
-}
-export default _default;
-export * from "@digigov/ui/app/QrCodeScanner/__stories__/Default";
-import QrCodeScanner from '@digigov/ui/app/QrCodeScanner';

package/app/QrCodeScanner/__snapshots__/index.spec.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders the qr code scanner 1`] = `
-<Suspense
-  fallback="<div>loading...</div>"
->
-  <QrCodeScanner
-    onError={[Function]}
-    onScan={[Function]}
-  />
-  &lt;div&gt;loading...&lt;/div&gt;
-</Suspense>
-`;

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

@@ -1,51 +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) {
-    if (rawData) {
-      var url = new URL(rawData);
-      return url.origin === window.location.origin;
-    } else {
-      return false;
-    }
-  };
-  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/app/QrCodeScanner/__stories__/Default/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "main": "../../../../cjs/app/QrCodeScanner/__stories__/Default/index.js"
-}

package/app/QrCodeScanner/__stories__/Default.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const Default: () => JSX.Element;
-export default Default;

package/app/QrCodeScanner/index.d.ts

@@ -1,34 +0,0 @@
-import React from 'react';
-export interface QrCodeScannerProps {
-    style?: React.CSSProperties;
-    dataType?: 'url' | 'text';
-    legacyMode?: boolean;
-    validate?: (...args: any[]) => boolean;
-    onScan: (...args: any[]) => void;
-    onError: (err: any, data: any) => void;
-    onLoad?: (...args: any[]) => void;
-    onImageLoad?: (...args: any[]) => void;
-    delay?: number;
-    facingMode?: 'user' | 'environment';
-    showViewFinder?: boolean;
-    className?: string;
-}
-/**
- * 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 declare const QrCodeScanner: React.FC<QrCodeScannerProps>;
-export default QrCodeScanner;

package/app/QrCodeScanner/index.js

@@ -1,63 +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') {
-        try {
-          new URL(data);
-        } catch (e) {
-          return onError(new Error('@digigov-ui XSS Validation failed: qr code payload should follow the pattern `https://dilosi.services.gov.gr/show/:reference_code`'), data);
-        }
-      }
-      // run a validator function provided by the application code
-      if (validate && !validate(data)) {
-        return onError(new Error('Custom QR Code payload validation failed'), data);
-      }
-      // 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/app/QrCodeScanner/index.spec/index.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/app/QrCodeScanner/index.spec/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "main": "../../../cjs/app/QrCodeScanner/index.spec/index.js"
-}

package/app/QrCodeScanner/index.spec.d.ts

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

package/app/QrCodeScanner/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "main": "../../cjs/app/QrCodeScanner/index.js"
-}

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

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

package/app/QrCodeViewer/QRCode.stories/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "main": "../../../cjs/app/QrCodeViewer/QRCode.stories/index.js"
-}

package/app/QrCodeViewer/QRCode.stories.d.ts

@@ -1,8 +0,0 @@
-declare namespace _default {
-    export let title: string;
-    export { QrCodeViewer as component };
-    export let displayName: string;
-}
-export default _default;
-export * from "@digigov/ui/app/QrCodeViewer/__stories__/Default";
-export * from "@digigov/ui/app/QrCodeViewer/__stories__/Custom";

package/app/QrCodeViewer/__stories__/Custom/index.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/app/QrCodeViewer/__stories__/Custom/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "main": "../../../../cjs/app/QrCodeViewer/__stories__/Custom/index.js"
-}

package/app/QrCodeViewer/__stories__/Custom.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const Custom: () => JSX.Element;
-export default Custom;

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

@@ -1,9 +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/app/QrCodeViewer/__stories__/Default/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "main": "../../../../cjs/app/QrCodeViewer/__stories__/Default/index.js"
-}

package/app/QrCodeViewer/__stories__/Default.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-export declare const Default: () => JSX.Element;
-export default Default;

package/app/QrCodeViewer/index.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { QRPropsCanvas } from '@digigov/ui/app/QrCodeViewer/types';
-export interface QrCodeViewerProps extends QRPropsCanvas {
-}
-export declare const QrCodeViewer: React.ForwardRefExoticComponent<QrCodeViewerProps & React.RefAttributes<unknown>>;

package/app/QrCodeViewer/index.js

@@ -1,142 +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 _canvasRef = useRef(null);
-  var _canvas = ref || _canvasRef;
-  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
-  }));
-});

package/app/QrCodeViewer/index.mdx

@@ -1,30 +0,0 @@
----
-id: qr-code-viewer
-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"
-/>
-
-## API
-
-<PropTypes packageName="@digigov/ui" component="QrCodeViewer" />

package/app/QrCodeViewer/package.json

@@ -1,6 +0,0 @@
-{
-  "sideEffects": false,
-  "module": "./index.js",
-  "types": "./index.d.ts",
-  "main": "../../cjs/app/QrCodeViewer/index.js"
-}