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

package/src/components/form/fields/template/TemplateText.tsx

@@ -1,115 +0,0 @@
-// Copyright 2026 Qore Technologies, s.r.o.
-import { ReqoreTag } from '@qoretechnologies/reqore';
-import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { memo } from 'react';
-import { IRichtextSegment } from '../../../../helpers/common';
-import {
-  findTemplate,
-  getTemplateTagStyle,
-  templateTooltip,
-  TTemplateMeta,
-} from '../../../../helpers/templates';
-
-export interface ITemplateTextProps {
-  /** Prose runs and reference chips, from `templateTextSegments` or
-   *  `richtextToSegments` — both produce the same shape on purpose. */
-  segments: IRichtextSegment[];
-  /** The catalogue the chips are named and explained from. */
-  templates?: IReqoreFormTemplates;
-  /**
-   * A read-only row is the ONLY rendering its value gets, so it wraps and shows
-   * every chip. An editable row's value line is a one-line summary you click to
-   * open, so it clips instead of growing the row.
-   */
-  full?: boolean;
-  className?: string;
-}
-
-/**
- * Flattens the line breaks in one prose segment of a one-line SUMMARY.
- *
- * Every other value type reaches the collapsed row through
- * `whiteSpace: 'nowrap'`, which collapses newlines for free. This renderer is
- * the only one that opts into `'pre'` — it has to, or the space separating a
- * word from the chip beside it is dropped — and `pre` also honours the
- * newlines, which `nowrap` would have eaten.
- *
- * So a genuinely multi-line value (an alert rule's Gmail message body is five
- * `\n`-separated lines) gave every segment after the first a blank first line.
- * The wrapper centres its items, so a two-line-tall box centred against
- * one-line chips put every word 12px below the chip beside it, and the row read
- * as a staircase. Measured on supah: prose boxes 30px against 14px chips.
- *
- * A space, not nothing: consecutive prose segments are merged before they get
- * here, so a value with a break and no chip between its lines would otherwise
- * lose the word boundary entirely.
- */
-const collapseSummaryBreaks = (text: string): string => text.replace(/\s*\r?\n\s*/g, ' ');
-
-/**
- * A value that mentions template references, drawn for READING.
- *
- * One renderer, because a value that reads two ways depending on which surface
- * shows it is the defect this exists to close: a skip-when predicate read
- * `$._case.mode != 'simulate'` on the compact row while the editor it opens
- * drew the same reference as a named chip.
- *
- * The literal text around a reference is the AUTHOR'S, and it survives exactly
- * as typed — a predicate is a comparison they wrote, and only the reference in
- * it is the thing the template mechanism exists to name.
- *
- * The chip is `ReqoreTag`, the same one `ReadOnlyTemplateTag` and the rich-text
- * editor use, with the same `$`-icon, the same intent scheme
- * (`getTemplateTagStyle`) and the same hover card (`templateTooltip`), so a
- * reference looks identical wherever it is shown.
- */
-export const TemplateText = memo(({ segments, templates, full, className }: ITemplateTextProps) => (
-  <span
-    className={`reqraft-template-text${className ? ` ${className}` : ''}`}
-    style={{
-      display: 'inline-flex',
-      alignItems: 'center',
-      gap: 4,
-      minWidth: 0,
-      maxWidth: '100%',
-      ...(full ? { flexWrap: 'wrap' } : { overflow: 'hidden' }),
-    }}
-  >
-    {segments.map((segment, index) =>
-      segment.kind === 'tag' ?
-        <ReqoreTag
-          key={`tag-${index}`}
-          className='reqraft-template-chip'
-          size='tiny'
-          // The chip's label has to be the same size as the prose it is embedded
-          // in. The wrapper centres boxes, so two different text sizes centred
-          // against each other cannot share a baseline and the chips visibly
-          // float above the words. Inheriting makes centring align the baselines
-          // too, at whatever font size the consuming app uses.
-          style={{ fontSize: 'inherit' }}
-          icon='ExchangeDollarLine'
-          label={segment.text || segment.value}
-          // The same card the chosen-template chip shows: what the value IS, not
-          // the reference that names it.
-          tooltip={templateTooltip(templates, segment.value || '')}
-          {...getTemplateTagStyle(
-            (templates ? findTemplate(templates, segment.value || '') : undefined)?.metadata as
-              | TTemplateMeta
-              | undefined
-          )}
-        />
-      : <span
-          key={`text-${index}`}
-          className='reqraft-template-prose'
-          // `pre`, not the row's `nowrap`: the single space that separates a
-          // word from the chip beside it is real content here, and collapsing
-          // it would join them. A read row keeps the newlines too.
-          style={{ whiteSpace: full ? 'pre-wrap' : 'pre' }}
-        >
-          {full ? segment.text : collapseSummaryBreaks(segment.text)}
-        </span>
-    )}
-  </span>
-));
-
-TemplateText.displayName = 'TemplateText';

package/src/components/form/fields/template/__fixtures__/longExampleValue.ts

@@ -1,7 +0,0 @@
-/* A deterministic "whole base64 file" example value — the payload class the
-   example-value modal exists for (an email attachment body). No spaces on
-   purpose: the unbroken run is what breaks naive rendering. The sentinel
-   proves a consumer holds the value to the very end. */
-export const LONG_EXAMPLE_VALUE = `${'JVBERi0xLjcKJcTl8uXrp9Og0MTGCjQgMCBvYmoKPDwvRmlsdGVyL0ZsYXRlRGVjb2RlCg=='.repeat(
-  90
-)}THE_VERY_END`;

package/src/components/form/fields/template/__fixtures__/multiLevelTemplates.json

@@ -1,147 +0,0 @@
-{
-  "_context": {
-    "display_name": "Context Data",
-    "short_desc": "Data from the current execution context",
-    "app": "Qorus",
-    "logo": "https://hq.qoretechnologies.com:8092/api/public/apps/Qorus/qorus-logo.svg",
-    "internal": true,
-    "items": [
-      {
-        "name": "current_timestamp",
-        "display_name": "Current Timestamp",
-        "short_desc": "The current timestamp as a date/time value",
-        "desc": "The current timestamp as a date/time value",
-        "value": "$timestamp:now",
-        "type": "date",
-        "example_value": "2024-01-17T13:46:25.899859+01:00"
-      },
-      {
-        "name": "test_deep_hash",
-        "display_name": "Testing Hash",
-        "short_desc": "Hash for Testing",
-        "desc": "Hash for Testing",
-        "value": "$local:hash",
-        "type": "hash",
-        "example_value": "{ some: hash }",
-        "items": [
-          {
-            "name": "test_deep_hash_item",
-            "display_name": "Testing String Item",
-            "short_desc": "String Item for Testing",
-            "desc": "String Item for Testing",
-            "value": "$local:string",
-            "type": "string",
-            "example_value": "Test"
-          },
-          {
-            "name": "test_deep_hash_item2",
-            "display_name": "Testing Int Item ",
-            "short_desc": "Int Item 2 for Testing",
-            "desc": "Int Item for Testing",
-            "value": "$local:int",
-            "type": "int",
-            "example_value": 42
-          },
-          {
-            "name": "test_deep_hash_item3",
-            "display_name": "Testing List Item ",
-            "short_desc": "List Item for Testing",
-            "desc": "List Item for Testing",
-            "value": "$data:{test:list}",
-            "items": [
-              {
-                "name": "test_deep_hash_item3_item",
-                "display_name": "Testing List Item",
-                "short_desc": "Deep List Item for Testing",
-                "desc": "Deep List Item for Testing",
-                "value": "$data:{deep:test:list}",
-                "type": "string",
-                "example_value": "Test"
-              }
-            ],
-            "type": "list",
-            "example_value": "[test1, test2, test3]"
-          },
-          {
-            "name": "test_deep_hash_item4",
-            "display_name": "Testing Hash Item ",
-            "short_desc": "Hash Item for Testing",
-            "desc": "Hash Item for Testing",
-            "value": "$data:{test:hash}",
-            "type": "hash",
-            "items": [
-              {
-                "name": "test_deep_hash_item",
-                "display_name": "Testing String Item",
-                "short_desc": "String Item for Testing",
-                "desc": "String Item for Testing",
-                "value": "$deep:local:string",
-                "type": "string",
-                "example_value": "Test"
-              },
-              {
-                "name": "test_deep_hash_item2",
-                "display_name": "Testing Int Item ",
-                "short_desc": "Int Item 2 for Testing",
-                "desc": "Int Item for Testing",
-                "value": "$deep:local:int",
-                "type": "int",
-                "example_value": 42
-              }
-            ],
-            "example_value": "{ key1: 'value1', key2: 'value2' }"
-          }
-        ]
-      },
-      {
-        "name": "test_deep_hash_item10",
-        "display_name": "Testing List Item ",
-        "short_desc": "List Item for Testing",
-        "desc": "List Item for Testing",
-        "value": "$data:{test:list}",
-        "items": [
-          {
-            "name": "test_deep_hash_item3_item",
-            "display_name": "Testing List Item",
-            "short_desc": "Deep List Item for Testing",
-            "desc": "Deep List Item for Testing",
-            "value": "$data:{deep:test:list}",
-            "type": "string",
-            "example_value": "Test"
-          },
-          {
-            "name": "test_deep_hash_item4",
-            "display_name": "Testing Hash Item ",
-            "short_desc": "Hash Item for Testing",
-            "desc": "Hash Item for Testing",
-            "value": "$data:{test-in-list:hash}",
-            "type": "hash",
-            "items": [
-              {
-                "name": "test_deep_hash_item",
-                "display_name": "Testing String Item",
-                "short_desc": "String Item for Testing",
-                "desc": "String Item for Testing",
-                "value": "$deep:local:string",
-                "type": "string",
-                "example_value": "Test"
-              },
-              {
-                "name": "test_deep_hash_item2",
-                "display_name": "Testing Int Item ",
-                "short_desc": "Int Item 2 for Testing",
-                "desc": "Int Item for Testing",
-                "value": "$deep:local:int",
-                "type": "int",
-                "example_value": 42
-              }
-            ],
-            "example_value": "{ key1: 'value1', key2: 'value2' }"
-          }
-        ],
-        "type": "list",
-        "example_value": "[test1, test2, test3]"
-      }
-    ]
-  }
-}

package/src/components/form/fields/template/__fixtures__/templates.json

@@ -1,83 +0,0 @@
-{
-  "_context": {
-    "display_name": "Context Data",
-    "short_desc": "Data from the current execution context",
-    "app": "Qorus",
-    "logo": "https://hq.qoretechnologies.com:8092/api/public/apps/Qorus/qorus-logo.svg",
-    "internal": true,
-    "items": [
-      {
-        "name": "current_timestamp",
-        "display_name": "Current Timestamp",
-        "short_desc": "The current timestamp as a date/time value",
-        "desc": "The current timestamp as a date/time value",
-        "value": "$timestamp:now",
-        "type": "date",
-        "example_value": "2024-01-17T13:46:25.899859+01:00"
-      },
-      {
-        "name": "day_end",
-        "display_name": "Day End",
-        "short_desc": "The end of the day; the timestamp at midnight of the following day",
-        "desc": "The end of the day (or start of the next day); the timestamp at midnight of the following day",
-        "example_value": "2024-01-18T00:00:00.000000+01:00",
-        "value": "$timestamp:next_midnight",
-        "type": "date"
-      },
-      {
-        "name": "day_start",
-        "display_name": "Day Start",
-        "short_desc": "The start of the day; the timestamp at midnight of the current day",
-        "desc": "The start of the day; the timestamp at midnight of the current day",
-        "example_value": "2024-01-17T00:00:00.000000+01:00",
-        "value": "$timestamp:last_midnight",
-        "type": "date"
-      },
-      {
-        "name": "timegm",
-        "display_name": "Epoch Seconds",
-        "short_desc": "The number of seconds after the UNIX epoch",
-        "desc": "The number of seconds after the UNIX epoch (`1970-01-01 UTC`)",
-        "example_value": 1705496417,
-        "value": "$timestamp:timegm",
-        "type": "int"
-      },
-      {
-        "name": "id",
-        "display_name": "Interface ID",
-        "short_desc": "The internal ID of the interface",
-        "desc": "The internal ID of the interface",
-        "value": "$local:id",
-        "type": "int",
-        "example_value": 100
-      },
-      {
-        "name": "name",
-        "display_name": "Interface Name",
-        "short_desc": "The name of the interface",
-        "desc": "The name of the interface",
-        "example_value": "my-interface",
-        "value": "$local:name",
-        "type": "string"
-      },
-      {
-        "name": "type",
-        "display_name": "Interface Type",
-        "short_desc": "The type of interface",
-        "desc": "The type of interface: `workflow`, `service`, or `job`",
-        "example_value": "job",
-        "value": "$local:type",
-        "type": "string"
-      },
-      {
-        "name": "version",
-        "display_name": "Interface Version",
-        "short_desc": "The version of the interface",
-        "desc": "The version of the interface",
-        "example_value": "1.0",
-        "value": "$local:version",
-        "type": "string"
-      }
-    ]
-  }
-}

package/src/components/form/fields/timeout/Timeout.stories.tsx

@@ -1,228 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fireEvent, fn, userEvent, waitFor, within } from 'storybook/test';
-import { useState } from 'react';
-import { StoryMeta } from '../../../../types';
-import { TimeoutFormField } from './Timeout';
-
-const meta = {
-  component: TimeoutFormField,
-  title: 'Components/Form/Timeout',
-  args: {
-    onChange: fn(),
-    'aria-label': 'Timeout amount',
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-    return (
-      <TimeoutFormField
-        {...args}
-        value={value}
-        onChange={(v) => {
-          args.onChange?.(v);
-          setValue(v);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof TimeoutFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Timeout field with no value — the unit selector sits on ms. Typing a number fires onChange with that many milliseconds.',
-      },
-    },
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText('Timeout amount');
-    await expect(input).toBeInTheDocument();
-    await expect(canvas.getByText('ms')).toBeInTheDocument();
-    await userEvent.type(input, '42');
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(42), { timeout: 5000 });
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    value: 45000,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Timeout field pre-populated with 45000 milliseconds — shown as 45 with the seconds unit selected, the largest unit that represents the value exactly.',
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByDisplayValue('45')).toBeInTheDocument();
-    await expect(canvas.getByText('seconds')).toBeInTheDocument();
-  },
-};
-
-export const Mobile: Story = {
-  args: {
-    value: 45000,
-    // The phone presentation is prop-forced so the play is deterministic at
-    // any test-browser width; without the prop the field switches on the
-    // viewport's own phone-width flag.
-    abbreviateUnits: true,
-  },
-  parameters: {
-    // Capture at phone size; the selector abbreviation is prop-forced above.
-    qlip: { viewport: { width: 390, height: 844 } },
-    docs: {
-      description: {
-        story:
-          'Renders the phone presentation of the Timeout field with 45000 milliseconds — the closed unit selector reads "s", while the open picker keeps the full seconds/minutes/hours names.',
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByDisplayValue('45')).toBeInTheDocument();
-    await fireEvent.click(canvas.getByText('s'));
-    const body = within(canvasElement.ownerDocument.body);
-    await waitFor(() => expect(body.getByText('minutes')).toBeInTheDocument(), { timeout: 5000 });
-    await expect(body.getByText('hours')).toBeInTheDocument();
-  },
-};
-
-export const WithInexactValue: Story = {
-  args: {
-    value: 90500,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Timeout field with 90500 milliseconds — no larger unit divides it evenly, so it stays 90500 on the ms unit instead of rounding to 90.5 seconds.',
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByDisplayValue('90500')).toBeInTheDocument();
-    await expect(canvas.getByText('ms')).toBeInTheDocument();
-  },
-};
-
-export const UnitSwitch: Story = {
-  args: {
-    value: 45000,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Timeout field with 45000 milliseconds (45 seconds). Switching the unit to minutes re-interprets the shown amount and fires onChange with 45 minutes in milliseconds.',
-      },
-    },
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    await fireEvent.click(await canvas.findByText('seconds'));
-    const body = within(canvasElement.ownerDocument.body);
-    await waitFor(() => expect(body.getByText('minutes')).toBeInTheDocument(), { timeout: 5000 });
-    await fireEvent.click(body.getByText('minutes'));
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(2700000), { timeout: 5000 });
-    await expect(canvas.getByDisplayValue('45')).toBeInTheDocument();
-  },
-};
-
-export const TypingConverts: Story = {
-  args: {
-    value: 45000,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Timeout field with 45000 milliseconds (45 seconds). Clearing the amount and typing 90 fires onChange with 90 seconds converted to milliseconds.',
-      },
-    },
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const input = await canvas.findByDisplayValue('45');
-    await userEvent.clear(input);
-    await userEvent.type(input, '90');
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(90000), { timeout: 5000 });
-    await expect(canvas.getByText('seconds')).toBeInTheDocument();
-  },
-};
-
-export const KeepsUnitWhileTyping: Story = {
-  args: {
-    value: 45000,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Timeout field with 45 seconds. Typing 120 — a minute-exact amount — keeps the seconds unit instead of auto-promoting to 2 minutes, and emits 120 seconds in milliseconds.',
-      },
-    },
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const input = await canvas.findByDisplayValue('45');
-    await userEvent.clear(input);
-    await userEvent.type(input, '120');
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(120000), { timeout: 5000 });
-    await expect(canvas.getByDisplayValue('120')).toBeInTheDocument();
-    await expect(canvas.getByText('seconds')).toBeInTheDocument();
-  },
-};
-
-export const ClearResetsToZero: Story = {
-  args: {
-    value: 45000,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the Timeout field with 45 seconds. Clicking the amount input's clear icon resets the value to 0 milliseconds while the seconds unit stays selected.",
-      },
-    },
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    await canvas.findByDisplayValue('45');
-    const clearButton = canvasElement.querySelector('.reqore-clear-input-button');
-    await expect(clearButton).toBeInTheDocument();
-    await fireEvent.click(clearButton!);
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith(0), { timeout: 5000 });
-    await expect(canvas.getByDisplayValue('0')).toBeInTheDocument();
-    await expect(canvas.getByText('seconds')).toBeInTheDocument();
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    value: 45000,
-    readOnly: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Timeout field with 45 seconds in read-only mode — the amount input is marked readonly and the unit selector is disabled.',
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = await canvas.findByDisplayValue('45');
-    await expect(input).toHaveAttribute('readonly');
-    await expect(canvas.getByText('seconds').closest('button')).toBeDisabled();
-  },
-};

package/src/components/form/fields/timeout/Timeout.tsx

@@ -1,87 +0,0 @@
-import { ReqoreControlGroup, useReqoreProperty } from '@qoretechnologies/reqore';
-import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
-import { memo, useState } from 'react';
-import {
-  getLargestExactTimeoutUnit,
-  TIMEOUT_UNITS,
-  timeoutUnitSymbol,
-  timeoutUnitToMs,
-  TTimeoutUnit,
-} from '../../../../helpers/common';
-import NumberFormField from '../number/Number';
-import { SelectFormField } from '../select/Select';
-
-const UNIT_ITEMS = TIMEOUT_UNITS.map(({ value }) => ({ value }));
-
-export interface ITimeoutFormFieldProps {
-  /** Integer count of milliseconds — the shape the server stores. */
-  value?: number;
-  onChange?: (value?: number) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: TSizes;
-  /** Show unit symbols (ms/s/m/h) instead of full names. Defaults to the
-   * viewport's phone-width flag. */
-  abbreviateUnits?: boolean;
-  /** Unknown props (`aria-label`, …) forward to the primary (amount) input. */
-  [key: string]: unknown;
-}
-
-/**
- * A timeout input — a numeric amount stacked with a unit selector
- * (ms/seconds/minutes/hours). The field value stays the integer millisecond
- * count the server stores; the unit only scales the display, and changing it
- * re-interprets the shown amount (45 seconds → 45 minutes).
- */
-export const TimeoutFormField = memo(
-  ({ value, onChange, disabled, readOnly, size, abbreviateUnits, ...rest }: ITimeoutFormFieldProps) => {
-    const isMobile = useReqoreProperty('isMobile');
-    const shortUnits = abbreviateUnits ?? isMobile;
-    // The ms value alone can't say whether 45000 should read "45 seconds" or
-    // "45000 ms", so the unit is pinned once the user touches the field.
-    // Until then — and whenever the controlled value stops dividing evenly by
-    // the pin (a parent-side reset) — the largest exact unit wins, so the
-    // display never rounds.
-    const [pinnedUnit, setPinnedUnit] = useState<TTimeoutUnit>();
-    const unit =
-      pinnedUnit && (value == null || value % timeoutUnitToMs(pinnedUnit) === 0)
-        ? pinnedUnit
-        : getLargestExactTimeoutUnit(value);
-    const amount = value != null ? value / timeoutUnitToMs(unit) : undefined;
-
-    return (
-      <ReqoreControlGroup stack fluid size={size}>
-        <NumberFormField
-          {...(rest as any)}
-          fluid
-          type='int'
-          value={amount}
-          onChange={(next) => {
-            setPinnedUnit(unit);
-            onChange?.(typeof next === 'number' ? next * timeoutUnitToMs(unit) : undefined);
-          }}
-          disabled={disabled}
-          readOnly={readOnly}
-        />
-        <SelectFormField
-          fixed
-          hideItemCount
-          items={UNIT_ITEMS}
-          // Where space is tight only the trigger abbreviates — the open
-          // picker keeps the full unit names.
-          valueLabel={shortUnits ? timeoutUnitSymbol(unit) : undefined}
-          value={unit}
-          onChange={(next) => {
-            setPinnedUnit(next as TTimeoutUnit);
-            if (amount != null) {
-              onChange?.(amount * timeoutUnitToMs(next as TTimeoutUnit));
-            }
-          }}
-          disabled={disabled || readOnly}
-        />
-      </ReqoreControlGroup>
-    );
-  }
-);
-
-export default TimeoutFormField;