npm - @digigov/ui - Versions diffs - 2.0.0-daaf7bdf → 2.0.0-e20fed09 - Mend

@digigov/ui 2.0.0-daaf7bdf → 2.0.0-e20fed09

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3235) hide show

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

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

package/src/app/PhaseBannerHeader/doc.mdx ADDED Viewed

@@ -0,0 +1,18 @@
+---
+id: phase-banner-header
+title: PhaseBannerHeader
+---
+# PhaseBannerHeader
+Phase banner lets users know the service is still being worked on, and encourages the user to provide feedback to help improve it.
+## How to use
+<code src="@digigov/ui/app/PhaseBannerHeader/__stories__/Default.tsx" />
+## API
+See below for a complete reference to all of the props  available to the components mentioned here.
+<ComponentProps componentName={["PhaseBannerHeaderContainer"]} />

package/src/app/PhaseBannerHeader/index.test.tsx CHANGED Viewed

@@ -14,6 +14,10 @@ test('renders the All PhaseBannerHeader variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/PhaseBannerHeader/index.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import HeaderContent from '@digigov/react-core/HeaderContent';
 import PhaseBanner from '@digigov/react-core/PhaseBanner';
 import PhaseBannerHeaderContainer from '@digigov/react-core/PhaseBannerHeaderContainer';

package/src/app/QrCodeScanner/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -1,13 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 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>
+<body>
+  <div>
+    &lt;div&gt;loading...&lt;/div&gt;
+  </div>
+</body>
 `;

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

@@ -3,14 +3,14 @@ import { QrCodeScanner } from '@digigov/ui/app/QrCodeScanner';
 import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
 import { Heading } from '@digigov/ui/typography/Heading';
-export const Default = () => {
+export const Default = (_: any) => {
   const [error, setError] = useState({ message: '' });
   const validate = (rawData) => {
     if (rawData) {
       const url = new URL(rawData);
       return url.origin === window.location.origin;
     } else {
-      return false
+      return false;
     }
   };
   const handleScan = (data) => {

package/src/app/QrCodeScanner/index.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
+// @ts-ignore
 const QrReader = React.lazy(() => import('@uides/react-qr-reader'));
 export interface QrCodeScannerProps {
@@ -61,7 +62,7 @@ In order to be safe, you can:
       if (dataType === 'url') {
         try {
           new URL(data);
-        } catch (e) {
+        } catch {
           return onError(
             new Error(
               '@digigov-ui XSS Validation failed: qr code payload should follow the pattern `https://dilosi.services.gov.gr/show/:reference_code`'

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

@@ -1,7 +1,10 @@
 import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov UI/app/QrCodeViewer',
   component: QrCodeViewer,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'QrCodeViewer',
 };
 export { Default } from '@digigov/ui/app/QrCodeViewer/__stories__/Default';

package/src/app/QrCodeViewer/__stories__/Custom.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { QrCodeViewer } from '@digigov/ui/app/QrCodeViewer';
 import logo from '@digigov/ui/govgr/images/greek-government-base64';
-export const Custom = () => (
+export const Custom = (_: any) => (
   <div>
     <QrCodeViewer
       value="https://www.gov.gr/"

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

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

package/src/app/QrCodeViewer/doc.mdx ADDED Viewed

@@ -0,0 +1,22 @@
+---
+id: qr-code-viewer
+title: QrCodeViewer
+---
+# QrCodeViewer
+QR codes are frequently used to track information and allow the users to access this information instantly.
+## How to use
+<code src="@digigov/ui/app/QrCodeViewer/__stories__/Default.tsx" />
+### Custom QrCodeViewer
+<code src="@digigov/ui/app/QrCodeViewer/__stories__/Custom.tsx" />
+## API
+See below for a complete reference to all of the props  available to the components mentioned here.
+There are no available prop types for this component.

package/src/app/QrCodeViewer/index.test.tsx CHANGED Viewed

@@ -18,6 +18,10 @@ test('renders the All QrCodeViewer variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/QrCodeViewer/index.tsx CHANGED Viewed

@@ -17,12 +17,12 @@ const DEFAULT_INCLUDEMARGIN = false;
 const SUPPORTS_PATH2D = (function () {
   try {
     new Path2D().addPath(new Path2D());
-  } catch (e) {
+  } catch {
     return false;
   }
   return true;
 })();
-const ERROR_LEVEL_MAP: { [index: string]: qrcodegen.QrCode.Ecc } = {
+const ERROR_LEVEL_MAP: Record<string, qrcodegen.QrCode.Ecc> = {
   L: qrcodegen.QrCode.Ecc.LOW,
   M: qrcodegen.QrCode.Ecc.MEDIUM,
   Q: qrcodegen.QrCode.Ecc.QUARTILE,
@@ -50,7 +50,7 @@ const QrCodeViewerCanvas = React.forwardRef(function QrCodeViewerCanvas(
   // 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(() => {
@@ -177,4 +177,4 @@ export const QrCodeViewer = React.forwardRef(function QrCodeViewer(
   return <QrCodeViewerCanvas {...props} ref={ref} />;
 });
-export default QrCodeViewer;
+export default QrCodeViewer;

package/src/app/QrCodeViewer/qrcodegen.ts CHANGED Viewed

@@ -6,7 +6,7 @@
  */
 'use strict';
-// eslint-disable-next-line @typescript-eslint/no-namespace
 namespace qrcodegen {
   type bit = number;
   type byte = number;
@@ -1302,7 +1302,7 @@ namespace qrcodegen {
 }
 /*---- Public helper enumeration ----*/
-// eslint-disable-next-line @typescript-eslint/no-namespace
 namespace qrcodegen.QrCode {
   type int = number;
@@ -1336,7 +1336,7 @@ namespace qrcodegen.QrCode {
 }
 /*---- Public helper enumeration ----*/
-// eslint-disable-next-line @typescript-eslint/no-namespace
 namespace qrcodegen.QrSegment {
   type int = number;

package/src/app/QrCodeViewer/types.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 import qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
-export type QRProps = {
+export interface QRProps {
   value: string;
   size?: number;
   // Should be a real enum, but doesn't seem to be compatible with real code.
@@ -11,20 +11,25 @@ export type QRProps = {
   style?: CSSProperties;
   includeMargin?: boolean;
   imageSettings?: ImageSettings;
-};
+}
 export type QRPropsCanvas = QRProps &
   React.CanvasHTMLAttributes<HTMLCanvasElement>;
 export type Modules = ReturnType<qrcodegen.QrCode['getModules']>;
-export type Excavation = { x: number; y: number; w: number; h: number };
+export interface Excavation {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
-export type ImageSettings = {
+export interface ImageSettings {
   src: string;
   height: number;
   width: number;
   excavate: boolean;
   x?: number;
   y?: number;
-};
+}

package/src/app/QrCodeViewer/utils.ts CHANGED Viewed

@@ -7,7 +7,7 @@ import {
 const DEFAULT_IMG_SCALE = 0.1;
 export const MARGIN_SIZE = 4;
 export function generatePath(modules: Modules, margin = 0): string {
-  const ops: Array<string> = [];
+  const ops: string[] = [];
   modules.forEach(function (row, y) {
     let start: number | null = null;
     row.forEach(function (cell, x) {

package/src/app/Skeleton/Skeleton.stories.js CHANGED Viewed

@@ -1,12 +1,45 @@
 import Skeleton from '@digigov/ui/app/Skeleton';
+import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov UI/app/Skeleton',
   description:
     'Use a set of Skeleton components to display placeholder content when data is loading.',
   component: Skeleton,
+  tags: ['autodocs'],
+  markdown: doc,
   displayName: 'Skeleton',
 };
+export const WithControls = {
+  args: {
+    variant: 'text',
+    fontSize: 'sm',
+    animation: false,
+  },
+  argTypes: {
+    variant: {
+      options: ['circular', 'rectangular', 'text', 'button'],
+      control: { type: 'radio' },
+    },
+    fontSize: {
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      control: { type: 'select' },
+      if: { arg: 'variant', eq: 'text' },
+    },
+    width: {
+      control: { type: 'number', min: 0 },
+    },
+    height: {
+      control: { type: 'number', min: 0 },
+    },
+    animation: {
+      control: { type: 'boolean' },
+    },
+  },
+};
 export { Default } from '@digigov/ui/app/Skeleton/__stories__/Default';
 export { TextSizes } from '@digigov/ui/app/Skeleton/__stories__/TextSizes';
 export { Rectangular } from '@digigov/ui/app/Skeleton/__stories__/Rectangular';

package/src/app/Skeleton/__stories__/Button.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Skeleton } from '@digigov/ui/app/Skeleton';
-export const Button = () => <Skeleton variant="button" />;
+export const Button = (_: any) => <Skeleton variant="button" />;
 export default Button;

package/src/app/Skeleton/__stories__/Circular.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Skeleton } from '@digigov/ui/app/Skeleton';
-export const Circular = () => (
+export const Circular = (_: any) => (
   <Skeleton variant="circular" width={100} height={100} />
 );

package/src/app/Skeleton/__stories__/Default.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Skeleton } from '@digigov/ui/app/Skeleton';
-export const Default = () => <Skeleton />;
+export const Default = (_: any) => <Skeleton />;
 export default Default;

package/src/app/Skeleton/__stories__/NoAnimation.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Skeleton } from '@digigov/ui/app/Skeleton';
-export const NoAnimation = () => <Skeleton animation={false} />;
+export const NoAnimation = (_: any) => <Skeleton animation={false} />;
 export default NoAnimation;

package/src/app/Skeleton/__stories__/Rectangular.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Skeleton } from '@digigov/ui/app/Skeleton';
-export const Rectangular = () => (
+export const Rectangular = (_: any) => (
   <Skeleton variant="rectangular" height={150} />
 );

package/src/app/Skeleton/__stories__/SpecificWidthAndHeight.tsx CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Skeleton } from '@digigov/ui/app/Skeleton';
-export const SpecificWidthAndHeight = () => (
-    <Skeleton width={200} height={200}/>
+export const SpecificWidthAndHeight = (_: any) => (
+  <Skeleton width={200} height={200} />
 );
 export default SpecificWidthAndHeight;

package/src/app/Skeleton/__stories__/TextSizes.tsx CHANGED Viewed

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Skeleton } from '@digigov/ui/app/Skeleton';
-export const TextSizes = () => (
+export const TextSizes = (_: any) => (
   <>
     <Skeleton mb={2} fontSize="xs" />
     <Skeleton mb={2} fontSize="sm" />

package/src/app/Skeleton/__stories__/UnderTypography.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { Skeleton } from '@digigov/ui/app/Skeleton';
 import Heading from '@digigov/ui/typography/Heading';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
-export const UnderTypography = () => (
+export const UnderTypography = (_: any) => (
   <>
     <Heading>
       <Skeleton />

package/src/app/Skeleton/__stories__/WithChildren.tsx CHANGED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import { Skeleton } from '@digigov/ui/app/Skeleton';
 import { NormalText } from '@digigov/ui/typography/NormalText';
-export const WithChildren = () => (
+export const WithChildren = (_: any) => (
   <Skeleton>
     <NormalText>Κείμενο</NormalText>
   </Skeleton>

package/src/app/Skeleton/doc.mdx ADDED Viewed

@@ -0,0 +1,42 @@
+---
+id: skeleton
+title: Skeleton
+---
+# Skeleton
+Use Skeleton component while a page is loading.
+## How to use
+<code src="@digigov/ui/app/Skeleton/__stories__/Default.tsx" />
+### Button
+<code src="@digigov/ui/app/Skeleton/__stories__/Button.tsx" />
+### Circular
+<code src="@digigov/ui/app/Skeleton/__stories__/Circular.tsx" />
+### Rectangular
+<code src="@digigov/ui/app/Skeleton/__stories__/Rectangular.tsx" />
+### Specific width and height
+<code src="@digigov/ui/app/Skeleton/__stories__/SpecificWidthAndHeight.tsx" />
+### Under Typography
+<code src="@digigov/ui/app/Skeleton/__stories__/UnderTypography.tsx" />
+### No Animation
+<code src="@digigov/ui/app/Skeleton/__stories__/NoAnimation.tsx" />
+## API
+See below for a complete reference to all of the props  available to the components mentioned here.
+<ComponentProps componentName={["Skeleton"]} />

package/src/app/Skeleton/index.test.tsx CHANGED Viewed

@@ -46,6 +46,10 @@ test('renders the All Skeleton variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/ThemeOptions/index.tsx CHANGED Viewed

@@ -66,13 +66,7 @@ export const ThemeOptions = React.forwardRef<
     lineHeightOption = true,
     letterSpacingOption = true,
     highlightLinksOption = true,
     colorsOptionTitleSize = 'sm',
-    fontSizeOptionTitleSize = 'sm',
-    lineHeightOptionTitleSize = 'sm',
-    letterSpacingOptionTitleSize = 'sm',
-    highlightLinksOptionTitleSize = 'sm',
     className,
     ...props
   },
@@ -87,18 +81,15 @@ export const ThemeOptions = React.forwardRef<
     fontSize || 'default'
   );
   const [lineHeight, changeLineHeight] = useLineHeight();
-  const [selectedLineHeight, setSelectedLineHeight] = useState<
-    LineHeightOptions
-  >(lineHeight || 'default');
+  const [selectedLineHeight, setSelectedLineHeight] =
+    useState<LineHeightOptions>(lineHeight || 'default');
   const [letterSpacing, changeLetterSpacing] = useLetterSpacing();
-  const [selectedLetterSpacing, setSelectedLetterSpacing] = useState<
-    LetterSpacingOptions
-  >(letterSpacing || 'default');
+  const [selectedLetterSpacing, setSelectedLetterSpacing] =
+    useState<LetterSpacingOptions>(letterSpacing || 'default');
   const [highlightLinks, changeHighlightLinks] = useHighlightLinks();
-  const [selectedHighlightLinks, setSelectedHighlightLinks] = useState<
-    HighlightLinksOptions
-  >(highlightLinks || 'default');
+  const [selectedHighlightLinks, setSelectedHighlightLinks] =
+    useState<HighlightLinksOptions>(highlightLinks || 'default');
   function handleOptions() {
     changeTheme(selectedTheme);

package/src/app/hooks/useHighlightLinks.ts CHANGED Viewed

@@ -5,7 +5,7 @@ export type StoredHighlightLinksOptions = HighlightLinksOptions | null;
 export type UseHighlightLinksResult = [
   HighlightLinksOptions,
-  (selectedHighlightLinks: HighlightLinksOptions) => void
+  (selectedHighlightLinks: HighlightLinksOptions) => void,
 ];
 export const useHighlightLinks = (): UseHighlightLinksResult => {
@@ -13,9 +13,8 @@ export const useHighlightLinks = (): UseHighlightLinksResult => {
     '--theme-highlight-links'
   ) as StoredHighlightLinksOptions;
-  const [highlightLinks, changeHighlightLinks] = useState<
-    HighlightLinksOptions
-  >(storedHighlightLinks || 'default');
+  const [highlightLinks, changeHighlightLinks] =
+    useState<HighlightLinksOptions>(storedHighlightLinks || 'default');
   useEffect(() => {
     if (highlightLinks === 'highlight') {

package/src/app/hooks/useNotificationArea.tsx ADDED Viewed

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useRef } from 'react';
+// Unique ID for the aria-live notification area element.
+const notificationAreaId = 'loader-notification-area';
+// Custom attribute to track active spinners
+const activeSpinnersAttr = 'data-active-spinners';
+// Generates a random unique ID for each spinner instance.
+function generateUniqueId() {
+  return `spinner-${Math.random().toString(36).substring(2, 9)}`;
+}
+// Finds or creates the notification area element in the DOM.
+const getOrCreateNotificationArea = (): HTMLElement => {
+  let element = document.getElementById(notificationAreaId);
+  // Create and append it to the DOM.
+  if (!element) {
+    element = document.createElement('div');
+    element.id = notificationAreaId;
+    element.setAttribute('role', 'status');
+    element.setAttribute('aria-live', 'polite');
+    element.className = 'ds-visually-hidden';
+    document.body.appendChild(element);
+  }
+  return element;
+};
+export const useNotificationArea = (
+  loadingText = 'Γίνεται φόρτωση...',
+  finishedText = 'Η φόρτωση ολοκληρώθηκε.'
+) => {
+  // Unique ID for this spinner.
+  const spinnerId = useRef(generateUniqueId());
+  // Reference to the notification area DOM element.
+  const notificationRef = useRef<HTMLElement | null>(null);
+  // Returns an array of active spinner IDs.
+  const getActiveIds = useCallback(() => {
+    const current = notificationRef.current;
+    const value = current?.getAttribute(activeSpinnersAttr) || '';
+    return value.split(',').filter(Boolean);
+  }, [notificationRef]);
+  // Adds this spinner's ID to the active list.
+  const setActiveSpinnerId = useCallback(() => {
+    const current = notificationRef.current;
+    if (current) {
+      const ids = new Set(getActiveIds());
+      ids.add(spinnerId.current);
+      current.setAttribute(activeSpinnersAttr, Array.from(ids).join(','));
+    }
+  }, [notificationRef, getActiveIds, spinnerId]);
+  // Removes this spinner's ID from the active list.
+  const unsetActiveSpinnerId = useCallback(() => {
+    const current = notificationRef.current;
+    if (current) {
+      const ids = getActiveIds().filter((id) => id !== spinnerId.current);
+      current.setAttribute(activeSpinnersAttr, ids.join(','));
+    }
+  }, [notificationRef, getActiveIds, spinnerId]);
+  // Updates the text content of the aria-live region.
+  const setTextContent = (text: string) => {
+    if (notificationRef.current) {
+      notificationRef.current.textContent = text;
+    }
+  };
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    // Set up notification area and mark this spinner as active.
+    notificationRef.current = getOrCreateNotificationArea();
+    setActiveSpinnerId();
+    setTextContent(loadingText);
+    // Cleanup when component unmounts.
+    return () => {
+      unsetActiveSpinnerId();
+      // If no active spinners remain, announce "finished" and clear the text.
+      if (getActiveIds().length === 0) {
+        setTextContent(finishedText);
+        // Give screen readers a chance to announce "finished" before clearing.
+        setTimeout(() => {
+          const el = notificationRef.current;
+          if (el && getActiveIds().length === 0) {
+            el.removeAttribute(activeSpinnersAttr);
+            el.textContent = '';
+          }
+        }, 1000);
+      }
+    };
+  }, [
+    loadingText,
+    finishedText,
+    setActiveSpinnerId,
+    unsetActiveSpinnerId,
+    getActiveIds,
+  ]);
+};

package/src/app/hooks/useTheme.ts CHANGED Viewed

@@ -5,12 +5,13 @@ export type StoredThemeOptions = ThemeSelectOptions | null;
 export type UseThemeResult = [
   ThemeSelectOptions,
-  (selectedTheme: ThemeSelectOptions) => void
+  (selectedTheme: ThemeSelectOptions) => void,
 ];
 export const useTheme = (): UseThemeResult => {
-  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
-    .matches;
+  const prefersDarkScheme = window.matchMedia(
+    '(prefers-color-scheme: dark)'
+  ).matches;
   const storedTheme = localStorage.getItem(
     '--theme-palette'
   ) as StoredThemeOptions;