@commercelayer/app-elements 0.0.78 → 0.0.79

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type HintProps } from '../atoms/Hint';
 import { type InputFeedbackProps } from '../forms/InputFeedback';
 export interface InputWrapperBaseProps {

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type FilterItemCurrencyRange } from './types';
+interface FieldCurrencyRangeProps {
+    item: FilterItemCurrencyRange;
+}
+export declare function FieldCurrencyRange({ item }: FieldCurrencyRangeProps): JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type FilterItemOptions, type FilterItemTextSearch } from './types';
+interface FieldProps {
+    item: FilterItemOptions | FilterItemTextSearch;
+}
+export declare function FieldItem({ item }: FieldProps): JSX.Element | null;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type FilterItemTime } from './types';
+interface FieldTimeRangeProps {
+    item: FilterItemTime;
+}
+export declare function FieldTimeRange({ item }: FieldTimeRangeProps): JSX.Element;
+export {};

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { FiltersInstructions } from './types';
+export interface FiltersFormProps {
+    /**
+     * Array of instruction items to build the filters behaviors
+     */
+    instructions: FiltersInstructions;
+    /**
+     * New queryString generated on submit to be used to navigate to the listing page
+     */
+    onSubmit: (queryString: string) => void;
+}
+declare function FiltersForm({ instructions, onSubmit }: FiltersFormProps): JSX.Element;
+declare namespace FiltersForm {
+    var displayName: string;
+}
+export { FiltersForm };

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

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { type FiltersInstructions } from './types';
+export interface FiltersNavProps {
+    /**
+     * Array of instruction items to build the filters behaviors
+     */
+    instructions: FiltersInstructions;
+    /**
+     * Url query string to be parsed.
+     * It must be "reactive", so most of the time it should come for router.
+     */
+    queryString: string;
+    /**
+     * Callback function triggered when user interacts with the filters buttons.
+     * Implemented function should update the url query string / search params,
+     * based on the new queryString received as argument.
+     */
+    onUpdate: (newQueryString: string) => void;
+    /**
+     * Callback function triggered when user clicks on the "Edit filters" button.
+     * Implemented function should open the filters form.
+     */
+    onFilterClick: (queryString: string, filterPredicate?: string) => void;
+}
+export declare function FiltersNav({ instructions, onFilterClick: onBtnLabelClick, onUpdate, queryString }: FiltersNavProps): JSX.Element;

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

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { type FiltersInstructions } from './types';
+export interface FilterSearchBarProps {
+    /**
+     * Array of instruction items to build the filters behaviors
+     */
+    instructions: FiltersInstructions;
+    /**
+     * Callback function triggered when user interacts with the search input.
+     * Implemented function should update the url query string / search params,
+     * based on the new queryString received as argument.
+     */
+    onUpdate: (queryString: string) => void;
+    /**
+     * Url query string to be parsed.
+     * It must be "reactive", so most of the time it should come for router.
+     */
+    queryString: string;
+    /**
+     * Input placeholder
+     */
+    placeholder?: string;
+}
+declare function FiltersSearchBar({ instructions, placeholder, onUpdate, queryString }: FilterSearchBarProps): JSX.Element;
+declare namespace FiltersSearchBar {
+    var displayName: string;
+}
+export { FiltersSearchBar };

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

@@ -0,0 +1,19 @@
+import { type QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
+import { type CurrencyRangeFieldValue, type FiltersInstructions, type UiFilterName, type UiFilterValue } from './types';
+export interface AdaptFormValuesToSdkParams<FilterFormValues> {
+    formValues: FilterFormValues;
+    timezone?: string;
+    instructions: FiltersInstructions;
+}
+/**
+ * Covert FilterFormValues in SDK filter object
+ * @param formValues a valid FilterFormValues object
+ * @returns an object of type QueryFilter to be used in the SDK stripping out empty or undefined values
+ */
+export declare function adaptFormValuesToSdk<FilterFormValues extends Record<UiFilterName, UiFilterValue | CurrencyRangeFieldValue>>({ formValues, instructions, timezone }: AdaptFormValuesToSdkParams<FilterFormValues>): QueryFilter;
+export declare function extractEnforcedValues(instructions: FiltersInstructions): QueryFilter;
+/**
+ * Be sure to have all the default values
+ * to prevent listing draft or pending orders
+ */
+export declare function enforceDefaultFiltersWhenEmpty(filters: QueryFilter, enforcedValues: QueryFilter): QueryFilter;

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

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

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

@@ -0,0 +1,11 @@
+import { type FiltersInstructions, type FormFullValues } from './types';
+export interface AdaptFormValuesToUrlQueryParams<FilterFormValues extends FormFullValues> {
+    formValues: FilterFormValues;
+    instructions: FiltersInstructions;
+}
+/**
+ * Covert FilterFormValues in url query string
+ * @param formValues a valid FilterFormValues object
+ * @returns a string ready to be used in URL
+ */
+export declare function adaptFormValuesToUrlQuery<FilterFormValues extends FormFullValues>({ formValues, instructions }: AdaptFormValuesToUrlQueryParams<FilterFormValues>): string;

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

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

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

@@ -0,0 +1,11 @@
+import { type FiltersInstructions, type FormFullValues, type UiFilterName, type UiFilterValue } from './types';
+export interface AdaptUrlQueryToFormValuesParams {
+    queryString: string;
+    instructions: FiltersInstructions;
+}
+/**
+ * Covert query string in filters form values
+ * @param qs url query string
+ * @returns an object containing FilterFormValues
+ */
+export declare function adaptUrlQueryToFormValues<FilterFormValues extends Record<UiFilterName, UiFilterValue>>({ queryString, instructions }: AdaptUrlQueryToFormValuesParams): FilterFormValues & FormFullValues;

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

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

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

@@ -0,0 +1,14 @@
+import { type QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
+import { type FiltersInstructions } from './types';
+export interface AdaptUrlQueryToSdkParams {
+    queryString: string;
+    instructions: FiltersInstructions;
+    timezone?: string;
+}
+/**
+ * Covert URL query string in SDK filter object
+ * @param qs url query string
+ * @returns an object of type QueryFilter to be used in the SDK
+ * stripping out empty or undefined values and enforcing default status_in when empty
+ */
+export declare function adaptUrlQueryToSdk({ queryString, instructions, timezone }: AdaptUrlQueryToSdkParams): QueryFilter;

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

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

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

@@ -0,0 +1,11 @@
+import { type FiltersInstructions } from './types';
+export interface AdaptUrlQueryToUrlQueryParams {
+    queryString: string;
+    instructions: FiltersInstructions;
+}
+/**
+ * Parse current URL query string to return a new query string that contains only valid form values
+ * @param qs url query string
+ * @returns an object of type QueryFilter to be used in the SDK stripping out empty or undefined values
+ */
+export declare function adaptUrlQueryToUrlQuery({ queryString, instructions }: AdaptUrlQueryToUrlQueryParams): string;

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

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

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

@@ -0,0 +1,2 @@
+import type { MakeFiltersAdapters } from './adapters.types';
+export declare const makeFilterAdapters: MakeFiltersAdapters;

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

@@ -0,0 +1,20 @@
+import { type QueryFilter } from '@commercelayer/sdk/lib/cjs/query';
+import { type AdaptFormValuesToSdkParams } from './adaptFormValuesToSdk';
+import { type AdaptFormValuesToUrlQueryParams } from './adaptFormValuesToUrlQuery';
+import { type AdaptUrlQueryToFormValuesParams } from './adaptUrlQueryToFormValues';
+import { type AdaptUrlQueryToSdkParams } from './adaptUrlQueryToSdk';
+import { type AdaptUrlQueryToUrlQueryParams } from './adaptUrlQueryToUrlQuery';
+import { type FiltersInstructions, type FormFullValues, type PageInfoFormValues, type TimeRangeFormValues, type UiFilterName, type UiFilterValue } from './types';
+interface MakeFilterAdaptersParams {
+    instructions: FiltersInstructions;
+}
+interface MakeFilterAdaptersReturn<FilterFormValues extends FormFullValues> {
+    adaptFormValuesToUrlQuery: (params: Pick<AdaptFormValuesToUrlQueryParams<FormFullValues>, 'formValues'>) => string;
+    adaptFormValuesToSdk: (params: Pick<AdaptFormValuesToSdkParams<FilterFormValues>, 'formValues' | 'timezone'>) => QueryFilter;
+    adaptUrlQueryToFormValues: (params: Pick<AdaptUrlQueryToFormValuesParams, 'queryString'>) => FilterFormValues & TimeRangeFormValues & PageInfoFormValues;
+    adaptUrlQueryToSdk: (params: Pick<AdaptUrlQueryToSdkParams, 'queryString' | 'timezone'>) => QueryFilter;
+    adaptUrlQueryToUrlQuery: (params: Pick<AdaptUrlQueryToUrlQueryParams, 'queryString'>) => string;
+    validInstructions: FiltersInstructions;
+}
+export type MakeFiltersAdapters = <FilterFormValues extends Record<UiFilterName, UiFilterValue>>({ instructions }: MakeFilterAdaptersParams) => MakeFilterAdaptersReturn<FilterFormValues>;
+export {};

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

@@ -0,0 +1,5 @@
+export { FiltersForm } from './FiltersForm';
+export { FiltersNav } from './FiltersNav';
+export { FiltersSearchBar } from './FiltersSearchBar';
+export { makeFilterAdapters } from './adapters';
+export { useFilters } from './useFilters';

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

@@ -0,0 +1,2 @@
+import { type FiltersInstructions } from './types';
+export declare const instructions: FiltersInstructions;

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

@@ -0,0 +1,36 @@
+import { z } from 'zod';
+import type { TimeRangeFormValues, TimeRangePreset } from './types';
+interface MakerSdkFilterTimeParams {
+    timePreset?: TimeRangePreset;
+    timeFrom?: Date | null;
+    timeTo?: Date | null;
+    timezone?: string;
+    sdkFilterName?: string;
+}
+export declare const makeSdkFilterTime: ({ timePreset, timeFrom, timeTo, timezone, sdkFilterName }: MakerSdkFilterTimeParams) => Record<string, string | undefined>;
+export declare function getTimeRangeCustomLabel(timeFrom: Date, timeTo: Date, timezone?: string | undefined): string;
+export declare function getTimeRangePresetName(timeRangePreset: TimeRangePreset): string;
+export declare const timeRangeValidationSchema: z.ZodEffects<z.ZodObject<{
+    timeFrom: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timeTo: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timePreset: z.ZodNullable<z.ZodOptional<z.ZodEnum<["today", "last7days", "last30days", "custom"]>>>;
+}, "passthrough", z.ZodTypeAny, z.objectOutputType<{
+    timeFrom: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timeTo: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timePreset: z.ZodNullable<z.ZodOptional<z.ZodEnum<["today", "last7days", "last30days", "custom"]>>>;
+}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+    timeFrom: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timeTo: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timePreset: z.ZodNullable<z.ZodOptional<z.ZodEnum<["today", "last7days", "last30days", "custom"]>>>;
+}, z.ZodTypeAny, "passthrough">>, z.objectOutputType<{
+    timeFrom: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timeTo: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timePreset: z.ZodNullable<z.ZodOptional<z.ZodEnum<["today", "last7days", "last30days", "custom"]>>>;
+}, z.ZodTypeAny, "passthrough">, z.objectInputType<{
+    timeFrom: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timeTo: z.ZodNullable<z.ZodOptional<z.ZodDate>>;
+    timePreset: z.ZodNullable<z.ZodOptional<z.ZodEnum<["today", "last7days", "last30days", "custom"]>>>;
+}, z.ZodTypeAny, "passthrough">>;
+export declare const timeRangeFilterUiNames: Array<keyof TimeRangeFormValues>;
+export declare function isTimeRangeFilterUiName(filterUiName: string): filterUiName is keyof TimeRangeFormValues;
+export {};

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

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

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-a4407b22.js}

@@ -1,4 +1,4 @@
-import { _ as i } from "./main-740e7f02.js";
+import { _ as i } from "./main-bd408fbe.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.79",
   "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": {