@digigov/ui 2.0.0-113e6661 → 2.0.0-2177f152

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

@@ -1,28 +1,33 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/app/Masthead/__stories__/Default';
+import { Secondary } from '@digigov/ui/app/Masthead/__stories__/Secondary';
 import { WithElements } from '@digigov/ui/app/Masthead/__stories__/WithElements';
 import { WithLogo } from '@digigov/ui/app/Masthead/__stories__/WithLogo';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Masthead variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="WithElements">
-      <WithElements />
-    </TestVariant>
-    <TestVariant title="WithLogo">
-      <WithLogo />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Secondary">
+        <Secondary />
+      </TestVariant>
+      <TestVariant title="WithElements">
+        <WithElements />
+      </TestVariant>
+      <TestVariant title="WithLogo">
+        <WithLogo />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -4,12 +4,12 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/app/Masthead/__stories__/Default';
 
 test('renders the Default Hover', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>section>div>main>a").hover();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>section>div>main>a').hover();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/app/Modal/Modal.stories.js

@@ -3,8 +3,7 @@ export default {
   title: 'Digigov UI/app/Modal',
   description:
     'Use the modal component with caution when you need to provide critical information or ask for a decision.',
-  link:
-    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
   component: Modal,
   displayName: 'Modal',
 };

package/src/app/Modal/__stories__/Auto.tsx

@@ -1,10 +1,6 @@
 import React from 'react';
 
-import {
-  ModalHeading,
-  ModalContent,
-  ModalAction,
-} from '@digigov/ui/app/Modal';
+import { ModalHeading, ModalContent, ModalAction } from '@digigov/ui/app/Modal';
 import {
   ModalAuto,
   ModalButtonAuto,

package/src/app/Modal/auto.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { Button, ButtonProps } from '@digigov/react-core/Button';
 import { ModalContainerProps } from '@digigov/react-core/ModalContainer';
+import Modal from '@digigov/ui/app/Modal';
 import { ModalId, UseModalReturn, useModal } from '@digigov/ui/app/Modal/hooks';
-import Modal from '@digigov/ui/app/Modal/Modal';
 
 export const ModalContext = React.createContext<UseModalReturn | null>(null);
 

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

@@ -1,40 +1,41 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { AlertDialog } from '@digigov/ui/app/Modal/__stories__/AlertDialog';
 import { Auto } from '@digigov/ui/app/Modal/__stories__/Auto';
 import { Default } from '@digigov/ui/app/Modal/__stories__/Default';
 import { Dense } from '@digigov/ui/app/Modal/__stories__/Dense';
 import { WithHooks } from '@digigov/ui/app/Modal/__stories__/WithHooks';
 import { WithoutModalGaps } from '@digigov/ui/app/Modal/__stories__/WithoutModalGaps';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Modal variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="AlertDialog">
-      <AlertDialog />
-    </TestVariant>
-    <TestVariant title="Auto">
-      <Auto />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="WithHooks">
-      <WithHooks />
-    </TestVariant>
-    <TestVariant title="WithoutModalGaps">
-      <WithoutModalGaps />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="AlertDialog">
+        <AlertDialog />
+      </TestVariant>
+      <TestVariant title="Auto">
+        <Auto />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="WithHooks">
+        <WithHooks />
+      </TestVariant>
+      <TestVariant title="WithoutModalGaps">
+        <WithoutModalGaps />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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,37 @@ 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' });
+  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' });
+  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' });
+  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

@@ -1,20 +1,21 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/app/NotFound/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All NotFound variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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

@@ -1,20 +1,21 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/app/Panel/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Panel variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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

@@ -1,20 +1,21 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/app/PhaseBannerHeader/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All PhaseBannerHeader variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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

@@ -1,24 +1,25 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Custom } from '@digigov/ui/app/QrCodeViewer/__stories__/Custom';
 import { Default } from '@digigov/ui/app/QrCodeViewer/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All QrCodeViewer variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Custom">
-      <Custom />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Custom">
+        <Custom />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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;