@digigov/ui 0.12.1 → 0.12.2

package/src/hooks/useDebounce.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import useLatest from '@digigov/ui/hooks/useLatest';
+
+export const useDebounceCallback = <CallbackArgs extends any[]>(
+  callback: (...args: CallbackArgs) => void,
+  wait = 100,
+  leading = false
+): ((...args: CallbackArgs) => void) => {
+  const storedCallback = useLatest(callback);
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const deps = [wait, leading, storedCallback];
+  // Cleans up pending timeouts when the deps change
+  React.useEffect(
+    () => () => {
+      timeout.current && clearTimeout(timeout.current);
+      timeout.current = void 0;
+    },
+    deps
+  );
+
+  return React.useCallback(function () {
+    // eslint-disable-next-line prefer-rest-params
+    const args = arguments;
+    const { current } = timeout;
+    // Calls on leading edge
+    if (current === void 0 && leading) {
+      timeout.current = setTimeout(() => {
+        timeout.current = void 0;
+      }, wait);
+      // eslint-disable-next-line prefer-spread
+      return storedCallback.current.apply(null, args as any);
+    }
+    // Clear the timeout every call and start waiting again
+    current && clearTimeout(current);
+    // Waits for `wait` before invoking the callback
+    timeout.current = setTimeout(() => {
+      timeout.current = void 0;
+      storedCallback.current.apply(null, args as any);
+    }, wait);
+  }, deps);
+};
+
+export const useDebounce = <State extends any>(
+  initialState: State | (() => State),
+  wait?: number,
+  leading?: boolean
+): [State, React.Dispatch<React.SetStateAction<State>>] => {
+  const state = React.useState(initialState);
+  return [state[0], useDebounceCallback(state[1], wait, leading)];
+};

package/src/hooks/useLatest.ts

@@ -0,0 +1,12 @@
+// copied from https://github.com/jaredLunde/react-hook/blob/master/packages/latest/src/index.tsx
+import * as React from 'react'
+
+const useLatest = <T extends any>(current: T) => {
+  const storedValue = React.useRef(current)
+  React.useEffect(() => {
+    storedValue.current = current
+  })
+  return storedValue
+}
+
+export default useLatest

package/{esm/hooks/useOutdatedBrowserCheck.js → src/hooks/useOutdatedBrowserCheck.ts}

@@ -1,34 +1,35 @@
 import evaluateBrowserVersion from '@digigov/ui/utils/evaluateBrowserVersion';
-var DEFAULT_BROWSER_SUPPORT = {
-  Chrome: 57,
-  // Includes Chrome for mobile devices
+
+const DEFAULT_BROWSER_SUPPORT = {
+  Chrome: 57, // Includes Chrome for mobile devices
   Edge: 39,
   Safari: 10,
   'Mobile Safari': 10,
   Firefox: 50,
   Opera: 50,
-  IE: false
+  IE: false,
 };
-var browserUpdateLinks = {
+
+const browserUpdateLinks = {
   Chrome: 'https://www.google.com/chrome/',
   Edge: 'https://www.microsoft.com/en-us/edge',
   Safari: 'https://www.apple.com/safari/',
   'Mobile Safari': 'https://www.apple.com/safari/',
   Firefox: 'https://www.mozilla.org/en-US/firefox/new/',
-  Opera: 'https://www.opera.com/download'
+  Opera: 'https://www.opera.com/download',
 };
-var browserNames = Object.keys(DEFAULT_BROWSER_SUPPORT);
-export function useOutdatedBrowserCheck() {
-  var browserSupport = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_BROWSER_SUPPORT;
-  var currentBrowser = evaluateBrowserVersion();
 
+const browserNames = Object.keys(DEFAULT_BROWSER_SUPPORT);
+
+export function useOutdatedBrowserCheck(
+  browserSupport: Record<string, number | boolean> = DEFAULT_BROWSER_SUPPORT
+): [boolean, string] {
+  const currentBrowser = evaluateBrowserVersion();
   if (!currentBrowser.version || !currentBrowser.name) {
     return [true, browserUpdateLinks.Chrome];
   }
-
-  var currentBrowserVersion = parseInt(currentBrowser.version);
-  var currentBrowserName = currentBrowser.name;
-
+  const currentBrowserVersion = parseInt(currentBrowser.version);
+  const currentBrowserName = currentBrowser.name;
   if (browserNames.indexOf(currentBrowser.name) > -1) {
     if (browserSupport[currentBrowserName] === false) {
       return [true, browserUpdateLinks.Chrome];
@@ -43,4 +44,4 @@ export function useOutdatedBrowserCheck() {
     return [true, browserUpdateLinks.Chrome];
   }
 }
-export default useOutdatedBrowserCheck;
+export default useOutdatedBrowserCheck;

package/src/hooks/useSearch.ts

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+
+export function normalizeGreek(text) {
+  text = text
+    .replace(/Ά|Α|ά/g, 'α')
+    .replace(/Έ|Ε|έ/g, 'ε')
+    .replace(/Ή|Η|ή/g, 'η')
+    .replace(/Ί|Ϊ|Ι|ί|ΐ|ϊ/g, 'ι')
+    .replace(/Ό|Ο|ό/g, 'ο')
+    .replace(/Ύ|Ϋ|Υ|ύ|ΰ|ϋ/g, 'υ')
+    .replace(/Ώ|Ω|ώ/g, 'ω')
+    .replace(/Σ|ς/g, 'σ');
+  return text;
+}
+
+export function fullTextSearch(data: Object, search: string): boolean {
+  if (!search) {
+    return true;
+  }
+  const q = normalizeGreek(
+    search
+      .normalize('NFC')
+      .replace(/[\u0300-\u036f]/g, '')
+      .toLowerCase()
+  );
+  const index = Object.keys(data)
+    .map(k => {
+      return data[k] ? data[k].toString().toLowerCase() : '';
+    })
+    .join('');
+
+  return normalizeGreek(
+    index.normalize('NFC').replace(/[\u0300-\u036f]/g, '')
+  ).includes(q);
+}
+
+export function useSearch(
+  data: Array<Object>,
+  query?: string
+) {
+  if(!query) return data
+  return useMemo(() => {
+    return data.filter(t => fullTextSearch(t, query));
+  }, [data, query]);
+}
+
+export default useSearch

package/src/hooks/useTogglableSections.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useRef, useState, useCallback, useMemo } from 'react';
+
+export interface UseTogglableSectionsInterface {
+  toggleProperty: string;
+  singleOpen?: boolean;
+  onToggleProperty: string;
+  initial?: Record<string, boolean>;
+  firstOpen?: boolean;
+  ariaNavigation?: boolean;
+}
+export interface UseTogglableSectionsReturn {
+  register: (el: HTMLElement) => void;
+  registered: { current: Record<string, HTMLElement> };
+  opened: Record<string, boolean>;
+  toggle: (id: string) => void;
+  setOpened: (
+    opened:
+      | ((curOpened: Record<string, boolean>) => Record<string, boolean>)
+      | Record<string, boolean>
+  ) => void;
+}
+export function useTogglableSections({
+  toggleProperty,
+  singleOpen,
+  onToggleProperty,
+  initial,
+  firstOpen,
+  ariaNavigation,
+}: UseTogglableSectionsInterface): UseTogglableSectionsReturn {
+  const [opened, setOpened] = useState(initial || {});
+  const registered = useRef<Record<string, HTMLElement>>({});
+  const sectionsOrder = useRef<string[]>([]);
+  const registerRef = useCallback((el) => {
+    if (!el) return;
+    const key = el.getAttribute('aria-controls') as string;
+    if (registered.current[key]) return;
+    registered.current[key] = el;
+    sectionsOrder.current.push(key);
+    if (firstOpen && sectionsOrder.current.length === 1) {
+      setOpened({
+        [key]: true,
+      });
+    }
+  }, []);
+  const toggle = useCallback((e) => {
+    const key = e.currentTarget.getAttribute('aria-controls') as string;
+    e.preventDefault();
+    if (singleOpen) {
+      setOpened({ [key]: true });
+    } else {
+      setOpened((prev) => ({ ...prev, [key]: !prev[key] }));
+    }
+  }, []);
+  const onKeyDown = useCallback((e) => {
+    const key = e.target.getAttribute('aria-controls');
+    const currentIndex = sectionsOrder.current.findIndex((k) => k === key);
+    const nextKey = sectionsOrder.current[currentIndex + 1];
+    const previousKey = sectionsOrder.current[currentIndex - 1];
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        if (nextKey) {
+          registered.current[nextKey].focus();
+        }
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        if (previousKey) {
+          registered.current[previousKey].focus();
+        }
+        break;
+      case ' ':
+      case 'Enter':
+        toggle(e);
+        break;
+    }
+  }, []);
+  const register = useCallback(
+    (key) => {
+      const isOpen = !!opened[key];
+      return {
+        ref: registerRef,
+        [toggleProperty]: isOpen,
+        [onToggleProperty]: toggle,
+        'aria-controls': `${key}`,
+        ...(ariaNavigation && { onKeyDown, tabIndex: opened[key] ? 0 : -1 }),
+      };
+    },
+    [opened]
+  );
+  return useMemo(
+    () => ({
+      register,
+      registered,
+      opened,
+      toggle,
+      setOpened,
+    }),
+    [opened]
+  );
+}

package/{layouts/Basic/Bottom/index.d.ts → src/layouts/Basic/Bottom/index.tsx}

@@ -1,3 +1,4 @@
 import Bottom from '@digigov/react-core/Bottom';
+
 export { Bottom };
 export default Bottom;

package/src/layouts/Basic/Content/index.tsx

@@ -0,0 +1,24 @@
+import CoreContainer, {
+  ContainerProps as CoreContainerProps,
+} from '@digigov/react-core/Container';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export type ContainerProps = CoreContainerProps;
+
+export const Content = withDeprecation(CoreContainer, {
+  name: 'Content',
+  rename: 'Container',
+  props: {
+    maxWidth: {
+      error: true,
+    },
+    flex: {
+      error: true,
+    },
+    dense: {
+      error: true,
+    },
+  },
+});
+
+export default Content;

package/{layouts/Basic/Main/index.d.ts → src/layouts/Basic/Main/index.tsx}

@@ -1,3 +1,4 @@
 import Main from '@digigov/react-core/Main';
+
 export { Main };
 export default Main;

package/{layouts/Basic/Masthead/index.d.ts → src/layouts/Basic/Masthead/index.tsx}

@@ -1,4 +1,6 @@
 import Masthead from '@digigov/react-core/Masthead';
 import MastheadBody from '@digigov/react-core/MastheadBody';
+
 export { Masthead, MastheadBody };
+
 export default Masthead;

package/{esm/layouts/Basic/Side/index.js → src/layouts/Basic/Side/index.tsx}

@@ -1,7 +1,9 @@
 import Aside from '@digigov/react-core/Aside';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
-export var Side = withDeprecation(Aside, {
+
+export const Side = withDeprecation(Aside, {
   name: 'Side',
-  rename: 'Aside'
+  rename: 'Aside',
 });
-export default Side;
+
+export default Side;

package/{es/layouts/Basic/Top/index.js → src/layouts/Basic/Top/index.tsx}

@@ -1,11 +1,13 @@
 import CoreTop from '@digigov/react-core/Top';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
-export var Top = withDeprecation(CoreTop, {
+
+export const Top = withDeprecation(CoreTop, {
   name: 'Top',
   props: {
     dense: {
-      error: true
-    }
-  }
+      error: true,
+    },
+  },
 });
-export default Top;
+
+export default Top;

package/src/layouts/Basic/index.spec.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import BasicLayout, {
+  Top,
+  Side,
+  Main,
+  Content,
+  Bottom,
+} from '@digigov/ui/layouts/Basic';
+
+it('renders the BasicLayout with Top, Content, Bottom, Main and Side children ', () => {
+  const jsx = (
+    <BasicLayout>
+      <Top>Header content</Top>
+      <Content>
+        <Main>Main content</Main>
+        <Side>Side content</Side>
+      </Content>
+      <Bottom>Bottom content</Bottom>
+    </BasicLayout>
+  );
+  expect(mount(jsx)).toMatchSnapshot();
+});

package/{layouts/Basic/index.d.ts → src/layouts/Basic/index.tsx}

@@ -1,8 +1,10 @@
 import Layout from '@digigov/react-core/Layout';
+
 export * from '@digigov/ui/layouts/Basic/Top';
 export * from '@digigov/ui/layouts/Basic/Side';
 export * from '@digigov/ui/layouts/Basic/Main';
 export * from '@digigov/ui/layouts/Basic/Content';
 export * from '@digigov/ui/layouts/Basic/Bottom';
 export * from '@digigov/ui/layouts/Basic/Masthead';
+
 export default Layout;

package/{es/locales/el.js → src/locales/el.ts}

@@ -3,7 +3,7 @@ export default {
     label: {
       day: 'Ημέρα',
       month: 'Μήνας',
-      year: 'Έτος'
+      year: 'Έτος',
     },
     error: {
       required: 'Το πεδίο είναι υποχρεωτικό.',
@@ -18,21 +18,21 @@ export default {
       date: {
         invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
-        later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}'
-      }
-    }
+        later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
+      },
+    },
   },
   button: {
     start: 'Ξεκινήστε εδώ',
     login: 'Σύνδεση',
     back: 'Πίσω',
-    "continue": 'Συνέχεια',
+    continue: 'Συνέχεια',
     search_ref: 'Αναζητήστε',
     scan: 'Σαρώστε QR Code',
     save: 'Αποθήκευση',
     logout: 'Εξοδος',
     submit: 'Υποβολή',
-    "delete": 'Διαγραφή'
+    delete: 'Διαγραφή',
   },
   footer: {
     created_by: 'Υλοποίηση από το',
@@ -40,16 +40,21 @@ export default {
     mindigital: 'Υπουργείο Ψηφιακής Διακυβέρνησης',
     using: 'με χρήση',
     open_source: 'Ανοιχτού Λογισμικού',
-    creative_commons: 'Άδεια χρήσης περιεχομένου'
+    creative_commons: 'Άδεια χρήσης περιεχομένου',
   },
   notfound: {
     page_not_found: 'Η σελίδα δεν βρέθηκε',
-    wrong_key_address: 'Εάν έχετε πληκτρολογήσει τη διεύθυνση της σελίδας, ελέγξτε ότι είναι σωστή.',
-    wrong_cp_address: 'Εάν έχετε επικολλήσει τη διεύθυνση της σελίδας, ελέγξτε ότι έχετε αντιγράψει ολόκληρη τη διεύθυνση.',
-    service_contact: 'Εάν η διεύθυνση της σελίδας είναι σωστή ή έχετε επιλέξει κάποιον σύνδεσμο ή κουμπί, επικοινωνήστε με τη γραμμή εξυπηρέτησης σε περίπτωση που χρειαστείτε βοήθεια.'
+    wrong_key_address:
+      'Εάν έχετε πληκτρολογήσει τη διεύθυνση της σελίδας, ελέγξτε ότι είναι σωστή.',
+    wrong_cp_address:
+      'Εάν έχετε επικολλήσει τη διεύθυνση της σελίδας, ελέγξτε ότι έχετε αντιγράψει ολόκληρη τη διεύθυνση.',
+    service_contact:
+      'Εάν η διεύθυνση της σελίδας είναι σωστή ή έχετε επιλέξει κάποιον σύνδεσμο ή κουμπί, επικοινωνήστε με τη γραμμή εξυπηρέτησης σε περίπτωση που χρειαστείτε βοήθεια.',
   },
   outdated: {
-    mobile: 'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είτε δεν υποστηρίζεται είτε είναι μη επικαιροποιημένος. Παρακαλούμε επικαιροποιήστε τον browser σας.',
-    web: 'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είναι μη επικαιροποιημένος. Για να επικαιροποιήσετε τον browser σας επισκεφθείτε την ιστοσελίδα:  '
-  }
-};
+    mobile:
+      'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είτε δεν υποστηρίζεται είτε είναι μη επικαιροποιημένος. Παρακαλούμε επικαιροποιήστε τον browser σας.',
+    web:
+      'Η ιστοσελίδα ενδέχεται να μην λειτουργεί σωστά καθώς ο browser σας είναι μη επικαιροποιημένος. Για να επικαιροποιήσετε τον browser σας επισκεφθείτε την ιστοσελίδα:  ',
+  },
+};

package/{esm/locales/en.js → src/locales/en.ts}

@@ -3,7 +3,7 @@ export default {
     label: {
       day: 'Day',
       month: 'Month',
-      year: 'Year'
+      year: 'Year',
     },
     error: {
       required: 'This field is required.',
@@ -18,21 +18,21 @@ export default {
       date: {
         invalid: 'Date must be a real date.',
         earlier_than: 'The date must be earlier than {{maxDate}}.',
-        later_than: 'The date must be later than {{minDate}}'
-      }
-    }
+        later_than: 'The date must be later than {{minDate}}',
+      },
+    },
   },
   button: {
     start: 'Start',
     login: 'Login',
     back: 'Back',
-    "continue": 'Continue',
+    continue: 'Continue',
     search_ref: 'Search',
     scan: 'Scan QR Code',
     save: 'Save',
     logout: 'Logout',
     submit: 'Sumbit',
-    "delete": 'Delete'
+    delete: 'Delete',
   },
   footer: {
     created_by: 'Created by',
@@ -40,16 +40,20 @@ export default {
     mindigital: 'Ministry of Digital Governance',
     using: 'using',
     open_source: 'Open Source Software',
-    creative_commons: 'Creative Commons'
+    creative_commons: 'Creative Commons',
   },
   notfound: {
     page_not_found: 'Page not found',
     wrong_key_address: 'If you typed the web address, check it is correct.',
-    wrong_cp_address: 'If you pasted the web address, check you copied the entire address..',
-    service_contact: 'If the web address is correct or you selected a link or button, contact the Service Helpline if you need to speak to someone about your tax credits.'
+    wrong_cp_address:
+      'If you pasted the web address, check you copied the entire address..',
+    service_contact:
+      'If the web address is correct or you selected a link or button, contact the Service Helpline if you need to speak to someone about your tax credits.',
   },
   outdated: {
-    mobile: 'This site may not work properly because your browser is either not supported or outdated. Please update your browser',
-    web: 'This site may not work properly because your browser outdated. To update your browser visit: '
-  }
-};
+    mobile:
+      'This site may not work properly because your browser is either not supported or outdated. Please update your browser',
+    web:
+      'This site may not work properly because your browser outdated. To update your browser visit: ',
+  },
+};

package/src/router/index.tsx

@@ -0,0 +1,28 @@
+import React, { createContext, useContext } from 'react';
+
+export type RouterInterface = {
+  children?: React.ReactNode;
+  router?: any;
+};
+export const RouterContext = createContext<RouterInterface>({});
+
+export const useRouter = (): RouterInterface => {
+  return useContext(RouterContext);
+};
+
+export const RouterProvider: React.FC<RouterInterface> = ({
+  router,
+  children,
+}) => {
+  return (
+    <RouterContext.Provider
+      value={{
+        router,
+      }}
+    >
+      {children}
+    </RouterContext.Provider>
+  );
+};
+
+export default RouterContext;

package/src/test-utils/delay.ts

@@ -0,0 +1,9 @@
+import { act } from '@testing-library/react';
+
+export async function delay(ms): Promise<void> {
+  await act(
+    (): Promise<void> => new Promise((resolve) => setTimeout(resolve, ms))
+  ); // still suspending
+}
+
+export default delay;

package/src/test-utils/mountWithTheme.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+
+const mockTheme = createMuiTheme({
+  header: {
+    height: '',
+    logo: {
+      component: '',
+      height: '',
+    },
+    border: {
+      width: '',
+      height: '',
+      background: '',
+    },
+  },
+  footer: {
+    link: '',
+    contrastText: '',
+    main: '',
+  },
+});
+
+const mountWithTheme = (tree: React.ReactNode): any => {
+  return mount(
+    <>
+      <ThemeProvider theme={mockTheme}>{tree}</ThemeProvider>
+    </>
+  );
+};
+
+export default mountWithTheme;