@digigov/ui 0.12.2 → 0.13.0

package/src/core/Tabs/index.tsx

@@ -1,36 +0,0 @@
-import { useCallback } from 'react';
-import Tabs from '@digigov/react-core/Tabs';
-import TabsList from '@digigov/react-core/TabsList';
-import TabsListItem from '@digigov/react-core/TabsListItem';
-import TabsPanel from '@digigov/react-core/TabsPanel';
-import TabsHeading from '@digigov/react-core/TabsHeading';
-import {
-  useTogglableSections,
-  UseTogglableSectionsReturn,
-} from '@digigov/ui/hooks/useTogglableSections';
-
-export interface UseTabsReturn extends UseTogglableSectionsReturn {
-  panel: (key: string) => { active: boolean; tabIndex: number; id: string };
-}
-export { Tabs, TabsList, TabsListItem, TabsPanel, TabsHeading };
-export const useTabs = (): UseTabsReturn => {
-  const { register, opened, ...rest } = useTogglableSections({
-    singleOpen: true,
-    toggleProperty: 'selected',
-    onToggleProperty: 'onClick',
-    firstOpen: true,
-    ariaNavigation: true,
-  });
-  const panel = useCallback(
-    (key: string) => {
-      return {
-        active: opened[key],
-        id: key,
-        tabIndex: opened[key] ? 1 : -1,
-      };
-    },
-    [opened]
-  );
-  return { register, opened, panel, ...rest };
-};
-export default Tabs;

package/src/core/WarningText/index.spec.tsx

@@ -1,10 +0,0 @@
-import * as React from 'react';
-import mountWithTheme from '@digigov/ui/test-utils/mountWithTheme';
-
-import Component from '@digigov/ui/core/WarningText';
-
-it('renders the WarningText with sample data', () => {
-  expect(
-    mountWithTheme(<Component>this is some random warning text</Component>)
-  ).toMatchSnapshot();
-});

package/src/custom.d.ts

@@ -1,8 +0,0 @@
-declare module '*.svg' {
-  const content: any;
-  export default content;
-}
-declare module '*.png' {
-  const content: any;
-  export default content;
-}

package/src/govgr/Footer/Copyright.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import CoreCopyright from '@digigov/react-core/Copyright';
-import { useTranslation } from '@digigov/ui/app';
-import Link from '@digigov/ui/core/Link';
-
-const getCopyright = () => {
-  const year = new Date().getFullYear();
-  return `© Copyright ${year}`;
-};
-
-export interface CopyrightProps {
-  copyright?: string;
-  createdBy?: React.ReactNode;
-  minDigitalCopyright?: boolean;
-}
-export const Copyright: React.FC<CopyrightProps> = ({
-  copyright = getCopyright(),
-  createdBy,
-  minDigitalCopyright,
-}) => {
-  const { t } = useTranslation();
-  const copyrightInfo = minDigitalCopyright
-    ? {
-        url: 'https://mindigital.gr',
-        label: t('footer.mindigital'),
-      }
-    : {
-        url: 'https://grnet.gr',
-        label: t('footer.grnet'),
-      };
-
-  return (
-    <CoreCopyright>
-      {copyright}
-      {' - '}
-      {createdBy || (
-        <>
-          {t('footer.created_by')}{' '}
-          <Link
-            href={copyrightInfo.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            {copyrightInfo.label}
-          </Link>{' '}
-          {!minDigitalCopyright && (
-            <>
-              {t('footer.using')}{' '}
-              <Link
-                href="https://mathe.ellak.gr/"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                {t('footer.open_source')}
-              </Link>
-            </>
-          )}
-        </>
-      )}
-    </CoreCopyright>
-  );
-};
-
-export default Copyright;

package/src/govgr/Footer/LicenseCCSA.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import NormalText from '@digigov/react-core/NormalText';
-import { useTranslation } from '@digigov/ui/app';
-import Link from '@digigov/ui/core/Link';
-
-export const LicenseCCSA: React.FC = () => {
-  const { t } = useTranslation();
-  return (
-    <NormalText>
-      <>
-        {t('footer.creative_commons')}{' '}
-        <Link
-          href="https://creativecommons.org/licenses/by-sa/4.0/deed.el"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          CC-BY-SA
-        </Link>{' '}
-      </>
-    </NormalText>
-  );
-};
-
-export default LicenseCCSA;

package/src/govgr/Footer/index.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import Copyright from '@digigov/ui/govgr/Footer/Copyright';
-import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-import Footer, { FooterProps } from '@digigov/react-core/Footer';
-import FooterContainer from '@digigov/react-core/FooterContainer';
-import FooterMeta from '@digigov/react-core/FooterMeta';
-import FooterMetaItem from '@digigov/react-core/FooterMetaItem';
-
-export interface GovGRFooterProps extends FooterProps {
-  copyright?: React.ReactNode;
-  minDigitalCopyright?: boolean;
-  license?: string;
-  openSource?: string;
-  children?: React.ReactNode;
-  createdBy?: React.ReactNode;
-  className?: string;
-}
-export const GovGRFooter: React.FC<GovGRFooterProps> = ({
-  copyright,
-  children,
-  createdBy,
-  minDigitalCopyright,
-}: GovGRFooterProps) => {
-  return (
-    <Footer>
-      <FooterContainer>
-        {children || (
-          <FooterMeta>
-            <FooterMetaItem>
-              {copyright ? (
-                copyright
-              ) : (
-                <Copyright
-                  createdBy={createdBy}
-                  minDigitalCopyright={minDigitalCopyright}
-                />
-              )}
-            </FooterMetaItem>
-            <FooterMetaItem>
-              <HellenicRepublicLogo />
-            </FooterMetaItem>
-          </FooterMeta>
-        )}
-      </FooterContainer>
-    </Footer>
-  );
-};
-
-export default GovGRFooter;

package/src/hooks/useDebounce.ts

@@ -1,50 +0,0 @@
-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

@@ -1,12 +0,0 @@
-// 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/src/hooks/useSearch.ts

@@ -1,47 +0,0 @@
-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

@@ -1,102 +0,0 @@
-/* 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/src/layouts/Basic/Content/index.tsx

@@ -1,24 +0,0 @@
-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/src/layouts/Basic/index.spec.tsx

@@ -1,24 +0,0 @@
-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/src/router/index.tsx

@@ -1,28 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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;

package/src/themes/grnet.js

@@ -1,109 +0,0 @@
-import React from 'react';
-import {
-  createMuiTheme,
-  responsiveFontSizes,
-  makeStyles,
-} from '@material-ui/core/styles';
-import logo from '../govgr/Logo/govgr-logo.svg';
-import { useTranslation } from '@digigov/ui/app/i18n';
-import Title from '@digigov/ui/typography/Title';
-import Container from '@material-ui/core/Container';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import Grid from '@digigov/react-core/Grid';
-import MuiAppBar from '@material-ui/core/AppBar';
-
-const useStyles = makeStyles((theme) => ({
-  title: {
-    lineHeight: '2em',
-    marginBottom: 0,
-    marginLeft: '5px',
-    marginRight: theme.spacing(2),
-  },
-  appbar: {
-    background: theme.palette.footer.main,
-    color: theme.palette.footer.contrastText,
-  },
-  text: {
-    flexGrow: 1,
-  },
-}));
-
-const Logo = () => {
-  const { t } = useTranslation();
-  const styles = useStyles();
-  return (
-    <div style={{ display: 'flex' }}>
-      <img
-        src={logo}
-        height={24}
-        width={24}
-        style={{ display: 'flex', marginTop: '6px' }}
-      />
-      <Title size="sm" className={styles.title}>
-        {t('header_appbar.govgr_icon')}
-      </Title>
-    </div>
-  );
-};
-
-const Footer = () => {
-  const styles = useStyles();
-  return (
-    <MuiAppBar className={styles.appbar} position="static">
-      <Grid container>
-        <Container>
-          <Toolbar variant="dense" disableGutters>
-            <Typography variant="body2" className={styles.text}>
-              Powered by open source software
-            </Typography>
-          </Toolbar>
-        </Container>
-      </Grid>
-    </MuiAppBar>
-  );
-};
-
-let theme = createMuiTheme({
-  overrides: {
-    MuiButton: {
-      root: {
-        borderRadius: 0,
-      },
-    },
-  },
-  palette: {
-    primary: {
-      main: '#283d70',
-    },
-    secondary: {
-      main: '#ffffff',
-      dark: '#f5f5f5',
-    },
-    footer: {
-      main: '#e1e1e2',
-      contrastText: '#000',
-    },
-  },
-  typography: {
-    htmlFontSize: 14,
-  },
-  header: {
-    logo: {
-      component: Logo,
-      height: 45,
-    },
-    border: {
-      width: '92%',
-      height: '5px',
-    },
-    height: '45px',
-  },
-  footer: {
-    component: Footer,
-  },
-});
-
-theme = responsiveFontSizes(theme, ['sm', 'md', 'lg']);
-
-export default theme;

package/src/themes/index.tsx

@@ -1,38 +0,0 @@
-import { ReactChild } from 'react';
-import { useTheme, makeStyles } from '@material-ui/core';
-
-interface Logo {
-  component: ReactChild;
-  height: string | number;
-}
-
-interface Footer {
-  link: string;
-  contrastText: string;
-  main: string;
-  component?: ReactChild;
-}
-
-interface Header {
-  logo: Logo;
-  border: {
-    width: string | number;
-    height: string | number;
-    background: string;
-  };
-  height: string | number;
-}
-
-declare module '@material-ui/core/styles/createMuiTheme' {
-  interface Theme {
-    header: Header;
-    footer: Footer;
-  }
-  // allow configuration using `createMuiTheme`
-  interface ThemeOptions {
-    header: Header;
-    footer: Footer;
-  }
-}
-
-export { useTheme, makeStyles };