@qratilabs/qrati-connect 2.24.1 → 2.24.3
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 +86 -130
- package/element/{BM9ujORR2.js → BXcQi_eR2.js} +1 -1
- package/element/{DtRwaUYF2.js → Bavdi2yc2.js} +38 -38
- package/element/{DkG0zv7_2.js → BccTn5v-2.js} +1 -1
- package/element/{BKDqpSN62.js → C9kBlCZx2.js} +3 -3
- package/element/{C52SUIvC2.js → CIag4I7h2.js} +1 -1
- package/element/{LYboLIEU.js → CJXPO3HP.js} +1 -1
- package/element/{CHTzn6mh2.js → CQBd8iaX2.js} +3 -3
- package/element/{DN26AtHL2.js → CZbEGemi2.js} +3 -3
- package/element/{lcKuIs2T2.js → Ctl9NdWl2.js} +5 -9
- package/element/{Bow6F3212.js → Cy-MvajD2.js} +16 -16
- package/element/{BP2rYgya2.js → CyG7i8682.js} +8 -8
- package/element/{CLdpUOLk2.js → D234gMVd2.js} +4 -4
- package/element/{kiL9JENf2.js → D340VADc2.js} +1 -1
- package/element/{Bh8kXbe92.js → DNay1z3B2.js} +1 -1
- package/element/DPg_DKOi.js +5 -0
- package/element/{CWhnvMey2.js → DUIv5AtW2.js} +8 -8
- package/element/{BOqkzZ92.js → EjMoIoSK.js} +1 -1
- package/element/{DdOwRfWG.js → iuooW4mt.js} +8 -9
- package/element/{mIANlVHi2.js → qQ9Xx6H32.js} +1 -1
- package/element/web.es.js +29 -28
- package/package.json +1 -1
- /package/element/{CZ9iaxjO.js → CZ9iaxjO2.js} +0 -0
package/README.md
CHANGED
|
@@ -1,174 +1,130 @@
|
|
|
1
|
-
|
|
2
|
-
<img src="https://qrati.com/images/qrati-connect-banner.jpg" alt="Qrati Connect Banner" style="max-width:100%;height:auto;" />
|
|
3
|
-
</p>
|
|
1
|
+
|
|
4
2
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
11
13
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
# Qrati Connect — Embeddable Media & Engagement SDK
|
|
15
|
-
|
|
16
|
-
**Qrati Connect** is a compact, production-grade SDK for embedding photo galleries, media uploads, curation, and engagement into any website. It is built with [Preact](https://preactjs.com/), strict TypeScript, and Shadow-DOM style isolation, then distributed as a Web Component, React wrapper, and zero-code embed script.
|
|
17
|
-
|
|
18
|
-
---
|
|
19
|
-
|
|
20
|
-
## Why Qrati Connect?
|
|
14
|
+
Qrati Connect is a drop-in, embeddable event/gallery widget. It ships as three friendly bundles:
|
|
21
15
|
|
|
22
|
-
-
|
|
23
|
-
- **
|
|
24
|
-
- **
|
|
25
|
-
- **Themeable** — organization colors, fonts, radius, and shadows are fetched from the Qrati API and applied via CSS custom properties.
|
|
26
|
-
- **TypeScript-first** — full typings for the public API.
|
|
16
|
+
- **`<qrati-connect>` Web Component** — shadow-DOM isolated, Preact-powered, ~3 KB.
|
|
17
|
+
- **React wrapper** — external React, lazy-loads the custom element.
|
|
18
|
+
- **Embed loader** — one `<script>` tag, no bundler needed.
|
|
27
19
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
## Highlights
|
|
31
|
-
|
|
32
|
-
- Interactive media gallery with lightbox, blurhash placeholders, infinite scroll, and facial search.
|
|
33
|
-
- Smart uploads: compression, chunked progress, video trimming, and HEIC → JPEG conversion on demand.
|
|
34
|
-
- Reactions, curation workflow, leaderboards, and points-based engagement.
|
|
35
|
-
- Public events page with folder navigation and optional map view (Google Maps, Mapbox, OpenStreetMap).
|
|
20
|
+
Styles self-inject at runtime, so hosts never import a stylesheet.
|
|
36
21
|
|
|
37
|
-
---
|
|
38
|
-
|
|
39
|
-
## Distribution Formats
|
|
40
22
|
|
|
41
|
-
|
|
42
|
-
|--------|--------|----------|
|
|
43
|
-
| **React wrapper** | `dist/react/index.mjs` / `index.cjs` | React / Next.js apps |
|
|
44
|
-
| **Web Component** | `dist/element/web.es.js` | Any framework or vanilla JS |
|
|
45
|
-
| **Embed loader** | `dist/embed/embed.js` | Zero-code `<script>` integration |
|
|
23
|
+
## Install
|
|
46
24
|
|
|
47
|
-
|
|
25
|
+
```bash
|
|
26
|
+
# contributors
|
|
27
|
+
pnpm install
|
|
48
28
|
|
|
49
|
-
|
|
29
|
+
# consumers
|
|
30
|
+
npm install @qratilabs/qrati-connect
|
|
31
|
+
```
|
|
50
32
|
|
|
51
|
-
|
|
33
|
+
> Requires **Node ≥24** and **pnpm ≥11**. See `.nvmrc` for the pinned Node version.
|
|
52
34
|
|
|
53
|
-
|
|
35
|
+
## Environment
|
|
54
36
|
|
|
55
37
|
```bash
|
|
56
|
-
|
|
57
|
-
# or
|
|
58
|
-
npm install @qratilabs/qrati-connect
|
|
38
|
+
cp .env.example .env.local
|
|
59
39
|
```
|
|
60
40
|
|
|
61
|
-
|
|
62
|
-
'use client';
|
|
41
|
+
Set at least:
|
|
63
42
|
|
|
64
|
-
|
|
43
|
+
- `VITE_BASE_URL` — API base, e.g. `https://api.qrati.com`
|
|
44
|
+
- `VITE_APP_ENVIRONMENT` — e.g. `alpha`, `beta`, `prod`
|
|
65
45
|
|
|
66
|
-
|
|
67
|
-
return <QratiConnect organizationId='your-org-id' router='memory' />;
|
|
68
|
-
}
|
|
69
|
-
```
|
|
46
|
+
## Develop
|
|
70
47
|
|
|
71
|
-
|
|
48
|
+
No separate dev server, but you have options:
|
|
72
49
|
|
|
73
|
-
```
|
|
74
|
-
|
|
50
|
+
```bash
|
|
51
|
+
# Component workbench
|
|
52
|
+
pnpm storybook
|
|
75
53
|
|
|
76
|
-
|
|
54
|
+
# Iterate on the standalone element
|
|
55
|
+
pnpm build:element:watch
|
|
56
|
+
pnpm serve:element # http://localhost:4599
|
|
77
57
|
```
|
|
78
58
|
|
|
79
|
-
|
|
59
|
+
## Test
|
|
80
60
|
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
data-router="hash"></script>
|
|
61
|
+
```bash
|
|
62
|
+
pnpm test:unit:run # Vitest + jsdom
|
|
63
|
+
pnpm test:production # Playwright against a live env
|
|
64
|
+
pnpm test:all # unit + production
|
|
86
65
|
```
|
|
87
66
|
|
|
88
|
-
|
|
67
|
+
## Build
|
|
89
68
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
| `organizationId` * | `string` | — | Qrati organization ID |
|
|
97
|
-
| `router` | `'memory' \| 'hash'` | `'memory'` | Routing strategy |
|
|
98
|
-
| `uid` | `string` | — | Pre-authenticated user ID |
|
|
99
|
-
| `fname` | `string` | — | Pre-authenticated first name |
|
|
100
|
-
| `lname` | `string` | — | Pre-authenticated last name |
|
|
101
|
-
| `theme` | `'light' \| 'dark'` | `'light'` | Color scheme |
|
|
102
|
-
| `onError` | `(error: Error) => void` | — | SDK error callback |
|
|
69
|
+
```bash
|
|
70
|
+
pnpm build # all three bundles + post-build validation
|
|
71
|
+
pnpm build:element # dist/element/web.es.js
|
|
72
|
+
pnpm build:react # dist/react/index.{mjs,cjs,d.ts}
|
|
73
|
+
pnpm build:embed # dist/embed/embed.js
|
|
74
|
+
```
|
|
103
75
|
|
|
104
|
-
|
|
76
|
+
`build:react` automatically builds the element first because the React wrapper loads `../element/web.es.js` at runtime.
|
|
105
77
|
|
|
106
|
-
|
|
78
|
+
## Use it
|
|
107
79
|
|
|
108
|
-
|
|
80
|
+
### React
|
|
109
81
|
|
|
110
|
-
|
|
82
|
+
```tsx
|
|
83
|
+
import { QratiConnect } from '@qratilabs/qrati-connect';
|
|
111
84
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
85
|
+
<QratiConnect
|
|
86
|
+
organizationId="your-org-id"
|
|
87
|
+
router="hash"
|
|
88
|
+
theme="light"
|
|
89
|
+
onError={(err) => console.error(err)}
|
|
90
|
+
/>
|
|
91
|
+
```
|
|
116
92
|
|
|
117
|
-
|
|
93
|
+
### Script tag
|
|
118
94
|
|
|
119
|
-
|
|
95
|
+
```html
|
|
96
|
+
<script
|
|
97
|
+
async
|
|
98
|
+
src="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/embed/embed.js"
|
|
99
|
+
data-organization-id="your-org-id"
|
|
100
|
+
data-router="hash"
|
|
101
|
+
data-theme="light"
|
|
102
|
+
></script>
|
|
103
|
+
```
|
|
120
104
|
|
|
121
|
-
|
|
105
|
+
Use a **classic** `<script>` tag — not `type="module"` — so the loader can read `document.currentScript`.
|
|
122
106
|
|
|
123
|
-
|
|
107
|
+
### Web Component (programmatic)
|
|
124
108
|
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
- Upload feature: loaded on demand.
|
|
128
|
-
- HEIC conversion (`heic2any`): loaded only when a `.heic` file is selected.
|
|
129
|
-
- Maps and heavy UI libraries are split into lazy chunks.
|
|
109
|
+
```ts
|
|
110
|
+
import { renderComponent } from '@qratilabs/qrati-connect/element';
|
|
130
111
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
112
|
+
renderComponent('#qrati-host', {
|
|
113
|
+
organizationId: 'your-org-id',
|
|
114
|
+
router: 'memory',
|
|
115
|
+
theme: 'dark'
|
|
116
|
+
});
|
|
117
|
+
```
|
|
134
118
|
|
|
135
|
-
|
|
119
|
+
## Deploy
|
|
136
120
|
|
|
137
121
|
```bash
|
|
138
|
-
pnpm
|
|
139
|
-
pnpm
|
|
140
|
-
pnpm type-check # TypeScript check (no emit)
|
|
141
|
-
pnpm lint # ESLint
|
|
142
|
-
pnpm format # Prettier
|
|
143
|
-
pnpm build # build all distribution targets
|
|
144
|
-
pnpm test:unit # Vitest unit tests (watch)
|
|
145
|
-
pnpm test:unit:run # Vitest unit tests (once)
|
|
146
|
-
pnpm test:all # unit tests + Playwright production regression
|
|
122
|
+
pnpm deploy:beta # merge main into release/beta and push
|
|
123
|
+
pnpm deploy:prod # merge main into release/prod and push
|
|
147
124
|
```
|
|
148
125
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
---
|
|
152
|
-
|
|
153
|
-
## Documentation
|
|
154
|
-
|
|
155
|
-
- [`docs/INDEX.md`](docs/INDEX.md) — documentation map
|
|
156
|
-
- [`docs/ARCHITECTURE.md`](docs/ARCHITECTURE.md) — architecture, build system, routing, styling, i18n
|
|
157
|
-
- [`docs/DEVELOPMENT.md`](docs/DEVELOPMENT.md) — environment setup, workflow, testing, Storybook
|
|
158
|
-
- [`docs/API.md`](docs/API.md) — backend API communication
|
|
159
|
-
- [`docs/REFERENCE.md`](docs/REFERENCE.md) — components, hooks, pages, utilities, router API
|
|
160
|
-
- [`docs/DEPLOYMENT.md`](docs/DEPLOYMENT.md) — release process and CDN
|
|
161
|
-
- [`docs/FAQ.md`](docs/FAQ.md) — common questions
|
|
126
|
+
Both scripts require a clean git working tree. After pushing, semantic-release publishes from `dist/` when CI runs on the release branch.
|
|
162
127
|
|
|
163
128
|
---
|
|
164
129
|
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
- GitHub Issues: https://github.com/qrati-labs/qrati-connect-ts/issues
|
|
168
|
-
- Email: support@qrati.com
|
|
169
|
-
|
|
170
|
-
---
|
|
171
|
-
|
|
172
|
-
## License
|
|
173
|
-
|
|
174
|
-
Proprietary © Qrati Labs — https://qrati.com. All rights reserved.
|
|
130
|
+
Built with Preact, Vite, Tailwind, and a little bit of Shadow DOM magic.
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{d as e,s as r,t,v as o}from"./DrrpB4Om.js";import{D as l,n as s}from"./CaX2xgrP.js";import{l as i}from"./ChJXhA9c.js";import"./h4ZjZXfe2.js";var n=e(()=>import("./
|
|
1
|
+
import{d as e,s as r,t,v as o}from"./DrrpB4Om.js";import{D as l,n as s}from"./CaX2xgrP.js";import{l as i}from"./ChJXhA9c.js";import"./h4ZjZXfe2.js";var n=e(()=>import("./C9kBlCZx2.js")),a=e(()=>import("./CZbEGemi2.js")),c=e(()=>import("./D340VADc2.js")),d=e(()=>import("./CQBd8iaX2.js")),p=()=>/* @__PURE__ */t("div",{class:"flex h-full items-center justify-center",children:/* @__PURE__ */t("div",{class:"text-center",children:[
|
|
2
2
|
/* @__PURE__ */t("svg",{xmlns:"http://www.w3.org/2000/svg",class:"text-muted-foreground mx-auto mb-3 size-10",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5",children:[/* @__PURE__ */t("path",{d:"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z"}),/* @__PURE__ */t("circle",{cx:"12",cy:"9",r:"2.5"})]}),
|
|
3
3
|
/* @__PURE__ */t("p",{class:"text-foreground",children:"No location data available."}),
|
|
4
4
|
/* @__PURE__ */t("p",{class:"text-muted-foreground mt-1 text-xs",children:"Events need location data to appear on the map."})]})}),m=()=>/* @__PURE__ */t("div",{class:"flex h-full items-center justify-center",children:/* @__PURE__ */t("div",{class:"border-primary size-8 animate-spin rounded-full border-4 border-t-transparent"})}),g=({events:e,isLoading:g=!1})=>{const{organization:x}=s(),f=i(),h=x?.integrationSettings??{},u=h.mapProvider??"openstreetmap",v=o(e=>{f(l.GALLERY(e))},[f]);if("openstreetmap_free"===u)/* @__PURE__ */return t("div",{class:"relative mt-3 h-screen sm:mt-6",children:/* @__PURE__ */t(r,{fallback:/* @__PURE__ */t(m,{}),children:/* @__PURE__ */t(n,{onExplore:v,logoUrl:x?.logoUrl})})});const y=h.mapTilerApiKey??"",b=h.googleMapsApiKey??"",w=h.mapboxApiKey??"",j=e.filter(e=>"number"==typeof e.location?.x&&"number"==typeof e.location?.y);/* @__PURE__ */
|