@qoretechnologies/reqraft 0.10.62 → 0.10.63-pr.142.g0b675cd

package/src/components/smartEditor/MarkdownDoc.tsx

@@ -1,190 +0,0 @@
-// Copyright 2026 Qore Technologies, s.r.o.
-// Shared renderer for LSP documentation (completion-item doc tooltips,
-// hover popovers, signature-help parameter docs). Wraps `react-markdown`
-// in a styled container so the markdown elements (code blocks, inline
-// code, headings, lists) render densely and legibly on the editor's dark
-// frosted surfaces — instead of raw browser defaults that overflow the
-// popover (unstyled code blocks) and waste vertical space (default
-// heading / paragraph margins).
-//
-// One component, three call sites — keeps the doc styling consistent and
-// in one place.
-
-import { useReqoreTheme } from '@qoretechnologies/reqore';
-import { getReadableColor } from '@qoretechnologies/reqore/dist/helpers/colors';
-import ReactMarkdown from 'react-markdown';
-import styled from 'styled-components';
-
-export interface IMarkdownDocProps {
-  /** The documentation text. */
-  content: string;
-  /**
-   * When `true`, render `content` as Markdown. When `false`, render it
-   * verbatim in a wrapping `<pre>` (the LSP `plaintext` kind) — still
-   * inside the styled container so it shares the font / colour / wrap.
-   */
-  markdown: boolean;
-  /** Max width of the doc body (px). Default 360. */
-  maxWidth?: number;
-  /** Max height before the body scrolls (px). Default 240. */
-  maxHeight?: number;
-}
-
-interface IStyledMarkdownProps {
-  $maxWidth: number;
-  $maxHeight: number;
-  $textColor: string;
-  $linkColor: string;
-}
-
-const StyledMarkdown = styled.div<IStyledMarkdownProps>`
-  max-width: ${({ $maxWidth }) => $maxWidth}px;
-  max-height: ${({ $maxHeight }) => $maxHeight}px;
-  overflow: auto;
-  font-size: 12px;
-  line-height: 1.5;
-  /* Text colour is derived from the active Reqore theme (readable on
-     whatever surface the host app uses) — not a hardcoded hex. */
-  color: ${({ $textColor }) => $textColor};
-  word-break: break-word;
-
-  /* Collapse the leading/trailing margins so the body hugs the popover
-     padding instead of adding a blank first/last line. */
-  > *:first-child {
-    margin-top: 0;
-  }
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  p {
-    margin: 0 0 6px;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 8px 0 4px;
-    font-weight: 600;
-    line-height: 1.3;
-  }
-  h1 {
-    font-size: 14px;
-  }
-  h2 {
-    font-size: 13px;
-  }
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-size: 12px;
-  }
-
-  /* Inline code → subtle chip. */
-  code {
-    font-family: monospace;
-    font-size: 11px;
-    background: rgba(255, 255, 255, 0.08);
-    padding: 1px 4px;
-    border-radius: 3px;
-  }
-
-  /* Fenced code block → dark inset surface with horizontal scroll so
-     long lines don't overflow the popover (the bug this fixes). */
-  pre {
-    margin: 6px 0;
-    padding: 8px 10px;
-    background: rgba(0, 0, 0, 0.35);
-    border-radius: 4px;
-    overflow-x: auto;
-  }
-  pre code {
-    background: none;
-    padding: 0;
-    white-space: pre;
-  }
-
-  ul,
-  ol {
-    margin: 4px 0;
-    padding-left: 18px;
-  }
-  li {
-    margin: 2px 0;
-  }
-
-  a {
-    /* Links use the theme's info intent (falls back to the readable
-       text colour if the theme doesn't define one). */
-    color: ${({ $linkColor }) => $linkColor};
-    text-decoration: none;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
-
-  strong {
-    font-weight: 600;
-  }
-
-  blockquote {
-    margin: 6px 0;
-    padding-left: 8px;
-    border-left: 2px solid rgba(255, 255, 255, 0.15);
-    opacity: 0.85;
-  }
-
-  hr {
-    border: none;
-    border-top: 1px solid rgba(255, 255, 255, 0.12);
-    margin: 8px 0;
-  }
-
-  table {
-    border-collapse: collapse;
-    margin: 6px 0;
-  }
-  th,
-  td {
-    border: 1px solid rgba(255, 255, 255, 0.12);
-    padding: 2px 6px;
-    text-align: left;
-  }
-`;
-
-const StyledPlaintext = styled.pre`
-  margin: 0;
-  white-space: pre-wrap;
-  font-family: monospace;
-`;
-
-export const MarkdownDoc = ({
-  content,
-  markdown,
-  maxWidth = 360,
-  maxHeight = 240,
-}: IMarkdownDocProps) => {
-  const theme = useReqoreTheme();
-  // Readable foreground for the active theme (light text on dark hosts,
-  // dark text on light hosts). Links use the theme's `info` intent.
-  const textColor = getReadableColor(theme);
-  const linkColor = theme.intents?.info ?? textColor;
-  return (
-    <StyledMarkdown
-      $maxWidth={maxWidth}
-      $maxHeight={maxHeight}
-      $textColor={textColor}
-      $linkColor={linkColor}
-    >
-      {markdown ? (
-        <ReactMarkdown>{content}</ReactMarkdown>
-      ) : (
-        <StyledPlaintext>{content}</StyledPlaintext>
-      )}
-    </StyledMarkdown>
-  );
-};

package/src/components/smartEditor/SmartEditor.stories.tsx

@@ -1,475 +0,0 @@
-// Stories for the generic SmartEditor primitive. The first story
-// (`BasicMock`) demonstrates the minimum-viable usage against a mocked LSP
-// server using `mock-socket`. The second (`LiveQonsole`) is a deliberate
-// spike — it skips the mock and hits the real `/lsp` endpoint configured
-// by Reqraft's storybook preview (`https://hq.qoretechnologies.com:8092`)
-// with `languageId: 'qonsole'`. Lets us validate the Qonsole LSP wire
-// shape end-to-end before promoting the spike into a `QonsoleSmartInput`
-// component proper.
-
-import { StoryObj } from '@storybook/react-vite';
-import { fn, userEvent, waitFor, within, expect } from 'storybook/test';
-import { sleep } from '../../../__tests__/utils';
-import { useState } from 'react';
-import { StoryMeta } from '../../types';
-import { createMockLspServer, MOCK_LSP_URL } from './__fixtures__/mockLspServer';
-import { SmartEditor } from './SmartEditor';
-import { useLspSession } from './useLspSession';
-
-interface IDemoArgs {
-  languageId?: string;
-  initialValue?: string;
-  triggerCharacters?: Set<string>;
-  height?: string;
-  readOnly?: boolean;
-  initialMetadata?: Record<string, any>;
-  onChange?: (v: string) => void;
-}
-
-/** Generic playground — owns the LSP session and the controlled value. */
-function SmartEditorPlayground(props: IDemoArgs) {
-  const [value, setValue] = useState(props.initialValue ?? '');
-  const session = useLspSession({
-    languageId: props.languageId ?? 'qonsole',
-    initialMetadata: props.initialMetadata,
-    initialText: props.initialValue ?? '',
-  });
-  return (
-    <SmartEditor
-      session={session}
-      value={value}
-      onChange={(v) => {
-        setValue(v);
-        props.onChange?.(v);
-      }}
-      triggerCharacters={props.triggerCharacters}
-      height={props.height}
-      readOnly={props.readOnly}
-    />
-  );
-}
-
-const meta = {
-  component: SmartEditorPlayground,
-  title: 'Components/SmartEditor',
-  args: {
-    initialValue: '',
-    onChange: fn(),
-  },
-} as StoryMeta<typeof SmartEditorPlayground>;
-
-export default meta;
-export type Story = StoryObj<typeof meta>;
-
-/**
- * Minimum-viable SmartEditor against a mocked LSP server. Demonstrates
- * trigger characters → completion request → dropdown rendering with no
- * language-specific configuration.
- */
-export const BasicMock: Story = {
-  args: {
-    languageId: 'demo',
-    initialValue: '',
-    triggerCharacters: new Set([' ', '.']),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SmartEditor against a mocked LSP server. Typing the "." trigger character sends a completion request and the dropdown mounts with the apple and banana suggestions.',
-      },
-    },
-  },
-  async beforeEach() {
-    const lsp = createMockLspServer(MOCK_LSP_URL, {
-      capabilities: {},
-      handlers: {
-        'textDocument/completion': () => ({
-          items: [
-            { label: 'apple', insertText: 'apple', kind: 14 },
-            { label: 'banana', insertText: 'banana', kind: 14 },
-          ],
-        }),
-      },
-    });
-    return () => lsp.close();
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const editable = canvas.getByRole('textbox');
-    await userEvent.click(editable);
-    // Type a single trigger character (`.`). This story's job is to prove
-    // "trigger char → completion request → dropdown" — so trigger it
-    // directly. Deliberately NOT a bare word like `hello `: a word now
-    // fires autosuggest on every keystroke (5 quiet round-trips for
-    // `hello`) before the trailing space triggers, which made this the
-    // most timing-sensitive story in the suite and the one that flaked
-    // under parallel CI load. One trigger = one round-trip.
-    await userEvent.type(editable, '.');
-    // Poll until the async mock-LSP round-trip renders the dropdown —
-    // never a fixed sleep, which races the WebSocket on slow CI.
-    await waitFor(
-      () => {
-        const dropdown = document.querySelector('.reqore-menu');
-        expect(dropdown).not.toBeNull();
-        expect(dropdown!.textContent).toContain('apple');
-        expect(dropdown!.textContent).toContain('banana');
-      },
-      { timeout: 30000 }
-    );
-  },
-};
-
-/**
- * Exercises the markdown-documentation tooltip render — completion items
- * carry rich markdown that should appear on hover with `react-markdown`
- * rendering (bold, lists, inline code), and a plaintext fallback when the
- * server says `kind: 'plaintext'`. Visual story; no play assertions.
- */
-export const WithMarkdownDocs: Story = {
-  args: {
-    languageId: 'demo',
-    initialValue: '',
-    triggerCharacters: new Set([' ', '.']),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Type any trigger character (space or `.`) to open the dropdown, ' +
-          'then hover an item for ~200ms to reveal the markdown documentation ' +
-          'tooltip. The first two items use `kind: "markdown"`, the third uses ' +
-          '`kind: "plaintext"` to verify the fallback render.',
-      },
-    },
-  },
-  async beforeEach() {
-    const lsp = createMockLspServer(MOCK_LSP_URL, {
-      capabilities: {},
-      handlers: {
-        'textDocument/completion': () => ({
-          items: [
-            {
-              label: 'forEach',
-              insertText: 'forEach',
-              kind: 2,
-              detail: '(callback: (item) => void) => void',
-              documentation: {
-                kind: 'markdown',
-                value:
-                  '### `forEach`\n\n' +
-                  'Invoke a callback for **each** element in the collection.\n\n' +
-                  '```ts\n' +
-                  "['a','b','c'].forEach((x) => console.log(x))\n" +
-                  '```\n\n' +
-                  '- Stops on `break` ✗ (use `for…of` instead)\n' +
-                  '- Returns `undefined`',
-              },
-            },
-            {
-              label: 'map',
-              insertText: 'map',
-              kind: 2,
-              detail: '<U>(fn: (item: T) => U) => U[]',
-              documentation: {
-                kind: 'markdown',
-                value:
-                  '### `map`\n\n' +
-                  'Project each element through `fn`, returning a new array.\n\n' +
-                  '- Pure / no side effects\n- Preserves length',
-              },
-            },
-            {
-              label: 'reduce',
-              insertText: 'reduce',
-              kind: 2,
-              detail: '<U>(fn, init: U) => U',
-              documentation: {
-                kind: 'plaintext',
-                value:
-                  'Fold the collection into a single value using fn.\n\n' +
-                  'Be careful with the initial value — without one, ' +
-                  'reduce throws on empty input.',
-              },
-            },
-          ],
-        }),
-      },
-    });
-    return () => lsp.close();
-  },
-  // Open the dropdown so the story snapshot is distinct from the other
-  // empty-at-rest SmartEditor stories (and to guard the markdown-item
-  // render path in CI).
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const editable = canvas.getByRole('textbox');
-    await userEvent.click(editable);
-    await userEvent.type(editable, 'arr.');
-    await waitFor(
-      () => {
-        const dropdown = document.querySelector('.reqore-menu');
-        expect(dropdown).not.toBeNull();
-        expect(dropdown!.textContent).toContain('forEach');
-      },
-      { timeout: 30000 }
-    );
-
-    // Regression guard: typing the method name after the `.` must
-    // NARROW the list (not clear it). The filter needle is the segment
-    // after the last `.` (`for`), not the whole `arr.for` token —
-    // otherwise every suggestion would wrongly disappear. Poll until
-    // the list has settled to the narrowed state (`reduce` gone).
-    await userEvent.type(editable, 'for');
-    await waitFor(
-      () => {
-        const dropdown = document.querySelector('.reqore-menu');
-        expect(dropdown).not.toBeNull();
-        expect(dropdown!.textContent).toContain('forEach');
-        expect(dropdown!.textContent).not.toContain('reduce');
-      },
-      { timeout: 30000 }
-    );
-  },
-};
-
-/**
- * Exercises multi-kind grouping — the dropdown should split items into
- * sections (Methods / Variables / Keywords) with a `ReqoreMenuDivider`
- * label between groups when more than one kind is present.
- */
-export const WithGroupedKinds: Story = {
-  args: {
-    languageId: 'demo',
-    initialValue: '',
-    triggerCharacters: new Set([' ', '.']),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Type a trigger to open the dropdown and verify the items are ' +
-          'grouped under "Methods", "Variables", and "Keywords" headers. ' +
-          'Each row also has its right-aligned kind chip.',
-      },
-    },
-  },
-  async beforeEach() {
-    const lsp = createMockLspServer(MOCK_LSP_URL, {
-      capabilities: {},
-      handlers: {
-        'textDocument/completion': () => ({
-          items: [
-            { label: 'concat', insertText: 'concat', kind: 2, detail: 'method' },
-            { label: 'slice', insertText: 'slice', kind: 2, detail: 'method' },
-            { label: 'length', insertText: 'length', kind: 6, detail: 'number' },
-            { label: 'name', insertText: 'name', kind: 6, detail: 'string' },
-            { label: 'if', insertText: 'if', kind: 14 },
-            { label: 'return', insertText: 'return', kind: 14 },
-          ],
-        }),
-      },
-    });
-    return () => lsp.close();
-  },
-  // Open the grouped dropdown so the snapshot is distinct + guard the
-  // kind-grouping render (Methods / Variables / Keywords sections).
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const editable = canvas.getByRole('textbox');
-    await userEvent.click(editable);
-    await userEvent.type(editable, 'x.');
-    await waitFor(
-      () => {
-        const dropdown = document.querySelector('.reqore-menu');
-        expect(dropdown).not.toBeNull();
-        // Items from multiple kinds render.
-        expect(dropdown!.textContent).toContain('concat');
-        expect(dropdown!.textContent).toContain('length');
-        expect(dropdown!.textContent).toContain('return');
-      },
-      { timeout: 30000 }
-    );
-  },
-};
-
-/**
- * Server-pushed diagnostics on the bare primitive — wavy inline
- * underlines plus the stacked message panel below the editor, with no
- * language wrapper involved.
- */
-export const WithDiagnostics: Story = {
-  args: {
-    languageId: 'demo',
-    initialValue: 'list services in pricing',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SmartEditor against a mocked LSP server that pushes diagnostics on didOpen — the text is decorated with wavy underlines and the stacked message panel below the editor lists both diagnostics.',
-      },
-    },
-  },
-  async beforeEach() {
-    const lsp = createMockLspServer(MOCK_LSP_URL, {
-      capabilities: {},
-      handlers: {
-        // Push diagnostics as soon as the document opens.
-        'textDocument/didOpen': (msg, server) => {
-          server.notify('textDocument/publishDiagnostics', {
-            uri: msg.params?.textDocument?.uri,
-            diagnostics: [
-              {
-                range: { start: { line: 0, character: 5 }, end: { line: 0, character: 13 } },
-                message: 'Unknown resource "services".',
-                severity: 1,
-              },
-              {
-                range: { start: { line: 0, character: 17 }, end: { line: 0, character: 24 } },
-                message: 'Pipeline "pricing" not found.',
-                severity: 2,
-              },
-            ],
-          });
-        },
-      },
-    });
-    return () => lsp.close();
-  },
-  play: async ({ canvasElement }) => {
-    await waitFor(
-      () => {
-        // Both pushed diagnostics render in the message panel…
-        expect(canvasElement.textContent).toContain('Unknown resource "services"');
-        expect(canvasElement.textContent).toContain('Pipeline "pricing" not found');
-        // …and the inline wavy underline is decorated.
-        expect(canvasElement.querySelector('[data-testid="diagnostic-underline"]')).not.toBeNull();
-      },
-      { timeout: 30000 }
-    );
-  },
-};
-
-/** Read-only mode — the content renders but cannot be edited. */
-export const ReadOnly: Story = {
-  args: {
-    languageId: 'demo',
-    initialValue: 'frozen content',
-    readOnly: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SmartEditor in read-only mode over an initial value — the Slate editor mounts as contenteditable=false so the content shows but cannot be edited.',
-      },
-    },
-  },
-  async beforeEach() {
-    const lsp = createMockLspServer(MOCK_LSP_URL, { capabilities: {} });
-    return () => lsp.close();
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByText('frozen content')).toBeInTheDocument();
-    // Slate renders read-only editors as non-editable.
-    await expect(canvasElement.querySelector('[contenteditable="false"]')).not.toBeNull();
-    await expect(canvasElement.querySelector('[contenteditable="true"]')).toBeNull();
-  },
-};
-
-/**
- * The not-ready overlay: the mock holds `initialize` open for the whole
- * session, so the spinner overlay stays over the editor. Chromatic snapshots
- * after `play`, so the overlay has to be the terminal state — a self-clearing
- * one would be gone by capture time. (The clear-on-connect path is covered by
- * every other story here, which only renders once the overlay lifts.)
- */
-export const LoadingOverlay: Story = {
-  args: {
-    languageId: 'demo',
-    initialValue: 'visible under the overlay',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the SmartEditor against a mock LSP that never finishes initialize — the "Connecting to language server" overlay stays over the editor for the whole session.',
-      },
-    },
-  },
-  async beforeEach() {
-    const lsp = createMockLspServer(MOCK_LSP_URL, {
-      capabilities: {},
-      delays: { initialize: 600000 },
-    });
-    return () => lsp.close();
-  },
-  play: async ({ canvasElement }) => {
-    // Assert the overlay is up and stop — leaving it on screen for Chromatic.
-    await waitFor(
-      () => expect(canvasElement.textContent).toContain('Connecting to language server'),
-      { timeout: 10000 }
-    );
-  },
-};
-
-/**
- * **Live spike — hits the real Qorus `/lsp` endpoint** at
- * `wss://hq.qoretechnologies.com:8092/lsp`. No mock-socket. Used to
- * validate the SmartEditor + ReqraftLspClient abstraction end-to-end against
- * the shipped Qonsole LSP before committing to a `QonsoleSmartInput`
- * wrapper API. Type a slash-command like `/list services ` and the
- * server's real completions / signature / hover should render.
- *
- * **Prereq:** export `REACT_APP_QORUS_TOKEN=<token>` before
- * running storybook. Without a valid token the WebSocket handshake
- * fails with 401.
- */
-export const LiveQonsole: Story = {
-  // `!test` excludes this from the play-test runner and Chromatic is
-  // disabled below — it connects to the REAL Qonsole LSP, which CI
-  // (no token/network) can't reach. Mirrors qorus-ide's `Views/FullIDE`
-  // (`useRealWebsockets` + `tags: ['!test']`).
-  tags: ['!test'],
-  args: {
-    languageId: 'qonsole',
-    initialValue: '/list services ',
-    triggerCharacters: new Set(['/', ' ', '-', '=', '.']),
-    height: '200px',
-  },
-  parameters: {
-    chromatic: { disable: true },
-    docs: {
-      description: {
-        story:
-          'Lives against the real Qonsole LSP — no mock. Validates the ' +
-          'SmartEditor + ReqraftLspClient abstraction against the shipped server. ' +
-          'Set REACT_APP_QORUS_TOKEN before launching storybook.',
-      },
-    },
-  },
-  // Open real flag completions when run manually against the live
-  // server: `/list services ` (trailing space) → 10 flag items via
-  // `textDocument/completion`. Clear + retype that exact command so the
-  // trailing-space trigger lands on the populated position — a lone `-`
-  // returns 0 items there. Generous settle/timeout for the real
-  // round-trip; story is `!test` so the CI play-test runner skips it.
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const editable = canvas.getByRole('textbox');
-    await sleep(3000); // let the live LSP session connect before typing (real WS handshake)
-    await userEvent.click(editable);
-    await userEvent.clear(editable);
-    await userEvent.type(editable, '/list services ');
-    await waitFor(
-      () => {
-        const dropdown = document.querySelector('.reqore-menu');
-        expect(dropdown).not.toBeNull();
-        expect(dropdown!.textContent).toContain('--desc');
-      },
-      { timeout: 30000 }
-    );
-  },
-};