@stoker-platform/web-app 0.5.40 → 0.5.41

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 +9 -0
  2. package/package.json +4 -4
  3. package/src/Form.tsx +62 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @stoker-platform/web-app
2
2
 
3
+ ## 0.5.41
4
+
5
+ ### Patch Changes
6
+
7
+ - feat: add button group selector to form
8
+ - @stoker-platform/node-client@0.5.26
9
+ - @stoker-platform/utils@0.5.20
10
+ - @stoker-platform/web-client@0.5.22
11
+
3
12
  ## 0.5.40
4
13
 
5
14
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@stoker-platform/web-app",
3
- "version": "0.5.40",
3
+ "version": "0.5.41",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "scripts": {
@@ -51,9 +51,9 @@
51
51
  "@radix-ui/react-tooltip": "^1.2.8",
52
52
  "@react-google-maps/api": "^2.20.8",
53
53
  "@sentry/react": "^10.38.0",
54
- "@stoker-platform/node-client": "0.5.25",
55
- "@stoker-platform/utils": "0.5.19",
56
- "@stoker-platform/web-client": "0.5.21",
54
+ "@stoker-platform/node-client": "0.5.26",
55
+ "@stoker-platform/utils": "0.5.20",
56
+ "@stoker-platform/web-client": "0.5.22",
57
57
  "@tanstack/react-table": "^8.21.3",
58
58
  "@types/react": "18.3.13",
59
59
  "@types/react-dom": "18.3.1",
package/src/Form.tsx CHANGED
@@ -295,6 +295,7 @@ const RecordFormField = (props: FieldProps) => {
295
295
  const [isLocation, setIsLocation] = useState<LocationFieldAdmin | undefined>(undefined)
296
296
  const [isImage, setIsImage] = useState(false)
297
297
  const [isRadio, setIsRadio] = useState(false)
298
+ const [isButtonGroup, setIsButtonGroup] = useState(false)
298
299
  const [icon, setIcon] = useState<FormFieldIcon | undefined>(undefined)
299
300
 
300
301
  useEffect(() => {
@@ -315,6 +316,7 @@ const RecordFormField = (props: FieldProps) => {
315
316
  image,
316
317
  isLocation,
317
318
  isRadio,
319
+ isButtonGroup,
318
320
  icon,
319
321
  ] = await Promise.all([
320
322
  tryFunction(admin?.label),
@@ -329,6 +331,7 @@ const RecordFormField = (props: FieldProps) => {
329
331
  tryPromise(admin?.image),
330
332
  tryPromise(admin?.location),
331
333
  tryPromise(admin?.radio),
334
+ tryPromise(admin?.buttonGroup),
332
335
  tryPromise(admin?.icon),
333
336
  ])
334
337
 
@@ -346,6 +349,7 @@ const RecordFormField = (props: FieldProps) => {
346
349
  setIsImage(!!image)
347
350
  setIsLocation(isLocation)
348
351
  setIsRadio(!!isRadio)
352
+ setIsButtonGroup(!!isButtonGroup)
349
353
  setIcon(icon)
350
354
  // Prevent button and rich text editor from flickering
351
355
  setTimeout(() => {
@@ -437,6 +441,7 @@ const RecordFormField = (props: FieldProps) => {
437
441
  isTextarea={isTextarea}
438
442
  isDisabled={isDisabled}
439
443
  isRadio={isRadio}
444
+ isButtonGroup={isButtonGroup}
440
445
  isTime={isTime}
441
446
  icon={icon}
442
447
  />
@@ -529,9 +534,10 @@ function StringField({
529
534
  isTextarea,
530
535
  isDisabled,
531
536
  isRadio,
537
+ isButtonGroup,
532
538
  isTime,
533
539
  icon,
534
- }: FieldProps & { isTextarea?: boolean; isRadio?: boolean; isTime?: boolean }) {
540
+ }: FieldProps & { isTextarea?: boolean; isRadio?: boolean; isButtonGroup?: boolean; isTime?: boolean }) {
535
541
  const customization = getCollectionConfigModule(collection.labels.collection)
536
542
  const fieldCustomization = getFieldCustomization(field, customization)
537
543
  if ((field as StringFieldType).values) {
@@ -592,6 +598,61 @@ function StringField({
592
598
  />
593
599
  )
594
600
  }
601
+ if (isButtonGroup) {
602
+ return (
603
+ <FormField
604
+ control={form.control}
605
+ name={field.name}
606
+ defaultValue={
607
+ operation !== "update-many" &&
608
+ field.required &&
609
+ (form.getValues(field.name) === undefined ||
610
+ form.getValues(field.name) === null ||
611
+ form.getValues(field.name) === "")
612
+ ? (field as StringFieldType).values?.[0]
613
+ : undefined
614
+ }
615
+ render={({ field: formField }) => (
616
+ <FormItem>
617
+ <FormLabelWithIcon
618
+ collection={collection}
619
+ label={label}
620
+ field={field}
621
+ operation={operation}
622
+ icon={icon}
623
+ form={form}
624
+ />
625
+ <FormControl>
626
+ <div className="mt-2 flex flex-row gap-2 max-w-[750px] flex-wrap">
627
+ {(field as StringFieldType).values
628
+ ?.filter(
629
+ (option) =>
630
+ !fieldCustomization.admin?.filterValues ||
631
+ fieldCustomization.admin?.filterValues?.(option, collection, record),
632
+ )
633
+ .map((option) => {
634
+ return (
635
+ <Button
636
+ key={option}
637
+ type="button"
638
+ onClick={() => formField.onChange(option)}
639
+ // eslint-disable-next-line security/detect-object-injection
640
+ variant={formField.value === option ? "default" : "outline"}
641
+ className="disabled:opacity-100"
642
+ >
643
+ {option}
644
+ </Button>
645
+ )
646
+ })}
647
+ </div>
648
+ </FormControl>
649
+ {description && <FormDescription>{description}</FormDescription>}
650
+ <FormMessage className="bg-destructive p-4 rounded-md text-background dark:text-primary" />
651
+ </FormItem>
652
+ )}
653
+ />
654
+ )
655
+ }
595
656
  return (
596
657
  <FormField
597
658
  control={form.control}