@digigov/ui 0.11.0 → 0.12.2

package/docs/index.mdx

@@ -0,0 +1,66 @@
+---
+title: DigiGOV UI Toolkit
+order: 0
+---
+
+# DigiGOV UI Toolkit
+
+**@digigov UI toolkit** is a set of libraries and tools written in javascript
+which mainly focuses on providing developers with an easy and streamlined way
+to design and develop frontend applications that target the gov.gr ecosystem.
+
+The project consists of the following packages,
+
+### @digigov/ui
+
+A set of components written in [React](https://reactjs.com) and powered by
+[Material Design](https://material.io) using the exceptional [React Material
+UI toolkit](https://material-ui.com) which implement the [DigiGOV Design
+System](/docs/site/design) guidelines.
+
+<hr />
+
+### @digigov/nextjs
+
+A small set of utilities to facilitate developing @digigov/ui powered apps
+using [Next.js](https://nextjs.com) framework.
+
+<hr />
+
+### @digigov/dev
+
+Software package utilities and pre-bundled configurations and scripts for
+day-to-day developer's needs (test, lint, serve).
+
+<hr />
+
+## Getting started
+
+The simplest way to set up a project using the toolkit, assuming that [node](https://nodejs.org)
+and [yarn](http://yarnpkg.com/) and [npx](https://github.com/npm/npx#install) are already installed and configured on your system, is by using
+the `create-digigov-app` generator,
+
+```bash
+$ npx create-digigov-app my-service
+```
+
+Fill the questions asked and once the dependencies of the project are
+installed (it may take a while) use the following command to start up the
+development server of your new app,
+
+```bash
+$ cd my-server
+$ yarn dev
+```
+
+Your app is now accessible at [http://localhost:3000](http://localhost:3000)
+
+### Next steps
+
+- Get familiar with next.js and learn how to set up new pages for your service
+  - [Next.js Tutorial](https://nextjs.org/learn/basics/getting-started)
+  - [Next.js Docs](https://nextjs.org/docs/getting-started)
+- Learn how to design your service by following the DigiGOV guidelines
+  - [DigiGOV Design System](/docs/site/design)
+- Become familiar with the available components
+  - [@digigov/ui components](/ui/components)

package/docs/introduction.mdx

@@ -0,0 +1,34 @@
+---
+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/package.json

@@ -1,11 +1,17 @@
 {
   "name": "@digigov/ui",
-  "version": "0.11.0",
+  "version": "0.12.2",
   "description": "@digigov reusable components toolkit",
-  "module": "./esm/index.js",
+  "module": "index.js",
   "publishConfig": {
     "directory": "dist"
   },
+  "scripts": {
+    "lint": "digigov lint",
+    "test": "digigov test",
+    "build": "digigov build --subpackages",
+    "prepublish": "digigov build --subpackages"
+  },
   "dependencies": {
     "google-libphonenumber": "3.2.8",
     "react-qr-reader": "2.2.1",
@@ -18,10 +24,27 @@
     "clsx": "1.1.1",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "@digigov/react-core": "0.5.5"
+    "@digigov/react-core": "0.6.1"
+  },
+  "devDependencies": {
+    "@digigov/cli": "0.5.27",
+    "@digigov/cli-lint": "0.5.28",
+    "@digigov/cli-build": "0.7.1",
+    "@digigov/cli-test": "0.6.0",
+    "@testing-library/react": "11.2.1",
+    "@testing-library/react-hooks": "3.4.2",
+    "@types/react-qr-reader": "2.1.2",
+    "typescript": "4.2.3",
+    "@types/node": "14.14.9",
+    "@types/react": "16.9.56",
+    "@types/react-dom": "16.9.9",
+    "@types/enzyme": "3.10.8",
+    "@types/enzyme-adapter-react-16": "1.0.5",
+    "@types/jest": "26.0.15",
+    "enzyme": "3.11.0",
+    "fetch-mock": "9.3.1",
+    "eslint": "7.24.0",
+    "prettier": "2.2.1"
   },
-  "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
-  "private": false,
-  "main": "./index.js",
-  "typings": "./index.d.ts"
-}
+  "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871"
+}

package/src/api/APIErrors.tsx

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

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

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

@@ -0,0 +1,419 @@
+/* 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);
+  });
+});