@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

package/src/components/Description/index.tsx

@@ -1,254 +0,0 @@
-import { ReqoreSpan, ReqoreTextEffect, ReqoreVerticalSpacer } from '@qoretechnologies/reqore';
-import { IReqoreParagraphProps, ReqoreP } from '@qoretechnologies/reqore/dist/components/Paragraph';
-import { TQorusType } from '@qoretechnologies/ts-toolkit';
-import { memo, useCallback, useMemo, useState } from 'react';
-import ReactMarkdown from 'react-markdown';
-import styled from 'styled-components';
-import { useMarkdownRenderer } from './markdownRendererContext';
-
-export interface IDescriptionProps extends IReqoreParagraphProps {
-  shortDescription?: string;
-  longDescription: string;
-  longDescriptionOnly?: boolean;
-  longDescriptionShownByDefault?: boolean;
-  maxShortDescriptionLength?: number;
-  margin?: 'top' | 'bottom' | 'both' | 'none';
-  type?: TQorusType;
-  /**
-   * Render for a constrained container — a row inset, a callout, a hover card.
-   *
-   * Forwarded to the host's markdown renderer and applied to the built-in
-   * heading scale.
-   */
-  compact?: boolean;
-}
-
-/**
- * System monospace, spelled out rather than imported from
- * `@qoretechnologies/reqore`'s font shorthands: that export postdates the
- * `>=0.71.16` peer range this package supports, and a description must not be
- * the reason a consumer has to move its Reqore version.
- */
-const MONO_FONT =
-  "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace";
-
-/**
- * The built-in markdown surface, used when no host renderer is supplied.
- *
- * `react-markdown` 9 dropped its `className` prop, so the styles cannot hang off
- * `styled(ReactMarkdown)` — hence a wrapper element rather than a styled
- * component around the renderer itself.
- */
-const StyledDescriptionMarkdown = styled.div<{ $compact?: boolean }>`
-  /*
-   * Inline code. A backtick span marks an identifier — an option key, a header
-   * name, a path — so it has to be monospace, and it has to sit quietly inside
-   * the sentence around it.
-   *
-   * This used to map the code element to a ReqoreTag with an explicit near-white
-   * colour, which auto-contrasted to near-black text: on a dark form a description
-   * full of option names read as a row of glaring labels rather than as prose with
-   * identifiers in it. Keeping the reading colour and tinting the background
-   * behind it says "literal" without shouting it.
-   */
-  code {
-    font-family: ${MONO_FONT};
-    font-size: 0.92em;
-    background: rgba(255, 255, 255, 0.09);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    border-radius: 3px;
-    padding: 0.05em 0.35em;
-    color: inherit;
-    white-space: pre-wrap;
-    word-break: break-word;
-    overflow-wrap: anywhere;
-  }
-
-  /* Block code owns the whole pre surface; it must not also be chipped. */
-  pre {
-    white-space: pre-wrap;
-    word-break: break-word;
-    overflow-wrap: anywhere;
-    max-width: 100%;
-  }
-  pre code {
-    background: none;
-    border: 0;
-    padding: 0;
-    font-size: 1em;
-  }
-
-  /*
-   * Headings. These used to map to ReqoreH1…ReqoreH6, which render at page-title
-   * scale — an option description opening with a level-two heading came out
-   * larger than the dialog title above it. A description is never a page, so the
-   * scale here is relative to the text it interrupts.
-   */
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: ${({ $compact }) => ($compact ? '10px 0 4px' : '16px 0 8px')};
-    line-height: 1.3;
-    font-weight: 600;
-  }
-
-  > h1:first-child,
-  > h2:first-child,
-  > h3:first-child,
-  > h4:first-child,
-  > h5:first-child,
-  > h6:first-child {
-    margin-top: 0;
-  }
-
-  h1 {
-    font-size: ${({ $compact }) => ($compact ? '1.08em' : '1.5em')};
-  }
-  h2 {
-    font-size: ${({ $compact }) => ($compact ? '1.04em' : '1.3em')};
-  }
-  h3 {
-    font-size: ${({ $compact }) => ($compact ? '1em' : '1.15em')};
-  }
-  h4,
-  h5,
-  h6 {
-    font-size: 1em;
-    opacity: 0.85;
-  }
-
-  p:first-child {
-    margin-top: 0;
-  }
-  p:last-child {
-    margin-bottom: 0;
-  }
-
-  ul,
-  ol {
-    margin: 4px 0;
-    padding-left: 20px;
-  }
-  li {
-    margin: 2px 0;
-  }
-`;
-
-export const MarkdownLink = (props: any) => {
-  return (
-    <ReqoreTextEffect
-      as='a'
-      effect={{ interactive: true, color: 'info', underline: true }}
-      {...props}
-    />
-  );
-};
-
-export const Description = memo(
-  ({
-    shortDescription,
-    longDescription,
-    longDescriptionOnly,
-    longDescriptionShownByDefault,
-    maxShortDescriptionLength = 1000,
-    margin = 'bottom',
-    type: _type, // eslint-disable-line @typescript-eslint/no-unused-vars
-    compact,
-    ...rest
-  }: IDescriptionProps) => {
-    const [showLongDescription, setShowLongDescription] = useState<boolean>(
-      longDescriptionOnly || (longDescriptionShownByDefault && longDescription ? true : false)
-    );
-    const markdownRenderer = useMarkdownRenderer();
-
-    const actualShortDescription = shortDescription || longDescription;
-    const isShortDescriptionTooLong = actualShortDescription?.length > maxShortDescriptionLength;
-
-    const finalShownDescription = isShortDescriptionTooLong
-      ? `${actualShortDescription.slice(0, maxShortDescriptionLength)}`
-      : actualShortDescription;
-
-    const finalLongDescription =
-      longDescription || (isShortDescriptionTooLong ? actualShortDescription : shortDescription);
-
-    const handleDescriptionClick = useCallback((e: React.MouseEvent) => {
-      e.stopPropagation();
-      setShowLongDescription((prev) => !prev);
-    }, []);
-
-    const effect = useMemo(() => ({ italic: true, opacity: 0.7 }), []);
-
-    const components = useMemo(
-      () => ({
-        p: (options: any) => <ReqoreP {...options} effect={effect} size='small' />,
-        span: (options: any) => <ReqoreSpan {...options} effect={effect} size='small' />,
-        a: MarkdownLink,
-        // `code` and `h1`…`h6` are deliberately NOT mapped — the surface above
-        // styles them, so an identifier stays readable and a heading stays
-        // smaller than the title it sits under.
-      }),
-      [effect]
-    );
-
-    const renderToggle = useCallback(() => {
-      if (finalShownDescription === longDescription || longDescriptionOnly) {
-        return null;
-      }
-
-      return (
-        <>
-          {showLongDescription && <ReqoreVerticalSpacer height={5} />}
-          <ReqoreTextEffect
-            className='description-more'
-            effect={{
-              interactive: true,
-              brightness: 180,
-              opacity: showLongDescription ? 0.4 : 0.6,
-              color: 'white',
-            }}
-            style={{ cursor: 'pointer' }}
-            onClick={handleDescriptionClick}
-          >
-            {showLongDescription ? '...less' : '...more'}
-          </ReqoreTextEffect>
-        </>
-      );
-    }, [showLongDescription]);
-
-    if (!shortDescription && !longDescription) {
-      return null;
-    }
-
-    return (
-      <>
-        {margin === 'both' || margin === 'top' ? <ReqoreVerticalSpacer height={10} /> : null}
-        {showLongDescription ? (
-          // Markdown is rendered outside `ReqoreP`: it emits block content —
-          // its own paragraphs, lists, headings — and a `<p>` may not contain
-          // any of them, so the browser closed the outer paragraph early and
-          // the rest of the description escaped its own styling.
-          <>
-            {markdownRenderer ? (
-              markdownRenderer({ value: finalLongDescription, compact })
-            ) : (
-              <StyledDescriptionMarkdown $compact={compact}>
-                <ReactMarkdown components={components}>{finalLongDescription}</ReactMarkdown>
-              </StyledDescriptionMarkdown>
-            )}
-            {renderToggle()}
-          </>
-        ) : (
-          <ReqoreP {...rest}>
-            <ReqoreSpan effect={effect}>
-              {finalShownDescription} {finalLongDescription ? renderToggle() : null}
-            </ReqoreSpan>
-          </ReqoreP>
-        )}
-        {margin === 'both' || margin === 'bottom' ? <ReqoreVerticalSpacer height={10} /> : null}
-      </>
-    );
-  }
-);

package/src/components/Description/markdownRendererContext.tsx

@@ -1,29 +0,0 @@
-import { createContext, ReactNode, useContext } from 'react';
-
-/**
- * Draws a markdown string.
- *
- * `compact` asks for a constrained container — a row inset, a callout, a hover
- * card — rather than a page: markdown authored as a document routinely opens
- * with `##`, and at document scale that heading outgrows the title above it.
- */
-export type TMarkdownRenderer = (args: { value: string; compact?: boolean }) => ReactNode;
-
-/**
- * The renderer `Description` draws markdown with, when a host supplies one.
- *
- * This package renders markdown in exactly one place — a field's description —
- * but an application that has field descriptions has markdown everywhere else
- * too: on its object pages, in its catalogues, in its chat transcripts. When
- * reqraft draws descriptions with its own dialect and the host draws everything
- * else with its own, the same text renders two different ways depending on which
- * surface it landed on, and neither side can tell which one the reader saw.
- *
- * So the host's renderer wins where there is one. The built-in is a fallback for
- * hosts that have no renderer of their own, not a second opinion.
- */
-export const MarkdownRendererContext = createContext<TMarkdownRenderer | undefined>(undefined);
-
-/** Returns the host-supplied markdown renderer, or `undefined` for the built-in. */
-export const useMarkdownRenderer = (): TMarkdownRenderer | undefined =>
-  useContext(MarkdownRendererContext);

package/src/components/FocusedEditing/index.tsx

@@ -1,50 +0,0 @@
-import { IReqoreModalProps, ReqoreModal } from '@qoretechnologies/reqore/dist/components/Modal';
-import { memo, useCallback, useEffect, useState } from 'react';
-
-export const FocusedEditing = memo(
-  ({
-    children,
-    isFullscreen,
-    modalOnly,
-    ...rest
-  }: IReqoreModalProps & {
-    isFullscreen?: boolean;
-    /**
-     * Render ONLY the modal, not the in-place copy of `children`. For call
-     * sites that already render the field themselves and just need the focused
-     * overlay on top — e.g. the compact row's inline editor, which lives in the
-     * row grid and must stay there. Default (`false`) renders children in place
-     * as well, which is what the classic and card layouts wrap themselves in.
-     */
-    modalOnly?: boolean;
-  }) => {
-    const [_isFullscreen, setIsFullscreen] = useState(isFullscreen);
-
-    const handleFullscreenToggle = useCallback(() => {
-      setIsFullscreen((prev) => !prev);
-    }, []);
-
-    useEffect(() => {
-      setIsFullscreen(isFullscreen);
-    }, [isFullscreen]);
-
-    return (
-      <>
-        {_isFullscreen && (
-          <ReqoreModal
-            label='Focused Editing'
-            icon='FullscreenFill'
-            blur={15}
-            customTheme={{ main: '#111111' }}
-            isOpen
-            onClose={handleFullscreenToggle}
-            {...rest}
-          >
-            {children}
-          </ReqoreModal>
-        )}
-        {modalOnly ? null : children}
-      </>
-    );
-  }
-);

package/src/components/codeSize/index.tsx

@@ -1,79 +0,0 @@
-// Copyright 2026 Qore Technologies, s.r.o.
-// How much code is there? — the one answer, rendered one way.
-//
-// A read-only view of source has to say something about the code it is not
-// showing in full: how many lines, how much text. The compact form engine
-// grew that chip first (a `code-editor` value's read summary); detail pages
-// outside the form engine want the identical affordance. It lives here so
-// there is one renderer rather than one per caller, each drifting in
-// pluralisation, icon and intent.
-
-import { ReqoreTag } from '@qoretechnologies/reqore';
-import { IReqoreTagProps } from '@qoretechnologies/reqore/dist/components/Tag';
-import { memo } from 'react';
-
-export interface IReqraftCodeSize {
-  /** Number of lines, counting a trailing newline's empty last line. */
-  lines: number;
-  /** Number of characters (UTF-16 code units, as `String.length` reports). */
-  chars: number;
-}
-
-/**
- * Measure a block of code. Split out from the tag so the numbers can be
- * asserted without rendering, and reused by callers that want to phrase the
- * size themselves.
- *
- * An empty string is one line of zero characters, which is what an editor
- * showing it displays — not zero lines.
- */
-export function describeCodeSize(code: string): IReqraftCodeSize {
-  return { lines: code.split('\n').length, chars: code.length };
-}
-
-/** `4 lines` / `1 line` — the label half of the chip. */
-export function formatCodeLines(lines: number): string {
-  return `${lines} ${lines === 1 ? 'line' : 'lines'}`;
-}
-
-/** `92 chars` / `1 char` — the key half of the chip. */
-export function formatCodeChars(chars: number): string {
-  return `${chars} ${chars === 1 ? 'char' : 'chars'}`;
-}
-
-/**
- * The chip as plain `ReqoreTag` props. Needed wherever a host takes tag
- * *props* rather than an element — a `ReqorePanel` `badge`, a button badge —
- * which is most of Reqore's badge surface.
- */
-export function codeSizeTagProps(code: string): IReqoreTagProps {
-  const { lines, chars } = describeCodeSize(code);
-
-  return {
-    size: 'small',
-    minimal: true,
-    intent: 'info',
-    icon: 'CodeLine',
-    label: formatCodeLines(lines),
-    labelKey: formatCodeChars(chars),
-  };
-}
-
-export interface IReqraftCodeSizeTagProps
-  extends Omit<IReqoreTagProps, 'label' | 'labelKey'> {
-  /** The code being summarised. */
-  code: string;
-}
-
-/**
- * `N chars | N lines` chip summarising a block of source. Every prop of
- * `ReqoreTag` passes through except the two labels, which are the point.
- */
-export const ReqraftCodeSizeTag = memo(
-  ({ code, ...rest }: IReqraftCodeSizeTagProps) => {
-    const { label, labelKey, ...defaults } = codeSizeTagProps(code);
-
-    return <ReqoreTag {...defaults} {...rest} label={label} labelKey={labelKey} />;
-  }
-);
-ReqraftCodeSizeTag.displayName = 'ReqraftCodeSizeTag';

package/src/components/composer/Composer.stories.tsx

@@ -1,238 +0,0 @@
-import { ReqoreButton, ReqoreTag, ReqoreUIProvider } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-import { StoryMeta } from '../../types';
-import { Composer } from './Composer';
-
-const meta = {
-  component: Composer,
-  title: 'Components/Composer',
-  args: {
-    onSend: fn(),
-  },
-} as StoryMeta<typeof Composer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * The default: the rich, Qonsole-style editor (`ReqoreRichTextEditor`). It renders
- * a Slate contenteditable (not a `<textarea>`), an attach button, and Send.
- */
-export const Rich: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the default rich editor — a Slate contenteditable (not a textarea) with an attach button and Send, seeded with a multi-line draft.',
-      },
-    },
-  },
-  args: {
-    placeholder: 'Write a message…',
-    defaultText: 'A rich, multi-line draft.\nSecond paragraph survives as a newline.',
-  },
-  async play({ canvasElement }) {
-    await expect(canvasElement.querySelector('[contenteditable="true"]')).not.toBeNull();
-    await expect(canvasElement.querySelector('textarea')).toBeNull();
-    await expect(within(canvasElement).getByText('Send')).toBeInTheDocument();
-  },
-};
-
-/**
- * The `plain` variant — a `ReqoreTextarea`, used where a simple text field is
- * enough (and for deterministic tests). Typing enables Send; clicking it calls
- * `onSend` with the plain body and the staged files.
- */
-export const Plain: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the plain textarea variant, where typing enables Send and clicking it calls onSend with the plain body and the staged files.',
-      },
-    },
-  },
-  args: { editor: 'plain' },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-    const textarea = canvasElement.querySelector('textarea');
-    await expect(textarea).not.toBeNull();
-
-    await userEvent.type(textarea!, 'hello there');
-    await userEvent.click(canvas.getByText('Send'));
-    await waitFor(() =>
-      expect(args.onSend).toHaveBeenCalledWith(
-        'hello there',
-        expect.objectContaining({ files: [] })
-      )
-    );
-  },
-};
-
-/**
- * Multiple `sendActions` split the send button — a primary button plus a caret
- * dropdown. The primary is the first action; its `id` is echoed back to `onSend`.
- */
-export const SplitSend: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the composer with multiple sendActions, splitting Send into a primary Publish button plus a caret dropdown — sending echoes the chosen action's id back to onSend.",
-      },
-    },
-  },
-  args: {
-    editor: 'plain',
-    sendActions: [
-      { id: 'publish', label: 'Publish', icon: 'SendPlane2Line' },
-      { id: 'draft', label: 'Save draft', icon: 'FileLine' },
-    ],
-  },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-    const textarea = canvasElement.querySelector('textarea');
-    await userEvent.type(textarea!, 'ship it');
-    await userEvent.click(canvas.getByText('Publish'));
-    await waitFor(() =>
-      expect(args.onSend).toHaveBeenCalledWith(
-        'ship it',
-        expect.objectContaining({ action: 'publish' })
-      )
-    );
-  },
-};
-
-/**
- * A map of the composer's injection slots. The same Composer becomes the Qonsole
- * input or the helpdesk reply box by filling these — so here every slot renders a
- * tag naming itself, to show exactly where each one lands:
- *
- * - `attachMenuItems` — turns the `+` into a dropdown (open it for the entry)
- * - `toolbarStart` — after `+` on the left
- * - `footerActions` — after `toolbarStart`
- * - `rightActions` — just left of Send
- * - `aboveInput` — on top of the editor, inside the bar (Qonsole's reference chips)
- * - `belowInput` — under the whole bar
- */
-const slotTag = (name: string) => <ReqoreTag label={name} size='small' intent='info' />;
-
-export const WithSlots: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders every composer injection slot — attachMenuItems, toolbarStart, footerActions, rightActions, aboveInput, and belowInput — each filled with a self-naming tag, so the story reads as a legible map of where each slot lands.',
-      },
-    },
-  },
-  args: {
-    editor: 'plain',
-    attachMenuItems: () => [
-      { label: 'attachMenuItems entry', icon: 'CameraAiLine', onClick: fn() },
-    ],
-    toolbarStart: slotTag('toolbarStart'),
-    footerActions: slotTag('footerActions'),
-    rightActions: slotTag('rightActions'),
-    aboveInput: slotTag('aboveInput'),
-    belowInput: slotTag('belowInput'),
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    // every slot renders its own marker, so the story is a legible slot map
-    for (const slot of [
-      'toolbarStart',
-      'footerActions',
-      'rightActions',
-      'aboveInput',
-      'belowInput',
-    ]) {
-      await expect(canvas.getByText(slot)).toBeInTheDocument();
-    }
-  },
-};
-
-/**
- * Proof that the composer is configurable enough to *be* the qorus-ide Qonsole
- * input — no fork. Wrapped in qorus-ide's Reqore theme (`main #121212`,
- * `custom1 #762f7e`) and given the same effect + controls the real QonsoleInput
- * uses: the `custom1:darken` gradient bar, an icon-only `custom1` send, and the
- * `+` / `/` / compass controls in the slots. Compare against
- * :6006 story `qonsole-ui-components--business-impact`.
- */
-export const QonsoleReplica: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the composer configured to replicate qorus-ide's QonsoleInput — a dark custom1 theme, gradient bar, icon-only send, and the slash-commands and design-session compass controls in its slots.",
-      },
-    },
-  },
-  decorators: [
-    (Story) => (
-      <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
-        <div style={{ padding: 20, background: '#121212' }}>
-          <Story />
-        </div>
-      </ReqoreUIProvider>
-    ),
-  ],
-  args: {
-    placeholder: "Tell Qorus what you're trying to do…",
-    // the exact QonsoleInput bar effect (a custom1 gradient border + fill)
-    effect: { gradient: { direction: 'to bottom right', colors: 'custom1:darken:1:0.9' } },
-    // icon-only, custom1-themed, minimal — the Qonsole send
-    sendActions: [{ id: 'send', icon: 'SendPlane2Line', customTheme: { main: 'custom1' }, minimal: true }],
-    // `+` becomes a dropdown once it has extra items (screenshot / capture), like Qonsole
-    attachMenuItems: () => [
-      { label: 'Take screenshot', icon: 'CameraAiLine', onClick: fn() },
-      { label: 'Capture area', icon: 'CropLine', onClick: fn() },
-    ],
-    // the `/` slash-commands control (a stand-in for the Qonsole completions dropdown)
-    toolbarStart: (
-      <ReqoreButton
-        icon='SlashCommands2'
-        minimal
-        flat
-        size='small'
-        customTheme={{ main: 'custom1' }}
-        tooltip='Slash commands'
-      />
-    ),
-    // the design-session compass, left of send — exactly where QonsoleInput puts it
-    rightActions: (
-      <ReqoreButton
-        icon='Compass3Line'
-        minimal
-        flat
-        size='small'
-        customTheme={{ main: 'custom1' }}
-        tooltip='Start a design session'
-      />
-    ),
-  },
-  async play({ canvasElement }) {
-    // rich editor + the icon-only send (no "Send" label) render
-    await expect(canvasElement.querySelector('[contenteditable="true"]')).not.toBeNull();
-    await expect(within(canvasElement).queryByText('Send')).not.toBeInTheDocument();
-  },
-};
-
-/** `disabled` replaces the whole composer with a muted notice. */
-export const Disabled: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the disabled state, where the whole composer is replaced by a muted notice showing the disabledReason.',
-      },
-    },
-  },
-  args: { disabled: true, disabledReason: 'This channel is read-only.' },
-  async play({ canvasElement }) {
-    await expect(within(canvasElement).getByText('This channel is read-only.')).toBeInTheDocument();
-    await expect(canvasElement.querySelector('textarea')).toBeNull();
-  },
-};