@digigov/ui 0.12.2 → 0.13.0

package/src/api/useResourceAction.tsx

@@ -1,80 +0,0 @@
-import { useState, useEffect } from 'react';
-import { RequestResponse } from '@digigov/ui/api/useResource';
-import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
-import { useMutation } from 'react-query';
-import { useAPI } from '@digigov/ui/api';
-
-export function useResourceAction(
-  resource: string,
-  id?: (string | null | undefined) | number | ((...args: any) => void),
-  method = 'POST',
-  data?: Record<string, any> | null | ((...args: any) => void),
-  query?: Record<string, any> | null | ((...args: any) => void),
-  options?: RequestInit | null
-): RequestResponse {
-  const {
-    config: { baseURL },
-    token,
-  } = useAPI();
-  const [{ url, dataSet }, setFetchOpts] = useState({
-    url: '',
-    dataSet: false,
-  });
-  const [consume, setConsume] = useState(false);
-  async function customFetcher(...args) {
-    const [fetchUrl, options] = args[0];
-    if (options.body) {
-      setFetchOpts({ url: fetchUrl, dataSet: true });
-    } else {
-      setFetchOpts({ url: fetchUrl, dataSet: false });
-    }
-    const response = await fetch(fetchUrl, options);
-    try {
-      const { data } = await processResponse(response, true);
-      if (data) {
-        return Promise.resolve(data);
-      }
-    } catch (error) {
-      return Promise.reject(error.error);
-    }
-  }
-
-  const [mutate, { status, data: _data, error, reset }] = useMutation(
-    customFetcher,
-    {}
-  );
-  useEffect(() => {
-    if (consume) {
-      const queryKey = getQueryKey(
-        resource,
-        id,
-        query,
-        data,
-        options,
-        method,
-        baseURL,
-        token
-      );
-      if (typeof queryKey === 'function') {
-        mutate(queryKey());
-      } else {
-        mutate(queryKey);
-      }
-      setConsume(false);
-    }
-  }, [consume]);
-  return {
-    data: _data,
-    loading: status === 'loading',
-    loaded: ['success', 'error'].includes(status),
-    error,
-    invalidate: (): void => {
-      reset();
-    },
-    fetch() {
-      setConsume(true);
-    },
-    dataSet,
-    url,
-  };
-}

package/src/api/useResourceQuery.tsx

@@ -1,177 +0,0 @@
-import { useEffect, useMemo, useState, useCallback } from 'react';
-import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
-import { usePaginatedQuery, QueryFunction, queryCache } from 'react-query';
-import { useAPI } from '@digigov/ui/api';
-
-const DEFAULT_PAGINATION_LIMIT = 30;
-const DEFAULT_LIMIT_OPTIONS = [10, 30, 60, 100];
-
-export function useResourceManyBase(
-  resource: string,
-  query?: Record<string, any> | null | ((...args: any) => any),
-  options?: RequestInit | null
-): any {
-  const {
-    config: { baseURL },
-    token,
-  } = useAPI();
-  const [{ url, dataSet }, setFetchOpts] = useState({
-    url: '',
-    dataSet: false,
-  });
-  const customFetcher: QueryFunction<any> = useCallback(
-    async (fetchUrl, options) => {
-      setFetchOpts({ url: fetchUrl, dataSet: false });
-      const response = await fetch(fetchUrl, options);
-      try {
-        const { data } = await processResponse(response, true);
-        if (data) {
-          return Promise.resolve(data);
-        }
-      } catch (error) {
-        return Promise.reject(error.error);
-      }
-    },
-    []
-  );
-  const queryKey = getQueryKey(
-    resource,
-    null,
-    query,
-    null,
-    options,
-    'GET',
-    baseURL,
-    token
-  );
-  let enabled = true;
-  let resolvedQueryKey;
-  if (typeof queryKey === 'function') {
-    try {
-      resolvedQueryKey = queryKey();
-    } catch (err) {
-      enabled = false;
-    }
-  }
-
-  const {
-    resolvedData,
-    latestData: data,
-    error,
-    isFetching,
-    refetch,
-  } = usePaginatedQuery({
-    queryKey: resolvedQueryKey || queryKey,
-    queryFn: customFetcher,
-    config: {
-      enabled,
-      suspense: true,
-      cacheTime: 30000,
-      refetchOnMount: false,
-    },
-  });
-
-  return {
-    data: data || resolvedData,
-    loading: isFetching,
-    loaded: !!data || !!error,
-    error,
-    invalidate: (): void => {
-      queryCache.invalidateQueries(resolvedQueryKey || queryKey);
-    },
-    fetch: refetch,
-    dataSet,
-    url,
-  };
-}
-
-export type UseResourceManyResponse = {
-  data?: any;
-  meta?: {
-    total?: number;
-    count?: number;
-  };
-  page: number;
-  limit: number;
-  totalPages: number;
-  total: number;
-  limitOptions: number[];
-  setPage: (page: number) => void;
-  setLimit: (limit: number) => void;
-  hasNext: boolean;
-  hasPrevious: boolean;
-};
-export function useResourceMany(
-  resource: string,
-  query?: Record<string, any> | null,
-  options?: RequestInit | null
-): UseResourceManyResponse {
-  // allow developer to set a custom limit, fallback to a common value
-  const [limit, setLimit] = useState(
-    (query && query.limit) || DEFAULT_PAGINATION_LIMIT
-  );
-  const [pageParams, setPageParams] = useState({
-    offset: (query && query.offset) || 0,
-    limit,
-  });
-  // update options when limit is changed
-  useEffect(() => {
-    if (pageParams.limit !== limit) {
-      setPageParams({ ...pageParams, limit: limit });
-    }
-  }, [limit]);
-  // update user provided query with pagination params
-  const queryKey = JSON.stringify(query);
-  const pageParamsKey = JSON.stringify(pageParams);
-  const q = useMemo(() => {
-    return { ...pageParams, ...query };
-  }, [queryKey, pageParamsKey]);
-  const { data, ...rest } = useResourceManyBase(resource, q, options);
-  // extract data/metadata from response
-  const resp = data ? data.data : data;
-  const meta = data ? data.meta : data;
-  const totalPages = useMemo(
-    () => (data && data.meta && data.meta.total) || 1,
-    [data]
-  );
-  const total = useMemo(() => (data && data.meta && data.meta.count) || 0, [
-    data,
-  ]);
-  const limitOptions = useMemo(() => DEFAULT_LIMIT_OPTIONS, []);
-  const page = useMemo(() => {
-    const offset = parseInt(pageParams.offset) || 0;
-    const _limit = parseInt(`${pageParams.limit}`) || parseInt(`${limit}`);
-    return offset / _limit;
-  }, [pageParams]);
-  // set params to specific page
-  const setPage = useCallback(
-    (page) => {
-      if (page > totalPages) {
-        page = totalPages;
-      }
-      if (page <= 0) {
-        page = 0;
-      }
-      const _limit = limit || DEFAULT_PAGINATION_LIMIT;
-      const offset = _limit * page;
-      setPageParams({ offset, limit });
-    },
-    [setPageParams]
-  );
-  const hasNext = page < totalPages - 1;
-  const hasPrevious = page > 0;
-  return {
-    data: resp,
-    meta,
-    page,
-    limit,
-    totalPages,
-    total,
-    limitOptions,
-    setPage,
-    setLimit,
-    hasNext,
-    hasPrevious,
-    ...rest,
-  };
-}

package/src/api/utils.tsx

@@ -1,156 +0,0 @@
-import { APIError } from '@digigov/ui/api/APIErrors';
-import { ProcessedResponse } from '@digigov/ui/api/fetchAPI';
-import { ArrayQueryKey } from 'react-query/types';
-
-export async function parseErrors(response: Response): Promise<string[]> {
-  const errors: string[] = [];
-  const error = {
-    message: response.statusText,
-    code: response.status,
-    meta: {},
-  };
-  // do our best to resolve as more specific details for the error
-  try {
-    const json: Record<string, string> = await response.json();
-    error.meta = json;
-    // this is the way synnefo reports errors
-    try {
-      const apiErrors = Object.keys(json);
-      apiErrors.forEach((key) => json[key] && errors.push(json[key]));
-    } catch (err) {
-      console.error('Cannot parse json error', json);
-    }
-  } catch (err) {
-    try {
-      const text = await response.text();
-      error.message = text;
-      // error.meta.statusText = response.statusText; // keep reference to statusText
-    } catch (err) {}
-  }
-  return errors;
-}
-
-export async function processResponse(
-  response,
-  raiseError = false
-): Promise<ProcessedResponse> {
-  const status = response.status;
-  try {
-    if (!response.ok) {
-      const errors = await parseErrors(response);
-      if (raiseError) {
-        throw new APIError(errors, status);
-      }
-      return {
-        error: errors[0],
-        status,
-      };
-    }
-    const contentType = response.headers.get('content-type');
-    if (contentType && contentType.indexOf('application/json') !== -1) {
-      const data = await response.json();
-      return {
-        data,
-        status,
-      };
-    } else {
-      const data = await response.text();
-      return {
-        data,
-        status,
-      };
-    }
-  } catch (error) {
-    if (raiseError) {
-      throw new APIError([error], status);
-    }
-    return {
-      status,
-      error,
-    };
-  }
-}
-
-export function getArgs(
-  resource: any,
-  id: any,
-  query: any,
-  data: any,
-  options,
-  method,
-  baseURL,
-  token
-) {
-  let body, params;
-  if (typeof query === 'function') {
-    params = new URLSearchParams(query()).toString();
-  } else if (query) {
-    params = new URLSearchParams(query).toString();
-  }
-  if (typeof data === 'function') {
-    body = JSON.stringify(data());
-  } else if (data) {
-    body = JSON.stringify(data);
-  }
-  if (typeof id === 'function') {
-    id = id();
-  }
-  if (!options) {
-    options = {};
-  }
-  const url = `${baseURL}/${resource}${id ? `/${id}/` : ''}${
-    params ? `?${params}` : ''
-  }`;
-  const _options = {
-    headers: {
-      'content-type': 'application/json',
-    },
-    body,
-    method,
-    ...options,
-  };
-  if (token) {
-    _options.headers.Authorization = `Token ${token}`;
-  }
-  return [url, _options];
-}
-
-export function getQueryKey(
-  resource: string,
-  id: string | number | null | undefined | ((...args: any) => void),
-  query: Record<string, any> | null | undefined | ((...args: any) => void),
-  data: Record<string, any> | null | undefined | ((...args: any) => void),
-  options: RequestInit | null | undefined,
-  method: string | null | undefined,
-  baseURL: string,
-  token: string | null | undefined
-): ArrayQueryKey | ((...args: any) => ArrayQueryKey) {
-  let queryKey;
-
-  if ([id, query, data].some((param) => typeof param === 'function')) {
-    queryKey = () => {
-      return getArgs(
-        resource,
-        id,
-        query,
-        data,
-        options,
-        method,
-        baseURL,
-        token
-      );
-    };
-  } else {
-    queryKey = getArgs(
-      resource,
-      id,
-      query,
-      data,
-      options,
-      method,
-      baseURL,
-      token
-    );
-  }
-  return queryKey;
-}

package/src/app/App.tsx

@@ -1,33 +0,0 @@
-import React, { Suspense } from 'react';
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
-import { ThemeProvider, Theme, makeStyles } from '@material-ui/core/styles';
-
-export const useAppStyles = makeStyles({
-  root: {},
-});
-
-export interface AppProps {
-  theme: Theme;
-  children?: React.ReactNode;
-  classes?: { root: BaseCSSProperties };
-}
-
-const App: React.FC<AppProps> = ({ theme, children }) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <Suspense fallback={'loading...'}>{children}</Suspense>
-    </ThemeProvider>
-  );
-};
-
-export const StaticApp: React.FC<AppProps> = ({ theme, children }) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      {children}
-    </ThemeProvider>
-  );
-};
-
-export default App;

package/src/app/Header/HeaderSection.tsx

@@ -1,13 +0,0 @@
-import CoreHeaderSection, {
-  HeaderSectionProps as CoreHeaderSectionProps,
-} from '@digigov/react-core/HeaderSection';
-import withDeprecation from '@digigov/ui/utils/withDeprecation';
-
-export type HeaderSectionProps = CoreHeaderSectionProps;
-
-export const HeaderSection = withDeprecation(CoreHeaderSection, {
-  name: 'HeaderSection',
-  rename: 'HeaderSection',
-});
-
-export default HeaderSection;

package/src/app/Header/HeaderTitle.tsx

@@ -1,24 +0,0 @@
-import CoreHeaderTitle, {
-  HeaderTitleProps as CoreHeaderTitleProps,
-} from '@digigov/react-core/HeaderTitle';
-import withDeprecation from '@digigov/ui/utils/withDeprecation';
-
-export type HeaderTitleProps = CoreHeaderTitleProps;
-
-export const HeaderTitle = withDeprecation(CoreHeaderTitle, {
-  name: 'Header',
-  props: {
-    xs: {
-      error: true,
-    },
-    linkProps: {
-      error:
-        'The `linkProps` property is deprecated. You can use native anchor link props instead.',
-    },
-    linkComponent: {
-      error: 'The `linkComponent` property is deprecated.',
-    },
-  },
-});
-
-export default HeaderTitle;

package/src/app/Header/index.spec.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react';
-import { mount } from 'enzyme';
-import mountWithTheme from '@digigov/ui/test-utils/mountWithTheme';
-
-import logo from '../../govgr/Logo/govgr-logo.svg';
-import Header, {
-  HeaderTitle,
-  HeaderSubtitle,
-  HeaderLogo,
-} from '@digigov/ui/app/Header';
-
-it('renders the header with logo, title and subtitle ', () => {
-  expect(
-    mountWithTheme(
-      <Header>
-        <HeaderLogo src={logo} href="https://gov.gr" />
-        <HeaderTitle href="/some-url">A title</HeaderTitle>
-        <HeaderSubtitle>A subtitle</HeaderSubtitle>
-      </Header>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the HeaderTitle component', () => {
-  expect(mount(<HeaderTitle>A title</HeaderTitle>)).toMatchSnapshot();
-});
-
-it('renders the HeaderTitle component with custom href', () => {
-  expect(
-    mount(<HeaderTitle href={'/somelink'}>A title</HeaderTitle>)
-  ).toMatchSnapshot();
-});

package/src/app/NotFound/index.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import PageTitle from '@digigov/react-core/PageTitle';
-import PageTitleHeading from '@digigov/react-core/PageTitleHeading';
-import Paragraph from '@digigov/react-core/Paragraph';
-import { useTranslation } from '@digigov/ui/app';
-
-export const NotFound: React.FC = () => {
-  const { t } = useTranslation();
-  return (
-    <>
-      <PageTitle>
-        <PageTitleHeading>{t('notfound.page_not_found')}</PageTitleHeading>
-      </PageTitle>
-      <Paragraph>{t('notfound.wrong_key_address')}</Paragraph>
-      <Paragraph>{t('notfound.wrong_cp_address')}</Paragraph>
-      <Paragraph>{t('notfound.service_contact')}</Paragraph>
-    </>
-  );
-};
-
-export default NotFound;

package/src/app/OutdatedBrowserBanner.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { WarningText } from '@digigov/ui/core/WarningText';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import useOutdatedBrowserCheck from '@digigov/ui/hooks/useOutdatedBrowserCheck';
-import Link from '@digigov/ui/core/Link';
-import { isMobile } from '@digigov/ui/utils/evaluateBrowserVersion';
-import { useTranslation } from '@digigov/ui/app/';
-
-export default function OutdatedBrowserBanner(): JSX.Element {
-  const mob = isMobile;
-  const [shouldUpdate, updateLink] = useOutdatedBrowserCheck();
-  const { t } = useTranslation();
-  return (
-    <WarningText>
-      {shouldUpdate ? (
-        <>
-          {mob.any() ? (
-            <>
-              <Paragraph>{t('outdated.mobile')}</Paragraph>
-            </>
-          ) : (
-            <>
-              <Paragraph>
-                {t('outdated.web')}
-                <Link href={updateLink} target="_blank">
-                  {updateLink}{' '}
-                </Link>
-              </Paragraph>
-            </>
-          )}
-        </>
-      ) : (
-        <></>
-      )}
-    </WarningText>
-  );
-}

package/src/app/PageTitle.tsx

@@ -1,70 +0,0 @@
-import React from 'react';
-import Caption, { CaptionProps } from '@digigov/ui/typography/Caption';
-import Title, { TitleProps } from '@digigov/ui/typography/Title';
-import withDeprecation from '@digigov/ui/utils/withDeprecation';
-
-export const PageTitle: React.FC<{}> = withDeprecation(
-  ({ children }) => {
-    return <>{children}</>;
-  },
-  {
-    name: 'PageTitle',
-    warning:
-      'There is no need to use PageTitle components anymore. It will be removed in a later version',
-  }
-);
-
-export default PageTitle;
-
-export const PageTitleSection: React.FC<{}> = withDeprecation(
-  ({ children }) => {
-    return <>{children}</>;
-  },
-  {
-    name: 'PageTitleSection',
-    warning:
-      'There is no need to use PageTitleSection components anymore. It will be removed in a later version',
-  }
-);
-
-export const PageTitleCaption: React.FC<CaptionProps> = withDeprecation(
-  Caption,
-  {
-    name: 'PageTitleCaption',
-    rename: 'Caption',
-  }
-);
-
-export interface PageTitleHeadingProps extends TitleProps { }
-
-export const PageTitleHeading: React.FC<TitleProps> = withDeprecation(
-  ({ component, children, ...props }) => {
-    return (
-      <Title size="xl" element={component} {...props}>
-        {children}
-      </Title>
-    );
-  },
-  {
-    name: 'PageTitleHeading',
-    props: {
-      dense: {
-        error: true,
-      },
-      size: {
-        values: {
-          xs: {
-            error: true,
-          },
-        },
-      },
-      component: {
-        values: {
-          h5: {
-            error: true,
-          },
-        },
-      },
-    },
-  }
-);

package/src/app/QrCodeScanner/index.spec.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { mount } from 'enzyme';
-
-import QrCodeScanner from '@digigov/ui/app/QrCodeScanner';
-
-it('renders the qr code scanner', () => {
-  expect(
-    mount(
-      <QrCodeScanner
-        onScan={(args) => {
-          console.log(args);
-        }}
-        onError={(args) => {
-          console.log(args);
-        }}
-      />
-    )
-  ).toMatchSnapshot();
-});