feat: add toggle for "Use Entity Field" vs "Use Constant Value" (#70)

toggle only available on valid types still. "type.string" and
"type.phone"


now using radio


https://github.com/user-attachments/assets/f88fe607-daa6-41f6-8536-3a7abcfd0851

---------

Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>

THIRD-PARTY-NOTICES

@@ -8684,18 +8684,23 @@ The following npm packages may be included in this product:
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
+ - @radix-ui/[email protected]
  - @radix-ui/[email protected]
- - @radix-ui/[email protected].0
+ - @radix-ui/[email protected].1
  - @radix-ui/[email protected]
+ - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
+ - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
+ - @radix-ui/[email protected]
+ - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]
  - @radix-ui/[email protected]

package.json

@@ -38,7 +38,9 @@
   "dependencies": {
     "@measured/puck": "0.16.0",
     "@radix-ui/react-alert-dialog": "^1.1.1",
+    "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",

src/components/YextEntityFieldSelector.tsx

@@ -6,6 +6,8 @@ import {
   getFilteredEntityFields,
   RenderEntityFieldFilter,
 } from "../internal/utils/getFilteredEntityFields.ts";
+import { RadioGroup, RadioGroupItem } from "../internal/puck/ui/radio.tsx";
+import { Label } from "../internal/puck/ui/label.tsx";
 
 export type YextEntityField = {
   field: string;
@@ -42,33 +44,51 @@ export const YextEntityFieldSelector = <T extends Record<string, any>>(
     label: props.label,
     render: ({ field, value, onChange }: RenderProps) => {
       const filteredEntityFields = getFilteredEntityFields(props.filter);
+      const toggleConstantValueEnabled = (constantValueEnabled: boolean) => {
+        onChange({
+          field: value?.field ?? "",
+          constantValue: value?.constantValue ?? "",
+          constantValueEnabled: constantValueEnabled,
+        });
+      };
 
       return (
         <>
-          <FieldLabel label={field.label || "Label is undefined"}>
-            <AutoField
-              field={{
-                type: "select",
-                options: [
-                  { value: "", label: "Select a Content field" },
-                  ...filteredEntityFields.map((entityFieldNameToSchema) => {
-                    return {
-                      label: entityFieldNameToSchema.name,
-                      value: entityFieldNameToSchema.name,
-                    };
-                  }),
-                ],
-              }}
-              onChange={(selectedEntityField) => {
-                onChange({
-                  field: selectedEntityField,
-                  constantValue: value?.constantValue ?? "",
-                });
-              }}
-              value={value?.field}
-            />
-          </FieldLabel>
           {shouldDisplayConstantValueField(props.filter.types) && (
+            <ToggleMode
+              constantValueEnabled={value?.constantValueEnabled}
+              toggleConstantValueEnabled={toggleConstantValueEnabled}
+            />
+          )}
+          {!value?.constantValueEnabled ? (
+            <FieldLabel
+              label={field.label || "Label is undefined"}
+              className="ve-mt-2.5"
+            >
+              <AutoField
+                field={{
+                  type: "select",
+                  options: [
+                    { value: "", label: "Select a Content field" },
+                    ...filteredEntityFields.map((entityFieldNameToSchema) => {
+                      return {
+                        label: entityFieldNameToSchema.name,
+                        value: entityFieldNameToSchema.name,
+                      };
+                    }),
+                  ],
+                }}
+                onChange={(selectedEntityField) => {
+                  onChange({
+                    field: selectedEntityField,
+                    constantValue: value?.constantValue ?? "",
+                    constantValueEnabled: false,
+                  });
+                }}
+                value={value?.field}
+              />
+            </FieldLabel>
+          ) : (
             <FieldLabel
               label={"Constant Value"}
               className="entityField-constantValue"
@@ -78,6 +98,7 @@ export const YextEntityFieldSelector = <T extends Record<string, any>>(
                   onChange({
                     field: value?.field ?? "",
                     constantValue: newConstantValue,
+                    constantValueEnabled: true,
                   })
                 }
                 value={value?.constantValue}
@@ -92,3 +113,34 @@ export const YextEntityFieldSelector = <T extends Record<string, any>>(
     },
   };
 };
+
+const ToggleMode = ({
+  constantValueEnabled,
+  toggleConstantValueEnabled,
+}: {
+  constantValueEnabled: boolean;
+  toggleConstantValueEnabled: (constantValueEnabled: boolean) => void;
+}) => {
+  return (
+    <div className="ve-mb-2 ve-w-full">
+      <RadioGroup defaultValue={constantValueEnabled?.toString() ?? "false"}>
+        <div className="ve-flex ve-items-center ve-space-x-2">
+          <RadioGroupItem
+            value="false"
+            id="ve-use-entity-value"
+            onClick={() => toggleConstantValueEnabled(false)}
+          />
+          <Label htmlFor="ve-use-entity-value">Use Entity Value</Label>
+        </div>
+        <div className="ve-flex ve-items-center ve-space-x-2">
+          <RadioGroupItem
+            value="true"
+            id="ve-use-constant-value"
+            onClick={() => toggleConstantValueEnabled(true)}
+          />
+          <Label htmlFor="ve-use-constant-value">Use Constant Value</Label>
+        </div>
+      </RadioGroup>
+    </div>
+  );
+};

src/internal/puck/ui/label.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utils/cn.ts";
+
+const labelVariants = cva(
+  "ve-text-sm ve-font-medium ve-leading-none peer-disabled:ve-cursor-not-allowed peer-disabled:ve-opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };