@digigov/ui 2.0.0-b4cd6916 → 2.0.0-d0adc9fb

package/src/api/useResourceQuery.tsx

@@ -1,178 +0,0 @@
-import { useEffect, useMemo, useState, useCallback } from 'react';
-import { usePaginatedQuery, QueryFunction, queryCache } from 'react-query';
-import { useAPI } from '@digigov/ui/api/APIProvider';
-import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
-
-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,162 +0,0 @@
-import { ArrayQueryKey } from 'react-query/types';
-import { APIError } from '@digigov/ui/api/APIErrors';
-
-export interface ProcessedResponse {
-  data?: any;
-  status: number;
-  error?: any;
-}
-
-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
-      // eslint-disable-next-line no-empty
-    } 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/Header/index.mdx

@@ -1,49 +0,0 @@
----
-id: header
-title: Header
----
-
-## How to use
-
-### Default header
-
-<Story
-  title="### Default"
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="Default.tsx"
-/>
-
-### Header with service name
-
-<Story
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="WithServiceName.tsx"
-/>
-
-### Header with service logo and service name
-
-<Story
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="WithServiceNameAndLogo.tsx"
-/>
-
-### Default header with navigation
-
-<Story
-  packageName="@digigov/ui"
-  component="app/Header"
-  story="WithNavigation.tsx"
-/>
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={[
-  "Header",
-  "HeaderContent",
-  "HeaderSection",]} 
-/> 

package/src/content/Card/index.mdx

@@ -1,103 +0,0 @@
----
-id: card
-title: Card
----
-
-# Card
-
-Cards can be used to divide and organise interface content for better understandability and readability.
-When used correctly, Cards can help users to scan through vast amounts of information quicker.
-
-## How to use
-
-<Story packageName="@digigov/ui" component="content/Card" story="Default.tsx" />
-
-### Card with border
-
-You can set the color of the Card's border. You can choose between `dark` and `grey` color respectively.
-
-#### Card with gray border color
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithGrayBorder.tsx"
-/>
-
-#### Card with dark border color
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithDarkBorder.tsx"
-/>
-
-### Card with top border
-
-You can set the color of the Card's top border. You can choose between dark and grey color respectively. By default the top border color is grey
-
-#### Card with grey top border
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithGrayTopBorder.tsx"
-/>
-
-#### Card with dark top border
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithDarkTopBorder.tsx"
-/>
-
-### Card with divider
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithDivider.tsx"
-/>
-
-### Card with actions
-
-#### Card with title link
-
-Cards can be used without an action button, but with a clickable title.
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithClickableLink.tsx"
-/>
-
-#### Card with clickable content
-
-You can expand the clickable area of the link to fill Card's content.
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithClickableContent.tsx"
-/>
-
-Cards also provides styles for actionable elements such as Buttons or Links.
-
-#### Card with button or link
-
-<Story packageName="@digigov/ui" component="content/Card" story="Default.tsx" />
-
-#### Card with a group of actions
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Card"
-  story="WithGroupButton.tsx"
-/>
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={["Card", "CardHeading", "CardContent", "CardAction"]} /> 

package/src/content/Chip/index.mdx

@@ -1,53 +0,0 @@
----
-id: chip
-title: Chip
----
-
-# Chip
-
-Chips allow users to enter information, make selections, filter content, or trigger actions.
-While buttons are expected to appear consistently and with familiar calls to action,
-chips should appear dynamically as a group of multiple interactive elements.
-
-## How to use
-
-<Story packageName="@digigov/ui" component="content/Chip" story="Default.tsx" />
-
-### Clickable Chip
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Chip"
-  story="ClickableChip.tsx"
-/>
-
-### Chip with close icon
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Chip"
-  story="DeletableChip.tsx"
-/>
-
-### Clickable Chip with close icon
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Chip"
-  story="ClickableDeletableChip.tsx"
-/>
-
-### Group of Chips
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Chip"
-  story="GroupOfChips.tsx"
-/>
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={["Chip"]} />
-

package/src/content/List/index.mdx

@@ -1,40 +0,0 @@
----
-id: list
-title: List
----
-
-## How to use
-
-### Default
-
-<Story packageName="@digigov/ui" component="content/List" story="Default.tsx" />
-
-### List with bullets
-
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="BulletList.tsx"
-/>
-
-### List with numbers
-
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="NumberedList.tsx"
-/>
-
-### List with extra space
-
-<Story
-  packageName="@digigov/ui"
-  component="content/List"
-  story="WithExtraSpace.tsx"
-/>
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={["List", "ListItem"]} />

package/src/content/Table/index.mdx

@@ -1,111 +0,0 @@
----
-id: table
-title: Table
----
-
-# Table
-
-## How to use
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="Default.tsx"
-/>
-
-### Table with dark header
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DarkVariant.tsx"
-/>
-
-### Table captions
-
-Use the `<TableCaption>` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="TableCaptions.tsx"
-/>
-
-### Numbers in a table
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="NumericDataType.tsx"
-/>
-
-### Zebra rows
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="ZebraProp.tsx"
-/>
-
-### Rows with primary or secondary color
-
-The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="RowColors.tsx"
-/>
-
-### Vertical lines
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="VerticalBorders.tsx"
-/>
-
-### Dense tables
-
-<Story packageName="@digigov/ui" component="content/Table" story="Densed.tsx" />
-
-### Custom column widths
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="DefinedWidth.tsx"
-/>
-
-### No data
-
-<Story packageName="@digigov/ui" component="content/Table" story="NoData.tsx" />
-
-### Using loader
-
-<Story
-  packageName="@digigov/ui"
-  component="content/Table"
-  story="WithLoader.tsx"
-/>
-
-## Accessibility
-
-You can read more about the accessibility patterns used in our Table
-implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
-
-## API
-
-See below for a complete reference to all of the props  available to the components mentioned here.
-
-<ComponentProps componentName={[
-  "TableContainer",
-  "Table",
-  "TableCaption",
-  "TableHead",
-  "TableRow",
-  "TableBody",
-  "TableHeadCell",
-  "TableDataCell"
-  ]
-} />