@digigov/ui 0.12.2 → 0.13.0

package/docs/introduction.mdx

@@ -1,34 +0,0 @@
----
-title: Introduction
-parent: docs/ui
----
-
-The `@digigov/ui` is a collection of libraries and tools (in short, an SDK -
-Software Development Kit) written in the latest Ecmascript and Typescript
-specifications that are developed by the [GRNET](https://www.grnet.gr) Devs.
-Their purpose is to provide software engineers inside GRNET (or in other
-external teams) an easy, battle-tested and scalable way to design and develop
-high quality [gov.gr](https://www.gov.gr) services and web applications.
-
-The technologies used includes a plethora of tools, such as
-[node.js](https://nodejs.org/), [React](https://reactjs.org/) and
-[Next](https://nextjs.org/). GRNET Devs team has built-upon those technologies
-but also developed custom software solutions to meet our unique demands and
-specifications.
-
-## Overview of Digigov SDKs
-
-Some of the tools and libraries currently used in development are:
-
-- **create-digigov-app** - Create a fresh Digigov app with one command
-- **@digigov/ui** - Ready-to-use UI components for the [DigiGOV Design System](/docs/site/design) implemented in [React](https://reactjs.com) and based on
-  [Google Material Design Language](https://material.io) and the
-  [React Material UI](https://material-ui.com) library
-- **@digigov/auth** - A library that contains React Providers and functions
-  for the authentication system of gov.gr services
-- **@digigov/dev** - Software package utilities and pre-bundled configurations
-  and scripts for day-to-day developer's needs (test, lint, serve)
-- **@digigov/nextjs** - A small set of utilities to facilitate developing
-  @digigov/ui powered apps using [Next.js](https://nextjs.com) framework
-
-[Continue in the next section “Create a new service“](/docs/ui/create-a-new-service)

package/src/api/APIErrors.tsx

@@ -1,44 +0,0 @@
-import React from 'react';
-export class APIErrors extends React.Component<{
-  fallback: React.ElementType<any>;
-}> {
-  state = { hasError: false, error: null };
-  static getDerivedStateFromError(error: Error): object {
-    return {
-      hasError: true,
-      error,
-    };
-  }
-
-  render(): React.ReactNode {
-    if (this.state.hasError) {
-      const Comp = this.props.fallback;
-      return <Comp error={this.state.error} />;
-    }
-    return this.props.children;
-  }
-}
-
-export default APIErrors;
-
-/*
-  The type of `error` variable of the `useRequest` hook result.
-
-  We expect a request to fail for at least one reason (`error` property). In
-  case of multiple errors, developers may use `errors` property to construct
-  a more verbose error report.
-*/
-export class APIError extends Error {
-  error: null | { data: { invalid_fields: Record<string, any>[] } } = null;
-  errors = null;
-  status = 200;
-
-  constructor(errors, status, ...args) {
-    super(...args);
-    this.name = 'APIError';
-    Error.captureStackTrace(this, APIError);
-    this.error = (errors && errors.length && errors[0]) || errors;
-    this.errors = errors;
-    this.status = status;
-  }
-}

package/src/api/APIProvider.tsx

@@ -1,27 +0,0 @@
-import React, { createContext, useMemo } from 'react';
-export interface APIConfig {
-  baseURL: string;
-}
-export interface APIContextData {
-  config: APIConfig;
-  token: string | null | undefined;
-}
-export interface APIProviderProps {
-  token: string | null | undefined;
-  children: React.ReactNode;
-  config: APIConfig;
-}
-export const APIContext = createContext<APIContextData>({
-  config: {
-    baseURL: '',
-  },
-  token: null,
-});
-export const APIProvider: React.FC<APIProviderProps> = ({
-  token = null,
-  config = { baseURL: '' },
-  children,
-}) => {
-  const data = useMemo(() => ({ token, config }), [token, config]);
-  return <APIContext.Provider value={data}>{children}</APIContext.Provider>;
-};

package/src/api/fetchAPI.ts

@@ -1,45 +0,0 @@
-import { APIContextData } from '@digigov/ui/api/APIProvider';
-import { getArgs, processResponse } from '@digigov/ui/api/utils';
-
-export interface ProcessedResponse {
-  data?: any;
-  status: number;
-  error?: any;
-}
-
-export interface FetchAPIProps {
-  resource: string;
-  options?: {
-    query?: Record<string, any>;
-    path?: string;
-    method?: string;
-    body?: any;
-  };
-  getAPI?: (...args) => APIContextData;
-}
-
-export async function fetchAPI(
-  resource: string,
-  { query = {}, path = '', method = 'GET', body = null }: any,
-  apiConfig: any
-): Promise<ProcessedResponse> {
-  const {
-    config: { baseURL },
-    token,
-  } = apiConfig;
-  const [url, options] = getArgs(
-    resource,
-    path,
-    query,
-    body,
-    null,
-    method,
-    baseURL,
-    token
-  );
-  const response = await window.fetch(url, options);
-  const { data, error, status } = await processResponse(response);
-  return { data, error, status };
-}
-
-export default fetchAPI;

package/src/api/index.spec.tsx

@@ -1,419 +0,0 @@
-/* eslint-disable @typescript-eslint/explicit-function-return-type */
-import React, { FunctionComponent, Suspense, useEffect } from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import fetchMock from 'fetch-mock';
-import {
-  APIProvider,
-  useResource,
-  useResourceAction,
-  useResourceMany,
-  APIContextData,
-  APIErrors,
-} from '@digigov/ui/api/index';
-import delay from '@digigov/ui/test-utils/delay';
-import fetchAPI from '@digigov/ui/api/fetchAPI';
-import 'whatwg-fetch';
-
-const HandleError = ({ error }) => {
-  if (error.name === 'APIError') {
-    error = error.error;
-    if (error.status === 404) {
-      return <>Not found</>;
-    }
-  }
-  // TODO: render the <SomethingWentWrong /> page here
-  return <span>something went wrong</span>;
-};
-
-const makeWrapper = ({ config, token }: APIContextData): FunctionComponent => ({
-  children,
-}: {
-  children: React.ReactNode;
-}): any => (
-  <Suspense fallback={'Loading'}>
-    <APIErrors fallback={HandleError}>
-      <APIProvider config={config} token={token}>
-        {children}
-      </APIProvider>
-    </APIErrors>
-  </Suspense>
-);
-const BASE_URL = 'http://test/api';
-const TOKEN = 'mytoken';
-const DELAY = 100;
-const buildMockOptions = ({
-  resource,
-  method = 'GET',
-  authenticated = true,
-  query = {},
-  response,
-  delay = DELAY / 2,
-}): [any, any, any] => {
-  const headers: any = {
-    'content-type': 'application/json',
-  };
-  const options = { delay };
-  if (authenticated) {
-    headers.Authorization = `Token ${TOKEN}`;
-  }
-  const params = new URLSearchParams(query).toString();
-  return [
-    `${BASE_URL}/${resource}${params && `?${params}`}`,
-    response,
-    {
-      headers,
-      method,
-      ...options,
-    },
-  ];
-};
-
-const getAPI = () => {
-  return {
-    config: {
-      baseURL: BASE_URL,
-    },
-    token: TOKEN,
-  };
-};
-
-const wrapper = makeWrapper(getAPI());
-
-describe('fetchAPI', () => {
-  fetchMock.config.overwriteRoutes = true;
-  afterAll(() => {
-    fetchMock.restore();
-  });
-  beforeEach(fetchMock.resetBehavior);
-  beforeEach(fetchMock.resetHistory);
-  it('fetchAPI gets', async () => {
-    const resource = 'resource';
-    const path = 'some_id';
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource: `${resource}/${path}/`,
-        response: { value: 'SWR' },
-      })
-    );
-    const { data } = await fetchAPI(resource, { path }, getAPI());
-    expect(data.value).toBe('SWR');
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-});
-
-describe('useResource', () => {
-  fetchMock.config.overwriteRoutes = true;
-  afterAll(() => {
-    fetchMock.restore();
-  });
-  beforeEach(fetchMock.resetBehavior);
-  beforeEach(fetchMock.resetHistory);
-  it('useResource should return data', async () => {
-    const resource = 'resource';
-    function Page() {
-      const { data } = useResource(resource);
-      return <div>hello, {data?.value}</div>;
-    }
-    fetchMock.mock(
-      ...buildMockOptions({ resource, response: { value: 'SWR' } })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-
-    expect(container.firstChild).not.toBe(null);
-
-    if (container.firstChild) {
-      expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-        `"hello, "`
-      );
-      await delay(DELAY);
-      expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-        `"hello, SWR"`
-      );
-    }
-
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-
-  it('should run duplicate request once', async () => {
-    const resource = 'dupliresource';
-    function Page() {
-      useResource(resource);
-      const { data: duplData } = useResource(resource);
-      return <div>hello, {duplData?.value}</div>;
-    }
-
-    fetchMock.mock(
-      ...buildMockOptions({ resource, response: { value: 'myvalue' } })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, "`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, myvalue"`
-    );
-
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-});
-
-describe('useResourceAction', () => {
-  fetchMock.config.overwriteRoutes = true;
-  afterAll(() => {
-    fetchMock.restore();
-  });
-  beforeEach(fetchMock.resetBehavior);
-  beforeEach(fetchMock.resetHistory);
-
-  it('useResourceAction should return result ', async () => {
-    const resource = 'resourceaction';
-    function Page() {
-      const { data, fetch } = useResourceAction(
-        resource,
-        undefined,
-        'POST',
-        {
-          some: 'data',
-        },
-        undefined
-      );
-      useEffect(() => {
-        fetch();
-      }, []);
-      return <div>hello, {data && data.value}</div>;
-    }
-
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        response: { value: 'myvalue' },
-        method: 'POST',
-      })
-    );
-
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, "`
-    );
-    await delay(DELAY * 2);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, myvalue"`
-    );
-
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-
-  it('useResourceAction should be invalidated and run twice', async () => {
-    const resource = 'resourceactiondouble';
-    function Page() {
-      const { data, fetch, invalidate } = useResourceAction(
-        resource,
-        undefined,
-        'POST',
-        {
-          some: 'data',
-        },
-        undefined
-      );
-      useEffect(() => {
-        fetch();
-      }, []);
-      useEffect(() => {
-        setTimeout(() => {
-          invalidate();
-        }, DELAY * 2);
-        setTimeout(() => {
-          fetch();
-        }, DELAY * 3);
-      }, []);
-      return <div>hello, {data && data.value}</div>;
-    }
-
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        response: { value: 'myvalue' },
-        method: 'POST',
-      })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, "`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, myvalue"`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, "`
-    );
-    await delay(DELAY * 2);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, myvalue"`
-    );
-
-    expect(fetchMock.calls()).toHaveLength(2);
-  });
-});
-
-describe('useResourceMany', () => {
-  fetchMock.config.overwriteRoutes = true;
-  afterAll(() => {
-    fetchMock.restore();
-  });
-  beforeEach(fetchMock.resetBehavior);
-  beforeEach(fetchMock.resetHistory);
-
-  //check this test again (loading/hello)
-
-  it('useResourceMany should return data', async () => {
-    const resource = 'resourceMany';
-    function Page() {
-      const { data } = useResourceMany(resource);
-      return <div>hello, {data && data.join('')}</div>;
-    }
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        query: { offset: 0, limit: 30 },
-        response: {
-          data: ['S', 'W', 'R'],
-          meta: {
-            total: 1,
-            count: 3,
-          },
-        },
-      })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"Loading"`
-    );
-    await delay(DELAY * 2);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, SWR"`
-    );
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-
-  it('useResourceMany should handle hasNext, hasPrevious', async () => {
-    const resource = 'resourceManyhasNext';
-    function Page() {
-      const { hasNext, hasPrevious } = useResourceMany(resource);
-      return (
-        <div>
-          {hasNext ? '' : 'no'} next,{hasPrevious ? '' : 'no'} previous
-        </div>
-      );
-    }
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        query: { offset: 0, limit: 30 },
-        response: {
-          data: ['S', 'W', 'R'],
-          meta: {
-            total: 1,
-            count: 3,
-          },
-        },
-      })
-    );
-    const { container } = render(<Page />, {
-      wrapper,
-    });
-
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"Loading"`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"no next,no previous"`
-    );
-    expect(fetchMock.calls()).toHaveLength(1);
-  });
-
-  it('useResourceMany should handle setPage with custom limit option', async () => {
-    const resource = 'resourceManysetpage';
-    function Page() {
-      const { data, setPage, page } = useResourceMany(resource, { limit: 10 });
-      const nextPage = () => {
-        setPage(page + 1);
-      };
-      return (
-        <div>
-          hello, {data.join('')}
-          <button onClick={nextPage}>next</button>
-        </div>
-      );
-    }
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        query: { offset: 0, limit: 10 },
-        response: {
-          data: ['S', 'W', 'R'],
-          meta: {
-            total: 3,
-            count: 100,
-          },
-        },
-      })
-    );
-    fetchMock.mock(
-      ...buildMockOptions({
-        resource,
-        query: { offset: 10, limit: 10 },
-        response: {
-          data: ['R', 'W', 'S'],
-          meta: {
-            total: 3,
-            count: 100,
-          },
-        },
-      })
-    );
-    const { container, getByText } = render(<Page />, {
-      wrapper,
-    });
-
-    expect(container.firstChild).not.toBe(null);
-
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"Loading"`
-    );
-    await delay(DELAY);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, SWRnext"`
-    );
-    fireEvent.click(getByText('next'));
-    await delay(DELAY * 2);
-    expect(container?.firstChild?.textContent).toMatchInlineSnapshot(
-      `"hello, RWSnext"`
-    );
-    expect(fetchMock.calls()).toHaveLength(2);
-  });
-});

package/src/api/useResource.tsx

@@ -1,96 +0,0 @@
-import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
-import { useQuery, queryCache } from 'react-query';
-import { useAPI } from '@digigov/ui/api';
-import { useState } from 'react';
-
-export type RequestResponse = {
-  data?: Record<string, any>;
-  loading?: boolean;
-  loaded?: boolean;
-  error?: Error | string | null | unknown;
-  invalidate: () => void;
-  fetch: () => void;
-  dataSet?: boolean | null;
-  url: string;
-};
-
-export function useResource(
-  resource: string,
-  id?: string | number | ((...args) => void),
-  query?: Record<string, any> | null | ((...args) => void),
-  options?: RequestInit | null,
-  suspense?: boolean
-): RequestResponse {
-  const {
-    config: { baseURL },
-    token,
-  } = useAPI();
-  const [{ url, dataSet }, setFetchOpts] = useState({
-    url: '',
-    dataSet: false,
-  });
-
-  async function customFetcher(fetchUrl, options) {
-    setFetchOpts({ url: fetchUrl, dataSet: false });
-    const response = await fetch(fetchUrl, options);
-    try {
-      const { data, error } = await processResponse(response);
-      if (error) {
-        return Promise.reject(error);
-      }
-      if (data) {
-        return Promise.resolve(data);
-      }
-    } catch (error) {
-      return Promise.reject(error.error);
-    }
-  }
-
-  const queryKey = getQueryKey(
-    resource,
-    id,
-    query,
-    null,
-    options,
-    'GET',
-    baseURL,
-    token
-  );
-  let enabled = true;
-  let resolvedQueryKey;
-  if (typeof queryKey === 'function') {
-    try {
-      resolvedQueryKey = queryKey();
-    } catch (err) {
-      enabled = false;
-    }
-  }
-
-  const { status, data, error, isFetching, refetch } = useQuery(
-    resolvedQueryKey || queryKey,
-    customFetcher,
-    {
-      enabled,
-      refetchOnWindowFocus: false,
-      refetchOnMount: false,
-      suspense: suspense || false,
-      cacheTime: 300000,
-      staleTime: 20000,
-      retry: false,
-      useErrorBoundary: false, // falls back to suspense
-    }
-  );
-
-  return {
-    data,
-    loading: isFetching,
-    loaded: ['error', 'success'].includes(status),
-    error,
-    invalidate: (): void => {
-      queryCache.invalidateQueries(resolvedQueryKey || queryKey);
-    },
-    fetch: refetch,
-    dataSet,
-    url,
-  };
-}