@digigov/ui 0.28.0 → 0.28.2

package/src/app/OutdatedBrowserBanner.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { WarningText } from '@digigov/ui/core/WarningText';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+import useOutdatedBrowserCheck from '@digigov/ui/hooks/useOutdatedBrowserCheck';
+import Link from '@digigov/ui/core/Link';
+import { isMobile } from '@digigov/ui/utils/evaluateBrowserVersion';
+import { useTranslation } from '@digigov/ui/app/';
+
+export default function OutdatedBrowserBanner(): JSX.Element {
+  const mob = isMobile;
+  const [shouldUpdate, updateLink] = useOutdatedBrowserCheck();
+  const { t } = useTranslation();
+  return (
+    <WarningText>
+      {shouldUpdate ? (
+        <>
+          {mob.any() ? (
+            <>
+              <Paragraph>{t('outdated.mobile')}</Paragraph>
+            </>
+          ) : (
+            <>
+              <Paragraph>
+                {t('outdated.web')}
+                <Link href={updateLink} target="_blank">
+                  {updateLink}{' '}
+                </Link>
+              </Paragraph>
+            </>
+          )}
+        </>
+      ) : (
+        <></>
+      )}
+    </WarningText>
+  );
+}

package/src/app/PageTitle.tsx

@@ -0,0 +1,6 @@
+import PageTitle from '@digigov/react-core/PageTitle';
+export * from '@digigov/react-core/PageTitle';
+export * from '@digigov/react-core/PageTitleCaption';
+export * from '@digigov/react-core/PageTitleHeading';
+export * from '@digigov/react-core/PageTitleSection';
+export default PageTitle;

package/src/app/PhaseBannerHeader/PhaseBannerHeader.stories.js

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
+
+export const Default = () => (
+  <PhaseBannerHeader
+    tag="ALPHA"
+    text="Αυτή είναι μία νέα υπηρεσία – τα σχόλιά σας θα μας βοηθήσουν να τη βελτιώσουμε."
+  />
+);
+
+export default Default;

package/src/app/PhaseBannerHeader/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import HeaderSection from '@digigov/react-core/HeaderSection';
+import PhaseBanner from '@digigov/react-core/PhaseBanner';
+import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
+import PhaseBannerText from '@digigov/react-core/PhaseBannerText';
+import PhaseBannerHeaderContainer from '@digigov/react-core/PhaseBannerHeaderContainer';
+
+type DivElementAttributes = JSX.IntrinsicElements['div'];
+export interface PhaseBannerHeaderProps extends DivElementAttributes {
+  tag?: string;
+  text?: string;
+}
+
+export const PhaseBannerHeader = React.forwardRef<
+  HTMLDivElement,
+  PhaseBannerHeaderProps
+>(function PhaseBannerHeader({ text, tag, ...props }, ref) {
+  return (
+    <PhaseBannerHeaderContainer {...props} ref={ref}>
+      <HeaderSection>
+        <PhaseBanner>
+          <PhaseBannerTag>{tag}</PhaseBannerTag>
+          <PhaseBannerText>{text}</PhaseBannerText>
+        </PhaseBanner>
+      </HeaderSection>
+    </PhaseBannerHeaderContainer>
+  );
+});
+
+export default PhaseBannerHeader;

package/src/app/QrCodeScanner/QrCodeScanner.stories.js

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

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

@@ -0,0 +1,43 @@
+import React, { Suspense, useState } from 'react';
+import QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
+import Title from '@digigov/ui/typography/Title';
+import ErrorSummary from '@digigov/ui/core/ErrorSummary';
+
+export const Default = () => {
+  const [error, setError] = useState({ message: '' });
+  const validate = (rawData) => {
+    const url = new URL(rawData);
+    return url.origin === window.location.origin;
+  };
+  const handleScan = (data) => {
+    if (data) {
+      const 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);
+    }
+  };
+  const handleError = () => {
+    setError({ message: 'scan.data_error' });
+  };
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <QrCodeScanner
+        style={{ maxWidth: '400px' }}
+        validate={validate}
+        onScan={handleScan}
+        onError={handleError}
+      >
+        {error.message && (
+          <ErrorSummary>
+            <Title size="sm">{error.message}</Title>
+          </ErrorSummary>
+        )}
+      </QrCodeScanner>
+    </Suspense>
+  );
+};
+
+export default Default;

package/src/app/QrCodeScanner/index.spec.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
+
+it('renders the qr code scanner', () => {
+  expect(
+    mount(
+      <QrCodeScanner
+        onScan={(args) => {
+          console.log(args);
+        }}
+        onError={(args) => {
+          console.log(args);
+        }}
+      />
+    )
+  ).toMatchSnapshot();
+});

package/src/app/QrCodeScanner/index.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+
+const QrReader = React.lazy(() => import('react-qr-reader'));
+
+export interface QrCodeScannerProps extends QrReader.props {
+  dataType?: 'url' | 'text';
+  legacyMode?: boolean;
+  validate?: (...args) => boolean;
+  onScan: (...args) => void;
+  onError: (err: any) => void;
+}
+
+/**
+ * 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> = ({
+  className,
+  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
+        className={className}
+        delay={100}
+        onError={onError}
+        onScan={handleOnScan}
+        legacyMode={legacyMode}
+        {...props}
+      />
+      {children}
+    </>
+  );
+};
+
+export default QrCodeScanner;

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

@@ -0,0 +1,9 @@
+/* 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/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.tsx

@@ -0,0 +1,250 @@
+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, QRPropsSVG } 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}
+    </>
+  );
+}
+
+function QrCodeViewerSVG(props: QRPropsSVG) {
+  const {
+    value,
+    size = DEFAULT_SIZE,
+    level = DEFAULT_LEVEL,
+    bgColor = DEFAULT_BGCOLOR,
+    fgColor = DEFAULT_FGCOLOR,
+    includeMargin = DEFAULT_INCLUDEMARGIN,
+    imageSettings,
+    ...otherProps
+  } = props;
+
+  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
+  );
+
+  let image;
+  if (imageSettings != null && calculatedImageSettings != null) {
+    if (calculatedImageSettings.excavation != null) {
+      cells = excavateModules(cells, calculatedImageSettings.excavation);
+    }
+
+    image = (
+      <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
+  const fgPath = generatePath(cells, margin);
+
+  return (
+    <svg
+      height={size}
+      width={size}
+      viewBox={`0 0 ${numCells} ${numCells}`}
+      {...otherProps}
+    >
+      <path
+        fill={bgColor}
+        d={`M0,0 h${numCells}v${numCells}H0z`}
+        shapeRendering="crispEdges"
+      />
+      <path fill={fgColor} d={fgPath} shapeRendering="crispEdges" />
+      {image}
+    </svg>
+  );
+}
+
+type RootProps =
+  | (QRPropsSVG & { renderAs: 'svg' })
+  | (QRPropsCanvas & { renderAs?: 'canvas' });
+export const QrCodeViewer = (props: RootProps) => {
+  const { renderAs, ...otherProps } = props;
+  if (renderAs === 'svg') {
+    return <QrCodeViewerSVG {...(otherProps as QRPropsSVG)} />;
+  }
+  return <QrCodeViewerCanvas {...(otherProps as QRPropsCanvas)} />;
+};
+
+export default QrCodeViewer;