@digigov/ui 0.28.2 → 0.28.3

package/src/admin/Timeline/Timeline.stories.js

@@ -1,8 +0,0 @@
-
-import Timeline from "@digigov/ui/admin/Timeline";
-export default {
-  title: 'Digigov UI/admin/Timeline',
-  component: Timeline,
-}
-export * from './__stories__/Default';
-  

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

@@ -1,122 +0,0 @@
-import React from 'react';
-import { Button, Hint, Paragraph } from '@digigov/react-core';
-import LinkBase from '@digigov/react-core/LinkBase';
-import {
-  Timeline,
-  TimelineItem,
-  TimelineHeading,
-  TimelineContent,
-  TimelineActions,
-} from '@digigov/ui/admin';
-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

@@ -1,8 +0,0 @@
-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/api/APIErrors.tsx

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

@@ -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/index.tsx

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