@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

package/src/app/Modal/{index.mdx → doc.mdx}

@@ -3,21 +3,24 @@ id: modal
 title: Modal
 ---
 
+# Modal
+
 Modal is a dialog box/popup window which contains information or an action and it is displayed on top of the current page:
 
 ## How to use
 
 ### As a Dialog
 
-<Story packageName="@digigov/ui" component="app/Modal" story="Default.tsx" />
+<code src="@digigov/ui/app/Modal/__stories__/Default.tsx" />
+
 
 ### As an Alert Dialog
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Modal"
-  story="AlertDialog.tsx"
-/>
+<code src="@digigov/ui/app/Modal/__stories__/AlertDialog.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/app/Modal/__stories__/Dense.tsx" />
 
 ## Accessibility
 

package/src/app/Modal/index.native.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Modal as CoreModal } from 'react-native';
+
+export const Modal = ({ children, open, ...props }) => {
+  return (
+    <CoreModal
+      visible={open}
+      transparent={true}
+      animationType="fade"
+      {...props}
+    >
+      {children}
+    </CoreModal>
+  );
+};
+
+export default Modal;

package/src/app/Modal/index.test.tsx

@@ -34,6 +34,10 @@ test('renders the All Modal 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/Modal/index.tsx

@@ -5,6 +5,6 @@ export * from '@digigov/react-core/ModalAction';
 export * from '@digigov/ui/app/Modal/hooks';
 export * from '@digigov/ui/app/Modal/hooks';
 
-export * from '@digigov/ui/app/Modal/Modal';
-import Modal from '@digigov/ui/app/Modal/Modal';
+export * from '@digigov/ui/app/Modal/index.web';
+import Modal from '@digigov/ui/app/Modal/index.web';
 export default Modal;

package/src/app/Modal/interaction.test.tsx

@@ -6,36 +6,49 @@ import { Dense } from '@digigov/ui/app/Modal/__stories__/Dense';
 import { WithHooks } from '@digigov/ui/app/Modal/__stories__/WithHooks';
 
 test('renders the Auto Click modal', async ({ mount, page }) => {
-  await mount(
-    <Auto />
-  )
+  await mount(<Auto />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>button:nth-child(1)").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>button:nth-child(1)').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the Dense Open modal', async ({ mount, page }) => {
-  await mount(
-    <Dense />
-  )
+  await mount(<Dense />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
-test('renders the WithHooks Click modal with hooks', async ({ mount, page }) => {
-  await mount(
-    <WithHooks />
-  )
+test('renders the WithHooks Click modal with hooks', async ({
+  mount,
+  page,
+}) => {
+  await mount(<WithHooks />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/app/NotFound/{index.mdx → doc.mdx}

@@ -3,13 +3,11 @@ id: not-found
 title: NotFound
 ---
 
-```bash
-import NotFound from '@digigov/ui/app/NotFound';
-```
+# NotFound page
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="app/NotFound" story="Default.tsx" />
+<code src="@digigov/ui/app/NotFound/__stories__/Default.tsx" />
 
 ## API
 

package/src/app/NotFound/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All NotFound 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/OutdatedBrowserBanner/hooks/evaluateBrowserVersion.ts

@@ -29,8 +29,8 @@ function strMapper(str, map) {
   for (const i in map) {
     // check if current value is array
     if (typeof map[i] === OBJ_TYPE && map[i].length > 0) {
-      for (let j = 0; j < map[i].length; j++) {
-        if (map[i][j].includes(str)) {
+      for (const j in map[i]) {
+        if (j.includes(str)) {
           return i === UNKNOWN ? undefined : i;
         }
       }

package/src/app/Panel/{index.mdx → doc.mdx}

@@ -3,12 +3,14 @@ id: panel
 title: Panel
 ---
 
+# Panel
+
 Panels are bordered boxes where you can place texts, lists, tables and other content. 
 Panels are similar to cards, but they don't include media.
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="app/Panel" story="Default.tsx" />
+<code src="@digigov/ui/app/Panel/__stories__/Default.tsx" />
 
 ## API
 

package/src/app/Panel/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Panel 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.mdx → doc.mdx}

@@ -3,15 +3,13 @@ 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
 
-<Story
-  packageName="@digigov/ui"
-  component="app/PhaseBannerHeader"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/app/PhaseBannerHeader/__stories__/Default.tsx" />
 
 ## API
 

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

@@ -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/QrCodeScanner/__snapshots__/index.spec.tsx.snap

@@ -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

@@ -10,7 +10,7 @@ export const Default = () => {
       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

@@ -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/{index.mdx → doc.mdx}

@@ -3,25 +3,17 @@ 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
 
-### Default QrCodeViewer
-
-<Story
-  packageName="@digigov/ui"
-  component="app/QrCodeViewer"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/app/QrCodeViewer/__stories__/Default.tsx" />
 
 ### Custom QrCodeViewer
 
-<Story
-  packageName="@digigov/ui"
-  component="app/QrCodeViewer"
-  story="Custom.tsx"
-/>
+<code src="@digigov/ui/app/QrCodeViewer/__stories__/Custom.tsx" />
 
 ## API
 

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -7,6 +7,36 @@ export default {
   component: Skeleton,
   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__/SpecificWidthAndHeight.tsx

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

package/src/app/Skeleton/doc.mdx

@@ -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

@@ -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

@@ -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

@@ -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/useTheme.ts

@@ -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;