@tapcart/mobile-components 0.8.72 → 0.9.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/dist/components/hooks/use-nosto-recommendation.d.ts +4 -1
- package/dist/components/hooks/use-nosto-recommendation.d.ts.map +1 -1
- package/dist/components/hooks/use-nosto-recommendation.js +40 -26
- package/dist/components/hooks/use-products.d.ts +3 -3
- package/dist/components/hooks/use-products.d.ts.map +1 -1
- package/dist/components/hooks/use-products.js +16 -4
- package/dist/components/ui/accordion.js +1 -1
- package/dist/components/ui/checkbox.js +1 -1
- package/dist/components/ui/chip.js +1 -1
- package/dist/components/ui/favorite.js +1 -1
- package/dist/components/ui/loading-dots.d.ts +1 -1
- package/dist/components/ui/loading-dots.d.ts.map +1 -1
- package/dist/components/ui/product-card.js +1 -1
- package/dist/components/ui/quantity-pickerNEW.d.ts.map +1 -1
- package/dist/components/ui/quantity-pickerNEW.js +1 -3
- package/dist/components/ui/radio-group.js +1 -1
- package/dist/components/ui/tabs.d.ts.map +1 -1
- package/dist/components/ui/tabs.js +1 -1
- package/dist/components/ui/tap.d.ts.map +1 -1
- package/dist/components/ui/tap.js +1 -1
- package/dist/components/ui/toggle.js +1 -1
- package/dist/lib/utils.d.ts +2 -0
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +5 -3
- package/dist/styles.css +3 -13
- package/dist/tests/utils.test.js +578 -1
- package/package.json +1 -1
|
@@ -7,7 +7,10 @@ export declare enum NostoRecommendationsType {
|
|
|
7
7
|
BEST_SELLERS = "BEST_SELLERS",
|
|
8
8
|
VIEWED_CATEGORY = "VIEWED_CATEGORY"
|
|
9
9
|
}
|
|
10
|
-
export declare function useNostoRecommendations(integrations: Integrations, baseURL: string, slotId?: string, country?: string, recommendationsType?: NostoRecommendationsType | "", productIds?: string[], skip?: boolean, mockFallback?: boolean, mockFallbackAppId?: string
|
|
10
|
+
export declare function useNostoRecommendations(integrations: Integrations, baseURL: string, slotId?: string, country?: string, recommendationsType?: NostoRecommendationsType | "", productIds?: string[], skip?: boolean, mockFallback?: boolean, mockFallbackAppId?: string, session?: {
|
|
11
|
+
sessionId: string;
|
|
12
|
+
lastSessionEventTimestamp: number;
|
|
13
|
+
}): {
|
|
11
14
|
recommendations: import("app-studio-types").Product[];
|
|
12
15
|
isLoading: boolean;
|
|
13
16
|
error: any;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-nosto-recommendation.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-nosto-recommendation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAe/C,oBAAY,wBAAwB;IAClC,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,qBAAqB,0BAA0B;IAC/C,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;CACpC;
|
|
1
|
+
{"version":3,"file":"use-nosto-recommendation.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-nosto-recommendation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAe/C,oBAAY,wBAAwB;IAClC,eAAe,oBAAoB;IACnC,eAAe,oBAAoB;IACnC,qBAAqB,0BAA0B;IAC/C,WAAW,gBAAgB;IAC3B,YAAY,iBAAiB;IAC7B,eAAe,oBAAoB;CACpC;AAwTD,wBAAgB,uBAAuB,CACrC,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,MAAM,EACf,MAAM,SAAK,EACX,OAAO,SAAO,EACd,mBAAmB,CAAC,EAAE,wBAAwB,GAAG,EAAE,EACnD,UAAU,CAAC,EAAE,MAAM,EAAE,EACrB,IAAI,CAAC,EAAE,OAAO,EACd,YAAY,CAAC,EAAE,OAAO,EACtB,iBAAiB,CAAC,EAAE,MAAM,EAC1B,OAAO,CAAC,EAAE;IACR,SAAS,EAAE,MAAM,CAAA;IACjB,yBAAyB,EAAE,MAAM,CAAA;CAClC;;;;;EAwDF"}
|
|
@@ -20,6 +20,8 @@ export var NostoRecommendationsType;
|
|
|
20
20
|
NostoRecommendationsType["BEST_SELLERS"] = "BEST_SELLERS";
|
|
21
21
|
NostoRecommendationsType["VIEWED_CATEGORY"] = "VIEWED_CATEGORY";
|
|
22
22
|
})(NostoRecommendationsType || (NostoRecommendationsType = {}));
|
|
23
|
+
// Nosto sessions expire after 30 minutes. We use 29.5 minutes to be safe
|
|
24
|
+
const NOSTO_SESSION_EXPIRATION_TIME = 29.5 * 60 * 1000;
|
|
23
25
|
const fetchNosto = (nostoKey, graphqlBody, mode) => __awaiter(void 0, void 0, void 0, function* () {
|
|
24
26
|
const url = "https://api.nosto.com/v1/graphql";
|
|
25
27
|
const headers = new Headers({
|
|
@@ -38,28 +40,34 @@ const fetchNosto = (nostoKey, graphqlBody, mode) => __awaiter(void 0, void 0, vo
|
|
|
38
40
|
const getProductIdsFromPageResponse = (pageResponse) => {
|
|
39
41
|
return ((pageResponse === null || pageResponse === void 0 ? void 0 : pageResponse.flatMap((page) => page.primary).filter((item) => item && item.productId).map((item) => item.productId)) || []);
|
|
40
42
|
};
|
|
41
|
-
const
|
|
43
|
+
const resolveSessionId = (nostoKey, optionalSessionId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
44
|
+
if (optionalSessionId) {
|
|
45
|
+
return optionalSessionId;
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
const sessionData = yield fetchNosto(nostoKey, newSessionQuery);
|
|
49
|
+
return sessionData.data.newSession;
|
|
50
|
+
}
|
|
51
|
+
});
|
|
52
|
+
const fetchFrontPageRecommendations = (nostoKey, slotId, optionalSessionId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
42
53
|
var _a, _b, _c;
|
|
43
54
|
// Fetch sessionId
|
|
44
|
-
const
|
|
45
|
-
const sessionId = sessionData.data.newSession;
|
|
55
|
+
const sessionId = yield resolveSessionId(nostoKey, optionalSessionId);
|
|
46
56
|
// Main recommendation query
|
|
47
57
|
const body = getFrontPageRecommendationsQuery(sessionId, slotId);
|
|
48
58
|
const response = yield fetchNosto(nostoKey, body, "cors");
|
|
49
59
|
return getProductIdsFromPageResponse((_c = (_b = (_a = response.data) === null || _a === void 0 ? void 0 : _a.updateSession) === null || _b === void 0 ? void 0 : _b.pages) === null || _c === void 0 ? void 0 : _c.forFrontPage);
|
|
50
60
|
});
|
|
51
|
-
const fetchProductPageRecommendations = (nostoKey, productId, slotId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
61
|
+
const fetchProductPageRecommendations = (nostoKey, productId, slotId, optionalSessionId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
52
62
|
var _d, _e, _f;
|
|
53
|
-
const
|
|
54
|
-
const sessionId = sessionData.data.newSession;
|
|
63
|
+
const sessionId = yield resolveSessionId(nostoKey, optionalSessionId);
|
|
55
64
|
const body = getProductPageRecommendationsQuery(sessionId, productId, slotId);
|
|
56
65
|
const response = yield fetchNosto(nostoKey, body, "cors");
|
|
57
66
|
return getProductIdsFromPageResponse((_f = (_e = (_d = response.data) === null || _d === void 0 ? void 0 : _d.updateSession) === null || _e === void 0 ? void 0 : _e.pages) === null || _f === void 0 ? void 0 : _f.forProductPage);
|
|
58
67
|
});
|
|
59
|
-
const fetchCategoryPageRecommendations = (nostoKey, sourceCollectionTitle) => __awaiter(void 0, void 0, void 0, function* () {
|
|
68
|
+
const fetchCategoryPageRecommendations = (nostoKey, sourceCollectionTitle, optionalSessionId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
60
69
|
var _g, _h, _j;
|
|
61
|
-
const
|
|
62
|
-
const sessionId = sessionData.data.newSession;
|
|
70
|
+
const sessionId = yield resolveSessionId(nostoKey, optionalSessionId);
|
|
63
71
|
const body = categoryPageRecommendationsQuery(sessionId, sourceCollectionTitle);
|
|
64
72
|
const response = yield fetchNosto(nostoKey, body, "cors");
|
|
65
73
|
return getProductIdsFromPageResponse((_j = (_h = (_g = response.data) === null || _g === void 0 ? void 0 : _g.updateSession) === null || _h === void 0 ? void 0 : _h.pages) === null || _j === void 0 ? void 0 : _j.forCategoryPage);
|
|
@@ -78,21 +86,21 @@ const fetchRelatedProductsRecommendations = (nostoKey, recommendationsType, prod
|
|
|
78
86
|
const recommendedProductIds = ((_s = (_r = (_q = (_p = response === null || response === void 0 ? void 0 : response.data) === null || _p === void 0 ? void 0 : _p.recos) === null || _q === void 0 ? void 0 : _q.related) === null || _r === void 0 ? void 0 : _r.primary) === null || _s === void 0 ? void 0 : _s.map((item) => item.productId)) || [];
|
|
79
87
|
return recommendedProductIds;
|
|
80
88
|
});
|
|
81
|
-
const fetchPDPFallbackRecommendations = (nostoKey, productId, recommendationsType = NostoRecommendationsType.BOUGHT_TOGETHER) => __awaiter(void 0, void 0, void 0, function* () {
|
|
89
|
+
const fetchPDPFallbackRecommendations = (nostoKey, productId, recommendationsType = NostoRecommendationsType.BOUGHT_TOGETHER, sessionId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
82
90
|
switch (recommendationsType) {
|
|
83
91
|
case NostoRecommendationsType.VIEWED_CATEGORY:
|
|
84
|
-
return fetchCategoryPageRecommendations(nostoKey, productId);
|
|
92
|
+
return fetchCategoryPageRecommendations(nostoKey, productId, sessionId);
|
|
85
93
|
case NostoRecommendationsType.BEST_SELLERS:
|
|
86
94
|
return fetchBestSellersRecommendations(nostoKey);
|
|
87
95
|
default:
|
|
88
96
|
return fetchRelatedProductsRecommendations(nostoKey, recommendationsType, [productId]);
|
|
89
97
|
}
|
|
90
98
|
});
|
|
91
|
-
const fetchHomeRecommendations = (nostoKey, slotId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
99
|
+
const fetchHomeRecommendations = (nostoKey, slotId, sessionId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
92
100
|
let productIdRecommendations = [];
|
|
93
101
|
if (slotId) {
|
|
94
102
|
try {
|
|
95
|
-
productIdRecommendations = yield fetchFrontPageRecommendations(nostoKey, slotId);
|
|
103
|
+
productIdRecommendations = yield fetchFrontPageRecommendations(nostoKey, slotId, sessionId);
|
|
96
104
|
if (productIdRecommendations.length === 0) {
|
|
97
105
|
productIdRecommendations = yield fetchBestSellersRecommendations(nostoKey);
|
|
98
106
|
}
|
|
@@ -106,37 +114,37 @@ const fetchHomeRecommendations = (nostoKey, slotId) => __awaiter(void 0, void 0,
|
|
|
106
114
|
}
|
|
107
115
|
return productIdRecommendations;
|
|
108
116
|
});
|
|
109
|
-
const fetchPDPRecommendations = (nostoKey, productId, slotId, recommendationsType = NostoRecommendationsType.BOUGHT_TOGETHER) => __awaiter(void 0, void 0, void 0, function* () {
|
|
117
|
+
const fetchPDPRecommendations = (nostoKey, productId, slotId, recommendationsType = NostoRecommendationsType.BOUGHT_TOGETHER, sessionId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
110
118
|
let productIdRecommendations = [];
|
|
111
119
|
if (slotId) {
|
|
112
120
|
try {
|
|
113
|
-
productIdRecommendations = yield fetchProductPageRecommendations(nostoKey, productId, slotId);
|
|
121
|
+
productIdRecommendations = yield fetchProductPageRecommendations(nostoKey, productId, slotId, sessionId);
|
|
114
122
|
if (productIdRecommendations.length === 0) {
|
|
115
|
-
productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType);
|
|
123
|
+
productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType, sessionId);
|
|
116
124
|
}
|
|
117
125
|
}
|
|
118
126
|
catch (error) {
|
|
119
|
-
productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType);
|
|
127
|
+
productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType, sessionId);
|
|
120
128
|
}
|
|
121
129
|
}
|
|
122
130
|
else {
|
|
123
|
-
productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType);
|
|
131
|
+
productIdRecommendations = yield fetchPDPFallbackRecommendations(nostoKey, productId, recommendationsType, sessionId);
|
|
124
132
|
}
|
|
125
133
|
return productIdRecommendations;
|
|
126
134
|
});
|
|
127
|
-
const getProductIdRecommendations = (nostoKey, slotId = "", recommendationsType, productIds, skip) => __awaiter(void 0, void 0, void 0, function* () {
|
|
135
|
+
const getProductIdRecommendations = (nostoKey, slotId = "", recommendationsType, productIds, skip, sessionId) => __awaiter(void 0, void 0, void 0, function* () {
|
|
128
136
|
if (skip) {
|
|
129
137
|
return [];
|
|
130
138
|
}
|
|
131
139
|
const isPDP = productIds && productIds.length > 0;
|
|
132
140
|
if (isPDP) {
|
|
133
|
-
return fetchPDPRecommendations(nostoKey, productIds[0], slotId, recommendationsType);
|
|
141
|
+
return fetchPDPRecommendations(nostoKey, productIds[0], slotId, recommendationsType, sessionId);
|
|
134
142
|
}
|
|
135
143
|
else {
|
|
136
|
-
return fetchHomeRecommendations(nostoKey, slotId);
|
|
144
|
+
return fetchHomeRecommendations(nostoKey, slotId, sessionId);
|
|
137
145
|
}
|
|
138
146
|
});
|
|
139
|
-
function useNostoRecommendationsProductIds(nostoKey, slotId = "", recommendationsType, productIds, skip) {
|
|
147
|
+
function useNostoRecommendationsProductIds(nostoKey, slotId = "", recommendationsType, productIds, skip, sessionId) {
|
|
140
148
|
const [recommendedProductIds, setRecommendedProductIds] = useState([]);
|
|
141
149
|
const [isLoading, setIsLoading] = useState(true);
|
|
142
150
|
const [error, setError] = useState(null);
|
|
@@ -148,7 +156,7 @@ function useNostoRecommendationsProductIds(nostoKey, slotId = "", recommendation
|
|
|
148
156
|
setRecommendedProductIds([]);
|
|
149
157
|
}
|
|
150
158
|
else {
|
|
151
|
-
const productIdRecommendations = yield getProductIdRecommendations(nostoKey, slotId, recommendationsType, productIds, skip);
|
|
159
|
+
const productIdRecommendations = yield getProductIdRecommendations(nostoKey, slotId, recommendationsType, productIds, skip, sessionId);
|
|
152
160
|
setRecommendedProductIds(productIdRecommendations);
|
|
153
161
|
}
|
|
154
162
|
}
|
|
@@ -162,20 +170,26 @@ function useNostoRecommendationsProductIds(nostoKey, slotId = "", recommendation
|
|
|
162
170
|
});
|
|
163
171
|
}
|
|
164
172
|
fetchNostoData();
|
|
165
|
-
}, [nostoKey, slotId, recommendationsType, productIds, skip]);
|
|
173
|
+
}, [nostoKey, slotId, recommendationsType, productIds, skip, sessionId]);
|
|
166
174
|
return {
|
|
167
175
|
recommendedProductIds,
|
|
168
176
|
isLoading,
|
|
169
177
|
error,
|
|
170
178
|
};
|
|
171
179
|
}
|
|
172
|
-
export function useNostoRecommendations(integrations, baseURL, slotId = "", country = "US", recommendationsType, productIds, skip, mockFallback, mockFallbackAppId) {
|
|
180
|
+
export function useNostoRecommendations(integrations, baseURL, slotId = "", country = "US", recommendationsType, productIds, skip, mockFallback, mockFallbackAppId, session) {
|
|
173
181
|
var _a;
|
|
174
182
|
if (recommendationsType === "") {
|
|
175
183
|
recommendationsType = NostoRecommendationsType.BOUGHT_TOGETHER;
|
|
176
184
|
}
|
|
177
185
|
const nostoKey = (_a = integrations.find((integration) => integration.name === "nosto")) === null || _a === void 0 ? void 0 : _a.key;
|
|
178
|
-
|
|
186
|
+
let sessionId = null;
|
|
187
|
+
if ((session === null || session === void 0 ? void 0 : session.sessionId) &&
|
|
188
|
+
(session === null || session === void 0 ? void 0 : session.lastSessionEventTimestamp) >
|
|
189
|
+
Date.now() - NOSTO_SESSION_EXPIRATION_TIME) {
|
|
190
|
+
sessionId = session.sessionId;
|
|
191
|
+
}
|
|
192
|
+
const { recommendedProductIds, isLoading, error } = useNostoRecommendationsProductIds(nostoKey, slotId, recommendationsType, productIds, skip, sessionId);
|
|
179
193
|
const shouldMock = useMemo(() => recommendedProductIds.length === 0 && !isLoading && mockFallback, [recommendedProductIds, isLoading, mockFallback]);
|
|
180
194
|
const appId = shouldMock ? mockFallbackAppId : undefined;
|
|
181
195
|
const { products, error: productsError, isLoading: productsLoading, } = useProducts({
|
|
@@ -5,9 +5,9 @@ type MetafieldInput = {
|
|
|
5
5
|
key: string;
|
|
6
6
|
};
|
|
7
7
|
type UseProductsProps = {
|
|
8
|
-
productIds
|
|
9
|
-
variantIds?: string[]
|
|
10
|
-
productHandles
|
|
8
|
+
productIds?: string[];
|
|
9
|
+
variantIds?: string[];
|
|
10
|
+
productHandles?: string[];
|
|
11
11
|
baseURL: URL;
|
|
12
12
|
collection?: string;
|
|
13
13
|
queryVariables?: Record<string, any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAK1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,cAAc,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,gBAAgB,GAAG;IACtB,UAAU,EAAE,MAAM,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"use-products.d.ts","sourceRoot":"","sources":["../../../components/hooks/use-products.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAK1C,KAAK,GAAG,GAAG,MAAM,CAAA;AACjB,KAAK,cAAc,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAA;AACxD,KAAK,gBAAgB,GAAG;IACtB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,EAAE,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,OAAO,EAAE,GAAG,CAAA;IACZ,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,IAAI,KAAK,OAAO,CAAC,GAAG,CAAC,CAAA;IAC1E,UAAU,CAAC,EAAE,cAAc,EAAE,CAAA;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,qBAAqB,CAAC,EAAE,OAAO,CAAA;CAChC,CAAA;AACD,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,OAAO,EAAE,CAAA;IACnB,KAAK,EAAE,GAAG,CAAA;IACV,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,YAAY,EAAE,CAAC,OAAO,EAAE,OAAO,KAC3B;QACE,EAAE,EAAE,MAAM,CAAA;QACV,MAAM,EAAE,MAAM,CAAA;KACf,GACD,SAAS,CAAA;CACd,CAAA;AAqDD,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAG,iBAAiB,CAwJ7E"}
|
|
@@ -15,11 +15,22 @@ import ProductsLocalStorage from "../libs/cache/ProductsLocalStorage";
|
|
|
15
15
|
const isUseProductsProps = (props) => {
|
|
16
16
|
return Boolean(props);
|
|
17
17
|
};
|
|
18
|
-
const formatProductData = ({ data, onlyAvailableProducts = false, }) => {
|
|
18
|
+
const formatProductData = ({ data, onlyAvailableProducts = false, mock = false, }) => {
|
|
19
19
|
const isProductsObject = (value) => {
|
|
20
20
|
return value && "products" in value;
|
|
21
21
|
};
|
|
22
22
|
const products = isProductsObject(data) ? data.products : data || [];
|
|
23
|
+
if (mock) {
|
|
24
|
+
// Alternate availableForSale true/false for each product in the array
|
|
25
|
+
// Alternate availableForSale true/false for each product and its variants
|
|
26
|
+
const mixedProducts = products.map((product, idx) => {
|
|
27
|
+
const isAvailable = idx % 2 === 0;
|
|
28
|
+
return Object.assign(Object.assign({}, product), { availableForSale: isAvailable, variants: Array.isArray(product.variants)
|
|
29
|
+
? product.variants.map((variant, vIdx) => (Object.assign(Object.assign({}, variant), { availableForSale: isAvailable })))
|
|
30
|
+
: product.variants });
|
|
31
|
+
});
|
|
32
|
+
return mixedProducts;
|
|
33
|
+
}
|
|
23
34
|
return onlyAvailableProducts
|
|
24
35
|
? products === null || products === void 0 ? void 0 : products.filter((p) => {
|
|
25
36
|
if (!onlyAvailableProducts)
|
|
@@ -41,7 +52,7 @@ export function useProducts(props) {
|
|
|
41
52
|
}));
|
|
42
53
|
const [isProductResponseReady, setIsProductResponseReady] = React.useState((productResponse === null || productResponse === void 0 ? void 0 : productResponse.length) > 0);
|
|
43
54
|
if (isUseProductsProps(props)) {
|
|
44
|
-
let { baseURL, productIds, variantIds, productHandles, metafields, collection, queryVariables, } = props;
|
|
55
|
+
let { baseURL, productIds = [], variantIds = [], productHandles = [], metafields, collection, queryVariables, } = props;
|
|
45
56
|
if (shouldMockProducts) {
|
|
46
57
|
// In mock mode, always use direct product fetching without collections
|
|
47
58
|
queryVariables = Object.assign({}, queryVariables);
|
|
@@ -51,7 +62,7 @@ export function useProducts(props) {
|
|
|
51
62
|
if ((productIds === null || productIds === void 0 ? void 0 : productIds.length) > 0) {
|
|
52
63
|
queryParams.set("ids", getProductGidsFromIds(productIds).join(","));
|
|
53
64
|
}
|
|
54
|
-
if (
|
|
65
|
+
if ((variantIds === null || variantIds === void 0 ? void 0 : variantIds.length) > 0) {
|
|
55
66
|
queryParams.set("ids", getVariantGidsFromIds(variantIds).join(","));
|
|
56
67
|
}
|
|
57
68
|
if ((productHandles === null || productHandles === void 0 ? void 0 : productHandles.length) > 0) {
|
|
@@ -129,7 +140,8 @@ export function useProducts(props) {
|
|
|
129
140
|
return {
|
|
130
141
|
products: formatProductData({
|
|
131
142
|
data: productResponse,
|
|
132
|
-
onlyAvailableProducts:
|
|
143
|
+
onlyAvailableProducts: props === null || props === void 0 ? void 0 : props.onlyAvailableProducts,
|
|
144
|
+
mock: props === null || props === void 0 ? void 0 : props.mock,
|
|
133
145
|
}),
|
|
134
146
|
error,
|
|
135
147
|
isLoading: !isProductResponseReady,
|
|
@@ -23,7 +23,7 @@ const AccordionItem = React.forwardRef((_a, ref) => {
|
|
|
23
23
|
AccordionItem.displayName = "AccordionItem";
|
|
24
24
|
const AccordionTrigger = React.forwardRef((_a, ref) => {
|
|
25
25
|
var { className, children, showDefaultIcon = true } = _a, props = __rest(_a, ["className", "children", "showDefaultIcon"]);
|
|
26
|
-
return (_jsx(AccordionPrimitive.Header, Object.assign({ className: "flex" }, { children: _jsxs(AccordionPrimitive.Trigger, Object.assign({ ref: ref, className: cn("px-4 flex flex-1 items-center justify-between py-4 font-medium transition-all
|
|
26
|
+
return (_jsx(AccordionPrimitive.Header, Object.assign({ className: "flex" }, { children: _jsxs(AccordionPrimitive.Trigger, Object.assign({ ref: ref, className: cn("px-4 flex flex-1 items-center justify-between py-4 font-medium transition-all", { "[&[data-state=open]_svg]:rotate-180": showDefaultIcon }, className) }, props, { children: [children, showDefaultIcon && (_jsx(Icon, { name: "chevron-down", size: "sm", className: "text-coreColors-secondaryIcon shrink-0 transition-transform duration-200" }))] })) })));
|
|
27
27
|
});
|
|
28
28
|
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
|
|
29
29
|
const AccordionContent = React.forwardRef((_a, ref) => {
|
|
@@ -16,7 +16,7 @@ import { cn } from "../../lib/utils";
|
|
|
16
16
|
import React, { useState, useEffect } from "react";
|
|
17
17
|
import { Icon } from "./icon";
|
|
18
18
|
import { LoadingDots } from "./loading-dots";
|
|
19
|
-
const chipVariants = cva("inline-flex items-center justify-center rounded border border-coreColors-dividingLines text-[12px] transition-colors h-8
|
|
19
|
+
const chipVariants = cva("inline-flex items-center justify-center rounded border border-coreColors-dividingLines text-[12px] transition-colors h-8 cursor-pointer", {
|
|
20
20
|
variants: {
|
|
21
21
|
variant: {
|
|
22
22
|
primary: "bg-coreColors-pageColor text-textColors-primaryColor",
|
|
@@ -54,7 +54,7 @@ const Favorite = (_a) => {
|
|
|
54
54
|
console.error(error);
|
|
55
55
|
}
|
|
56
56
|
};
|
|
57
|
-
return (_jsx("button", Object.assign({ onClick: onClick, className: cn("cursor-pointer
|
|
57
|
+
return (_jsx("button", Object.assign({ onClick: onClick, className: cn("cursor-pointer", favoriteVariants({
|
|
58
58
|
size,
|
|
59
59
|
showBackgroundShadow,
|
|
60
60
|
layoutType,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"loading-dots.d.ts","sourceRoot":"","sources":["../../../components/ui/loading-dots.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"loading-dots.d.ts","sourceRoot":"","sources":["../../../components/ui/loading-dots.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,gBAAgB;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACvB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB;AAED,eAAO,MAAM,WAAW,iEAOrB,gBAAgB,mDA6ClB,CAAA"}
|
|
@@ -188,7 +188,7 @@ const ProductCard = ({ config, tapcartData, product, isLoading, favorited, onFav
|
|
|
188
188
|
};
|
|
189
189
|
const sizes = getImageSizes(config);
|
|
190
190
|
const imageSwipeEnabled = ((_e = config.productImage) === null || _e === void 0 ? void 0 : _e.allowSwipeability) && product.images.length > 1;
|
|
191
|
-
return (_jsx("div", Object.assign({ className: cn("w-1/2", className) }, { children: _jsxs("div", Object.assign({ className: "w-full
|
|
191
|
+
return (_jsx("div", Object.assign({ className: cn("w-1/2", className) }, { children: _jsxs("div", Object.assign({ className: "w-full cursor-pointer", onClick: () => {
|
|
192
192
|
_openProduct();
|
|
193
193
|
}, onKeyDown: (e) => {
|
|
194
194
|
if (e.key === "Enter" || e.key === " ") {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quantity-pickerNEW.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-pickerNEW.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CAC5C;
|
|
1
|
+
{"version":3,"file":"quantity-pickerNEW.d.ts","sourceRoot":"","sources":["../../../components/ui/quantity-pickerNEW.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,eAAe,EAAE,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAA;IACxC,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAChC,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACjC,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;CAC5C;AAgED,QAAA,MAAM,iBAAiB,+FA0KtB,CAAA;AAID,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
|
|
@@ -27,9 +27,7 @@ const IconButton = ({ iconUrl, iconColor, handler, className, style, disabled })
|
|
|
27
27
|
}, []);
|
|
28
28
|
// Calculate the visual styles for the button
|
|
29
29
|
const visualButtonStyle = Object.assign({}, style);
|
|
30
|
-
return (_jsxs("div", Object.assign({ className: "relative h-7 w-7", style: { touchAction: "manipulation" } }, { children: [_jsx("div", Object.assign({ className: cn("absolute inset-0 flex items-center justify-center bg-stateColors-skeleton border border-coreColors-dividingLines", className, disabled ? "opacity-50" : ""), style: visualButtonStyle, "aria-hidden": "true" }, { children: _jsx(Icon, { url: iconUrl, size: "sm", strokeColor: iconColor, strokeWidth: 4, style: {
|
|
31
|
-
opacity: isButtonPressed ? 0.7 : 1,
|
|
32
|
-
} }) })), _jsx("button", { onClick: handler, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleMouseDown, onTouchEnd: handleMouseUp, onTouchCancel: handleMouseUp, className: "absolute cursor-pointer", style: {
|
|
30
|
+
return (_jsxs("div", Object.assign({ className: "relative h-7 w-7", style: { touchAction: "manipulation" } }, { children: [_jsx("div", Object.assign({ className: cn("absolute inset-0 flex items-center justify-center bg-stateColors-skeleton border border-coreColors-dividingLines", className, disabled ? "opacity-50" : ""), style: visualButtonStyle, "aria-hidden": "true" }, { children: _jsx(Icon, { url: iconUrl, size: "sm", strokeColor: iconColor, strokeWidth: 4 }) })), _jsx("button", { onClick: handler, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onTouchStart: handleMouseDown, onTouchEnd: handleMouseUp, onTouchCancel: handleMouseUp, className: "absolute cursor-pointer", style: {
|
|
33
31
|
top: "-8px",
|
|
34
32
|
right: "-8px",
|
|
35
33
|
bottom: "-8px",
|
|
@@ -37,7 +37,7 @@ const radiogroupItemVariants = cva("grid grid-cols-[auto,auto,1fr] gap-2 items-c
|
|
|
37
37
|
const RadioGroupItemLabels = ({ label, numberAmount, subtext, }) => (_jsxs("div", Object.assign({ className: "col-span-2" }, { children: [_jsxs("div", Object.assign({ className: "flex flex-row items-center" }, { children: [_jsx(Text, Object.assign({ type: "body-primary", className: "group-disabled:text-stateColors-disabled mr-2" }, { children: label })), numberAmount ? (_jsx(Text, Object.assign({ type: "body-primary", className: "text-textColors-secondaryColor group-disabled:text-stateColors-disabled" }, { children: `(${numberAmount})` }))) : null] })), subtext ? (_jsx(Text, Object.assign({ type: "body-secondary", className: "group-disabled:text-stateColors-disabled mt-1" }, { children: subtext }))) : null] })));
|
|
38
38
|
const RadioGroupItem = (_a) => {
|
|
39
39
|
var { value, label = "", subtext, numberAmount = 0, onSelect = () => { }, onClick = () => { }, selected = false, className, variant = "default" } = _a, props = __rest(_a, ["value", "label", "subtext", "numberAmount", "onSelect", "onClick", "selected", "className", "variant"]);
|
|
40
|
-
return (_jsx("div", Object.assign({ className: cn(radiogroupItemVariants({ variant }), className) }, { children: variant === "deactivated" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-off", size: "md", className: "text-stateColors-disabled" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] })) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ value: value, onSelect: onSelect, checked: selected, onClick: onClick, className: cn("flex items-center justify-center
|
|
40
|
+
return (_jsx("div", Object.assign({ className: cn(radiogroupItemVariants({ variant }), className) }, { children: variant === "deactivated" ? (_jsxs(_Fragment, { children: [_jsx(Icon, { name: "circle-off", size: "md", className: "text-stateColors-disabled" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] })) : (_jsx(RadioGroupPrimitive.Item, Object.assign({ value: value, onSelect: onSelect, checked: selected, onClick: onClick, className: cn("flex items-center justify-center cursor-pointer", className) }, props, { children: selected || variant === "selected" ? (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] }))) : (_jsxs("div", Object.assign({ className: "grid grid-cols-[auto,auto,1fr] gap-2 items-center group" }, { children: [_jsxs("div", Object.assign({ className: "grid" }, { children: [_jsx(RadioGroupPrimitive.Indicator, Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle-dot-filled", size: "md", className: "text-coreColors-brandColorPrimary z-10" }) })), _jsx("div", Object.assign({ className: "flex items-center justify-center col-start-1 row-start-1" }, { children: _jsx(Icon, { name: "circle", size: "md", className: "col-start-1 row-start-1 text-coreColors-secondaryIcon items-center z-1" }) }))] })), _jsx(RadioGroupItemLabels, { label: label, numberAmount: numberAmount, subtext: subtext })] }))) }))) })));
|
|
41
41
|
};
|
|
42
42
|
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
|
|
43
43
|
export { RadioGroup, RadioGroupItem, radiogroupItemVariants };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;QACzB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;QACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAChC,EAAE,CAAA;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACvC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../components/ui/tabs.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,IAAI,EAAE;QACJ,KAAK,EAAE,MAAM,CAAA;QACb,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;QACzB,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;QACjC,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;KAChC,EAAE,CAAA;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IACvC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,WAAW,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AA8CD,QAAA,MAAM,IAAI,kFAgIT,CAAA;AAGD,OAAO,EAAE,IAAI,EAAE,CAAA"}
|
|
@@ -15,7 +15,7 @@ import * as React from "react";
|
|
|
15
15
|
import { cva } from "class-variance-authority";
|
|
16
16
|
import { cn } from "../../lib/utils";
|
|
17
17
|
import { Text } from "./text";
|
|
18
|
-
const tabVariants = cva("flex items-center justify-center px-4 py-2
|
|
18
|
+
const tabVariants = cva("flex items-center justify-center px-4 py-2", {
|
|
19
19
|
variants: {
|
|
20
20
|
isActive: {
|
|
21
21
|
true: "[&>p]:text-textColors-primaryColor",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tap.d.ts","sourceRoot":"","sources":["../../../components/ui/tap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACV,MAAM,OAAO,CAAA;AAyFd,QAAA,MAAM,MAAM;6BAyBU,GAAG,KAAK,IAAI,aACb,GAAG;;;CA2BvB,CAAA;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"tap.d.ts","sourceRoot":"","sources":["../../../components/ui/tap.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAMZ,SAAS,EACV,MAAM,OAAO,CAAA;AAyFd,QAAA,MAAM,MAAM;6BAyBU,GAAG,KAAK,IAAI,aACb,GAAG;;;CA2BvB,CAAA;AAED,UAAU,QAAQ;IAChB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAsC3B,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,CAAA"}
|
|
@@ -131,7 +131,7 @@ const Tap = ({ children }) => {
|
|
|
131
131
|
return;
|
|
132
132
|
}
|
|
133
133
|
})(event);
|
|
134
|
-
}, style: Object.assign(Object.assign({}, element.props.style), { cursor: "pointer"
|
|
134
|
+
}, style: Object.assign(Object.assign({}, element.props.style), { cursor: "pointer" }) }));
|
|
135
135
|
};
|
|
136
136
|
const cloneChildren = (children) => {
|
|
137
137
|
return React.Children.map(children, (child) => {
|
|
@@ -15,7 +15,7 @@ import * as React from "react";
|
|
|
15
15
|
import * as TogglePrimitive from "@radix-ui/react-toggle";
|
|
16
16
|
import { cva } from "class-variance-authority";
|
|
17
17
|
import { cn } from "../../lib/utils";
|
|
18
|
-
const toggleVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground
|
|
18
|
+
const toggleVariants = cva("inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground", {
|
|
19
19
|
variants: {
|
|
20
20
|
variant: {
|
|
21
21
|
default: "bg-transparent",
|
package/dist/lib/utils.d.ts
CHANGED
|
@@ -139,6 +139,8 @@ export type TextStyle = {
|
|
|
139
139
|
uppercase: boolean;
|
|
140
140
|
textAlignment: "left" | "center" | "right" | "justify";
|
|
141
141
|
wrapText: boolean;
|
|
142
|
+
lineHeight?: number;
|
|
143
|
+
letterSpacing?: number;
|
|
142
144
|
};
|
|
143
145
|
type Headline = TextStyle;
|
|
144
146
|
type Subtext = TextStyle;
|
package/dist/lib/utils.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/utils.ts"],"names":[],"mappings":"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"}
|
package/dist/lib/utils.js
CHANGED
|
@@ -134,13 +134,15 @@ export const getBackgroundAndSpacingStyle = (backgroundAndSpacing) => {
|
|
|
134
134
|
};
|
|
135
135
|
};
|
|
136
136
|
export const getTextStyle = (textStyle) => {
|
|
137
|
-
const { font, size, color, uppercase, textAlignment, wrapText } = textStyle;
|
|
137
|
+
const { font, size, color, uppercase, textAlignment, wrapText, lineHeight, letterSpacing, } = textStyle;
|
|
138
138
|
const isItalic = font.family &&
|
|
139
139
|
typeof font.family === "string" &&
|
|
140
140
|
font.family.toLowerCase().includes("italic");
|
|
141
|
-
return Object.assign({ fontFamily: font.family === "initial" || font.family === "SF Pro Text"
|
|
141
|
+
return Object.assign(Object.assign(Object.assign({ fontFamily: font.family === "initial" || font.family === "SF Pro Text"
|
|
142
142
|
? undefined
|
|
143
|
-
: font.family, fontWeight: font.weight === "initial" ? undefined : font.weight, fontSize: size, color: getColor(color), textTransform: uppercase ? "uppercase" : "none", textAlign: textAlignment, textWrap: wrapText ? "wrap" : "nowrap" }, (isItalic ? { fontStyle: "italic" } : {}))
|
|
143
|
+
: font.family, fontWeight: font.weight === "initial" ? undefined : font.weight, fontSize: size, color: getColor(color), textTransform: uppercase ? "uppercase" : "none", textAlign: textAlignment, textWrap: wrapText ? "wrap" : "nowrap" }, (isItalic ? { fontStyle: "italic" } : {})), (lineHeight !== undefined ? { lineHeight } : {})), (letterSpacing !== undefined
|
|
144
|
+
? { letterSpacing: `${letterSpacing}px` }
|
|
145
|
+
: {}));
|
|
144
146
|
};
|
|
145
147
|
export const getVerticalAlignment = (alignment, padding = { top: 0, bottom: 0 }) => {
|
|
146
148
|
if (alignment === "bottom") {
|
package/dist/styles.css
CHANGED
|
@@ -1974,6 +1974,9 @@ video {
|
|
|
1974
1974
|
.pr-1 {
|
|
1975
1975
|
padding-right: 0.25rem;
|
|
1976
1976
|
}
|
|
1977
|
+
.pr-10 {
|
|
1978
|
+
padding-right: 2.5rem;
|
|
1979
|
+
}
|
|
1977
1980
|
.pr-2 {
|
|
1978
1981
|
padding-right: 0.5rem;
|
|
1979
1982
|
}
|
|
@@ -2635,15 +2638,6 @@ body::-webkit-scrollbar {
|
|
|
2635
2638
|
border-color: var(--coreColors-brandColorPrimary);
|
|
2636
2639
|
}
|
|
2637
2640
|
|
|
2638
|
-
.hover\:bg-gray-100:hover {
|
|
2639
|
-
--tw-bg-opacity: 1;
|
|
2640
|
-
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
|
|
2641
|
-
}
|
|
2642
|
-
|
|
2643
|
-
.hover\:opacity-90:hover {
|
|
2644
|
-
opacity: 0.9;
|
|
2645
|
-
}
|
|
2646
|
-
|
|
2647
2641
|
.focus\:border-coreColors-brandColorPrimary:focus {
|
|
2648
2642
|
border-color: var(--coreColors-brandColorPrimary);
|
|
2649
2643
|
}
|
|
@@ -2721,10 +2715,6 @@ body::-webkit-scrollbar {
|
|
|
2721
2715
|
color: var(--coreColors-brandColorPrimary);
|
|
2722
2716
|
}
|
|
2723
2717
|
|
|
2724
|
-
.active\:opacity-70:active {
|
|
2725
|
-
opacity: 0.7;
|
|
2726
|
-
}
|
|
2727
|
-
|
|
2728
2718
|
.active\:outline-coreColors-brandColorPrimary:active {
|
|
2729
2719
|
outline-color: var(--coreColors-brandColorPrimary);
|
|
2730
2720
|
}
|
package/dist/tests/utils.test.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { getDestinationHandler } from "../lib/utils";
|
|
1
|
+
import { getDestinationHandler, getTextStyle } from "../lib/utils";
|
|
2
2
|
describe("DESTINATION_HANDLERS", () => {
|
|
3
3
|
describe("url handler", () => {
|
|
4
4
|
const mockActions = {
|
|
@@ -32,3 +32,580 @@ describe("DESTINATION_HANDLERS", () => {
|
|
|
32
32
|
});
|
|
33
33
|
});
|
|
34
34
|
});
|
|
35
|
+
describe("getTextStyle", () => {
|
|
36
|
+
describe("basic functionality", () => {
|
|
37
|
+
it("should return correct CSS properties for basic text style", () => {
|
|
38
|
+
const textStyle = {
|
|
39
|
+
font: {
|
|
40
|
+
family: "Arial",
|
|
41
|
+
weight: 400,
|
|
42
|
+
},
|
|
43
|
+
size: 16,
|
|
44
|
+
color: { type: "custom", value: "#000000" },
|
|
45
|
+
uppercase: false,
|
|
46
|
+
textAlignment: "left",
|
|
47
|
+
wrapText: true,
|
|
48
|
+
};
|
|
49
|
+
const result = getTextStyle(textStyle);
|
|
50
|
+
expect(result).toEqual({
|
|
51
|
+
fontFamily: "Arial",
|
|
52
|
+
fontWeight: 400,
|
|
53
|
+
fontSize: 16,
|
|
54
|
+
color: "#000000",
|
|
55
|
+
textTransform: "none",
|
|
56
|
+
textAlign: "left",
|
|
57
|
+
textWrap: "wrap",
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
it("should handle all text alignment options", () => {
|
|
61
|
+
const alignments = ["left", "center", "right", "justify"];
|
|
62
|
+
alignments.forEach((alignment) => {
|
|
63
|
+
const textStyle = {
|
|
64
|
+
font: { family: "Arial", weight: 400 },
|
|
65
|
+
size: 16,
|
|
66
|
+
color: { type: "custom", value: "#000000" },
|
|
67
|
+
uppercase: false,
|
|
68
|
+
textAlignment: alignment,
|
|
69
|
+
wrapText: true,
|
|
70
|
+
};
|
|
71
|
+
const result = getTextStyle(textStyle);
|
|
72
|
+
expect(result.textAlign).toBe(alignment);
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
});
|
|
76
|
+
describe("font family handling", () => {
|
|
77
|
+
it("should return undefined for 'initial' font family", () => {
|
|
78
|
+
const textStyle = {
|
|
79
|
+
font: {
|
|
80
|
+
family: "initial",
|
|
81
|
+
weight: 400,
|
|
82
|
+
},
|
|
83
|
+
size: 16,
|
|
84
|
+
color: { type: "custom", value: "#000000" },
|
|
85
|
+
uppercase: false,
|
|
86
|
+
textAlignment: "left",
|
|
87
|
+
wrapText: true,
|
|
88
|
+
};
|
|
89
|
+
const result = getTextStyle(textStyle);
|
|
90
|
+
expect(result.fontFamily).toBeUndefined();
|
|
91
|
+
});
|
|
92
|
+
it("should return undefined for 'SF Pro Text' font family", () => {
|
|
93
|
+
const textStyle = {
|
|
94
|
+
font: {
|
|
95
|
+
family: "SF Pro Text",
|
|
96
|
+
weight: 400,
|
|
97
|
+
},
|
|
98
|
+
size: 16,
|
|
99
|
+
color: { type: "custom", value: "#000000" },
|
|
100
|
+
uppercase: false,
|
|
101
|
+
textAlignment: "left",
|
|
102
|
+
wrapText: true,
|
|
103
|
+
};
|
|
104
|
+
const result = getTextStyle(textStyle);
|
|
105
|
+
expect(result.fontFamily).toBeUndefined();
|
|
106
|
+
});
|
|
107
|
+
it("should handle custom font families", () => {
|
|
108
|
+
const textStyle = {
|
|
109
|
+
font: {
|
|
110
|
+
family: "Helvetica Neue",
|
|
111
|
+
weight: 400,
|
|
112
|
+
},
|
|
113
|
+
size: 16,
|
|
114
|
+
color: { type: "custom", value: "#000000" },
|
|
115
|
+
uppercase: false,
|
|
116
|
+
textAlignment: "left",
|
|
117
|
+
wrapText: true,
|
|
118
|
+
};
|
|
119
|
+
const result = getTextStyle(textStyle);
|
|
120
|
+
expect(result.fontFamily).toBe("Helvetica Neue");
|
|
121
|
+
});
|
|
122
|
+
});
|
|
123
|
+
describe("font weight handling", () => {
|
|
124
|
+
it("should return undefined for 'initial' font weight", () => {
|
|
125
|
+
const textStyle = {
|
|
126
|
+
font: {
|
|
127
|
+
family: "Arial",
|
|
128
|
+
weight: "initial",
|
|
129
|
+
},
|
|
130
|
+
size: 16,
|
|
131
|
+
color: { type: "custom", value: "#000000" },
|
|
132
|
+
uppercase: false,
|
|
133
|
+
textAlignment: "left",
|
|
134
|
+
wrapText: true,
|
|
135
|
+
};
|
|
136
|
+
const result = getTextStyle(textStyle);
|
|
137
|
+
expect(result.fontWeight).toBeUndefined();
|
|
138
|
+
});
|
|
139
|
+
it("should handle numeric font weights", () => {
|
|
140
|
+
const weights = [100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
141
|
+
weights.forEach((weight) => {
|
|
142
|
+
const textStyle = {
|
|
143
|
+
font: { family: "Arial", weight },
|
|
144
|
+
size: 16,
|
|
145
|
+
color: { type: "custom", value: "#000000" },
|
|
146
|
+
uppercase: false,
|
|
147
|
+
textAlignment: "left",
|
|
148
|
+
wrapText: true,
|
|
149
|
+
};
|
|
150
|
+
const result = getTextStyle(textStyle);
|
|
151
|
+
expect(result.fontWeight).toBe(weight);
|
|
152
|
+
});
|
|
153
|
+
});
|
|
154
|
+
it("should handle string font weights", () => {
|
|
155
|
+
const textStyle = {
|
|
156
|
+
font: {
|
|
157
|
+
family: "Arial",
|
|
158
|
+
weight: "bold",
|
|
159
|
+
},
|
|
160
|
+
size: 16,
|
|
161
|
+
color: { type: "custom", value: "#000000" },
|
|
162
|
+
uppercase: false,
|
|
163
|
+
textAlignment: "left",
|
|
164
|
+
wrapText: true,
|
|
165
|
+
};
|
|
166
|
+
const result = getTextStyle(textStyle);
|
|
167
|
+
expect(result.fontWeight).toBe("bold");
|
|
168
|
+
});
|
|
169
|
+
});
|
|
170
|
+
describe("italic detection", () => {
|
|
171
|
+
it("should detect italic in font family name (lowercase)", () => {
|
|
172
|
+
const textStyle = {
|
|
173
|
+
font: {
|
|
174
|
+
family: "Arial Italic",
|
|
175
|
+
weight: 400,
|
|
176
|
+
},
|
|
177
|
+
size: 16,
|
|
178
|
+
color: { type: "custom", value: "#000000" },
|
|
179
|
+
uppercase: false,
|
|
180
|
+
textAlignment: "left",
|
|
181
|
+
wrapText: true,
|
|
182
|
+
};
|
|
183
|
+
const result = getTextStyle(textStyle);
|
|
184
|
+
expect(result.fontStyle).toBe("italic");
|
|
185
|
+
});
|
|
186
|
+
it("should detect italic in font family name (mixed case)", () => {
|
|
187
|
+
const textStyle = {
|
|
188
|
+
font: {
|
|
189
|
+
family: "Helvetica-Italic",
|
|
190
|
+
weight: 400,
|
|
191
|
+
},
|
|
192
|
+
size: 16,
|
|
193
|
+
color: { type: "custom", value: "#000000" },
|
|
194
|
+
uppercase: false,
|
|
195
|
+
textAlignment: "left",
|
|
196
|
+
wrapText: true,
|
|
197
|
+
};
|
|
198
|
+
const result = getTextStyle(textStyle);
|
|
199
|
+
expect(result.fontStyle).toBe("italic");
|
|
200
|
+
});
|
|
201
|
+
it("should detect italic in font family name (uppercase)", () => {
|
|
202
|
+
const textStyle = {
|
|
203
|
+
font: {
|
|
204
|
+
family: "Times New Roman ITALIC",
|
|
205
|
+
weight: 400,
|
|
206
|
+
},
|
|
207
|
+
size: 16,
|
|
208
|
+
color: { type: "custom", value: "#000000" },
|
|
209
|
+
uppercase: false,
|
|
210
|
+
textAlignment: "left",
|
|
211
|
+
wrapText: true,
|
|
212
|
+
};
|
|
213
|
+
const result = getTextStyle(textStyle);
|
|
214
|
+
expect(result.fontStyle).toBe("italic");
|
|
215
|
+
});
|
|
216
|
+
it("should not add fontStyle when italic is not in font family name", () => {
|
|
217
|
+
const textStyle = {
|
|
218
|
+
font: {
|
|
219
|
+
family: "Arial Bold",
|
|
220
|
+
weight: 400,
|
|
221
|
+
},
|
|
222
|
+
size: 16,
|
|
223
|
+
color: { type: "custom", value: "#000000" },
|
|
224
|
+
uppercase: false,
|
|
225
|
+
textAlignment: "left",
|
|
226
|
+
wrapText: true,
|
|
227
|
+
};
|
|
228
|
+
const result = getTextStyle(textStyle);
|
|
229
|
+
expect(result.fontStyle).toBeUndefined();
|
|
230
|
+
});
|
|
231
|
+
it("should handle non-string font family", () => {
|
|
232
|
+
const textStyle = {
|
|
233
|
+
font: {
|
|
234
|
+
family: null,
|
|
235
|
+
weight: 400,
|
|
236
|
+
},
|
|
237
|
+
size: 16,
|
|
238
|
+
color: { type: "custom", value: "#000000" },
|
|
239
|
+
uppercase: false,
|
|
240
|
+
textAlignment: "left",
|
|
241
|
+
wrapText: true,
|
|
242
|
+
};
|
|
243
|
+
const result = getTextStyle(textStyle);
|
|
244
|
+
expect(result.fontStyle).toBeUndefined();
|
|
245
|
+
});
|
|
246
|
+
});
|
|
247
|
+
describe("text transformation", () => {
|
|
248
|
+
it("should apply uppercase transformation when uppercase is true", () => {
|
|
249
|
+
const textStyle = {
|
|
250
|
+
font: { family: "Arial", weight: 400 },
|
|
251
|
+
size: 16,
|
|
252
|
+
color: { type: "custom", value: "#000000" },
|
|
253
|
+
uppercase: true,
|
|
254
|
+
textAlignment: "left",
|
|
255
|
+
wrapText: true,
|
|
256
|
+
};
|
|
257
|
+
const result = getTextStyle(textStyle);
|
|
258
|
+
expect(result.textTransform).toBe("uppercase");
|
|
259
|
+
});
|
|
260
|
+
it("should apply none transformation when uppercase is false", () => {
|
|
261
|
+
const textStyle = {
|
|
262
|
+
font: { family: "Arial", weight: 400 },
|
|
263
|
+
size: 16,
|
|
264
|
+
color: { type: "custom", value: "#000000" },
|
|
265
|
+
uppercase: false,
|
|
266
|
+
textAlignment: "left",
|
|
267
|
+
wrapText: true,
|
|
268
|
+
};
|
|
269
|
+
const result = getTextStyle(textStyle);
|
|
270
|
+
expect(result.textTransform).toBe("none");
|
|
271
|
+
});
|
|
272
|
+
});
|
|
273
|
+
describe("text wrapping", () => {
|
|
274
|
+
it("should set textWrap to 'wrap' when wrapText is true", () => {
|
|
275
|
+
const textStyle = {
|
|
276
|
+
font: { family: "Arial", weight: 400 },
|
|
277
|
+
size: 16,
|
|
278
|
+
color: { type: "custom", value: "#000000" },
|
|
279
|
+
uppercase: false,
|
|
280
|
+
textAlignment: "left",
|
|
281
|
+
wrapText: true,
|
|
282
|
+
};
|
|
283
|
+
const result = getTextStyle(textStyle);
|
|
284
|
+
expect(result.textWrap).toBe("wrap");
|
|
285
|
+
});
|
|
286
|
+
it("should set textWrap to 'nowrap' when wrapText is false", () => {
|
|
287
|
+
const textStyle = {
|
|
288
|
+
font: { family: "Arial", weight: 400 },
|
|
289
|
+
size: 16,
|
|
290
|
+
color: { type: "custom", value: "#000000" },
|
|
291
|
+
uppercase: false,
|
|
292
|
+
textAlignment: "left",
|
|
293
|
+
wrapText: false,
|
|
294
|
+
};
|
|
295
|
+
const result = getTextStyle(textStyle);
|
|
296
|
+
expect(result.textWrap).toBe("nowrap");
|
|
297
|
+
});
|
|
298
|
+
});
|
|
299
|
+
describe("color handling", () => {
|
|
300
|
+
it("should handle custom colors", () => {
|
|
301
|
+
const customColor = { type: "custom", value: "#ff0000" };
|
|
302
|
+
const textStyle = {
|
|
303
|
+
font: { family: "Arial", weight: 400 },
|
|
304
|
+
size: 16,
|
|
305
|
+
color: customColor,
|
|
306
|
+
uppercase: false,
|
|
307
|
+
textAlignment: "left",
|
|
308
|
+
wrapText: true,
|
|
309
|
+
};
|
|
310
|
+
const result = getTextStyle(textStyle);
|
|
311
|
+
expect(result.color).toBe("#ff0000"); // getColor returns the value for custom colors
|
|
312
|
+
});
|
|
313
|
+
it("should handle brand-kit colors", () => {
|
|
314
|
+
const brandColor = { type: "brand-kit", value: "primary" };
|
|
315
|
+
const textStyle = {
|
|
316
|
+
font: { family: "Arial", weight: 400 },
|
|
317
|
+
size: 16,
|
|
318
|
+
color: brandColor,
|
|
319
|
+
uppercase: false,
|
|
320
|
+
textAlignment: "left",
|
|
321
|
+
wrapText: true,
|
|
322
|
+
};
|
|
323
|
+
const result = getTextStyle(textStyle);
|
|
324
|
+
expect(result.color).toBe("var(--primary)"); // getColor returns var(--value) for brand-kit colors
|
|
325
|
+
});
|
|
326
|
+
it("should handle undefined color", () => {
|
|
327
|
+
const textStyle = {
|
|
328
|
+
font: { family: "Arial", weight: 400 },
|
|
329
|
+
size: 16,
|
|
330
|
+
color: undefined,
|
|
331
|
+
uppercase: false,
|
|
332
|
+
textAlignment: "left",
|
|
333
|
+
wrapText: true,
|
|
334
|
+
};
|
|
335
|
+
const result = getTextStyle(textStyle);
|
|
336
|
+
expect(result.color).toBeUndefined(); // getColor returns undefined for undefined input
|
|
337
|
+
});
|
|
338
|
+
});
|
|
339
|
+
describe("font size handling", () => {
|
|
340
|
+
it("should handle numeric font sizes", () => {
|
|
341
|
+
const textStyle = {
|
|
342
|
+
font: { family: "Arial", weight: 400 },
|
|
343
|
+
size: 24,
|
|
344
|
+
color: { type: "custom", value: "#000000" },
|
|
345
|
+
uppercase: false,
|
|
346
|
+
textAlignment: "left",
|
|
347
|
+
wrapText: true,
|
|
348
|
+
};
|
|
349
|
+
const result = getTextStyle(textStyle);
|
|
350
|
+
expect(result.fontSize).toBe(24);
|
|
351
|
+
});
|
|
352
|
+
it("should handle string font sizes", () => {
|
|
353
|
+
const textStyle = {
|
|
354
|
+
font: { family: "Arial", weight: 400 },
|
|
355
|
+
size: "1.5rem",
|
|
356
|
+
color: { type: "custom", value: "#000000" },
|
|
357
|
+
uppercase: false,
|
|
358
|
+
textAlignment: "left",
|
|
359
|
+
wrapText: true,
|
|
360
|
+
};
|
|
361
|
+
const result = getTextStyle(textStyle);
|
|
362
|
+
expect(result.fontSize).toBe("1.5rem");
|
|
363
|
+
});
|
|
364
|
+
});
|
|
365
|
+
describe("line height handling", () => {
|
|
366
|
+
it("should include lineHeight when defined", () => {
|
|
367
|
+
const textStyle = {
|
|
368
|
+
font: { family: "Arial", weight: 400 },
|
|
369
|
+
size: 16,
|
|
370
|
+
color: { type: "custom", value: "#000000" },
|
|
371
|
+
uppercase: false,
|
|
372
|
+
textAlignment: "left",
|
|
373
|
+
wrapText: true,
|
|
374
|
+
lineHeight: 1.5,
|
|
375
|
+
};
|
|
376
|
+
const result = getTextStyle(textStyle);
|
|
377
|
+
expect(result.lineHeight).toBe(1.5);
|
|
378
|
+
});
|
|
379
|
+
it("should not include lineHeight when undefined", () => {
|
|
380
|
+
const textStyle = {
|
|
381
|
+
font: { family: "Arial", weight: 400 },
|
|
382
|
+
size: 16,
|
|
383
|
+
color: { type: "custom", value: "#000000" },
|
|
384
|
+
uppercase: false,
|
|
385
|
+
textAlignment: "left",
|
|
386
|
+
wrapText: true,
|
|
387
|
+
};
|
|
388
|
+
const result = getTextStyle(textStyle);
|
|
389
|
+
expect(result.lineHeight).toBeUndefined();
|
|
390
|
+
});
|
|
391
|
+
it("should handle lineHeight value of 0", () => {
|
|
392
|
+
const textStyle = {
|
|
393
|
+
font: { family: "Arial", weight: 400 },
|
|
394
|
+
size: 16,
|
|
395
|
+
color: { type: "custom", value: "#000000" },
|
|
396
|
+
uppercase: false,
|
|
397
|
+
textAlignment: "left",
|
|
398
|
+
wrapText: true,
|
|
399
|
+
lineHeight: 0,
|
|
400
|
+
};
|
|
401
|
+
const result = getTextStyle(textStyle);
|
|
402
|
+
expect(result.lineHeight).toBe(0);
|
|
403
|
+
});
|
|
404
|
+
it("should handle decimal lineHeight values", () => {
|
|
405
|
+
const textStyle = {
|
|
406
|
+
font: { family: "Arial", weight: 400 },
|
|
407
|
+
size: 16,
|
|
408
|
+
color: { type: "custom", value: "#000000" },
|
|
409
|
+
uppercase: false,
|
|
410
|
+
textAlignment: "left",
|
|
411
|
+
wrapText: true,
|
|
412
|
+
lineHeight: 2.25,
|
|
413
|
+
};
|
|
414
|
+
const result = getTextStyle(textStyle);
|
|
415
|
+
expect(result.lineHeight).toBe(2.25);
|
|
416
|
+
});
|
|
417
|
+
});
|
|
418
|
+
describe("letter spacing handling", () => {
|
|
419
|
+
it("should include letterSpacing when defined", () => {
|
|
420
|
+
const textStyle = {
|
|
421
|
+
font: { family: "Arial", weight: 400 },
|
|
422
|
+
size: 16,
|
|
423
|
+
color: { type: "custom", value: "#000000" },
|
|
424
|
+
uppercase: false,
|
|
425
|
+
textAlignment: "left",
|
|
426
|
+
wrapText: true,
|
|
427
|
+
letterSpacing: 0.5,
|
|
428
|
+
};
|
|
429
|
+
const result = getTextStyle(textStyle);
|
|
430
|
+
expect(result.letterSpacing).toBe("0.5px");
|
|
431
|
+
});
|
|
432
|
+
it("should not include letterSpacing when undefined", () => {
|
|
433
|
+
const textStyle = {
|
|
434
|
+
font: { family: "Arial", weight: 400 },
|
|
435
|
+
size: 16,
|
|
436
|
+
color: { type: "custom", value: "#000000" },
|
|
437
|
+
uppercase: false,
|
|
438
|
+
textAlignment: "left",
|
|
439
|
+
wrapText: true,
|
|
440
|
+
};
|
|
441
|
+
const result = getTextStyle(textStyle);
|
|
442
|
+
expect(result.letterSpacing).toBeUndefined();
|
|
443
|
+
});
|
|
444
|
+
it("should handle letterSpacing value of 0", () => {
|
|
445
|
+
const textStyle = {
|
|
446
|
+
font: { family: "Arial", weight: 400 },
|
|
447
|
+
size: 16,
|
|
448
|
+
color: { type: "custom", value: "#000000" },
|
|
449
|
+
uppercase: false,
|
|
450
|
+
textAlignment: "left",
|
|
451
|
+
wrapText: true,
|
|
452
|
+
letterSpacing: 0,
|
|
453
|
+
};
|
|
454
|
+
const result = getTextStyle(textStyle);
|
|
455
|
+
expect(result.letterSpacing).toBe("0px");
|
|
456
|
+
});
|
|
457
|
+
it("should handle negative letterSpacing values", () => {
|
|
458
|
+
const textStyle = {
|
|
459
|
+
font: { family: "Arial", weight: 400 },
|
|
460
|
+
size: 16,
|
|
461
|
+
color: { type: "custom", value: "#000000" },
|
|
462
|
+
uppercase: false,
|
|
463
|
+
textAlignment: "left",
|
|
464
|
+
wrapText: true,
|
|
465
|
+
letterSpacing: -0.25,
|
|
466
|
+
};
|
|
467
|
+
const result = getTextStyle(textStyle);
|
|
468
|
+
expect(result.letterSpacing).toBe("-0.25px");
|
|
469
|
+
});
|
|
470
|
+
it("should handle decimal letterSpacing values", () => {
|
|
471
|
+
const textStyle = {
|
|
472
|
+
font: { family: "Arial", weight: 400 },
|
|
473
|
+
size: 16,
|
|
474
|
+
color: { type: "custom", value: "#000000" },
|
|
475
|
+
uppercase: false,
|
|
476
|
+
textAlignment: "left",
|
|
477
|
+
wrapText: true,
|
|
478
|
+
letterSpacing: 1.75,
|
|
479
|
+
};
|
|
480
|
+
const result = getTextStyle(textStyle);
|
|
481
|
+
expect(result.letterSpacing).toBe("1.75px");
|
|
482
|
+
});
|
|
483
|
+
it("should handle integer letterSpacing values", () => {
|
|
484
|
+
const textStyle = {
|
|
485
|
+
font: { family: "Arial", weight: 400 },
|
|
486
|
+
size: 16,
|
|
487
|
+
color: { type: "custom", value: "#000000" },
|
|
488
|
+
uppercase: false,
|
|
489
|
+
textAlignment: "left",
|
|
490
|
+
wrapText: true,
|
|
491
|
+
letterSpacing: 2,
|
|
492
|
+
};
|
|
493
|
+
const result = getTextStyle(textStyle);
|
|
494
|
+
expect(result.letterSpacing).toBe("2px");
|
|
495
|
+
});
|
|
496
|
+
});
|
|
497
|
+
describe("combined line height and letter spacing", () => {
|
|
498
|
+
it("should include both lineHeight and letterSpacing when both are defined", () => {
|
|
499
|
+
const textStyle = {
|
|
500
|
+
font: { family: "Arial", weight: 400 },
|
|
501
|
+
size: 16,
|
|
502
|
+
color: { type: "custom", value: "#000000" },
|
|
503
|
+
uppercase: false,
|
|
504
|
+
textAlignment: "left",
|
|
505
|
+
wrapText: true,
|
|
506
|
+
lineHeight: 1.6,
|
|
507
|
+
letterSpacing: 0.8,
|
|
508
|
+
};
|
|
509
|
+
const result = getTextStyle(textStyle);
|
|
510
|
+
expect(result.lineHeight).toBe(1.6);
|
|
511
|
+
expect(result.letterSpacing).toBe("0.8px");
|
|
512
|
+
});
|
|
513
|
+
it("should include only lineHeight when letterSpacing is undefined", () => {
|
|
514
|
+
const textStyle = {
|
|
515
|
+
font: { family: "Arial", weight: 400 },
|
|
516
|
+
size: 16,
|
|
517
|
+
color: { type: "custom", value: "#000000" },
|
|
518
|
+
uppercase: false,
|
|
519
|
+
textAlignment: "left",
|
|
520
|
+
wrapText: true,
|
|
521
|
+
lineHeight: 2.0,
|
|
522
|
+
};
|
|
523
|
+
const result = getTextStyle(textStyle);
|
|
524
|
+
expect(result.lineHeight).toBe(2.0);
|
|
525
|
+
expect(result.letterSpacing).toBeUndefined();
|
|
526
|
+
});
|
|
527
|
+
it("should include only letterSpacing when lineHeight is undefined", () => {
|
|
528
|
+
const textStyle = {
|
|
529
|
+
font: { family: "Arial", weight: 400 },
|
|
530
|
+
size: 16,
|
|
531
|
+
color: { type: "custom", value: "#000000" },
|
|
532
|
+
uppercase: false,
|
|
533
|
+
textAlignment: "left",
|
|
534
|
+
wrapText: true,
|
|
535
|
+
letterSpacing: -0.1,
|
|
536
|
+
};
|
|
537
|
+
const result = getTextStyle(textStyle);
|
|
538
|
+
expect(result.lineHeight).toBeUndefined();
|
|
539
|
+
expect(result.letterSpacing).toBe("-0.1px");
|
|
540
|
+
});
|
|
541
|
+
});
|
|
542
|
+
describe("edge cases and complex scenarios", () => {
|
|
543
|
+
it("should handle all special values together", () => {
|
|
544
|
+
const textStyle = {
|
|
545
|
+
font: {
|
|
546
|
+
family: "initial",
|
|
547
|
+
weight: "initial",
|
|
548
|
+
},
|
|
549
|
+
size: 16,
|
|
550
|
+
color: { type: "custom", value: "#000000" },
|
|
551
|
+
uppercase: true,
|
|
552
|
+
textAlignment: "center",
|
|
553
|
+
wrapText: false,
|
|
554
|
+
};
|
|
555
|
+
const result = getTextStyle(textStyle);
|
|
556
|
+
expect(result).toEqual({
|
|
557
|
+
fontFamily: undefined,
|
|
558
|
+
fontWeight: undefined,
|
|
559
|
+
fontSize: 16,
|
|
560
|
+
color: "#000000",
|
|
561
|
+
textTransform: "uppercase",
|
|
562
|
+
textAlign: "center",
|
|
563
|
+
textWrap: "nowrap",
|
|
564
|
+
});
|
|
565
|
+
});
|
|
566
|
+
it("should handle italic font with special font family", () => {
|
|
567
|
+
const textStyle = {
|
|
568
|
+
font: {
|
|
569
|
+
family: "SF Pro Text Italic",
|
|
570
|
+
weight: 600,
|
|
571
|
+
},
|
|
572
|
+
size: 18,
|
|
573
|
+
color: { type: "brand-kit", value: "secondary" },
|
|
574
|
+
uppercase: true,
|
|
575
|
+
textAlignment: "right",
|
|
576
|
+
wrapText: true,
|
|
577
|
+
lineHeight: 1.4,
|
|
578
|
+
letterSpacing: 0.2,
|
|
579
|
+
};
|
|
580
|
+
const result = getTextStyle(textStyle);
|
|
581
|
+
expect(result).toEqual({
|
|
582
|
+
fontFamily: "SF Pro Text Italic",
|
|
583
|
+
fontWeight: 600,
|
|
584
|
+
fontSize: 18,
|
|
585
|
+
color: "var(--secondary)",
|
|
586
|
+
textTransform: "uppercase",
|
|
587
|
+
textAlign: "right",
|
|
588
|
+
textWrap: "wrap",
|
|
589
|
+
fontStyle: "italic",
|
|
590
|
+
lineHeight: 1.4,
|
|
591
|
+
letterSpacing: "0.2px",
|
|
592
|
+
});
|
|
593
|
+
});
|
|
594
|
+
it("should handle empty/null font family gracefully", () => {
|
|
595
|
+
const textStyle = {
|
|
596
|
+
font: {
|
|
597
|
+
family: "",
|
|
598
|
+
weight: 400,
|
|
599
|
+
},
|
|
600
|
+
size: 16,
|
|
601
|
+
color: { type: "custom", value: "#000000" },
|
|
602
|
+
uppercase: false,
|
|
603
|
+
textAlignment: "left",
|
|
604
|
+
wrapText: true,
|
|
605
|
+
};
|
|
606
|
+
const result = getTextStyle(textStyle);
|
|
607
|
+
expect(result.fontFamily).toBe("");
|
|
608
|
+
expect(result.fontStyle).toBeUndefined();
|
|
609
|
+
});
|
|
610
|
+
});
|
|
611
|
+
});
|