@qoretechnologies/reqraft 0.10.46-pr.95.ge595a13 → 0.10.46

package/src/components/form/fields/template/TemplateField.stories.tsx

@@ -19,6 +19,7 @@ import { AutoFormField as auto } from '../auto/AutoFormField';
 import LongStringFormField from '../long-string/LongString';
 import NumberFormField from '../number/Number';
 import { StringFormField } from '../string/String';
+import { LONG_EXAMPLE_VALUE } from './__fixtures__/longExampleValue';
 import { TemplateField } from './TemplateField';
 import multiLevelTemplates from './__fixtures__/multiLevelTemplates.json';
 import templates from './__fixtures__/templates.json';
@@ -307,6 +308,158 @@ export const TemplateValue: StoryObj<typeof meta> = {
   },
 };
 
+/** REGRESSION — a rehydrated whole-token template value (the FSM state-output
+ *  `$data:{…}` form above all) must render as the picker CHIP, not as its raw
+ *  token text in a string editor. */
+export const BracedTemplateValue: StoryObj<typeof meta> = {
+  args: {
+    component: LongStringField,
+    type: 'string',
+    allowTemplates: true,
+    allowCustomValues: true,
+    value: '$data:{W2n_BuSHbaNrbvV1MkfPF.filename}',
+    templates: buildTemplates({
+      state_outputs: {
+        display_name: 'Context Data',
+        short_desc: 'Outputs of previous states',
+        app: 'GoogleDrive',
+        items: [
+          {
+            name: 'filename',
+            display_name: 'Filename',
+            short_desc: 'The uploaded file name',
+            desc: 'The uploaded file name',
+            value: '$data:{W2n_BuSHbaNrbvV1MkfPF.filename}',
+            type: 'string',
+          },
+        ],
+      },
+    } as any),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for a string field whose saved value is a braced state-output reference ($data:{id.filename}) — the field shows the resolved picker chip ("Filename"), never the raw token in a textarea, which is what rehydrated drafts degraded to before the token grammar learned braces.',
+      },
+    },
+  },
+  play: async () => {
+    await waitFor(() => {
+      const chip = Array.from(document.querySelectorAll('.reqore-button')).find((button) =>
+        button.textContent?.includes('Filename')
+      );
+      expect(chip, 'the braced value renders as the labeled picker chip').toBeTruthy();
+    });
+    const rawTextareas = Array.from(document.querySelectorAll('textarea')).filter((textarea) =>
+      textarea.value.includes('$data:{')
+    );
+    expect(rawTextareas, 'no textarea holds the raw token').toHaveLength(0);
+  },
+};
+
+/** A template-authored Qog keys its states `'1'`, `'2'`, … while each state
+ *  carries its own id, and its saved `$data:{…}` refs use that id — so the
+ *  catalogue (spelled with the key) and the value (spelled with the id) never
+ *  match as text. The producer supplies the alternate spelling as an alias so
+ *  the chip still resolves to a name instead of printing the raw token. */
+export const AliasedStateTemplateValue: StoryObj<typeof meta> = {
+  args: {
+    component: LongStringField,
+    type: 'string',
+    allowTemplates: true,
+    allowCustomValues: true,
+    // what the Qog has saved — the state's own id
+    value: '$data:{dc_ai_reply.choices}',
+    templates: {
+      items: [
+        {
+          label: 'Generate AI Reply',
+          description: 'Outputs of the Groq chat-completion state',
+          items: [
+            {
+              label: 'Choices',
+              // what the server's catalogue offers — the states-hash key
+              value: '$data:{3.choices}',
+              badge: 'list',
+              metadata: { aliasValues: ['$data:{dc_ai_reply.choices}'] },
+            },
+          ],
+        },
+      ],
+    } as any,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField holding a state-output reference spelled with the state id ($data:{dc_ai_reply.choices}) while the catalogue offers the same item spelled with the states-hash key ($data:{3.choices}) — the chip resolves through the item alias and shows "Choices", where it used to print the raw token.',
+      },
+    },
+  },
+  play: async () => {
+    await waitFor(() => {
+      const chip = Array.from(document.querySelectorAll('.reqore-button')).find((button) =>
+        button.textContent?.includes('Choices')
+      );
+      expect(chip, 'the aliased value resolves to the labeled picker chip').toBeTruthy();
+    });
+    const rawChips = Array.from(document.querySelectorAll('.reqore-button')).filter((button) =>
+      button.textContent?.includes('$data:{')
+    );
+    expect(rawChips, 'no chip prints the raw token').toHaveLength(0);
+  },
+};
+
+/** A catalogue can only offer what the action's output type declares, so it
+ *  stops at a list — `choices` is offered, `choices[0].message.content` is
+ *  hand-written past it. Such a value has no item of its own and used to
+ *  render as its raw token; it is now named after its nearest ancestor. */
+export const ExtendedPathTemplateValue: StoryObj<typeof meta> = {
+  args: {
+    component: LongStringField,
+    type: 'string',
+    allowTemplates: true,
+    allowCustomValues: true,
+    value: '$data:{dc_ai_reply.choices[0].message.content}',
+    templates: {
+      items: [
+        {
+          label: 'Generate AI Reply',
+          items: [
+            {
+              label: 'Choices',
+              value: '$data:{3.choices}',
+              badge: 'list',
+              metadata: { aliasValues: ['$data:{dc_ai_reply.choices}'] },
+            },
+          ],
+        },
+      ],
+    } as any,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField holding a path extended past the named field it starts from ($data:{dc_ai_reply.choices[0].message.content}, where the catalogue only offers "choices") — the chip is named after its nearest ancestor as "Choices[0].message.content" instead of printing the raw token.',
+      },
+    },
+  },
+  play: async () => {
+    await waitFor(() => {
+      const chip = Array.from(document.querySelectorAll('.reqore-button')).find((button) =>
+        button.textContent?.includes('Choices[0].message.content')
+      );
+      expect(chip, 'the extended path is named after its ancestor').toBeTruthy();
+    });
+    const rawChips = Array.from(document.querySelectorAll('.reqore-button')).filter((button) =>
+      button.textContent?.includes('$data:{')
+    );
+    expect(rawChips, 'no chip prints the raw token').toHaveLength(0);
+  },
+};
+
 export const ElementTypeInListShowsCorrectTemplates: StoryObj<typeof meta> = {
   args: {
     component: auto,
@@ -521,7 +674,7 @@ export const TemplateCanBeSelected: StoryObj<typeof meta> = {
     docs: {
       description: {
         story:
-          'Renders TemplateField for a string, opens the templates popover and clicks the Interface ID template — the field switches to the $local:id template value.',
+          'Renders TemplateField for a string, opens the templates popover and clicks the Interface ID template — the field switches to the $local:id template value inside the template-offering input (plain word tokens stay typeable; only braced context refs chip).',
       },
     },
   },
@@ -652,3 +805,238 @@ export const TemplateWithItemsCanBeSelected: StoryObj<typeof meta> = {
     await _testsWaitForText('Testing Hash');
   },
 };
+
+/* One group, four items covering every affordance combination:
+   - "Attachment Body"       — leaf, LONG example  → "?" (right) only
+   - "Attachment Name"       — leaf, short example → no actions at all
+   - "Message Author Props"  — hash with children, LONG example (the whole
+     object) → BOTH: the "+" select action (left) and the "?" (right)
+   - "Delivery Flags"        — hash with children, short example → "+" only
+   The sentinel at the very end proves truncation in the picker and
+   completeness in the modal. */
+const longExampleTemplates = {
+  gmail_attachment: {
+    display_name: 'New Attachment',
+    short_desc: 'Data from the attachment trigger',
+    app: 'Gmail',
+    items: [
+      {
+        name: 'attachment_body',
+        display_name: 'Attachment Body',
+        value: '$data:{on_attachment.data}',
+        type: 'data',
+        example_value: LONG_EXAMPLE_VALUE,
+      },
+      {
+        name: 'attachment_name',
+        display_name: 'Attachment Name',
+        value: '$data:{on_attachment.name}',
+        type: 'string',
+        example_value: 'invoice.pdf',
+      },
+      {
+        name: 'author',
+        display_name: 'Message Author Properties',
+        value: '$data:{on_attachment.author}',
+        type: 'hash',
+        // A parent's example is the whole object, so it goes long almost by
+        // definition — this is the "+ AND ?" case.
+        example_value: {
+          name: 'Ada Lovelace',
+          email: 'ada@example.com',
+          signature: LONG_EXAMPLE_VALUE.slice(0, 600),
+        },
+        items: [
+          {
+            name: 'author_name',
+            display_name: 'Name',
+            value: '$data:{on_attachment.author.name}',
+            type: 'string',
+            example_value: 'Ada Lovelace',
+          },
+          {
+            name: 'author_email',
+            display_name: 'Email',
+            value: '$data:{on_attachment.author.email}',
+            type: 'string',
+            example_value: 'ada@example.com',
+          },
+        ],
+      },
+      {
+        name: 'flags',
+        display_name: 'Delivery Flags',
+        value: '$data:{on_attachment.flags}',
+        type: 'hash',
+        // Small object: the serialized example stays under the preview
+        // threshold, so this parent keeps ONLY the "+" select action.
+        example_value: { read: true },
+        items: [
+          {
+            name: 'flags_read',
+            display_name: 'Read',
+            value: '$data:{on_attachment.flags.read}',
+            type: 'bool',
+            example_value: true,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const LongExampleValueTruncatedWithModal: StoryObj<typeof meta> = {
+  args: {
+    component: LongStringField,
+    value: 'Some string',
+    type: 'string',
+    templates: buildTemplates(longExampleTemplates as any),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Every item-affordance combination in one picker: a leaf with a whole-base64-file example gets a single-line ellipsized preview (cut at the popover\'s actual width — no breakpoints) and the "?" action (right) opening the full value in a modal; a hash parent whose own example object is long gets BOTH the "+" select action (left) and the "?"; a small hash parent keeps only the "+"; and a short leaf keeps its full wrapped preview with no actions. Neither previewing nor copying ever selects an item.',
+      },
+    },
+  },
+  play: async ({ args }) => {
+    await _testsOpenTemplates();
+    await _testsWaitForText('Attachment Body');
+
+    // The picker shows TRUNCATED previews — the long value's tail sentinel
+    // must not be in the popover…
+    const popover = document.querySelector('.reqore-popover-content');
+    await expect(popover.textContent).toContain('Example value: "JVBERi0x');
+    await expect(popover.textContent).not.toContain('THE_VERY_END');
+
+    // …and the affordances land exactly by shape: "?" on the long leaf AND
+    // the long-example hash parent (2), "+" on both hash parents (2) — the
+    // long-example parent carries both at once. The short leaf and the small
+    // parent's example stay modal-free.
+    await expect(popover.querySelectorAll('.reqore-menu-item-right-action').length).toBe(2);
+    await expect(popover.querySelectorAll('.reqore-menu-item-left-action').length).toBe(2);
+
+    // Long previews are single-line ellipsized at the RENDERED width
+    // (container-intrinsic — the same item adapts to any popover width);
+    // short previews keep normal wrapping.
+    const descriptions = popover.querySelectorAll('.reqore-button-description');
+    const longDescription = Array.from(descriptions).find((el) =>
+      el.textContent?.includes('JVBERi0x')
+    ) as HTMLElement;
+    const shortDescription = Array.from(descriptions).find((el) =>
+      el.textContent?.includes('invoice.pdf')
+    ) as HTMLElement;
+    await expect(getComputedStyle(longDescription).whiteSpace).toBe('nowrap');
+    await expect(longDescription.scrollWidth).toBeGreaterThan(longDescription.clientWidth);
+    await expect(getComputedStyle(shortDescription).whiteSpace).not.toBe('nowrap');
+
+    await _testsClickButton({ selector: '.reqore-menu-item-right-action' });
+
+    const modal = await waitFor(
+      () => {
+        const el = document.querySelector('.reqraft-template-example-value-modal');
+        if (!el) throw new Error('modal not open yet');
+        return el;
+      },
+      { timeout: 10000 }
+    );
+
+    // The modal holds the WHOLE value, down to the sentinel.
+    const textarea = modal.querySelector('textarea') as HTMLTextAreaElement;
+    await expect(textarea.value.endsWith('THE_VERY_END"')).toBe(true);
+
+    // Close it; opening/previewing must never have selected the item.
+    fireEvent.click(modal.querySelector('.reqore-drawer-close-button'));
+    await waitFor(
+      () => {
+        if (document.querySelector('.reqraft-template-example-value-modal')) {
+          throw new Error('modal still open');
+        }
+      },
+      { timeout: 10000 }
+    );
+    await expect(args.onChange).not.toHaveBeenCalled();
+
+    // End on the informative frame for the visual snapshot: the popover with
+    // the truncated preview and its "?" action visible (the assertions above
+    // close everything, which would leave the capture showing an empty field).
+    await _testsOpenTemplates();
+    await _testsWaitForText('Attachment Body');
+  },
+};
+
+/**
+ * An EMPTY `any` field opens on the template selector, not the type picker.
+ *
+ * An `any` field has no editor of its own until a concrete type is chosen, so it
+ * used to open on the type picker — making the author answer a question about
+ * storage ("Text or Number?") before they could say what they meant, and often a
+ * question they cannot answer, because the value they want is a reference to
+ * something else whose type is not theirs to pick.
+ *
+ * The literal is still one menu item away: "Set Custom Value" in the ⋮ menu.
+ * That is the right way round — picking a template is choosing from a list,
+ * picking a literal is a decision.
+ */
+export const EmptyAnyOpensOnTemplates: StoryObj<typeof meta> = {
+  args: {
+    component: auto,
+    type: 'any',
+    allowTemplates: true,
+    allowCustomValues: true,
+    value: undefined,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'An untyped, empty field that accepts templates opens showing the template selector rather than a data-type picker.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    await waitFor(() =>
+      expect(canvasElement.querySelector('.template-selector')).toBeTruthy()
+    );
+  },
+};
+
+/**
+ * An `any` field that ALREADY HOLDS A LITERAL opens on that literal.
+ *
+ * The other half of the same choice, and the one that keeps it safe: defaulting
+ * to the template view unconditionally would hide a value the author had already
+ * typed, which reads as the value having been lost.
+ */
+export const AnyWithLiteralOpensOnTheValue: StoryObj<typeof meta> = {
+  args: {
+    component: auto,
+    type: 'any',
+    allowTemplates: true,
+    allowCustomValues: true,
+    value: 'already-typed',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'An untyped field holding a literal keeps showing that literal — only an empty one defaults to the template selector.',
+      },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    // The property that matters is that the VALUE is still on screen. Asserting
+    // the absence of `.template-selector` would be wrong: that class is also on
+    // a control that renders either way, so it says nothing about which view is
+    // active.
+    await waitFor(() => {
+      const held = [
+        ...canvasElement.querySelectorAll<HTMLInputElement | HTMLTextAreaElement>(
+          'input, textarea'
+        ),
+      ].some((el) => el.value === 'already-typed');
+      expect(held).toBe(true);
+    });
+  },
+};

package/src/components/form/fields/template/TemplateField.tsx

@@ -30,9 +30,11 @@ import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'react-use';
 import {
   filterTemplatesByType as templatesFilterFunc,
-  findTemplate,
   getTemplateKey,
   getTemplateValue,
+  isBracedTemplateToken,
+  isCompleteTemplateToken,
+  describeTemplateReference,
   isValueTemplate,
 } from '../../../../helpers/templates';
 import { getTypeFromValue } from '../../../../helpers/validations';
@@ -72,8 +74,17 @@ export const TemplatesListProps: IReqoreDropdownProps = {
 // markup stays verbatim. `type`/`level`/`allowTemplates` are destructured
 // only to keep them off the underlying ReQore component / DOM.
 /* eslint-disable @typescript-eslint/no-unused-vars */
+// `type` is FORWARDED here, unlike the other wrappers below: the long-string
+// field consumes it to decide whether it holds one line (a `string` does, a
+// `long-string`, `hash` or `list` does not) and never spreads it to the DOM.
+// Dropping it made every string field in every FormEngine form a growing
+// textarea, so an alert rule's Internal Name took Enter.
 const LongStringField = ({ name, onChange, type, level, allowTemplates, ...rest }: any) => (
-  <LongStringFormField {...rest} onChange={(value: string) => onChange?.(name, value)} />
+  <LongStringFormField
+    {...rest}
+    type={type}
+    onChange={(value: string) => onChange?.(name, value)}
+  />
 );
 const Number = ({ name, onChange, type, level, allowTemplates, ...rest }: any) => (
   <NumberFormField {...rest} onChange={(value: number | string) => onChange?.(name, value)} />
@@ -216,8 +227,13 @@ export const TemplateDropdownSelector = memo(
     size,
     ...rest
   }: ITemplateDropdownSelectorProps) => {
-    const template = findTemplate(templates, value);
-    const label = template?.label || value || rest.label || 'Select Template';
+    // One resolver for every surface that names a reference — the picker chip
+    // here, the read-only tag, and the compact row's expression summary. The
+    // row and this editor must agree: a reference that reads as its path when
+    // the row is closed cannot read as `$data:{…}` the moment it is opened.
+    const resolved = describeTemplateReference(templates, value);
+    const template = resolved.item;
+    const label = resolved.label || rest.label || 'Select Template';
     const leftIconProps = useMemo(
       (): IReqoreButtonProps['leftIconProps'] => ({
         image: template?.metadata?.image,
@@ -304,8 +320,60 @@ export const TemplateField = memo(
     });
     const type = rest.ui_type || rest.type || rest.defaultType;
 
+    const filteredTemplates = useMemo<IReqoreFormTemplates>(():
+      | IReqoreFormTemplates
+      | undefined => {
+      if (!allowTemplates) {
+        return undefined;
+      }
+
+      let result: IReqoreFormTemplates = templates;
+
+      if (filterTemplatesByType) {
+        result = templatesFilterFunc(templates, type, !!rest.arg_schema);
+      }
+
+      if (filterTemplatesFunc) {
+        result = filterTemplatesFunc(result);
+      }
+
+      return result;
+    }, [
+      JSON.stringify(templates),
+      type,
+      allowTemplates,
+      filterTemplatesByType,
+      JSON.stringify(rest.arg_schema),
+      filterTemplatesFunc,
+    ]);
+
+    // An `any`-typed field has no editor of its own until a concrete type is
+    // chosen, so it opened on the TYPE PICKER: before an author could say what
+    // they meant, they had to answer a question about storage — "is this a Text
+    // or a Number?" — that they often cannot answer, because the value they
+    // want is a reference to something else whose type is not theirs to pick.
+    //
+    // So an untyped field that accepts templates now opens on the template
+    // selector, which is the answer most of them want, and "Set Custom Value"
+    // in the ⋮ menu is the way to a literal of a chosen type. That is the
+    // reverse of the old default, and it is the right way round: choosing a
+    // template is picking from a list, choosing a literal is a decision.
+    //
+    // Only while the field is EMPTY. A field already holding a literal must
+    // open showing that literal — flipping to the template view would hide a
+    // value the author put there and make it look lost.
+    // ...and only when there is actually something to pick. A field with no
+    // templates on offer would otherwise open on an EMPTY picker, which is a
+    // worse place to start than the type picker it replaced.
+    const typeIsAnyLike = type === 'any' || type === 'auto';
+    const isEmptyValue = value === undefined || value === null || value === '';
+    const hasTemplatesOnOffer = !!size(filteredTemplates?.items);
     const [isTemplate, setIsTemplate] = useState<boolean>(
-      (isDefaultTemplate || isValueTemplate(value) || !allowCustomValues) && allowTemplates
+      (isDefaultTemplate ||
+        isValueTemplate(value) ||
+        !allowCustomValues ||
+        (typeIsAnyLike && isEmptyValue && hasTemplatesOnOffer)) &&
+        allowTemplates
     );
     const [internalIsFunction, setInternalIsFunction] = useState<boolean>(
       !!isDefaultFunction && !!allowFunctions
@@ -335,8 +403,15 @@ export const TemplateField = memo(
 
     useEffect(() => {
       if (!isTemplate && isValueTemplate(value) && allowTemplates) {
-        // Do not set the template value if the value is a string in auto mode
-        if (type === 'auto' && getTypeFromValue(value) === 'string') {
+        // In auto mode, leave user-typed dollar-strings alone ('$foo: hello'
+        // passes the loose check) — but a string that IS one well-formed token
+        // ($data:{…}, $config:item) must still flip into template mode, or an
+        // arg whose value hydrates after mount is stuck rendering raw text.
+        if (
+          type === 'auto' &&
+          getTypeFromValue(value) === 'string' &&
+          !isCompleteTemplateToken(value)
+        ) {
           return;
         }
 
@@ -359,6 +434,15 @@ export const TemplateField = memo(
 
     const showTemplateToggle = allowCustomValues && allowTemplates && !rest.arg_schema;
 
+    // Only a BRACED context ref (`$data:{…}` — machine-written, nobody types
+    // one) renders as the picker chip (named via `resolveTemplateLabel`)
+    // rather than as its raw text in a string editor. Plain word-path tokens
+    // (`$local:id`) are typeable, so per the build #123 review they keep the
+    // input that offers templates while typing. Mixed text-and-token strings
+    // keep the string editor too; the chip-in-editor treatment arrives with
+    // the rich-text string mode.
+    const templateValueIsBracedToken = isBracedTemplateToken(templateValue);
+
     const templateSupportsCustomValues =
       allowCustomValues && type === 'string' && !hasOnlyAllowedValues;
     const showTemplatesDropdown =
@@ -374,34 +458,13 @@ export const TemplateField = memo(
       showTemplatesDropdown;
 
     const Component = componentFromType ? ComponentMap[type] : Comp;
+    // Only a ComponentMap component gets `type`: it is ours and CONSUMES the
+    // prop (the long-string field needs it to know whether it holds one line)
+    // rather than spreading it onto the DOM. A caller-supplied `Comp` is someone
+    // else's, which is why `type` was kept off this call in the first place.
+    const componentTypeProp = componentFromType ? { type } : {};
     const fieldAriaLabel = rest['aria-label'] ?? label ?? rest.display_name ?? name;
 
-    const filteredTemplates = useMemo<IReqoreFormTemplates>(():
-      | IReqoreFormTemplates
-      | undefined => {
-      if (!allowTemplates) {
-        return undefined;
-      }
-
-      let result: IReqoreFormTemplates = templates;
-
-      if (filterTemplatesByType) {
-        result = templatesFilterFunc(templates, type, !!rest.arg_schema);
-      }
-
-      if (filterTemplatesFunc) {
-        result = filterTemplatesFunc(result);
-      }
-
-      return result;
-    }, [
-      JSON.stringify(templates),
-      type,
-      allowTemplates,
-      filterTemplatesByType,
-      JSON.stringify(rest.arg_schema),
-      filterTemplatesFunc,
-    ]);
 
     const handleTemplateFieldChange = useCallback(
       (_name: string, val: string) => {
@@ -746,13 +809,14 @@ export const TemplateField = memo(
             name={name}
             level={level}
             {...rest}
+            {...componentTypeProp}
             aria-label={fieldAriaLabel}
             className={`${className} template-selector`}
             templates={componentTemplates}
           />
         ) : null}
 
-        {isTemplate && templateSupportsCustomValues ? (
+        {isTemplate && templateSupportsCustomValues && !templateValueIsBracedToken ? (
           <LongStringField
             className='template-selector'
             type='string'
@@ -769,7 +833,8 @@ export const TemplateField = memo(
           />
         ) : null}
 
-        {showTemplatesDropdown ? (
+        {showTemplatesDropdown ||
+        (isTemplate && templateSupportsCustomValues && templateValueIsBracedToken) ? (
           <TemplateDropdownSelector
             allowCustomValues={allowCustomValues}
             templates={templates}

package/src/components/form/fields/template/__fixtures__/longExampleValue.ts

@@ -0,0 +1,7 @@
+/* A deterministic "whole base64 file" example value — the payload class the
+   example-value modal exists for (an email attachment body). No spaces on
+   purpose: the unbroken run is what breaks naive rendering. The sentinel
+   proves a consumer holds the value to the very end. */
+export const LONG_EXAMPLE_VALUE = `${'JVBERi0xLjcKJcTl8uXrp9Og0MTGCjQgMCBvYmoKPDwvRmlsdGVyL0ZsYXRlRGVjb2RlCg=='.repeat(
+  90
+)}THE_VERY_END`;

package/src/components/form/index.tsx

@@ -21,6 +21,7 @@ export * from './fields/rich-text/RichText';
 export * from './fields/select/Select';
 export * from './fields/select/SelectCollection';
 export * from './fields/string/String';
+export * from './fields/template/ExampleValueModal';
 export * from './fields/template/TemplateField';
 export * from './engine/FormEngine';
 export * from './engine/optionActions';