@qoretechnologies/reqraft 0.10.31-pr.92.g2abe73e → 0.10.31-pr.92.g5ac2ac2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.10.31-pr.92.g2abe73e",
+  "version": "0.10.31-pr.92.g5ac2ac2",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/form/engine/FormEngine.stories.tsx

@@ -22,6 +22,7 @@ import {
 import { startDpqlMockLsp } from '../expressions/dpqlMockLsp';
 import { mockExpressions } from '../expressions/mockExpressions';
 import { mockPopulatedDefinition } from '../fields/schema-definition/mockDefinition';
+import { defaultMarkdownRenderer } from '../fields/markdown/MarkdownView';
 import {
   FormEngine,
   IFormEngineGroup,
@@ -322,7 +323,7 @@ export const DescriptionIsShown: Story = {
     docs: {
       description: {
         story:
-          'Renders the Basic FormEngine and clicks the Option with description label — the help panel opens with the option\'s long-form description.',
+          "Renders the Basic FormEngine and clicks the Option with description label — the help panel opens with the option's long-form description.",
       },
     },
   },
@@ -442,7 +443,7 @@ export const WithRequiredGroups: Story = {
     docs: {
       description: {
         story:
-          'Renders FormEngine with five options that all belong to one required_groups group — every row mounts and the group\'s one-of-required indicator is shown.',
+          "Renders FormEngine with five options that all belong to one required_groups group — every row mounts and the group's one-of-required indicator is shown.",
       },
     },
   },
@@ -462,7 +463,7 @@ export const WithRequiredGroupsFulfilled: Story = {
     docs: {
       description: {
         story:
-          'Renders the required-group schema with one of the group\'s options already filled — the group\'s one-of-required indicator marks the group as satisfied.',
+          "Renders the required-group schema with one of the group's options already filled — the group's one-of-required indicator marks the group as satisfied.",
       },
     },
   },
@@ -698,7 +699,7 @@ export const OptionsWithOnChangeTriggerEvents: Story = {
     docs: {
       description: {
         story:
-          'Renders FormEngine with an option that declares on_change: [\'refetch\']. Editing the field fires onChange with meta.events set to [\'refetch\'] so the host can re-fetch dependent options.',
+          "Renders FormEngine with an option that declares on_change: ['refetch']. Editing the field fires onChange with meta.events set to ['refetch'] so the host can re-fetch dependent options.",
       },
     },
   },
@@ -790,7 +791,7 @@ export const OptionInheritsRenderPropFromSibling: Story = {
     docs: {
       description: {
         story:
-          'Renders FormEngine with a code-editor field that declares inherit_props: { language: \'lang\' } — the sibling language picker feeds the editor\'s language prop at render time, and flipping the picker live-updates the syntax without any refetch.',
+          "Renders FormEngine with a code-editor field that declares inherit_props: { language: 'lang' } — the sibling language picker feeds the editor's language prop at render time, and flipping the picker live-updates the syntax without any refetch.",
       },
     },
   },
@@ -827,8 +828,7 @@ export const OptionInheritsRenderPropFromSibling: Story = {
 
     // Initial state: lang = "qore" → editor renderer receives language="qore"
     await waitFor(
-      () =>
-        expect(canvas.getByTestId('code-editor-language')).toHaveTextContent('syntax: qore'),
+      () => expect(canvas.getByTestId('code-editor-language')).toHaveTextContent('syntax: qore'),
       { timeout: 5000 }
     );
 
@@ -844,8 +844,7 @@ export const OptionInheritsRenderPropFromSibling: Story = {
     await userEvent.click(pythonItem);
 
     await waitFor(
-      () =>
-        expect(canvas.getByTestId('code-editor-language')).toHaveTextContent('syntax: python'),
+      () => expect(canvas.getByTestId('code-editor-language')).toHaveTextContent('syntax: python'),
       { timeout: 5000 }
     );
   },
@@ -900,10 +899,9 @@ export const OptionInheritsRenderPropFromSiblingCompact: Story = {
     // schema arrives intact + the source-code row is present. The full
     // interaction (lang flip -> language prop updates) is covered by the
     // classic `OptionInheritsRenderPropFromSibling` story.
-    await waitFor(
-      () => expect(canvas.getAllByText('Source Code').length).toBeGreaterThan(0),
-      { timeout: 5000 }
-    );
+    await waitFor(() => expect(canvas.getAllByText('Source Code').length).toBeGreaterThan(0), {
+      timeout: 5000,
+    });
   },
 };
 
@@ -987,13 +985,19 @@ export const CompactRowMarkdownPreview: Story = {
     docs: {
       description: {
         story:
-          "Renders compact-mode markdown rows over a service description — the multi-line row summarises its value as prose (no `##`, no `**`) with a line-count tag and mounts the rendered document under the row, while the one-line row keeps its single rendered line and no preview.",
+          'Renders compact-mode markdown rows over a service description, with a host markdown renderer supplied — the multi-line row summarises its value as prose (no `##`, no `**`) with a line-count tag and mounts the rendered document under the row, while the one-line row keeps its single rendered line and no preview.',
       },
     },
   },
   args: {
     compact: true,
     minColumnWidth: '360px',
+    // The row inset draws through the HOST's renderer and has no built-in
+    // fallback: a form that picks its own markdown dialect renders the same
+    // description differently from the page it belongs to, which is the whole
+    // problem this seam exists to avoid. `defaultMarkdownRenderer` is reqraft's
+    // own view, supplied here the way a host supplies its own.
+    markdownRenderer: defaultMarkdownRenderer,
     value: {
       desc: {
         type: 'string',
@@ -1066,7 +1070,7 @@ export const NestedOptionInheritsRenderPropFromAncestor: Story = {
     docs: {
       description: {
         story:
-          'Renders FormEngine with a list-of-hash methods option whose row sub-schema declares inherit_props: { language: \'language\' } — the parent-level forwarding threads the top-level language down to every row\'s code-editor body sub-field.',
+          "Renders FormEngine with a list-of-hash methods option whose row sub-schema declares inherit_props: { language: 'language' } — the parent-level forwarding threads the top-level language down to every row's code-editor body sub-field.",
       },
     },
   },
@@ -1154,7 +1158,7 @@ export const NestedOptionInheritsRenderPropFromAncestorCompact: Story = {
     docs: {
       description: {
         story:
-          'Renders the NestedOptionInheritsRenderPropFromAncestor schema with compact=true — the compact renderer summarises the list-of-hash rows as \'init, run\' rather than [object Object].',
+          "Renders the NestedOptionInheritsRenderPropFromAncestor schema with compact=true — the compact renderer summarises the list-of-hash rows as 'init, run' rather than [object Object].",
       },
     },
   },
@@ -1216,14 +1220,14 @@ export const NestedOptionInheritsRenderPropFromAncestorCompact: Story = {
     // already exercise), assert on the STRUCTURAL element: the schema
     // arrived intact through `inheritedFromParent` and the row-level
     // options include the body field wired to the code-editor override.
-    await waitFor(
-      () => expect(canvas.getAllByText('Methods').length).toBeGreaterThan(0),
-      { timeout: 5000 }
-    );
+    await waitFor(() => expect(canvas.getAllByText('Methods').length).toBeGreaterThan(0), {
+      timeout: 5000,
+    });
     // The list-of-hashes value summarises by the items' names — never a raw
     // "[object Object]" (regression: it used to stringify each hash envelope).
-    await expect(await canvas.findByText('init, run', undefined, { timeout: 5000 }))
-      .toBeInTheDocument();
+    await expect(
+      await canvas.findByText('init, run', undefined, { timeout: 5000 })
+    ).toBeInTheDocument();
     await expect(canvasElement.textContent ?? '').not.toContain('[object Object]');
   },
 };
@@ -1242,7 +1246,7 @@ export const CompactNestedListRowsStayCompact: Story = {
     docs: {
       description: {
         story:
-          'Expands a list-of-hash option inside a compact form — each row\'s arg_schema sub-form renders as compact read-first rows, matching the parent, instead of falling back to the classic stacked-label form.',
+          "Expands a list-of-hash option inside a compact form — each row's arg_schema sub-form renders as compact read-first rows, matching the parent, instead of falling back to the classic stacked-label form.",
       },
     },
   },
@@ -1324,7 +1328,7 @@ export const CompactNestedListRowsStayCompactMobile: Story = {
     docs: {
       description: {
         story:
-          'Renders the expanded list-of-hash rows at a ~360px mobile viewport — each row\'s compact sub-form stacks into a single column rather than overflowing.',
+          "Renders the expanded list-of-hash rows at a ~360px mobile viewport — each row's compact sub-form stacks into a single column rather than overflowing.",
       },
     },
   },
@@ -1364,7 +1368,7 @@ export const DependantsResetWhenParentChanges: Story = {
     docs: {
       description: {
         story:
-          'Renders FormEngine with two dependent options plus two has-dependents parents. Changing the parent\'s value clears every dependent\'s value while leaving the unrelated sibling untouched.',
+          "Renders FormEngine with two dependent options plus two has-dependents parents. Changing the parent's value clears every dependent's value while leaving the unrelated sibling untouched.",
       },
     },
   },
@@ -1956,7 +1960,7 @@ export const CompactEditingShowsDescription: Story = {
     docs: {
       description: {
         story:
-          "Renders the compact form with the descriptions toggle off — a collapsed row hides its short description, and opening the row for editing reveals it under the field name along with the `?` help affordance.",
+          'Renders the compact form with the descriptions toggle off — a collapsed row hides its short description, and opening the row for editing reveals it under the field name along with the `?` help affordance.',
       },
     },
   },
@@ -2069,7 +2073,7 @@ export const CompactBasic: Story = {
     docs: {
       description: {
         story:
-          'Renders FormEngine in compact mode over the full Basic fixture — every value renders in its read-first form (templates by name, colours as hex, hashes as field-count summaries), disabled and dependency-locked rows stay non-interactive, and the dependency lock\'s popover navigates to blockers.',
+          "Renders FormEngine in compact mode over the full Basic fixture — every value renders in its read-first form (templates by name, colours as hex, hashes as field-count summaries), disabled and dependency-locked rows stay non-interactive, and the dependency lock's popover navigates to blockers.",
       },
     },
     chromatic: { disable: true },
@@ -2413,7 +2417,7 @@ export const CompactBatchedCommit: Story = {
     docs: {
       description: {
         story:
-          'Renders a valid form in commitMode=\'batched\'. Staging an edit adds the Draft chip and \'unsaved changes\' bar without committing; Save fires onCommit and clears the chips; Discard reverts the staged edit.',
+          "Renders a valid form in commitMode='batched'. Staging an edit adds the Draft chip and 'unsaved changes' bar without committing; Save fires onCommit and clears the chips; Discard reverts the staged edit.",
       },
     },
     chromatic: { disable: true },
@@ -2487,7 +2491,7 @@ export const CompactBatchedCommitInvalid: Story = {
     docs: {
       description: {
         story:
-          'Renders an invalid form in commitMode=\'batched\' — staging an edit shows the unsaved-changes bar but Save is disabled and onCommit never fires.',
+          "Renders an invalid form in commitMode='batched' — staging an edit shows the unsaved-changes bar but Save is disabled and onCommit never fires.",
       },
     },
   },
@@ -2861,7 +2865,7 @@ export const CompactPanelChangeScroll: Story = {
     docs: {
       description: {
         story:
-          'Renders a compact form inside a scrollable panel — opening a row keeps the panel\'s scroll position pinned rather than jumping to the top.',
+          "Renders a compact form inside a scrollable panel — opening a row keeps the panel's scroll position pinned rather than jumping to the top.",
       },
     },
     chromatic: { disable: true },
@@ -2907,9 +2911,9 @@ export const CompactPanelChangeScroll: Story = {
     // …and flashed, signalling the engine located/scrolled to its new panel.
     await waitFor(
       () =>
-        expect(
-          document.querySelector('.readfirst-row[data-field="opt"]')?.className
-        ).toContain('readfirst-row-flash'),
+        expect(document.querySelector('.readfirst-row[data-field="opt"]')?.className).toContain(
+          'readfirst-row-flash'
+        ),
       { timeout: 4000 }
     );
   },
@@ -3011,10 +3015,9 @@ export const CompactFieldsMenu: Story = {
     // Only Notes is expanded, so the single More (⋮) menu in the DOM is its own.
     // (ReqoreDropdown's trigger isn't a DOM descendant of the row, so don't scope
     // the selector to [data-field].)
-    await waitFor(
-      () => expect(document.querySelector('.options-readfirst-more')).toBeTruthy(),
-      { timeout: 10000 }
-    );
+    await waitFor(() => expect(document.querySelector('.options-readfirst-more')).toBeTruthy(), {
+      timeout: 10000,
+    });
     await _testsClickButton({ selector: '.options-readfirst-more' });
     let removeItem: Element | undefined;
     await waitFor(
@@ -3099,10 +3102,7 @@ export const CompactDescriptionsToggle: Story = {
     // Collapse back to the read row (Done) before toggling descriptions off.
     await _testsClickButton({ selector: '[data-field="host"] .options-readfirst-done' });
     await waitFor(
-      () =>
-        expect(
-          document.querySelector('.readfirst-row-editing[data-field="host"]')
-        ).toBeFalsy(),
+      () => expect(document.querySelector('.readfirst-row-editing[data-field="host"]')).toBeFalsy(),
       { timeout: 10000 }
     );
 
@@ -3803,7 +3803,7 @@ export const CompactSingleExpand: Story = {
     docs: {
       description: {
         story:
-          'Renders a compact form with expandMode=\'single\' — opening one row automatically collapses whichever row was open before.',
+          "Renders a compact form with expandMode='single' — opening one row automatically collapses whichever row was open before.",
       },
     },
     chromatic: { disable: true },
@@ -3837,7 +3837,7 @@ export const CompactMultiExpand: Story = {
     docs: {
       description: {
         story:
-          'Renders a compact form with expandMode=\'multi\' — every opened row stays open until it is explicitly done, so several editors can be on screen at once.',
+          "Renders a compact form with expandMode='multi' — every opened row stays open until it is explicitly done, so several editors can be on screen at once.",
       },
     },
     chromatic: { disable: true },
@@ -4456,9 +4456,7 @@ export const CompactFieldTypesEditing: Story = {
       },
       { timeout: 10000 }
     );
-    await userEvent.click(
-      within(confirmationModal!).getByRole('button', { name: 'Clear value' })
-    );
+    await userEvent.click(within(confirmationModal!).getByRole('button', { name: 'Clear value' }));
     await waitFor(() => {
       expect(editRow('enabled').querySelector('.options-readfirst-clear')).not.toBeInTheDocument();
       expect(editRow('enabled').querySelector('.options-readfirst-revert')).toBeInTheDocument();
@@ -4475,7 +4473,7 @@ export const CompactRequiredGroups: Story = {
     docs: {
       description: {
         story:
-          'Renders a compact form whose options belong to required_groups — the group\'s one-of-required indicator appears in the row rail and clears once any member is filled.',
+          "Renders a compact form whose options belong to required_groups — the group's one-of-required indicator appears in the row rail and clears once any member is filled.",
       },
     },
   },
@@ -4891,7 +4889,7 @@ export const CompactNonExistentFiltered: Story = {
     docs: {
       description: {
         story:
-          'Renders a compact form with a value carrying an extra field that isn\'t in the schema — the extra field is filtered out and no row is rendered for it.',
+          "Renders a compact form with a value carrying an extra field that isn't in the schema — the extra field is filtered out and no row is rendered for it.",
       },
     },
     chromatic: { disable: true },
@@ -4919,7 +4917,7 @@ export const CompactHelpDialog: Story = {
     docs: {
       description: {
         story:
-          'Renders a compact form and clicks a row\'s Help action — the help dialog opens with the option\'s long-form description.',
+          "Renders a compact form and clicks a row's Help action — the help dialog opens with the option's long-form description.",
       },
     },
     chromatic: { disable: true },
@@ -5218,9 +5216,7 @@ export const CompactShowcase: Story = {
     // Schema message panels render inside the value cell of the row itself,
     // directly beneath the value.
     const infoPanel = (field: string) =>
-      document.querySelector(
-        `.readfirst-row[data-field="${field}"] .options-readfirst-info-panel`
-      );
+      document.querySelector(`.readfirst-row[data-field="${field}"] .options-readfirst-info-panel`);
 
     // Default-value notes and validation/dependency hints now render as a compact
     // INLINE reason (no ⓘ, no panel) — visible without any interaction.
@@ -5272,7 +5268,7 @@ export const CompactRequiredGroupRails: Story = {
     docs: {
       description: {
         story:
-          'Renders a compact form with several required_groups — each group\'s rail sits alongside its rows so the operator can see which one-of-required set the row belongs to.',
+          "Renders a compact form with several required_groups — each group's rail sits alongside its rows so the operator can see which one-of-required set the row belongs to.",
       },
     },
   },
@@ -5758,3 +5754,41 @@ export const CompactReadFirstRichtextTemplateBaseline: Story = {
     await expect(centreOffset).toBeLessThanOrEqual(1);
   },
 };
+
+/**
+ * The other half of the markdown contract: with NO host renderer there is no
+ * inset at all. The row is not left empty though — its one line still carries
+ * the document's prose, summarised. Losing the RENDERING without a renderer is
+ * the design; losing the CONTENT would be a bug.
+ */
+export const CompactRowMarkdownWithoutRenderer: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the same compact markdown rows with no host renderer supplied — no rendered document mounts under the row, and the row still shows the description as prose rather than as markdown source.',
+      },
+    },
+  },
+  args: {
+    ...CompactRowMarkdownPreview.args,
+    markdownRenderer: undefined,
+  },
+  play: async ({ canvasElement }) => {
+    const descRow = await waitFor(() => {
+      const row = canvasElement.querySelector('[data-field="desc"]');
+      expect(row).toBeTruthy();
+      return row!;
+    });
+
+    // No renderer, no inset — reqraft does not fall back to a dialect the host
+    // never chose.
+    expect(descRow.querySelector('.options-readfirst-markdown')).toBeNull();
+
+    // ...but the prose survives: the markers are stripped, not the content.
+    const descText = descRow.querySelector('.options-readfirst-valuetext')?.textContent ?? '';
+    expect(descText).toContain('Order intake');
+    expect(descText).not.toContain('##');
+    expect(descText).not.toContain('**');
+  },
+};