@shopify/shop-minis-react
Version:
React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)
327 lines (326 loc) • 8.11 kB
JavaScript
import { jsxs as a, jsx as e, Fragment as j } from "react/jsx-runtime";
import * as v from "react";
import { cva as F } from "../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
import { useShopNavigation as O } from "../../hooks/navigation/useShopNavigation.js";
import { useSavedProductsActions as D } from "../../hooks/user/useSavedProductsActions.js";
import { cn as n } from "../../lib/utils.js";
import { Button as M } from "../atoms/button.js";
import { Card as q, CardContent as B, CardAction as H } from "../atoms/card.js";
import { Touchable as A } from "../atoms/touchable.js";
import U from "../../node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/star.js";
import _ from "../../node_modules/.pnpm/lucide-react@0.513.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/heart.js";
import { Root as E } from "../../node_modules/.pnpm/@radix-ui_react-slot@1.2.3_@types_react@19.1.6_react@19.1.0/node_modules/@radix-ui/react-slot/dist/index.js";
const G = F("", {
variants: {
layout: {
horizontal: "w-full !flex-row items-center gap-3 px-4 py-3",
vertical: "flex-col"
},
discount: {
none: "",
small: "",
large: ""
}
},
defaultVariants: {
layout: "horizontal",
discount: "none"
}
});
function J({
className: r,
layout: t,
discount: o,
asChild: c = !1,
onPress: i,
...s
}) {
return /* @__PURE__ */ e(
A,
{
onClick: i,
whileTap: { opacity: 0.7 },
transition: {
opacity: { type: "tween", duration: 0.08, ease: "easeInOut" }
},
children: /* @__PURE__ */ e(
c ? E : q,
{
className: n(
G({ layout: t, discount: o }),
"border-0 bg-white rounded-xl shadow-lg shadow-black/10",
r
),
...s
}
)
}
);
}
function K({
className: r,
layout: t = "horizontal",
...o
}) {
return /* @__PURE__ */ e(
"div",
{
"data-slot": "product-link-image",
className: n(
"overflow-hidden rounded-md bg-muted",
t === "horizontal" ? "h-16 w-16 flex-shrink-0" : "aspect-square w-full",
r
),
...o
}
);
}
function Q({
className: r,
layout: t = "horizontal",
...o
}) {
return /* @__PURE__ */ e(
B,
{
className: n(
t === "horizontal" ? "flex-1 min-w-0 space-y-1 px-0 py-0" : "space-y-2",
r
),
...o
}
);
}
function W({
className: r,
children: t,
...o
}) {
return /* @__PURE__ */ e(
"h3",
{
"data-slot": "product-link-title",
className: n(
"text-sm font-medium leading-tight text-gray-900 truncate overflow-hidden whitespace-nowrap text-ellipsis",
r
),
...o,
children: t
}
);
}
function X({ className: r, ...t }) {
return /* @__PURE__ */ e(
"div",
{
"data-slot": "product-link-price",
className: n("flex items-center gap-2", r),
...t
}
);
}
function Y({
className: r,
...t
}) {
return /* @__PURE__ */ e(
"span",
{
"data-slot": "product-link-current-price",
className: n("text-sm font-semibold text-gray-900", r),
...t
}
);
}
function Z({
className: r,
...t
}) {
return /* @__PURE__ */ e(
"span",
{
"data-slot": "product-link-original-price",
className: n("text-sm text-gray-500 line-through", r),
...t
}
);
}
function $({
className: r,
...t
}) {
return /* @__PURE__ */ e(
"span",
{
"data-slot": "product-link-discount-price",
className: n("text-sm font-semibold text-red-600", r),
...t
}
);
}
function tt({ className: r, ...t }) {
return /* @__PURE__ */ e(
"div",
{
"data-slot": "product-link-rating",
className: n(
"flex items-center gap-1 text-xs text-muted-foreground",
r
),
...t
}
);
}
function et({
className: r,
onActionPress: t,
filled: o = !1,
...c
}) {
return /* @__PURE__ */ e(
H,
{
className: n("flex-shrink-0 self-center px-0 py-0", r),
...c,
children: /* @__PURE__ */ e(
A,
{
stopPropagation: !0,
onClick: t,
whileTap: { opacity: 0.7, scale: 0.95 },
transition: {
opacity: { type: "tween", duration: 0.08, ease: "easeInOut" },
scale: { type: "tween", duration: 0.08, ease: "easeInOut" }
},
children: /* @__PURE__ */ e(
M,
{
variant: "borderless",
size: "icon",
className: "h-auto w-auto p-0 hover:bg-transparent",
children: /* @__PURE__ */ e(_, { fill: o ? "currentColor" : "none", className: "h-4 w-4" })
}
)
}
)
}
);
}
function pt({ product: r }) {
const { navigateToProduct: t } = O(), { saveProduct: o, unsaveProduct: c } = D(), {
id: i,
title: s,
featuredImage: u,
reviewAnalytics: w,
price: P,
compareAtPrice: k,
isFavorited: z,
selectedVariant: m,
defaultVariantId: p,
shop: f
} = r, [h, C] = v.useState(z), g = w?.averageRating, N = w?.reviewCount, I = P?.currencyCode, x = P?.amount, L = u?.url, T = u?.altText || s, y = k?.amount, R = k?.currencyCode, b = y && y !== x, S = v.useCallback(() => {
t({
productId: i
});
}, [t, i]), V = v.useCallback(async () => {
const l = h;
C(!l);
try {
l ? await c({
productId: i,
shopId: f.id,
productVariantId: m?.id || p
}) : await o({
productId: i,
shopId: f.id,
productVariantId: m?.id || p
});
} catch {
C(l);
}
}, [
h,
i,
f.id,
m?.id,
p,
o,
c
]);
return /* @__PURE__ */ a(
J,
{
layout: "horizontal",
discount: b ? "small" : "none",
onPress: S,
children: [
/* @__PURE__ */ e(K, { layout: "horizontal", children: L ? /* @__PURE__ */ e(
"img",
{
src: L,
alt: T,
className: "h-full w-full object-cover"
}
) : /* @__PURE__ */ e("div", { className: "h-full w-full bg-muted flex items-center justify-center text-muted-foreground text-xs", children: "No Image" }) }),
/* @__PURE__ */ a(Q, { layout: "horizontal", children: [
/* @__PURE__ */ e(W, { children: s }),
N && g && /* @__PURE__ */ e(tt, { children: /* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
Array.from({ length: 5 }, (l, d) => /* @__PURE__ */ e(
U,
{
fill: d < Math.floor(g) ? "currentColor" : "none",
className: n(
"h-3 w-3",
d < Math.floor(g) ? "text-primary" : "text-gray-300"
)
},
d
)),
/* @__PURE__ */ a("span", { className: "text-xs text-gray-600 ml-1", children: [
"(",
N,
")"
] })
] }) }),
/* @__PURE__ */ e(X, { children: b ? /* @__PURE__ */ a(j, { children: [
/* @__PURE__ */ a($, { children: [
I,
" ",
x
] }),
/* @__PURE__ */ a(Z, { children: [
R,
" ",
y
] })
] }) : /* @__PURE__ */ a(Y, { children: [
I,
" ",
x
] }) })
] }),
/* @__PURE__ */ e(
et,
{
filled: h,
onActionPress: V
}
)
]
}
);
}
export {
pt as ProductLink,
et as ProductLinkActions,
Y as ProductLinkCurrentPrice,
$ as ProductLinkDiscountPrice,
K as ProductLinkImage,
Q as ProductLinkInfo,
Z as ProductLinkOriginalPrice,
X as ProductLinkPrice,
tt as ProductLinkRating,
J as ProductLinkRoot,
W as ProductLinkTitle
};
//# sourceMappingURL=product-link.js.map