@drawbridge/components 0.0.1

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 (4) hide show
  1. package/README.md +1 -0
  2. package/dist/card-advertisement.js +254 -0
  3. package/dist/card-advertisement.mjs +234 -0
  4. package/package.json +26 -0
package/README.md ADDED
@@ -0,0 +1 @@
1
+ The components for Drawbridge
package/dist/card-advertisement.js ADDED
@@ -0,0 +1,254 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
3
+ var __getOwnPropNames = Object.getOwnPropertyNames;
4
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
5
+ var __export = (target, all) => {
6
+ for (var name in all)
7
+ __defProp(target, name, { get: all[name], enumerable: true });
8
+ };
9
+ var __copyProps = (to, from, except, desc) => {
10
+ if (from && typeof from === "object" || typeof from === "function") {
11
+ for (let key of __getOwnPropNames(from))
12
+ if (!__hasOwnProp.call(to, key) && key !== except)
13
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
14
+ }
15
+ return to;
16
+ };
17
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
18
+
19
+ // components/card-advertisement.js
20
+ var card_advertisement_exports = {};
21
+ __export(card_advertisement_exports, {
22
+ default: () => card_advertisement_default
23
+ });
24
+ module.exports = __toCommonJS(card_advertisement_exports);
25
+ var import_react = require("react");
26
+ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElement(
27
+ "img",
28
+ {
29
+ ...{
30
+ alt,
31
+ className,
32
+ src
33
+ }
34
+ }
35
+ );
36
+ var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ React.createElement(
37
+ "video",
38
+ {
39
+ ...{
40
+ className,
41
+ poster,
42
+ src: mp4 || hsl
43
+ }
44
+ }
45
+ );
46
+ var CardAdvertisement = ({
47
+ asset,
48
+ brand = {},
49
+ button,
50
+ campaign,
51
+ fonts,
52
+ ImageComponent = DefaultImage,
53
+ onClick = () => {
54
+ },
55
+ organization,
56
+ product,
57
+ title,
58
+ url,
59
+ VideoComponent = DefaultVideo
60
+ }) => {
61
+ 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;
62
+ const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
63
+ const hasVariants = variants.length > 1;
64
+ const [variantsOpen, setVariantsOpen] = (0, import_react.useState)(false);
65
+ const variantUrl = (variant) => {
66
+ const variantShopifyId = (variant.shopifyId || "").split("/").pop();
67
+ const domain = (product == null ? void 0 : product.url) ? new URL(product.url).hostname : null;
68
+ if (!domain || !variantShopifyId) return null;
69
+ const params = [
70
+ ...campaign ? ["attributes[drwbrdg_c]=" + campaign] : [],
71
+ ...organization ? ["attributes[drwbrdg_o]=" + organization] : []
72
+ ].join("&");
73
+ return "https://" + domain + "/cart/" + variantShopifyId + ":1" + (params ? "?" + params : "");
74
+ };
75
+ const style = {
76
+ background: {
77
+ color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
78
+ hex: "#FFFFFF",
79
+ rgb: "rgb( 255, 255, 255 )"
80
+ }
81
+ },
82
+ text: {
83
+ color: ((_c = brand == null ? void 0 : brand.style) == null ? void 0 : _c.text) ? (_d = brand.style.text) == null ? void 0 : _d.color : {
84
+ hex: "#000000",
85
+ rgb: "rgb( 0, 0, 0 )"
86
+ }
87
+ }
88
+ };
89
+ const classes = {
90
+ asset: [
91
+ "block relative aspect-square rounded overflow-hidden"
92
+ ],
93
+ button: [
94
+ "card-advertisement-button",
95
+ "flex items-center justify-center py-2 px-3 rounded shrink-0"
96
+ ],
97
+ container: [
98
+ "card-advertisement",
99
+ "block w-full space-y-2 border border-gray rounded p-6"
100
+ ],
101
+ content: [
102
+ "flex items-center justify-between space-x-4 text-left text-sm p-4 rounded"
103
+ ]
104
+ };
105
+ if (!(asset == null ? void 0 : asset.sizes) && !(product == null ? void 0 : product.image)) {
106
+ classes.asset.push("bg-gray-light");
107
+ }
108
+ ;
109
+ return /* @__PURE__ */ React.createElement(
110
+ "div",
111
+ {
112
+ ...{
113
+ className: classes.container.join(" "),
114
+ style: {
115
+ backgroundColor: (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.hex,
116
+ color: (_h = (_g = style == null ? void 0 : style.text) == null ? void 0 : _g.color) == null ? void 0 : _h.hex
117
+ }
118
+ }
119
+ },
120
+ /* @__PURE__ */ React.createElement(
121
+ "span",
122
+ {
123
+ ...{
124
+ className: classes.asset.join(" ")
125
+ }
126
+ },
127
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ React.createElement(
128
+ ImageComponent,
129
+ {
130
+ ...{
131
+ alt: asset == null ? void 0 : asset.filename,
132
+ className: "w-full h-full object-cover",
133
+ fill: true,
134
+ key: asset == null ? void 0 : asset.id,
135
+ priority: false,
136
+ sizes: "100%",
137
+ src: [
138
+ (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
139
+ (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
140
+ ].filter(Boolean).join("")
141
+ }
142
+ }
143
+ ),
144
+ !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ React.createElement(
145
+ ImageComponent,
146
+ {
147
+ ...{
148
+ alt: (product == null ? void 0 : product.title) || "Product",
149
+ className: "w-full h-full object-cover",
150
+ fill: true,
151
+ priority: false,
152
+ sizes: "100%",
153
+ src: product.image,
154
+ unoptimized: true
155
+ }
156
+ }
157
+ ),
158
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ React.createElement(
159
+ "div",
160
+ {
161
+ ...{
162
+ className: "relative h-full w-full aspect-[9/16]"
163
+ }
164
+ },
165
+ /* @__PURE__ */ React.createElement(
166
+ VideoComponent,
167
+ {
168
+ ...{
169
+ className: "w-full h-full",
170
+ hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
171
+ mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
172
+ poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
173
+ }
174
+ }
175
+ )
176
+ ),
177
+ hasVariants && /* @__PURE__ */ React.createElement(
178
+ "div",
179
+ {
180
+ ...{
181
+ className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
182
+ style: {
183
+ backgroundColor: "rgba(0,0,0,0.92)",
184
+ transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
185
+ }
186
+ }
187
+ },
188
+ /* @__PURE__ */ React.createElement(
189
+ "p",
190
+ {
191
+ ...{
192
+ className: "text-xs text-white/60"
193
+ }
194
+ },
195
+ "Select an option"
196
+ ),
197
+ /* @__PURE__ */ React.createElement(
198
+ "div",
199
+ {
200
+ ...{
201
+ className: "flex flex-wrap gap-2"
202
+ }
203
+ },
204
+ variants.map((variant) => /* @__PURE__ */ React.createElement(
205
+ "button",
206
+ {
207
+ key: variant.shopifyId,
208
+ ...{
209
+ className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
210
+ onClick: () => {
211
+ const href = variantUrl(variant);
212
+ if (href) window.open(href, "_blank");
213
+ },
214
+ type: "button"
215
+ }
216
+ },
217
+ variant.title
218
+ ))
219
+ )
220
+ )
221
+ ),
222
+ /* @__PURE__ */ React.createElement(
223
+ "span",
224
+ {
225
+ ...{
226
+ className: classes.content.join(" "),
227
+ style: {
228
+ ...fonts == null ? void 0 : fonts.body,
229
+ backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
230
+ color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
231
+ }
232
+ }
233
+ },
234
+ title && /* @__PURE__ */ React.createElement("p", null, title),
235
+ button && /* @__PURE__ */ React.createElement(
236
+ "button",
237
+ {
238
+ ...{
239
+ className: classes.button.join(" "),
240
+ disabled: !hasVariants && !url,
241
+ onClick: hasVariants ? () => setVariantsOpen((v) => !v) : onClick,
242
+ style: {
243
+ backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
244
+ color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
245
+ },
246
+ type: "button"
247
+ }
248
+ },
249
+ variantsOpen ? "Close" : button
250
+ )
251
+ )
252
+ );
253
+ };
254
+ var card_advertisement_default = CardAdvertisement;
package/dist/card-advertisement.mjs ADDED
@@ -0,0 +1,234 @@
1
+ // components/card-advertisement.js
2
+ import { useState } from "react";
3
+ var DefaultImage = ({ alt, className, src }) => /* @__PURE__ */ React.createElement(
4
+ "img",
5
+ {
6
+ ...{
7
+ alt,
8
+ className,
9
+ src
10
+ }
11
+ }
12
+ );
13
+ var DefaultVideo = ({ className, hsl, mp4, poster }) => /* @__PURE__ */ React.createElement(
14
+ "video",
15
+ {
16
+ ...{
17
+ className,
18
+ poster,
19
+ src: mp4 || hsl
20
+ }
21
+ }
22
+ );
23
+ var CardAdvertisement = ({
24
+ asset,
25
+ brand = {},
26
+ button,
27
+ campaign,
28
+ fonts,
29
+ ImageComponent = DefaultImage,
30
+ onClick = () => {
31
+ },
32
+ organization,
33
+ product,
34
+ title,
35
+ url,
36
+ VideoComponent = DefaultVideo
37
+ }) => {
38
+ 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;
39
+ const variants = ((product == null ? void 0 : product.variants) || []).filter((v) => v.availableForSale);
40
+ const hasVariants = variants.length > 1;
41
+ const [variantsOpen, setVariantsOpen] = useState(false);
42
+ const variantUrl = (variant) => {
43
+ const variantShopifyId = (variant.shopifyId || "").split("/").pop();
44
+ const domain = (product == null ? void 0 : product.url) ? new URL(product.url).hostname : null;
45
+ if (!domain || !variantShopifyId) return null;
46
+ const params = [
47
+ ...campaign ? ["attributes[drwbrdg_c]=" + campaign] : [],
48
+ ...organization ? ["attributes[drwbrdg_o]=" + organization] : []
49
+ ].join("&");
50
+ return "https://" + domain + "/cart/" + variantShopifyId + ":1" + (params ? "?" + params : "");
51
+ };
52
+ const style = {
53
+ background: {
54
+ color: ((_a = brand == null ? void 0 : brand.style) == null ? void 0 : _a.background) ? (_b = brand.style.background) == null ? void 0 : _b.color : {
55
+ hex: "#FFFFFF",
56
+ rgb: "rgb( 255, 255, 255 )"
57
+ }
58
+ },
59
+ text: {
60
+ color: ((_c = brand == null ? void 0 : brand.style) == null ? void 0 : _c.text) ? (_d = brand.style.text) == null ? void 0 : _d.color : {
61
+ hex: "#000000",
62
+ rgb: "rgb( 0, 0, 0 )"
63
+ }
64
+ }
65
+ };
66
+ const classes = {
67
+ asset: [
68
+ "block relative aspect-square rounded overflow-hidden"
69
+ ],
70
+ button: [
71
+ "card-advertisement-button",
72
+ "flex items-center justify-center py-2 px-3 rounded shrink-0"
73
+ ],
74
+ container: [
75
+ "card-advertisement",
76
+ "block w-full space-y-2 border border-gray rounded p-6"
77
+ ],
78
+ content: [
79
+ "flex items-center justify-between space-x-4 text-left text-sm p-4 rounded"
80
+ ]
81
+ };
82
+ if (!(asset == null ? void 0 : asset.sizes) && !(product == null ? void 0 : product.image)) {
83
+ classes.asset.push("bg-gray-light");
84
+ }
85
+ ;
86
+ return /* @__PURE__ */ React.createElement(
87
+ "div",
88
+ {
89
+ ...{
90
+ className: classes.container.join(" "),
91
+ style: {
92
+ backgroundColor: (_f = (_e = style == null ? void 0 : style.background) == null ? void 0 : _e.color) == null ? void 0 : _f.hex,
93
+ color: (_h = (_g = style == null ? void 0 : style.text) == null ? void 0 : _g.color) == null ? void 0 : _h.hex
94
+ }
95
+ }
96
+ },
97
+ /* @__PURE__ */ React.createElement(
98
+ "span",
99
+ {
100
+ ...{
101
+ className: classes.asset.join(" ")
102
+ }
103
+ },
104
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("image") && /* @__PURE__ */ React.createElement(
105
+ ImageComponent,
106
+ {
107
+ ...{
108
+ alt: asset == null ? void 0 : asset.filename,
109
+ className: "w-full h-full object-cover",
110
+ fill: true,
111
+ key: asset == null ? void 0 : asset.id,
112
+ priority: false,
113
+ sizes: "100%",
114
+ src: [
115
+ (_i = asset == null ? void 0 : asset.sizes) == null ? void 0 : _i["400x400"],
116
+ (asset == null ? void 0 : asset.updatedAt) && "?query=" + (asset == null ? void 0 : asset.updatedAt)
117
+ ].filter(Boolean).join("")
118
+ }
119
+ }
120
+ ),
121
+ !(asset == null ? void 0 : asset.sizes) && (product == null ? void 0 : product.image) && /* @__PURE__ */ React.createElement(
122
+ ImageComponent,
123
+ {
124
+ ...{
125
+ alt: (product == null ? void 0 : product.title) || "Product",
126
+ className: "w-full h-full object-cover",
127
+ fill: true,
128
+ priority: false,
129
+ sizes: "100%",
130
+ src: product.image,
131
+ unoptimized: true
132
+ }
133
+ }
134
+ ),
135
+ (asset == null ? void 0 : asset.sizes) && asset.mimetype.includes("video") && /* @__PURE__ */ React.createElement(
136
+ "div",
137
+ {
138
+ ...{
139
+ className: "relative h-full w-full aspect-[9/16]"
140
+ }
141
+ },
142
+ /* @__PURE__ */ React.createElement(
143
+ VideoComponent,
144
+ {
145
+ ...{
146
+ className: "w-full h-full",
147
+ hsl: ((_j = asset == null ? void 0 : asset.sizes) == null ? void 0 : _j.hsl) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
148
+ mp4: ((_k = asset == null ? void 0 : asset.sizes) == null ? void 0 : _k.original) + "?query=" + (asset == null ? void 0 : asset.updatedAt),
149
+ poster: (((_n = (_m = (_l = asset == null ? void 0 : asset.frames) == null ? void 0 : _l[asset == null ? void 0 : asset.poster]) == null ? void 0 : _m.sizes) == null ? void 0 : _n["500x500"]) || ((_q = (_p = (_o = asset == null ? void 0 : asset.frames) == null ? void 0 : _o[asset == null ? void 0 : asset.poster]) == null ? void 0 : _p.sizes) == null ? void 0 : _q["1080x1920"])) + "?query=" + (asset == null ? void 0 : asset.updatedAt)
150
+ }
151
+ }
152
+ )
153
+ ),
154
+ hasVariants && /* @__PURE__ */ React.createElement(
155
+ "div",
156
+ {
157
+ ...{
158
+ className: "absolute inset-0 flex flex-col justify-end transition-transform duration-300 ease-in-out p-4 space-y-3",
159
+ style: {
160
+ backgroundColor: "rgba(0,0,0,0.92)",
161
+ transform: variantsOpen ? "translateY(0)" : "translateY(100%)"
162
+ }
163
+ }
164
+ },
165
+ /* @__PURE__ */ React.createElement(
166
+ "p",
167
+ {
168
+ ...{
169
+ className: "text-xs text-white/60"
170
+ }
171
+ },
172
+ "Select an option"
173
+ ),
174
+ /* @__PURE__ */ React.createElement(
175
+ "div",
176
+ {
177
+ ...{
178
+ className: "flex flex-wrap gap-2"
179
+ }
180
+ },
181
+ variants.map((variant) => /* @__PURE__ */ React.createElement(
182
+ "button",
183
+ {
184
+ key: variant.shopifyId,
185
+ ...{
186
+ className: "text-xs px-3 py-1.5 rounded border border-white/30 text-white hover:border-white transition-colors",
187
+ onClick: () => {
188
+ const href = variantUrl(variant);
189
+ if (href) window.open(href, "_blank");
190
+ },
191
+ type: "button"
192
+ }
193
+ },
194
+ variant.title
195
+ ))
196
+ )
197
+ )
198
+ ),
199
+ /* @__PURE__ */ React.createElement(
200
+ "span",
201
+ {
202
+ ...{
203
+ className: classes.content.join(" "),
204
+ style: {
205
+ ...fonts == null ? void 0 : fonts.body,
206
+ backgroundColor: (_s = (_r = style == null ? void 0 : style.text) == null ? void 0 : _r.color) == null ? void 0 : _s.hex,
207
+ color: (_u = (_t = style == null ? void 0 : style.background) == null ? void 0 : _t.color) == null ? void 0 : _u.hex
208
+ }
209
+ }
210
+ },
211
+ title && /* @__PURE__ */ React.createElement("p", null, title),
212
+ button && /* @__PURE__ */ React.createElement(
213
+ "button",
214
+ {
215
+ ...{
216
+ className: classes.button.join(" "),
217
+ disabled: !hasVariants && !url,
218
+ onClick: hasVariants ? () => setVariantsOpen((v) => !v) : onClick,
219
+ style: {
220
+ backgroundColor: (_w = (_v = style == null ? void 0 : style.background) == null ? void 0 : _v.color) == null ? void 0 : _w.hex,
221
+ color: (_y = (_x = style == null ? void 0 : style.text) == null ? void 0 : _x.color) == null ? void 0 : _y.hex
222
+ },
223
+ type: "button"
224
+ }
225
+ },
226
+ variantsOpen ? "Close" : button
227
+ )
228
+ )
229
+ );
230
+ };
231
+ var card_advertisement_default = CardAdvertisement;
232
+ export {
233
+ card_advertisement_default as default
234
+ };
package/package.json ADDED
@@ -0,0 +1,26 @@
1
+ {
2
+ "name": "@drawbridge/components",
3
+ "version": "0.0.1",
4
+ "exports": {
5
+ "./card-advertisement": "./dist/card-advertisement.js"
6
+ },
7
+ "files": [
8
+ "dist"
9
+ ],
10
+ "author": "",
11
+ "license": "ISC",
12
+ "description": "",
13
+ "publishConfig": {
14
+ "access": "public"
15
+ },
16
+ "scripts": {
17
+ "build": "tsup && npm publish"
18
+ },
19
+ "peerDependencies": {
20
+ "next": ">=14",
21
+ "react": ">=18"
22
+ },
23
+ "devDependencies": {
24
+ "tsup": "^8.5.1"
25
+ }
26
+ }