@commercelayer/app-elements 0.2.0 → 0.3.0

package/dist/main.d.ts

@@ -8,6 +8,7 @@ export { getAvatarSrcFromRate, getParcelTrackingDetail, getParcelTrackingDetails
 export { useClickAway } from './hooks/useClickAway';
 export { useDelayShow } from './hooks/useDelayShow';
 export { useIsChanged } from './hooks/useIsChanged';
+export { useOnBlurFromContainer } from './hooks/useOnBlurFromContainer';
 export { useOverlay } from './hooks/useOverlay';
 export { CoreSdkProvider, useCoreApi, useCoreSdkProvider } from './providers/CoreSdkProvider';
 export { ErrorBoundary } from './providers/ErrorBoundary';
@@ -16,7 +17,6 @@ export { A } from './ui/atoms/A';
 export { Avatar } from './ui/atoms/Avatar';
 export { AvatarLetter } from './ui/atoms/AvatarLetter';
 export { Badge, badgeVariants } from './ui/atoms/Badge';
-export { BlockCode } from './ui/atoms/BlockCode';
 export { Button } from './ui/atoms/Button';
 export { ButtonFilter } from './ui/atoms/ButtonFilter';
 export { Card } from './ui/atoms/Card';
@@ -26,7 +26,7 @@ export { EmptyState } from './ui/atoms/EmptyState';
 export { Grid } from './ui/atoms/Grid';
 export { Hint } from './ui/atoms/Hint';
 export { Hr } from './ui/atoms/Hr';
-export { Icon, iconNames } from './ui/atoms/Icon';
+export { Icon, type IconProps } from './ui/atoms/Icon';
 export { PageHeading } from './ui/atoms/PageHeading';
 export { Pagination } from './ui/atoms/Pagination';
 export { Progress } from './ui/atoms/Progress';
@@ -42,10 +42,9 @@ export { Table, Td, Th, Tr } from './ui/atoms/Table';
 export { Tab, Tabs } from './ui/atoms/Tabs';
 export { Tag } from './ui/atoms/Tag';
 export { Text } from './ui/atoms/Text';
-export { DropdownMenu, DropdownMenuDivider, DropdownMenuItem } from './ui/atoms/dropdown';
 export { ActionButtons } from './ui/composite/ActionButtons';
 export { CardDialog } from './ui/composite/CardDialog';
-export { ContextMenu } from './ui/composite/ContextMenu';
+export { Dropdown, DropdownDivider, DropdownItem } from './ui/composite/Dropdown';
 export { List } from './ui/composite/List';
 export { ListDetails } from './ui/composite/ListDetails';
 export { ListDetailsItem } from './ui/composite/ListDetailsItem';
@@ -68,7 +67,6 @@ export { HookedInputDateRange, InputDateRange } from './ui/forms/InputDateRange'
 export { InputFeedback } from './ui/forms/InputFeedback';
 export { InputFile } from './ui/forms/InputFile';
 export { InputJson } from './ui/forms/InputJson';
-export { HookedInputMetadata } from './ui/forms/InputMetadata';
 export { InputRadioGroup } from './ui/forms/InputRadioGroup';
 export { InputReadonly } from './ui/forms/InputReadonly';
 export { HookedInputResourceGroup, InputResourceGroup } from './ui/forms/InputResourceGroup';
@@ -81,10 +79,11 @@ export { HookedInputToggleButton, InputToggleButton, type InputToggleButtonProps
 export { Label } from './ui/forms/Label';
 export { Legend } from './ui/forms/Legend';
 export { HookedValidationApiError, HookedValidationError, setApiFormErrors, useValidationFeedback } from './ui/forms/ReactHookForm';
+export { ResourceAddress } from './ui/resources/ResourceAddress';
 export { ResourceLineItems } from './ui/resources/ResourceLineItems';
 export { ResourceList } from './ui/resources/ResourceList';
 export { ResourceListItem } from './ui/resources/ResourceListItem';
-export { ResourceListItemsMetadata } from './ui/resources/ResourceListItemsMetadata';
+export { ResourceMetadata } from './ui/resources/ResourceMetadata';
 export { ResourceOrderSummary } from './ui/resources/ResourceOrderSummary';
 export { ResourceOrderTimeline } from './ui/resources/ResourceOrderTimeline';
 export { ResourceShipmentParcels } from './ui/resources/ResourceShipmentParcels';

package/dist/main.js

@@ -1,4 +1,4 @@
-import { an as u, b0 as i, ao as b, ap as p, aq as c, as as l, at as d, au as g, av as m, b1 as S, aw as I, b2 as k, ax as T, ag as D, aZ as R, a_ as C, a$ as y, ay as H, aj as h, az as A, aA as P, be as B, bf as F, bh as L, bk as N, bo as V, bq as f, bv as v, by as O, bA as w, bH as M, bJ as x, bL as E, bO as G, bS as J, bT as U, aB as W, aC as X, bg as Y, bi as Z, bj as $, bl as j, bn as q, bp as z, br as K, bs as Q, bt as _, bu as aa, bw as ea, bx as sa, bz as ta, bB as ra, bI as oa, bK as na, bM as ua, bN as ia, bP as ba, bQ as pa, bR as ca, b3 as la, b4 as da, b5 as ga, b6 as ma, ak as Sa, b7 as Ia, aE as ka, b8 as Ta, b9 as Da, aF as Ra, aG as Ca, aH as ya, ba as Ha, bW as ha, bX as Aa, bY as Pa, bZ as Ba, b_ as Fa, b$ as La, c0 as Na, c1 as Va, bb as fa, aI as va, aJ as Oa, aK as wa, aL as Ma, aN as xa, aO as Ea, aP as Ga, aQ as Ja, aV as Ua, aR as Wa, bc as Xa, aW as Ya, aX as Za, aS as $a, aY as ja, aT as qa, bd as za, al as Ka, aU as Qa, ar as _a, a2 as ae, a1 as ee, bC as se, bm as te, X as re, a3 as oe, a4 as ne, a5 as ue, c3 as ie, c4 as be, bD as pe, Y as ce, Z as le, c5 as de, c6 as ge, c7 as me, c8 as Se, c9 as Ie, ca as ke, a6 as Te, a7 as De, cb as Re, cc as Ce, cd as ye, a8 as He, a9 as he, T as Ae, aa as Pe, ab as Be, aD as Fe, V as Le, bE as Ne, bF as Ve, bG as fe, U as ve, W as Oe, bU as we, $ as Me, a0 as xe, ac as Ee, ah as Ge, ai as Je, ad as Ue, ae as We, af as Xe, c2 as Ye, am as Ze, bV as $e, aM as je } from "./main-d208b3aa.js";
+import { ao as u, aY as i, ap as b, aq as p, ar as l, at as c, au as d, av as g, aZ as m, aw as S, ax as I, ah as k, a_ as T, a$ as D, b0 as R, ay as y, ak as C, az as A, aA as h, bc as H, bd as P, bf as F, bi as B, bm as L, bo as O, bv as V, bx as f, bE as v, bG as N, bI as w, bL as E, bP as G, bQ as x, aB as M, aC as J, be as U, bg as W, bh as X, bj as Y, bl as Z, bn as $, bp as j, bq as q, br as z, bs as K, bt as Q, bu as _, bw as aa, by as ea, bF as sa, bH as ta, bJ as ra, bK as oa, bM as na, bN as ua, bO as ia, b1 as ba, b2 as pa, b3 as la, b4 as ca, al as da, b5 as ga, aD as ma, b6 as Sa, b7 as Ia, aE as ka, aF as Ta, aG as Da, b8 as Ra, bT as ya, bU as Ca, bV as Aa, bW as ha, bX as Ha, bY as Pa, bZ as Fa, b_ as Ba, b$ as La, b9 as Oa, aH as Va, aI as fa, aJ as va, aK as Na, aM as wa, aN as Ea, aO as Ga, aP as xa, aU as Ma, aQ as Ja, ba as Ua, aV as Wa, aW as Xa, aR as Ya, aX as Za, aS as $a, bb as ja, am as qa, aT as za, as as Ka, a2 as Qa, a1 as _a, bz as ae, bk as ee, X as se, a3 as te, a4 as re, a5 as oe, c1 as ne, c2 as ue, bA as ie, Y as be, Z as pe, c3 as le, c4 as ce, c5 as de, c6 as ge, c7 as me, c8 as Se, a6 as Ie, a7 as ke, c9 as Te, ca as De, cb as Re, a8 as ye, a9 as Ce, T as Ae, aa as he, ab as He, V as Pe, bB as Fe, bC as Be, bD as Le, U as Oe, W as Ve, bR as fe, $ as ve, a0 as Ne, ac as we, ai as Ee, aj as Ge, ad as xe, ae as Me, af as Je, ag as Ue, c0 as We, an as Xe, bS as Ye, aL as Ze } from "./main-49356a73.js";
 import "react";
 import "react-dom";
 import "@commercelayer/sdk";
@@ -9,150 +9,148 @@ export {
   i as ActionButtons,
   b as Avatar,
   p as AvatarLetter,
-  c as Badge,
-  l as BlockCode,
-  d as Button,
-  g as ButtonFilter,
-  m as Card,
-  S as CardDialog,
-  I as Container,
-  k as ContextMenu,
-  T as CopyToClipboard,
-  D as CoreSdkProvider,
-  R as DropdownMenu,
-  C as DropdownMenuDivider,
-  y as DropdownMenuItem,
-  H as EmptyState,
-  h as ErrorBoundary,
+  l as Badge,
+  c as Button,
+  d as ButtonFilter,
+  g as Card,
+  m as CardDialog,
+  S as Container,
+  I as CopyToClipboard,
+  k as CoreSdkProvider,
+  T as Dropdown,
+  D as DropdownDivider,
+  R as DropdownItem,
+  y as EmptyState,
+  C as ErrorBoundary,
   A as Grid,
-  P as Hint,
-  B as HookedForm,
-  F as HookedInput,
-  L as HookedInputCheckbox,
-  N as HookedInputCurrency,
-  V as HookedInputDate,
-  f as HookedInputDateRange,
-  v as HookedInputMetadata,
-  O as HookedInputResourceGroup,
-  w as HookedInputSelect,
-  M as HookedInputSimpleSelect,
-  x as HookedInputSpinner,
-  E as HookedInputSwitch,
-  G as HookedInputToggleButton,
-  J as HookedValidationApiError,
-  U as HookedValidationError,
-  W as Hr,
-  X as Icon,
-  Y as Input,
-  Z as InputCheckbox,
-  $ as InputCheckboxGroup,
-  j as InputCurrency,
-  q as InputCurrencyRange,
-  z as InputDate,
-  K as InputDateRange,
-  Q as InputFeedback,
-  _ as InputFile,
-  aa as InputJson,
-  ea as InputRadioGroup,
-  sa as InputReadonly,
-  ta as InputResourceGroup,
-  ra as InputSelect,
-  oa as InputSimpleSelect,
-  na as InputSpinner,
-  ua as InputSwitch,
-  ia as InputTextArea,
-  ba as InputToggleButton,
-  pa as Label,
-  ca as Legend,
-  la as List,
-  da as ListDetails,
-  ga as ListDetailsItem,
-  ma as ListItem,
-  Sa as MetaTags,
-  Ia as PageError,
-  ka as PageHeading,
-  Ta as PageLayout,
-  Da as PageSkeleton,
-  Ra as Pagination,
-  Ca as Progress,
-  ya as RadialProgress,
-  Ha as Report,
-  ha as ResourceLineItems,
+  h as Hint,
+  H as HookedForm,
+  P as HookedInput,
+  F as HookedInputCheckbox,
+  B as HookedInputCurrency,
+  L as HookedInputDate,
+  O as HookedInputDateRange,
+  V as HookedInputResourceGroup,
+  f as HookedInputSelect,
+  v as HookedInputSimpleSelect,
+  N as HookedInputSpinner,
+  w as HookedInputSwitch,
+  E as HookedInputToggleButton,
+  G as HookedValidationApiError,
+  x as HookedValidationError,
+  M as Hr,
+  J as Icon,
+  U as Input,
+  W as InputCheckbox,
+  X as InputCheckboxGroup,
+  Y as InputCurrency,
+  Z as InputCurrencyRange,
+  $ as InputDate,
+  j as InputDateRange,
+  q as InputFeedback,
+  z as InputFile,
+  K as InputJson,
+  Q as InputRadioGroup,
+  _ as InputReadonly,
+  aa as InputResourceGroup,
+  ea as InputSelect,
+  sa as InputSimpleSelect,
+  ta as InputSpinner,
+  ra as InputSwitch,
+  oa as InputTextArea,
+  na as InputToggleButton,
+  ua as Label,
+  ia as Legend,
+  ba as List,
+  pa as ListDetails,
+  la as ListDetailsItem,
+  ca as ListItem,
+  da as MetaTags,
+  ga as PageError,
+  ma as PageHeading,
+  Sa as PageLayout,
+  Ia as PageSkeleton,
+  ka as Pagination,
+  Ta as Progress,
+  Da as RadialProgress,
+  Ra as Report,
+  ya as ResourceAddress,
+  Ca as ResourceLineItems,
   Aa as ResourceList,
-  Pa as ResourceListItem,
-  Ba as ResourceListItemsMetadata,
-  Fa as ResourceOrderSummary,
-  La as ResourceOrderTimeline,
-  Na as ResourceShipmentParcels,
-  Va as ResourceTags,
-  fa as SearchBar,
-  va as Section,
-  Oa as Skeleton,
-  wa as SkeletonItem,
-  Ma as SkeletonTemplate,
-  xa as Spacer,
+  ha as ResourceListItem,
+  Ha as ResourceMetadata,
+  Pa as ResourceOrderSummary,
+  Fa as ResourceOrderTimeline,
+  Ba as ResourceShipmentParcels,
+  La as ResourceTags,
+  Oa as SearchBar,
+  Va as Section,
+  fa as Skeleton,
+  va as SkeletonItem,
+  Na as SkeletonTemplate,
+  wa as Spacer,
   Ea as Stack,
   Ga as StatusDot,
-  Ja as Steps,
-  Ua as Tab,
-  Wa as Table,
-  Xa as TableData,
-  Ya as Tabs,
-  Za as Tag,
-  $a as Td,
-  ja as Text,
-  qa as Th,
-  za as Timeline,
-  Ka as TokenProvider,
-  Qa as Tr,
-  _a as badgeVariants,
-  ae as computeFullname,
-  ee as downloadJsonAsFile,
-  se as flatSelectValues,
-  te as formatCentsToCurrency,
-  re as formatDate,
-  oe as formatDisplayName,
-  ne as formatResourceName,
-  ue as getAvatarSrcFromRate,
-  ie as getCustomerDisplayStatus,
-  be as getCustomerStatusName,
-  pe as getDefaultValueFromFlatten,
-  ce as getIsoDateAtDayEdge,
-  le as getIsoDateAtDaysBefore,
-  de as getOrderDisplayStatus,
-  ge as getOrderFulfillmentStatusName,
-  me as getOrderPaymentStatusName,
-  Se as getOrderStatusName,
-  Ie as getOrderTransactionPastTense,
-  ke as getOrderTriggerAttributeName,
-  Te as getParcelTrackingDetail,
-  De as getParcelTrackingDetails,
-  Re as getReturnDisplayStatus,
-  Ce as getReturnStatusName,
-  ye as getReturnTriggerAttributeName,
-  He as getShipmentRate,
-  he as getShipmentRates,
+  xa as Steps,
+  Ma as Tab,
+  Ja as Table,
+  Ua as TableData,
+  Wa as Tabs,
+  Xa as Tag,
+  Ya as Td,
+  Za as Text,
+  $a as Th,
+  ja as Timeline,
+  qa as TokenProvider,
+  za as Tr,
+  Ka as badgeVariants,
+  Qa as computeFullname,
+  _a as downloadJsonAsFile,
+  ae as flatSelectValues,
+  ee as formatCentsToCurrency,
+  se as formatDate,
+  te as formatDisplayName,
+  re as formatResourceName,
+  oe as getAvatarSrcFromRate,
+  ne as getCustomerDisplayStatus,
+  ue as getCustomerStatusName,
+  ie as getDefaultValueFromFlatten,
+  be as getIsoDateAtDayEdge,
+  pe as getIsoDateAtDaysBefore,
+  le as getOrderDisplayStatus,
+  ce as getOrderFulfillmentStatusName,
+  de as getOrderPaymentStatusName,
+  ge as getOrderStatusName,
+  me as getOrderTransactionPastTense,
+  Se as getOrderTriggerAttributeName,
+  Ie as getParcelTrackingDetail,
+  ke as getParcelTrackingDetails,
+  Te as getReturnDisplayStatus,
+  De as getReturnStatusName,
+  Re as getReturnTriggerAttributeName,
+  ye as getShipmentRate,
+  Ce as getShipmentRates,
   Ae as goBack,
-  Pe as hasBeenPurchased,
-  Be as hasSingleTracking,
-  Fe as iconNames,
-  Le as isAttachmentValidNote,
-  Ne as isGroupedSelectValues,
-  Ve as isMultiValueSelected,
-  fe as isSingleValueSelected,
-  ve as navigateTo,
-  Oe as referenceOrigins,
-  we as setApiFormErrors,
-  Me as sortAndGroupByDate,
-  xe as timeSeparator,
-  Ee as useClickAway,
-  Ge as useCoreApi,
-  Je as useCoreSdkProvider,
-  Ue as useDelayShow,
-  We as useIsChanged,
-  Xe as useOverlay,
-  Ye as useResourceFilters,
-  Ze as useTokenProvider,
-  $e as useValidationFeedback,
-  je as withSkeletonTemplate
+  he as hasBeenPurchased,
+  He as hasSingleTracking,
+  Pe as isAttachmentValidNote,
+  Fe as isGroupedSelectValues,
+  Be as isMultiValueSelected,
+  Le as isSingleValueSelected,
+  Oe as navigateTo,
+  Ve as referenceOrigins,
+  fe as setApiFormErrors,
+  ve as sortAndGroupByDate,
+  Ne as timeSeparator,
+  we as useClickAway,
+  Ee as useCoreApi,
+  Ge as useCoreSdkProvider,
+  xe as useDelayShow,
+  Me as useIsChanged,
+  Je as useOnBlurFromContainer,
+  Ue as useOverlay,
+  We as useResourceFilters,
+  Xe as useTokenProvider,
+  Ye as useValidationFeedback,
+  Ze as withSkeletonTemplate
 };

package/dist/mocks/data/customers.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("msw").RestHandler<import("msw/lib/glossary-de6278a9").M<import("msw/lib/glossary-de6278a9").h>>[];
+export default _default;

package/dist/providers/CoreSdkProvider/useCoreApi.d.ts

@@ -4,5 +4,28 @@ import { type Fetcher, type SWRConfiguration, type SWRResponse } from 'swr';
 import { type ConditionalKeys } from 'type-fest';
 type GenericMethod = (...args: any) => Promise<any>;
 type ForceToBeMethod<Method> = Method extends GenericMethod ? Method : GenericMethod;
+/**
+ * This hook performs api request base on [`@commercelayer/sdk`](https://github.com/commercelayer/commercelayer-sdk) and [`swr`](https://swr.vercel.app/).
+ *
+ * This is an example of getting the order with id `1234`.
+ *
+ * If you're used to use our sdk you can write:
+ * ```ts
+ * const order = await client.orders.retrieve('1234')
+ * ```
+ *
+ * With `useCoreApi` you'll write instead:
+ * ```ts
+ * const {
+ *   data: order,
+ *   isLoading
+ * } = useCoreApi('orders', 'retrieve', ['1234'])
+ * ```
+ * @param resource Resource type
+ * @param action Related resource action
+ * @param args Action arguments
+ * @param config SWR options
+ * @returns SWR response
+ */
 export declare function useCoreApi<Resource extends ResourceTypeLock, Action extends ConditionalKeys<CommerceLayerClient[Resource], GenericMethod>, Method extends ForceToBeMethod<CommerceLayerClient[Resource][Action]>, Args extends Parameters<Method>, Output extends Awaited<ReturnType<Method>>, SWROptions extends SWRConfiguration<Output, any, Fetcher<Output>>>(resource: Resource, action: Action, args: Args | null, config?: SWROptions): SWRResponse<Output, any, SWROptions>;
 export {};

package/dist/providers/TokenProvider/TokenProvider.d.ts

@@ -14,23 +14,30 @@ export interface TokenProviderValue {
 }
 export interface TokenProviderProps {
     /**
-     * Token kind (will be validated)
-     * Eg. `integration` or `webapp` but also `imports` or `orders` in case of dashboard-generated token
+     * Token kind (will be validated).
+     * For example: `integration`, `sales_channel` or `webapp` but also `imports` or `orders` in case of dashboard-generated token.
      */
     kind: TokenProviderTokenApplicationKind;
     /**
      * Slug of the current app. It needs to match one of the allowed app slugs enabled in the dashboard.
-     * Example: `orders`, `imports`, `exports`, `shipments`, `webhooks`, `returns`
      * Will be used to persist token for current app only.
      */
     appSlug: TokenProviderAllowedApp;
     /**
-     * Required when application is forked or running as self-hosted.
+     * Skip domain slug validation when is dev mode
+     */
+    devMode: boolean;
+    /**
+     * Entire app content
+     */
+    children: ((props: TokenProviderValue) => ReactNode) | ReactNode;
+    /**
+     * Required when application is running as self-hosted.
      * It's used to perform a security check to test the validity of token against current organization.
      */
     organizationSlug?: string;
     /**
-     * Base domain to be used for Commerce Layer API requests (eg. `commercelayer.io`)
+     * Base domain to be used for Commerce Layer API requests (e.g. `commercelayer.io`)
      */
     domain?: string;
     /**
@@ -53,19 +60,11 @@ export interface TokenProviderProps {
      * Element to display in case of invalid token
      */
     errorElement?: ReactNode;
-    /**
-     * skip domain slug validation when is dev mode
-     */
-    devMode: boolean;
     /**
      * Optional. In case you already have an access token, this will skip the retrieval of token from URL or localStorage.
      * When undefined (default scenario), token is expected to be retrieved from `?accessToken=xxxx` query string or localStorage (in this order).
      */
     accessToken?: string;
-    /**
-     * Entire app content
-     */
-    children: ((props: TokenProviderValue) => ReactNode) | ReactNode;
 }
 export declare const AuthContext: import("react").Context<TokenProviderValue>;
 export declare const useTokenProvider: () => TokenProviderValue;