@huskel/sdk 0.2.1 → 0.2.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 +55 -30
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,24 +10,44 @@ npm install @huskel/sdk
|
|
|
10
10
|
|
|
11
11
|
## Setup
|
|
12
12
|
|
|
13
|
+
Wrap your application in the `<HuskelProvider>` (it uses `"use client"` internally, allowing your root layout to remain a Next.js Server Component):
|
|
14
|
+
|
|
13
15
|
```tsx
|
|
14
|
-
// app/layout.tsx (Next.js
|
|
15
|
-
|
|
16
|
-
import { useHuskel } from '@huskel/sdk';
|
|
16
|
+
// app/layout.tsx (Next.js Root Layout - Server Component)
|
|
17
|
+
import { HuskelProvider } from '@huskel/sdk';
|
|
17
18
|
|
|
18
19
|
export default function RootLayout({ children }) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
20
|
+
return (
|
|
21
|
+
<html>
|
|
22
|
+
<body>
|
|
23
|
+
{/* siteId, apiUrl, and apiToken are read automatically from NEXT_PUBLIC_HUSKEL_* env variables */}
|
|
24
|
+
<HuskelProvider>
|
|
25
|
+
{children}
|
|
26
|
+
</HuskelProvider>
|
|
27
|
+
</body>
|
|
28
|
+
</html>
|
|
29
|
+
);
|
|
25
30
|
}
|
|
26
31
|
```
|
|
27
32
|
|
|
28
|
-
|
|
33
|
+
*Or pass configuration explicitly if you are not using environment variables:*
|
|
34
|
+
|
|
35
|
+
```tsx
|
|
36
|
+
<HuskelProvider
|
|
37
|
+
siteId="your-site-id"
|
|
38
|
+
apiUrl="https://your-huskel-backend.com"
|
|
39
|
+
apiToken="your-api-token"
|
|
40
|
+
>
|
|
41
|
+
{children}
|
|
42
|
+
</HuskelProvider>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Ingest products (forgiving schema mapping)
|
|
46
|
+
|
|
47
|
+
Pass your raw database or CMS objects directly. The SDK automatically validates, dedupes, batches, and resolves common field naming variations (e.g. `title`/`name`, `thumbnail`/`image`/`images`, `slug`/`id`/`productId`):
|
|
29
48
|
|
|
30
49
|
```tsx
|
|
50
|
+
import { useEffect } from 'react';
|
|
31
51
|
import { useIngest } from '@huskel/sdk';
|
|
32
52
|
|
|
33
53
|
// Single product page
|
|
@@ -35,15 +55,10 @@ export function ProductPage({ product }) {
|
|
|
35
55
|
const { ingest } = useIngest();
|
|
36
56
|
|
|
37
57
|
useEffect(() => {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
images: product.images,
|
|
43
|
-
category: product.category,
|
|
44
|
-
currency: 'KES',
|
|
45
|
-
});
|
|
46
|
-
}, [product.id]);
|
|
58
|
+
// Passes raw product object directly.
|
|
59
|
+
// Handles background batching, client-side deduplication, and offline recovery automatically.
|
|
60
|
+
ingest(product);
|
|
61
|
+
}, [product.id, ingest]);
|
|
47
62
|
}
|
|
48
63
|
|
|
49
64
|
// Listing / category page
|
|
@@ -51,19 +66,16 @@ export function ProductGrid({ products }) {
|
|
|
51
66
|
const { ingestBatch } = useIngest();
|
|
52
67
|
|
|
53
68
|
useEffect(() => {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
url: `/products/${p.slug}`,
|
|
58
|
-
images: [p.thumbnail],
|
|
59
|
-
currency: 'KES',
|
|
60
|
-
})));
|
|
61
|
-
}, [products]);
|
|
69
|
+
// Ingest array of products in a single debounced batch
|
|
70
|
+
ingestBatch(products);
|
|
71
|
+
}, [products, ingestBatch]);
|
|
62
72
|
}
|
|
63
73
|
```
|
|
64
74
|
|
|
65
75
|
## Search
|
|
66
76
|
|
|
77
|
+
### SearchBar Dropdown Component
|
|
78
|
+
|
|
67
79
|
```tsx
|
|
68
80
|
import { SearchBar } from '@huskel/sdk';
|
|
69
81
|
|
|
@@ -76,12 +88,25 @@ export function Header() {
|
|
|
76
88
|
}
|
|
77
89
|
```
|
|
78
90
|
|
|
91
|
+
### Headless Search Hook
|
|
92
|
+
|
|
79
93
|
```tsx
|
|
80
|
-
// Headless
|
|
81
94
|
import { useSearch } from '@huskel/sdk';
|
|
82
95
|
|
|
83
|
-
|
|
84
|
-
|
|
96
|
+
export function CustomSearch() {
|
|
97
|
+
const { results, loading, search } = useSearch();
|
|
98
|
+
|
|
99
|
+
return (
|
|
100
|
+
<div>
|
|
101
|
+
<input onChange={e => search(e.target.value)} />
|
|
102
|
+
<ul>
|
|
103
|
+
{results.map(r => (
|
|
104
|
+
<li key={r.id}>{r.product.name}</li>
|
|
105
|
+
))}
|
|
106
|
+
</ul>
|
|
107
|
+
</div>
|
|
108
|
+
);
|
|
109
|
+
}
|
|
85
110
|
```
|
|
86
111
|
|
|
87
112
|
## Sparkle (similar products)
|