@wix/headless-stores 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/astro/actions/package.json +4 -0
- package/cjs/dist/astro/actions/custom-checkout.d.ts +50 -0
- package/cjs/dist/astro/actions/custom-checkout.js +53 -0
- package/cjs/dist/astro/actions/index.d.ts +1 -0
- package/cjs/dist/astro/actions/index.js +1 -0
- package/cjs/dist/data-component-tags.d.ts +8 -0
- package/cjs/dist/data-component-tags.js +9 -0
- package/cjs/dist/enums/index.d.ts +2 -0
- package/cjs/dist/enums/index.js +2 -0
- package/cjs/dist/enums/social-platform-enums.d.ts +25 -0
- package/cjs/dist/enums/social-platform-enums.js +27 -0
- package/cjs/dist/enums/sort-enums.d.ts +17 -0
- package/cjs/dist/enums/sort-enums.js +18 -0
- package/cjs/dist/react/Category.d.ts +242 -0
- package/cjs/dist/react/Category.js +235 -0
- package/cjs/dist/react/CategoryList.d.ts +107 -0
- package/cjs/dist/react/CategoryList.js +91 -0
- package/cjs/dist/react/Choice.d.ts +211 -0
- package/cjs/dist/react/Choice.js +213 -0
- package/cjs/dist/react/Option.d.ts +242 -0
- package/cjs/dist/react/Option.js +346 -0
- package/cjs/dist/react/Product.d.ts +1065 -0
- package/cjs/dist/react/Product.js +1157 -0
- package/cjs/dist/react/ProductList.d.ts +400 -0
- package/cjs/dist/react/ProductList.js +368 -0
- package/cjs/dist/react/core/CategoryList.d.ts +194 -0
- package/cjs/dist/react/core/CategoryList.js +180 -0
- package/cjs/dist/react/core/Product.d.ts +225 -0
- package/cjs/dist/react/core/Product.js +190 -0
- package/cjs/dist/react/core/ProductList.d.ts +235 -0
- package/cjs/dist/react/core/ProductList.js +217 -0
- package/cjs/dist/react/core/ProductListFilters.d.ts +138 -0
- package/cjs/dist/react/core/ProductListFilters.js +242 -0
- package/cjs/dist/react/core/ProductListPagination.d.ts +49 -0
- package/cjs/dist/react/core/ProductListPagination.js +41 -0
- package/cjs/dist/react/core/ProductListSort.d.ts +19 -0
- package/cjs/dist/react/core/ProductListSort.js +52 -0
- package/cjs/dist/react/core/ProductModifiers.d.ts +416 -0
- package/cjs/dist/react/core/ProductModifiers.js +413 -0
- package/cjs/dist/react/core/ProductVariantSelector.d.ts +313 -0
- package/cjs/dist/react/core/ProductVariantSelector.js +291 -0
- package/cjs/dist/react/core/SelectedVariant.d.ts +230 -0
- package/cjs/dist/react/core/SelectedVariant.js +269 -0
- package/cjs/dist/react/index.d.ts +6 -0
- package/cjs/dist/react/index.js +6 -0
- package/cjs/dist/react/types.d.ts +8 -0
- package/cjs/dist/react/types.js +9 -0
- package/cjs/dist/server-actions/custom-checkout-action.d.ts +49 -0
- package/cjs/dist/server-actions/custom-checkout-action.js +64 -0
- package/cjs/dist/server-actions/index.d.ts +1 -0
- package/cjs/dist/server-actions/index.js +1 -0
- package/cjs/dist/services/buy-now-service.d.ts +346 -0
- package/cjs/dist/services/buy-now-service.js +197 -0
- package/cjs/dist/services/categories-list-service.d.ts +164 -0
- package/cjs/dist/services/categories-list-service.js +148 -0
- package/cjs/dist/services/index.d.ts +5 -0
- package/cjs/dist/services/index.js +5 -0
- package/cjs/dist/services/pay-now-service.d.ts +214 -0
- package/cjs/dist/services/pay-now-service.js +156 -0
- package/cjs/dist/services/product-modifiers-service.d.ts +34 -0
- package/cjs/dist/services/product-modifiers-service.js +107 -0
- package/cjs/dist/services/product-service.d.ts +177 -0
- package/cjs/dist/services/product-service.js +190 -0
- package/cjs/dist/services/products-list-search-service.d.ts +1 -0
- package/cjs/dist/services/products-list-search-service.js +1 -0
- package/cjs/dist/services/products-list-service.d.ts +429 -0
- package/cjs/dist/services/products-list-service.js +893 -0
- package/cjs/dist/services/selected-variant-service.d.ts +66 -0
- package/cjs/dist/services/selected-variant-service.js +527 -0
- package/cjs/dist/utils/index.d.ts +1 -0
- package/cjs/dist/utils/index.js +30 -0
- package/cjs/dist/utils/url-params.d.ts +73 -0
- package/cjs/dist/utils/url-params.js +114 -0
- package/cjs/package.json +3 -0
- package/dist/astro/actions/custom-checkout.d.ts +50 -0
- package/dist/astro/actions/custom-checkout.js +53 -0
- package/dist/astro/actions/index.d.ts +1 -0
- package/dist/astro/actions/index.js +1 -0
- package/dist/data-component-tags.d.ts +8 -0
- package/dist/data-component-tags.js +9 -0
- package/dist/enums/index.d.ts +2 -0
- package/dist/enums/index.js +2 -0
- package/dist/enums/social-platform-enums.d.ts +25 -0
- package/dist/enums/social-platform-enums.js +27 -0
- package/dist/enums/sort-enums.d.ts +17 -0
- package/dist/enums/sort-enums.js +18 -0
- package/dist/react/Category.d.ts +242 -0
- package/dist/react/Category.js +235 -0
- package/dist/react/CategoryList.d.ts +107 -0
- package/dist/react/CategoryList.js +91 -0
- package/dist/react/Choice.d.ts +211 -0
- package/dist/react/Choice.js +213 -0
- package/dist/react/Option.d.ts +242 -0
- package/dist/react/Option.js +346 -0
- package/dist/react/Product.d.ts +1065 -0
- package/dist/react/Product.js +1157 -0
- package/dist/react/ProductList.d.ts +400 -0
- package/dist/react/ProductList.js +368 -0
- package/dist/react/core/CategoryList.d.ts +194 -0
- package/dist/react/core/CategoryList.js +180 -0
- package/dist/react/core/Product.d.ts +225 -0
- package/dist/react/core/Product.js +190 -0
- package/dist/react/core/ProductList.d.ts +235 -0
- package/dist/react/core/ProductList.js +217 -0
- package/dist/react/core/ProductListFilters.d.ts +138 -0
- package/dist/react/core/ProductListFilters.js +242 -0
- package/dist/react/core/ProductListPagination.d.ts +49 -0
- package/dist/react/core/ProductListPagination.js +41 -0
- package/dist/react/core/ProductListSort.d.ts +19 -0
- package/dist/react/core/ProductListSort.js +52 -0
- package/dist/react/core/ProductModifiers.d.ts +416 -0
- package/dist/react/core/ProductModifiers.js +413 -0
- package/dist/react/core/ProductVariantSelector.d.ts +313 -0
- package/dist/react/core/ProductVariantSelector.js +291 -0
- package/dist/react/core/SelectedVariant.d.ts +230 -0
- package/dist/react/core/SelectedVariant.js +269 -0
- package/dist/react/index.d.ts +6 -0
- package/dist/react/index.js +6 -0
- package/dist/react/types.d.ts +8 -0
- package/dist/react/types.js +9 -0
- package/dist/server-actions/custom-checkout-action.d.ts +49 -0
- package/dist/server-actions/custom-checkout-action.js +64 -0
- package/dist/server-actions/index.d.ts +1 -0
- package/dist/server-actions/index.js +1 -0
- package/dist/services/buy-now-service.d.ts +346 -0
- package/dist/services/buy-now-service.js +197 -0
- package/dist/services/categories-list-service.d.ts +164 -0
- package/dist/services/categories-list-service.js +148 -0
- package/dist/services/index.d.ts +5 -0
- package/dist/services/index.js +5 -0
- package/dist/services/pay-now-service.d.ts +214 -0
- package/dist/services/pay-now-service.js +156 -0
- package/dist/services/product-modifiers-service.d.ts +34 -0
- package/dist/services/product-modifiers-service.js +107 -0
- package/dist/services/product-service.d.ts +177 -0
- package/dist/services/product-service.js +190 -0
- package/dist/services/products-list-search-service.d.ts +0 -0
- package/dist/services/products-list-search-service.js +1 -0
- package/dist/services/products-list-service.d.ts +429 -0
- package/dist/services/products-list-service.js +893 -0
- package/dist/services/selected-variant-service.d.ts +66 -0
- package/dist/services/selected-variant-service.js +527 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/index.js +30 -0
- package/dist/utils/url-params.d.ts +73 -0
- package/dist/utils/url-params.js +114 -0
- package/package.json +89 -0
- package/react/package.json +4 -0
- package/server-actions/package.json +4 -0
- package/services/package.json +4 -0
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { type CustomLineItemCheckoutOptions } from '../../server-actions/index.js';
|
|
2
|
+
/**
|
|
3
|
+
* Creates an Astro action factory for custom checkout functionality with line items.
|
|
4
|
+
*
|
|
5
|
+
* This factory function generates an Astro action that can be used to create custom
|
|
6
|
+
* checkout URLs with specific line items. It wraps the Wix headless stores server
|
|
7
|
+
* action functionality in an Astro-compatible action format.
|
|
8
|
+
*
|
|
9
|
+
* @param {CustomLineItemCheckoutOptions} factoryOpts - Configuration options for the custom checkout
|
|
10
|
+
* @param {string} factoryOpts.productName - The name of the product for the custom line item
|
|
11
|
+
* @param {string} [factoryOpts.priceDescription] - A description for the price, which will be displayed to the customer
|
|
12
|
+
* @param {Array<{content: string, title: string}>} [factoryOpts.policies] - An array of policies related to this custom item
|
|
13
|
+
* @param {string} [factoryOpts.postFlowUrl] - The URL to redirect the user to after the checkout is successfully completed
|
|
14
|
+
* @param {number} [factoryOpts.quantity=1] - The quantity of the product
|
|
15
|
+
* @param {string} factoryOpts.price - The price of the product
|
|
16
|
+
*
|
|
17
|
+
* @returns {ReturnType<typeof defineAction>} An Astro action that when invoked returns checkout URL
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```typescript
|
|
21
|
+
* // Define the action with your configuration
|
|
22
|
+
* const customCheckoutAction = customCheckoutActionFactory({
|
|
23
|
+
* productName: "Premium Subscription",
|
|
24
|
+
* price: "29.99",
|
|
25
|
+
* priceDescription: "per month",
|
|
26
|
+
* quantity: 1,
|
|
27
|
+
* postFlowUrl: "https://yoursite.com/thank-you",
|
|
28
|
+
* policies: [
|
|
29
|
+
* {
|
|
30
|
+
* title: "Refund Policy",
|
|
31
|
+
* content: "30-day money back guarantee"
|
|
32
|
+
* }
|
|
33
|
+
* ]
|
|
34
|
+
* });
|
|
35
|
+
*
|
|
36
|
+
* export const server = {
|
|
37
|
+
* checkout: customCheckoutAction
|
|
38
|
+
* };
|
|
39
|
+
*
|
|
40
|
+
* // Use in your Astro component or API route
|
|
41
|
+
* import { actions } from "astro:actions";
|
|
42
|
+
* const checkoutUrl = await actions.customCheckoutAction();
|
|
43
|
+
* ```
|
|
44
|
+
*
|
|
45
|
+
* @see {@link https://docs.astro.build/en/guides/actions/} Astro Actions Documentation
|
|
46
|
+
* @see {@link https://dev.wix.com/docs/sdk/headless/api-reference/stores/checkout} Wix Stores Checkout API
|
|
47
|
+
*/
|
|
48
|
+
export declare const customCheckoutActionFactory: (factoryOpts: CustomLineItemCheckoutOptions) => ((input?: any) => Promise<import("astro:actions").SafeResult<never, string>>) & {
|
|
49
|
+
orThrow: (input?: any) => Promise<string>;
|
|
50
|
+
} & string;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
/// <reference types="astro/env" />
|
|
2
|
+
// @ts-ignore
|
|
3
|
+
import { defineAction } from 'astro:actions';
|
|
4
|
+
import { getCustomLineItemCheckoutURLFactory, } from '../../server-actions/index.js';
|
|
5
|
+
/**
|
|
6
|
+
* Creates an Astro action factory for custom checkout functionality with line items.
|
|
7
|
+
*
|
|
8
|
+
* This factory function generates an Astro action that can be used to create custom
|
|
9
|
+
* checkout URLs with specific line items. It wraps the Wix headless stores server
|
|
10
|
+
* action functionality in an Astro-compatible action format.
|
|
11
|
+
*
|
|
12
|
+
* @param {CustomLineItemCheckoutOptions} factoryOpts - Configuration options for the custom checkout
|
|
13
|
+
* @param {string} factoryOpts.productName - The name of the product for the custom line item
|
|
14
|
+
* @param {string} [factoryOpts.priceDescription] - A description for the price, which will be displayed to the customer
|
|
15
|
+
* @param {Array<{content: string, title: string}>} [factoryOpts.policies] - An array of policies related to this custom item
|
|
16
|
+
* @param {string} [factoryOpts.postFlowUrl] - The URL to redirect the user to after the checkout is successfully completed
|
|
17
|
+
* @param {number} [factoryOpts.quantity=1] - The quantity of the product
|
|
18
|
+
* @param {string} factoryOpts.price - The price of the product
|
|
19
|
+
*
|
|
20
|
+
* @returns {ReturnType<typeof defineAction>} An Astro action that when invoked returns checkout URL
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```typescript
|
|
24
|
+
* // Define the action with your configuration
|
|
25
|
+
* const customCheckoutAction = customCheckoutActionFactory({
|
|
26
|
+
* productName: "Premium Subscription",
|
|
27
|
+
* price: "29.99",
|
|
28
|
+
* priceDescription: "per month",
|
|
29
|
+
* quantity: 1,
|
|
30
|
+
* postFlowUrl: "https://yoursite.com/thank-you",
|
|
31
|
+
* policies: [
|
|
32
|
+
* {
|
|
33
|
+
* title: "Refund Policy",
|
|
34
|
+
* content: "30-day money back guarantee"
|
|
35
|
+
* }
|
|
36
|
+
* ]
|
|
37
|
+
* });
|
|
38
|
+
*
|
|
39
|
+
* export const server = {
|
|
40
|
+
* checkout: customCheckoutAction
|
|
41
|
+
* };
|
|
42
|
+
*
|
|
43
|
+
* // Use in your Astro component or API route
|
|
44
|
+
* import { actions } from "astro:actions";
|
|
45
|
+
* const checkoutUrl = await actions.customCheckoutAction();
|
|
46
|
+
* ```
|
|
47
|
+
*
|
|
48
|
+
* @see {@link https://docs.astro.build/en/guides/actions/} Astro Actions Documentation
|
|
49
|
+
* @see {@link https://dev.wix.com/docs/sdk/headless/api-reference/stores/checkout} Wix Stores Checkout API
|
|
50
|
+
*/
|
|
51
|
+
export const customCheckoutActionFactory = (factoryOpts) => defineAction({
|
|
52
|
+
handler: () => getCustomLineItemCheckoutURLFactory(factoryOpts)(),
|
|
53
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './custom-checkout.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './custom-checkout.js';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare enum DataComponentTags {
|
|
2
|
+
categoryListRoot = "stores.category-list-root",
|
|
3
|
+
categoryRoot = "stores.category-root",
|
|
4
|
+
choiceRoot = "stores.choice-root",
|
|
5
|
+
optionRoot = "stores.option-root",
|
|
6
|
+
productListRoot = "stores.product-list-root",
|
|
7
|
+
productRoot = "stores.product-root"
|
|
8
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export var DataComponentTags;
|
|
2
|
+
(function (DataComponentTags) {
|
|
3
|
+
DataComponentTags["categoryListRoot"] = "stores.category-list-root";
|
|
4
|
+
DataComponentTags["categoryRoot"] = "stores.category-root";
|
|
5
|
+
DataComponentTags["choiceRoot"] = "stores.choice-root";
|
|
6
|
+
DataComponentTags["optionRoot"] = "stores.option-root";
|
|
7
|
+
DataComponentTags["productListRoot"] = "stores.product-list-root";
|
|
8
|
+
DataComponentTags["productRoot"] = "stores.product-root";
|
|
9
|
+
})(DataComponentTags || (DataComponentTags = {}));
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Business logic enums for social sharing platforms (headless layer)
|
|
3
|
+
*/
|
|
4
|
+
/**
|
|
5
|
+
* Enum for social sharing platforms (business identifiers)
|
|
6
|
+
*/
|
|
7
|
+
export declare enum SocialPlatform {
|
|
8
|
+
FACEBOOK = "facebook",
|
|
9
|
+
TWITTER = "twitter",
|
|
10
|
+
LINKEDIN = "linkedin",
|
|
11
|
+
WHATSAPP = "whatsapp",
|
|
12
|
+
EMAIL = "email",
|
|
13
|
+
CLIPBOARD = "clipboard",
|
|
14
|
+
NATIVE = "native"
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Enum for social platform share URLs (business logic)
|
|
18
|
+
*/
|
|
19
|
+
export declare enum SocialPlatformShareUrl {
|
|
20
|
+
FACEBOOK = "https://www.facebook.com/sharer/sharer.php",
|
|
21
|
+
TWITTER = "https://twitter.com/intent/tweet",
|
|
22
|
+
LINKEDIN = "https://www.linkedin.com/sharing/share-offsite/",
|
|
23
|
+
WHATSAPP = "https://wa.me/",
|
|
24
|
+
EMAIL = "mailto:"
|
|
25
|
+
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Business logic enums for social sharing platforms (headless layer)
|
|
3
|
+
*/
|
|
4
|
+
/**
|
|
5
|
+
* Enum for social sharing platforms (business identifiers)
|
|
6
|
+
*/
|
|
7
|
+
export var SocialPlatform;
|
|
8
|
+
(function (SocialPlatform) {
|
|
9
|
+
SocialPlatform["FACEBOOK"] = "facebook";
|
|
10
|
+
SocialPlatform["TWITTER"] = "twitter";
|
|
11
|
+
SocialPlatform["LINKEDIN"] = "linkedin";
|
|
12
|
+
SocialPlatform["WHATSAPP"] = "whatsapp";
|
|
13
|
+
SocialPlatform["EMAIL"] = "email";
|
|
14
|
+
SocialPlatform["CLIPBOARD"] = "clipboard";
|
|
15
|
+
SocialPlatform["NATIVE"] = "native";
|
|
16
|
+
})(SocialPlatform || (SocialPlatform = {}));
|
|
17
|
+
/**
|
|
18
|
+
* Enum for social platform share URLs (business logic)
|
|
19
|
+
*/
|
|
20
|
+
export var SocialPlatformShareUrl;
|
|
21
|
+
(function (SocialPlatformShareUrl) {
|
|
22
|
+
SocialPlatformShareUrl["FACEBOOK"] = "https://www.facebook.com/sharer/sharer.php";
|
|
23
|
+
SocialPlatformShareUrl["TWITTER"] = "https://twitter.com/intent/tweet";
|
|
24
|
+
SocialPlatformShareUrl["LINKEDIN"] = "https://www.linkedin.com/sharing/share-offsite/";
|
|
25
|
+
SocialPlatformShareUrl["WHATSAPP"] = "https://wa.me/";
|
|
26
|
+
SocialPlatformShareUrl["EMAIL"] = "mailto:";
|
|
27
|
+
})(SocialPlatformShareUrl || (SocialPlatformShareUrl = {}));
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Enum for sort types used in the store
|
|
3
|
+
* Note: Cannot use SDK SortType as it's for aggregations (COUNT/VALUE)
|
|
4
|
+
* while this enum represents user-facing sort options
|
|
5
|
+
*/
|
|
6
|
+
export declare enum SortType {
|
|
7
|
+
NEWEST = "newest",
|
|
8
|
+
NAME_ASC = "name_asc",
|
|
9
|
+
NAME_DESC = "name_desc",
|
|
10
|
+
PRICE_ASC = "price_asc",
|
|
11
|
+
PRICE_DESC = "price_desc",
|
|
12
|
+
RECOMMENDED = "recommended"
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Default sort type
|
|
16
|
+
*/
|
|
17
|
+
export declare const DEFAULT_SORT_TYPE = SortType.NEWEST;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Enum for sort types used in the store
|
|
3
|
+
* Note: Cannot use SDK SortType as it's for aggregations (COUNT/VALUE)
|
|
4
|
+
* while this enum represents user-facing sort options
|
|
5
|
+
*/
|
|
6
|
+
export var SortType;
|
|
7
|
+
(function (SortType) {
|
|
8
|
+
SortType["NEWEST"] = "newest";
|
|
9
|
+
SortType["NAME_ASC"] = "name_asc";
|
|
10
|
+
SortType["NAME_DESC"] = "name_desc";
|
|
11
|
+
SortType["PRICE_ASC"] = "price_asc";
|
|
12
|
+
SortType["PRICE_DESC"] = "price_desc";
|
|
13
|
+
SortType["RECOMMENDED"] = "recommended";
|
|
14
|
+
})(SortType || (SortType = {}));
|
|
15
|
+
/**
|
|
16
|
+
* Default sort type
|
|
17
|
+
*/
|
|
18
|
+
export const DEFAULT_SORT_TYPE = SortType.NEWEST;
|
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { categories } from '@wix/categories';
|
|
3
|
+
import { AsChildChildren } from '@wix/headless-utils/react';
|
|
4
|
+
export type Category = categories.Category;
|
|
5
|
+
/**
|
|
6
|
+
* Props for Category.Root component
|
|
7
|
+
*/
|
|
8
|
+
export interface CategoryRootProps {
|
|
9
|
+
/** Category data */
|
|
10
|
+
category: Category;
|
|
11
|
+
/** Child components */
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Props for Category.Trigger component
|
|
16
|
+
*/
|
|
17
|
+
export interface CategoryTriggerProps {
|
|
18
|
+
/** Whether to render as a child component */
|
|
19
|
+
asChild?: boolean;
|
|
20
|
+
/** Custom render function when using asChild */
|
|
21
|
+
children?: AsChildChildren<{
|
|
22
|
+
category: Category;
|
|
23
|
+
isSelected: boolean;
|
|
24
|
+
onSelect: () => void;
|
|
25
|
+
setIsSelected: (isSelected: boolean) => void;
|
|
26
|
+
}>;
|
|
27
|
+
/** Callback when category is selected */
|
|
28
|
+
onSelect?: (category: Category) => void;
|
|
29
|
+
/** CSS classes to apply to the default element */
|
|
30
|
+
className?: string;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Props for Category.Label component
|
|
34
|
+
*/
|
|
35
|
+
export interface CategoryLabelProps {
|
|
36
|
+
/** Whether to render as a child component */
|
|
37
|
+
asChild?: boolean;
|
|
38
|
+
/** Custom render function when using asChild */
|
|
39
|
+
children?: AsChildChildren<{
|
|
40
|
+
name: string;
|
|
41
|
+
category: Category;
|
|
42
|
+
}>;
|
|
43
|
+
/** CSS classes to apply to the default element */
|
|
44
|
+
className?: string;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Props for Category.ID component
|
|
48
|
+
*/
|
|
49
|
+
export interface CategoryIDProps {
|
|
50
|
+
/** Whether to render as a child component */
|
|
51
|
+
asChild?: boolean;
|
|
52
|
+
/** Custom render function when using asChild */
|
|
53
|
+
children?: AsChildChildren<{
|
|
54
|
+
id: string;
|
|
55
|
+
category: Category;
|
|
56
|
+
}>;
|
|
57
|
+
/** CSS classes to apply to the default element */
|
|
58
|
+
className?: string;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Props for Category.Raw component
|
|
62
|
+
*/
|
|
63
|
+
export interface CategoryRawProps {
|
|
64
|
+
/** Whether to render as a child component */
|
|
65
|
+
asChild?: boolean;
|
|
66
|
+
/** Custom render function when using asChild */
|
|
67
|
+
children?: AsChildChildren<{
|
|
68
|
+
category: Category;
|
|
69
|
+
isSelected: boolean;
|
|
70
|
+
}>;
|
|
71
|
+
/** CSS classes to apply to the default element */
|
|
72
|
+
className?: string;
|
|
73
|
+
}
|
|
74
|
+
/**
|
|
75
|
+
* Props for CategoryFilter component
|
|
76
|
+
*/
|
|
77
|
+
export interface CategoryFilterProps {
|
|
78
|
+
/** Whether to render as a child component */
|
|
79
|
+
asChild?: boolean;
|
|
80
|
+
/** Custom render function when using asChild */
|
|
81
|
+
children?: AsChildChildren<{
|
|
82
|
+
selectedCategory: Category | null;
|
|
83
|
+
setSelectedCategory: (category: Category | null) => void;
|
|
84
|
+
}>;
|
|
85
|
+
/** CSS classes to apply to the default element */
|
|
86
|
+
className?: string;
|
|
87
|
+
/** Label for the selected category display */
|
|
88
|
+
label?: string;
|
|
89
|
+
}
|
|
90
|
+
/**
|
|
91
|
+
* Root container for a single category item.
|
|
92
|
+
* This component sets up the necessary services for managing category state
|
|
93
|
+
* and provides category context to child components.
|
|
94
|
+
*
|
|
95
|
+
* @order 1
|
|
96
|
+
* @component
|
|
97
|
+
* @example
|
|
98
|
+
* ```tsx
|
|
99
|
+
* import { Category } from '@wix/headless-stores/react';
|
|
100
|
+
*
|
|
101
|
+
* <Category.Root category={category}>
|
|
102
|
+
* <Category.Trigger />
|
|
103
|
+
* <Category.Label />
|
|
104
|
+
* <Category.ID />
|
|
105
|
+
* </Category.Root>
|
|
106
|
+
* ```
|
|
107
|
+
*/
|
|
108
|
+
export declare const Root: React.ForwardRefExoticComponent<CategoryRootProps & React.RefAttributes<HTMLElement>>;
|
|
109
|
+
/**
|
|
110
|
+
* Interactive element for selecting or triggering category actions.
|
|
111
|
+
* Provides category data and selection state to custom render functions.
|
|
112
|
+
*
|
|
113
|
+
* @component
|
|
114
|
+
* @example
|
|
115
|
+
* ```tsx
|
|
116
|
+
* // Default usage
|
|
117
|
+
* <Category.Trigger className="px-4 py-2 rounded border hover:bg-surface-hover" />
|
|
118
|
+
*
|
|
119
|
+
* // Custom rendering with forwardRef
|
|
120
|
+
* <Category.Trigger asChild>
|
|
121
|
+
* {React.forwardRef(({category, isSelected, onSelect, ...props}, ref) => (
|
|
122
|
+
* <button
|
|
123
|
+
* ref={ref}
|
|
124
|
+
* {...props}
|
|
125
|
+
* onClick={onSelect}
|
|
126
|
+
* className={`px-4 py-2 rounded transition-colors ${
|
|
127
|
+
* isSelected
|
|
128
|
+
* ? 'bg-brand-primary text-white'
|
|
129
|
+
* : 'border border-surface-subtle hover:bg-surface-hover'
|
|
130
|
+
* }`}
|
|
131
|
+
* >
|
|
132
|
+
* {category.name}
|
|
133
|
+
* </button>
|
|
134
|
+
* ))}
|
|
135
|
+
* </Category.Trigger>
|
|
136
|
+
* ```
|
|
137
|
+
*/
|
|
138
|
+
export declare const Trigger: React.ForwardRefExoticComponent<CategoryTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
139
|
+
/**
|
|
140
|
+
* Displays the category name or label.
|
|
141
|
+
* Provides category name and full category data to custom render functions.
|
|
142
|
+
*
|
|
143
|
+
* @component
|
|
144
|
+
* @example
|
|
145
|
+
* ```tsx
|
|
146
|
+
* // Default usage
|
|
147
|
+
* <Category.Label className="text-lg font-medium text-content-primary" />
|
|
148
|
+
*
|
|
149
|
+
* // Custom rendering with forwardRef
|
|
150
|
+
* <Category.Label asChild>
|
|
151
|
+
* {React.forwardRef(({name, category, ...props}, ref) => (
|
|
152
|
+
* <span ref={ref} {...props} className="text-lg font-medium text-content-primary">
|
|
153
|
+
* {name}
|
|
154
|
+
* {category.numberOfProducts > 0 && (
|
|
155
|
+
* <span className="text-sm text-content-muted ml-2">
|
|
156
|
+
* ({category.numberOfProducts})
|
|
157
|
+
* </span>
|
|
158
|
+
* )}
|
|
159
|
+
* </span>
|
|
160
|
+
* ))}
|
|
161
|
+
* </Category.Label>
|
|
162
|
+
* ```
|
|
163
|
+
*/
|
|
164
|
+
export declare const Label: React.ForwardRefExoticComponent<CategoryLabelProps & React.RefAttributes<HTMLElement>>;
|
|
165
|
+
/**
|
|
166
|
+
* Provides access to the category ID for advanced use cases.
|
|
167
|
+
* Typically used for tracking, analytics, or hidden form fields.
|
|
168
|
+
*
|
|
169
|
+
* @component
|
|
170
|
+
* @example
|
|
171
|
+
* ```tsx
|
|
172
|
+
* // Default usage (hidden by default)
|
|
173
|
+
* <Category.ID className="hidden" />
|
|
174
|
+
*
|
|
175
|
+
* // Custom rendering with forwardRef
|
|
176
|
+
* <Category.ID asChild>
|
|
177
|
+
* {React.forwardRef(({id, category, ...props}, ref) => (
|
|
178
|
+
* <span
|
|
179
|
+
* ref={ref}
|
|
180
|
+
* {...props}
|
|
181
|
+
* data-category-id={id}
|
|
182
|
+
* className="sr-only"
|
|
183
|
+
* >
|
|
184
|
+
* Category ID: {id}
|
|
185
|
+
* </span>
|
|
186
|
+
* ))}
|
|
187
|
+
* </Category.ID>
|
|
188
|
+
* ```
|
|
189
|
+
*/
|
|
190
|
+
export declare const ID: React.ForwardRefExoticComponent<CategoryIDProps & React.RefAttributes<HTMLElement>>;
|
|
191
|
+
/**
|
|
192
|
+
* Provides access to the full category data for advanced use cases.
|
|
193
|
+
* Useful for custom implementations that need access to all category properties.
|
|
194
|
+
*
|
|
195
|
+
* @component
|
|
196
|
+
* @example
|
|
197
|
+
* ```tsx
|
|
198
|
+
* // Custom rendering with forwardRef
|
|
199
|
+
* <Category.Raw asChild>
|
|
200
|
+
* {React.forwardRef(({category, ...props}, ref) => (
|
|
201
|
+
* <div
|
|
202
|
+
* ref={ref}
|
|
203
|
+
* {...props}
|
|
204
|
+
* data-category-id={category._id}
|
|
205
|
+
* className="category-raw-data"
|
|
206
|
+
* >
|
|
207
|
+
* <pre>{JSON.stringify(category, null, 2)}</pre>
|
|
208
|
+
* </div>
|
|
209
|
+
* ))}
|
|
210
|
+
* </Category.Raw>
|
|
211
|
+
* ```
|
|
212
|
+
*/
|
|
213
|
+
export declare const Raw: React.ForwardRefExoticComponent<CategoryRawProps & React.RefAttributes<HTMLElement>>;
|
|
214
|
+
/**
|
|
215
|
+
* Category filter component that provides category selection functionality.
|
|
216
|
+
* Provides selected category state and selection controls to custom render functions.
|
|
217
|
+
*
|
|
218
|
+
* @component
|
|
219
|
+
* @example
|
|
220
|
+
* ```tsx
|
|
221
|
+
* // Default usage
|
|
222
|
+
* <CategoryFilter className="category-filter" />
|
|
223
|
+
*
|
|
224
|
+
* // With custom label
|
|
225
|
+
* <CategoryFilter label="Current Category:" />
|
|
226
|
+
*
|
|
227
|
+
* // Custom rendering with forwardRef
|
|
228
|
+
* <CategoryFilter asChild>
|
|
229
|
+
* {React.forwardRef(({selectedCategory, setSelectedCategory, ...props}, ref) => (
|
|
230
|
+
* <div ref={ref} {...props} className="custom-category-filter">
|
|
231
|
+
* {selectedCategory && (
|
|
232
|
+
* <span>Selected: {selectedCategory.name}</span>
|
|
233
|
+
* )}
|
|
234
|
+
* <button onClick={() => setSelectedCategory(null)}>
|
|
235
|
+
* Clear Selection
|
|
236
|
+
* </button>
|
|
237
|
+
* </div>
|
|
238
|
+
* ))}
|
|
239
|
+
* </CategoryFilter>
|
|
240
|
+
* ```
|
|
241
|
+
*/
|
|
242
|
+
export declare const CategoryFilter: React.ForwardRefExoticComponent<CategoryFilterProps & React.RefAttributes<HTMLElement>>;
|