@drawbridge/components 0.0.45 → 0.0.47

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.
Files changed (34) hide show
  1. package/dist/advertisement.js +273 -481
  2. package/dist/advertisement.mjs +153 -35
  3. package/dist/{chunk-JJH46E7B.mjs → chunk-3SAKIKZP.mjs} +3 -3
  4. package/dist/{chunk-BD3TDNJE.mjs → chunk-3SXAH7B7.mjs} +1 -1
  5. package/dist/{chunk-BZ6WMIH7.mjs → chunk-B6Y2SNRW.mjs} +1 -1
  6. package/dist/chunk-FJ7PKMAC.mjs +88 -0
  7. package/dist/{chunk-EKWIDBFA.mjs → chunk-V3RUI64W.mjs} +31 -13
  8. package/dist/input-checkbox.js +15 -5
  9. package/dist/input-checkbox.mjs +1 -1
  10. package/dist/input-group.js +3 -3
  11. package/dist/input-group.mjs +1 -1
  12. package/dist/input-name.js +18 -8
  13. package/dist/input-name.mjs +3 -3
  14. package/dist/input-number.js +15 -5
  15. package/dist/input-number.mjs +1 -1
  16. package/dist/input-phone.js +15 -5
  17. package/dist/input-phone.mjs +1 -1
  18. package/dist/input-select.js +15 -5
  19. package/dist/input-select.mjs +2 -2
  20. package/dist/input-text.js +15 -5
  21. package/dist/input-text.mjs +2 -2
  22. package/dist/input-textarea.js +15 -5
  23. package/dist/input-textarea.mjs +1 -1
  24. package/dist/product.js +49 -21
  25. package/dist/product.mjs +5 -5
  26. package/dist/styles.js +40 -45
  27. package/dist/styles.mjs +1 -1
  28. package/package.json +1 -5
  29. package/types/advertisement.d.ts +0 -1
  30. package/dist/card-advertisement.js +0 -377
  31. package/dist/card-advertisement.mjs +0 -6
  32. package/dist/chunk-FJXG3REN.mjs +0 -93
  33. package/dist/chunk-TJNIR4PF.mjs +0 -358
  34. package/types/card-advertisement.d.ts +0 -45
package/dist/chunk-TJNIR4PF.mjs DELETED
@@ -1,358 +0,0 @@
1
- // components/card-advertisement.js
2
- import { useEffect, useState } from "react";
3
- import { cdnShopify } from "@drawbridge/shopify/cdn";
4
- import { cdnSrc } from "@drawbridge/drawbridge-utils/cdn";
5
- import { formatCurrency } from "@drawbridge/drawbridge-utils";
6
- import { jsx, jsxs } from "react/jsx-runtime";
7
- var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ jsx(
8
- "img",
9
- {
10
- ...{
11
- alt,
12
- className,
13
- src
14
- }
15
- }
16
- );
17
- var DefaultVideo = ({ className, hls, mp4, poster }) => /* @__PURE__ */ jsx(
18
- "video",
19
- {
20
- ...{
21
- className,
22
- poster,
23
- src: mp4 || hls
24
- }
25
- }
26
- );
27
- var CardAdvertisement = ({
28
- advertisement,
29
- affiliate,
30
- asset,
31
- brand = {},
32
- button,
33
- campaign,
34
- fonts,
35
- ImageComponent = DefaultImage,
36
- lead,
37
- onClick = () => {
38
- },
39
- onVariantSelect = () => {
40
- },
41
- organization,
42
- page,
43
- preview = false,
44
- product,
45
- title,
46
- url,
47
- VideoComponent = DefaultVideo
48
- }) => {
49
- var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N;
50
- const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
51
- const hasVariants = variants.length > 0;
52
- const [selectedVariant, setSelectedVariant] = useState(variants[0] || null);
53
- const [keyboard, setKeyboard] = useState(false);
54
- useEffect(() => {
55
- const down = (e) => {
56
- if (e.key === "Tab") setKeyboard(true);
57
- };
58
- const click = () => setKeyboard(false);
59
- window.addEventListener("keydown", down);
60
- window.addEventListener("mousedown", click);
61
- return () => {
62
- window.removeEventListener("keydown", down);
63
- window.removeEventListener("mousedown", click);
64
- };
65
- }, []);
66
- const style = {
67
- background: {
68
- color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
69
- hex: "#FFFFFF",
70
- rgb: "rgb( 255, 255, 255 )"
71
- }
72
- },
73
- text: {
74
- color: ((_c = brand == null ? void 0 : brand.style) == null ? void 0 : _c.text) ? (_d = brand.style.text) == null ? void 0 : _d.color : {
75
- hex: "#000000",
76
- rgb: "rgb( 0, 0, 0 )"
77
- }
78
- }
79
- };
80
- const classes = {
81
- asset: [
82
- "block relative aspect-square rounded overflow-hidden"
83
- ],
84
- button: [
85
- "card-advertisement-button",
86
- "flex items-center justify-center py-3 px-4 w-full border"
87
- ],
88
- container: [
89
- "card-advertisement",
90
- "block w-full space-y-2 border border-gray rounded p-6"
91
- ],
92
- content: [
93
- "flex flex-col items-center justify-between gap-x-4 text-center text-sm rounded"
94
- ]
95
- };
96
- const productImage = (selectedVariant == null ? void 0 : selectedVariant.image) || (product == null ? void 0 : product.image) || null;
97
- const productImageSrc = cdnShopify(productImage, "400x400", product == null ? void 0 : product.updatedAt);
98
- if (!(asset == null ? void 0 : asset.sizes) && !productImageSrc) {
99
- classes.asset.push("bg-gray-light");
100
- }
101
- ;
102
- return /* @__PURE__ */ jsxs(
103
- "div",
104
- {
105
- ...{
106
- className: classes.container.join(" "),
107
- style: {
108
- backgroundColor: (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.hex,
109
- color: (_h = (_g = style == null ? void 0 : style.text) == null ? void 0 : _g.color) == null ? void 0 : _h.hex
110
- }
111
- },
112
- children: [
113
- /* @__PURE__ */ jsxs(
114
- "span",
115
- {
116
- ...{
117
- className: classes.asset.join(" ")
118
- },
119
- children: [
120
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ jsx(
121
- ImageComponent,
122
- {
123
- ...{
124
- alt: asset == null ? void 0 : asset.filename,
125
- className: "w-full h-full object-cover",
126
- fill: true,
127
- priority: false,
128
- sizes: "100%",
129
- src: cdnSrc(asset, "400x400", asset == null ? void 0 : asset.updatedAt)
130
- }
131
- },
132
- asset == null ? void 0 : asset.id
133
- ),
134
- !(asset == null ? void 0 : asset.sizes) && productImageSrc && /* @__PURE__ */ jsx(
135
- ImageComponent,
136
- {
137
- ...{
138
- alt: (product == null ? void 0 : product.title) || "Product",
139
- className: "w-full h-full object-cover",
140
- fill: true,
141
- priority: false,
142
- sizes: "100%",
143
- src: productImageSrc,
144
- unoptimized: true
145
- }
146
- },
147
- productImageSrc
148
- ),
149
- (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ jsx(
150
- "div",
151
- {
152
- ...{
153
- className: "relative h-full w-full aspect-[9/16]"
154
- },
155
- children: /* @__PURE__ */ jsx(
156
- VideoComponent,
157
- {
158
- ...{
159
- className: "w-full h-full",
160
- hls: cdnSrc(asset, "hls", asset == null ? void 0 : asset.updatedAt),
161
- mp4: cdnSrc(asset, "original", asset == null ? void 0 : asset.updatedAt),
162
- poster: cdnSrc((_i = asset == null ? void 0 : asset.frames) == null ? void 0 : _i[asset == null ? void 0 : asset.poster], "500x500", asset == null ? void 0 : asset.updatedAt) || cdnSrc((_j = asset == null ? void 0 : asset.frames) == null ? void 0 : _j[asset == null ? void 0 : asset.poster], "1080x1920", asset == null ? void 0 : asset.updatedAt)
163
- }
164
- }
165
- )
166
- }
167
- )
168
- ]
169
- }
170
- ),
171
- /* @__PURE__ */ jsxs(
172
- "span",
173
- {
174
- ...{
175
- className: classes.content.join(" "),
176
- style: {
177
- ...fonts == null ? void 0 : fonts.body,
178
- color: (_l = (_k = style == null ? void 0 : style.text) == null ? void 0 : _k.color) == null ? void 0 : _l.hex,
179
- gap: "10px",
180
- marginTop: "10px"
181
- }
182
- },
183
- children: [
184
- /* @__PURE__ */ jsxs(
185
- "div",
186
- {
187
- ...{
188
- className: "flex-1 min-w-0 space-y-2"
189
- },
190
- children: [
191
- title && /* @__PURE__ */ jsx(
192
- "p",
193
- {
194
- ...{
195
- style: {
196
- fontSize: "18px"
197
- }
198
- },
199
- children: title
200
- }
201
- ),
202
- (selectedVariant == null ? void 0 : selectedVariant.price) && (selectedVariant == null ? void 0 : selectedVariant.currency) && /* @__PURE__ */ jsxs(
203
- "p",
204
- {
205
- ...{
206
- style: {
207
- fontSize: "14px",
208
- marginBottom: "10px"
209
- }
210
- },
211
- children: [
212
- (selectedVariant == null ? void 0 : selectedVariant.sale) && selectedVariant.sale > selectedVariant.price && /* @__PURE__ */ jsx(
213
- "span",
214
- {
215
- ...{
216
- style: {
217
- marginRight: "6px",
218
- opacity: 0.5,
219
- textDecoration: "line-through"
220
- }
221
- },
222
- children: formatCurrency({
223
- code: selectedVariant.currency,
224
- display: "parts",
225
- value: selectedVariant.sale
226
- })
227
- }
228
- ),
229
- formatCurrency({
230
- code: selectedVariant.currency,
231
- display: "parts",
232
- value: selectedVariant.price
233
- })
234
- ]
235
- }
236
- ),
237
- variants.length > 1 && /* @__PURE__ */ jsxs(
238
- "div",
239
- {
240
- ...{
241
- className: "relative w-full"
242
- },
243
- children: [
244
- /* @__PURE__ */ jsx(
245
- "select",
246
- {
247
- ...{
248
- className: "input appearance-none " + (keyboard ? "focus-visible:!outline-1 focus-visible:!ring-1 focus-visible:!ring-blue-600" : "focus-visible:!outline-0 focus-visible:!ring-0"),
249
- onChange: (e) => {
250
- const variant = variants.find((v) => v.id === e.target.value);
251
- if (variant) setSelectedVariant(variant);
252
- },
253
- style: {
254
- appearance: "none",
255
- backgroundColor: (_n = (_m = style == null ? void 0 : style.background) == null ? void 0 : _m.color) == null ? void 0 : _n.rgb,
256
- backgroundImage: "none",
257
- borderColor: (_p = (_o = style == null ? void 0 : style.text) == null ? void 0 : _o.color) == null ? void 0 : _p.rgb,
258
- borderRadius: ((_r = (_q = brand == null ? void 0 : brand.style) == null ? void 0 : _q.button) == null ? void 0 : _r.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
259
- color: (_t = (_s = style == null ? void 0 : style.text) == null ? void 0 : _s.color) == null ? void 0 : _t.rgb,
260
- WebkitAppearance: "none"
261
- },
262
- value: (selectedVariant == null ? void 0 : selectedVariant.id) || ""
263
- },
264
- children: variants.map((variant) => /* @__PURE__ */ jsx(
265
- "option",
266
- {
267
- ...{
268
- value: variant.id
269
- },
270
- children: variant.title
271
- },
272
- variant.id
273
- ))
274
- }
275
- ),
276
- /* @__PURE__ */ jsx(
277
- "div",
278
- {
279
- ...{
280
- "aria-hidden": true,
281
- style: {
282
- alignItems: "center",
283
- bottom: 0,
284
- display: "flex",
285
- paddingRight: "0.625rem",
286
- pointerEvents: "none",
287
- position: "absolute",
288
- right: 0,
289
- top: 0
290
- }
291
- },
292
- children: /* @__PURE__ */ jsx(
293
- "svg",
294
- {
295
- ...{
296
- style: {
297
- height: "1.25rem",
298
- width: "1.25rem"
299
- },
300
- fill: "none",
301
- stroke: "currentColor",
302
- strokeWidth: 1.5,
303
- viewBox: "0 0 24 24",
304
- xmlns: "http://www.w3.org/2000/svg"
305
- },
306
- children: /* @__PURE__ */ jsx(
307
- "path",
308
- {
309
- ...{
310
- d: "M19.5 8.25l-7.5 7.5-7.5-7.5",
311
- strokeLinecap: "round",
312
- strokeLinejoin: "round"
313
- }
314
- }
315
- )
316
- }
317
- )
318
- }
319
- )
320
- ]
321
- }
322
- )
323
- ]
324
- }
325
- ),
326
- button && /* @__PURE__ */ jsx(
327
- "button",
328
- {
329
- ...{
330
- className: classes.button.join(" "),
331
- disabled: !preview && !hasVariants && !url,
332
- onClick: hasVariants ? () => {
333
- if (!preview) onVariantSelect(selectedVariant);
334
- } : preview ? () => {
335
- } : onClick,
336
- style: {
337
- backgroundColor: ((_x = (_w = (_v = (_u = brand == null ? void 0 : brand.style) == null ? void 0 : _u.button) == null ? void 0 : _v.background) == null ? void 0 : _w.color) == null ? void 0 : _x.hex) || ((_z = (_y = style == null ? void 0 : style.text) == null ? void 0 : _y.color) == null ? void 0 : _z.hex),
338
- borderColor: ((_D = (_C = (_B = (_A = brand == null ? void 0 : brand.style) == null ? void 0 : _A.button) == null ? void 0 : _B.background) == null ? void 0 : _C.color) == null ? void 0 : _D.hex) || ((_F = (_E = style == null ? void 0 : style.text) == null ? void 0 : _E.color) == null ? void 0 : _F.hex),
339
- borderRadius: ((_H = (_G = brand == null ? void 0 : brand.style) == null ? void 0 : _G.button) == null ? void 0 : _H.radius) != null ? brand.style.button.radius / 4 + "px" : void 0,
340
- color: ((_L = (_K = (_J = (_I = brand == null ? void 0 : brand.style) == null ? void 0 : _I.button) == null ? void 0 : _J.text) == null ? void 0 : _K.color) == null ? void 0 : _L.hex) || ((_N = (_M = style == null ? void 0 : style.background) == null ? void 0 : _M.color) == null ? void 0 : _N.hex)
341
- },
342
- type: "button"
343
- },
344
- children: button
345
- }
346
- )
347
- ]
348
- }
349
- )
350
- ]
351
- }
352
- );
353
- };
354
- var card_advertisement_default = CardAdvertisement;
355
-
356
- export {
357
- card_advertisement_default
358
- };
package/types/card-advertisement.d.ts DELETED
@@ -1,45 +0,0 @@
1
- import { ComponentType } from 'react';
2
-
3
- export interface CardAdvertisementProps {
4
- asset?: {
5
- filename?: string;
6
- frames?: Record<string, { sizes?: Record<string, string> }>;
7
- id?: string;
8
- mimetype?: string;
9
- poster?: string;
10
- sizes?: Record<string, string>;
11
- updatedAt?: string;
12
- };
13
- brand?: {
14
- style?: {
15
- background?: { color?: { hex?: string; rgb?: string } };
16
- text?: { color?: { hex?: string; rgb?: string } };
17
- };
18
- };
19
- button?: string;
20
- campaign?: string;
21
- fonts?: {
22
- body?: Record<string, unknown>;
23
- };
24
- ImageComponent?: ComponentType<any>;
25
- onClick?: () => void;
26
- organization?: string;
27
- preview?: boolean;
28
- product?: {
29
- image?: string;
30
- title?: string;
31
- url?: string;
32
- variants?: Array<{
33
- availableForSale: boolean;
34
- shopifyId: string;
35
- title: string;
36
- }>;
37
- };
38
- title?: string;
39
- url?: string;
40
- VideoComponent?: ComponentType<any>;
41
- }
42
-
43
- declare const CardAdvertisement: ComponentType<CardAdvertisementProps>;
44
-
45
- export default CardAdvertisement;