@digigov/ui 0.28.3 → 0.29.0

package/src/admin/Timeline/__stories__/Default.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { Button } from '@digigov/ui/core/Button';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { LinkBase } from '@digigov/ui/core/Link';
+
+import {
+  Timeline,
+  TimelineItem,
+  TimelineHeading,
+  TimelineContent,
+  TimelineActions,
+} from '@digigov/ui/admin/Timeline';
+
+import {
+  Details,
+  DetailsSummary,
+  DetailsContent,
+} from '@digigov/ui/core/Details';
+
+const data = [
+  {
+    title: 'Application requires confirmation',
+    date: '14 June 2019 at 2:01pm',
+    text:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non felis risus. Curabitur nec ante vitae felis ullamcorper tincidunt.',
+    links: [
+      {
+        text: 'See application',
+        href: '#',
+      },
+    ],
+  },
+  {
+    title: 'Application review in progress ',
+    date: '7 June 2019 at 12:32pm',
+    text: 'Your application is being reviewed by one of our case workers.',
+    buttons: [
+      {
+        text: 'Continue',
+      },
+      {
+        text: 'Cancel',
+        color: 'warning',
+      },
+    ],
+  },
+  {
+    title: 'Application received ',
+    date: '6 June 2019 at 9:12am ',
+    text: 'Your application has been received – reference MOJ-1234-5678',
+  },
+  {
+    title: 'Application details ',
+    date: '6 June 2019 at 9:12am ',
+    detailsSummary: 'More info regarding your application',
+    detailsContent:
+      'Your application has been received – reference MOJ-1234-5678',
+  },
+  {
+    title: 'Application submitted',
+    date: '28 May 2019 at 10:45am',
+    text: 'Your application is being reviewed by one of our case workers.',
+    buttons: [
+      {
+        text: 'Continue',
+      },
+    ],
+    links: [
+      {
+        text: 'Details',
+        href: '#',
+      },
+      {
+        text: 'Something else',
+        href: '#',
+      },
+    ],
+  },
+];
+
+export const Default = () => (
+  <div>
+    <Timeline>
+      {data &&
+        data.map((field, index) => {
+          return (
+            <TimelineItem key={index}>
+              <TimelineHeading>{field.title}</TimelineHeading>
+              <TimelineContent>
+                <Hint>{field.date}</Hint>
+                {field.text && <Paragraph>{field.text}</Paragraph>}
+                {field.detailsSummary && (
+                  <Details>
+                    <DetailsSummary>{field.detailsSummary}</DetailsSummary>
+                    <DetailsContent>{field.detailsContent}</DetailsContent>
+                  </Details>
+                )}
+              </TimelineContent>
+              {(field.links || field.buttons) && (
+                <TimelineActions>
+                  {field.buttons &&
+                    field.buttons.map((button, index) => {
+                      return (
+                        <Button key={index} color={button.color || 'secondary'}>
+                          {button.text}
+                        </Button>
+                      );
+                    })}
+                  {field.links &&
+                    field.links.map((link, index) => {
+                      return (
+                        <LinkBase key={index} href={link.href}>
+                          {link.text}
+                        </LinkBase>
+                      );
+                    })}
+                </TimelineActions>
+              )}
+            </TimelineItem>
+          );
+        })}
+    </Timeline>
+  </div>
+);
+
+export default Default;

package/src/admin/Timeline/index.tsx

@@ -0,0 +1,8 @@
+export * from '@digigov/react-extensions/admin/Timeline';
+export * from '@digigov/react-extensions/admin/TimelineContent';
+export * from '@digigov/react-extensions/admin/TimelineHeading';
+export * from '@digigov/react-extensions/admin/TimelineItem';
+export * from '@digigov/react-extensions/admin/TimelineActions';
+
+import Timeline from '@digigov/react-extensions/admin/Timeline';
+export default Timeline;

package/src/admin/index.ts

@@ -0,0 +1,21 @@
+export * from '@digigov/ui/admin/Dropdown';
+export * from '@digigov/ui/admin/DropdownArrowDown';
+export * from '@digigov/ui/admin/Chip';
+export * from '@digigov/ui/admin/CopyToClipboard';
+export * from '@digigov/ui/admin/FillableText';
+export * from '@digigov/ui/admin/Drawer';
+export * from '@digigov/ui/admin/Modal';
+export * from '@digigov/ui/admin/Pagination';
+export * from '@digigov/ui/admin/LoaderContainer';
+export * from '@digigov/ui/admin/CircularProgress';
+export * from '@digigov/ui/admin/FullPageBackground';
+export * from '@digigov/ui/admin/TableLoaderBackground';
+export * from '@digigov/ui/admin/LabeledText';
+export * from '@digigov/ui/admin/AdminLayout';
+export * from '@digigov/ui/admin/ResultsHeading';
+export * from '@digigov/ui/admin/SearchSection';
+export * from '@digigov/ui/admin/FilterSection';
+export * from '@digigov/ui/admin/AutoComplete';
+export * from '@digigov/ui/admin/Timeline';
+export * from '@digigov/ui/admin/TaskList';
+export * from '@digigov/ui/admin/StepNav';

package/src/api/APIErrors.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+export class APIErrors extends React.Component<{
+  fallback: any;
+}> {
+  state = { hasError: false, error: null };
+  static getDerivedStateFromError(error: Error): Record<string, any> {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  render(): any {
+    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);
+  });
+});

package/src/api/index.tsx

@@ -0,0 +1,16 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useContext } from 'react';
+import { APIContextData, APIContext } from '@digigov/ui/api/APIProvider';
+
+export * from '@digigov/ui/api/APIErrors';
+export * from '@digigov/ui/api/APIProvider';
+export * from '@digigov/ui/api/useResource';
+export * from '@digigov/ui/api/useResourceAction';
+export * from '@digigov/ui/api/useResourceQuery';
+export * from '@digigov/ui/api/fetchAPI';
+
+export const useAPI = (): APIContextData => {
+  return useContext(APIContext);
+};
+
+export default useAPI;