@commercelayer/app-elements 0.2.0 → 0.3.0

package/dist/ui/{atoms/dropdown → composite/Dropdown}/DropdownMenu.d.ts

@@ -3,8 +3,8 @@ interface Props extends React.HTMLAttributes<HTMLElement> {
     children?: React.ReactNode;
     arrow?: 'none';
 }
-declare function DropdownMenu({ children, arrow, ...rest }: Props): JSX.Element;
-declare namespace DropdownMenu {
+export declare function DropdownMenu({ children, arrow, ...rest }: Props): JSX.Element;
+export declare namespace DropdownMenu {
     var displayName: string;
 }
-export { DropdownMenu };
+export {};

package/dist/ui/composite/Dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { Dropdown } from './Dropdown';
+export { DropdownDivider } from './DropdownDivider';
+export { DropdownItem } from './DropdownItem';

package/dist/ui/composite/ListDetails.d.ts

@@ -9,11 +9,11 @@ export interface DetailsListProps {
      */
     children?: ReactNode;
     /**
-     * css class name
+     * CSS class name
      */
     className?: string;
     /**
-     * font size
+     * Font size
      */
     fontSize?: 'normal' | 'small';
     /**

package/dist/ui/composite/SearchBar.d.ts

@@ -33,8 +33,8 @@ interface SearchBarProps {
 }
 /**
  * This component renders a search bar with a clear button with debounced `onSearch` callback.
- * <blockquote type='info'>In this way the `onSearch` callback will be triggered only when the user stops typing
- * for the specified value of `debounceMs` (default 500ms).</blockquote>
+ * <span type='info'>In this way the `onSearch` callback will be triggered only when the user stops typing
+ * for the specified value of `debounceMs` (default 500ms).</span>
  */
 export declare const SearchBar: import("react").ForwardRefExoticComponent<SearchBarProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/ui/forms/Input/Input.d.ts

@@ -2,11 +2,11 @@
 import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
 export interface InputProps extends InputWrapperBaseProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
     /**
-     * controlled type
+     * Controlled type
      */
     type?: 'text' | 'number' | 'password' | 'tel' | 'url' | 'email';
     /**
-     * optional css class names used for the input element
+     * Optional CSS class names used for the input element
      */
     className?: string;
 }

package/dist/ui/forms/InputCurrency/InputCurrency.d.ts

@@ -16,7 +16,7 @@ export interface InputCurrencyProps extends InputWrapperBaseProps, Pick<ReactCur
      */
     placeholder?: string;
     /**
-     * optional css class names used for the input element
+     * Optional CSS class names used for the input element
      */
     className?: string;
     /**
@@ -32,7 +32,7 @@ export interface InputCurrencyProps extends InputWrapperBaseProps, Pick<ReactCur
      */
     onChange: (cents: number | null, formatted: string) => void;
     /**
-     * hide currency symbol but keep the currency formatting
+     * Hide currency symbol but keep the currency formatting
      */
     hideCurrencySymbol?: boolean;
     /**
@@ -41,7 +41,7 @@ export interface InputCurrencyProps extends InputWrapperBaseProps, Pick<ReactCur
      */
     allowNegativeValue?: boolean;
     /**
-     * show (X) button to clear the input
+     * Show (X) button to clear the input
      */
     isClearable?: boolean;
 }

package/dist/ui/forms/InputDate/InputDateComponent.d.ts

@@ -4,44 +4,44 @@ import { type InputWrapperBaseProps } from '../../internals/InputWrapper';
 export type MaybeDate = Date | null;
 export interface InputDateProps extends InputWrapperBaseProps {
     /**
-     * controlled value
+     * Controlled value
      */
     value?: MaybeDate;
     /**
-     * callback fired when value is changed
+     * Callback fired when value is changed
      */
     onChange: (date: MaybeDate) => void;
     /**
-     * optional css class names used for the outer wrapper/container element
+     * Optional CSS class names used for the outer wrapper/container element
      */
     wrapperClassName?: string;
     /**
-     * optional css class names used for the input element
+     * Optional CSS class names used for the input element
      */
     inputClassName?: string;
     /**
-     * optional placeholder text
+     * Optional placeholder text
      */
     placeholder?: string;
     /**
-     * string to be parsed as formatter (eg. MM/dd/yyyy, dd-MM-yy, ect...).
+     * String to be parsed as formatter (eg. MM/dd/yyyy, dd-MM-yy, ect...).
      * When undefined, will autodetect format from user's browser
      */
     format?: string;
     /**
-     * disable selection of previous dates
+     * Disable selection of previous dates
      */
     minDate?: Date;
     /**
-     * set placeholder as detected date format
+     * Set placeholder as detected date format
      */
     autoPlaceholder?: boolean;
     /**
-     * enables a button to clear the selected date
+     * Enables a button to clear the selected date
      */
     isClearable?: boolean;
     /**
-     * prevent the date picker calendar from opening on focus,
+     * Prevent the date picker calendar from opening on focus,
      * this is useful when showing validation error message and
      * to avoid the calendar to open on top of the error message
      */

package/dist/ui/forms/InputReadonly.d.ts

@@ -2,19 +2,19 @@
 import { type InputWrapperBaseProps } from '../internals/InputWrapper';
 interface InputReadonlyProps extends InputWrapperBaseProps {
     /**
-     * controlled value
+     * Controlled value
      */
     value?: string;
     /**
-     * optional css class names used for the outer wrapper/container element
+     * Optional CSS class names used for the outer wrapper/container element
      */
     wrapperClassName?: string;
     /**
-     * optional css class names used for the input element
+     * Optional CSS class names used for the input element
      */
     inputClassName?: string;
     /**
-     * optional prop to define whether to show or not the Copy to clipboard button
+     * Optional prop to define whether to show or not the Copy to clipboard button
      */
     showCopyAction?: boolean;
 }

package/dist/ui/forms/InputResourceGroup/InputResourceGroup.d.ts

@@ -23,6 +23,6 @@ export interface InputResourceGroupProps extends Omit<FullListProps, 'totalCount
 /**
  * Input component that allows to select multiple resources. The list of options is automatically fetched from the API using the configuration provided as props.
  * When number of fetched options is greater than `previewLimit` provided, a button will be shown to open an overlay with the full list of resources (infinite scrolling) and a search box on top.
- * <blockquote type='info'>It's possible to mount the component with some `defaultValues` that will be always shown checked on top of the preview list, to ensure that user will always see the already checked options.</blockquote>
+ * <span type='info'>It's possible to mount the component with some `defaultValues` that will be always shown checked on top of the preview list, to ensure that user will always see the already checked options.</span>
  */
 export declare const InputResourceGroup: React.FC<InputResourceGroupProps>;

package/dist/ui/forms/InputSelect/InputSelect.d.ts

@@ -73,7 +73,7 @@ export interface InputSelectProps extends InputWrapperBaseProps {
      */
     noOptionsMessage?: string;
     /**
-     * css class name
+     * CSS class name
      */
     className?: string;
     /**

package/dist/ui/internals/InputWrapper.d.ts

@@ -3,29 +3,29 @@ import { type HintProps } from '../atoms/Hint';
 import { type InputFeedbackProps } from '../forms/InputFeedback';
 export interface InputWrapperBaseProps {
     /**
-     * optional input label
+     * Optional input label
      */
     label?: string;
     /**
-     * optional hint to be rendered below
+     * Optional hint to be rendered below
      */
     hint?: {
         icon?: HintProps['icon'];
         text: HintProps['children'];
     };
     /**
-     * optional hint to be rendered below
+     * Optional hint to be rendered below
      */
     feedback?: Omit<InputFeedbackProps, 'className'>;
     /**
-     * show label and input on the same line
+     * Show label and input on the same line
      * @default false
      */
     inline?: boolean;
 }
 export interface InputWrapperProps extends InputWrapperBaseProps {
     /**
-     * optional css class names used for the input element
+     * Optional CSS class names used for the input element
      */
     className?: string;
     name?: string;

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

@@ -0,0 +1,15 @@
+import { type Address } from '@commercelayer/sdk';
+type ResourceAddressEditPosition = 'side' | 'bottom';
+/**
+ * Renders an all-in-one visualization and editing solution to deal with a given resource of type `Address`
+ */
+export declare const ResourceAddress: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    resource: Address;
+    title?: string | undefined;
+    editable?: boolean | undefined;
+    editPosition?: ResourceAddressEditPosition | undefined;
+    showBillingInfo?: boolean | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export {};

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

@@ -0,0 +1,38 @@
+export declare const presetAddresses: {
+    withName: {
+        type: "addresses";
+        id: string;
+        company: string;
+        first_name: string;
+        last_name: string;
+        full_name: string;
+        line_1: string;
+        line_2: string;
+        city: string;
+        country_code: string;
+        state_code: string;
+        zip_code: string;
+        phone: string;
+        billing_info: string;
+        created_at: string;
+        updated_at: string;
+    };
+    withCompany: {
+        type: "addresses";
+        id: string;
+        company: string;
+        first_name: string;
+        last_name: string;
+        full_name: string;
+        line_1: string;
+        line_2: string;
+        city: string;
+        country_code: string;
+        state_code: string;
+        zip_code: string;
+        phone: string;
+        billing_info: string;
+        created_at: string;
+        updated_at: string;
+    };
+};

package/dist/ui/resources/ResourceAddress/ResourceAddressForm.d.ts

@@ -0,0 +1,48 @@
+import { type Address } from '@commercelayer/sdk';
+import { z } from 'zod';
+declare const addressFormSchema: z.ZodObject<{
+    first_name: z.ZodString;
+    last_name: z.ZodString;
+    company: z.ZodOptional<z.ZodString>;
+    line_1: z.ZodString;
+    line_2: z.ZodOptional<z.ZodString>;
+    city: z.ZodString;
+    zip_code: z.ZodOptional<z.ZodString>;
+    state_code: z.ZodString;
+    country_code: z.ZodString;
+    phone: z.ZodString;
+    billing_info: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    city: string;
+    first_name: string;
+    last_name: string;
+    country_code: string;
+    line_1: string;
+    state_code: string;
+    phone: string;
+    company?: string | undefined;
+    line_2?: string | undefined;
+    zip_code?: string | undefined;
+    billing_info?: string | undefined;
+}, {
+    city: string;
+    first_name: string;
+    last_name: string;
+    country_code: string;
+    line_1: string;
+    state_code: string;
+    phone: string;
+    company?: string | undefined;
+    line_2?: string | undefined;
+    zip_code?: string | undefined;
+    billing_info?: string | undefined;
+}>;
+export type ResourceAddressFormValues = z.infer<typeof addressFormSchema>;
+export declare const ResourceAddressForm: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    address: Address;
+    showBillingInfo?: boolean | undefined;
+    onChange: (updatedAddress: Address) => void;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export {};

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

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

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

@@ -0,0 +1,15 @@
+import type { LineItem, ParcelLineItem, ReturnLineItem, StockLineItem } from '@commercelayer/sdk';
+type Item = LineItem | ParcelLineItem | StockLineItem | ReturnLineItem;
+/**
+ * This component renders a list of line items taking care of showing the right informations and structure depending of provided line item type.
+ */
+export declare const ResourceLineItems: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    items: Item[];
+    size?: "small" | "normal" | undefined;
+    footer?: React.ReactNode;
+    editable?: boolean | undefined;
+    onChange?: (() => void) | undefined;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export {};

package/dist/ui/resources/{ResourceLineItems.mocks.d.ts → ResourceLineItems/ResourceLineItems.mocks.d.ts}

@@ -215,6 +215,24 @@ export declare const presetLineItems: {
         reference_origin: null;
         metadata: {};
     };
+    returnLineItem: {
+        id: string;
+        type: "return_line_items";
+        sku_code: string;
+        bundle_code: null;
+        quantity: number;
+        name: string;
+        image_url: string;
+        return_reason: {
+            0: string;
+        };
+        restocked_at: string;
+        created_at: string;
+        updated_at: string;
+        reference: null;
+        reference_origin: null;
+        metadata: {};
+    };
     giftCardUsed: {
         type: "line_items";
         id: string;

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

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

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

@@ -0,0 +1,22 @@
+import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
+interface ResourceMetadataOverlay {
+    /**
+     * Title shown as first line in edit overlay heading
+     */
+    title: string;
+    /**
+     * Optional description shown as second line in edit overlay heading
+     */
+    description?: string;
+}
+/**
+ * This component generates an all-in-one visualization and editing interface for managing metadata object values of requested resource.
+ */
+export declare const ResourceMetadata: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    resourceType: ListableResourceType;
+    resourceId: string;
+    overlay: ResourceMetadataOverlay;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export {};

package/dist/ui/resources/ResourceMetadata/ResourceMetadata.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/resources/ResourceMetadata/ResourceMetadataForm.d.ts

@@ -0,0 +1,14 @@
+import { type UseFormSetError } from 'react-hook-form';
+import { type Metadata } from '@commercelayer/sdk/lib/cjs/resource';
+interface ResourceMetadataFormValues {
+    metadata: Metadata;
+}
+export declare const ResourceMetadataForm: import('../../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
+    defaultValues: ResourceMetadataFormValues;
+    onSubmit: (formValues: ResourceMetadataFormValues, setError: UseFormSetError<ResourceMetadataFormValues>) => void;
+    isSubmitting: boolean;
+    apiError?: any;
+    delayMs?: number | undefined;
+    isLoading?: boolean | undefined;
+}>;
+export {};

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

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

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

@@ -1,10 +1,22 @@
 import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
 type TaggableResource = Extract<ListableResourceType, 'addresses' | 'bundles' | 'customers' | 'coupons' | 'gift_cards' | 'line_items' | 'orders' | 'returns' | 'sku_options' | 'skus'>;
 interface TagsOverlay {
+    /**
+     * Title shown as first line in edit overlay heading
+     */
     title: string;
+    /**
+     * Optional description shown as second line in edit overlay heading
+     */
     description?: string;
+    /**
+     * Optional setting to define if tags app management link is to be shown in edit overlay heading
+     */
     showManageAction?: boolean;
 }
+/**
+ * This component generates an all-in-one visualization and editing interface for managing tags relationship of requested resource.
+ */
 export declare const ResourceTags: import('../atoms/SkeletonTemplate').SkeletonTemplateComponent<{
     resourceType: TaggableResource;
     resourceId: string;

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

@@ -1,9 +1,9 @@
 import { type InputCurrencyRangeProps } from '../../forms/InputCurrencyRange';
 import { type InputResourceGroupProps } from '../../forms/InputResourceGroup';
-export declare const filtrableTimeRangePreset: readonly ["today", "last7days", "last30days", "custom"];
+export declare const filterableTimeRangePreset: readonly ["today", "last7days", "last30days", "custom"];
 export type UiFilterName = string;
 export type UiFilterValue = string | string[] | boolean | Date | undefined;
-export type TimeRangePreset = (typeof filtrableTimeRangePreset)[number];
+export type TimeRangePreset = (typeof filterableTimeRangePreset)[number];
 export interface TimeRangeFormValues {
     timePreset?: TimeRangePreset | null;
     timeFrom?: Date | null;

package/dist/utils/array.d.ts

@@ -0,0 +1,10 @@
+type Invalid<T> = Error & {
+    __errorMessage: T;
+};
+type AsUniqueArray<A extends readonly any[], B extends readonly any[]> = {
+    [I in keyof A]: unknown extends {
+        [J in keyof B]: J extends I ? never : B[J] extends A[I] ? unknown : never;
+    }[number] ? Invalid<[A[I], 'is repeated']> : A[I];
+};
+export declare const asUniqueArray: <N extends string, A extends [] | (readonly N[] & AsUniqueArray<A, A>)>(a: A) => A;
+export {};

package/dist/utils/text.d.ts

@@ -1,9 +1,12 @@
 import type { JsonPrimitive } from 'type-fest';
 /**
  * Given a `text` and a list of `values` it returns always the same value given the same `text`.
- * For example this is used when you need to map a fullname with a color.
+ * For example this is used when you need to map a full name with a color.
+ * ```
+ * getDeterministicValue('Doe', ['#FFFFFF', '#000000']) // => '#FFFFFF'
+ * ```
  */
-export declare function getDeterministicValue(text: string, values: readonly [string, ...string[]]): string;
+export declare function getDeterministicValue(text: string, values: readonly string[]): string | undefined;
 /**
  * Get initials given a text.
  * @example getInitials('Ringo Starr') -> 'RS'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "type": "module",
   "license": "MIT",
   "files": [
@@ -21,6 +21,7 @@
     "pnpm": ">=7"
   },
   "dependencies": {
+    "@ac-dev/countries-service": "^1.2.0",
     "@commercelayer/sdk": "5.13.2",
     "@types/lodash": "^4.14.198",
     "@types/react": "^18.2.21",