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

package/src/components/form/fields/markdown/MarkdownView.tsx

@@ -1,222 +0,0 @@
-import { useReqoreTheme } from '@qoretechnologies/reqore';
-import { getReadableColor } from '@qoretechnologies/reqore/dist/helpers/colors';
-import type { TMarkdownRenderer } from '../../../Description/markdownRendererContext';
-import ReactMarkdown from 'react-markdown';
-import styled from 'styled-components';
-
-/**
- * Draws a markdown value.
- *
- * Both places a markdown field shows its content go through this: the live
- * preview beside the editor, and the read-first row's expandable inset. A host
- * that already owns a markdown renderer -- heading scale, code treatment, GFM
- * tables -- supplies one and both surfaces adopt it at once; everyone else gets
- * the built-in view below. Same seam as `codePreviewRenderer`, for the same
- * reason: the styling of rendered prose belongs to the app, not to a form
- * engine.
- *
- * @param value the markdown source
- * @param compact render for a constrained container (a read-first row inset,
- * a narrow preview column) -- tighter margins, smaller headings
- * @param name the field's name, when rendering for a field
- * @param schema the field's schema, when the form has one for it
- * @param options every field's schema in the same scope
- * @param values every field's current value in the same scope
- */
-
-interface IStyledMarkdownViewProps {
-  $compact?: boolean;
-  $textColor: string;
-  $mutedColor: string;
-  $linkColor: string;
-  $tint: string;
-  $border: string;
-}
-
-/**
- * Colours come from the active Reqore theme rather than the hardcoded
- * `rgba(255, 255, 255, …)` this used to carry: a form renders on whatever
- * surface the host gives it, and on a light theme white-on-white prose is
- * simply invisible.
- */
-const StyledMarkdownView = styled.div<IStyledMarkdownViewProps>`
-  color: ${({ $textColor }) => $textColor};
-  font-size: ${({ $compact }) => ($compact ? '12px' : '14px')};
-  line-height: 1.55;
-  word-break: break-word;
-  overflow-wrap: anywhere;
-  max-width: 100%;
-
-  /* Hug the container's own padding instead of adding a blank first/last line. */
-  > *:first-child {
-    margin-top: 0;
-  }
-  > *:last-child {
-    margin-bottom: 0;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: ${({ $compact }) => ($compact ? '8px 0 4px' : '14px 0 7px')};
-    line-height: 1.3;
-    font-weight: 600;
-  }
-
-  /* A description authored as a document routinely opens with a heading; at
-     browser defaults that outgrows the panel title above it. */
-  h1 {
-    font-size: ${({ $compact }) => ($compact ? '1.05em' : '1.35em')};
-  }
-  h2 {
-    font-size: ${({ $compact }) => ($compact ? '1.02em' : '1.2em')};
-  }
-  h3 {
-    font-size: 1.1em;
-  }
-  h4,
-  h5,
-  h6 {
-    font-size: 1em;
-    opacity: 0.85;
-  }
-
-  p {
-    margin: ${({ $compact }) => ($compact ? '4px 0' : '8px 0')};
-  }
-
-  a {
-    color: ${({ $linkColor }) => $linkColor};
-    text-decoration: underline;
-  }
-
-  blockquote {
-    margin: 8px 0;
-    padding-left: 12px;
-    border-left: 2px solid ${({ $border }) => $border};
-    color: ${({ $mutedColor }) => $mutedColor};
-    font-style: italic;
-  }
-
-  ul,
-  ol {
-    margin: 4px 0;
-    padding-left: 20px;
-  }
-
-  li {
-    margin: 2px 0;
-  }
-
-  /* Long unbroken tokens in code (URLs, base64, raw payloads) must reflow
-     inside the container rather than widening it: a pre does not wrap by
-     default and a code span has no overflow-wrap. */
-  pre {
-    margin: 6px 0;
-    padding: 8px 10px;
-    border-radius: 4px;
-    background: ${({ $tint }) => $tint};
-    border: 1px solid ${({ $border }) => $border};
-    white-space: pre-wrap;
-    word-break: break-word;
-    overflow-wrap: anywhere;
-    max-width: 100%;
-  }
-
-  code {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    font-size: 0.92em;
-    background: ${({ $tint }) => $tint};
-    border: 1px solid ${({ $border }) => $border};
-    border-radius: 3px;
-    padding: 0.05em 0.35em;
-    white-space: pre-wrap;
-    word-break: break-word;
-    overflow-wrap: anywhere;
-  }
-
-  /* Block code owns the whole pre surface; it must not also be chipped.
-     (No backticks in this comment: it sits inside a template literal.) */
-  pre code {
-    background: none;
-    border: 0;
-    padding: 0;
-    font-size: 1em;
-  }
-
-  table {
-    border-collapse: collapse;
-    margin: 6px 0;
-    max-width: 100%;
-  }
-
-  th,
-  td {
-    border: 1px solid ${({ $border }) => $border};
-    padding: 4px 10px;
-    text-align: left;
-    vertical-align: top;
-  }
-
-  th {
-    background: ${({ $tint }) => $tint};
-  }
-
-  img {
-    max-width: 100%;
-  }
-
-  hr {
-    border: 0;
-    border-top: 1px solid ${({ $border }) => $border};
-    margin: 10px 0;
-  }
-`;
-
-export interface IMarkdownViewProps {
-  value: string;
-  compact?: boolean;
-  className?: string;
-}
-
-/** The built-in markdown view: plain CommonMark, styled from the active theme. */
-export const MarkdownView = ({ value, compact, className }: IMarkdownViewProps) => {
-  const theme = useReqoreTheme();
-  const textColor = getReadableColor(theme);
-
-  return (
-    <StyledMarkdownView
-      className={className}
-      $compact={compact}
-      $textColor={textColor}
-      $mutedColor={getReadableColor(theme, undefined, undefined, true)}
-      $linkColor={theme?.intents?.info ?? textColor}
-      $tint={`${textColor}14`}
-      $border={`${textColor}24`}
-    >
-      <ReactMarkdown>{value}</ReactMarkdown>
-    </StyledMarkdownView>
-  );
-};
-
-/**
- * The renderer used when a host has not supplied one.
- *
- * The context itself lives in `Description/markdownRendererContext` — ONE
- * context for the whole package, so a host that supplies a renderer reaches
- * every markdown surface at once. This module previously declared a second one,
- * which is the same drift in miniature: two contexts means a host can satisfy
- * one and not the other, and nothing tells it which surface it missed.
- *
- * This is only the fallback a caller reaches for when the shared context is
- * empty and the surface still has to draw something — the field's own live
- * preview, which is useless blank.
- */
-export const defaultMarkdownRenderer: TMarkdownRenderer = ({ value, compact }) => (
-  <MarkdownView value={value} compact={compact} />
-);
-
-export default MarkdownView;

package/src/components/form/fields/multi-select/MultiSelectFormField.tsx

@@ -1,139 +0,0 @@
-import { ReqoreMultiSelect } from '@qoretechnologies/reqore';
-import { TReqoreMultiSelectItem } from '@qoretechnologies/reqore/dist/components/MultiSelect';
-import { IQorusAllowedValue } from '@qoretechnologies/ts-toolkit';
-import { memo, useMemo } from 'react';
-import {
-  getSelectItemShortDescription,
-  getSelectItemUnavailability,
-  UNAVAILABLE_ITEM_CLASS,
-} from '../select/SelectCollection';
-
-export interface IMultiSelectFormFieldProps {
-  /** Currently selected values (plain scalars) */
-  value?: unknown[];
-  /** The fixed list of allowed items */
-  items: IQorusAllowedValue[];
-  canCreateItems?: boolean;
-  onChange: (value: unknown[]) => void;
-  disabled?: boolean;
-  size?: string;
-}
-
-/**
- * Multi-select built on top of ReqoreMultiSelect. Used by FormField for
- * `multi-select` fields and `list` fields with `element_allowed_values`.
- * Aligned to qorus-ide's `MultiSelectField` portable behaviour
- * (FIELD_STACK_REPORT batch): selected values missing from the allowed list
- * still render as chips, a `*` wildcard collapses the selection and disables
- * the other items, and item chips wrap with the description as tooltip. The
- * IDE's editor dialog / FieldEnhancer `reference` machinery is app-coupled
- * and not ported.
- */
-export const MultiSelectFormField = memo(
-  ({ value = [], items, onChange, disabled, size, canCreateItems }: IMultiSelectFormFieldProps) => {
-    const selectedValues = useMemo<string[]>(
-      () => (value as unknown[]).map(String),
-      [JSON.stringify(value)]
-    );
-
-    /**
-     * The values this picker will not take, by their string form.
-     *
-     * Only a refusal the SERVER resolved reaches here: this component is handed
-     * the raw `allowed_values`, not the mapped items the single-value pickers
-     * build, so a value's own `depends_on` is not judged against the form —
-     * see `design/UNAVAILABLE_ALLOWED_VALUES.md`.
-     */
-    const refusedValues = useMemo<Set<string>>(
-      () =>
-        new Set(
-          items
-            .filter(
-              (item) =>
-                !!getSelectItemUnavailability({
-                  disabled: item.disabled,
-                  messages: item.messages,
-                })
-            )
-            .map((item) => String(item.value?.value ?? ''))
-        ),
-      [JSON.stringify(items)]
-    );
-
-    const reqoreItems = useMemo<TReqoreMultiSelectItem[]>(() => {
-      const base = items.map(
-        (item): TReqoreMultiSelectItem => {
-          const description = getSelectItemShortDescription(item);
-          /* Never reqore's `disabled` for a refused VALUE: it applies
-             `DisabledElement` (`pointer-events: none`), which takes the row's
-             tooltip with it — the one place the whole reason fits. The
-             refusal itself is in `onValueChange` below, because reqore owns
-             this list's selection and there is no per-row handler to drop. */
-          const unavailable = getSelectItemUnavailability({
-            disabled: item.disabled,
-            messages: item.messages,
-          });
-
-          return {
-            value: item.value?.value as string,
-            label: item.display_name ?? String(item.value?.value ?? ''),
-            description:
-              unavailable ?
-                [unavailable.title, unavailable.content, description].filter(Boolean).join(' — ')
-              : description,
-            tooltip: unavailable ? unavailable.content : undefined,
-            icon: unavailable ? ('LockLine' as const) : undefined,
-            className: unavailable ? UNAVAILABLE_ITEM_CLASS : undefined,
-            effect: unavailable ? { opacity: 0.55 } : undefined,
-            readOnly: !!unavailable,
-            wrap: true,
-            /* IDE parity: when `*` is selected, every other item is disabled.
-               That one stays reqore's `disabled` — the wildcard is a state of
-               the SELECTION rather than a refusal of the value, and it has no
-               reason of its own to protect. */
-            disabled: selectedValues.includes('*') && item.value?.value !== '*',
-          };
-        }
-      );
-
-      // IDE parity: selected values that aren't in the allowed list still
-      // render as (removable) items.
-      const extras = selectedValues
-        .filter((val) => !base.some((item) => item.value === val))
-        .map((val): TReqoreMultiSelectItem => ({ value: val, label: val, wrap: true }));
-
-      return [...base, ...extras];
-    }, [JSON.stringify(items), JSON.stringify(selectedValues)]);
-
-    return (
-      <ReqoreMultiSelect
-        items={reqoreItems}
-        value={selectedValues}
-        onValueChange={(selected) => {
-          /* The refusal, for the same reason the rows carry no `disabled`: the
-             row itself has no handler to withhold, so this is where a refused
-             value is dropped. A value already HELD is kept even once it is
-             refused — the picker will not take it again, but clearing an
-             answer the author gave because a sibling edit closed the value is
-             worse than holding one the form can no longer offer.
-
-             Before the wildcard, so that a refused `*` is refused too. */
-          const accepted = selected.filter(
-            (val) => selectedValues.includes(val) || !refusedValues.has(val)
-          );
-
-          // IDE parity: picking the `*` wildcard collapses the selection.
-          onChange?.(accepted.includes('*') ? ['*'] : (accepted as unknown[]));
-        }}
-        disabled={disabled}
-        size={size as any}
-        selectedItemSize={size as any}
-        canCreateItems={canCreateItems}
-        enterKeySelects
-        canRemoveItems
-        showNoItemsMessage={false}
-        selectorProps={{ useTargetWidth: false }}
-      />
-    );
-  }
-);

package/src/components/form/fields/number/Number.stories.tsx

@@ -1,159 +0,0 @@
-import { ReqoreControlGroup } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-import { useState } from 'react';
-import { StoryMeta } from '../../../../types';
-import { NumberFormField } from './Number';
-
-const meta = {
-  component: NumberFormField,
-  title: 'Components/Form/Number',
-  args: {
-    'aria-label': 'Number',
-    onChange: fn(),
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-
-    return (
-      <ReqoreControlGroup>
-        <NumberFormField
-          {...args}
-          value={value}
-          onChange={(value) => {
-            args.onChange?.(value);
-            setValue(value);
-          }}
-        />
-      </ReqoreControlGroup>
-    );
-  },
-} as StoryMeta<typeof NumberFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Integer: Story = {
-  args: {
-    value: 42,
-    type: 'int',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Number field in integer mode with 42 pre-populated. Typing a new integer updates the value and fires onChange after the debounce.',
-      },
-    },
-  },
-  async play({ args, canvasElement }) {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText('Number');
-
-    await expect(input).toBeInTheDocument();
-    await expect(input).toHaveValue('42');
-    // typed freely, on a numeric keyboard
-    await expect(input).toHaveAttribute('type', 'text');
-    await expect(input).toHaveAttribute('inputmode', 'numeric');
-
-    await userEvent.clear(input);
-    await userEvent.type(input, '10');
-    await expect(input).toHaveValue('10');
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(10), { timeout: 500 });
-  },
-};
-
-export const Float: Story = {
-  args: {
-    value: 3.14,
-    type: 'float',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Number field in float mode with 3.14 pre-populated — the input asks for a decimal keyboard and accepts decimals.',
-      },
-    },
-  },
-  async play({ args, canvasElement }) {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText('Number');
-
-    await expect(input).toHaveValue('3.14');
-    await expect(input).toHaveAttribute('inputmode', 'decimal');
-
-    await userEvent.clear(input);
-    await userEvent.type(input, '10.9');
-    await expect(input).toHaveValue('10.9');
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(10.9), { timeout: 500 });
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    type: 'int',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Renders the Number field in integer mode with no value — the input mounts empty.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText('Number');
-
-    await expect(input).toBeInTheDocument();
-    await expect(input).toHaveValue('');
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    value: 99,
-    type: 'int',
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Number field with a value but disabled — the input shows the value and rejects further edits.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText('Number');
-
-    await expect(input).toBeDisabled();
-    await expect(input).toHaveValue('99');
-  },
-};
-
-export const TypedFreely: Story = {
-  args: {
-    value: 7,
-    type: 'int',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Number field in integer mode after typing what is not a number: 12abc stays as typed (the form flags it, it is not cut to 12), and a template ($local:quantity) or an expression (@qty * 2) is passed on as typed for the field around it to take up.',
-      },
-    },
-  },
-  async play({ args, canvasElement }) {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText('Number');
-    for (const text of ['12abc', '@qty * 2', '$local:quantity']) {
-      await userEvent.clear(input);
-      await userEvent.type(input, text);
-      await expect(input).toHaveValue(text);
-      await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(text), { timeout: 500 });
-    }
-  },
-};

package/src/components/form/fields/number/Number.tsx

@@ -1,160 +0,0 @@
-import { ReqoreDropdown, ReqoreInput } from '@qoretechnologies/reqore';
-import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
-import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
-import { useDebounce } from 'react-use';
-import { useEmittedValues } from '../emittedValues';
-// Const-only usage at render time — the cycle (Number → TemplateField → Number)
-// is safe the same way Field → AutoFormField → Field is.
-import { TemplatesListProps } from '../template/TemplateField';
-
-export interface INumberFormFieldProps extends Omit<IReqoreInputProps, 'value' | 'onChange' | 'type'> {
-  value?: number | string;
-  type?: 'int' | 'float';
-  onChange?: (value: number | string) => void;
-  /** Template values selectable from a focus dropdown (IDE `NumberField` parity). */
-  templates?: IReqoreFormTemplates;
-  /**
-   * The inclusive bounds the schema declares for this field (`MetaFieldInfo::min_value`).
-   *
-   * Taken under the schema's own names rather than the input's `min` / `max` because the
-   * field descriptor is spread onto this component whole, so these arrive here anyway —
-   * naming them is what keeps them off the DOM node, where React would warn about an
-   * unknown attribute, and lets the spinner agree with the validator instead of offering
-   * steps the form is about to refuse.
-   */
-  min_value?: number;
-  max_value?: number;
-}
-
-/** A whole number as typed: an optional sign and digits. */
-const WHOLE_NUMBER = /^[-+]?\d+$/;
-/** A decimal number as typed: an optional sign, digits with a point, and an exponent. */
-const DECIMAL_NUMBER = /^[-+]?(\d+\.?\d*|\.\d+)([eE][-+]?\d+)?$/;
-
-/**
- * What a typed text is: the number it writes, or - when it writes none - the text as typed. A field of a
- * number type is typed freely (David's review of qorus#646): a template (`$local:x`) or an expression
- * (`@qty * 2`) is taken up by the field around it, and anything else is kept as typed for the form to flag
- * as not a number. `parseInt` cut `12abc` to 12 without a word.
- */
-export const typedNumber = (text: string, type: 'int' | 'float'): number | string => {
-  const trimmed = text.trim();
-  return (type === 'int' ? WHOLE_NUMBER : DECIMAL_NUMBER).test(trimmed) ? Number(trimmed) : text;
-};
-
-export const NumberFormField = ({
-  onChange,
-  autoFocus,
-  type = 'int',
-  value,
-  templates,
-  min_value,
-  max_value,
-  ...rest
-}: INumberFormFieldProps) => {
-  // What is shown is what was typed; what the form gets is the number it writes, or the text when it writes
-  // none. Showing the number instead dropped a decimal point mid-typing: `10.` is 10, and `10.9` became `109`.
-  const [text, setText] = useState<string>(value === undefined || value === null ? '' : String(value));
-  const localValue = text === '' ? '' : typedNumber(text, type);
-  // The parent's echo of an emit still in flight is not a change: copying it
-  // over the local value lost what was typed since. See `EmittedValues`.
-  const emitted = useEmittedValues<number | string | undefined>();
-
-  useEffect(() => {
-    if (emitted.isEcho(value)) {
-      return;
-    }
-    if (value !== localValue) {
-      setText(value === undefined || value === null ? '' : String(value));
-    }
-  }, [value]);
-
-  useDebounce(
-    () => {
-      if (localValue !== value) {
-        emitted.record(localValue);
-        onChange?.(localValue);
-      }
-    },
-    100,
-    [localValue, onChange]
-  );
-
-  const handleChange = useCallback((rawValue: number | string): void => {
-    setText(String(rawValue));
-  }, []);
-
-  const handleInputChange = useCallback(
-    (event: ChangeEvent<HTMLInputElement>): void => {
-      handleChange(event.target.value);
-    },
-    [handleChange]
-  );
-
-  const handleResetClick = useCallback((): void => {
-    setText('0');
-    emitted.record(0);
-    onChange?.(0);
-  }, [onChange]);
-
-  const focusRules = useMemo(
-    () =>
-      autoFocus
-        ? {
-            type: 'auto' as const,
-            viewportOnly: true,
-          }
-        : undefined,
-    [autoFocus]
-  );
-
-  const handleItemSelect = useCallback((item) => setText(String(item.value)), []);
-
-  // The schema's bounds are the form's to check (a text input has no min or max); they are named in the
-  // props only to keep them off the DOM node.
-  void min_value;
-  void max_value;
-
-  // IDE `NumberField` parity: with templates the input is wrapped in a
-  // focus-opened dropdown of the template values.
-  if (templates?.items) {
-    return (
-      <ReqoreDropdown<IReqoreInputProps>
-        {...(rest as any)}
-        component={ReqoreInput}
-        fluid
-        icon='MoneyDollarCircleLine'
-        items={templates?.items}
-        filterable
-        value={text}
-        onItemSelect={handleItemSelect}
-        onChange={handleInputChange}
-        // typed freely: a number input drops what is not part of a number, so a template or an expression
-        // could not be typed; the keyboard is still a numeric one
-        type='text'
-        inputMode={type === 'int' ? 'numeric' : 'decimal'}
-        onClearClick={handleResetClick}
-        focusRules={focusRules}
-        {...TemplatesListProps}
-      />
-    );
-  }
-
-  return (
-    <ReqoreInput
-      fluid
-      icon='MoneyDollarCircleLine'
-      value={text}
-      onChange={handleInputChange}
-      // typed freely, on a numeric keyboard (see above)
-      type='text'
-      inputMode={type === 'int' ? 'numeric' : 'decimal'}
-      onClearClick={handleResetClick}
-      focusRules={focusRules}
-      {...rest}
-    />
-  );
-};
-
-export default NumberFormField;