@commercelayer/app-elements 0.1.0 → 0.2.0

package/dist/ui/resources/ResourceListItem/ResourceListItem.mocks.d.ts

@@ -0,0 +1,399 @@
+export declare const presetResourceListItem: {
+    orderAwaitingApproval: {
+        readonly type: "orders";
+        readonly id: "";
+        readonly updated_at: "2023-06-10T06:38:44.964Z";
+        readonly placed_at: "2023-06-09T11:00:00.000Z";
+        readonly created_at: "";
+        readonly formatted_total_amount: "$650.00";
+        readonly fulfillment_status: "unfulfilled";
+        readonly number: 123456;
+        readonly payment_status: "authorized";
+        readonly status: "placed";
+        readonly market: {
+            readonly type: "markets";
+            readonly id: "";
+            readonly name: "Europe";
+            readonly created_at: "";
+            readonly updated_at: "";
+            readonly shared_secret: "";
+        };
+        readonly billing_address: {
+            readonly first_name: "Bruce";
+            readonly last_name: "Wayne";
+            readonly type: "addresses";
+            readonly id: "";
+            readonly updated_at: "";
+            readonly created_at: "";
+            readonly line_1: "";
+            readonly state_code: "";
+            readonly phone: "";
+            readonly city: "";
+            readonly country_code: "";
+        };
+    };
+    orderFulfilled: {
+        type: "orders";
+        id: string;
+        created_at: string;
+        updated_at: string;
+        placed_at: string;
+        number: number;
+        status: "approved";
+        payment_status: "paid";
+        fulfillment_status: "fulfilled";
+        formatted_total_amount: string;
+        market: {
+            readonly type: "markets";
+            readonly id: "";
+            readonly name: "Europe";
+            readonly created_at: "";
+            readonly updated_at: "";
+            readonly shared_secret: "";
+        };
+        billing_address: {
+            first_name: string;
+            last_name: string;
+            company: string;
+            type: "addresses";
+            id: string;
+            updated_at: string;
+            created_at: string;
+            line_1: string;
+            state_code: string;
+            phone: string;
+            city: string;
+            country_code: string;
+        };
+    };
+    orderPending: {
+        type: "orders";
+        id: string;
+        created_at: string;
+        updated_at: string;
+        number: number;
+        status: "pending";
+        payment_status: "unpaid";
+        fulfillment_status: "unfulfilled";
+        formatted_total_amount: string;
+        market: {
+            readonly type: "markets";
+            readonly id: "";
+            readonly name: "Europe";
+            readonly created_at: "";
+            readonly updated_at: "";
+            readonly shared_secret: "";
+        };
+    };
+    orderEditing: {
+        type: "orders";
+        id: string;
+        created_at: string;
+        updated_at: string;
+        number: number;
+        status: "editing";
+        payment_status: "authorized";
+        fulfillment_status: "unfulfilled";
+        formatted_total_amount: string;
+        market: {
+            readonly type: "markets";
+            readonly id: "";
+            readonly name: "Europe";
+            readonly created_at: "";
+            readonly updated_at: "";
+            readonly shared_secret: "";
+        };
+        billing_address: {
+            first_name: string;
+            last_name: string;
+            type: "addresses";
+            id: string;
+            updated_at: string;
+            created_at: string;
+            line_1: string;
+            state_code: string;
+            phone: string;
+            city: string;
+            country_code: string;
+        };
+    };
+    returnRequested: {
+        type: "returns";
+        id: string;
+        number: string;
+        updated_at: string;
+        created_at: string;
+        status: "requested";
+        order: {
+            readonly type: "orders";
+            readonly id: "";
+            readonly updated_at: "2023-06-10T06:38:44.964Z";
+            readonly placed_at: "2023-06-09T11:00:00.000Z";
+            readonly created_at: "";
+            readonly formatted_total_amount: "$650.00";
+            readonly fulfillment_status: "unfulfilled";
+            readonly number: 123456;
+            readonly payment_status: "authorized";
+            readonly status: "placed";
+            readonly market: {
+                readonly type: "markets";
+                readonly id: "";
+                readonly name: "Europe";
+                readonly created_at: "";
+                readonly updated_at: "";
+                readonly shared_secret: "";
+            };
+            readonly billing_address: {
+                readonly first_name: "Bruce";
+                readonly last_name: "Wayne";
+                readonly type: "addresses";
+                readonly id: "";
+                readonly updated_at: "";
+                readonly created_at: "";
+                readonly line_1: "";
+                readonly state_code: "";
+                readonly phone: "";
+                readonly city: "";
+                readonly country_code: "";
+            };
+        };
+    };
+    returnApproved: {
+        type: "returns";
+        id: string;
+        number: string;
+        updated_at: string;
+        created_at: string;
+        status: "approved";
+        order: {
+            readonly type: "orders";
+            readonly id: "";
+            readonly updated_at: "2023-06-10T06:38:44.964Z";
+            readonly placed_at: "2023-06-09T11:00:00.000Z";
+            readonly created_at: "";
+            readonly formatted_total_amount: "$650.00";
+            readonly fulfillment_status: "unfulfilled";
+            readonly number: 123456;
+            readonly payment_status: "authorized";
+            readonly status: "placed";
+            readonly market: {
+                readonly type: "markets";
+                readonly id: "";
+                readonly name: "Europe";
+                readonly created_at: "";
+                readonly updated_at: "";
+                readonly shared_secret: "";
+            };
+            readonly billing_address: {
+                readonly first_name: "Bruce";
+                readonly last_name: "Wayne";
+                readonly type: "addresses";
+                readonly id: "";
+                readonly updated_at: "";
+                readonly created_at: "";
+                readonly line_1: "";
+                readonly state_code: "";
+                readonly phone: "";
+                readonly city: "";
+                readonly country_code: "";
+            };
+        };
+    };
+    returnShipped: {
+        type: "returns";
+        id: string;
+        number: string;
+        updated_at: string;
+        created_at: string;
+        status: "shipped";
+        order: {
+            readonly type: "orders";
+            readonly id: "";
+            readonly updated_at: "2023-06-10T06:38:44.964Z";
+            readonly placed_at: "2023-06-09T11:00:00.000Z";
+            readonly created_at: "";
+            readonly formatted_total_amount: "$650.00";
+            readonly fulfillment_status: "unfulfilled";
+            readonly number: 123456;
+            readonly payment_status: "authorized";
+            readonly status: "placed";
+            readonly market: {
+                readonly type: "markets";
+                readonly id: "";
+                readonly name: "Europe";
+                readonly created_at: "";
+                readonly updated_at: "";
+                readonly shared_secret: "";
+            };
+            readonly billing_address: {
+                readonly first_name: "Bruce";
+                readonly last_name: "Wayne";
+                readonly type: "addresses";
+                readonly id: "";
+                readonly updated_at: "";
+                readonly created_at: "";
+                readonly line_1: "";
+                readonly state_code: "";
+                readonly phone: "";
+                readonly city: "";
+                readonly country_code: "";
+            };
+        };
+    };
+    returnReceived: {
+        type: "returns";
+        id: string;
+        number: string;
+        updated_at: string;
+        created_at: string;
+        status: "received";
+        order: {
+            readonly type: "orders";
+            readonly id: "";
+            readonly updated_at: "2023-06-10T06:38:44.964Z";
+            readonly placed_at: "2023-06-09T11:00:00.000Z";
+            readonly created_at: "";
+            readonly formatted_total_amount: "$650.00";
+            readonly fulfillment_status: "unfulfilled";
+            readonly number: 123456;
+            readonly payment_status: "authorized";
+            readonly status: "placed";
+            readonly market: {
+                readonly type: "markets";
+                readonly id: "";
+                readonly name: "Europe";
+                readonly created_at: "";
+                readonly updated_at: "";
+                readonly shared_secret: "";
+            };
+            readonly billing_address: {
+                readonly first_name: "Bruce";
+                readonly last_name: "Wayne";
+                readonly type: "addresses";
+                readonly id: "";
+                readonly updated_at: "";
+                readonly created_at: "";
+                readonly line_1: "";
+                readonly state_code: "";
+                readonly phone: "";
+                readonly city: "";
+                readonly country_code: "";
+            };
+        };
+    };
+    returnCancelled: {
+        type: "returns";
+        id: string;
+        number: string;
+        updated_at: string;
+        created_at: string;
+        status: "cancelled";
+        order: {
+            readonly type: "orders";
+            readonly id: "";
+            readonly updated_at: "2023-06-10T06:38:44.964Z";
+            readonly placed_at: "2023-06-09T11:00:00.000Z";
+            readonly created_at: "";
+            readonly formatted_total_amount: "$650.00";
+            readonly fulfillment_status: "unfulfilled";
+            readonly number: 123456;
+            readonly payment_status: "authorized";
+            readonly status: "placed";
+            readonly market: {
+                readonly type: "markets";
+                readonly id: "";
+                readonly name: "Europe";
+                readonly created_at: "";
+                readonly updated_at: "";
+                readonly shared_secret: "";
+            };
+            readonly billing_address: {
+                readonly first_name: "Bruce";
+                readonly last_name: "Wayne";
+                readonly type: "addresses";
+                readonly id: "";
+                readonly updated_at: "";
+                readonly created_at: "";
+                readonly line_1: "";
+                readonly state_code: "";
+                readonly phone: "";
+                readonly city: "";
+                readonly country_code: "";
+            };
+        };
+    };
+    returnRejected: {
+        type: "returns";
+        id: string;
+        number: string;
+        updated_at: string;
+        created_at: string;
+        status: "rejected";
+        order: {
+            readonly type: "orders";
+            readonly id: "";
+            readonly updated_at: "2023-06-10T06:38:44.964Z";
+            readonly placed_at: "2023-06-09T11:00:00.000Z";
+            readonly created_at: "";
+            readonly formatted_total_amount: "$650.00";
+            readonly fulfillment_status: "unfulfilled";
+            readonly number: 123456;
+            readonly payment_status: "authorized";
+            readonly status: "placed";
+            readonly market: {
+                readonly type: "markets";
+                readonly id: "";
+                readonly name: "Europe";
+                readonly created_at: "";
+                readonly updated_at: "";
+                readonly shared_secret: "";
+            };
+            readonly billing_address: {
+                readonly first_name: "Bruce";
+                readonly last_name: "Wayne";
+                readonly type: "addresses";
+                readonly id: "";
+                readonly updated_at: "";
+                readonly created_at: "";
+                readonly line_1: "";
+                readonly state_code: "";
+                readonly phone: "";
+                readonly city: "";
+                readonly country_code: "";
+            };
+        };
+    };
+    customerProspect: {
+        type: "customers";
+        id: string;
+        updated_at: string;
+        created_at: string;
+        status: "prospect";
+        email: string;
+        total_orders_count: number;
+    };
+    customerRepeat: {
+        type: "customers";
+        id: string;
+        updated_at: string;
+        created_at: string;
+        status: "repeat";
+        email: string;
+        total_orders_count: number;
+    };
+    customerAcquired: {
+        type: "customers";
+        id: string;
+        updated_at: string;
+        created_at: string;
+        status: "acquired";
+        email: string;
+        customer_group: {
+            type: "customer_groups";
+            id: string;
+            name: string;
+            updated_at: string;
+            created_at: string;
+        };
+    };
+};

package/dist/ui/resources/ResourceListItem/common.d.ts

@@ -0,0 +1,14 @@
+import type { DisplayStatus } from '../../../dictionaries/types';
+export declare const ListItemDescription: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    displayStatus: DisplayStatus;
+    date: string;
+    additionalInfos?: string | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export declare const ListItemIcon: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    color: "none" | "green" | "orange" | "red" | "gray" | "teal" | "white" | "black" | undefined;
+    icon: "download" | "package" | "arrowBendDownRight" | "arrowCircleDown" | "arrowClockwise" | "arrowDown" | "arrowLeft" | "arrowsLeftRight" | "arrowUpRight" | "asterisk" | "caretRight" | "chatCircle" | "check" | "cloud" | "creditCard" | "eye" | "flag" | "funnel" | "hourglass" | "magnifyingGlass" | "minus" | "pencilSimple" | "printer" | "shoppingBag" | "stack" | "truck" | "upload" | "user" | "warning" | "warningCircle" | "x";
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;

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

@@ -0,0 +1 @@
+export { ResourceListItem } from './ResourceListItem';

package/dist/ui/resources/ResourceListItem/transformers/customers.d.ts

@@ -0,0 +1,3 @@
+import type { Customer } from '@commercelayer/sdk';
+import { type ResourceToProps } from '../types';
+export declare const customerToProps: ResourceToProps<Customer>;

package/dist/ui/resources/ResourceListItem/transformers/index.d.ts

@@ -0,0 +1,3 @@
+export { customerToProps } from './customers';
+export { orderToProps } from './orders';
+export { returnToProps } from './returns';

package/dist/ui/resources/ResourceListItem/transformers/orders.d.ts

@@ -0,0 +1,3 @@
+import type { Order } from '@commercelayer/sdk';
+import { type ResourceToProps } from '../types';
+export declare const orderToProps: ResourceToProps<Order>;

package/dist/ui/resources/ResourceListItem/transformers/returns.d.ts

@@ -0,0 +1,3 @@
+import type { Return } from '@commercelayer/sdk';
+import { type ResourceToProps } from '../types';
+export declare const returnToProps: ResourceToProps<Return>;

package/dist/ui/resources/ResourceListItem/types.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { TokenProviderAuthUser } from '../../../providers/TokenProvider/types';
+import type { Customer, Order, Return } from '@commercelayer/sdk';
+export type ResourceListItemType = Order | Return | Customer;
+export interface ResourceListItemComponentProps {
+    name: string;
+    description: JSX.Element | string;
+    icon: JSX.Element;
+    rightContent?: JSX.Element;
+    showArrow?: boolean;
+}
+export type ResourceToProps<Resource> = (options: {
+    resource: Resource;
+    user: TokenProviderAuthUser | null;
+}) => ResourceListItemComponentProps;

package/dist/ui/resources/{ListItemsMetadata.d.ts → ResourceListItemsMetadata.d.ts}

@@ -1,7 +1,6 @@
 import type { Metadata } from '@commercelayer/sdk/lib/cjs/resource';
-declare const ListItemsMetadata: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+export declare const ResourceListItemsMetadata: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     metadata?: Metadata | undefined;
     delayMs?: number | undefined;
     isLoading?: boolean | undefined;
 }>;
-export { ListItemsMetadata };

package/dist/ui/resources/{OrderSummary.d.ts → ResourceOrderSummary.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { Order } from '@commercelayer/sdk';
-export declare const OrderSummary: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+export declare const ResourceOrderSummary: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     editable?: boolean | undefined;
     onChange?: (() => void) | undefined;
     footerActions?: {

package/dist/ui/resources/{OrderTimeline.d.ts → ResourceOrderTimeline.d.ts}

@@ -1,6 +1,6 @@
 import { referenceOrigins } from '../../helpers/attachments';
 import type { Attachment } from '@commercelayer/sdk';
-export declare const OrderTimeline: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+export declare const ResourceOrderTimeline: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     orderId?: string | undefined;
     refresh?: boolean | undefined;
     attachmentOption?: {

package/dist/ui/resources/{ShipmentParcels.d.ts → ResourceShipmentParcels.d.ts}

@@ -1,5 +1,5 @@
 import { type Shipment as ShipmentResource } from '@commercelayer/sdk';
-export declare const ShipmentParcels: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+export declare const ResourceShipmentParcels: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     shipment: ShipmentResource;
     onRemoveParcel?: ((parcelId: string) => void) | undefined;
     delayMs?: number | undefined;

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

@@ -3,6 +3,7 @@ type TaggableResource = Extract<ListableResourceType, 'addresses' | 'bundles' |
 interface TagsOverlay {
     title: string;
     description?: string;
+    showManageAction?: boolean;
 }
 export declare const ResourceTags: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     resourceType: TaggableResource;

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

@@ -0,0 +1 @@
+export { useResourceFilters } from './useResourceFilters';

package/dist/ui/resources/{Filters/useFilters.d.ts → useResourceFilters/useResourceFilters.d.ts}

@@ -1,19 +1,19 @@
 /// <reference types="react" />
 import { type ResourceListProps } from '../../resources/ResourceList';
-import { type ResourceListItem } from '../../resources/ResourceList/ResourceList';
+import { type ResourceListItemTemplate } from '../../resources/ResourceList/ResourceList';
 import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
 import { type QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
 import { type FiltersFormProps } from './FiltersForm';
 import { type FiltersNavProps } from './FiltersNav';
 import { makeFilterAdapters } from './adapters';
 import { type FiltersInstructions } from './types';
-interface UseFiltersProps {
+interface UseResourceFiltersConfig {
     /**
      * Array of instruction items to build the filters behaviors
      */
     instructions: FiltersInstructions;
 }
-interface UseFiltersHook {
+interface UseResourceFiltersHook {
     /**
      * Helper methods to transform filters from/to url query string, sdk and form values
      */
@@ -41,7 +41,7 @@ interface UseFiltersHook {
     /**
      * Filtered ResourceList component based on current active filters
      */
-    FilteredList: <TResource extends ListableResourceType>(props: Pick<ResourceListProps<TResource>, 'type' | 'query' | 'emptyState' | 'actionButton'> & ResourceListItem<TResource>) => JSX.Element;
+    FilteredList: <TResource extends ListableResourceType>(props: Pick<ResourceListProps<TResource>, 'type' | 'query' | 'emptyState' | 'actionButton'> & ResourceListItemTemplate<TResource>) => JSX.Element;
     /**
      * SDK filters object to be used in the sdk query
      */
@@ -56,5 +56,5 @@ interface UseFiltersHook {
      */
     viewTitle?: string;
 }
-export declare function useFilters({ instructions }: UseFiltersProps): UseFiltersHook;
+export declare function useResourceFilters({ instructions }: UseResourceFiltersConfig): UseResourceFiltersHook;
 export {};

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
+  "license": "MIT",
   "files": [
     "dist"
   ],

package/dist/Async-566ec3f7.js

@@ -1,99 +0,0 @@
-import { L as de, H as le } from "./main-795be39b.js";
-import * as ce from "react";
-import { useRef as F, useState as a, useEffect as x, useCallback as D, forwardRef as ve } from "react";
-import { _ as Oe, a as s, h as Se, b as g, u as me, S as _e, c as he, s as ge } from "./overrides-346bb0f6.js";
-import { d as ye } from "./unsupportedIterableToArray-a3020d44.js";
-import "react-dom";
-import "@commercelayer/sdk";
-import "react-hook-form";
-import "query-string";
-var Ce = ["defaultOptions", "cacheOptions", "loadOptions", "options", "isLoading", "onInputChange", "filterOption"];
-function Ie(t) {
-  var o = t.defaultOptions, n = o === void 0 ? !1 : o, i = t.cacheOptions, u = i === void 0 ? !1 : i, r = t.loadOptions;
-  t.options;
-  var v = t.isLoading, O = v === void 0 ? !1 : v, S = t.onInputChange, m = t.filterOption, y = m === void 0 ? null : m, E = Oe(t, Ce), $ = E.inputValue, f = F(void 0), _ = F(!1), G = a(Array.isArray(n) ? n : void 0), j = s(G, 2), J = j[0], R = j[1], K = a(typeof $ < "u" ? $ : ""), w = s(K, 2), q = w[0], C = w[1], Q = a(n === !0), H = s(Q, 2), U = H[0], d = H[1], X = a(void 0), M = s(X, 2), I = M[0], L = M[1], Y = a([]), N = s(Y, 2), Z = N[0], A = N[1], k = a(!1), T = s(k, 2), ee = T[0], h = T[1], te = a({}), W = s(te, 2), l = W[0], b = W[1], ne = a(void 0), z = s(ne, 2), ae = z[0], se = z[1], re = a(void 0), B = s(re, 2), oe = B[0], ie = B[1];
-  u !== oe && (b({}), ie(u)), n !== ae && (R(Array.isArray(n) ? n : void 0), se(n)), x(function() {
-    return _.current = !0, function() {
-      _.current = !1;
-    };
-  }, []);
-  var P = D(function(c, p) {
-    if (!r)
-      return p();
-    var e = r(c, p);
-    e && typeof e.then == "function" && e.then(p, function() {
-      return p();
-    });
-  }, [r]);
-  x(function() {
-    n === !0 && P(q, function(c) {
-      _.current && (R(c || []), d(!!f.current));
-    });
-  }, []);
-  var ue = D(function(c, p) {
-    var e = Se(c, p, S);
-    if (!e) {
-      f.current = void 0, C(""), L(""), A([]), d(!1), h(!1);
-      return;
-    }
-    if (u && l[e])
-      C(e), L(e), A(l[e]), d(!1), h(!1);
-    else {
-      var fe = f.current = {};
-      C(e), d(!0), h(!I), P(e, function(V) {
-        _ && fe === f.current && (f.current = void 0, d(!1), L(e), A(V || []), h(!1), b(V ? g(g({}, l), {}, ye({}, e, V)) : l));
-      });
-    }
-  }, [u, P, I, l, S]), pe = ee ? [] : q && I ? Z : J || [];
-  return g(g({}, E), {}, {
-    options: pe,
-    isLoading: U || O,
-    onInputChange: ue,
-    filterOption: y
-  });
-}
-var Le = /* @__PURE__ */ ve(function(t, o) {
-  var n = Ie(t), i = me(n);
-  return /* @__PURE__ */ ce.createElement(_e, he({
-    ref: o
-  }, i));
-}), Ae = Le;
-function Pe({
-  onSelect: t,
-  noOptionsMessage: o,
-  initialValues: n,
-  isOptionDisabled: i,
-  loadAsyncValues: u,
-  debounceMs: r = 500,
-  ...v
-}) {
-  const O = D(
-    de((S, m) => {
-      u(S).then((y) => {
-        m(y);
-      });
-    }, r),
-    [r]
-  );
-  return x(() => () => {
-    O.cancel();
-  }, [r]), /* @__PURE__ */ le.jsx(
-    Ae,
-    {
-      ...v,
-      defaultOptions: n,
-      onChange: t,
-      noOptionsMessage: () => o,
-      loadOptions: O,
-      components: {
-        ...ge,
-        DropdownIndicator: null
-      },
-      isOptionDisabled: i
-    }
-  );
-}
-Pe.displayName = "AsyncSelectComponent";
-export {
-  Pe as AsyncSelectComponent
-};