@tapcart/mobile-components 0.4.4 → 0.4.6
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/icon.d.ts.map +1 -1
- package/dist/components/ui/icon.js +6 -2
- package/dist/components/ui/image.d.ts.map +1 -1
- package/dist/components/ui/image.js +39 -7
- package/dist/components/ui/product-card.d.ts +2 -1
- package/dist/components/ui/product-card.d.ts.map +1 -1
- package/dist/components/ui/product-card.js +6 -6
- package/dist/components/ui/selectors.d.ts +1 -0
- package/dist/components/ui/selectors.d.ts.map +1 -1
- package/dist/components/ui/selectors.js +4 -4
- package/dist/components/ui/skeleton.d.ts +1 -1
- package/dist/styles.css +769 -187
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../components/ui/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACjE,OAAO,EAEL,eAAe,EAkChB,MAAM,qBAAqB,CAAA;AAI5B,QAAA,MAAM,YAAY;;;mFAgBjB,CAAA;AAsDD,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,YAAY,CAAC;IACnC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,iBAAS,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,IAAW,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CAczE;AAED,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,eAAe,EAAE,CAAA"}
|
|
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { cva } from "class-variance-authority";
|
|
14
|
-
import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconSearch, } from "@tabler/icons-react";
|
|
14
|
+
import { IconUpload, IconPencilMinus, IconPlus, IconMinus, IconAdjustmentsAlt, IconArrowsSort, IconAlertCircle, IconCircleX, IconInfoCircle, IconCheck, IconSquareOff, IconMapPin, IconRepeat, IconSquare, IconSquareCheck, IconChevronUp, IconChevronRight, IconEyeOff, IconSquareX, IconCircle, IconChevronDown, IconHeartFilled, IconCurrencyDollar, IconX, IconCircleOff, IconCircleDotFilled, IconMoodSad, IconSquareXFilled, IconTrash, IconLoader2, IconColumns1, IconColumns2, IconColumns3, IconSearch, IconShoppingCartOff } from "@tabler/icons-react";
|
|
15
15
|
import { cn, iconColorVariantClasses } from "../../lib/utils";
|
|
16
16
|
const iconVariants = cva("inline-flex items-center justify-center text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", {
|
|
17
17
|
variants: {
|
|
@@ -70,7 +70,11 @@ const icons = {
|
|
|
70
70
|
"square-x-filled": IconSquareXFilled,
|
|
71
71
|
trash: IconTrash,
|
|
72
72
|
loader: IconLoader2,
|
|
73
|
-
"
|
|
73
|
+
"columns-1": IconColumns1,
|
|
74
|
+
"columns-2": IconColumns2,
|
|
75
|
+
"columns-3": IconColumns3,
|
|
76
|
+
search: IconSearch,
|
|
77
|
+
"shopping-cart-off": IconShoppingCartOff,
|
|
74
78
|
};
|
|
75
79
|
function Icon(_a) {
|
|
76
80
|
var { className, name, size = "md", color } = _a, props = __rest(_a, ["className", "name", "size", "color"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../components/ui/image.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,10 +9,27 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
9
9
|
}
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
/* eslint-disable react/display-name */
|
|
14
14
|
/* eslint-disable @next/next/no-img-element */
|
|
15
15
|
import * as React from "react";
|
|
16
|
+
import ReactDOM from "react-dom";
|
|
17
|
+
function ImagePreload({ imgAttributes }) {
|
|
18
|
+
const opts = {
|
|
19
|
+
as: "image",
|
|
20
|
+
imageSrcSet: imgAttributes.srcSet,
|
|
21
|
+
imageSizes: imgAttributes.sizes,
|
|
22
|
+
fetchPriority: imgAttributes.fetchPriority,
|
|
23
|
+
};
|
|
24
|
+
if (ReactDOM.preload) {
|
|
25
|
+
// See https://github.com/facebook/react/pull/26940
|
|
26
|
+
ReactDOM.preload(imgAttributes.src,
|
|
27
|
+
// @ts-expect-error TODO: upgrade to `@types/react-dom@18.3.x`
|
|
28
|
+
opts);
|
|
29
|
+
return null;
|
|
30
|
+
}
|
|
31
|
+
return null;
|
|
32
|
+
}
|
|
16
33
|
/**
|
|
17
34
|
* Tapcart’s Image component is a wrapper around the HTML image element.
|
|
18
35
|
* It supports the same props as the HTML `img` element, but automatically
|
|
@@ -100,6 +117,7 @@ export const Image = React.forwardRef((_a, ref) => {
|
|
|
100
117
|
: objectFit === "fit"
|
|
101
118
|
? "contain"
|
|
102
119
|
: objectFit;
|
|
120
|
+
const nFetchPriority = loading === "eager" ? "high" : "auto";
|
|
103
121
|
return {
|
|
104
122
|
width: nWidth,
|
|
105
123
|
height: nHeight,
|
|
@@ -107,6 +125,7 @@ export const Image = React.forwardRef((_a, ref) => {
|
|
|
107
125
|
alt: nAlt,
|
|
108
126
|
aspectRatio: nAspectRatio,
|
|
109
127
|
objectFit: nObjectFit,
|
|
128
|
+
fetchPriority: nFetchPriority,
|
|
110
129
|
};
|
|
111
130
|
}, [
|
|
112
131
|
width,
|
|
@@ -136,12 +155,25 @@ export const Image = React.forwardRef((_a, ref) => {
|
|
|
136
155
|
};
|
|
137
156
|
const imgClassName = `opacity-0 transition-opacity duration-500 ease-in-out ${isLoaded ? "opacity-100" : ""}`;
|
|
138
157
|
const wrapperStyle = Object.assign({ aspectRatio: (_b = normalizedProps.aspectRatio) === null || _b === void 0 ? void 0 : _b.replace(":", "/") }, imageWrapperStyles);
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
158
|
+
const srcSet = generateSrcSet(normalizedProps.src, generateSizes(imageWidths, normalizedProps.aspectRatio, crop), loader, normalizedProps.objectFit === "contain");
|
|
159
|
+
return (_jsxs(_Fragment, { children: [loading === "eager" && (_jsx(ImagePreload, { imgAttributes: {
|
|
160
|
+
srcSet,
|
|
161
|
+
sizes,
|
|
162
|
+
fetchPriority: normalizedProps.fetchPriority,
|
|
163
|
+
src: normalizedProps.src || "",
|
|
164
|
+
} })), _jsx("div", Object.assign({ className: "relative bg-stateColors-skeleton border-transparent", style: wrapperStyle }, { children: !hasError && normalizedProps.src ? (_jsx("img", Object.assign({}, passthroughProps, { fetchPriority: normalizedProps.fetchPriority, alt: normalizedProps.alt, decoding: decoding, height: normalizedProps.height, loading: loading, srcSet: srcSet, width: normalizedProps.width, className: imgClassName, onLoad: handleImageLoad, onError: handleImageError, sizes: sizes,
|
|
165
|
+
// `src` needs to come after `sizes` and `srcSet` because React updates
|
|
166
|
+
// attributes in order. If we keep `src` the first one, Safari will
|
|
167
|
+
// immediately start to fetch `src`, before `sizes` and `srcSet` are even
|
|
168
|
+
// updated by React. That causes multiple unnecessary requests if `srcSet`
|
|
169
|
+
// and `sizes` are defined.
|
|
170
|
+
// This bug cannot be reproduced in Chrome or Firefox.
|
|
171
|
+
src: normalizedProps.src, ref: ref, style: {
|
|
172
|
+
objectFit: normalizedProps.objectFit,
|
|
173
|
+
maxHeight: "100%",
|
|
174
|
+
height: "100%",
|
|
175
|
+
width: "100%",
|
|
176
|
+
} }))) : (_jsx("div", { className: "absolute top-0 left-0 w-full h-full bg-stateColors-skeleton " })) }))] }));
|
|
145
177
|
});
|
|
146
178
|
/**
|
|
147
179
|
* The shopifyLoader function is a simple utility function that takes a src, width,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { Product } from "app-studio-types";
|
|
3
3
|
type Config = {
|
|
4
|
-
|
|
4
|
+
columns?: string;
|
|
5
5
|
productImage?: {
|
|
6
6
|
enabled: boolean;
|
|
7
7
|
cornerRadius: number;
|
|
@@ -80,6 +80,7 @@ export type ProductCardProps = {
|
|
|
80
80
|
productId: string;
|
|
81
81
|
variantId?: string;
|
|
82
82
|
}) => void;
|
|
83
|
+
className?: string;
|
|
83
84
|
};
|
|
84
85
|
declare const ProductCard: React.FC<ProductCardProps>;
|
|
85
86
|
export { ProductCard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAG1C,KAAK,MAAM,GAAG;IACZ,
|
|
1
|
+
{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../../components/ui/product-card.tsx"],"names":[],"mappings":"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"}
|
|
@@ -133,7 +133,7 @@ const productCardFavoriteVariants = cva("absolute ", {
|
|
|
133
133
|
iconPosition: "below-image-on-right",
|
|
134
134
|
},
|
|
135
135
|
});
|
|
136
|
-
const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, }) => {
|
|
136
|
+
const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFavoriteClick, onQuickAdd, openProduct, className, }) => {
|
|
137
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;
|
|
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
|
|
@@ -172,12 +172,12 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
|
|
|
172
172
|
// Prepare Product Open
|
|
173
173
|
const _openProduct = () => openProduct === null || openProduct === void 0 ? void 0 : openProduct({ productId, variantId });
|
|
174
174
|
const getImageSizes = (config) => {
|
|
175
|
-
switch (config.
|
|
176
|
-
case "
|
|
175
|
+
switch (config.columns) {
|
|
176
|
+
case "1":
|
|
177
177
|
return "100vw";
|
|
178
|
-
case "
|
|
178
|
+
case "2":
|
|
179
179
|
return "50vw";
|
|
180
|
-
case "
|
|
180
|
+
case "3":
|
|
181
181
|
return "33vw";
|
|
182
182
|
default:
|
|
183
183
|
return "100vw";
|
|
@@ -185,7 +185,7 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
|
|
|
185
185
|
};
|
|
186
186
|
const sizes = getImageSizes(config);
|
|
187
187
|
const imageSwipeEnabled = (((_e = config.productImage) === null || _e === void 0 ? void 0 : _e.allowSwipeability) && product.images.length > 1);
|
|
188
|
-
return (_jsx("div", Object.assign({ className:
|
|
188
|
+
return (_jsx("div", Object.assign({ className: cn("w-1/2", className) }, { children: _jsxs("div", Object.assign({ className: "w-full active:opacity-70", onClick: () => {
|
|
189
189
|
_openProduct();
|
|
190
190
|
} }, { children: [((_f = config.productImage) === null || _f === void 0 ? void 0 : _f.enabled) && (_jsxs("div", Object.assign({ className: "relative w-full overflow-hidden", style: {
|
|
191
191
|
borderTopLeftRadius: `${config.productImage.cornerRadius}px`,
|
|
@@ -24,6 +24,7 @@ declare const Selectors: React.ForwardRefExoticComponent<Omit<React.DetailedHTML
|
|
|
24
24
|
type SelectorContainerProps = {
|
|
25
25
|
children: React.ReactElement<SelectorsProps>[];
|
|
26
26
|
containerRef: React.RefObject<HTMLDivElement>;
|
|
27
|
+
className: string;
|
|
27
28
|
};
|
|
28
29
|
declare const SelectorContainer: React.FC<SelectorContainerProps>;
|
|
29
30
|
export { SelectorContainer, Selectors, selectorsVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;
|
|
1
|
+
{"version":3,"file":"selectors.d.ts","sourceRoot":"","sources":["../../../components/ui/selectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,iBAAiB;;;mFAiBtB,CAAA;AACD,KAAK,cAAc,GAAG,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,GAC5D,YAAY,CAAC,OAAO,iBAAiB,CAAC,GAAG;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS,CAAA;CAClE,CAAA;AAEH,QAAA,MAAM,SAAS;;;;;;;;eAHA,MAAM,iBAAiB,CAAC,iBAAiB,CAAC,GAAG,SAAS;2CAyCpE,CAAA;AACD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC,EAAE,CAAA;IAC9C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;IAC7C,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AACD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA6CvD,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAA"}
|
|
@@ -31,14 +31,14 @@ const selectorsVariants = cva("flex py-2 px-4 whitespace-nowrap bg-coreColors-pa
|
|
|
31
31
|
},
|
|
32
32
|
});
|
|
33
33
|
const Selectors = React.forwardRef((_a, ref) => {
|
|
34
|
-
var { label, selected, disabled = false, className, onSelect } = _a, props = __rest(_a, ["label", "selected", "disabled", "className", "onSelect"]);
|
|
34
|
+
var { label, selected, disabled = false, className, onSelect, children } = _a, props = __rest(_a, ["label", "selected", "disabled", "className", "onSelect", "children"]);
|
|
35
35
|
return (_jsx("button", Object.assign({ disabled: disabled, onClick: onSelect, className: cn(selectorsVariants({
|
|
36
36
|
selected: selected,
|
|
37
37
|
className,
|
|
38
38
|
disabled,
|
|
39
|
-
}), "group"), ref: ref }, props, { children: _jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label })) })));
|
|
39
|
+
}), "group"), ref: ref }, props, { children: children ? (children) : (_jsx(Text, Object.assign({ type: "body-primary", color: "text-textColors-primaryColor" }, { children: label }))) })));
|
|
40
40
|
});
|
|
41
|
-
const SelectorContainer = ({ children, containerRef, }) => {
|
|
41
|
+
const SelectorContainer = ({ children, containerRef, className, }) => {
|
|
42
42
|
const [showFadeLeft, setShowFadeLeft] = React.useState(false);
|
|
43
43
|
const [showFadeRight, setShowFadeRight] = React.useState(false);
|
|
44
44
|
const checkOverflow = () => {
|
|
@@ -55,7 +55,7 @@ const SelectorContainer = ({ children, containerRef, }) => {
|
|
|
55
55
|
React.useEffect(() => {
|
|
56
56
|
checkOverflow();
|
|
57
57
|
}, [children]);
|
|
58
|
-
return (_jsx("div", Object.assign({ className: "relative" }, { children: _jsxs("div", Object.assign({ className: "flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
|
|
58
|
+
return (_jsx("div", Object.assign({ className: "relative" }, { children: _jsxs("div", Object.assign({ className: cn("flex gap-2 px-1 h-[42px] items-center overflow-x-auto overflow-y-hidden no-scrollbar", className), onScroll: checkOverflow, ref: containerRef }, { children: [children, showFadeLeft && (_jsx("div", { className: "absolute top-0 left-0 w-8 h-full pointer-events-none bg-fade-left" })), showFadeRight && (_jsx("div", { className: "absolute top-0 right-0 w-8 h-full pointer-events-none bg-fade-right" }))] })) })));
|
|
59
59
|
};
|
|
60
60
|
Selectors.displayName = "Selectors";
|
|
61
61
|
export { SelectorContainer, Selectors, selectorsVariants };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { type VariantProps } from "class-variance-authority";
|
|
3
3
|
declare const skeletonVariants: (props?: ({
|
|
4
|
-
variant?: "
|
|
4
|
+
variant?: "line" | "rectangular" | "circle" | null | undefined;
|
|
5
5
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
6
6
|
export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
|
|
7
7
|
height?: number;
|