@commercelayer/app-elements 0.0.78 → 0.0.80

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

@@ -0,0 +1,130 @@
+import { type InputCurrencyRangeProps } from '../../forms/InputCurrencyRange';
+import { type RelationshipSelectorProps } from '../../resources/RelationshipSelector';
+export declare const filtrableTimeRangePreset: readonly ["today", "last7days", "last30days", "custom"];
+export type UiFilterName = string;
+export type UiFilterValue = string | string[] | boolean | Date | undefined;
+export type TimeRangePreset = (typeof filtrableTimeRangePreset)[number];
+export interface TimeRangeFormValues {
+    timePreset?: TimeRangePreset | null;
+    timeFrom?: Date | null;
+    timeTo?: Date | null;
+}
+type CurrencyRangeSdkPredicate = string;
+export interface CurrencyRangeFieldValue {
+    from?: number | null;
+    to?: number | null;
+    currencyCode?: string | null;
+}
+export type CurrencyRangeFormValues = Record<CurrencyRangeSdkPredicate, CurrencyRangeFieldValue>;
+export interface PageInfoFormValues {
+    viewTitle?: string;
+}
+export type FormFullValues = Record<UiFilterName, UiFilterValue | CurrencyRangeFieldValue> & TimeRangeFormValues & PageInfoFormValues;
+export interface BaseFilterItem {
+    /**
+     * Label of the filter field in form component
+     */
+    label: string;
+    /**
+     * Flag to hide the filter field in form component
+     */
+    hidden?: boolean;
+    /**
+     * Instruction to use this item to build the sdk query
+     */
+    sdk: {
+        /**
+         * SDK predicate to use in the query (example: `status_in` or `name_cont`)
+         */
+        predicate: string;
+        /**
+         * Set the default options to use in the query when this filter is not selected.
+         * Example, you have no `status_in` selected in UI, but if this option is `['placed', 'approved']`, the query will always contain
+         * a `status_in` predicate with `placed` and `approved` statuses. This helps to avoid getting status we never want to see (eg: 'draft')
+         */
+        defaultOptions?: string[];
+        /**
+         * Custom function to transform the form value to the SDK value
+         */
+        parseFormValue?: (value: unknown) => string | number | boolean | undefined;
+    };
+}
+export type FilterItemOptions = BaseFilterItem & {
+    type: 'options';
+    render: {
+        /**
+         * UI component to render
+         */
+        component: 'toggleButtons';
+        /**
+         * props required for the UI component
+         */
+        props: {
+            mode: 'multi' | 'single';
+            /**
+             * an option can be hidden from the UI but still be used in the query
+             * Example: we wont show the button to filter `pending` status in the UI, but we still want to accept it for a predefined list)
+             */
+            options: Array<{
+                label: string;
+                value: string;
+                isHidden?: boolean;
+            }>;
+        };
+    } | {
+        /**
+         * UI component to render
+         */
+        component: 'relationshipSelector';
+        /**
+         * props required for the UI component
+         */
+        props: Omit<RelationshipSelectorProps, 'onChange' | 'defaultValues' | 'title'>;
+    };
+};
+export interface FilterItemTextSearch extends Omit<BaseFilterItem, 'sdk'> {
+    type: 'textSearch';
+    render: {
+        /**
+         * UI component to render
+         */
+        component: 'searchBar';
+    };
+    sdk: Pick<BaseFilterItem['sdk'], 'predicate'>;
+}
+export interface FilterItemTime extends Omit<BaseFilterItem, 'sdk'> {
+    type: 'timeRange';
+    sdk: {
+        /**
+         * SDK predicate to use in the query (example: `updated_at` or `updated_at`).
+         * Don't use `_gteq` or `_lteq` suffixes, they will be generated by the filter method based on the following key
+         * Example given the key `updated_at`, the generated predicate will be `updated_at_gteq` or `updated_at_lteq` depending on the preset
+         */
+        predicate: string;
+    };
+    render: {
+        component: 'dateRangePicker';
+    };
+}
+export interface FilterItemCurrencyRange extends Omit<BaseFilterItem, 'sdk'> {
+    type: 'currencyRange';
+    sdk: {
+        /**
+         * SDK predicate to use in the query (example: `total_amount_cents` or `subtotal_amount_cents`).
+         * Don't use `_gteq` or `_lteq` suffixes, they will be generated by the filter method based on the following key
+         * Example given the key `total_amount_cents`, the generated predicate will be `total_amount_cents_gteq` or `total_amount_cents_lteq`
+         * It will also add the `currency_code_eq` predicate
+         */
+        predicate: string;
+    };
+    render: {
+        component: 'inputCurrencyRange';
+        props: Omit<InputCurrencyRangeProps, 'onChange' | 'fromCents' | 'toCents' | 'defaultCurrency' | 'currencyList'>;
+    };
+}
+export type FiltersInstructionItem = FilterItemOptions | FilterItemTextSearch | FilterItemTime | FilterItemCurrencyRange;
+export type FiltersInstructions = FiltersInstructionItem[];
+export declare function isItemOptions(item: FiltersInstructionItem): item is FilterItemOptions;
+export declare function isTextSearch(item: FiltersInstructionItem): item is FilterItemTextSearch;
+export declare function isCurrencyRange(item: FiltersInstructionItem): item is FilterItemCurrencyRange;
+export {};

package/dist/ui/resources/Filters/useFilters.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { type ResourceListProps } from '../../resources/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 {
+    /**
+     * Array of instruction items to build the filters behaviors
+     */
+    instructions: FiltersInstructions;
+}
+interface UseFiltersHook {
+    /**
+     * Helper methods to transform filters from/to url query string, sdk and form values
+     */
+    adapters: ReturnType<typeof makeFilterAdapters>;
+    /**
+     * Search bar component with filters navigation buttons
+     */
+    SearchWithNav: (props: Pick<FiltersNavProps, 'onFilterClick' | 'queryString'> & {
+        /**
+         * Callback triggered when user interact with search bar or remove a filter from the buttons
+         */
+        onUpdate: (newQueryString: string) => void;
+        hideSearchBar?: boolean;
+        hideFiltersNav?: boolean;
+        /**
+         * Placeholder text for the search bar
+         * @default 'Search...'
+         */
+        searchBarPlaceholder?: string;
+    }) => JSX.Element;
+    /**
+     * Form component with filters fields based on provided instructions
+     */
+    FiltersForm: (props: Pick<FiltersFormProps, 'onSubmit'>) => JSX.Element;
+    /**
+     * Filtered ResourceList component based on current active filters
+     */
+    FilteredList: <TResource extends ListableResourceType>(props: Pick<ResourceListProps<TResource>, 'Item' | 'type' | 'query' | 'emptyState' | 'actionButton'>) => JSX.Element;
+    /**
+     * SDK filters object to be used in the sdk query
+     */
+    sdkFilters: QueryFilter | undefined;
+    /**
+     * Returns `true` if there is at least one filter activated by the user.
+     * This does not include the text filter or presets, but only ones manually set by the user.
+     */
+    hasActiveFilter: boolean;
+    /**
+     * view title to be used in the page
+     */
+    viewTitle?: string;
+}
+export declare function useFilters({ instructions }: UseFiltersProps): UseFiltersHook;
+export {};

package/dist/ui/resources/Filters/utils.d.ts

@@ -0,0 +1,29 @@
+import { type FilterItemOptions, type FiltersInstructions } from './types';
+/**
+ * Show the filter label with the counter for selected options
+ * or just the total of available options when nothing is selected
+ * @param options
+ * @returns string
+ *
+ * @example
+ * "Markets · 2 of 4"
+ * "Markets · 4"
+ */
+export declare function computeFilterLabel({ label, totalCount, selectedCount }: {
+    label: string;
+    totalCount: number;
+    selectedCount: number;
+}): string;
+/**
+ * Get total count of active filter groups from URL query string.
+ * @param includeTextSearch if `true` will count `text` filter as active filter group
+ * @returns number of active filters
+ * Example: if we have 3 markets selected, will still count as `1` active filter group
+ * If we have 3 markets and 1 status selected, will count as `2`.
+ */
+export declare function getActiveFilterCountFromUrl({ includeTextSearch, instructions, queryString }: {
+    includeTextSearch?: boolean;
+    instructions: FiltersInstructions;
+    queryString: string;
+}): number;
+export declare function getAllowedValuesFromItemOptions(instructionItem: FilterItemOptions): string[] | undefined;

package/dist/ui/resources/Filters/utils.test.d.ts

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

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

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

package/dist/ui/resources/RelationshipSelector/Checkbox.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type InputCheckboxProps } from '../../forms/InputCheckbox';
 import { type CommerceLayerClient } from '@commercelayer/sdk';
 import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';

package/dist/ui/resources/RelationshipSelector/FullList.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type ListableResourceType } from '@commercelayer/sdk/lib/cjs/api';
 export interface SortBy {
     attribute: string;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
 import { type FullListProps } from './FullList';
 export interface RelationshipSelectorProps extends Omit<FullListProps, 'totalCount'> {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare function computeTitleWithTotalCount({ title, recordCount, locale }: {
     title?: React.ReactNode;
     recordCount?: number;

package/dist/ui/tables/TableData.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface TableDataProps {
     data: Array<Record<string, string | Record<string, unknown>>>;
     className?: string;

package/dist/{unsupportedIterableToArray-1a2db0a9.js → unsupportedIterableToArray-0f93b40f.js}

@@ -1,4 +1,4 @@
-import { _ as i } from "./main-740e7f02.js";
+import { _ as i } from "./main-dd440dc6.js";
 function p(e, t) {
   if (i(e) !== "object" || e === null)
     return e;

package/dist/utils/htmltags.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare function enforceAllowedTags<AllowedTags extends ReadonlyArray<keyof JSX.IntrinsicElements>, Tag extends AllowedTags[number], DefaultTag extends AllowedTags[number]>({ tag, allowedTags, defaultTag }: {
     tag?: Tag;
     allowedTags: AllowedTags;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commercelayer/app-elements",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "type": "module",
   "files": [
     "dist"
@@ -28,10 +28,12 @@
     "classnames": "^2.3.2",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
+    "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-currency-input-field": "^3.6.11",
     "react-datepicker": "^4.16.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.45.2",
     "react-select": "^5.7.4",
     "swr": "^2.2.0",
     "ts-invariant": "^0.10.3",
@@ -40,6 +42,7 @@
   },
   "devDependencies": {
     "@commercelayer/eslint-config-ts-react": "^1.0.1",
+    "@hookform/resolvers": "^3.1.1",
     "@phosphor-icons/react": "v2.0.10",
     "@tailwindcss/forms": "^0.5.4",
     "@testing-library/jest-dom": "^5.17.0",
@@ -65,6 +68,10 @@
   },
   "peerDependencies": {
     "@commercelayer/sdk": "^5.x",
+    "query-string": "^8.1.x",
+    "react": "^18.2.x",
+    "react-dom": "^18.2.x",
+    "react-hook-form": "^7.43.x",
     "wouter": "^2.x"
   },
   "scripts": {

package/dist/hooks/useOverlayNavigation.d.ts

@@ -1,26 +0,0 @@
-import { type OverlayProps } from '../ui/atoms/Overlay';
-interface OverlayNavigationOptions {
-    /**
-     * The query param to be used to control the overlay visibility.
-     **/
-    queryParam: string;
-}
-interface OverlayNavigation {
-    /**
-     * The overlay component.
-     **/
-    Overlay: React.FC<OverlayProps>;
-    /**
-     * Function to be used to open the overlay.
-     * It will add the query param to the URL.
-     * @param replaceHistory If true, the query param will be added without creating a new history entry.
-     **/
-    open: (replaceHistory?: boolean) => void;
-    /**
-     * Function to be used to close the overlay.
-     * It's a simple history.back() call.
-     **/
-    close: () => void;
-}
-export declare function useOverlayNavigation({ queryParam }: OverlayNavigationOptions): OverlayNavigation;
-export {};

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

@@ -1,20 +0,0 @@
-import React from 'react';
-export interface OverlayProps {
-    /**
-     * The content of the overlay.
-     **/
-    children: React.ReactNode;
-    /**
-     * The action button to be rendered at the bottom of the overlay.
-     * If set to 'none', no button will be rendered.
-     * If set to an object, the button will be rendered with the label and the onClick handler.
-     * @default 'none'
-     **/
-    button?: 'none' | {
-        onClick: () => void;
-        label: string;
-        disabled?: boolean;
-    };
-}
-declare const Overlay: React.FC<OverlayProps>;
-export { Overlay };