@tapcart/mobile-components 0.5.2 → 0.5.3
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/dist/components/ui/favorite.d.ts +2 -0
- package/dist/components/ui/favorite.d.ts.map +1 -1
- package/dist/components/ui/favorite.js +11 -2
- package/dist/components/ui/price.d.ts +2 -1
- package/dist/components/ui/price.d.ts.map +1 -1
- package/dist/components/ui/price.js +6 -2
- package/dist/components/ui/product-card.d.ts.map +1 -1
- package/dist/components/ui/product-card.js +15 -15
- package/dist/styles.css +10 -0
- package/package.json +1 -1
|
@@ -3,6 +3,7 @@ import { type VariantProps } from "class-variance-authority";
|
|
|
3
3
|
declare const favoriteVariants: (props?: ({
|
|
4
4
|
size?: "small" | "large" | null | undefined;
|
|
5
5
|
showBackground?: boolean | null | undefined;
|
|
6
|
+
layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right" | null | undefined;
|
|
6
7
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
7
8
|
export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof favoriteVariants> {
|
|
8
9
|
selected?: boolean;
|
|
@@ -10,6 +11,7 @@ export interface FavoriteProps extends React.ButtonHTMLAttributes<HTMLButtonElem
|
|
|
10
11
|
icon?: string;
|
|
11
12
|
showBackground?: boolean;
|
|
12
13
|
cornerRadius?: number;
|
|
14
|
+
layoutType?: "below-image-on-right" | "top-right" | "top-left" | "bottom-left" | "bottom-right";
|
|
13
15
|
}
|
|
14
16
|
declare const Favorite: React.ForwardRefExoticComponent<FavoriteProps & React.RefAttributes<HTMLButtonElement>>;
|
|
15
17
|
export { Favorite, favoriteVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB
|
|
1
|
+
{"version":3,"file":"favorite.d.ts","sourceRoot":"","sources":["../../../components/ui/favorite.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAKjE,QAAA,MAAM,gBAAgB;;;;mFA0BrB,CAAA;AAED,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EACnD,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC/D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,UAAU,CAAC,EAAE,sBAAsB,GAAG,WAAW,GAAG,UAAU,GAAG,aAAa,GAAG,cAAc,CAAA;CAChG;AAED,QAAA,MAAM,QAAQ,yFAuCb,CAAA;AAGD,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,CAAA"}
|
|
@@ -24,17 +24,26 @@ const favoriteVariants = cva("flex p-2 gap-2 rounded-[4px] shadow-buttonColors-p
|
|
|
24
24
|
true: "bg-coreColors-inputBackground",
|
|
25
25
|
false: "",
|
|
26
26
|
},
|
|
27
|
+
layoutType: {
|
|
28
|
+
"below-image-on-right": "absolute right-0",
|
|
29
|
+
"top-right": "",
|
|
30
|
+
"top-left": "",
|
|
31
|
+
"bottom-left": "",
|
|
32
|
+
"bottom-right": "",
|
|
33
|
+
}
|
|
27
34
|
},
|
|
28
35
|
defaultVariants: {
|
|
29
36
|
size: "small",
|
|
30
37
|
showBackground: true,
|
|
38
|
+
layoutType: "below-image-on-right",
|
|
31
39
|
},
|
|
32
40
|
});
|
|
33
41
|
const Favorite = React.forwardRef((_a, ref) => {
|
|
34
|
-
var { className, size = "small", selected = false, onClick, icon = "heart-filled", showBackground = true, cornerRadius = 4 } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "icon", "showBackground", "cornerRadius"]);
|
|
42
|
+
var { className, size = "small", selected = false, onClick, icon = "heart-filled", showBackground = true, cornerRadius = 4, layoutType = "below-image-on-right" } = _a, props = __rest(_a, ["className", "size", "selected", "onClick", "icon", "showBackground", "cornerRadius", "layoutType"]);
|
|
35
43
|
return (_jsx("button", Object.assign({ onClick: onClick, ref: ref, className: cn(favoriteVariants({
|
|
36
44
|
size,
|
|
37
|
-
showBackground
|
|
45
|
+
showBackground,
|
|
46
|
+
layoutType,
|
|
38
47
|
}), className), style: {
|
|
39
48
|
borderRadius: `${cornerRadius}px`,
|
|
40
49
|
} }, props, { children: _jsx(Icon, { name: icon, color: selected ? "stateColors-favorites" : "stateColors-disabled", size: size === "small" ? "xs" : "sm" }) })));
|
|
@@ -8,7 +8,8 @@ interface PriceProps {
|
|
|
8
8
|
currency?: string;
|
|
9
9
|
locale?: string;
|
|
10
10
|
fontSize?: number;
|
|
11
|
+
textAlignment?: 'left' | 'center' | 'right' | '';
|
|
11
12
|
}
|
|
12
|
-
declare function Price({ price, priceHigh, priceRanges, isSale, compareAtPrice, compareAtPriceHigh, currency, locale, fontSize, }: PriceProps): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
declare function Price({ price, priceHigh, priceRanges, isSale, compareAtPrice, compareAtPriceHigh, currency, locale, fontSize, textAlignment, }: PriceProps): import("react/jsx-runtime").JSX.Element;
|
|
13
14
|
export { Price };
|
|
14
15
|
//# sourceMappingURL=price.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":"AAKA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"price.d.ts","sourceRoot":"","sources":["../../../components/ui/price.tsx"],"names":[],"mappings":"AAKA,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IACnC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,EAAE,CAAC;CAClD;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAa,EACb,WAAmB,EACnB,MAAc,EACd,cAAc,EACd,kBAAkB,EAClB,QAAgB,EAChB,MAAgB,EAChB,QAAa,EACb,aAAkB,GACnB,EAAE,UAAU,2CAsGZ;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Money } from "./money";
|
|
3
3
|
import { Text } from "./text";
|
|
4
|
-
|
|
4
|
+
import { cn } from "../../lib/utils";
|
|
5
|
+
function Price({ price, priceHigh = 0, priceRanges = false, isSale = false, compareAtPrice, compareAtPriceHigh, currency = "USD", locale = "en-US", fontSize = 15, textAlignment = '', }) {
|
|
5
6
|
return (_jsx(_Fragment, { children: priceRanges ? (_jsx(_Fragment, { children: isSale &&
|
|
6
7
|
compareAtPrice !== undefined &&
|
|
7
|
-
compareAtPriceHigh !== undefined ? (_jsxs("div", Object.assign({ className: "flex flex-wrap
|
|
8
|
+
compareAtPriceHigh !== undefined ? (_jsxs("div", Object.assign({ className: cn("flex flex-wrap gap-2", { "justify-start": textAlignment === "left" }, { "justify-end": textAlignment === "right" }, { "justify-center": textAlignment === "center" }) }, { children: [_jsxs(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: [_jsx("div", { className: cn("flex flex-wrap gap-2", {
|
|
9
|
+
"ml-auto": textAlignment === 'right',
|
|
10
|
+
"mr-auto": textAlignment === 'center',
|
|
11
|
+
}) }), _jsxs("span", Object.assign({ className: "flex-grow min-w-[fit-content]" }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), " -", " ", priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))] })), _jsxs(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }), " ", "-", " ", _jsx(Money, { price: compareAtPriceHigh, currency: currency, locale: locale })] }))] }))) : (_jsxs(Text, Object.assign({ className: "text-textColors-priceText", style: { fontSize: `${fontSize}px` } }, { children: [_jsx(Money, { price: price, currency: currency, locale: locale }), " -", " ", priceHigh !== undefined && (_jsx(Money, { price: priceHigh, currency: currency, locale: locale }))] }))) })) : (_jsx(_Fragment, { children: isSale && compareAtPrice !== undefined ? (_jsxs("div", Object.assign({ className: cn("flex flex-wrap gap-2", { "justify-start": textAlignment === "left" }, { "justify-end": textAlignment === "right" }, { "justify-center": textAlignment === "center" }) }, { children: [_jsx(Text, Object.assign({ className: "text-textColors-salePriceText flex-shrink-0", style: { fontSize: `${fontSize}px` } }, { children: _jsx("span", Object.assign({ className: "mr-2" }, { children: _jsx(Money, { price: price, currency: currency, locale: locale }) })) })), _jsx(Text, Object.assign({ className: "line-through text-textColors-strikethroughPriceText flex-shrink-0", style: { fontSize } }, { children: _jsx(Money, { price: compareAtPrice, currency: currency, locale: locale }) }))] }))) : (_jsx(Text, Object.assign({ className: "text-textColors-priceText", style: { fontSize: `${fontSize}px` } }, { children: _jsx(Money, { price: price, currency: currency, locale: locale }) }))) })) }));
|
|
8
12
|
}
|
|
9
13
|
export { Price };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -134,7 +134,7 @@ const productCardFavoriteVariants = cva("absolute ", {
|
|
|
134
134
|
},
|
|
135
135
|
});
|
|
136
136
|
const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, className, }) => {
|
|
137
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19;
|
|
137
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21;
|
|
138
138
|
const { variants, images, title, tags } = product;
|
|
139
139
|
// Select the variant that has the lowest price that is available or just the lowest price if none are available
|
|
140
140
|
let searchVariants = variants.filter((variant) => variant.available);
|
|
@@ -218,32 +218,32 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
|
|
|
218
218
|
onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
|
|
219
219
|
}, icon: ((_q = (_p = config.favoritesIcon) === null || _p === void 0 ? void 0 : _p.icon) === null || _q === void 0 ? void 0 : _q.type) === "internal"
|
|
220
220
|
? (_s = (_r = config.favoritesIcon) === null || _r === void 0 ? void 0 : _r.icon) === null || _s === void 0 ? void 0 : _s.url
|
|
221
|
-
: undefined }))] }))), ((
|
|
221
|
+
: undefined, layoutType: (_t = config.favoritesIcon) === null || _t === void 0 ? void 0 : _t.layoutType }))] }))), ((_u = config.quickAdd) === null || _u === void 0 ? void 0 : _u.enabled) && (_jsx(Button, Object.assign({ className: "outline-0", style: {
|
|
222
222
|
borderBottomLeftRadius: `${config.quickAdd.cornerRadius}px`,
|
|
223
223
|
borderBottomRightRadius: `${config.quickAdd.cornerRadius}px`,
|
|
224
|
-
}, labelClassName: cn("outline-0 w-full", { uppercase: (
|
|
224
|
+
}, labelClassName: cn("outline-0 w-full", { uppercase: (_v = config.quickAdd) === null || _v === void 0 ? void 0 : _v.uppercase }, { "text-left": ((_w = config.quickAdd) === null || _w === void 0 ? void 0 : _w.textAlignment) === "left" }, { "text-right": ((_x = config.quickAdd) === null || _x === void 0 ? void 0 : _x.textAlignment) === "right" }, { "text-center": ((_y = config.quickAdd) === null || _y === void 0 ? void 0 : _y.textAlignment) === "center" }), labelStyle: { fontSize: (_z = config.quickAdd) === null || _z === void 0 ? void 0 : _z.fontSize }, variant: "quickadd", size: "default", onClick: (e) => {
|
|
225
225
|
e.stopPropagation();
|
|
226
226
|
onQuickAdd === null || onQuickAdd === void 0 ? void 0 : onQuickAdd(e, product);
|
|
227
227
|
} }, { children: "+ Quick add" }))), _jsxs("div", Object.assign({ className: "w-full flex-col justify-start items-start gap-0 inline-flex" }, { children: [belowBadge && (_jsx("div", Object.assign({ className: cn("mt-2 w-full flex justify-start", {
|
|
228
228
|
"justify-end": belowBadge.horizontalPosition === "end",
|
|
229
|
-
}) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((
|
|
230
|
-
"text-left": ((
|
|
229
|
+
}) }, { children: _jsx(Badge, Object.assign({ size: "plp-layout", alignment: belowBadge.horizontalPosition, icon: belowBadge.image, className: cn("truncate", { rounded: belowBadge.cornerRadius === "rounded" }, { "rounded-none": belowBadge.cornerRadius === "square" }) }, { children: belowBadge.text })) }))), ((_0 = config.productTitle) === null || _0 === void 0 ? void 0 : _0.enabled) && (_jsx("div", Object.assign({ className: "mt-2 w-full" }, { children: _jsx(Text, Object.assign({ type: "body-secondary", className: cn({ uppercase: (_1 = config.productTitle) === null || _1 === void 0 ? void 0 : _1.uppercase }, {
|
|
230
|
+
"text-left": ((_2 = config.productTitle) === null || _2 === void 0 ? void 0 : _2.textAlignment) === "left",
|
|
231
231
|
}, {
|
|
232
|
-
"text-right": ((
|
|
232
|
+
"text-right": ((_3 = config.productTitle) === null || _3 === void 0 ? void 0 : _3.textAlignment) === "right",
|
|
233
233
|
}, {
|
|
234
|
-
"text-center": ((
|
|
234
|
+
"text-center": ((_4 = config.productTitle) === null || _4 === void 0 ? void 0 : _4.textAlignment) === "center",
|
|
235
235
|
}, {
|
|
236
|
-
"line-clamp-2": (
|
|
237
|
-
"line-clamp-1": !((
|
|
238
|
-
}, "text-textColors-productTitle"), style: { fontSize: (
|
|
236
|
+
"line-clamp-2": (_5 = config.productTitle) === null || _5 === void 0 ? void 0 : _5.wrapText,
|
|
237
|
+
"line-clamp-1": !((_6 = config.productTitle) === null || _6 === void 0 ? void 0 : _6.wrapText),
|
|
238
|
+
}, "text-textColors-productTitle"), style: { fontSize: (_7 = config.productTitle) === null || _7 === void 0 ? void 0 : _7.fontSize } }, { children: title })) }))), _jsxs("div", Object.assign({ className: cn("flex flex-row w-full gap-2 mt-1 justify-end items-center", { "justify-start": ((_8 = config.price) === null || _8 === void 0 ? void 0 : _8.textAlignment) === "left" }, { "justify-end": ((_9 = config.price) === null || _9 === void 0 ? void 0 : _9.textAlignment) === "right" }, { "justify-center": ((_10 = config.price) === null || _10 === void 0 ? void 0 : _10.textAlignment) === "center" }) }, { children: [((_11 = config.price) === null || _11 === void 0 ? void 0 : _11.enabled) && (_jsx(Price, { price: parseFloat(variant.price.amount), isSale: !!variant.compareAtPrice &&
|
|
239
239
|
variant.compareAtPrice &&
|
|
240
|
-
parseFloat((
|
|
240
|
+
parseFloat((_12 = variant.compareAtPrice) === null || _12 === void 0 ? void 0 : _12.amount) >
|
|
241
241
|
parseFloat(variant.price.amount), compareAtPrice: variant.compareAtPrice &&
|
|
242
|
-
parseFloat((
|
|
242
|
+
parseFloat((_13 = variant.compareAtPrice) === null || _13 === void 0 ? void 0 : _13.amount), currency: tapcartData.currency.code, locale: tapcartData.currency.locale, fontSize: (_14 = config.price) === null || _14 === void 0 ? void 0 : _14.fontSize })), ((_15 = config.favoritesIcon) === null || _15 === void 0 ? void 0 : _15.enabled) &&
|
|
243
243
|
config.favoritesIcon.layoutType === "below-image-on-right" && (_jsx("div", Object.assign({ className: "w-8 h-8 flex items-center justify-center" }, { children: _jsx(Favorite, { selected: favorited, onClick: (e) => {
|
|
244
244
|
onFavoriteClick === null || onFavoriteClick === void 0 ? void 0 : onFavoriteClick(e, product);
|
|
245
|
-
}, size: "small", icon: ((
|
|
246
|
-
? (
|
|
247
|
-
: undefined, cornerRadius: (
|
|
245
|
+
}, size: "small", icon: ((_17 = (_16 = config.favoritesIcon) === null || _16 === void 0 ? void 0 : _16.icon) === null || _17 === void 0 ? void 0 : _17.type) === "internal"
|
|
246
|
+
? (_19 = (_18 = config.favoritesIcon) === null || _18 === void 0 ? void 0 : _18.icon) === null || _19 === void 0 ? void 0 : _19.url
|
|
247
|
+
: undefined, cornerRadius: (_20 = config.favoritesIcon) === null || _20 === void 0 ? void 0 : _20.cornerRadius, layoutType: (_21 = config.favoritesIcon) === null || _21 === void 0 ? void 0 : _21.layoutType }) })))] }))] }))] })) })));
|
|
248
248
|
};
|
|
249
249
|
export { ProductCard };
|
package/dist/styles.css
CHANGED
|
@@ -809,9 +809,15 @@ video {
|
|
|
809
809
|
.ml-2 {
|
|
810
810
|
margin-left: 0.5rem;
|
|
811
811
|
}
|
|
812
|
+
.ml-auto {
|
|
813
|
+
margin-left: auto;
|
|
814
|
+
}
|
|
812
815
|
.mr-2 {
|
|
813
816
|
margin-right: 0.5rem;
|
|
814
817
|
}
|
|
818
|
+
.mr-auto {
|
|
819
|
+
margin-right: auto;
|
|
820
|
+
}
|
|
815
821
|
.mt-1 {
|
|
816
822
|
margin-top: 0.25rem;
|
|
817
823
|
}
|
|
@@ -996,6 +1002,10 @@ video {
|
|
|
996
1002
|
.min-w-\[8rem\] {
|
|
997
1003
|
min-width: 8rem;
|
|
998
1004
|
}
|
|
1005
|
+
.min-w-\[fit-content\] {
|
|
1006
|
+
min-width: -moz-fit-content;
|
|
1007
|
+
min-width: fit-content;
|
|
1008
|
+
}
|
|
999
1009
|
.max-w-full {
|
|
1000
1010
|
max-width: 100%;
|
|
1001
1011
|
}
|