@rubixstudios/payload-images 1.0.5 → 1.0.6

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 (5) hide show
  1. package/dist/components/SearchImages/index.d.ts +0 -1
  2. package/dist/components/SearchImages/index.d.ts.map +1 -1
  3. package/dist/components/SearchImages/index.js +79 -80
  4. package/dist/types.d.ts +3 -3
  5. package/package.json +5 -5
package/dist/components/SearchImages/index.d.ts CHANGED
@@ -1,6 +1,5 @@
1
1
  import React from 'react';
2
2
  import { type SearchImagesProps } from '../../types.js';
3
3
  import './style.css';
4
- export declare const previewImageDrawerSlug = "preview-image";
5
4
  export declare const SearchImages: (props: SearchImagesProps) => React.JSX.Element;
6
5
  //# sourceMappingURL=index.d.ts.map
package/dist/components/SearchImages/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchImages/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,EAYL,KAAK,iBAAiB,EAGvB,MAAM,gBAAgB,CAAA;AAGvB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,sBAAsB,kBAAkB,CAAA;AAErD,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAkjBpD,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchImages/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAC/D,OAAO,EAYL,KAAK,iBAAiB,EAGvB,MAAM,gBAAgB,CAAA;AAGvB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,sBAgjBpD,CAAA"}
package/dist/components/SearchImages/index.js CHANGED
@@ -6,19 +6,18 @@ import { fetchCache } from '../../utils/fetchCache.js';
6
6
  import { HeartIcon } from '../SearchImages/heart.js';
7
7
  import './style.css';
8
8
  const baseClass = 'search-images';
9
- export const previewImageDrawerSlug = 'preview-image';
10
9
  export const SearchImages = (props)=>{
11
10
  const { serverURL, api, onSelect } = props;
12
- const [providerFilters, setProviderFilters] = useState(null);
13
- const [providerOptions, setProviderOptions] = useState([]);
14
11
  const [selectedProvider, setSelectedProvider] = useState(null);
12
+ const [providerOptions, setProviderOptions] = useState([]);
13
+ const [filters, setFilters] = useState(null);
15
14
  const [images, setImages] = useState(null);
16
- const [totalPages, setTotalPages] = useState(null);
17
15
  const [currentPage, setCurrentPage] = useState(null);
16
+ const [totalPages, setTotalPages] = useState(null);
18
17
  const [loading, setLoading] = useState(true);
19
18
  const [show, setShow] = useState(false);
20
19
  const [value, setValue] = useState('');
21
- const addDefaultError = useCallback(()=>{
20
+ const defaultError = useCallback(()=>{
22
21
  toast.error('Something went wrong.');
23
22
  }, []);
24
23
  const resetImages = useCallback(()=>{
@@ -44,47 +43,47 @@ export const SearchImages = (props)=>{
44
43
  setSelectedProvider(first);
45
44
  switch(first.value){
46
45
  case 'unsplash':
47
- setProviderFilters({
46
+ setFilters({
48
47
  provider: 'unsplash',
49
- filters: {}
48
+ options: {}
50
49
  });
51
50
  break;
52
51
  case 'pexels':
53
- setProviderFilters({
52
+ setFilters({
54
53
  provider: 'pexels',
55
- filters: {}
54
+ options: {}
56
55
  });
57
56
  break;
58
57
  case 'pixabay':
59
- setProviderFilters({
58
+ setFilters({
60
59
  provider: 'pixabay',
61
- filters: {}
60
+ options: {}
62
61
  });
63
62
  break;
64
63
  }
65
64
  } catch {
66
65
  setLoading(false);
67
- addDefaultError();
66
+ defaultError();
68
67
  }
69
68
  }, [
70
69
  serverURL,
71
70
  api,
72
- addDefaultError
71
+ defaultError
73
72
  ]);
74
73
  const buildFeaturedParams = useCallback(()=>{
75
- if (!providerFilters) return '';
74
+ if (!filters) return '';
76
75
  const params = new URLSearchParams();
77
- switch(providerFilters.provider){
76
+ switch(filters.provider){
78
77
  case 'unsplash':
79
78
  {
80
- const { color, orientation } = providerFilters.filters;
79
+ const { color, orientation } = filters.options;
81
80
  if (color) params.set('color', color);
82
81
  if (orientation) params.set('orientation', orientation);
83
82
  break;
84
83
  }
85
84
  case 'pexels':
86
85
  {
87
- const { color, orientation, size } = providerFilters.filters;
86
+ const { color, orientation, size } = filters.options;
88
87
  if (color) params.set('color', color);
89
88
  if (orientation) params.set('orientation', orientation);
90
89
  if (size) params.set('size', size);
@@ -92,7 +91,7 @@ export const SearchImages = (props)=>{
92
91
  }
93
92
  case 'pixabay':
94
93
  {
95
- const { category, image_type, order, orientation, colors } = providerFilters.filters;
94
+ const { category, image_type, order, orientation, colors } = filters.options;
96
95
  if (category) params.set('category', category);
97
96
  if (image_type) params.set('image_type', image_type);
98
97
  if (order) params.set('order', order);
@@ -104,7 +103,7 @@ export const SearchImages = (props)=>{
104
103
  const query = params.toString();
105
104
  return query ? `?${query}` : '';
106
105
  }, [
107
- providerFilters
106
+ filters
108
107
  ]);
109
108
  const getFeaturedPhotos = useCallback(async ()=>{
110
109
  try {
@@ -113,7 +112,7 @@ export const SearchImages = (props)=>{
113
112
  if (json.error) return toast.error(json.error);
114
113
  setImages(json.data.images);
115
114
  } catch {
116
- addDefaultError();
115
+ defaultError();
117
116
  } finally{
118
117
  setLoading(false);
119
118
  }
@@ -121,25 +120,25 @@ export const SearchImages = (props)=>{
121
120
  serverURL,
122
121
  api,
123
122
  selectedProvider?.value,
124
- addDefaultError,
123
+ defaultError,
125
124
  buildFeaturedParams
126
125
  ]);
127
126
  const buildQueryParams = useCallback((page = 1)=>{
128
- if (!providerFilters) return '';
127
+ if (!filters) return '';
129
128
  const params = new URLSearchParams();
130
129
  params.set('query', value);
131
130
  params.set('page', String(page));
132
- switch(providerFilters.provider){
131
+ switch(filters.provider){
133
132
  case 'unsplash':
134
133
  {
135
- const { color, orientation } = providerFilters.filters;
134
+ const { color, orientation } = filters.options;
136
135
  if (color) params.set('color', color);
137
136
  if (orientation) params.set('orientation', orientation);
138
137
  break;
139
138
  }
140
139
  case 'pexels':
141
140
  {
142
- const { color, orientation, size } = providerFilters.filters;
141
+ const { color, orientation, size } = filters.options;
143
142
  if (color) params.set('color', color);
144
143
  if (orientation) params.set('orientation', orientation);
145
144
  if (size) params.set('size', size);
@@ -147,7 +146,7 @@ export const SearchImages = (props)=>{
147
146
  }
148
147
  case 'pixabay':
149
148
  {
150
- const { category, image_type, order, orientation, colors } = providerFilters.filters;
149
+ const { category, image_type, order, orientation, colors } = filters.options;
151
150
  if (category) params.set('category', category);
152
151
  if (image_type) params.set('image_type', image_type);
153
152
  if (order) params.set('order', order);
@@ -158,7 +157,7 @@ export const SearchImages = (props)=>{
158
157
  }
159
158
  return params.toString();
160
159
  }, [
161
- providerFilters,
160
+ filters,
162
161
  value
163
162
  ]);
164
163
  const getPhotos = useCallback(async (page = 1)=>{
@@ -170,7 +169,7 @@ export const SearchImages = (props)=>{
170
169
  setTotalPages(json.data.totalPages);
171
170
  setCurrentPage(page);
172
171
  } catch {
173
- addDefaultError();
172
+ defaultError();
174
173
  } finally{
175
174
  setLoading(false);
176
175
  }
@@ -178,7 +177,7 @@ export const SearchImages = (props)=>{
178
177
  serverURL,
179
178
  api,
180
179
  selectedProvider?.value,
181
- addDefaultError,
180
+ defaultError,
182
181
  buildQueryParams
183
182
  ]);
184
183
  const handleSearchFilterChange = useCallback((search)=>{
@@ -192,21 +191,21 @@ export const SearchImages = (props)=>{
192
191
  resetImages();
193
192
  switch(select.value){
194
193
  case 'unsplash':
195
- setProviderFilters({
194
+ setFilters({
196
195
  provider: 'unsplash',
197
- filters: {}
196
+ options: {}
198
197
  });
199
198
  break;
200
199
  case 'pexels':
201
- setProviderFilters({
200
+ setFilters({
202
201
  provider: 'pexels',
203
- filters: {}
202
+ options: {}
204
203
  });
205
204
  break;
206
205
  case 'pixabay':
207
- setProviderFilters({
206
+ setFilters({
208
207
  provider: 'pixabay',
209
- filters: {}
208
+ options: {}
210
209
  });
211
210
  break;
212
211
  }
@@ -228,7 +227,7 @@ export const SearchImages = (props)=>{
228
227
  getProviderOptions
229
228
  ]);
230
229
  useEffect(()=>{
231
- if (!selectedProvider?.value || !providerFilters) return;
230
+ if (!selectedProvider?.value || !filters) return;
232
231
  if (value.trim().length > 0) {
233
232
  void getPhotos(1);
234
233
  } else {
@@ -236,7 +235,7 @@ export const SearchImages = (props)=>{
236
235
  }
237
236
  }, [
238
237
  selectedProvider?.value,
239
- providerFilters,
238
+ filters,
240
239
  value,
241
240
  getPhotos,
242
241
  getFeaturedPhotos
@@ -255,15 +254,15 @@ export const SearchImages = (props)=>{
255
254
  isClearable: false,
256
255
  isSearchable: false,
257
256
  isCreatable: false
258
- })), providerFilters?.provider === 'pexels' && /*#__PURE__*/ React.createElement("div", {
257
+ })), filters?.provider === 'pexels' && /*#__PURE__*/ React.createElement("div", {
259
258
  className: `${baseClass}__filters`
260
259
  }, /*#__PURE__*/ React.createElement(Select, {
261
260
  options: PexelsColours,
262
- value: PexelsColours.find((o)=>o.value === providerFilters.filters.color),
263
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'pexels' ? {
261
+ value: PexelsColours.find((o)=>o.value === filters.options.color),
262
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pexels' ? {
264
263
  provider: 'pexels',
265
- filters: {
266
- ...prev.filters,
264
+ options: {
265
+ ...prev.options,
267
266
  color: opt?.value
268
267
  }
269
268
  } : prev),
@@ -272,11 +271,11 @@ export const SearchImages = (props)=>{
272
271
  placeholder: "Select color..."
273
272
  }), /*#__PURE__*/ React.createElement(Select, {
274
273
  options: PexelsSize,
275
- value: PexelsSize.find((o)=>o.value === providerFilters.filters.size),
276
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'pexels' ? {
274
+ value: PexelsSize.find((o)=>o.value === filters.options.size),
275
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pexels' ? {
277
276
  provider: 'pexels',
278
- filters: {
279
- ...prev.filters,
277
+ options: {
278
+ ...prev.options,
280
279
  size: opt?.value
281
280
  }
282
281
  } : prev),
@@ -285,26 +284,26 @@ export const SearchImages = (props)=>{
285
284
  placeholder: "Select size..."
286
285
  }), /*#__PURE__*/ React.createElement(Select, {
287
286
  options: PexelsOrientation,
288
- value: PexelsOrientation.find((o)=>o.value === providerFilters.filters.orientation),
289
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'pexels' ? {
287
+ value: PexelsOrientation.find((o)=>o.value === filters.options.orientation),
288
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pexels' ? {
290
289
  provider: 'pexels',
291
- filters: {
292
- ...prev.filters,
290
+ options: {
291
+ ...prev.options,
293
292
  orientation: opt?.value
294
293
  }
295
294
  } : prev),
296
295
  isClearable: true,
297
296
  isSearchable: false,
298
297
  placeholder: "Select orientation..."
299
- })), providerFilters?.provider === 'pixabay' && /*#__PURE__*/ React.createElement("div", {
298
+ })), filters?.provider === 'pixabay' && /*#__PURE__*/ React.createElement("div", {
300
299
  className: `${baseClass}__filters`
301
300
  }, /*#__PURE__*/ React.createElement(Select, {
302
301
  options: PixabayCategories,
303
- value: PixabayCategories.find((o)=>o.value === providerFilters.filters.category),
304
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'pixabay' ? {
302
+ value: PixabayCategories.find((o)=>o.value === filters.options.category),
303
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
305
304
  provider: 'pixabay',
306
- filters: {
307
- ...prev.filters,
305
+ options: {
306
+ ...prev.options,
308
307
  category: opt?.value
309
308
  }
310
309
  } : prev),
@@ -313,11 +312,11 @@ export const SearchImages = (props)=>{
313
312
  placeholder: "Select category..."
314
313
  }), /*#__PURE__*/ React.createElement(Select, {
315
314
  options: PixabayImageType,
316
- value: PixabayImageType.find((o)=>o.value === providerFilters.filters.image_type),
317
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'pixabay' ? {
315
+ value: PixabayImageType.find((o)=>o.value === filters.options.image_type),
316
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
318
317
  provider: 'pixabay',
319
- filters: {
320
- ...prev.filters,
318
+ options: {
319
+ ...prev.options,
321
320
  image_type: opt?.value
322
321
  }
323
322
  } : prev),
@@ -326,11 +325,11 @@ export const SearchImages = (props)=>{
326
325
  placeholder: "Select type..."
327
326
  }), /*#__PURE__*/ React.createElement(Select, {
328
327
  options: PixabayColours,
329
- value: PixabayColours.find((o)=>o.value === providerFilters.filters.colors),
330
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'pixabay' ? {
328
+ value: PixabayColours.find((o)=>o.value === filters.options.colors),
329
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
331
330
  provider: 'pixabay',
332
- filters: {
333
- ...prev.filters,
331
+ options: {
332
+ ...prev.options,
334
333
  colors: opt?.value
335
334
  }
336
335
  } : prev),
@@ -339,11 +338,11 @@ export const SearchImages = (props)=>{
339
338
  placeholder: "Select color..."
340
339
  }), /*#__PURE__*/ React.createElement(Select, {
341
340
  options: PixabayOrientation,
342
- value: PixabayOrientation.find((o)=>o.value === providerFilters.filters.orientation),
343
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'pixabay' ? {
341
+ value: PixabayOrientation.find((o)=>o.value === filters.options.orientation),
342
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
344
343
  provider: 'pixabay',
345
- filters: {
346
- ...prev.filters,
344
+ options: {
345
+ ...prev.options,
347
346
  orientation: opt?.value
348
347
  }
349
348
  } : prev),
@@ -352,26 +351,26 @@ export const SearchImages = (props)=>{
352
351
  placeholder: "Select orientation..."
353
352
  }), /*#__PURE__*/ React.createElement(Select, {
354
353
  options: PixabayOrder,
355
- value: PixabayOrder.find((o)=>o.value === providerFilters.filters.order),
356
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'pixabay' ? {
354
+ value: PixabayOrder.find((o)=>o.value === filters.options.order),
355
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'pixabay' ? {
357
356
  provider: 'pixabay',
358
- filters: {
359
- ...prev.filters,
357
+ options: {
358
+ ...prev.options,
360
359
  order: opt?.value
361
360
  }
362
361
  } : prev),
363
362
  isClearable: true,
364
363
  isSearchable: false,
365
364
  placeholder: "Select order..."
366
- })), providerFilters?.provider === 'unsplash' && /*#__PURE__*/ React.createElement("div", {
365
+ })), filters?.provider === 'unsplash' && /*#__PURE__*/ React.createElement("div", {
367
366
  className: `${baseClass}__filters`
368
367
  }, /*#__PURE__*/ React.createElement(Select, {
369
368
  options: UnsplashColours,
370
- value: UnsplashColours.find((o)=>o.value === providerFilters.filters.color),
371
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'unsplash' ? {
369
+ value: UnsplashColours.find((o)=>o.value === filters.options.color),
370
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'unsplash' ? {
372
371
  provider: 'unsplash',
373
- filters: {
374
- ...prev.filters,
372
+ options: {
373
+ ...prev.options,
375
374
  color: opt?.value
376
375
  }
377
376
  } : prev),
@@ -380,11 +379,11 @@ export const SearchImages = (props)=>{
380
379
  placeholder: "Select color..."
381
380
  }), /*#__PURE__*/ React.createElement(Select, {
382
381
  options: UnsplashOrientation,
383
- value: UnsplashOrientation.find((o)=>o.value === providerFilters.filters.orientation),
384
- onChange: (opt)=>setProviderFilters((prev)=>prev?.provider === 'unsplash' ? {
382
+ value: UnsplashOrientation.find((o)=>o.value === filters.options.orientation),
383
+ onChange: (opt)=>setFilters((prev)=>prev?.provider === 'unsplash' ? {
385
384
  provider: 'unsplash',
386
- filters: {
387
- ...prev.filters,
385
+ options: {
386
+ ...prev.options,
388
387
  orientation: opt?.value
389
388
  }
390
389
  } : prev),
package/dist/types.d.ts CHANGED
@@ -124,13 +124,13 @@ export interface ProviderResult {
124
124
  }
125
125
  export type ProviderFilters = {
126
126
  provider: 'unsplash';
127
- filters: UnsplashFilters;
127
+ options: UnsplashFilters;
128
128
  } | {
129
129
  provider: 'pexels';
130
- filters: PexelsFilters;
130
+ options: PexelsFilters;
131
131
  } | {
132
132
  provider: 'pixabay';
133
- filters: PixabayFilters;
133
+ options: PixabayFilters;
134
134
  };
135
135
  export type ProviderOption = {
136
136
  label: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rubixstudios/payload-images",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
4
4
  "description": "A Payload CMS plugin that integrates with stock image providers including Unsplash, Pexels and Pixabay.",
5
5
  "license": "MIT",
6
6
  "author": "Rubix Studios <hello@rubixstudios.com.au> (https://rubixstudios.com.au)",
@@ -59,14 +59,14 @@
59
59
  },
60
60
  "devDependencies": {
61
61
  "@biomejs/biome": "2.3.13",
62
- "@payloadcms/ui": "^3.73.0",
62
+ "@payloadcms/ui": "^3.74.0",
63
63
  "@semantic-release/changelog": "^6.0.3",
64
64
  "@semantic-release/git": "^10.0.1",
65
65
  "@swc/cli": "^0.7.10",
66
- "@swc/core": "^1.15.10",
67
- "@types/react": "^19.2.9",
66
+ "@swc/core": "^1.15.11",
67
+ "@types/react": "^19.2.10",
68
68
  "clean-css-cli": "^5.6.3",
69
- "payload": "^3.73.0",
69
+ "payload": "^3.74.0",
70
70
  "rimraf": "^6.1.2",
71
71
  "semantic-release": "^25.0.2",
72
72
  "typescript": "5.9.3"