@digigov/ui 0.28.3 → 0.29.0

package/src/app/QrCodeScanner/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+
+const QrReader = React.lazy(() => import('@uides/react-qr-reader'));
+
+export interface QrCodeScannerProps {
+  style?: React.CSSProperties;
+  dataType?: 'url' | 'text';
+  legacyMode?: boolean;
+  validate?: (...args) => boolean;
+  onScan: (...args) => void;
+  onError: (err: any) => void;
+  onLoad?: (...args) => void;
+  onImageLoad?: (...args) => 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 const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
+  children,
+  validate,
+  onScan,
+  onError,
+  dataType = 'url',
+  legacyMode = false,
+  ...props
+}) => {
+  if (dataType === 'text') {
+    console.warn(
+      `Security Warning! The \`text\` dataType could be used to inject XSS code to your application database or user DOM.
+
+In order to be safe, you can:
+1. Use a sanitizer function inside the \`onScan\` callback function that makes sure the data is not posing a threat to your app
+2. Contact @digigov-ui for any further details and feature requests.
+3. Read more about xss https://owasp.org/www-community/attacks/xss/
+`
+    );
+  }
+  const 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 (
+    <>
+      <QrReader
+        delay={100}
+        onError={onError}
+        onScan={handleOnScan}
+        legacyMode={legacyMode}
+        {...props}
+      />
+      {children}
+    </>
+  );
+};
+
+export default QrCodeScanner;

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

@@ -0,0 +1,10 @@
+/* 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/src/app/QrCodeViewer/__stories__/Custom.tsx

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

package/src/app/QrCodeViewer/__stories__/Default.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { QrCodeViewer } from '@digigov/ui/app/QrCodeViewer';
+export const Default = () => (
+  <div>
+    <QrCodeViewer value="https://www.gov.gr/"></QrCodeViewer>
+  </div>
+);
+
+export default Default;

package/src/app/QrCodeViewer/index.mdx

@@ -0,0 +1,28 @@
+---
+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" />
+
+
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="QrCodeViewer" />

package/src/app/QrCodeViewer/index.tsx

@@ -0,0 +1,175 @@
+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';
+import { QRPropsCanvas } from '@digigov/ui/app/QrCodeViewer/types';
+
+const DEFAULT_SIZE = 128;
+const DEFAULT_LEVEL = 'L';
+const DEFAULT_BGCOLOR = '#FFFFFF';
+const DEFAULT_FGCOLOR = '#000000';
+const DEFAULT_INCLUDEMARGIN = false;
+
+const SUPPORTS_PATH2D = (function () {
+  try {
+    new Path2D().addPath(new Path2D());
+  } catch (e) {
+    return false;
+  }
+  return true;
+})();
+const ERROR_LEVEL_MAP: { [index: string]: qrcodegen.QrCode.Ecc } = {
+  L: qrcodegen.QrCode.Ecc.LOW,
+  M: qrcodegen.QrCode.Ecc.MEDIUM,
+  Q: qrcodegen.QrCode.Ecc.QUARTILE,
+  H: qrcodegen.QrCode.Ecc.HIGH,
+};
+
+function QrCodeViewerCanvas(props: QRPropsCanvas) {
+  const {
+    value,
+    size = DEFAULT_SIZE,
+    level = DEFAULT_LEVEL,
+    bgColor = DEFAULT_BGCOLOR,
+    fgColor = DEFAULT_FGCOLOR,
+    includeMargin = DEFAULT_INCLUDEMARGIN,
+    style,
+    imageSettings,
+    ...otherProps
+  } = props;
+  const imgSrc = imageSettings?.src;
+  const _canvas = useRef<HTMLCanvasElement>(null);
+  const _image = useRef<HTMLImageElement>(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
+  const [isImgLoaded, setIsImageLoaded] = useState(false);
+
+  useEffect(() => {
+    // Always update the canvas. It's cheap enough and we want to be correct
+    // with the current state.
+    if (_canvas.current !== null) {
+      const canvas = _canvas.current;
+
+      const ctx = canvas.getContext('2d');
+      if (!ctx) {
+        return;
+      }
+
+      let cells = qrcodegen.QrCode.encodeText(
+        value,
+        ERROR_LEVEL_MAP[level]
+      ).getModules();
+
+      const margin = includeMargin ? MARGIN_SIZE : 0;
+      const numCells = cells.length + margin * 2;
+      const calculatedImageSettings = getImageSettings(
+        cells,
+        size,
+        includeMargin,
+        imageSettings
+      );
+
+      const image = _image.current;
+      const 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.
+      const pixelRatio = window.devicePixelRatio || 1;
+      canvas.height = canvas.width = size * pixelRatio;
+      const 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(() => {
+    setIsImageLoaded(false);
+  }, [imgSrc, isImgLoaded]);
+
+  const canvasStyle = { height: size, width: size, ...style };
+  let img;
+  if (imgSrc != null) {
+    img = (
+      <img
+        src={imgSrc}
+        key={imgSrc}
+        style={{ display: 'none' }}
+        onLoad={() => {
+          setIsImageLoaded(true);
+        }}
+        ref={_image}
+      />
+    );
+  }
+  return (
+    <>
+      <canvas
+        style={canvasStyle}
+        height={size}
+        width={size}
+        ref={_canvas}
+        {...otherProps}
+      />
+      {img}
+    </>
+  );
+}
+
+export interface QrCodeViewerProps extends QRPropsCanvas {}
+
+export const QrCodeViewer = (props: QrCodeViewerProps): React.ReactElement => {
+  return <QrCodeViewerCanvas {...props} />;
+};
+
+export default QrCodeViewer;