@qoretechnologies/reqraft 0.10.66-pr.145.gcb1e59d → 0.10.66

package/src/components/form/expressions/useRenderExpression.ts

@@ -1,165 +0,0 @@
-// Copyright 2026 Qore Technologies, s.r.o.
-// The "Explain" seam. Turns an expression AST into its readable rendering.
-//
-// The rendering is the server's `DataProvider::renderExpression`, reached over
-// the LSP custom method `dpql/renderExpression` (added next to `dpql/serialize`
-// in `QorusLspWebSocketHandler.qc`). All consumers share ONE render socket: the
-// module-level `ReqraftLspClient` below rides the per-endpoint
-// `LspSharedConnection`, and JSON-RPC request ids associate each response with
-// the caller — N expression builders on one form means N independent in-flight
-// requests on one connection, no cross-wiring.
-//
-// There is no client-side stand-in. A Qorus form does not work without Qorus,
-// so the only time the server was "unreachable" in practice was while the
-// page's first connection was still opening — and racing that with a 1.5s timer
-// replaced the real rendering with an approximation labelled "Approximate", on
-// exactly the first Explain of every page. A rendering now waits for the
-// connection; `null` means the server cannot render at all (it predates the
-// method, or the connection gave up), which the caller says plainly.
-import { nanoid } from 'nanoid';
-import { useCallback, useEffect, useRef } from 'react';
-import { ReqraftLspClient } from '../../../utils/lspClient';
-import { IExpressionValue } from './types';
-
-/* The synchronous summary a collapsed row prints — see `readFirst.ts`. It is
-   not a stand-in for this rendering and is never shown in its place. */
-export { renderExpressionToText } from './renderExpressionToText';
-
-/** Coalesce rapid re-renders per consumer (live typing) — trailing edge. */
-const RENDER_DEBOUNCE_MS = 300;
-
-let renderClient: ReqraftLspClient | null = null;
-/** Set after a `-32601 method not found` — the server predates the method. */
-let methodUnsupported = false;
-
-const getRenderClient = (): ReqraftLspClient => {
-  if (!renderClient) {
-    renderClient = new ReqraftLspClient({
-      languageId: 'dpql',
-      // Opaque per-load URI; `dpql/renderExpression` is stateless (no
-      // `didOpen` needed), the URI only identifies the client locally.
-      uri: `inmemory://reqraft/render-expression/${nanoid()}`,
-    });
-  }
-  return renderClient;
-};
-
-/** One rendered expression — what `renderRich` resolves with. */
-export interface IRenderedExpression {
-  /** The readable rendering (plain text). */
-  text: string;
-  /**
-   * The server's richtext form — template references arrive as `tag` nodes
-   * (the IDE renders them as chips). Convert with `richtextResponseToSlate`.
-   */
-  richtext: unknown | null;
-}
-
-const renderViaServer = async (value: IExpressionValue): Promise<IRenderedExpression | null> => {
-  if (methodUnsupported) return null;
-  const client = getRenderClient();
-  try {
-    // Waits as long as the connection does: it has its own reconnect schedule
-    // and rejects once it gives up, so this never outlives a dead socket.
-    await client.connect();
-    const result = await client.customRequest<{ rendered?: string; richtext?: unknown }>(
-      'dpql/renderExpression',
-      // The server accepts both the bare `{exp, args}` AST and the
-      // `{is_expression, value}` wrapper; consumers pass the bare AST.
-      { expression: value }
-    );
-    return typeof result?.rendered === 'string'
-      ? { text: result.rendered, richtext: result.richtext ?? null }
-      : null;
-  } catch (err) {
-    // `ReqraftLspClient` rejections are `Error('<code>: <message>')`.
-    if (err instanceof Error && err.message.startsWith('-32601')) {
-      methodUnsupported = true;
-    }
-    return null;
-  }
-};
-
-/** @internal Test hook — drop the module-level client + cached health state. */
-export const _resetRenderExpressionTransportForTests = (): void => {
-  renderClient?.disconnect();
-  renderClient = null;
-  methodUnsupported = false;
-};
-
-interface IPendingRender {
-  value: IExpressionValue;
-  resolvers: Array<(rendered: IRenderedExpression | null) => void>;
-}
-
-export interface IUseRenderExpressionResult {
-  /** The readable rendering of an expression AST, or `null` when the server cannot render. */
-  render: (value: IExpressionValue) => Promise<string | null>;
-  /**
-   * Like `render`, but also resolves the server's richtext form (template
-   * references as `tag` nodes — chips). `null` when there is nothing to render
-   * or the server cannot render it.
-   */
-  renderRich: (value: IExpressionValue) => Promise<IRenderedExpression | null>;
-}
-
-export const useRenderExpression = (): IUseRenderExpressionResult => {
-  const pendingRef = useRef<IPendingRender | null>(null);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const lastRunRef = useRef(0);
-
-  useEffect(
-    () => () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-        timerRef.current = null;
-      }
-      // Settle any coalesced callers so no promise is left hanging past unmount.
-      const pending = pendingRef.current;
-      pendingRef.current = null;
-      pending?.resolvers.forEach((resolve) => resolve(null));
-    },
-    []
-  );
-
-  const renderRich = useCallback(
-    (value: IExpressionValue): Promise<IRenderedExpression | null> =>
-      new Promise<IRenderedExpression | null>((resolve) => {
-        // Coalesce calls per consumer: rapid live updates collapse to the
-        // newest AST; every awaiting caller gets that newest rendering.
-        pendingRef.current = {
-          value,
-          resolvers: [...(pendingRef.current?.resolvers ?? []), resolve],
-        };
-
-        const run = async (): Promise<void> => {
-          const job = pendingRef.current;
-          pendingRef.current = null;
-          if (!job) return;
-          lastRunRef.current = Date.now();
-          const outcome = job.value?.exp ? await renderViaServer(job.value) : null;
-          job.resolvers.forEach((r) => r(outcome));
-        };
-
-        if (timerRef.current) return; // a run is already scheduled
-        const elapsed = Date.now() - lastRunRef.current;
-        if (elapsed >= RENDER_DEBOUNCE_MS) {
-          void run(); // leading edge — single calls render immediately
-        } else {
-          timerRef.current = setTimeout(() => {
-            timerRef.current = null;
-            void run();
-          }, RENDER_DEBOUNCE_MS - elapsed);
-        }
-      }),
-    []
-  );
-
-  const render = useCallback(
-    (value: IExpressionValue): Promise<string | null> =>
-      renderRich(value).then((r) => r?.text ?? null),
-    [renderRich]
-  );
-
-  return { render, renderRich };
-};

package/src/components/form/fields/ChoiceGroupHeading.tsx

@@ -1,38 +0,0 @@
-import { ReqoreSpan } from '@qoretechnologies/reqore';
-import { memo } from 'react';
-import { useIsCalmForm } from '../engine/formAppearance';
-
-/**
- * The heading over a small group of choices (the checkboxes a field with three
- * or fewer allowed values renders) — the field's own name, or "Select one:"
- * when it has none.
- *
- * One component so both choice editors head their groups the same way, in
- * either appearance: an upper-case micro label by default; in the calm look the
- * words as written, at the small text size, because nothing in a calm form is
- * forced into capitals.
- */
-export const ChoiceGroupHeading = memo(({ children }: { children: React.ReactNode }) => {
-  const calm = useIsCalmForm();
-
-  return (
-    <ReqoreSpan
-      className='reqraft-choice-group-heading'
-      effect={calm ? { opacity: 0.7, weight: 'bold' } : { opacity: 0.6, uppercase: true, weight: 'bold' }}
-      size={calm ? 'small' : 'tiny'}
-    >
-      {children}
-    </ReqoreSpan>
-  );
-});
-
-/**
- * The intent a picked choice in those groups takes. Blue by default; none in
- * the calm look, where blue says only "a filter is on" and the checked mark
- * already says which choice is picked.
- */
-export const useSelectedChoiceIntent = (): ((selected: boolean) => 'info' | undefined) => {
-  const calm = useIsCalmForm();
-
-  return (selected) => (selected && !calm ? 'info' : undefined);
-};

package/src/components/form/fields/Field.stories.tsx

@@ -1,143 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, within } from 'storybook/test';
-import { useState } from 'react';
-
-import { StoryMeta } from '../../../types';
-import { FormField } from './Field';
-
-/**
- * Direct `FormField` dispatcher stories. These exist mainly to pin the
- * soft-type / `binary` handling: a `soft*` type renders exactly like its
- * concrete base, and `binary` renders as a textarea.
- */
-const meta = {
-  component: FormField,
-  title: 'Components/Form/Field',
-  args: {
-    onChange: fn(),
-  },
-  render(args) {
-    const [value, setValue] = useState<any>(args.value);
-    return (
-      <FormField
-        {...args}
-        value={value}
-        onChange={(v) => {
-          args.onChange?.(v);
-          setValue(v);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof FormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** A soft Qore type (`softint`) renders identically to its concrete `int`. */
-export const SoftInteger: Story = {
-  args: {
-    type: 'softint',
-    value: 5,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders FormField for a softint value — the dispatcher resolves the soft type to int and mounts the numeric input.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    // NumberFormField renders an input (a `softint` resolves to `int`).
-    await expect(canvasElement.querySelector('input')).toBeInTheDocument();
-  },
-};
-
-/** `binary` renders as a textarea (matching the type map's documented intent). */
-export const Binary: Story = {
-  args: {
-    type: 'binary',
-    value: 'deadbeef',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders FormField for a binary value — the dispatcher mounts a textarea holding the encoded content.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    await expect(canvasElement.querySelector('textarea')).toBeInTheDocument();
-  },
-};
-
-/** `byte-size` — a numeric amount + a unit selector, combined into `"512MiB"`. */
-export const ByteSize: Story = {
-  args: {
-    type: 'byte-size',
-    value: '512MiB',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders FormField for a byte-size value — the dispatcher mounts the amount input and the MiB unit selector, split from "512MiB".',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByDisplayValue('512')).toBeInTheDocument();
-    await expect(await canvas.findByText('MiB')).toBeInTheDocument();
-  },
-};
-
-/** `url` — protocol picker + `://` + address (IDE `URLField` structure). */
-export const Url: Story = {
-  args: {
-    type: 'url',
-    value: 'https://example.com',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders FormField for a url value — the dispatcher mounts the https protocol selector and the example.com address input, split from "https://example.com".',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByDisplayValue('example.com')).toBeInTheDocument();
-    await expect(await canvas.findByText('https')).toBeInTheDocument();
-  },
-};
-
-/** `multi-select` — an array value picked from `allowed_values` (multiple). */
-export const MultiSelect: Story = {
-  args: {
-    type: 'multi-select',
-    allowed_values: [
-      { value: { value: 'red', type: 'string' }, display_name: 'Red' },
-      { value: { value: 'green', type: 'string' }, display_name: 'Green' },
-      { value: { value: 'blue', type: 'string' }, display_name: 'Blue' },
-    ],
-    value: ['red', 'blue'],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders FormField for a multi-select value — the two picked values (Red and Blue) render as chips using their display_name labels.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    // The two selected values render as chips (by their display_name).
-    await expect(await canvas.findByText('Red')).toBeInTheDocument();
-    await expect(canvas.getByText('Blue')).toBeInTheDocument();
-  },
-};