@oneplatformdev/ui 0.1.99-beta.266 → 0.1.99-beta.268

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 (6) hide show
  1. package/Dropzone/Dropzone.d.ts.map +1 -1
  2. package/Dropzone/Dropzone.js +142 -123
  3. package/Dropzone/Dropzone.js.map +1 -1
  4. package/Dropzone/Dropzone.stories.js +68 -54
  5. package/Dropzone/Dropzone.stories.js.map +1 -1
  6. package/package.json +4 -4
package/Dropzone/Dropzone.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../src/Dropzone/Dropzone.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEL,eAAe,EACf,aAAa,EAEd,MAAM,kBAAkB,CAAC;AAQ1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,2GAuapB,CAAC"}
1
+ {"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../src/Dropzone/Dropzone.tsx"],"names":[],"mappings":"AAQA,OAAO,EAEL,eAAe,EACf,aAAa,EAEd,MAAM,kBAAkB,CAAC;AAwC1B;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,QAAQ,2GAuapB,CAAC"}
package/Dropzone/Dropzone.js CHANGED
@@ -1,121 +1,140 @@
1
- import { jsxs as l, jsx as e, Fragment as P } from "react/jsx-runtime";
2
- import { X as E, UploadIcon as ge, FileTextIcon as X, InfoIcon as we } from "lucide-react";
3
- import { forwardRef as Ne, useState as Y, useEffect as ve, useImperativeHandle as Fe } from "react";
1
+ import { jsxs as l, jsx as e, Fragment as Y } from "react/jsx-runtime";
2
+ import { X as B, UploadIcon as ge, FileTextIcon as G, InfoIcon as we } from "lucide-react";
3
+ import { forwardRef as Ne, useState as J, useEffect as ve, useImperativeHandle as Fe } from "react";
4
4
  import { useDropzone as be } from "react-dropzone";
5
- import { cn as a } from "@oneplatformdev/utils";
6
- import { Card as Ce } from "../Card/Card.js";
7
- import { DEFAULT_FILE_TYPES as ye } from "./Dropzone.types.js";
5
+ import { cn as m } from "@oneplatformdev/utils";
6
+ import { Card as ye } from "../Card/Card.js";
7
+ import { DEFAULT_FILE_TYPES as Ce } from "./Dropzone.types.js";
8
8
  import { FilePreview as ze } from "./DropzoneFilePreview.js";
9
9
  import { DropzoneSinglePickPreview as Ee } from "./DropzoneSinglePickPreview.js";
10
- import { isFile as D, extractName as De } from "./DropzoneUtils.js";
10
+ import { isFile as v, extractName as De } from "./DropzoneUtils.js";
11
11
  import { Button as Ie } from "../Button/Button.js";
12
- const q = (w = 0) => `${(w / (1024 * 1024)).toFixed(0)} MB`, ke = Ne(
12
+ const K = (f = 0) => `${(f / (1024 * 1024)).toFixed(0)} MB`, Me = (f, u) => {
13
+ if (f === u) return !0;
14
+ if (f.length !== u.length) return !1;
15
+ for (let p = 0; p < f.length; p++) {
16
+ const o = f[p], c = u[p];
17
+ if (o !== c) {
18
+ if (typeof o == "string" && typeof c == "string") {
19
+ if (o !== c) return !1;
20
+ continue;
21
+ }
22
+ if (v(o) && v(c)) {
23
+ if (o.name !== c.name || o.size !== c.size || o.type !== c.type || o.lastModified !== c.lastModified)
24
+ return !1;
25
+ continue;
26
+ }
27
+ return !1;
28
+ }
29
+ }
30
+ return !0;
31
+ }, ke = Ne(
13
32
  ({
14
- acceptTypes: w = ye,
15
- maxSizeMB: G,
16
- maxFiles: I = 1,
17
- onErrors: J,
18
- hideErrors: K = !1,
19
- disabled: o = !1,
20
- classNames: p,
21
- value: h,
22
- onChangeValue: k,
33
+ acceptTypes: f = Ce,
34
+ maxSizeMB: u,
35
+ maxFiles: p = 1,
36
+ onErrors: o,
37
+ hideErrors: c = !1,
38
+ disabled: a = !1,
39
+ classNames: F,
40
+ value: g,
41
+ onChangeValue: S,
23
42
  className: Q,
24
- labelDropzonePrompt: N = "Drop files here or click to select",
43
+ labelDropzonePrompt: C = "Drop files here or click to select",
25
44
  labelDropzoneSubPrompt: Z = "",
26
45
  labelOrClickToSelect: U = "Upload file",
27
46
  labelSelectedFiles: V = "Selected Files",
28
47
  labelUploadErrors: ee = "Upload Errors",
29
- labelFileTooLarge: B = "File is too large",
30
- labelInvalidFileType: M = "Invalid file type",
48
+ labelFileTooLarge: j = "File is too large",
49
+ labelInvalidFileType: A = "Invalid file type",
31
50
  labelVideoUploaded: te = "Uploaded",
32
51
  labelVideoReplace: le = "Replace",
33
- singlePick: s = !1,
52
+ singlePick: n = !1,
34
53
  labelDropzoneClassname: ie,
35
54
  labelDropzoneSubClassname: re,
36
- isUploading: c = !1,
37
- uploadProgress: S = 0,
38
- uploadLoadedBytes: se = 0,
39
- uploadTotalBytes: ne = 0,
40
- onCancelUpload: j,
55
+ isUploading: d = !1,
56
+ uploadProgress: R = 0,
57
+ uploadLoadedBytes: ne = 0,
58
+ uploadTotalBytes: se = 0,
59
+ onCancelUpload: W,
41
60
  labelUploadingTitle: oe = "Uploading video...",
42
61
  labelUploadingHint: ce = "Please do not close this page",
43
62
  labelUploadingActionCancel: ae = "Cancel",
44
- persistentDropzone: A = !1,
45
- previewVariant: f = "default",
46
- ...v
63
+ persistentDropzone: $ = !1,
64
+ previewVariant: w = "default",
65
+ ...z
47
66
  }, de) => {
48
- const [i, u] = Y(h ?? []), [d, R] = Y([]), g = i[0], W = d[0]?.file, F = s && i.length > 0 && D(g), me = F && g.type.includes("image"), $ = F && g.type.includes("video"), _ = F && !me && !$, T = s && !i.length && !!W, m = _ ? g : W, b = s && $, fe = b, C = s && i.length > 0, xe = (t, n) => {
49
- R(n), J?.(n);
50
- const r = s ? t.slice(0, 1) : [...i, ...t].slice(0, I);
51
- u(r), k?.(r);
67
+ const [i, b] = J(g ?? []), [x, _] = J([]), y = i[0], T = x[0]?.file, E = n && i.length > 0 && v(y), me = E && y.type.includes("image"), q = E && y.type.includes("video"), H = E && !me && !q, L = n && !i.length && !!T, h = H ? y : T, D = n && q, fe = D, I = n && i.length > 0, pe = (t, s) => {
68
+ _(s), o?.(s);
69
+ const r = n ? t.slice(0, 1) : [...i, ...t].slice(0, p);
70
+ b(r), S?.(r);
52
71
  };
53
72
  ve(() => {
54
- h && u(h);
55
- }, [h]);
56
- const y = (t, n) => {
57
- if (o) return;
73
+ g && !Me(i, g) && b(g);
74
+ }, [i, g]);
75
+ const M = (t, s) => {
76
+ if (a) return;
58
77
  t.stopPropagation();
59
- const r = i.filter((x, z) => z !== n);
60
- u(r), k?.(r);
61
- }, { getRootProps: pe, getInputProps: he, isDragActive: ue, open: H } = be({
62
- onDrop: xe,
63
- accept: w.reduce((t, n) => (t[n] = [], t), {}),
64
- maxSize: G * 1024 * 1024,
65
- maxFiles: s ? 1 : I,
66
- disabled: o || c,
78
+ const r = i.filter((N, k) => k !== s);
79
+ b(r), S?.(r);
80
+ }, { getRootProps: xe, getInputProps: he, isDragActive: ue, open: O } = be({
81
+ onDrop: pe,
82
+ accept: f.reduce((t, s) => (t[s] = [], t), {}),
83
+ maxSize: u * 1024 * 1024,
84
+ maxFiles: n ? 1 : p,
85
+ disabled: a || d,
67
86
  noClick: !0
68
87
  });
69
88
  Fe(de, () => ({
70
- setItems: u
89
+ setItems: b
71
90
  }), []);
72
- const L = !c && !s && A && i.length > 0, O = !c && !s && i.length > 0 && /* @__PURE__ */ l("div", { className: a("w-full mt-2", p?.previewWrapper), children: [
73
- f === "default" && /* @__PURE__ */ l("pre", { className: "font-semibold text-gray-600", children: [
91
+ const P = !d && !n && $ && i.length > 0, X = !d && !n && i.length > 0 && /* @__PURE__ */ l("div", { className: m("w-full mt-2", F?.previewWrapper), children: [
92
+ w === "default" && /* @__PURE__ */ l("pre", { className: "font-semibold text-gray-600", children: [
74
93
  V,
75
94
  ":"
76
95
  ] }),
77
96
  /* @__PURE__ */ e(
78
97
  "ul",
79
98
  {
80
- className: a(
99
+ className: m(
81
100
  "mt-2 text-sm text-gray-500 flex flex-wrap items-start",
82
- f === "image-grid" ? "gap-2 justify-start" : "gap-4 justify-center"
101
+ w === "image-grid" ? "gap-2 justify-start" : "gap-4 justify-center"
83
102
  ),
84
- children: i.map((t, n) => {
85
- const r = D(t) ? t.name : De(t), x = D(t) ? (t.size / (1024 * 1024)).toFixed(2) + " MB" : "";
103
+ children: i.map((t, s) => {
104
+ const r = v(t) ? t.name : De(t), N = v(t) ? (t.size / (1024 * 1024)).toFixed(2) + " MB" : "";
86
105
  return /* @__PURE__ */ l(
87
106
  "li",
88
107
  {
89
- className: a(
108
+ className: m(
90
109
  "relative",
91
- f === "image-grid" ? "w-[75px] h-[75px]" : "flex flex-col items-center gap-2"
110
+ w === "image-grid" ? "w-[75px] h-[75px]" : "flex flex-col items-center gap-2"
92
111
  ),
93
112
  children: [
94
113
  /* @__PURE__ */ l("div", { className: "relative w-full h-full", children: [
95
- /* @__PURE__ */ e(ze, { item: t, styles: p }),
114
+ /* @__PURE__ */ e(ze, { item: t, styles: F }),
96
115
  /* @__PURE__ */ e(
97
116
  "div",
98
117
  {
99
- className: a(
118
+ className: m(
100
119
  "absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm",
101
- f === "image-grid" && "top-1 right-1 bg-white/90 rounded-full p-0.5"
120
+ w === "image-grid" && "top-1 right-1 bg-white/90 rounded-full p-0.5"
102
121
  ),
103
- onClick: (z) => y(z, n),
104
- children: /* @__PURE__ */ e(E, { size: 16, strokeWidth: 1, color: "black" })
122
+ onClick: (k) => M(k, s),
123
+ children: /* @__PURE__ */ e(B, { size: 16, strokeWidth: 1, color: "black" })
105
124
  }
106
125
  )
107
126
  ] }),
108
- f === "default" && /* @__PURE__ */ l("span", { className: "inline-flex flex-col items-center", children: [
127
+ w === "default" && /* @__PURE__ */ l("span", { className: "inline-flex flex-col items-center", children: [
109
128
  /* @__PURE__ */ e("span", { className: "max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap", children: r }),
110
- x && /* @__PURE__ */ l("span", { children: [
129
+ N && /* @__PURE__ */ l("span", { children: [
111
130
  "(",
112
- x,
131
+ N,
113
132
  ")"
114
133
  ] })
115
134
  ] })
116
135
  ]
117
136
  },
118
- n
137
+ s
119
138
  );
120
139
  })
121
140
  }
@@ -123,35 +142,35 @@ const q = (w = 0) => `${(w / (1024 * 1024)).toFixed(0)} MB`, ke = Ne(
123
142
  ] });
124
143
  return /* @__PURE__ */ l("div", { className: "w-full", children: [
125
144
  /* @__PURE__ */ l(
126
- Ce,
145
+ ye,
127
146
  {
128
- ...v,
129
- ...pe({
147
+ ...z,
148
+ ...xe({
130
149
  onClick: (t) => {
131
- if (!(o || c)) {
150
+ if (!(a || d)) {
132
151
  if (fe) {
133
- v.onClick?.(t);
152
+ z.onClick?.(t);
134
153
  return;
135
154
  }
136
- H(), v.onClick?.(t);
155
+ O(), z.onClick?.(t);
137
156
  }
138
157
  }
139
158
  }),
140
- className: a(
159
+ className: m(
141
160
  "w-full text-center flex flex-col items-center justify-center gap-6 cursor-pointer",
142
- !C && "border border-dashed border-[#9368FF80] rounded-[8px] bg-[#FCFCFC] p-4",
143
- C && "min-h-0 border-0 bg-transparent p-0",
144
- o && "border-[#E4E4E7] pointer-events-none",
145
- d.length > 0 && !C && "border-red-500",
161
+ !I && "border border-dashed border-[#9368FF80] rounded-[8px] bg-[#FCFCFC] p-4",
162
+ I && "min-h-0 border-0 bg-transparent p-0",
163
+ a && "border-[#E4E4E7] pointer-events-none",
164
+ x.length > 0 && !I && "border-red-500",
146
165
  ue && "bg-gray-100",
147
- s && "shadow-none!",
148
- s && i.length > 0 && !b && "p-0! shadow-none!",
149
- b && "h-auto! max-h-none! min-h-0! p-2!",
166
+ n && "shadow-none!",
167
+ n && i.length > 0 && !D && "p-0! shadow-none!",
168
+ D && "h-auto! max-h-none! min-h-0! p-2!",
150
169
  Q
151
170
  ),
152
171
  children: [
153
172
  /* @__PURE__ */ e("input", { ...he() }),
154
- c && /* @__PURE__ */ l(
173
+ d && /* @__PURE__ */ l(
155
174
  "div",
156
175
  {
157
176
  className: "w-full h-full min-h-46 rounded-lg border border-[#E4E4E7] bg-[#FCFCFC] flex flex-col items-center justify-center gap-4 p-4",
@@ -160,16 +179,16 @@ const q = (w = 0) => `${(w / (1024 * 1024)).toFixed(0)} MB`, ke = Ne(
160
179
  /* @__PURE__ */ l("div", { className: "relative h-24 w-24", children: [
161
180
  /* @__PURE__ */ e("svg", { className: "h-24 w-24", viewBox: "0 0 100 100", children: /* @__PURE__ */ e("circle", { cx: "50", cy: "50", r: "42", stroke: "#E6E1F5", strokeWidth: "8", fill: "none" }) }),
162
181
  /* @__PURE__ */ l("span", { className: "absolute inset-0 flex items-center justify-center text-lg font-semibold text-foreground", children: [
163
- Math.max(0, Math.min(100, Math.round(S))),
182
+ Math.max(0, Math.min(100, Math.round(R))),
164
183
  "%"
165
184
  ] })
166
185
  ] }),
167
186
  /* @__PURE__ */ l("div", { className: "text-center", children: [
168
187
  /* @__PURE__ */ e("p", { className: "text-xl font-semibold text-foreground", children: oe }),
169
188
  /* @__PURE__ */ l("p", { className: "text-sm text-[#666A78]", children: [
170
- q(se),
189
+ K(ne),
171
190
  " of ",
172
- q(ne)
191
+ K(se)
173
192
  ] }),
174
193
  /* @__PURE__ */ e("p", { className: "mt-2 text-sm text-[#666A78]", children: ce })
175
194
  ] }),
@@ -177,16 +196,16 @@ const q = (w = 0) => `${(w / (1024 * 1024)).toFixed(0)} MB`, ke = Ne(
177
196
  "div",
178
197
  {
179
198
  className: "h-full bg-[#9368FF] transition-[width] duration-150 ease-linear",
180
- style: { width: `${Math.max(0, Math.min(100, S))}%` }
199
+ style: { width: `${Math.max(0, Math.min(100, R))}%` }
181
200
  }
182
201
  ) }),
183
- j && /* @__PURE__ */ e(
202
+ W && /* @__PURE__ */ e(
184
203
  "button",
185
204
  {
186
205
  type: "button",
187
206
  className: "mt-1 h-10 min-w-36 rounded-md border border-[#E4E4E7] bg-white px-6 text-base font-medium text-foreground cursor-pointer",
188
207
  onClick: (t) => {
189
- t.stopPropagation(), j();
208
+ t.stopPropagation(), W();
190
209
  },
191
210
  children: ae
192
211
  }
@@ -194,38 +213,38 @@ const q = (w = 0) => `${(w / (1024 * 1024)).toFixed(0)} MB`, ke = Ne(
194
213
  ]
195
214
  }
196
215
  ),
197
- !c && (i.length === 0 || !s && A) && d.length === 0 && /* @__PURE__ */ l(
216
+ !d && (i.length === 0 || !n && $) && x.length === 0 && /* @__PURE__ */ l(
198
217
  "div",
199
218
  {
200
- className: a(
219
+ className: m(
201
220
  "flex flex-col items-center gap-2 w-full",
202
- p?.idleWrapper
221
+ F?.idleWrapper
203
222
  ),
204
223
  children: [
205
224
  /* @__PURE__ */ e("div", { className: "flex size-12 items-center justify-center rounded-full bg-[#9368FF1F]", children: /* @__PURE__ */ e(ge, { className: "size-6 text-[#9368FF]" }) }),
206
- /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-1 w-full", children: !o && /* @__PURE__ */ l(P, { children: [
225
+ /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-1 w-full", children: !a && /* @__PURE__ */ l(Y, { children: [
207
226
  /* @__PURE__ */ e(
208
227
  "span",
209
228
  {
210
- className: a(
211
- "font-semibold text-[14px] leading-[125%] text-[#06080D] text-center w-full",
229
+ className: m(
230
+ "font-semibold text-[14px] leading-[125%] text-[#06080D] text-center w-full whitespace-pre-line",
212
231
  ie
213
232
  ),
214
- children: N
233
+ children: C
215
234
  }
216
235
  ),
217
236
  /* @__PURE__ */ e(
218
237
  "span",
219
238
  {
220
- className: a(
221
- "font-medium text-[12px] leading-[120%] text-[#666A78] text-center w-full",
239
+ className: m(
240
+ "font-medium text-[12px] leading-[120%] text-[#666A78] text-center w-full whitespace-pre-line",
222
241
  re
223
242
  ),
224
243
  children: Z
225
244
  }
226
245
  )
227
246
  ] }) }),
228
- !o && /* @__PURE__ */ e(
247
+ !a && /* @__PURE__ */ e(
229
248
  Ie,
230
249
  {
231
250
  type: "button",
@@ -236,42 +255,42 @@ const q = (w = 0) => `${(w / (1024 * 1024)).toFixed(0)} MB`, ke = Ne(
236
255
  ]
237
256
  }
238
257
  ),
239
- !c && d.length > 0 && !T && /* @__PURE__ */ l("div", { className: a("w-full mt-4", p?.errorWrapper), children: [
258
+ !d && x.length > 0 && !L && /* @__PURE__ */ l("div", { className: m("w-full mt-4", F?.errorWrapper), children: [
240
259
  /* @__PURE__ */ l("span", { className: "font-semibold text-red-500", children: [
241
260
  ee,
242
261
  ":"
243
262
  ] }),
244
- /* @__PURE__ */ e("ul", { className: "mt-2 text-sm text-red-500 list-disc list-inside", children: d.map((t, n) => /* @__PURE__ */ l("li", { children: [
263
+ /* @__PURE__ */ e("ul", { className: "mt-2 text-sm text-red-500 list-disc list-inside", children: x.map((t, s) => /* @__PURE__ */ l("li", { children: [
245
264
  t.file.name,
246
265
  " (",
247
266
  (t.file.size / (1024 * 1024)).toFixed(2),
248
267
  " MB)",
249
- !K && /* @__PURE__ */ e("ul", { className: "ml-4 list-disc list-inside", children: t.errors.map((r, x) => /* @__PURE__ */ l("li", { children: [
250
- r.code === "file-too-large" && B,
251
- r.code === "file-invalid-type" && M,
268
+ !c && /* @__PURE__ */ e("ul", { className: "ml-4 list-disc list-inside", children: t.errors.map((r, N) => /* @__PURE__ */ l("li", { children: [
269
+ r.code === "file-too-large" && j,
270
+ r.code === "file-invalid-type" && A,
252
271
  r.code !== "file-too-large" && r.code !== "file-invalid-type" && r.message
253
- ] }, x)) })
254
- ] }, n)) })
272
+ ] }, N)) })
273
+ ] }, s)) })
255
274
  ] }),
256
- !c && !!(s && i.length) && /* @__PURE__ */ e(P, { children: _ ? /* @__PURE__ */ l(
275
+ !d && !!(n && i.length) && /* @__PURE__ */ e(Y, { children: H ? /* @__PURE__ */ l(
257
276
  "div",
258
277
  {
259
278
  className: "w-full max-w-[502px] flex flex-col items-center gap-4",
260
279
  onClick: (t) => t.stopPropagation(),
261
280
  children: [
262
- /* @__PURE__ */ e("p", { className: "w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]", children: N }),
281
+ /* @__PURE__ */ e("p", { className: "w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]", children: C }),
263
282
  /* @__PURE__ */ l("div", { className: "w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4", children: [
264
- /* @__PURE__ */ e("div", { className: "size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(X, { size: 20 }) }),
283
+ /* @__PURE__ */ e("div", { className: "size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(G, { size: 20 }) }),
265
284
  /* @__PURE__ */ l("div", { className: "flex flex-col items-start text-left gap-1 min-w-0 flex-1", children: [
266
- /* @__PURE__ */ e("span", { className: "w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate", children: m?.name }),
267
- /* @__PURE__ */ e("span", { className: "w-full text-[12px] font-medium leading-[120%] text-[#666A78]", children: m ? `${(m.size / (1024 * 1024)).toFixed(0)} MB` : "" })
285
+ /* @__PURE__ */ e("span", { className: "w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate", children: h?.name }),
286
+ /* @__PURE__ */ e("span", { className: "w-full text-[12px] font-medium leading-[120%] text-[#666A78]", children: h ? `${(h.size / (1024 * 1024)).toFixed(0)} MB` : "" })
268
287
  ] }),
269
- !o && /* @__PURE__ */ e(
288
+ !a && /* @__PURE__ */ e(
270
289
  "div",
271
290
  {
272
291
  className: "size-6 flex items-center justify-center cursor-pointer",
273
- onClick: (t) => y(t, 0),
274
- children: /* @__PURE__ */ e(E, { size: 24, color: "#06080D" })
292
+ onClick: (t) => M(t, 0),
293
+ children: /* @__PURE__ */ e(B, { size: 24, color: "#06080D" })
275
294
  }
276
295
  )
277
296
  ] })
@@ -281,51 +300,51 @@ const q = (w = 0) => `${(w / (1024 * 1024)).toFixed(0)} MB`, ke = Ne(
281
300
  Ee,
282
301
  {
283
302
  item: i[0],
284
- onRemoveClick: (t) => y(t, 0),
303
+ onRemoveClick: (t) => M(t, 0),
285
304
  onReplaceClick: (t) => {
286
- t.stopPropagation(), !o && H();
305
+ t.stopPropagation(), !a && O();
287
306
  },
288
307
  labelUploaded: te,
289
308
  labelReplace: le,
290
- disabled: o
309
+ disabled: a
291
310
  }
292
311
  ) }),
293
- !c && T && /* @__PURE__ */ l(
312
+ !d && L && /* @__PURE__ */ l(
294
313
  "div",
295
314
  {
296
315
  className: "w-full max-w-[502px] flex flex-col items-center gap-4",
297
316
  onClick: (t) => t.stopPropagation(),
298
317
  children: [
299
- /* @__PURE__ */ e("p", { className: "w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]", children: N }),
318
+ /* @__PURE__ */ e("p", { className: "w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]", children: C }),
300
319
  /* @__PURE__ */ l("div", { className: "w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4", children: [
301
- /* @__PURE__ */ e("div", { className: "size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(X, { size: 20 }) }),
320
+ /* @__PURE__ */ e("div", { className: "size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(G, { size: 20 }) }),
302
321
  /* @__PURE__ */ l("div", { className: "flex flex-col items-start text-left gap-1 min-w-0 flex-1", children: [
303
- /* @__PURE__ */ e("span", { className: "w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate", children: m?.name }),
304
- /* @__PURE__ */ e("span", { className: "w-full text-[12px] font-medium leading-[120%] text-[#666A78]", children: m ? `${(m.size / (1024 * 1024)).toFixed(0)} MB` : "" })
322
+ /* @__PURE__ */ e("span", { className: "w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate", children: h?.name }),
323
+ /* @__PURE__ */ e("span", { className: "w-full text-[12px] font-medium leading-[120%] text-[#666A78]", children: h ? `${(h.size / (1024 * 1024)).toFixed(0)} MB` : "" })
305
324
  ] }),
306
- !o && /* @__PURE__ */ e(
325
+ !a && /* @__PURE__ */ e(
307
326
  "div",
308
327
  {
309
328
  className: "size-6 flex items-center justify-center cursor-pointer",
310
329
  onClick: (t) => {
311
- t.stopPropagation(), R([]);
330
+ t.stopPropagation(), _([]);
312
331
  },
313
- children: /* @__PURE__ */ e(E, { size: 24, color: "#06080D" })
332
+ children: /* @__PURE__ */ e(B, { size: 24, color: "#06080D" })
314
333
  }
315
334
  )
316
335
  ] }),
317
336
  /* @__PURE__ */ l("div", { className: "w-full bg-[#DC26260F] p-4 flex items-start gap-4", children: [
318
337
  /* @__PURE__ */ e(we, { size: 20, color: "#DC2626" }),
319
- /* @__PURE__ */ e("p", { className: "text-[12px] leading-[120%] font-medium text-[#DC2626] text-left", children: d[0]?.errors?.[0]?.code === "file-too-large" ? B : d[0]?.errors?.[0]?.message || M })
338
+ /* @__PURE__ */ e("p", { className: "text-[12px] leading-[120%] font-medium text-[#DC2626] text-left", children: x[0]?.errors?.[0]?.code === "file-too-large" ? j : x[0]?.errors?.[0]?.message || A })
320
339
  ] })
321
340
  ]
322
341
  }
323
342
  ),
324
- !L && O
343
+ !P && X
325
344
  ]
326
345
  }
327
346
  ),
328
- L && /* @__PURE__ */ e("div", { className: "w-full", children: O })
347
+ P && /* @__PURE__ */ e("div", { className: "w-full", children: X })
329
348
  ] });
330
349
  }
331
350
  );
package/Dropzone/Dropzone.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropzone.js","sources":["../../src/Dropzone/Dropzone.tsx"],"sourcesContent":["import { FileTextIcon, InfoIcon, UploadIcon, X } from 'lucide-react';\r\nimport { forwardRef, useEffect, useImperativeHandle, useState } from 'react';\r\nimport { FileRejection, useDropzone } from 'react-dropzone';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nimport { Card } from '../Card/Card';\r\n\r\nimport {\r\n DEFAULT_FILE_TYPES,\r\n DropzoneControl,\r\n DropzoneProps,\r\n DropzoneValueItem\r\n} from './Dropzone.types';\r\nimport { FilePreview } from './DropzoneFilePreview';\r\nimport { DropzoneSinglePickPreview } from './DropzoneSinglePickPreview';\r\nimport { extractName, isFile } from './DropzoneUtils';\r\nimport { Button } from \"../Button\";\r\n\r\nconst formatBytesToMb = (bytes = 0) => `${(bytes / (1024 * 1024)).toFixed(0)} MB`;\r\n\r\n/**\r\n * Dropzone component - A drag-and-drop file upload area with image previews, error handling, and localization.\r\n *\r\n * @component\r\n * @param {DropzoneProps} props - The props for the Dropzone component.\r\n * @param {string[]} [props.acceptTypes=DEFAULT_FILE_TYPES] - Allowed file MIME types.\r\n * @param {number} props.maxSizeMB - Maximum allowed file size in megabytes.\r\n * @param {number} [props.maxFiles=1] - Maximum number of files that can be uploaded.\r\n * @param {DropzoneTranslations} props.translations - Translations for text labels.\r\n * @param {(errors: FileRejection[]) => void} [props.onErrors] - Callback triggered when file errors occur.\r\n * @param {boolean} [props.hideErrors=false] - Whether to hide error messages.\r\n * @param {boolean} [props.disabled=false] - Whether the dropzone is disabled.\r\n * @param {DropzoneStyles} [props.classNames] - Custom classNames for different dropzone states.\r\n * @param {DropzoneValueItem[]} [props.value=[]] - Current selected files or URLs.\r\n * @param {(items: DropzoneValueItem[]) => void} [props.onChangeValue] - Callback triggered when file selection changes.\r\n * @param {string} [props.className] - Additional class names for styling.\r\n * @param {React.Ref<HTMLDivElement>} ref - Ref for the root dropzone container.\r\n * @returns {JSX.Element} The rendered Dropzone component.\r\n */\r\nexport const Dropzone = forwardRef<DropzoneControl, DropzoneProps>(\r\n (\r\n {\r\n acceptTypes = DEFAULT_FILE_TYPES,\r\n maxSizeMB,\r\n maxFiles = 1,\r\n onErrors,\r\n hideErrors = false,\r\n disabled = false,\r\n classNames,\r\n value,\r\n onChangeValue,\r\n className,\r\n labelDropzonePrompt = 'Drop files here or click to select',\r\n labelDropzoneSubPrompt = '',\r\n labelOrClickToSelect = 'Upload file',\r\n labelSelectedFiles = 'Selected Files',\r\n labelUploadErrors = 'Upload Errors',\r\n labelFileTooLarge = 'File is too large',\r\n labelInvalidFileType = 'Invalid file type',\r\n labelVideoUploaded = 'Uploaded',\r\n labelVideoReplace = 'Replace',\r\n singlePick = false,\r\n labelDropzoneClassname,\r\n labelDropzoneSubClassname,\r\n isUploading = false,\r\n uploadProgress = 0,\r\n uploadLoadedBytes = 0,\r\n uploadTotalBytes = 0,\r\n onCancelUpload,\r\n labelUploadingTitle = 'Uploading video...',\r\n labelUploadingHint = 'Please do not close this page',\r\n labelUploadingActionCancel = 'Cancel',\r\n persistentDropzone = false,\r\n previewVariant = 'default',\r\n ...restProps\r\n },\r\n ref\r\n ) => {\r\n const [items, setItems] = useState<DropzoneValueItem[]>(value ?? []);\r\n const [fileErrors, setFileErrors] = useState<FileRejection[]>([]);\r\n const firstItem = items[0];\r\n const firstRejectedFile = fileErrors[0]?.file;\r\n const isSingleFile = singlePick && items.length > 0 && isFile(firstItem);\r\n const isSingleImage = isSingleFile && firstItem.type.includes('image');\r\n const isSingleVideo =\r\n isSingleFile &&\r\n firstItem.type.includes('video');\r\n const isSingleDocument = isSingleFile && !isSingleImage && !isSingleVideo;\r\n const hasRejectedSingleFile = singlePick && !items.length && Boolean(firstRejectedFile);\r\n const singleFileCard = isSingleDocument ? firstItem : firstRejectedFile;\r\n const hasSingleVideoPreview =\r\n singlePick && isSingleVideo;\r\n const shouldBlockRootOpen = hasSingleVideoPreview;\r\n const isContentPreviewMode = singlePick && items.length > 0;\r\n\r\n const onDrop = (acceptedFiles: File[], fileRejections: FileRejection[]) => {\r\n setFileErrors(fileRejections);\r\n onErrors?.(fileRejections);\r\n\r\n const newItems = singlePick\r\n ? acceptedFiles.slice(0, 1)\r\n : [...items, ...acceptedFiles].slice(0, maxFiles);\r\n\r\n setItems(newItems);\r\n onChangeValue?.(newItems);\r\n };\r\n\r\n useEffect(() => {\r\n if (value) {\r\n setItems(value);\r\n }\r\n }, [value]);\r\n\r\n const removeItem = (\r\n event: React.MouseEvent<HTMLDivElement>,\r\n index: number\r\n ) => {\r\n if (disabled) return;\r\n event.stopPropagation();\r\n\r\n const newItems = items.filter((_, i) => i !== index);\r\n setItems(newItems);\r\n onChangeValue?.(newItems);\r\n };\r\n\r\n const { getRootProps, getInputProps, isDragActive, open } = useDropzone({\r\n onDrop,\r\n accept: acceptTypes.reduce((acc, fileType) => {\r\n acc[fileType] = [];\r\n return acc;\r\n }, {} as Record<string, string[]>),\r\n maxSize: maxSizeMB * 1024 * 1024,\r\n maxFiles: singlePick ? 1 : maxFiles,\r\n disabled: disabled || isUploading,\r\n noClick: true,\r\n });\r\n\r\n useImperativeHandle(ref, () => {\r\n return {\r\n setItems,\r\n };\r\n }, []);\r\n\r\n const shouldRenderDetachedPreview =\r\n !isUploading && !singlePick && persistentDropzone && items.length > 0;\r\n\r\n const previewBlock = !isUploading && !singlePick && items.length > 0 && (\r\n <div className={cn('w-full mt-2', classNames?.previewWrapper)}>\r\n {previewVariant === 'default' && (\r\n <pre className=\"font-semibold text-gray-600\">\r\n {labelSelectedFiles}:\r\n </pre>\r\n )}\r\n <ul\r\n className={cn(\r\n 'mt-2 text-sm text-gray-500 flex flex-wrap items-start',\r\n previewVariant === 'image-grid'\r\n ? 'gap-2 justify-start'\r\n : 'gap-4 justify-center'\r\n )}\r\n >\r\n {items.map((item, index) => {\r\n const fileName = isFile(item) ? item.name : extractName(item);\r\n const fileSize = isFile(item)\r\n ? (item.size / (1024 * 1024)).toFixed(2) + ' MB'\r\n : '';\r\n\r\n return (\r\n <li\r\n key={index}\r\n className={cn(\r\n 'relative',\r\n previewVariant === 'image-grid'\r\n ? 'w-[75px] h-[75px]'\r\n : 'flex flex-col items-center gap-2'\r\n )}\r\n >\r\n <div className=\"relative w-full h-full\">\r\n <FilePreview item={item} styles={classNames} />\r\n <div\r\n className={cn(\r\n 'absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm',\r\n previewVariant === 'image-grid' && 'top-1 right-1 bg-white/90 rounded-full p-0.5'\r\n )}\r\n onClick={(event) => removeItem(event, index)}\r\n >\r\n <X size={16} strokeWidth={1} color=\"black\" />\r\n </div>\r\n </div>\r\n {previewVariant === 'default' && (\r\n <span className=\"inline-flex flex-col items-center\">\r\n <span className=\"max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap\">\r\n {fileName}\r\n </span>\r\n {fileSize && <span>({fileSize})</span>}\r\n </span>\r\n )}\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n </div>\r\n );\r\n\r\n return (\r\n <div className=\"w-full\">\r\n <Card\r\n {...restProps}\r\n {...getRootProps({\r\n onClick: (event) => {\r\n if (disabled || isUploading) return;\r\n if (shouldBlockRootOpen) {\r\n restProps.onClick?.(event);\r\n return;\r\n }\r\n open();\r\n restProps.onClick?.(event);\r\n },\r\n })}\r\n className={cn(\r\n `w-full text-center flex flex-col items-center justify-center gap-6 cursor-pointer`,\r\n !isContentPreviewMode &&\r\n 'border border-dashed border-[#9368FF80] rounded-[8px] bg-[#FCFCFC] p-4',\r\n isContentPreviewMode && 'min-h-0 border-0 bg-transparent p-0',\r\n disabled && 'border-[#E4E4E7] pointer-events-none',\r\n fileErrors.length > 0 && !isContentPreviewMode && 'border-red-500',\r\n isDragActive && 'bg-gray-100',\r\n singlePick && 'shadow-none!',\r\n singlePick && items.length > 0 && !hasSingleVideoPreview && 'p-0! shadow-none!',\r\n hasSingleVideoPreview && 'h-auto! max-h-none! min-h-0! p-2!',\r\n className\r\n )}\r\n >\r\n <input {...getInputProps()} />\r\n\r\n {isUploading && (\r\n <div\r\n className=\"w-full h-full min-h-46 rounded-lg border border-[#E4E4E7] bg-[#FCFCFC] flex flex-col items-center justify-center gap-4 p-4\"\r\n onClick={(event) => event.stopPropagation()}\r\n >\r\n <div className=\"relative h-24 w-24\">\r\n <svg className=\"h-24 w-24\" viewBox=\"0 0 100 100\">\r\n <circle cx=\"50\" cy=\"50\" r=\"42\" stroke=\"#E6E1F5\" strokeWidth=\"8\" fill=\"none\" />\r\n </svg>\r\n <span className=\"absolute inset-0 flex items-center justify-center text-lg font-semibold text-foreground\">\r\n {Math.max(0, Math.min(100, Math.round(uploadProgress)))}%\r\n </span>\r\n </div>\r\n\r\n <div className=\"text-center\">\r\n <p className=\"text-xl font-semibold text-foreground\">{labelUploadingTitle}</p>\r\n <p className=\"text-sm text-[#666A78]\">\r\n {formatBytesToMb(uploadLoadedBytes)} of {formatBytesToMb(uploadTotalBytes)}\r\n </p>\r\n <p className=\"mt-2 text-sm text-[#666A78]\">{labelUploadingHint}</p>\r\n </div>\r\n\r\n <div className=\"w-full max-w-[520px] h-2 rounded-full bg-[#E6E1F5] overflow-hidden\">\r\n <div\r\n className=\"h-full bg-[#9368FF] transition-[width] duration-150 ease-linear\"\r\n style={{ width: `${Math.max(0, Math.min(100, uploadProgress))}%` }}\r\n />\r\n </div>\r\n\r\n {onCancelUpload && (\r\n <button\r\n type=\"button\"\r\n className=\"mt-1 h-10 min-w-36 rounded-md border border-[#E4E4E7] bg-white px-6 text-base font-medium text-foreground cursor-pointer\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n onCancelUpload();\r\n }}\r\n >\r\n {labelUploadingActionCancel}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {!isUploading &&\r\n (items.length === 0 || (!singlePick && persistentDropzone)) &&\r\n fileErrors.length === 0 && (\r\n <div\r\n className={cn(\r\n 'flex flex-col items-center gap-2 w-full',\r\n classNames?.idleWrapper\r\n )}\r\n >\r\n <div className=\"flex size-12 items-center justify-center rounded-full bg-[#9368FF1F]\">\r\n <UploadIcon className=\"size-6 text-[#9368FF]\" />\r\n </div>\r\n\r\n <div className=\"flex flex-col items-center gap-1 w-full\">\r\n {!disabled && (\r\n <>\r\n <span\r\n className={cn(\r\n \"font-semibold text-[14px] leading-[125%] text-[#06080D] text-center w-full\",\r\n labelDropzoneClassname\r\n )}\r\n >\r\n {labelDropzonePrompt}\r\n </span>\r\n\r\n <span\r\n className={cn(\r\n \"font-medium text-[12px] leading-[120%] text-[#666A78] text-center w-full\",\r\n labelDropzoneSubClassname\r\n )}\r\n >\r\n {labelDropzoneSubPrompt}\r\n </span>\r\n </>\r\n )}\r\n </div>\r\n\r\n {!disabled && (\r\n <Button\r\n type=\"button\"\r\n size=\"md\"\r\n >\r\n {labelOrClickToSelect}\r\n </Button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {!isUploading && fileErrors.length > 0 && !hasRejectedSingleFile && (\r\n <div className={cn('w-full mt-4', classNames?.errorWrapper)}>\r\n <span className=\"font-semibold text-red-500\">\r\n {labelUploadErrors}:\r\n </span>\r\n <ul className=\"mt-2 text-sm text-red-500 list-disc list-inside\">\r\n {fileErrors.map((fileRejection, index) => (\r\n <li key={index}>\r\n {fileRejection.file.name} (\r\n {(fileRejection.file.size / (1024 * 1024)).toFixed(2)} MB)\r\n {!hideErrors && (\r\n <ul className=\"ml-4 list-disc list-inside\">\r\n {fileRejection.errors.map((error, errorIndex) => (\r\n <li key={errorIndex}>\r\n {error.code === 'file-too-large' && labelFileTooLarge}\r\n {error.code === 'file-invalid-type' &&\r\n labelInvalidFileType}\r\n {error.code !== 'file-too-large' &&\r\n error.code !== 'file-invalid-type' &&\r\n error.message}\r\n </li>\r\n ))}\r\n </ul>\r\n )}\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n )}\r\n\r\n {!isUploading && Boolean(singlePick && items.length) && (\r\n <>\r\n {isSingleDocument ? (\r\n <div\r\n className=\"w-full max-w-[502px] flex flex-col items-center gap-4\"\r\n onClick={(event) => event.stopPropagation()}\r\n >\r\n <p className=\"w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]\">\r\n {labelDropzonePrompt}\r\n </p>\r\n\r\n <div className=\"w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4\">\r\n <div className=\"size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0\">\r\n <FileTextIcon size={20} />\r\n </div>\r\n <div className=\"flex flex-col items-start text-left gap-1 min-w-0 flex-1\">\r\n <span className=\"w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate\">\r\n {singleFileCard?.name}\r\n </span>\r\n <span className=\"w-full text-[12px] font-medium leading-[120%] text-[#666A78]\">\r\n {singleFileCard\r\n ? `${(singleFileCard.size / (1024 * 1024)).toFixed(0)} MB`\r\n : ''}\r\n </span>\r\n </div>\r\n {!disabled && (\r\n <div\r\n className=\"size-6 flex items-center justify-center cursor-pointer\"\r\n onClick={(event) => removeItem(event, 0)}\r\n >\r\n <X size={24} color=\"#06080D\" />\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n ) : (\r\n <DropzoneSinglePickPreview\r\n item={items[0]}\r\n onRemoveClick={(e) => removeItem(e, 0)}\r\n onReplaceClick={(e) => {\r\n e.stopPropagation();\r\n if (disabled) return;\r\n open();\r\n }}\r\n labelUploaded={labelVideoUploaded}\r\n labelReplace={labelVideoReplace}\r\n disabled={disabled}\r\n />\r\n )}\r\n </>\r\n )}\r\n\r\n {!isUploading && hasRejectedSingleFile && (\r\n <div\r\n className=\"w-full max-w-[502px] flex flex-col items-center gap-4\"\r\n onClick={(event) => event.stopPropagation()}\r\n >\r\n <p className=\"w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]\">\r\n {labelDropzonePrompt}\r\n </p>\r\n\r\n <div className=\"w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4\">\r\n <div className=\"size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0\">\r\n <FileTextIcon size={20} />\r\n </div>\r\n <div className=\"flex flex-col items-start text-left gap-1 min-w-0 flex-1\">\r\n <span className=\"w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate\">\r\n {singleFileCard?.name}\r\n </span>\r\n <span className=\"w-full text-[12px] font-medium leading-[120%] text-[#666A78]\">\r\n {singleFileCard\r\n ? `${(singleFileCard.size / (1024 * 1024)).toFixed(0)} MB`\r\n : ''}\r\n </span>\r\n </div>\r\n {!disabled && (\r\n <div\r\n className=\"size-6 flex items-center justify-center cursor-pointer\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n setFileErrors([]);\r\n }}\r\n >\r\n <X size={24} color=\"#06080D\" />\r\n </div>\r\n )}\r\n </div>\r\n\r\n <div className=\"w-full bg-[#DC26260F] p-4 flex items-start gap-4\">\r\n <InfoIcon size={20} color=\"#DC2626\" />\r\n <p className=\"text-[12px] leading-[120%] font-medium text-[#DC2626] text-left\">\r\n {fileErrors[0]?.errors?.[0]?.code === 'file-too-large'\r\n ? labelFileTooLarge\r\n : fileErrors[0]?.errors?.[0]?.message || labelInvalidFileType}\r\n </p>\r\n </div>\r\n </div>\r\n )}\r\n\r\n {!shouldRenderDetachedPreview && previewBlock}\r\n </Card>\r\n {shouldRenderDetachedPreview && <div className=\"w-full\">{previewBlock}</div>}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nDropzone.displayName = 'Dropzone';\r\n\r\n"],"names":["formatBytesToMb","bytes","Dropzone","forwardRef","acceptTypes","DEFAULT_FILE_TYPES","maxSizeMB","maxFiles","onErrors","hideErrors","disabled","classNames","value","onChangeValue","className","labelDropzonePrompt","labelDropzoneSubPrompt","labelOrClickToSelect","labelSelectedFiles","labelUploadErrors","labelFileTooLarge","labelInvalidFileType","labelVideoUploaded","labelVideoReplace","singlePick","labelDropzoneClassname","labelDropzoneSubClassname","isUploading","uploadProgress","uploadLoadedBytes","uploadTotalBytes","onCancelUpload","labelUploadingTitle","labelUploadingHint","labelUploadingActionCancel","persistentDropzone","previewVariant","restProps","ref","items","setItems","useState","fileErrors","setFileErrors","firstItem","firstRejectedFile","isSingleFile","isFile","isSingleImage","isSingleVideo","isSingleDocument","hasRejectedSingleFile","singleFileCard","hasSingleVideoPreview","shouldBlockRootOpen","isContentPreviewMode","onDrop","acceptedFiles","fileRejections","newItems","useEffect","removeItem","event","index","_","i","getRootProps","getInputProps","isDragActive","open","useDropzone","acc","fileType","useImperativeHandle","shouldRenderDetachedPreview","previewBlock","jsxs","cn","jsx","item","fileName","extractName","fileSize","FilePreview","X","Card","UploadIcon","Fragment","Button","fileRejection","error","errorIndex","FileTextIcon","DropzoneSinglePickPreview","e","InfoIcon"],"mappings":"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"}
1
+ {"version":3,"file":"Dropzone.js","sources":["../../src/Dropzone/Dropzone.tsx"],"sourcesContent":["import { FileTextIcon, InfoIcon, UploadIcon, X } from 'lucide-react';\r\nimport { forwardRef, useEffect, useImperativeHandle, useState } from 'react';\r\nimport { FileRejection, useDropzone } from 'react-dropzone';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nimport { Card } from '../Card/Card';\r\n\r\nimport {\r\n DEFAULT_FILE_TYPES,\r\n DropzoneControl,\r\n DropzoneProps,\r\n DropzoneValueItem\r\n} from './Dropzone.types';\r\nimport { FilePreview } from './DropzoneFilePreview';\r\nimport { DropzoneSinglePickPreview } from './DropzoneSinglePickPreview';\r\nimport { extractName, isFile } from './DropzoneUtils';\r\nimport { Button } from \"../Button\";\r\n\r\nconst formatBytesToMb = (bytes = 0) => `${(bytes / (1024 * 1024)).toFixed(0)} MB`;\r\nconst areItemsEqual = (a: DropzoneValueItem[], b: DropzoneValueItem[]) => {\r\n if (a === b) return true;\r\n if (a.length !== b.length) return false;\r\n\r\n for (let i = 0; i < a.length; i++) {\r\n const left = a[i];\r\n const right = b[i];\r\n\r\n if (left === right) continue;\r\n\r\n if (typeof left === 'string' && typeof right === 'string') {\r\n if (left !== right) return false;\r\n continue;\r\n }\r\n\r\n if (isFile(left) && isFile(right)) {\r\n if (\r\n left.name !== right.name ||\r\n left.size !== right.size ||\r\n left.type !== right.type ||\r\n left.lastModified !== right.lastModified\r\n ) {\r\n return false;\r\n }\r\n continue;\r\n }\r\n\r\n return false;\r\n }\r\n\r\n return true;\r\n};\r\n\r\n/**\r\n * Dropzone component - A drag-and-drop file upload area with image previews, error handling, and localization.\r\n *\r\n * @component\r\n * @param {DropzoneProps} props - The props for the Dropzone component.\r\n * @param {string[]} [props.acceptTypes=DEFAULT_FILE_TYPES] - Allowed file MIME types.\r\n * @param {number} props.maxSizeMB - Maximum allowed file size in megabytes.\r\n * @param {number} [props.maxFiles=1] - Maximum number of files that can be uploaded.\r\n * @param {DropzoneTranslations} props.translations - Translations for text labels.\r\n * @param {(errors: FileRejection[]) => void} [props.onErrors] - Callback triggered when file errors occur.\r\n * @param {boolean} [props.hideErrors=false] - Whether to hide error messages.\r\n * @param {boolean} [props.disabled=false] - Whether the dropzone is disabled.\r\n * @param {DropzoneStyles} [props.classNames] - Custom classNames for different dropzone states.\r\n * @param {DropzoneValueItem[]} [props.value=[]] - Current selected files or URLs.\r\n * @param {(items: DropzoneValueItem[]) => void} [props.onChangeValue] - Callback triggered when file selection changes.\r\n * @param {string} [props.className] - Additional class names for styling.\r\n * @param {React.Ref<HTMLDivElement>} ref - Ref for the root dropzone container.\r\n * @returns {JSX.Element} The rendered Dropzone component.\r\n */\r\nexport const Dropzone = forwardRef<DropzoneControl, DropzoneProps>(\r\n (\r\n {\r\n acceptTypes = DEFAULT_FILE_TYPES,\r\n maxSizeMB,\r\n maxFiles = 1,\r\n onErrors,\r\n hideErrors = false,\r\n disabled = false,\r\n classNames,\r\n value,\r\n onChangeValue,\r\n className,\r\n labelDropzonePrompt = 'Drop files here or click to select',\r\n labelDropzoneSubPrompt = '',\r\n labelOrClickToSelect = 'Upload file',\r\n labelSelectedFiles = 'Selected Files',\r\n labelUploadErrors = 'Upload Errors',\r\n labelFileTooLarge = 'File is too large',\r\n labelInvalidFileType = 'Invalid file type',\r\n labelVideoUploaded = 'Uploaded',\r\n labelVideoReplace = 'Replace',\r\n singlePick = false,\r\n labelDropzoneClassname,\r\n labelDropzoneSubClassname,\r\n isUploading = false,\r\n uploadProgress = 0,\r\n uploadLoadedBytes = 0,\r\n uploadTotalBytes = 0,\r\n onCancelUpload,\r\n labelUploadingTitle = 'Uploading video...',\r\n labelUploadingHint = 'Please do not close this page',\r\n labelUploadingActionCancel = 'Cancel',\r\n persistentDropzone = false,\r\n previewVariant = 'default',\r\n ...restProps\r\n },\r\n ref\r\n ) => {\r\n const [items, setItems] = useState<DropzoneValueItem[]>(value ?? []);\r\n const [fileErrors, setFileErrors] = useState<FileRejection[]>([]);\r\n const firstItem = items[0];\r\n const firstRejectedFile = fileErrors[0]?.file;\r\n const isSingleFile = singlePick && items.length > 0 && isFile(firstItem);\r\n const isSingleImage = isSingleFile && firstItem.type.includes('image');\r\n const isSingleVideo =\r\n isSingleFile &&\r\n firstItem.type.includes('video');\r\n const isSingleDocument = isSingleFile && !isSingleImage && !isSingleVideo;\r\n const hasRejectedSingleFile = singlePick && !items.length && Boolean(firstRejectedFile);\r\n const singleFileCard = isSingleDocument ? firstItem : firstRejectedFile;\r\n const hasSingleVideoPreview =\r\n singlePick && isSingleVideo;\r\n const shouldBlockRootOpen = hasSingleVideoPreview;\r\n const isContentPreviewMode = singlePick && items.length > 0;\r\n\r\n const onDrop = (acceptedFiles: File[], fileRejections: FileRejection[]) => {\r\n setFileErrors(fileRejections);\r\n onErrors?.(fileRejections);\r\n\r\n const newItems = singlePick\r\n ? acceptedFiles.slice(0, 1)\r\n : [...items, ...acceptedFiles].slice(0, maxFiles);\r\n\r\n setItems(newItems);\r\n onChangeValue?.(newItems);\r\n };\r\n\r\n useEffect(() => {\r\n if (value && !areItemsEqual(items, value)) {\r\n setItems(value);\r\n }\r\n }, [items, value]);\r\n\r\n const removeItem = (\r\n event: React.MouseEvent<HTMLDivElement>,\r\n index: number\r\n ) => {\r\n if (disabled) return;\r\n event.stopPropagation();\r\n\r\n const newItems = items.filter((_, i) => i !== index);\r\n setItems(newItems);\r\n onChangeValue?.(newItems);\r\n };\r\n\r\n const { getRootProps, getInputProps, isDragActive, open } = useDropzone({\r\n onDrop,\r\n accept: acceptTypes.reduce((acc, fileType) => {\r\n acc[fileType] = [];\r\n return acc;\r\n }, {} as Record<string, string[]>),\r\n maxSize: maxSizeMB * 1024 * 1024,\r\n maxFiles: singlePick ? 1 : maxFiles,\r\n disabled: disabled || isUploading,\r\n noClick: true,\r\n });\r\n\r\n useImperativeHandle(ref, () => {\r\n return {\r\n setItems,\r\n };\r\n }, []);\r\n\r\n const shouldRenderDetachedPreview =\r\n !isUploading && !singlePick && persistentDropzone && items.length > 0;\r\n\r\n const previewBlock = !isUploading && !singlePick && items.length > 0 && (\r\n <div className={cn('w-full mt-2', classNames?.previewWrapper)}>\r\n {previewVariant === 'default' && (\r\n <pre className=\"font-semibold text-gray-600\">\r\n {labelSelectedFiles}:\r\n </pre>\r\n )}\r\n <ul\r\n className={cn(\r\n 'mt-2 text-sm text-gray-500 flex flex-wrap items-start',\r\n previewVariant === 'image-grid'\r\n ? 'gap-2 justify-start'\r\n : 'gap-4 justify-center'\r\n )}\r\n >\r\n {items.map((item, index) => {\r\n const fileName = isFile(item) ? item.name : extractName(item);\r\n const fileSize = isFile(item)\r\n ? (item.size / (1024 * 1024)).toFixed(2) + ' MB'\r\n : '';\r\n\r\n return (\r\n <li\r\n key={index}\r\n className={cn(\r\n 'relative',\r\n previewVariant === 'image-grid'\r\n ? 'w-[75px] h-[75px]'\r\n : 'flex flex-col items-center gap-2'\r\n )}\r\n >\r\n <div className=\"relative w-full h-full\">\r\n <FilePreview item={item} styles={classNames} />\r\n <div\r\n className={cn(\r\n 'absolute top-0 right-0 cursor-pointer bg-gray-300 rounded-sm',\r\n previewVariant === 'image-grid' && 'top-1 right-1 bg-white/90 rounded-full p-0.5'\r\n )}\r\n onClick={(event) => removeItem(event, index)}\r\n >\r\n <X size={16} strokeWidth={1} color=\"black\" />\r\n </div>\r\n </div>\r\n {previewVariant === 'default' && (\r\n <span className=\"inline-flex flex-col items-center\">\r\n <span className=\"max-w-[80px] text-ellipsis overflow-hidden whitespace-nowrap\">\r\n {fileName}\r\n </span>\r\n {fileSize && <span>({fileSize})</span>}\r\n </span>\r\n )}\r\n </li>\r\n );\r\n })}\r\n </ul>\r\n </div>\r\n );\r\n\r\n return (\r\n <div className=\"w-full\">\r\n <Card\r\n {...restProps}\r\n {...getRootProps({\r\n onClick: (event) => {\r\n if (disabled || isUploading) return;\r\n if (shouldBlockRootOpen) {\r\n restProps.onClick?.(event);\r\n return;\r\n }\r\n open();\r\n restProps.onClick?.(event);\r\n },\r\n })}\r\n className={cn(\r\n `w-full text-center flex flex-col items-center justify-center gap-6 cursor-pointer`,\r\n !isContentPreviewMode &&\r\n 'border border-dashed border-[#9368FF80] rounded-[8px] bg-[#FCFCFC] p-4',\r\n isContentPreviewMode && 'min-h-0 border-0 bg-transparent p-0',\r\n disabled && 'border-[#E4E4E7] pointer-events-none',\r\n fileErrors.length > 0 && !isContentPreviewMode && 'border-red-500',\r\n isDragActive && 'bg-gray-100',\r\n singlePick && 'shadow-none!',\r\n singlePick && items.length > 0 && !hasSingleVideoPreview && 'p-0! shadow-none!',\r\n hasSingleVideoPreview && 'h-auto! max-h-none! min-h-0! p-2!',\r\n className\r\n )}\r\n >\r\n <input {...getInputProps()} />\r\n\r\n {isUploading && (\r\n <div\r\n className=\"w-full h-full min-h-46 rounded-lg border border-[#E4E4E7] bg-[#FCFCFC] flex flex-col items-center justify-center gap-4 p-4\"\r\n onClick={(event) => event.stopPropagation()}\r\n >\r\n <div className=\"relative h-24 w-24\">\r\n <svg className=\"h-24 w-24\" viewBox=\"0 0 100 100\">\r\n <circle cx=\"50\" cy=\"50\" r=\"42\" stroke=\"#E6E1F5\" strokeWidth=\"8\" fill=\"none\" />\r\n </svg>\r\n <span className=\"absolute inset-0 flex items-center justify-center text-lg font-semibold text-foreground\">\r\n {Math.max(0, Math.min(100, Math.round(uploadProgress)))}%\r\n </span>\r\n </div>\r\n\r\n <div className=\"text-center\">\r\n <p className=\"text-xl font-semibold text-foreground\">{labelUploadingTitle}</p>\r\n <p className=\"text-sm text-[#666A78]\">\r\n {formatBytesToMb(uploadLoadedBytes)} of {formatBytesToMb(uploadTotalBytes)}\r\n </p>\r\n <p className=\"mt-2 text-sm text-[#666A78]\">{labelUploadingHint}</p>\r\n </div>\r\n\r\n <div className=\"w-full max-w-[520px] h-2 rounded-full bg-[#E6E1F5] overflow-hidden\">\r\n <div\r\n className=\"h-full bg-[#9368FF] transition-[width] duration-150 ease-linear\"\r\n style={{ width: `${Math.max(0, Math.min(100, uploadProgress))}%` }}\r\n />\r\n </div>\r\n\r\n {onCancelUpload && (\r\n <button\r\n type=\"button\"\r\n className=\"mt-1 h-10 min-w-36 rounded-md border border-[#E4E4E7] bg-white px-6 text-base font-medium text-foreground cursor-pointer\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n onCancelUpload();\r\n }}\r\n >\r\n {labelUploadingActionCancel}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {!isUploading &&\r\n (items.length === 0 || (!singlePick && persistentDropzone)) &&\r\n fileErrors.length === 0 && (\r\n <div\r\n className={cn(\r\n 'flex flex-col items-center gap-2 w-full',\r\n classNames?.idleWrapper\r\n )}\r\n >\r\n <div className=\"flex size-12 items-center justify-center rounded-full bg-[#9368FF1F]\">\r\n <UploadIcon className=\"size-6 text-[#9368FF]\" />\r\n </div>\r\n\r\n <div className=\"flex flex-col items-center gap-1 w-full\">\r\n {!disabled && (\r\n <>\r\n <span\r\n className={cn(\r\n \"font-semibold text-[14px] leading-[125%] text-[#06080D] text-center w-full whitespace-pre-line\",\r\n labelDropzoneClassname\r\n )}\r\n >\r\n {labelDropzonePrompt}\r\n </span>\r\n\r\n <span\r\n className={cn(\r\n \"font-medium text-[12px] leading-[120%] text-[#666A78] text-center w-full whitespace-pre-line\",\r\n labelDropzoneSubClassname\r\n )}\r\n >\r\n {labelDropzoneSubPrompt}\r\n </span>\r\n </>\r\n )}\r\n </div>\r\n\r\n {!disabled && (\r\n <Button\r\n type=\"button\"\r\n size=\"md\"\r\n >\r\n {labelOrClickToSelect}\r\n </Button>\r\n )}\r\n </div>\r\n )}\r\n\r\n {!isUploading && fileErrors.length > 0 && !hasRejectedSingleFile && (\r\n <div className={cn('w-full mt-4', classNames?.errorWrapper)}>\r\n <span className=\"font-semibold text-red-500\">\r\n {labelUploadErrors}:\r\n </span>\r\n <ul className=\"mt-2 text-sm text-red-500 list-disc list-inside\">\r\n {fileErrors.map((fileRejection, index) => (\r\n <li key={index}>\r\n {fileRejection.file.name} (\r\n {(fileRejection.file.size / (1024 * 1024)).toFixed(2)} MB)\r\n {!hideErrors && (\r\n <ul className=\"ml-4 list-disc list-inside\">\r\n {fileRejection.errors.map((error, errorIndex) => (\r\n <li key={errorIndex}>\r\n {error.code === 'file-too-large' && labelFileTooLarge}\r\n {error.code === 'file-invalid-type' &&\r\n labelInvalidFileType}\r\n {error.code !== 'file-too-large' &&\r\n error.code !== 'file-invalid-type' &&\r\n error.message}\r\n </li>\r\n ))}\r\n </ul>\r\n )}\r\n </li>\r\n ))}\r\n </ul>\r\n </div>\r\n )}\r\n\r\n {!isUploading && Boolean(singlePick && items.length) && (\r\n <>\r\n {isSingleDocument ? (\r\n <div\r\n className=\"w-full max-w-[502px] flex flex-col items-center gap-4\"\r\n onClick={(event) => event.stopPropagation()}\r\n >\r\n <p className=\"w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]\">\r\n {labelDropzonePrompt}\r\n </p>\r\n\r\n <div className=\"w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4\">\r\n <div className=\"size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0\">\r\n <FileTextIcon size={20} />\r\n </div>\r\n <div className=\"flex flex-col items-start text-left gap-1 min-w-0 flex-1\">\r\n <span className=\"w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate\">\r\n {singleFileCard?.name}\r\n </span>\r\n <span className=\"w-full text-[12px] font-medium leading-[120%] text-[#666A78]\">\r\n {singleFileCard\r\n ? `${(singleFileCard.size / (1024 * 1024)).toFixed(0)} MB`\r\n : ''}\r\n </span>\r\n </div>\r\n {!disabled && (\r\n <div\r\n className=\"size-6 flex items-center justify-center cursor-pointer\"\r\n onClick={(event) => removeItem(event, 0)}\r\n >\r\n <X size={24} color=\"#06080D\" />\r\n </div>\r\n )}\r\n </div>\r\n </div>\r\n ) : (\r\n <DropzoneSinglePickPreview\r\n item={items[0]}\r\n onRemoveClick={(e) => removeItem(e, 0)}\r\n onReplaceClick={(e) => {\r\n e.stopPropagation();\r\n if (disabled) return;\r\n open();\r\n }}\r\n labelUploaded={labelVideoUploaded}\r\n labelReplace={labelVideoReplace}\r\n disabled={disabled}\r\n />\r\n )}\r\n </>\r\n )}\r\n\r\n {!isUploading && hasRejectedSingleFile && (\r\n <div\r\n className=\"w-full max-w-[502px] flex flex-col items-center gap-4\"\r\n onClick={(event) => event.stopPropagation()}\r\n >\r\n <p className=\"w-full text-center text-[16px] leading-[130%] font-semibold text-[#06080D]\">\r\n {labelDropzonePrompt}\r\n </p>\r\n\r\n <div className=\"w-full min-h-[72px] rounded-[8px] bg-[#F5F5F5] p-4 flex items-center gap-4\">\r\n <div className=\"size-10 rounded-[8px] bg-[#DC2626] text-white flex items-center justify-center shrink-0\">\r\n <FileTextIcon size={20} />\r\n </div>\r\n <div className=\"flex flex-col items-start text-left gap-1 min-w-0 flex-1\">\r\n <span className=\"w-full text-[14px] font-semibold leading-[125%] text-[#06080D] truncate\">\r\n {singleFileCard?.name}\r\n </span>\r\n <span className=\"w-full text-[12px] font-medium leading-[120%] text-[#666A78]\">\r\n {singleFileCard\r\n ? `${(singleFileCard.size / (1024 * 1024)).toFixed(0)} MB`\r\n : ''}\r\n </span>\r\n </div>\r\n {!disabled && (\r\n <div\r\n className=\"size-6 flex items-center justify-center cursor-pointer\"\r\n onClick={(event) => {\r\n event.stopPropagation();\r\n setFileErrors([]);\r\n }}\r\n >\r\n <X size={24} color=\"#06080D\" />\r\n </div>\r\n )}\r\n </div>\r\n\r\n <div className=\"w-full bg-[#DC26260F] p-4 flex items-start gap-4\">\r\n <InfoIcon size={20} color=\"#DC2626\" />\r\n <p className=\"text-[12px] leading-[120%] font-medium text-[#DC2626] text-left\">\r\n {fileErrors[0]?.errors?.[0]?.code === 'file-too-large'\r\n ? labelFileTooLarge\r\n : fileErrors[0]?.errors?.[0]?.message || labelInvalidFileType}\r\n </p>\r\n </div>\r\n </div>\r\n )}\r\n\r\n {!shouldRenderDetachedPreview && previewBlock}\r\n </Card>\r\n {shouldRenderDetachedPreview && <div className=\"w-full\">{previewBlock}</div>}\r\n </div>\r\n );\r\n }\r\n);\r\n\r\nDropzone.displayName = 'Dropzone';\r\n\r\n"],"names":["formatBytesToMb","bytes","areItemsEqual","a","b","i","left","right","isFile","Dropzone","forwardRef","acceptTypes","DEFAULT_FILE_TYPES","maxSizeMB","maxFiles","onErrors","hideErrors","disabled","classNames","value","onChangeValue","className","labelDropzonePrompt","labelDropzoneSubPrompt","labelOrClickToSelect","labelSelectedFiles","labelUploadErrors","labelFileTooLarge","labelInvalidFileType","labelVideoUploaded","labelVideoReplace","singlePick","labelDropzoneClassname","labelDropzoneSubClassname","isUploading","uploadProgress","uploadLoadedBytes","uploadTotalBytes","onCancelUpload","labelUploadingTitle","labelUploadingHint","labelUploadingActionCancel","persistentDropzone","previewVariant","restProps","ref","items","setItems","useState","fileErrors","setFileErrors","firstItem","firstRejectedFile","isSingleFile","isSingleImage","isSingleVideo","isSingleDocument","hasRejectedSingleFile","singleFileCard","hasSingleVideoPreview","shouldBlockRootOpen","isContentPreviewMode","onDrop","acceptedFiles","fileRejections","newItems","useEffect","removeItem","event","index","_","getRootProps","getInputProps","isDragActive","open","useDropzone","acc","fileType","useImperativeHandle","shouldRenderDetachedPreview","previewBlock","jsxs","cn","jsx","item","fileName","extractName","fileSize","FilePreview","X","Card","UploadIcon","Fragment","Button","fileRejection","error","errorIndex","FileTextIcon","DropzoneSinglePickPreview","e","InfoIcon"],"mappings":";;;;;;;;;;;AAmBA,MAAMA,IAAkB,CAACC,IAAQ,MAAM,IAAIA,KAAS,OAAO,OAAO,QAAQ,CAAC,CAAC,OACtEC,KAAgB,CAACC,GAAwBC,MAA2B;AACxE,MAAID,MAAMC,EAAG,QAAO;AACpB,MAAID,EAAE,WAAWC,EAAE,OAAQ,QAAO;AAElC,WAASC,IAAI,GAAGA,IAAIF,EAAE,QAAQE,KAAK;AACjC,UAAMC,IAAOH,EAAEE,CAAC,GACVE,IAAQH,EAAEC,CAAC;AAEjB,QAAIC,MAASC,GAEb;AAAA,UAAI,OAAOD,KAAS,YAAY,OAAOC,KAAU,UAAU;AACzD,YAAID,MAASC,EAAO,QAAO;AAC3B;AAAA,MACF;AAEA,UAAIC,EAAOF,CAAI,KAAKE,EAAOD,CAAK,GAAG;AACjC,YACED,EAAK,SAASC,EAAM,QACpBD,EAAK,SAASC,EAAM,QACpBD,EAAK,SAASC,EAAM,QACpBD,EAAK,iBAAiBC,EAAM;AAE5B,iBAAO;AAET;AAAA,MACF;AAEA,aAAO;AAAA;AAAA,EACT;AAEA,SAAO;AACT,GAqBaE,KAAWC;AAAA,EACtB,CACE;AAAA,IACE,aAAAC,IAAcC;AAAA,IACd,WAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,UAAAC,IAAW;AAAA,IACX,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,WAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,wBAAAC,IAAyB;AAAA,IACzB,sBAAAC,IAAuB;AAAA,IACvB,oBAAAC,IAAqB;AAAA,IACrB,mBAAAC,KAAoB;AAAA,IACpB,mBAAAC,IAAoB;AAAA,IACpB,sBAAAC,IAAuB;AAAA,IACvB,oBAAAC,KAAqB;AAAA,IACrB,mBAAAC,KAAoB;AAAA,IACpB,YAAAC,IAAa;AAAA,IACb,wBAAAC;AAAA,IACA,2BAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,gBAAAC,IAAiB;AAAA,IACjB,mBAAAC,KAAoB;AAAA,IACpB,kBAAAC,KAAmB;AAAA,IACnB,gBAAAC;AAAA,IACA,qBAAAC,KAAsB;AAAA,IACtB,oBAAAC,KAAqB;AAAA,IACrB,4BAAAC,KAA6B;AAAA,IAC7B,oBAAAC,IAAqB;AAAA,IACrB,gBAAAC,IAAiB;AAAA,IACjB,GAAGC;AAAA,EAAA,GAELC,OACG;AACH,UAAM,CAACC,GAAOC,CAAQ,IAAIC,EAA8B7B,KAAS,CAAA,CAAE,GAC7D,CAAC8B,GAAYC,CAAa,IAAIF,EAA0B,CAAA,CAAE,GAC1DG,IAAYL,EAAM,CAAC,GACnBM,IAAoBH,EAAW,CAAC,GAAG,MACnCI,IAAetB,KAAce,EAAM,SAAS,KAAKtC,EAAO2C,CAAS,GACjEG,KAAgBD,KAAgBF,EAAU,KAAK,SAAS,OAAO,GAC/DI,IACJF,KACAF,EAAU,KAAK,SAAS,OAAO,GAC3BK,IAAmBH,KAAgB,CAACC,MAAiB,CAACC,GACtDE,IAAwB1B,KAAc,CAACe,EAAM,UAAU,EAAQM,GAC/DM,IAAiBF,IAAmBL,IAAYC,GAChDO,IACJ5B,KAAcwB,GACVK,KAAsBD,GACtBE,IAAuB9B,KAAce,EAAM,SAAS,GAEpDgB,KAAS,CAACC,GAAuBC,MAAoC;AACzE,MAAAd,EAAcc,CAAc,GAC5BjD,IAAWiD,CAAc;AAEzB,YAAMC,IAAWlC,IACbgC,EAAc,MAAM,GAAG,CAAC,IACxB,CAAC,GAAGjB,GAAO,GAAGiB,CAAa,EAAE,MAAM,GAAGjD,CAAQ;AAElD,MAAAiC,EAASkB,CAAQ,GACjB7C,IAAgB6C,CAAQ;AAAA,IAC1B;AAEA,IAAAC,GAAU,MAAM;AACd,MAAI/C,KAAS,CAACjB,GAAc4C,GAAO3B,CAAK,KACtC4B,EAAS5B,CAAK;AAAA,IAElB,GAAG,CAAC2B,GAAO3B,CAAK,CAAC;AAEjB,UAAMgD,IAAa,CACjBC,GACAC,MACG;AACH,UAAIpD,EAAU;AACd,MAAAmD,EAAM,gBAAA;AAEN,YAAMH,IAAWnB,EAAM,OAAO,CAACwB,GAAGjE,MAAMA,MAAMgE,CAAK;AACnD,MAAAtB,EAASkB,CAAQ,GACjB7C,IAAgB6C,CAAQ;AAAA,IAC1B,GAEM,EAAE,cAAAM,IAAc,eAAAC,IAAe,cAAAC,IAAc,MAAAC,EAAA,IAASC,GAAY;AAAA,MACtE,QAAAb;AAAA,MACA,QAAQnD,EAAY,OAAO,CAACiE,GAAKC,OAC/BD,EAAIC,CAAQ,IAAI,CAAA,GACTD,IACN,CAAA,CAA8B;AAAA,MACjC,SAAS/D,IAAY,OAAO;AAAA,MAC5B,UAAUkB,IAAa,IAAIjB;AAAA,MAC3B,UAAUG,KAAYiB;AAAA,MACtB,SAAS;AAAA,IAAA,CACV;AAED,IAAA4C,GAAoBjC,IAAK,OAChB;AAAA,MACL,UAAAE;AAAA,IAAA,IAED,CAAA,CAAE;AAEL,UAAMgC,IACJ,CAAC7C,KAAe,CAACH,KAAcW,KAAsBI,EAAM,SAAS,GAEhEkC,IAAe,CAAC9C,KAAe,CAACH,KAAce,EAAM,SAAS,KACjE,gBAAAmC,EAAC,SAAI,WAAWC,EAAG,eAAehE,GAAY,cAAc,GACzD,UAAA;AAAA,MAAAyB,MAAmB,aAClB,gBAAAsC,EAAC,OAAA,EAAI,WAAU,+BACZ,UAAA;AAAA,QAAAxD;AAAA,QAAmB;AAAA,MAAA,GACtB;AAAA,MAEF,gBAAA0D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACAvC,MAAmB,eACf,wBACA;AAAA,UAAA;AAAA,UAGL,UAAAG,EAAM,IAAI,CAACsC,GAAMf,MAAU;AAC1B,kBAAMgB,IAAW7E,EAAO4E,CAAI,IAAIA,EAAK,OAAOE,GAAYF,CAAI,GACtDG,IAAW/E,EAAO4E,CAAI,KACvBA,EAAK,QAAQ,OAAO,OAAO,QAAQ,CAAC,IAAI,QACzC;AAEJ,mBACE,gBAAAH;AAAA,cAAC;AAAA,cAAA;AAAA,gBAEC,WAAWC;AAAA,kBACT;AAAA,kBACAvC,MAAmB,eACf,sBACA;AAAA,gBAAA;AAAA,gBAGN,UAAA;AAAA,kBAAA,gBAAAsC,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,oBAAA,gBAAAE,EAACK,IAAA,EAAY,MAAAJ,GAAY,QAAQlE,EAAA,CAAY;AAAA,oBAC7C,gBAAAiE;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWD;AAAA,0BACT;AAAA,0BACAvC,MAAmB,gBAAgB;AAAA,wBAAA;AAAA,wBAErC,SAAS,CAACyB,MAAUD,EAAWC,GAAOC,CAAK;AAAA,wBAE3C,4BAACoB,GAAA,EAAE,MAAM,IAAI,aAAa,GAAG,OAAM,QAAA,CAAQ;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAC7C,GACF;AAAA,kBACC9C,MAAmB,aAClB,gBAAAsC,EAAC,QAAA,EAAK,WAAU,qCACd,UAAA;AAAA,oBAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,gEACb,UAAAE,GACH;AAAA,oBACCE,uBAAa,QAAA,EAAK,UAAA;AAAA,sBAAA;AAAA,sBAAEA;AAAA,sBAAS;AAAA,oBAAA,EAAA,CAAC;AAAA,kBAAA,EAAA,CACjC;AAAA,gBAAA;AAAA,cAAA;AAAA,cA1BGlB;AAAA,YAAA;AAAA,UA8BX,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAGF,WACE,gBAAAY,EAAC,OAAA,EAAI,WAAU,UACb,UAAA;AAAA,MAAA,gBAAAA;AAAA,QAACS;AAAA,QAAA;AAAA,UACE,GAAG9C;AAAA,UACH,GAAG2B,GAAa;AAAA,YACf,SAAS,CAACH,MAAU;AAClB,kBAAI,EAAAnD,KAAYiB,IAChB;AAAA,oBAAI0B,IAAqB;AACvB,kBAAAhB,EAAU,UAAUwB,CAAK;AACzB;AAAA,gBACF;AACA,gBAAAM,EAAA,GACA9B,EAAU,UAAUwB,CAAK;AAAA;AAAA,YAC3B;AAAA,UAAA,CACD;AAAA,UACD,WAAWc;AAAA,YACT;AAAA,YACA,CAACrB,KACC;AAAA,YACFA,KAAwB;AAAA,YACxB5C,KAAY;AAAA,YACZgC,EAAW,SAAS,KAAK,CAACY,KAAwB;AAAA,YAClDY,MAAgB;AAAA,YAChB1C,KAAc;AAAA,YACdA,KAAce,EAAM,SAAS,KAAK,CAACa,KAAyB;AAAA,YAC5DA,KAAyB;AAAA,YACzBtC;AAAA,UAAA;AAAA,UAGF,UAAA;AAAA,YAAA,gBAAA8D,EAAC,SAAA,EAAO,GAAGX,GAAA,EAAc,CAAG;AAAA,YAE7BtC,KACC,gBAAA+C;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,CAACb,MAAUA,EAAM,gBAAA;AAAA,gBAE1B,UAAA;AAAA,kBAAA,gBAAAa,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,oBAAA,gBAAAE,EAAC,SAAI,WAAU,aAAY,SAAQ,eACjC,UAAA,gBAAAA,EAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK,QAAO,WAAU,aAAY,KAAI,MAAK,QAAO,EAAA,CAC9E;AAAA,oBACA,gBAAAF,EAAC,QAAA,EAAK,WAAU,2FACb,UAAA;AAAA,sBAAA,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,KAAK,MAAM9C,CAAc,CAAC,CAAC;AAAA,sBAAE;AAAA,oBAAA,EAAA,CAC1D;AAAA,kBAAA,GACF;AAAA,kBAEA,gBAAA8C,EAAC,OAAA,EAAI,WAAU,eACb,UAAA;AAAA,oBAAA,gBAAAE,EAAC,KAAA,EAAE,WAAU,yCAAyC,UAAA5C,IAAoB;AAAA,oBAC1E,gBAAA0C,EAAC,KAAA,EAAE,WAAU,0BACV,UAAA;AAAA,sBAAAjF,EAAgBoC,EAAiB;AAAA,sBAAE;AAAA,sBAAKpC,EAAgBqC,EAAgB;AAAA,oBAAA,GAC3E;AAAA,oBACA,gBAAA8C,EAAC,KAAA,EAAE,WAAU,+BAA+B,UAAA3C,GAAA,CAAmB;AAAA,kBAAA,GACjE;AAAA,kBAEA,gBAAA2C,EAAC,OAAA,EAAI,WAAU,sEACb,UAAA,gBAAAA;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,WAAU;AAAA,sBACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKhD,CAAc,CAAC,CAAC,IAAA;AAAA,oBAAI;AAAA,kBAAA,GAErE;AAAA,kBAECG,KACC,gBAAA6C;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,WAAU;AAAA,sBACV,SAAS,CAACf,MAAU;AAClB,wBAAAA,EAAM,gBAAA,GACN9B,EAAA;AAAA,sBACF;AAAA,sBAEC,UAAAG;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,YAKL,CAACP,MACCY,EAAM,WAAW,KAAM,CAACf,KAAcW,MACvCO,EAAW,WAAW,KACtB,gBAAAgC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAWC;AAAA,kBACT;AAAA,kBACAhE,GAAY;AAAA,gBAAA;AAAA,gBAGd,UAAA;AAAA,kBAAA,gBAAAiE,EAAC,SAAI,WAAU,wEACb,4BAACQ,IAAA,EAAW,WAAU,yBAAwB,EAAA,CAChD;AAAA,oCAEC,OAAA,EAAI,WAAU,2CACZ,UAAA,CAAC1E,KACA,gBAAAgE,EAAAW,GAAA,EACE,UAAA;AAAA,oBAAA,gBAAAT;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWD;AAAA,0BACT;AAAA,0BACAlD;AAAA,wBAAA;AAAA,wBAGD,UAAAV;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAGH,gBAAA6D;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAWD;AAAA,0BACT;AAAA,0BACAjD;AAAA,wBAAA;AAAA,wBAGD,UAAAV;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBACH,EAAA,CACF,EAAA,CAEJ;AAAA,kBAEC,CAACN,KACA,gBAAAkE;AAAA,oBAACU;AAAA,oBAAA;AAAA,sBACC,MAAK;AAAA,sBACL,MAAK;AAAA,sBAEJ,UAAArE;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,YAKL,CAACU,KAAee,EAAW,SAAS,KAAK,CAACQ,KACzC,gBAAAwB,EAAC,OAAA,EAAI,WAAWC,EAAG,eAAehE,GAAY,YAAY,GACxD,UAAA;AAAA,cAAA,gBAAA+D,EAAC,QAAA,EAAK,WAAU,8BACb,UAAA;AAAA,gBAAAvD;AAAA,gBAAkB;AAAA,cAAA,GACrB;AAAA,cACA,gBAAAyD,EAAC,MAAA,EAAG,WAAU,mDACX,UAAAlC,EAAW,IAAI,CAAC6C,GAAezB,MAC9B,gBAAAY,EAAC,MAAA,EACE,UAAA;AAAA,gBAAAa,EAAc,KAAK;AAAA,gBAAK;AAAA,iBACvBA,EAAc,KAAK,QAAQ,OAAO,OAAO,QAAQ,CAAC;AAAA,gBAAE;AAAA,gBACrD,CAAC9E,KACA,gBAAAmE,EAAC,MAAA,EAAG,WAAU,8BACX,UAAAW,EAAc,OAAO,IAAI,CAACC,GAAOC,wBAC/B,MAAA,EACE,UAAA;AAAA,kBAAAD,EAAM,SAAS,oBAAoBpE;AAAA,kBACnCoE,EAAM,SAAS,uBACdnE;AAAA,kBACDmE,EAAM,SAAS,oBACdA,EAAM,SAAS,uBACfA,EAAM;AAAA,gBAAA,EAAA,GANDC,CAOT,CACD,EAAA,CACH;AAAA,cAAA,EAAA,GAfK3B,CAiBT,CACD,EAAA,CACH;AAAA,YAAA,GACF;AAAA,YAGD,CAACnC,KAAe,GAAQH,KAAce,EAAM,kCAExC,UAAAU,IACC,gBAAAyB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,CAACb,MAAUA,EAAM,gBAAA;AAAA,gBAE1B,UAAA;AAAA,kBAAA,gBAAAe,EAAC,KAAA,EAAE,WAAU,8EACV,UAAA7D,GACH;AAAA,kBAEA,gBAAA2D,EAAC,OAAA,EAAI,WAAU,8EACb,UAAA;AAAA,oBAAA,gBAAAE,EAAC,SAAI,WAAU,2FACb,4BAACc,GAAA,EAAa,MAAM,IAAI,EAAA,CAC1B;AAAA,oBACA,gBAAAhB,EAAC,OAAA,EAAI,WAAU,4DACb,UAAA;AAAA,sBAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,2EACb,UAAAzB,GAAgB,MACnB;AAAA,sBACA,gBAAAyB,EAAC,QAAA,EAAK,WAAU,gEACb,cACG,IAAIzB,EAAe,QAAQ,OAAO,OAAO,QAAQ,CAAC,CAAC,QACnD,GAAA,CACN;AAAA,oBAAA,GACF;AAAA,oBACC,CAACzC,KACA,gBAAAkE;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,SAAS,CAACf,MAAUD,EAAWC,GAAO,CAAC;AAAA,wBAEvC,UAAA,gBAAAe,EAACM,GAAA,EAAE,MAAM,IAAI,OAAM,UAAA,CAAU;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAC/B,EAAA,CAEJ;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA,IAGF,gBAAAN;AAAA,cAACe;AAAA,cAAA;AAAA,gBACC,MAAMpD,EAAM,CAAC;AAAA,gBACb,eAAe,CAACqD,MAAMhC,EAAWgC,GAAG,CAAC;AAAA,gBACrC,gBAAgB,CAACA,MAAM;AAErB,kBADAA,EAAE,gBAAA,GACE,CAAAlF,KACJyD,EAAA;AAAA,gBACF;AAAA,gBACA,eAAe7C;AAAA,gBACf,cAAcC;AAAA,gBACd,UAAAb;AAAA,cAAA;AAAA,YAAA,GAGN;AAAA,YAGD,CAACiB,KAAeuB,KACf,gBAAAwB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS,CAACb,MAAUA,EAAM,gBAAA;AAAA,gBAE1B,UAAA;AAAA,kBAAA,gBAAAe,EAAC,KAAA,EAAE,WAAU,8EACV,UAAA7D,GACH;AAAA,kBAEA,gBAAA2D,EAAC,OAAA,EAAI,WAAU,8EACb,UAAA;AAAA,oBAAA,gBAAAE,EAAC,SAAI,WAAU,2FACb,4BAACc,GAAA,EAAa,MAAM,IAAI,EAAA,CAC1B;AAAA,oBACA,gBAAAhB,EAAC,OAAA,EAAI,WAAU,4DACb,UAAA;AAAA,sBAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,2EACb,UAAAzB,GAAgB,MACnB;AAAA,sBACA,gBAAAyB,EAAC,QAAA,EAAK,WAAU,gEACb,cACG,IAAIzB,EAAe,QAAQ,OAAO,OAAO,QAAQ,CAAC,CAAC,QACnD,GAAA,CACN;AAAA,oBAAA,GACF;AAAA,oBACC,CAACzC,KACA,gBAAAkE;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,WAAU;AAAA,wBACV,SAAS,CAACf,MAAU;AAClB,0BAAAA,EAAM,gBAAA,GACNlB,EAAc,CAAA,CAAE;AAAA,wBAClB;AAAA,wBAEA,UAAA,gBAAAiC,EAACM,GAAA,EAAE,MAAM,IAAI,OAAM,UAAA,CAAU;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAC/B,GAEJ;AAAA,kBAEA,gBAAAR,EAAC,OAAA,EAAI,WAAU,oDACb,UAAA;AAAA,oBAAA,gBAAAE,EAACiB,IAAA,EAAS,MAAM,IAAI,OAAM,WAAU;AAAA,oBACpC,gBAAAjB,EAAC,OAAE,WAAU,mEACV,YAAW,CAAC,GAAG,SAAS,CAAC,GAAG,SAAS,mBAClCxD,IACAsB,EAAW,CAAC,GAAG,SAAS,CAAC,GAAG,WAAWrB,EAAA,CAC7C;AAAA,kBAAA,EAAA,CACF;AAAA,gBAAA;AAAA,cAAA;AAAA,YAAA;AAAA,YAID,CAACmD,KAA+BC;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAElCD,KAA+B,gBAAAI,EAAC,OAAA,EAAI,WAAU,UAAU,UAAAH,EAAA,CAAa;AAAA,IAAA,GACxE;AAAA,EAEJ;AACF;AAEAvE,GAAS,cAAc;"}
package/Dropzone/Dropzone.stories.js CHANGED
@@ -1,16 +1,16 @@
1
1
  import { jsx as o, jsxs as v } from "react/jsx-runtime";
2
- import { useState as s, useRef as S, useEffect as M } from "react";
2
+ import { useState as s, useRef as F, useEffect as M } from "react";
3
3
  import { Dropzone as x } from "./Dropzone.js";
4
- import { DEFAULT_IMAGES_TYPES as c, DEFAULT_DOCUMENT_TYPES as y, DEFAULT_VIDEO_TYPES as u } from "./Dropzone.types.js";
5
- function a({ initialValue: e = [], ...g }) {
6
- const [l, p] = s(e);
4
+ import { DEFAULT_IMAGES_TYPES as p, DEFAULT_DOCUMENT_TYPES as y, DEFAULT_VIDEO_TYPES as u } from "./Dropzone.types.js";
5
+ function r({ initialValue: e = [], ...g }) {
6
+ const [l, i] = s(e);
7
7
  return /* @__PURE__ */ v("div", { className: "w-full space-y-3", children: [
8
8
  /* @__PURE__ */ o(
9
9
  x,
10
10
  {
11
11
  ...g,
12
12
  value: l,
13
- onChangeValue: (t) => p(t)
13
+ onChangeValue: (t) => i(t)
14
14
  }
15
15
  ),
16
16
  /* @__PURE__ */ v("div", { className: "text-xs text-muted-foreground", children: [
@@ -19,7 +19,7 @@ function a({ initialValue: e = [], ...g }) {
19
19
  ] })
20
20
  ] });
21
21
  }
22
- const I = {
22
+ const N = {
23
23
  title: "Dropzone",
24
24
  component: x,
25
25
  parameters: {
@@ -40,14 +40,14 @@ const I = {
40
40
  decorators: [
41
41
  (e) => /* @__PURE__ */ o("div", { className: "p-6 w-[680px]", children: /* @__PURE__ */ o(e, {}) })
42
42
  ]
43
- }, N = {
43
+ }, I = {
44
44
  args: {
45
- acceptTypes: c,
45
+ acceptTypes: p,
46
46
  labelDropzonePrompt: "Upload image",
47
47
  labelDropzoneSubPrompt: "Formats: .jpg .jpeg .png .webp",
48
48
  maxSizeMB: 5
49
49
  },
50
- render: (e) => /* @__PURE__ */ o(a, { ...e })
50
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
51
51
  }, k = {
52
52
  args: {
53
53
  acceptTypes: y,
@@ -57,7 +57,7 @@ const I = {
57
57
  maxFiles: 1,
58
58
  singlePick: !0
59
59
  },
60
- render: (e) => /* @__PURE__ */ o(a, { ...e })
60
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
61
61
  }, V = {
62
62
  args: {
63
63
  acceptTypes: u,
@@ -67,7 +67,7 @@ const I = {
67
67
  maxFiles: 1,
68
68
  singlePick: !0
69
69
  },
70
- render: (e) => /* @__PURE__ */ o(a, { ...e })
70
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
71
71
  }, L = {
72
72
  args: {
73
73
  acceptTypes: u,
@@ -78,14 +78,14 @@ const I = {
78
78
  singlePick: !0
79
79
  },
80
80
  render: (e) => /* @__PURE__ */ o(() => {
81
- const [l, p] = s("https://www.youtube.com/watch?v=dQw4w9WgXcQ"), t = l.trim() ? [l.trim()] : [];
81
+ const [l, i] = s("https://www.youtube.com/watch?v=dQw4w9WgXcQ"), t = l.trim() ? [l.trim()] : [];
82
82
  return /* @__PURE__ */ v("div", { className: "w-full space-y-3", children: [
83
83
  /* @__PURE__ */ o(
84
84
  "input",
85
85
  {
86
86
  type: "text",
87
87
  value: l,
88
- onChange: (d) => p(d.target.value),
88
+ onChange: (m) => i(m.target.value),
89
89
  placeholder: "Paste YouTube URL",
90
90
  className: "w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm"
91
91
  }
@@ -95,9 +95,9 @@ const I = {
95
95
  {
96
96
  ...e,
97
97
  value: t,
98
- onChangeValue: (d) => {
99
- const i = d[0];
100
- typeof i == "string" && p(i);
98
+ onChangeValue: (m) => {
99
+ const n = m[0];
100
+ typeof n == "string" && i(n);
101
101
  }
102
102
  }
103
103
  )
@@ -105,30 +105,30 @@ const I = {
105
105
  }, {})
106
106
  };
107
107
  function w(e) {
108
- const [g, l] = s([]), [p, t] = s(!1), [d, i] = s(0), [T, b] = s(0), [D, z] = s(0), r = S(null);
108
+ const [g, l] = s([]), [i, t] = s(!1), [m, n] = s(0), [T, b] = s(0), [D, z] = s(0), a = F(null);
109
109
  return M(() => () => {
110
- r.current && clearInterval(r.current);
110
+ a.current && clearInterval(a.current);
111
111
  }, []), /* @__PURE__ */ o("div", { className: "w-full space-y-3", children: /* @__PURE__ */ o(
112
112
  x,
113
113
  {
114
114
  ...e,
115
115
  value: g,
116
- isUploading: p,
117
- uploadProgress: d,
116
+ isUploading: i,
117
+ uploadProgress: m,
118
118
  uploadLoadedBytes: T,
119
119
  uploadTotalBytes: D,
120
120
  onCancelUpload: () => {
121
- r.current && clearInterval(r.current), r.current = null, t(!1), i(0), b(0), z(0);
121
+ a.current && clearInterval(a.current), a.current = null, t(!1), n(0), b(0), z(0);
122
122
  },
123
123
  onChangeValue: (P) => {
124
124
  if (l(P), !P.length) return;
125
- r.current && clearInterval(r.current), r.current = null;
126
- const f = P[0], n = f instanceof File ? f.size : 50 * 1024 * 1024;
127
- let m = 0;
128
- z(n), b(0), i(0), t(!0), r.current = setInterval(() => {
129
- m = Math.min(n, m + n * 0.08);
130
- const F = n ? Math.round(m / n * 100) : 0;
131
- b(m), i(F), m >= n && (r.current && clearInterval(r.current), r.current = null, setTimeout(() => t(!1), 350));
125
+ a.current && clearInterval(a.current), a.current = null;
126
+ const f = P[0], c = f instanceof File ? f.size : 50 * 1024 * 1024;
127
+ let d = 0;
128
+ z(c), b(0), n(0), t(!0), a.current = setInterval(() => {
129
+ d = Math.min(c, d + c * 0.08);
130
+ const S = c ? Math.round(d / c * 100) : 0;
131
+ b(d), n(S), d >= c && (a.current && clearInterval(a.current), a.current = null, setTimeout(() => t(!1), 350));
132
132
  }, 250);
133
133
  }
134
134
  }
@@ -149,7 +149,7 @@ const C = {
149
149
  render: (e) => /* @__PURE__ */ o(w, { ...e })
150
150
  }, O = {
151
151
  args: {
152
- acceptTypes: c,
152
+ acceptTypes: p,
153
153
  labelDropzonePrompt: "Перетягніть фото або оберіть файли",
154
154
  labelDropzoneSubPrompt: "JPG, PNG, WEBP, HEIC · до 5 МБ кожне",
155
155
  labelOrClickToSelect: "Завантажити файл",
@@ -164,7 +164,20 @@ const C = {
164
164
  previewImage: "rounded-[8px] object-cover"
165
165
  }
166
166
  },
167
- render: (e) => /* @__PURE__ */ o(a, { ...e })
167
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
168
+ }, G = {
169
+ args: {
170
+ acceptTypes: p,
171
+ labelDropzonePrompt: `Додайте файл
172
+ Перетягніть сюди або натисніть`,
173
+ labelDropzoneSubPrompt: "JPG, PNG, WEBP до 5 МБ кожне",
174
+ labelOrClickToSelect: "Обрати",
175
+ maxSizeMB: 5,
176
+ maxFiles: 1,
177
+ singlePick: !0,
178
+ className: "w-[598px]"
179
+ },
180
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
168
181
  }, W = {
169
182
  args: {
170
183
  acceptTypes: y,
@@ -176,7 +189,7 @@ const C = {
176
189
  singlePick: !0,
177
190
  className: "w-[598px]"
178
191
  },
179
- render: (e) => /* @__PURE__ */ o(a, { ...e })
192
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
180
193
  }, Y = {
181
194
  args: {
182
195
  acceptTypes: ["application/pdf"],
@@ -188,10 +201,10 @@ const C = {
188
201
  singlePick: !0,
189
202
  className: "w-[598px]"
190
203
  },
191
- render: (e) => /* @__PURE__ */ o(a, { ...e })
204
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
192
205
  }, j = {
193
206
  args: {
194
- acceptTypes: c,
207
+ acceptTypes: p,
195
208
  labelDropzonePrompt: "Upload photo...",
196
209
  labelDropzoneSubPrompt: "JPG/PNG/WEBP, max 1 MB",
197
210
  labelFileTooLarge: "Photo is too large. Max size is 1 MB.",
@@ -200,10 +213,10 @@ const C = {
200
213
  singlePick: !0,
201
214
  className: "w-[598px]"
202
215
  },
203
- render: (e) => /* @__PURE__ */ o(a, { ...e })
204
- }, G = {
216
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
217
+ }, A = {
205
218
  args: {
206
- acceptTypes: c,
219
+ acceptTypes: p,
207
220
  labelDropzonePrompt: "Upload photo...",
208
221
  labelDropzoneSubPrompt: "Only image files are supported",
209
222
  labelInvalidFileType: "Invalid file type. Please upload an image file.",
@@ -212,10 +225,10 @@ const C = {
212
225
  singlePick: !0,
213
226
  className: "w-[598px]"
214
227
  },
215
- render: (e) => /* @__PURE__ */ o(a, { ...e })
216
- }, A = {
228
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
229
+ }, _ = {
217
230
  args: {
218
- acceptTypes: c,
231
+ acceptTypes: p,
219
232
  labelDropzonePrompt: "Drag photos or choose files",
220
233
  labelDropzoneSubPrompt: "JPG, PNG, WEBP · max 1 MB each",
221
234
  labelFileTooLarge: "One or more photos are too large. Max size is 1 MB each.",
@@ -230,10 +243,10 @@ const C = {
230
243
  previewImage: "rounded-[8px] object-cover"
231
244
  }
232
245
  },
233
- render: (e) => /* @__PURE__ */ o(a, { ...e })
234
- }, _ = {
246
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
247
+ }, J = {
235
248
  args: {
236
- acceptTypes: c,
249
+ acceptTypes: p,
237
250
  labelDropzonePrompt: "Drag photos or choose files",
238
251
  labelDropzoneSubPrompt: "Only image files are supported",
239
252
  labelInvalidFileType: "One or more files have invalid type.",
@@ -248,8 +261,8 @@ const C = {
248
261
  previewImage: "rounded-[8px] object-cover"
249
262
  }
250
263
  },
251
- render: (e) => /* @__PURE__ */ o(a, { ...e })
252
- }, J = {
264
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
265
+ }, R = {
253
266
  args: {
254
267
  acceptTypes: u,
255
268
  labelDropzonePrompt: "Upload video...",
@@ -260,8 +273,8 @@ const C = {
260
273
  singlePick: !0,
261
274
  className: "w-[598px]"
262
275
  },
263
- render: (e) => /* @__PURE__ */ o(a, { ...e })
264
- }, R = {
276
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
277
+ }, H = {
265
278
  args: {
266
279
  acceptTypes: u,
267
280
  labelDropzonePrompt: "Upload video...",
@@ -272,23 +285,24 @@ const C = {
272
285
  singlePick: !0,
273
286
  className: "w-[598px]"
274
287
  },
275
- render: (e) => /* @__PURE__ */ o(a, { ...e })
288
+ render: (e) => /* @__PURE__ */ o(r, { ...e })
276
289
  };
277
290
  export {
278
291
  Y as FileErrorInvalidType,
279
292
  W as FileErrorTooLarge,
280
293
  k as Files,
281
- N as Images,
294
+ I as Images,
282
295
  O as MultiImagesPersistent,
283
- G as PhotoErrorInvalidType,
296
+ G as MultilinePromptSpacing,
297
+ A as PhotoErrorInvalidType,
284
298
  j as PhotoErrorTooLarge,
285
- _ as PhotosMultiErrorInvalidType,
286
- A as PhotosMultiErrorTooLarge,
287
- R as VideoErrorInvalidType,
288
- J as VideoErrorTooLarge,
299
+ J as PhotosMultiErrorInvalidType,
300
+ _ as PhotosMultiErrorTooLarge,
301
+ H as VideoErrorInvalidType,
302
+ R as VideoErrorTooLarge,
289
303
  C as VideoUploadingMock,
290
304
  L as VideoYoutubeLink,
291
305
  V as Videos,
292
- I as default
306
+ N as default
293
307
  };
294
308
  //# sourceMappingURL=Dropzone.stories.js.map
package/Dropzone/Dropzone.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropzone.stories.js","sources":["../../src/Dropzone/Dropzone.stories.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Dropzone } from './Dropzone';\r\nimport {\r\n DEFAULT_DOCUMENT_TYPES,\r\n DEFAULT_IMAGES_TYPES,\r\n DropzoneValueItem,\r\n DEFAULT_VIDEO_TYPES,\r\n} from './Dropzone.types';\r\n\r\ntype ControlledProps = React.ComponentProps<typeof Dropzone> & {\r\n initialValue?: string[];\r\n};\r\n\r\nfunction ControlledDropzone({ initialValue = [], ...args }: ControlledProps) {\r\n const [value, setValue] = useState<DropzoneValueItem[]>(initialValue);\r\n\r\n return (\r\n <div className=\"w-full space-y-3\">\r\n <Dropzone\r\n {...args}\r\n value={value}\r\n onChangeValue={(items) => setValue(items)}\r\n />\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n value:\r\n <pre className=\"mt-1 text-[11px] bg-muted p-2 rounded\">\r\n {JSON.stringify(value, null, 2)}\r\n </pre>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'Dropzone',\r\n component: Dropzone,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n labelSelectedFiles: 'Selected files',\r\n labelFileTooLarge: 'File is too large',\r\n maxFiles: 1,\r\n maxSizeMB: 100,\r\n singlePick: true,\r\n className: 'w-full',\r\n },\r\n argTypes: {\r\n onChangeValue: { control: false },\r\n value: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[680px]\">\r\n <Story />\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof Dropzone>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Images: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Upload image',\r\n labelDropzoneSubPrompt: 'Formats: .jpg .jpeg .png .webp',\r\n maxSizeMB: 5,\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Files: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n labelDropzonePrompt: 'Upload file',\r\n labelDropzoneSubPrompt: 'Formats: pdf, doc/docx, xls/xlsx, ppt/pptx, txt, csv',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Videos: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video',\r\n labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoYoutubeLink: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video',\r\n labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm or YouTube URL as value',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => {\r\n const YoutubeStory = () => {\r\n const [url, setUrl] = useState('https://www.youtube.com/watch?v=dQw4w9WgXcQ');\r\n const value = url.trim() ? [url.trim()] : [];\r\n\r\n return (\r\n <div className=\"w-full space-y-3\">\r\n <input\r\n type=\"text\"\r\n value={url}\r\n onChange={(event) => setUrl(event.target.value)}\r\n placeholder=\"Paste YouTube URL\"\r\n className=\"w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm\"\r\n />\r\n\r\n <Dropzone\r\n {...args}\r\n value={value}\r\n onChangeValue={(items) => {\r\n const next = items[0];\r\n if (typeof next === 'string') {\r\n setUrl(next);\r\n }\r\n }}\r\n />\r\n </div>\r\n );\r\n };\r\n\r\n return <YoutubeStory />;\r\n },\r\n};\r\n\r\nfunction UploadingDropzoneMock(args: React.ComponentProps<typeof Dropzone>) {\r\n const [value, setValue] = useState<DropzoneValueItem[]>([]);\r\n const [isUploading, setIsUploading] = useState(false);\r\n const [uploadProgress, setUploadProgress] = useState(0);\r\n const [uploadLoadedBytes, setUploadLoadedBytes] = useState(0);\r\n const [uploadTotalBytes, setUploadTotalBytes] = useState(0);\r\n const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);\r\n\r\n useEffect(() => {\r\n return () => {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n };\r\n }, []);\r\n\r\n return (\r\n <div className=\"w-full space-y-3\">\r\n <Dropzone\r\n {...args}\r\n value={value}\r\n isUploading={isUploading}\r\n uploadProgress={uploadProgress}\r\n uploadLoadedBytes={uploadLoadedBytes}\r\n uploadTotalBytes={uploadTotalBytes}\r\n onCancelUpload={() => {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n timerRef.current = null;\r\n setIsUploading(false);\r\n setUploadProgress(0);\r\n setUploadLoadedBytes(0);\r\n setUploadTotalBytes(0);\r\n }}\r\n onChangeValue={(items) => {\r\n setValue(items);\r\n if (!items.length) return;\r\n\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n timerRef.current = null;\r\n\r\n const selected = items[0];\r\n const totalBytes =\r\n selected instanceof File ? selected.size : 50 * 1024 * 1024;\r\n let loadedBytes = 0;\r\n\r\n setUploadTotalBytes(totalBytes);\r\n setUploadLoadedBytes(0);\r\n setUploadProgress(0);\r\n setIsUploading(true);\r\n\r\n timerRef.current = setInterval(() => {\r\n loadedBytes = Math.min(totalBytes, loadedBytes + totalBytes * 0.08);\r\n const progress = totalBytes ? Math.round((loadedBytes / totalBytes) * 100) : 0;\r\n\r\n setUploadLoadedBytes(loadedBytes);\r\n setUploadProgress(progress);\r\n\r\n if (loadedBytes >= totalBytes) {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n timerRef.current = null;\r\n setTimeout(() => setIsUploading(false), 350);\r\n }\r\n }, 250);\r\n }}\r\n />\r\n </div>\r\n );\r\n}\r\n\r\nexport const VideoUploadingMock: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video',\r\n labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n labelUploadingTitle: 'Завантаження відео...',\r\n labelUploadingHint: 'Будь ласка, не закривайте сторінку',\r\n labelUploadingActionCancel: 'Скасувати',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => <UploadingDropzoneMock {...args} />,\r\n};\r\n\r\nexport const MultiImagesPersistent: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Перетягніть фото або оберіть файли',\r\n labelDropzoneSubPrompt: 'JPG, PNG, WEBP, HEIC · до 5 МБ кожне',\r\n labelOrClickToSelect: 'Завантажити файл',\r\n maxSizeMB: 5,\r\n maxFiles: 20,\r\n singlePick: false,\r\n persistentDropzone: true,\r\n previewVariant: 'image-grid',\r\n className: 'w-[598px]',\r\n classNames: {\r\n previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n previewImage: 'rounded-[8px] object-cover',\r\n },\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n labelDropzonePrompt: 'Upload file...',\r\n labelDropzoneSubPrompt: 'PDF only, max 1 MB',\r\n labelFileTooLarge: 'File is too large. Max size is 1 MB.',\r\n maxSizeMB: 1,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: ['application/pdf'],\r\n labelDropzonePrompt: 'Upload file...',\r\n labelDropzoneSubPrompt: 'Only PDF is supported',\r\n labelInvalidFileType: 'Invalid file type. Please upload a PDF file.',\r\n maxSizeMB: 5,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Upload photo...',\r\n labelDropzoneSubPrompt: 'JPG/PNG/WEBP, max 1 MB',\r\n labelFileTooLarge: 'Photo is too large. Max size is 1 MB.',\r\n maxSizeMB: 1,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Upload photo...',\r\n labelDropzoneSubPrompt: 'Only image files are supported',\r\n labelInvalidFileType: 'Invalid file type. Please upload an image file.',\r\n maxSizeMB: 5,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Drag photos or choose files',\r\n labelDropzoneSubPrompt: 'JPG, PNG, WEBP · max 1 MB each',\r\n labelFileTooLarge: 'One or more photos are too large. Max size is 1 MB each.',\r\n maxSizeMB: 1,\r\n maxFiles: 20,\r\n singlePick: false,\r\n persistentDropzone: true,\r\n previewVariant: 'image-grid',\r\n className: 'w-[598px]',\r\n classNames: {\r\n previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n previewImage: 'rounded-[8px] object-cover',\r\n },\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Drag photos or choose files',\r\n labelDropzoneSubPrompt: 'Only image files are supported',\r\n labelInvalidFileType: 'One or more files have invalid type.',\r\n maxSizeMB: 5,\r\n maxFiles: 20,\r\n singlePick: false,\r\n persistentDropzone: true,\r\n previewVariant: 'image-grid',\r\n className: 'w-[598px]',\r\n classNames: {\r\n previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n previewImage: 'rounded-[8px] object-cover',\r\n },\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video...',\r\n labelDropzoneSubPrompt: 'MP4/MOV/AVI/WEBM, max 1 MB',\r\n labelFileTooLarge: 'Video is too large. Max size is 1 MB.',\r\n maxSizeMB: 1,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video...',\r\n labelDropzoneSubPrompt: 'Only video files are supported',\r\n labelInvalidFileType: 'Invalid file type. Please upload a video file.',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n"],"names":["ControlledDropzone","initialValue","args","value","setValue","useState","jsxs","jsx","Dropzone","items","meta","Story","Images","DEFAULT_IMAGES_TYPES","Files","DEFAULT_DOCUMENT_TYPES","Videos","DEFAULT_VIDEO_TYPES","VideoYoutubeLink","url","setUrl","event","next","UploadingDropzoneMock","isUploading","setIsUploading","uploadProgress","setUploadProgress","uploadLoadedBytes","setUploadLoadedBytes","uploadTotalBytes","setUploadTotalBytes","timerRef","useRef","useEffect","selected","totalBytes","loadedBytes","progress","VideoUploadingMock","MultiImagesPersistent","FileErrorTooLarge","FileErrorInvalidType","PhotoErrorTooLarge","PhotoErrorInvalidType","PhotosMultiErrorTooLarge","PhotosMultiErrorInvalidType","VideoErrorTooLarge","VideoErrorInvalidType"],"mappings":"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"}
1
+ {"version":3,"file":"Dropzone.stories.js","sources":["../../src/Dropzone/Dropzone.stories.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Dropzone } from './Dropzone';\r\nimport {\r\n DEFAULT_DOCUMENT_TYPES,\r\n DEFAULT_IMAGES_TYPES,\r\n DropzoneValueItem,\r\n DEFAULT_VIDEO_TYPES,\r\n} from './Dropzone.types';\r\n\r\ntype ControlledProps = React.ComponentProps<typeof Dropzone> & {\r\n initialValue?: string[];\r\n};\r\n\r\nfunction ControlledDropzone({ initialValue = [], ...args }: ControlledProps) {\r\n const [value, setValue] = useState<DropzoneValueItem[]>(initialValue);\r\n\r\n return (\r\n <div className=\"w-full space-y-3\">\r\n <Dropzone\r\n {...args}\r\n value={value}\r\n onChangeValue={(items) => setValue(items)}\r\n />\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n value:\r\n <pre className=\"mt-1 text-[11px] bg-muted p-2 rounded\">\r\n {JSON.stringify(value, null, 2)}\r\n </pre>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'Dropzone',\r\n component: Dropzone,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n labelSelectedFiles: 'Selected files',\r\n labelFileTooLarge: 'File is too large',\r\n maxFiles: 1,\r\n maxSizeMB: 100,\r\n singlePick: true,\r\n className: 'w-full',\r\n },\r\n argTypes: {\r\n onChangeValue: { control: false },\r\n value: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[680px]\">\r\n <Story />\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof Dropzone>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Images: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Upload image',\r\n labelDropzoneSubPrompt: 'Formats: .jpg .jpeg .png .webp',\r\n maxSizeMB: 5,\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Files: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n labelDropzonePrompt: 'Upload file',\r\n labelDropzoneSubPrompt: 'Formats: pdf, doc/docx, xls/xlsx, ppt/pptx, txt, csv',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const Videos: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video',\r\n labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoYoutubeLink: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video',\r\n labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm or YouTube URL as value',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => {\r\n const YoutubeStory = () => {\r\n const [url, setUrl] = useState('https://www.youtube.com/watch?v=dQw4w9WgXcQ');\r\n const value = url.trim() ? [url.trim()] : [];\r\n\r\n return (\r\n <div className=\"w-full space-y-3\">\r\n <input\r\n type=\"text\"\r\n value={url}\r\n onChange={(event) => setUrl(event.target.value)}\r\n placeholder=\"Paste YouTube URL\"\r\n className=\"w-full h-10 rounded-md border border-[#E4E4E7] px-3 text-sm\"\r\n />\r\n\r\n <Dropzone\r\n {...args}\r\n value={value}\r\n onChangeValue={(items) => {\r\n const next = items[0];\r\n if (typeof next === 'string') {\r\n setUrl(next);\r\n }\r\n }}\r\n />\r\n </div>\r\n );\r\n };\r\n\r\n return <YoutubeStory />;\r\n },\r\n};\r\n\r\nfunction UploadingDropzoneMock(args: React.ComponentProps<typeof Dropzone>) {\r\n const [value, setValue] = useState<DropzoneValueItem[]>([]);\r\n const [isUploading, setIsUploading] = useState(false);\r\n const [uploadProgress, setUploadProgress] = useState(0);\r\n const [uploadLoadedBytes, setUploadLoadedBytes] = useState(0);\r\n const [uploadTotalBytes, setUploadTotalBytes] = useState(0);\r\n const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);\r\n\r\n useEffect(() => {\r\n return () => {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n };\r\n }, []);\r\n\r\n return (\r\n <div className=\"w-full space-y-3\">\r\n <Dropzone\r\n {...args}\r\n value={value}\r\n isUploading={isUploading}\r\n uploadProgress={uploadProgress}\r\n uploadLoadedBytes={uploadLoadedBytes}\r\n uploadTotalBytes={uploadTotalBytes}\r\n onCancelUpload={() => {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n timerRef.current = null;\r\n setIsUploading(false);\r\n setUploadProgress(0);\r\n setUploadLoadedBytes(0);\r\n setUploadTotalBytes(0);\r\n }}\r\n onChangeValue={(items) => {\r\n setValue(items);\r\n if (!items.length) return;\r\n\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n timerRef.current = null;\r\n\r\n const selected = items[0];\r\n const totalBytes =\r\n selected instanceof File ? selected.size : 50 * 1024 * 1024;\r\n let loadedBytes = 0;\r\n\r\n setUploadTotalBytes(totalBytes);\r\n setUploadLoadedBytes(0);\r\n setUploadProgress(0);\r\n setIsUploading(true);\r\n\r\n timerRef.current = setInterval(() => {\r\n loadedBytes = Math.min(totalBytes, loadedBytes + totalBytes * 0.08);\r\n const progress = totalBytes ? Math.round((loadedBytes / totalBytes) * 100) : 0;\r\n\r\n setUploadLoadedBytes(loadedBytes);\r\n setUploadProgress(progress);\r\n\r\n if (loadedBytes >= totalBytes) {\r\n if (timerRef.current) clearInterval(timerRef.current);\r\n timerRef.current = null;\r\n setTimeout(() => setIsUploading(false), 350);\r\n }\r\n }, 250);\r\n }}\r\n />\r\n </div>\r\n );\r\n}\r\n\r\nexport const VideoUploadingMock: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video',\r\n labelDropzoneSubPrompt: 'Formats: .mp4 .mov .avi .webm',\r\n labelUploadingTitle: 'Завантаження відео...',\r\n labelUploadingHint: 'Будь ласка, не закривайте сторінку',\r\n labelUploadingActionCancel: 'Скасувати',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n },\r\n render: (args) => <UploadingDropzoneMock {...args} />,\r\n};\r\n\r\nexport const MultiImagesPersistent: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Перетягніть фото або оберіть файли',\r\n labelDropzoneSubPrompt: 'JPG, PNG, WEBP, HEIC · до 5 МБ кожне',\r\n labelOrClickToSelect: 'Завантажити файл',\r\n maxSizeMB: 5,\r\n maxFiles: 20,\r\n singlePick: false,\r\n persistentDropzone: true,\r\n previewVariant: 'image-grid',\r\n className: 'w-[598px]',\r\n classNames: {\r\n previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n previewImage: 'rounded-[8px] object-cover',\r\n },\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const MultilinePromptSpacing: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Додайте файл\\nПеретягніть сюди або натисніть',\r\n labelDropzoneSubPrompt: 'JPG, PNG, WEBP до 5 МБ кожне',\r\n labelOrClickToSelect: 'Обрати',\r\n maxSizeMB: 5,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_DOCUMENT_TYPES,\r\n labelDropzonePrompt: 'Upload file...',\r\n labelDropzoneSubPrompt: 'PDF only, max 1 MB',\r\n labelFileTooLarge: 'File is too large. Max size is 1 MB.',\r\n maxSizeMB: 1,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const FileErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: ['application/pdf'],\r\n labelDropzonePrompt: 'Upload file...',\r\n labelDropzoneSubPrompt: 'Only PDF is supported',\r\n labelInvalidFileType: 'Invalid file type. Please upload a PDF file.',\r\n maxSizeMB: 5,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Upload photo...',\r\n labelDropzoneSubPrompt: 'JPG/PNG/WEBP, max 1 MB',\r\n labelFileTooLarge: 'Photo is too large. Max size is 1 MB.',\r\n maxSizeMB: 1,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotoErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Upload photo...',\r\n labelDropzoneSubPrompt: 'Only image files are supported',\r\n labelInvalidFileType: 'Invalid file type. Please upload an image file.',\r\n maxSizeMB: 5,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Drag photos or choose files',\r\n labelDropzoneSubPrompt: 'JPG, PNG, WEBP · max 1 MB each',\r\n labelFileTooLarge: 'One or more photos are too large. Max size is 1 MB each.',\r\n maxSizeMB: 1,\r\n maxFiles: 20,\r\n singlePick: false,\r\n persistentDropzone: true,\r\n previewVariant: 'image-grid',\r\n className: 'w-[598px]',\r\n classNames: {\r\n previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n previewImage: 'rounded-[8px] object-cover',\r\n },\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const PhotosMultiErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_IMAGES_TYPES,\r\n labelDropzonePrompt: 'Drag photos or choose files',\r\n labelDropzoneSubPrompt: 'Only image files are supported',\r\n labelInvalidFileType: 'One or more files have invalid type.',\r\n maxSizeMB: 5,\r\n maxFiles: 20,\r\n singlePick: false,\r\n persistentDropzone: true,\r\n previewVariant: 'image-grid',\r\n className: 'w-[598px]',\r\n classNames: {\r\n previewWraper: 'w-[75px] h-[75px] rounded-[8px] border-0',\r\n previewImage: 'rounded-[8px] object-cover',\r\n },\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorTooLarge: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video...',\r\n labelDropzoneSubPrompt: 'MP4/MOV/AVI/WEBM, max 1 MB',\r\n labelFileTooLarge: 'Video is too large. Max size is 1 MB.',\r\n maxSizeMB: 1,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n\r\nexport const VideoErrorInvalidType: Story = {\r\n args: {\r\n acceptTypes: DEFAULT_VIDEO_TYPES,\r\n labelDropzonePrompt: 'Upload video...',\r\n labelDropzoneSubPrompt: 'Only video files are supported',\r\n labelInvalidFileType: 'Invalid file type. Please upload a video file.',\r\n maxSizeMB: 100,\r\n maxFiles: 1,\r\n singlePick: true,\r\n className: 'w-[598px]',\r\n },\r\n render: (args) => <ControlledDropzone {...args} />,\r\n};\r\n"],"names":["ControlledDropzone","initialValue","args","value","setValue","useState","jsxs","jsx","Dropzone","items","meta","Story","Images","DEFAULT_IMAGES_TYPES","Files","DEFAULT_DOCUMENT_TYPES","Videos","DEFAULT_VIDEO_TYPES","VideoYoutubeLink","url","setUrl","event","next","UploadingDropzoneMock","isUploading","setIsUploading","uploadProgress","setUploadProgress","uploadLoadedBytes","setUploadLoadedBytes","uploadTotalBytes","setUploadTotalBytes","timerRef","useRef","useEffect","selected","totalBytes","loadedBytes","progress","VideoUploadingMock","MultiImagesPersistent","MultilinePromptSpacing","FileErrorTooLarge","FileErrorInvalidType","PhotoErrorTooLarge","PhotoErrorInvalidType","PhotosMultiErrorTooLarge","PhotosMultiErrorInvalidType","VideoErrorTooLarge","VideoErrorInvalidType"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@oneplatformdev/ui",
3
- "version": "0.1.99-beta.266",
3
+ "version": "0.1.99-beta.268",
4
4
  "description": "UI component library for OnePlatform",
5
5
  "author": "One Platform Development Team",
6
6
  "keywords": [
@@ -109,9 +109,9 @@
109
109
  "recharts": "^3.2.0",
110
110
  "sonner": "^2.0.7",
111
111
  "vaul": "^1.1.2",
112
- "@oneplatformdev/tokens": "^0.1.99-beta.266",
113
- "@oneplatformdev/utils": "^0.1.99-beta.266",
114
- "@oneplatformdev/hooks": "^0.1.99-beta.266"
112
+ "@oneplatformdev/tokens": "^0.1.99-beta.268",
113
+ "@oneplatformdev/hooks": "^0.1.99-beta.268",
114
+ "@oneplatformdev/utils": "^0.1.99-beta.268"
115
115
  },
116
116
  "scripts": {
117
117
  "chromatic": "chromatic"