@commercelayer/app-elements 0.0.10 → 0.0.12

package/dist/main.d.ts

@@ -10,7 +10,6 @@ export { Button } from './ui/atoms/Button';
 export { Card } from './ui/atoms/Card';
 export { Container } from './ui/atoms/Container';
 export { CopyToClipboard } from './ui/atoms/CopyToClipboard';
-export { DelayShow } from './ui/atoms/DelayShow';
 export { DropdownMenu, DropdownMenuDivider, DropdownMenuItem } from './ui/atoms/dropdown';
 export { EmptyState } from './ui/atoms/EmptyState';
 export { FormFooter } from './ui/atoms/FormFooter';
@@ -54,5 +53,7 @@ export { ListItem } from './ui/lists/ListItem';
 export { Table } from './ui/tables/Table';
 export { TableData } from './ui/tables/TableData';
 export { OrderSummary } from './ui/resources/OrderSummary';
+export { ResourceList } from './ui/resources/ResourceList';
 export { downloadJsonAsFile } from './helpers/downloadJsonAsFile';
 export { formatDate } from './helpers/date';
+export { useDelayShow } from './hooks/useDelayShow';

package/dist/main.js

@@ -1,4 +1,4 @@
-import { A as o, B as n, D as r, F as i, G as l, H as d, J as u, a9 as p, K as S, C as g, L as T, M as I, N as m, O as D, P as k, E as P, Q as c, R as y, S as B, ae as C, af as L, ag as b, ah as v, ai as w, aj as x, ak as F, al as R, ao as A, ap as M, aq as f, ar as h, U as E, at as H, au as J, av as V, aw as z, az as O, aa as j, V as q, ab as G, ac as K, W as N, Y as Q, as as U, ad as W, Z as Y, _ as Z, a0 as _, a1 as $, a2 as X, a4 as aa, ax as sa, ay as ea, a3 as ta, a5 as oa, a8 as na, a7 as ra, T as ia, a6 as la, aA as da, an as ua, aB as pa, am as Sa, y as ga, z as Ta, $ as Ia } from "./main-415f7420.js";
+import { A as o, B as n, D as r, F as i, G as l, H as u, J as d, a8 as p, K as S, C as g, L as T, M as I, N as m, O as D, E as k, P, Q as c, R as C, ad as L, ae as y, af as B, ag as b, ah as v, ai as w, aj as x, ak as R, an as F, ao as A, ap as M, aq as f, S as h, as as E, at as H, au as J, av as V, ay as z, a9 as O, U as j, aa as q, ab as G, V as K, W as N, ar as Q, ac as U, az as W, Y, Z, $ as _, a0 as $, a1 as X, a3 as aa, aw as sa, ax as ea, a2 as ta, a4 as oa, a7 as na, a6 as ra, T as ia, a5 as la, aA as ua, am as da, aB as pa, al as Sa, y as ga, aC as Ta, z as Ia, _ as ma } from "./main-e490d6fa.js";
 import "react";
 import "@commercelayer/sdk";
 export {
@@ -7,46 +7,46 @@ export {
   r as Badge,
   i as BlockCode,
   l as Button,
-  d as Card,
-  u as Container,
+  u as Card,
+  d as Container,
   p as ContextMenu,
   S as CopyToClipboard,
   g as CoreSdkProvider,
-  T as DelayShow,
-  I as DropdownMenu,
-  m as DropdownMenuDivider,
-  D as DropdownMenuItem,
-  k as EmptyState,
-  P as ErrorBoundary,
-  c as FormFooter,
-  y as Hint,
-  B as Icon,
-  C as Input,
-  L as InputDate,
-  b as InputDateRange,
-  v as InputFeedback,
-  w as InputFile,
-  x as InputJson,
-  F as InputReadonly,
+  T as DropdownMenu,
+  I as DropdownMenuDivider,
+  m as DropdownMenuItem,
+  D as EmptyState,
+  k as ErrorBoundary,
+  P as FormFooter,
+  c as Hint,
+  C as Icon,
+  L as Input,
+  y as InputDate,
+  B as InputDateRange,
+  b as InputFeedback,
+  v as InputFile,
+  w as InputJson,
+  x as InputReadonly,
   R as InputSelect,
-  A as InputTextArea,
-  M as InputToggleBox,
-  f as InputToggleListBox,
-  h as Label,
-  E as Legend,
-  H as List,
-  J as ListDetails,
-  V as ListDetailsItem,
-  z as ListItem,
-  O as OrderSummary,
-  j as PageError,
-  q as PageHeading,
-  G as PageLayout,
-  K as PageSkeleton,
-  N as Pagination,
-  Q as RadialProgress,
-  U as RadioButtons,
-  W as Report,
+  F as InputTextArea,
+  A as InputToggleBox,
+  M as InputToggleListBox,
+  f as Label,
+  h as Legend,
+  E as List,
+  H as ListDetails,
+  J as ListDetailsItem,
+  V as ListItem,
+  z as OrderSummary,
+  O as PageError,
+  j as PageHeading,
+  q as PageLayout,
+  G as PageSkeleton,
+  K as Pagination,
+  N as RadialProgress,
+  Q as RadioButtons,
+  U as Report,
+  W as ResourceList,
   Y as Skeleton,
   Z as SkeletonTemplate,
   _ as Spacer,
@@ -61,11 +61,12 @@ export {
   ra as Th,
   ia as TokenProvider,
   la as Tr,
-  da as downloadJsonAsFile,
-  ua as flatSelectValues,
+  ua as downloadJsonAsFile,
+  da as flatSelectValues,
   pa as formatDate,
   Sa as isSingleValueSelected,
   ga as useCoreSdkProvider,
-  Ta as useTokenProvider,
-  Ia as withinSkeleton
+  Ta as useDelayShow,
+  Ia as useTokenProvider,
+  ma as withinSkeleton
 };

package/dist/{overrides-33e36a2f.js → overrides-5b44a038.js}

@@ -1,7 +1,7 @@
 import * as V from "react";
 import be, { useLayoutEffect as hn, forwardRef as fr, useContext as Ze, createContext as Ct, createElement as fe, Fragment as Ve, useRef as ue, useState as pe, useMemo as he, useCallback as Y, Component as pr, useEffect as Cn } from "react";
 import { createPortal as mr } from "react-dom";
-import { X as Ir } from "./main-415f7420.js";
+import { X as Ir } from "./main-e490d6fa.js";
 var Je = {}, vr = {
   get exports() {
     return Je;

package/dist/ui/atoms/EmptyState.d.ts

@@ -1,13 +1,13 @@
 import { ReactNode } from 'react';
 import { IconProps } from './Icon';
-interface Props {
+export interface EmptyStateProps {
     title: string;
     description?: ReactNode;
     action?: ReactNode;
     className?: string;
     icon?: IconProps['name'];
 }
-declare function EmptyState({ title, description, action, icon, className, ...rest }: Props): JSX.Element;
+declare function EmptyState({ title, description, action, icon, className, ...rest }: EmptyStateProps): JSX.Element;
 declare namespace EmptyState {
     var displayName: string;
 }

package/dist/ui/atoms/Legend.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-interface LegendProps {
+export interface LegendProps {
     /**
      * Main section title
      */

package/dist/ui/atoms/SkeletonTemplate.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode, ReactPortal } from 'react';
+import { FC, FunctionComponent, ReactNode, ReactPortal } from 'react';
 import { Simplify } from 'type-fest';
 declare type ReactNodeNoPortal = Exclude<ReactNode, ReactPortal>;
 interface SkeletonTemplateProps {
@@ -10,10 +10,14 @@ interface SkeletonTemplateProps {
     isLoading?: boolean;
     children: ReactNodeNoPortal;
 }
+export interface SkeletonTemplateComponent<P = {}> extends FunctionComponent<P> {
+    skeletonTemplate: true;
+}
 export declare function withinSkeleton<P>(Element: FC<Simplify<P & {
     isLoading?: boolean;
-}>>): FC<Simplify<P & {
+}>>): SkeletonTemplateComponent<Simplify<P & {
     isLoading?: boolean;
 }>>;
+export declare function isSkeletonTemplate(child: ReactNode): boolean;
 declare const SkeletonTemplate: FC<SkeletonTemplateProps>;
 export { SkeletonTemplate };

package/dist/ui/resources/OrderSummary.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
 import type { Order } from '@commercelayer/sdk';
-declare const OrderSummary: React.FC<{
+declare const OrderSummary: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     order: Order;
     isLoading?: boolean | undefined;
 }>;

package/dist/ui/resources/ResourceList/VisibilityTrigger.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface VisibilityTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    rootMargin?: string;
+    callback: (entry: IntersectionObserverEntry) => void;
+    enabled: boolean;
+}
+export declare function VisibilityTrigger({ rootMargin, enabled, callback, ...rest }: VisibilityTriggerProps): JSX.Element;
+export {};

package/dist/ui/resources/ResourceList/index.d.ts

@@ -0,0 +1,20 @@
+import { EmptyStateProps } from '../../atoms/EmptyState';
+import { LegendProps } from '../../atoms/Legend';
+import { CommerceLayerClient, QueryParamsList } from '@commercelayer/sdk';
+import { FC } from 'react';
+import { ListableResource, Resource } from './infiniteFetcher';
+export interface ResourceListProps<TResource extends ListableResource> extends Pick<LegendProps, 'title' | 'actionButton'> {
+    type: TResource;
+    query?: Omit<QueryParamsList, 'pageNumber'>;
+    Item: FC<{
+        resource?: Resource<TResource>;
+        isLoading?: boolean;
+    }>;
+    emptyState: EmptyStateProps;
+    sdkClient?: CommerceLayerClient;
+}
+declare function ResourceList<TResource extends ListableResource>({ type, query, title, Item, actionButton, sdkClient, emptyState }: ResourceListProps<TResource>): JSX.Element;
+declare namespace ResourceList {
+    var displayName: string;
+}
+export { ResourceList };

package/dist/ui/resources/ResourceList/infiniteFetcher.d.ts

@@ -0,0 +1,20 @@
+import type { CommerceLayerClient, QueryParamsList } from '@commercelayer/sdk';
+export declare type ListableResource = Exclude<keyof CommerceLayerClient, 'addRawResponseReader' | 'addRawResponseReader' | 'addRequestInterceptor' | 'addResponseInterceptor' | 'application' | 'config' | 'currentOrganization' | 'isApiError' | 'openApiSchemaVersion' | 'organization' | 'removeInterceptor' | 'removeRawResponseReader' | 'resources'>;
+declare type ListResource<TResource extends ListableResource> = Awaited<ReturnType<CommerceLayerClient[TResource]['list']>>;
+export declare type Resource<TResource extends ListableResource> = ListResource<TResource>[number];
+export interface FetcherResponse<TResource> {
+    list: TResource[];
+    meta: {
+        pageCount: number;
+        recordCount: number;
+        currentPage: number;
+        recordsPerPage: number;
+    };
+}
+export declare function infiniteFetcher<TResource extends ListableResource>({ sdkClient, query, currentData, resourceType }: {
+    sdkClient: CommerceLayerClient;
+    query?: Omit<QueryParamsList, 'pageNumber'>;
+    currentData?: FetcherResponse<Resource<TResource>>;
+    resourceType: TResource;
+}): Promise<FetcherResponse<Resource<TResource>>>;
+export {};

package/dist/ui/resources/ResourceList/reducer.d.ts

@@ -0,0 +1,20 @@
+import { FetcherResponse, Resource, ListableResource } from './infiniteFetcher';
+interface ResourceListInternalState<TResource extends ListableResource> {
+    isLoading: boolean;
+    error?: {
+        message: string;
+    };
+    data?: FetcherResponse<Resource<TResource>> | undefined;
+}
+export declare const initialState: ResourceListInternalState<any>;
+declare type Action<TResource extends ListableResource> = {
+    type: 'prepare';
+} | {
+    type: 'loaded';
+    payload: FetcherResponse<Resource<TResource>>;
+} | {
+    type: 'error';
+    payload: string;
+};
+export declare const reducer: <TResource extends ListableResource>(state: ResourceListInternalState<TResource>, action: Action<TResource>) => ResourceListInternalState<TResource>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "type": "module",
   "files": [
     "dist"
@@ -20,7 +20,7 @@
     "pnpm": ">=7"
   },
   "dependencies": {
-    "@commercelayer/sdk": "^4.20.0",
+    "@commercelayer/sdk": "4.25.0",
     "@types/lodash": "^4.14.191",
     "@types/react": "^18.0.26",
     "@types/react-datepicker": "^4.8.0",