@sentroy-co/client-sdk 2.2.0 → 2.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +255 -2
- package/dist/http.d.ts +13 -2
- package/dist/http.d.ts.map +1 -1
- package/dist/http.js +22 -6
- package/dist/http.js.map +1 -1
- package/dist/react/MediaManager.d.ts +13 -1
- package/dist/react/MediaManager.d.ts.map +1 -1
- package/dist/react/MediaManager.js +14 -5
- package/dist/react/MediaManager.js.map +1 -1
- package/dist/react/MediaManagerTrigger.d.ts +63 -0
- package/dist/react/MediaManagerTrigger.d.ts.map +1 -0
- package/dist/react/MediaManagerTrigger.js +81 -0
- package/dist/react/MediaManagerTrigger.js.map +1 -0
- package/dist/react/index.d.ts +2 -1
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +4 -1
- package/dist/react/index.js.map +1 -1
- package/dist/react/lib/utils.d.ts +14 -0
- package/dist/react/lib/utils.d.ts.map +1 -1
- package/dist/react/lib/utils.js +36 -0
- package/dist/react/lib/utils.js.map +1 -1
- package/dist/types.d.ts +10 -2
- package/dist/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/http.ts +26 -8
- package/src/react/MediaManager.tsx +28 -5
- package/src/react/MediaManagerTrigger.tsx +260 -0
- package/src/react/index.ts +5 -0
- package/src/react/lib/utils.ts +34 -0
- package/src/types.ts +10 -2
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
import { useCallback, useEffect, useState, type ReactNode } from "react"
|
|
2
|
+
import { createPortal } from "react-dom"
|
|
3
|
+
import type { Media } from "../types"
|
|
4
|
+
import { MediaManager, type MediaManagerProps } from "./MediaManager"
|
|
5
|
+
import { cn } from "./lib/utils"
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* MediaManagerTrigger — herhangi bir consumer-defined öğe (button, avatar
|
|
9
|
+
* thumb, ikon, vb.) tıklandığında MediaManager'ı modal içinde açan
|
|
10
|
+
* sarmalayıcı.
|
|
11
|
+
*
|
|
12
|
+
* Tasarım hedefi: kullanıcı kendi tetikleyicisini (`trigger` prop) verir,
|
|
13
|
+
* tıklanma + modal yönetimi + confirm/cancel akışı SDK tarafında olur.
|
|
14
|
+
* Böylece consumer her seferinde Dialog state ve render boilerplate'ini
|
|
15
|
+
* yazmak zorunda kalmaz — sadece "şu butonum şu callback'i tetiklesin"
|
|
16
|
+
* kadar kısa olur.
|
|
17
|
+
*
|
|
18
|
+
* Modal Tailwind utility class kullanır (host app'in design token'ları)
|
|
19
|
+
* ve `react-dom` portal ile `<body>`'ye render edilir — parent
|
|
20
|
+
* overflow:hidden / transform stacking context'lerine takılmaz.
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* <MediaManagerTrigger
|
|
25
|
+
* client={client}
|
|
26
|
+
* trigger={<Button>Change avatar</Button>}
|
|
27
|
+
* maxItems={1}
|
|
28
|
+
* accept="image/*"
|
|
29
|
+
* onSelect={(media) => console.log(media[0].url)}
|
|
30
|
+
* />
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
|
|
34
|
+
export interface MediaManagerTriggerProps
|
|
35
|
+
extends Omit<MediaManagerProps, "onSelect" | "onChange" | "multiple"> {
|
|
36
|
+
/** Tıklanabilir herhangi bir öğe — button, image, div, vb. */
|
|
37
|
+
trigger: ReactNode
|
|
38
|
+
/**
|
|
39
|
+
* Maksimum seçilebilir item sayısı. 1 = single mode, >1 = multi up to
|
|
40
|
+
* cap. Default 1. Cap'e ulaşılınca yeni item seçimi sessizce engellenir.
|
|
41
|
+
*/
|
|
42
|
+
maxItems?: number
|
|
43
|
+
/** Confirm — kullanıcı "Use selection" butonuna bastığında çağrılır. */
|
|
44
|
+
onSelect: (selected: Media[]) => void
|
|
45
|
+
/** Modal başlığı. Default "Select media". */
|
|
46
|
+
title?: string
|
|
47
|
+
/** Modal description satırı (opsiyonel). */
|
|
48
|
+
description?: string
|
|
49
|
+
/**
|
|
50
|
+
* Controlled mode — open state'ini parent yönetmek isterse.
|
|
51
|
+
* Default uncontrolled (kendi içinde useState).
|
|
52
|
+
*/
|
|
53
|
+
open?: boolean
|
|
54
|
+
/** Controlled mode için open değişikliği callback'i. */
|
|
55
|
+
onOpenChange?: (open: boolean) => void
|
|
56
|
+
/** Modal panel class override. */
|
|
57
|
+
modalClassName?: string
|
|
58
|
+
/** Trigger wrapper class — default `inline-block cursor-pointer`. */
|
|
59
|
+
triggerClassName?: string
|
|
60
|
+
/** Confirm butonu metni. Default "Use selection". */
|
|
61
|
+
confirmLabel?: string
|
|
62
|
+
/** Cancel butonu metni. Default "Cancel". */
|
|
63
|
+
cancelLabel?: string
|
|
64
|
+
/** Trigger'ın disabled durumu — modal açılmaz. */
|
|
65
|
+
disabled?: boolean
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export function MediaManagerTrigger(props: MediaManagerTriggerProps) {
|
|
69
|
+
const {
|
|
70
|
+
trigger,
|
|
71
|
+
maxItems = 1,
|
|
72
|
+
onSelect,
|
|
73
|
+
title = "Select media",
|
|
74
|
+
description,
|
|
75
|
+
open: controlledOpen,
|
|
76
|
+
onOpenChange,
|
|
77
|
+
modalClassName,
|
|
78
|
+
triggerClassName,
|
|
79
|
+
confirmLabel = "Use selection",
|
|
80
|
+
cancelLabel = "Cancel",
|
|
81
|
+
disabled = false,
|
|
82
|
+
...mmProps
|
|
83
|
+
} = props
|
|
84
|
+
|
|
85
|
+
const [internalOpen, setInternalOpen] = useState(false)
|
|
86
|
+
const [selected, setSelected] = useState<Media[]>([])
|
|
87
|
+
const [mounted, setMounted] = useState(false)
|
|
88
|
+
|
|
89
|
+
// SSR guard — portal yalnızca client'ta.
|
|
90
|
+
useEffect(() => {
|
|
91
|
+
setMounted(true)
|
|
92
|
+
}, [])
|
|
93
|
+
|
|
94
|
+
const isControlled = controlledOpen !== undefined
|
|
95
|
+
const open = isControlled ? controlledOpen : internalOpen
|
|
96
|
+
const setOpen = useCallback(
|
|
97
|
+
(v: boolean) => {
|
|
98
|
+
if (!isControlled) setInternalOpen(v)
|
|
99
|
+
onOpenChange?.(v)
|
|
100
|
+
if (!v) setSelected([])
|
|
101
|
+
},
|
|
102
|
+
[isControlled, onOpenChange],
|
|
103
|
+
)
|
|
104
|
+
|
|
105
|
+
// ESC — modal'ı kapat.
|
|
106
|
+
useEffect(() => {
|
|
107
|
+
if (!open) return
|
|
108
|
+
const onKey = (e: KeyboardEvent) => {
|
|
109
|
+
if (e.key === "Escape") {
|
|
110
|
+
e.preventDefault()
|
|
111
|
+
setOpen(false)
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
document.addEventListener("keydown", onKey)
|
|
115
|
+
return () => document.removeEventListener("keydown", onKey)
|
|
116
|
+
}, [open, setOpen])
|
|
117
|
+
|
|
118
|
+
// Body scroll lock — modal açıkken arka planda scroll olmasın.
|
|
119
|
+
useEffect(() => {
|
|
120
|
+
if (!open) return
|
|
121
|
+
const original = document.body.style.overflow
|
|
122
|
+
document.body.style.overflow = "hidden"
|
|
123
|
+
return () => {
|
|
124
|
+
document.body.style.overflow = original
|
|
125
|
+
}
|
|
126
|
+
}, [open])
|
|
127
|
+
|
|
128
|
+
const handleConfirm = useCallback(() => {
|
|
129
|
+
onSelect(selected)
|
|
130
|
+
setOpen(false)
|
|
131
|
+
}, [onSelect, selected, setOpen])
|
|
132
|
+
|
|
133
|
+
const handleTriggerClick = useCallback(() => {
|
|
134
|
+
if (disabled) return
|
|
135
|
+
setOpen(true)
|
|
136
|
+
}, [disabled, setOpen])
|
|
137
|
+
|
|
138
|
+
// Trigger — span'a click handler bağla. Consumer'ın trigger'ı zaten
|
|
139
|
+
// button olabilir; bu durumda nested button HTML invalid olur ama
|
|
140
|
+
// tarayıcılar tolere eder. İstenirse triggerClassName ile span yerine
|
|
141
|
+
// başka semantik kullanılabilir (consumer kendi trigger'ında onClick
|
|
142
|
+
// override edemez — modal handler'ı her zaman çalışır).
|
|
143
|
+
const triggerNode = (
|
|
144
|
+
<span
|
|
145
|
+
role="button"
|
|
146
|
+
tabIndex={disabled ? -1 : 0}
|
|
147
|
+
aria-haspopup="dialog"
|
|
148
|
+
aria-expanded={open}
|
|
149
|
+
aria-disabled={disabled}
|
|
150
|
+
onClick={handleTriggerClick}
|
|
151
|
+
onKeyDown={(e) => {
|
|
152
|
+
if (disabled) return
|
|
153
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
154
|
+
e.preventDefault()
|
|
155
|
+
setOpen(true)
|
|
156
|
+
}
|
|
157
|
+
}}
|
|
158
|
+
className={cn(
|
|
159
|
+
"inline-block",
|
|
160
|
+
disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
|
|
161
|
+
triggerClassName,
|
|
162
|
+
)}
|
|
163
|
+
>
|
|
164
|
+
{trigger}
|
|
165
|
+
</span>
|
|
166
|
+
)
|
|
167
|
+
|
|
168
|
+
const modalNode =
|
|
169
|
+
open && mounted ? (
|
|
170
|
+
<div
|
|
171
|
+
className="fixed inset-0 z-[100] flex items-center justify-center p-4"
|
|
172
|
+
role="dialog"
|
|
173
|
+
aria-modal="true"
|
|
174
|
+
aria-labelledby="sentroy-mm-title"
|
|
175
|
+
>
|
|
176
|
+
<div
|
|
177
|
+
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
|
178
|
+
onClick={() => setOpen(false)}
|
|
179
|
+
/>
|
|
180
|
+
<div
|
|
181
|
+
className={cn(
|
|
182
|
+
"relative z-10 flex h-[85vh] w-full max-w-5xl flex-col gap-3 rounded-xl border bg-background p-4 shadow-2xl",
|
|
183
|
+
modalClassName,
|
|
184
|
+
)}
|
|
185
|
+
>
|
|
186
|
+
<div className="flex items-start justify-between gap-2">
|
|
187
|
+
<div className="flex flex-col gap-0.5">
|
|
188
|
+
<h2 id="sentroy-mm-title" className="text-base font-semibold">
|
|
189
|
+
{title}
|
|
190
|
+
</h2>
|
|
191
|
+
{description && (
|
|
192
|
+
<p className="text-xs text-muted-foreground">{description}</p>
|
|
193
|
+
)}
|
|
194
|
+
</div>
|
|
195
|
+
<button
|
|
196
|
+
type="button"
|
|
197
|
+
onClick={() => setOpen(false)}
|
|
198
|
+
className="rounded-md p-1 text-muted-foreground hover:bg-muted/50"
|
|
199
|
+
aria-label="Close"
|
|
200
|
+
>
|
|
201
|
+
<svg
|
|
202
|
+
width="16"
|
|
203
|
+
height="16"
|
|
204
|
+
viewBox="0 0 24 24"
|
|
205
|
+
fill="none"
|
|
206
|
+
stroke="currentColor"
|
|
207
|
+
strokeWidth="2"
|
|
208
|
+
>
|
|
209
|
+
<path d="M18 6L6 18M6 6l12 12" />
|
|
210
|
+
</svg>
|
|
211
|
+
</button>
|
|
212
|
+
</div>
|
|
213
|
+
<div className="min-h-0 flex-1 overflow-hidden">
|
|
214
|
+
<MediaManager
|
|
215
|
+
{...mmProps}
|
|
216
|
+
multiple={maxItems > 1}
|
|
217
|
+
maxItems={maxItems}
|
|
218
|
+
onChange={setSelected}
|
|
219
|
+
className={cn("h-full", mmProps.className)}
|
|
220
|
+
/>
|
|
221
|
+
</div>
|
|
222
|
+
<div className="flex items-center justify-between gap-2 border-t pt-3">
|
|
223
|
+
<div className="text-xs text-muted-foreground">
|
|
224
|
+
{selected.length === 0
|
|
225
|
+
? maxItems === 1
|
|
226
|
+
? "Select an item"
|
|
227
|
+
: `Select up to ${maxItems} items`
|
|
228
|
+
: maxItems === 1
|
|
229
|
+
? "1 item selected"
|
|
230
|
+
: `${selected.length} / ${maxItems} selected`}
|
|
231
|
+
</div>
|
|
232
|
+
<div className="flex items-center gap-2">
|
|
233
|
+
<button
|
|
234
|
+
type="button"
|
|
235
|
+
onClick={() => setOpen(false)}
|
|
236
|
+
className="rounded-md border px-3 py-1.5 text-xs hover:bg-muted/50"
|
|
237
|
+
>
|
|
238
|
+
{cancelLabel}
|
|
239
|
+
</button>
|
|
240
|
+
<button
|
|
241
|
+
type="button"
|
|
242
|
+
onClick={handleConfirm}
|
|
243
|
+
disabled={selected.length === 0}
|
|
244
|
+
className="rounded-md bg-foreground px-3 py-1.5 text-xs font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-50"
|
|
245
|
+
>
|
|
246
|
+
{confirmLabel}
|
|
247
|
+
</button>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
) : null
|
|
253
|
+
|
|
254
|
+
return (
|
|
255
|
+
<>
|
|
256
|
+
{triggerNode}
|
|
257
|
+
{mounted && modalNode ? createPortal(modalNode, document.body) : null}
|
|
258
|
+
</>
|
|
259
|
+
)
|
|
260
|
+
}
|
package/src/react/index.ts
CHANGED
|
@@ -3,11 +3,16 @@ export {
|
|
|
3
3
|
type MediaManagerProps,
|
|
4
4
|
type MediaManagerClassNames,
|
|
5
5
|
} from "./MediaManager"
|
|
6
|
+
export {
|
|
7
|
+
MediaManagerTrigger,
|
|
8
|
+
type MediaManagerTriggerProps,
|
|
9
|
+
} from "./MediaManagerTrigger"
|
|
6
10
|
export { Lightbox, type LightboxProps } from "./lib/Lightbox"
|
|
7
11
|
export {
|
|
8
12
|
cn,
|
|
9
13
|
formatBytes,
|
|
10
14
|
detectKind,
|
|
15
|
+
matchAccept,
|
|
11
16
|
KIND_LABELS,
|
|
12
17
|
type MediaKind,
|
|
13
18
|
} from "./lib/utils"
|
package/src/react/lib/utils.ts
CHANGED
|
@@ -71,3 +71,37 @@ export const KIND_LABELS: Record<MediaKind, string> = {
|
|
|
71
71
|
code: "Code",
|
|
72
72
|
other: "Other",
|
|
73
73
|
}
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* `<input accept="...">` semantics — pattern listesi virgülle ayrılır,
|
|
77
|
+
* her parça:
|
|
78
|
+
* - `image/*` → MIME wildcard (image/png, image/jpeg ✓)
|
|
79
|
+
* - `image/png` → MIME exact match
|
|
80
|
+
* - `.png` → file extension (case-insensitive)
|
|
81
|
+
*
|
|
82
|
+
* Hiçbir parça eşleşmezse false. Accept boş/undefined olursa caller
|
|
83
|
+
* filter'ı atlamalı — bu fonksiyon o yüzden boş string'i false döner.
|
|
84
|
+
*/
|
|
85
|
+
export function matchAccept(
|
|
86
|
+
file: { mimeType?: string | null; fileName?: string },
|
|
87
|
+
accept: string,
|
|
88
|
+
): boolean {
|
|
89
|
+
const patterns = accept
|
|
90
|
+
.split(",")
|
|
91
|
+
.map((s) => s.trim().toLowerCase())
|
|
92
|
+
.filter(Boolean)
|
|
93
|
+
if (patterns.length === 0) return false
|
|
94
|
+
const mt = (file.mimeType ?? "").toLowerCase()
|
|
95
|
+
const fn = (file.fileName ?? "").toLowerCase()
|
|
96
|
+
for (const p of patterns) {
|
|
97
|
+
if (p.startsWith(".")) {
|
|
98
|
+
if (fn.endsWith(p)) return true
|
|
99
|
+
} else if (p.endsWith("/*")) {
|
|
100
|
+
const prefix = p.slice(0, -1) // "image/*" → "image/"
|
|
101
|
+
if (mt.startsWith(prefix)) return true
|
|
102
|
+
} else if (p === mt) {
|
|
103
|
+
return true
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
return false
|
|
107
|
+
}
|
package/src/types.ts
CHANGED
|
@@ -12,8 +12,16 @@ export interface SentroyClientConfig {
|
|
|
12
12
|
baseUrl: string
|
|
13
13
|
/** Company slug */
|
|
14
14
|
companySlug: string
|
|
15
|
-
/**
|
|
16
|
-
|
|
15
|
+
/**
|
|
16
|
+
* Access token (`stk_...`). Same token works for mail + storage.
|
|
17
|
+
*
|
|
18
|
+
* Optional: when omitted, the client uses **cookie auth**
|
|
19
|
+
* (`credentials: "include"` on every fetch) — useful for browser code
|
|
20
|
+
* running inside the Sentroy site itself, where the user's session
|
|
21
|
+
* cookie is already valid against `sentroy.com`. End users never have
|
|
22
|
+
* to paste an API key when the SDK is embedded in our own UI.
|
|
23
|
+
*/
|
|
24
|
+
accessToken?: string
|
|
17
25
|
/** Request timeout in milliseconds (default: 30000) */
|
|
18
26
|
timeout?: number
|
|
19
27
|
}
|