@digigov/ui 0.28.0 → 0.28.2

package/src/api/useResource.tsx

@@ -0,0 +1,96 @@
+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,
+  };
+}

package/src/api/useResourceAction.tsx

@@ -0,0 +1,80 @@
+import { useState, useEffect } from 'react';
+import { RequestResponse } from '@digigov/ui/api/useResource';
+import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
+import { useMutation } from 'react-query';
+import { useAPI } from '@digigov/ui/api';
+
+export function useResourceAction(
+  resource: string,
+  id?: (string | null | undefined) | number | ((...args: any) => void),
+  method = 'POST',
+  data?: Record<string, any> | null | ((...args: any) => void),
+  query?: Record<string, any> | null | ((...args: any) => void),
+  options?: RequestInit | null
+): RequestResponse {
+  const {
+    config: { baseURL },
+    token,
+  } = useAPI();
+  const [{ url, dataSet }, setFetchOpts] = useState({
+    url: '',
+    dataSet: false,
+  });
+  const [consume, setConsume] = useState(false);
+  async function customFetcher(...args) {
+    const [fetchUrl, options] = args[0];
+    if (options.body) {
+      setFetchOpts({ url: fetchUrl, dataSet: true });
+    } else {
+      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 [mutate, { status, data: _data, error, reset }] = useMutation(
+    customFetcher,
+    {}
+  );
+  useEffect(() => {
+    if (consume) {
+      const queryKey = getQueryKey(
+        resource,
+        id,
+        query,
+        data,
+        options,
+        method,
+        baseURL,
+        token
+      );
+      if (typeof queryKey === 'function') {
+        mutate(queryKey());
+      } else {
+        mutate(queryKey);
+      }
+      setConsume(false);
+    }
+  }, [consume]);
+  return {
+    data: _data,
+    loading: status === 'loading',
+    loaded: ['success', 'error'].includes(status),
+    error,
+    invalidate: (): void => {
+      reset();
+    },
+    fetch() {
+      setConsume(true);
+    },
+    dataSet,
+    url,
+  };
+}

package/src/api/useResourceQuery.tsx

@@ -0,0 +1,177 @@
+import { useEffect, useMemo, useState, useCallback } from 'react';
+import { getQueryKey, processResponse } from '@digigov/ui/api/utils';
+import { usePaginatedQuery, QueryFunction, queryCache } from 'react-query';
+import { useAPI } from '@digigov/ui/api';
+
+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

@@ -0,0 +1,156 @@
+import { APIError } from '@digigov/ui/api/APIErrors';
+import { ProcessedResponse } from '@digigov/ui/api/fetchAPI';
+import { ArrayQueryKey } from 'react-query/types';
+
+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
+    } 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/App.tsx

@@ -0,0 +1,15 @@
+import React, { Suspense } from 'react';
+
+export interface AppProps {
+  children?: React.ReactNode;
+}
+
+const App: React.FC<AppProps> = ({ children }) => {
+  return <Suspense fallback={'loading...'}>{children}</Suspense>;
+};
+
+export const StaticApp: React.FC<AppProps> = ({ children }) => {
+  return <>{children}</>;
+};
+
+export default App;

package/src/app/Confirmation/Confirmation.stories.js

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

package/src/app/Confirmation/__stories__/Default.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Confirmation, {
+  ConfirmationTitle,
+  ConfirmationBody,
+} from '@digigov/ui/app/Confirmation';
+
+export const Default = () => (
+  <Confirmation>
+    <ConfirmationTitle>Η φόρμα υποβλήθηκε επιτυχώς</ConfirmationTitle>
+    <ConfirmationBody>
+      Ο κωδικός εγγράφου <br />
+      <strong>HDJ2123F</strong>
+    </ConfirmationBody>
+  </Confirmation>
+);
+
+export default Default;

package/src/app/Confirmation/index.tsx

@@ -0,0 +1,6 @@
+import Confirmation from '@digigov/react-core/Confirmation';
+import ConfirmationBody from '@digigov/react-core/ConfirmationBody';
+import ConfirmationTitle from '@digigov/react-core/ConfirmationTitle';
+
+export default Confirmation;
+export { ConfirmationBody, ConfirmationTitle };

package/src/app/Footer/Footer.stories.js

@@ -0,0 +1,14 @@
+/* eslint-disable digigov/no-relative-imports */
+
+import Footer from '@digigov/ui/app';
+export default {
+  title: 'Digigov UI/app/Footer',
+  component: Footer,
+};
+export * from './__stories__/Default';
+export * from './__stories__/FooterWithLogo';
+export * from './__stories__/FooterWithLink';
+export * from './__stories__/DefaultCopyright';
+export * from './__stories__/FooterWithSecondaryNavigation';
+export * from './__stories__/FooterAllInclusive';
+export * from './__stories__/YearCopyright';

package/src/app/Footer/__stories__/Default.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import Footer from '@digigov/ui/govgr/Footer';
+
+export const Default = () => <Footer />;
+
+export default Default;

package/src/app/Footer/__stories__/DefaultCopyright.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Copyright from '@digigov/ui/govgr/Footer/Copyright';
+import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
+import Footer from '@digigov/ui/govgr/Footer';
+import {
+  FooterMeta,
+  FooterMetaItem,
+  FooterContent,
+  FooterInlineList,
+  FooterInlineListItem,
+  FooterLink,
+  VisuallyHidden,
+} from '@digigov/react-core';
+
+export const DefaultCopyright = () => {
+  return (
+    <Footer>
+      <FooterMeta>
+        <FooterMetaItem grow>
+          <FooterContent>
+            <VisuallyHidden>Περισσότερες επιλογές</VisuallyHidden>
+            <FooterInlineList>
+              <FooterInlineListItem>
+                <FooterLink href="#"> Ακόμα μια επιλογή</FooterLink>
+              </FooterInlineListItem>
+              <FooterInlineListItem>
+                <FooterLink> Ακόμα μια</FooterLink>
+              </FooterInlineListItem>
+            </FooterInlineList>
+            <Copyright />
+          </FooterContent>
+        </FooterMetaItem>
+        <FooterMetaItem>
+          <HellenicRepublicLogo></HellenicRepublicLogo>
+        </FooterMetaItem>
+      </FooterMeta>
+    </Footer>
+  );
+};
+
+export default DefaultCopyright;