@stoker-platform/web-app 0.5.50 → 0.5.52

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 (3) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/package.json +13 -13
  3. package/src/Images.tsx +62 -25
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @stoker-platform/web-app
2
2
 
3
+ ## 0.5.52
4
+
5
+ ### Patch Changes
6
+
7
+ - feat: add new lg image size
8
+ - @stoker-platform/node-client@0.5.34
9
+ - @stoker-platform/utils@0.5.28
10
+ - @stoker-platform/web-client@0.5.30
11
+
12
+ ## 0.5.51
13
+
14
+ ### Patch Changes
15
+
16
+ - chore: update dependencies
17
+ - Updated dependencies
18
+ - @stoker-platform/node-client@0.5.33
19
+ - @stoker-platform/utils@0.5.27
20
+ - @stoker-platform/web-client@0.5.29
21
+
3
22
  ## 0.5.50
4
23
 
5
24
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stoker-platform/web-app",
3
- "version": "0.5.50",
3
+ "version": "0.5.52",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "scripts": {
@@ -50,22 +50,22 @@
50
50
  "@radix-ui/react-toggle-group": "^1.1.11",
51
51
  "@radix-ui/react-tooltip": "^1.2.8",
52
52
  "@react-google-maps/api": "^2.20.8",
53
- "@sentry/react": "^10.38.0",
54
- "@stoker-platform/node-client": "0.5.32",
55
- "@stoker-platform/utils": "0.5.26",
56
- "@stoker-platform/web-client": "0.5.28",
53
+ "@sentry/react": "^10.43.0",
54
+ "@stoker-platform/node-client": "0.5.34",
55
+ "@stoker-platform/utils": "0.5.28",
56
+ "@stoker-platform/web-client": "0.5.30",
57
57
  "@tanstack/react-table": "^8.21.3",
58
58
  "@types/react": "18.3.13",
59
59
  "@types/react-dom": "18.3.1",
60
- "@vitejs/plugin-react": "^5.1.3",
60
+ "@vitejs/plugin-react": "^5.2.0",
61
61
  "ai": "^5.0.44",
62
- "algoliasearch": "^5.48.0",
62
+ "algoliasearch": "^5.49.2",
63
63
  "class-variance-authority": "^0.7.1",
64
64
  "clsx": "^2.1.1",
65
65
  "cmdk": "^1.1.1",
66
66
  "date-fns": "^3.6.0",
67
- "firebase": "^12.9.0",
68
- "lucide-react": "^0.563.0",
67
+ "firebase": "^12.10.0",
68
+ "lucide-react": "^0.577.0",
69
69
  "minisearch": "^7.2.0",
70
70
  "moment-timezone": "latest",
71
71
  "qrcode.react": "^4.2.0",
@@ -77,9 +77,9 @@
77
77
  "react-dnd-html5-backend": "^16.0.1",
78
78
  "react-dom": "18.3.1",
79
79
  "react-helmet": "^6.1.0",
80
- "react-hook-form": "^7.71.1",
80
+ "react-hook-form": "^7.71.2",
81
81
  "react-resizable-panels": "^3.0.6",
82
- "react-router": "^7.13.0",
82
+ "react-router": "^7.13.1",
83
83
  "react-window": "^1.8.11",
84
84
  "react-window-infinite-loader": "^1.0.10",
85
85
  "recharts": "^2.15.4",
@@ -103,8 +103,8 @@
103
103
  "@types/react-window": "^1.8.8",
104
104
  "@types/react-window-infinite-loader": "^1.0.9",
105
105
  "@vite-pwa/assets-generator": "^1.0.2",
106
- "autoprefixer": "^10.4.24",
107
- "postcss": "^8.5.6",
106
+ "autoprefixer": "^10.4.27",
107
+ "postcss": "^8.5.8",
108
108
  "tailwindcss": "^3.4.19",
109
109
  "vite-plugin-pwa": "^1.2.0"
110
110
  },
package/src/Images.tsx CHANGED
@@ -17,7 +17,7 @@ import {
17
17
  onStokerPermissionsChange,
18
18
  subscribeOne,
19
19
  } from "@stoker-platform/web-client"
20
- import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
20
+ import { createElement, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
21
21
  import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card"
22
22
  import { useGoToRecord } from "./utils/goToRecord"
23
23
  import { LoadingSpinner } from "./components/ui/loading-spinner"
@@ -228,30 +228,57 @@ const Row = ({ index, style, data }: RowProps) => {
228
228
  </button>
229
229
  </CardHeader>
230
230
  <CardContent className="pb-3 md:pb-4">
231
- <div className={cn("grid", "gap-4", size)}>
232
- {isAssigning && assignable && (assignable.isAvailable(record) || checked) && (
233
- <div>
234
- <div className="flex items-center justify-center space-x-3 min-h-8">
235
- <Switch
236
- id={`${record.id}-assigned`}
237
- className="data-[state=checked]:bg-blue-500"
238
- checked={checked}
239
- disabled={checkedDisabled}
240
- onCheckedChange={(checked) => handleCheckedChange(checked, record)}
241
- />
242
- {imagesConfig.size !== "sm" && (
243
- <Label htmlFor={`${record.id}-assigned`}>Assigned</Label>
244
- )}
245
- </div>
231
+ {imagesConfig.customComponent &&
232
+ (!imagesConfig.customComponent.condition ||
233
+ imagesConfig.customComponent.condition(
234
+ relationCollection,
235
+ relationParent,
236
+ isAssigning,
237
+ )) && (
238
+ <div
239
+ className={cn(
240
+ `h-[${imagesConfig.customComponent.height}px]`,
241
+ "overflow-hidden",
242
+ )}
243
+ >
244
+ {createElement(imagesConfig.customComponent.component, {
245
+ record,
246
+ parentRecord: relationParent,
247
+ collection,
248
+ parentCollection: relationCollection,
249
+ isAssigning,
250
+ components: import.meta.glob("./components/ui/*.tsx", {
251
+ eager: true,
252
+ }),
253
+ hooks: import.meta.glob("./hooks/*.{ts,tsx}", { eager: true }),
254
+ utils: import.meta.glob("./lib/*.{ts,tsx}", { eager: true }),
255
+ })}
246
256
  </div>
247
257
  )}
248
- {isAssigning && assignable && !assignable.isAvailable(record) && !checked && (
249
- <div>
250
- <div className="flex items-center justify-center space-x-3 min-h-8">
251
- {unavailable}
252
- </div>
258
+ {isAssigning && assignable && (assignable.isAvailable(record) || checked) && (
259
+ <div className="pb-4">
260
+ <div className="flex items-center justify-center space-x-3 min-h-8">
261
+ <Switch
262
+ id={`${record.id}-assigned`}
263
+ className="data-[state=checked]:bg-blue-500"
264
+ checked={checked}
265
+ disabled={checkedDisabled}
266
+ onCheckedChange={(checked) => handleCheckedChange(checked, record)}
267
+ />
268
+ {imagesConfig.size !== "sm" && (
269
+ <Label htmlFor={`${record.id}-assigned`}>Assigned</Label>
270
+ )}
253
271
  </div>
254
- )}
272
+ </div>
273
+ )}
274
+ {isAssigning && assignable && !assignable.isAvailable(record) && !checked && (
275
+ <div className="pb-4">
276
+ <div className="flex items-center justify-center space-x-3 min-h-8">
277
+ {unavailable}
278
+ </div>
279
+ </div>
280
+ )}
281
+ <div className={cn("grid", "gap-4", size)}>
255
282
  <button
256
283
  className="relative w-full h-full flex items-center justify-center overflow-hidden"
257
284
  onClick={() => goToRecord(collection, record)}
@@ -560,6 +587,10 @@ export const Images = memo(
560
587
  cols: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5",
561
588
  },
562
589
  lg: {
590
+ size: "h-[275px] md:h-[200px] lg:h-[250px] xl:h-[300px]",
591
+ cols: "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3",
592
+ },
593
+ xl: {
563
594
  size: "h-[275px] md:h-[300px] lg:h-[400px] xl:h-[450px]",
564
595
  cols: "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2",
565
596
  },
@@ -722,7 +753,13 @@ export const Images = memo(
722
753
 
723
754
  const lineClamp = imagesConfig.maxHeaderLines === 2 ? "line-clamp-2" : "line-clamp-1"
724
755
  const headerSize = imagesConfig.maxHeaderLines === 2 ? 116 : 82
725
- const assignedHeight = isAssigning ? 40 : 0
756
+ const assignedHeight = isAssigning ? 56 : 0
757
+ const customComponentHeight =
758
+ imagesConfig.customComponent &&
759
+ (!imagesConfig.customComponent.condition ||
760
+ imagesConfig.customComponent.condition(relationCollection, relationParent, isAssigning))
761
+ ? imagesConfig.customComponent.height
762
+ : 0
726
763
 
727
764
  const itemData = {
728
765
  collection,
@@ -768,7 +805,7 @@ export const Images = memo(
768
805
  <List
769
806
  height={height}
770
807
  width="100%"
771
- itemSize={itemSize + headerSize + assignedHeight}
808
+ itemSize={itemSize + headerSize + assignedHeight + customComponentHeight}
772
809
  itemCount={itemCount}
773
810
  overscanCount={5}
774
811
  itemKey={itemKey}
@@ -793,7 +830,7 @@ export const Images = memo(
793
830
  <List
794
831
  height={height}
795
832
  width="100%"
796
- itemSize={itemSize + headerSize + assignedHeight}
833
+ itemSize={itemSize + headerSize + assignedHeight + customComponentHeight}
797
834
  itemCount={itemCount}
798
835
  overscanCount={5}
799
836
  itemKey={itemKey}