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

package/src/components/form/engine/_structuredData/StructuredDataView.stories.tsx

@@ -1,85 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { expect } from 'storybook/test';
-import { _testsWaitForText } from '../../../../stories/Tests/utils';
-import { StructuredDataView } from './StructuredDataView';
-
-// Dev story for the engine's structured-data renderer (internal — the compact
-// hash preview and the hash edit card render through it). The generic tree is
-// ReQore's `ReqoreDataView`; what this wrapper adds — and what this story
-// exercises — are the Qorus-specific seams:
-//   1. the UI-encoded value envelope ({type, value, …} → unwrapped scalar),
-//   2. the embedded structured-text parser (YAML/JSON inside an opaque
-//      string → parsed tree, not raw text),
-//   3. the Qorus date format (server timestamp → `YYYY-MM-DD HH:mm:ss.SSS`).
-// The payload is a representative workflow order (the IDE order-detail shape).
-const ORDER_DATA_SAMPLE = {
-  order_id: 'ORD-1002',
-  workflow: 'order-process',
-  status: 'COMPLETE',
-  // 3. Qorus server timestamp (numeric offset, microsecond fraction) —
-  //    renders via formatIdeTimestamp; the raw "+02:00" must not leak.
-  created: '2026-06-10 09:14:22.512000 +02:00',
-  // 1. UI-encoded envelope — must unwrap to the scalar 500, not render as
-  //    an "Object · 2 fields" node with type/value sub-rows.
-  priority: { type: 'int', value: 500 },
-  customer: {
-    id: 'CUST-441',
-    name: 'Alpha Components',
-    tier: 'gold',
-    contacts: ['ops@alpha.example', 'billing@alpha.example'],
-  },
-  line_items: [
-    { sku: 'WIDGET-1', qty: 3, unit_price: 19.99, in_stock: true },
-    { sku: 'GASKET-7', qty: 12, unit_price: 2.5, in_stock: false },
-  ],
-  // 2. Embedded YAML in an opaque string — renders as a parsed sub-tree.
-  staticdata: '%YAML 1.2\n---\nretries: 3\nbackoff: expo\nendpoints:\n  - primary\n  - fallback\n',
-  flags: ['priority', 'reconciled'],
-  amount: 75000,
-  currency: 'EUR',
-};
-
-const meta: Meta<typeof StructuredDataView> = {
-  component: StructuredDataView,
-  title: 'Form/Engine/StructuredDataView',
-  parameters: { chromatic: { disable: true } },
-};
-
-export default meta;
-type Story = StoryObj<typeof StructuredDataView>;
-
-// Nested objects/lists collapse to "Object · N fields" / "List · N items",
-// scalar lists inline as chips, dates/numbers are type-coloured.
-export const WorkflowOrderData: Story = {
-  args: {
-    value: ORDER_DATA_SAMPLE,
-    collapsibleRoot: false,
-    // Expand deep enough that the parsed-YAML sub-tree is visible.
-    defaultExpandDepth: 3,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders StructuredDataView over a workflow-order payload — UI-encoded envelopes unwrap to scalars, embedded YAML strings parse into sub-trees and Qorus timestamps format to YYYY-MM-DD HH:mm:ss.SSS in the viewer\'s zone.',
-      },
-    },
-  },
-  play: async () => {
-    await _testsWaitForText('ORD-1002');
-    await _testsWaitForText('order-process');
-    await expect(document.querySelectorAll('.reqore-data-view-value').length).toBeGreaterThan(5);
-
-    // 1. Envelope: priority renders as the unwrapped scalar.
-    await _testsWaitForText('500');
-    // 2. Embedded YAML: parsed tree (keys/values visible), no raw source.
-    await _testsWaitForText('retries');
-    await _testsWaitForText('expo');
-    await expect(document.body.textContent?.includes('%YAML')).toBe(false);
-    // 3. Qorus date → `YYYY-MM-DD HH:mm:ss.SSS`. The hour is rendered in the
-    //    viewer's zone, so only the zone-invariant tail is pinned; the `$`
-    //    anchor means the RAW form (`…512000 +02:00`) cannot satisfy it.
-    await _testsWaitForText(/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:22\.512$/);
-    await expect(document.body.textContent?.includes('+02:00')).toBe(false);
-  },
-};

package/src/components/form/engine/_structuredData/StructuredDataView.tsx

@@ -1,75 +0,0 @@
-/**
- * Qorus-flavoured wrapper around `ReqoreDataView` (reqore >= 0.69), mirroring
- * qorus-ide's wrapper of the same name. Plugs in the Qorus-specific seams: the
- * `{type, value}` UI envelope, the embedded YAML/JSON string parser, and the
- * Qorus date parsing/formatting. Renders flat/minimal so it slots into rows.
- */
-import { ReqoreDataView, type IReqoreDataViewEnvelope } from '@qoretechnologies/reqore';
-import { memo } from 'react';
-import {
-  formatIdeTimestamp,
-  parseSerializedStructuredText,
-  qorusDateStringToIso,
-  UI_ENVELOPE_KEY_LIST,
-} from './structuredData';
-
-export interface IStructuredDataViewProps {
-  value: unknown;
-  emptyText?: string;
-  /** Sized to its content rather than stretching to the parent width. */
-  fitContent?: boolean;
-  /** Wrap the root in a collapsible "Object · N fields" summary so it
-   *  can be folded away. Defaults to `true`. */
-  collapsibleRoot?: boolean;
-  /** Show a type-label chip next to each scalar. Defaults to `false`. */
-  showTypes?: boolean;
-  /** Sections deeper than this start collapsed (reqore default applies
-   *  when omitted). */
-  defaultExpandDepth?: number;
-  /** Row click handler — `path` is the dot-path from the root. */
-  onItemClick?: (value: unknown, path: string[]) => void;
-}
-
-const QORUS_ENVELOPE: IReqoreDataViewEnvelope = {
-  typeKey: 'type',
-  valueKey: 'value',
-  allowedKeys: UI_ENVELOPE_KEY_LIST,
-};
-
-/** Bridge the Qorus date parser into reqore's `parseDate` shape — it
- *  takes (value, type?) and returns ISO (or undefined). Anything the
- *  Qorus parser doesn't recognise falls through to reqore's default. */
-const parseQorusDate = (value: string): string | undefined => qorusDateStringToIso(value);
-
-export const StructuredDataView = memo(
-  ({
-    value,
-    emptyText = 'No structured data.',
-    fitContent,
-    collapsibleRoot = true,
-    showTypes,
-    defaultExpandDepth,
-    onItemClick,
-  }: IStructuredDataViewProps) => (
-    <ReqoreDataView
-      data={value}
-      emptyText={emptyText}
-      collapsibleRoot={collapsibleRoot}
-      envelope={QORUS_ENVELOPE}
-      parseEmbedded={parseSerializedStructuredText}
-      parseDate={parseQorusDate}
-      formatDate={formatIdeTimestamp}
-      showTypes={showTypes}
-      defaultExpandDepth={defaultExpandDepth}
-      onItemClick={onItemClick}
-      transparent
-      minimal
-      flat
-      size='small'
-      rounded
-      fluid={!fitContent}
-    />
-  )
-);
-
-StructuredDataView.displayName = 'StructuredDataView';

package/src/components/form/engine/_structuredData/structuredData.ts

@@ -1,145 +0,0 @@
-import yaml from 'js-yaml';
-
-// Ported from qorus-ide's `helpers/date` (moment-based) as a native-Date
-// formatter so this copy carries no extra dependency. Same output shape:
-// `YYYY-MM-DD HH:mm:ss` (with `.SSS` only when sub-second precision exists).
-const pad = (n: number, len = 2): string => String(n).padStart(len, '0');
-export const formatIdeTimestamp = (value: string | number | Date): string => {
-  const d = value instanceof Date ? value : new Date(value);
-  if (Number.isNaN(d.getTime())) {
-    return typeof value === 'string' ? value : String(value);
-  }
-  const base = `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(
-    d.getHours()
-  )}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
-  return d.getMilliseconds() ? `${base}.${pad(d.getMilliseconds(), 3)}` : base;
-};
-
-export interface IUiEncodedValue {
-  type: string;
-  value: unknown;
-  display_name?: string;
-  short_desc?: string;
-  desc?: string;
-  ui_type?: string;
-}
-
-// The keys a Qorus UI-encoded value envelope may carry — exported as the
-// `allowedKeys` allow-list for `ReqoreDataView`'s envelope matcher.
-export const UI_ENVELOPE_KEY_LIST: ReadonlyArray<string> = [
-  'allowed_values',
-  'default',
-  'default_value',
-  'desc',
-  'display_name',
-  'readonly',
-  'required',
-  'sensitive',
-  'short_desc',
-  'type',
-  'ui_type',
-  'value',
-];
-
-const UI_ENVELOPE_KEYS = new Set(UI_ENVELOPE_KEY_LIST);
-
-const QORUS_DATE_PATTERN =
-  /^(\d{4}-\d{2}-\d{2})[ T](\d{2}:\d{2}:\d{2})(?:\.(\d{1,6}))?(?:\s+[A-Za-z]{3})?(?:\s+([+-]\d{2}):?(\d{2}))?(?:\s+\([^)]+\))?$/;
-
-export const isRecord = (value: unknown): value is Record<string, unknown> =>
-  !!value && typeof value === 'object' && !Array.isArray(value);
-
-export const isStructuredContainerValue = (value: unknown): boolean =>
-  Array.isArray(value) || isRecord(value);
-
-/**
- * A field the form materialised but left UNSET: `{type: 'int'}`, no `value` key.
- *
- * `fixOptions` omits the key entirely when the value is undefined, so this is
- * what an untouched sub-field of a schema-declared hash looks like on the wire.
- * It is an EMPTY ENVELOPE, never content — and every renderer has to agree on
- * that, because the ones that do not count the envelope's own `type` key and
- * report an unset field as "1 field" while the sub-form correctly says 0 set.
- *
- * Deliberately separate from {@link isUiEncodedValue}, which requires a `value`
- * and therefore cannot see this shape. Callers gate on knowing the field is
- * schema-declared: without a schema saying so, a `{type: …}` object could
- * legitimately be somebody's data.
- */
-export const isEmptyUiEnvelope = (value: unknown): boolean =>
-  isRecord(value) &&
-  typeof value.type === 'string' &&
-  !('value' in value) &&
-  Object.keys(value).every((key) => UI_ENVELOPE_KEYS.has(key));
-
-export const isUiEncodedValue = (value: unknown): value is IUiEncodedValue => {
-  if (!isRecord(value) || typeof value.type !== 'string' || !('value' in value)) {
-    return false;
-  }
-
-  return Object.keys(value).every((key) => UI_ENVELOPE_KEYS.has(key));
-};
-
-const normalizeYamlText = (text: string): string =>
-  text
-    .trim()
-    .replace(/^%YAML\s+([0-9]+(?:\.[0-9]+)?)\s+---\s*/i, '%YAML $1\n---\n')
-    .replace(/^---\s+([{[])/, '---\n$1');
-
-const YAML_EMBEDDED_START_PATTERN = /%YAML\b|---\s*(?:[{[])?/i;
-const STRUCTURED_TEXT_START_PATTERN = /^(%YAML\b|---\b|[{[])/i;
-
-const normalizeEmbeddedStructuredText = (text: string): string =>
-  text
-    .trim()
-    .replace(/^["']+/, '')
-    .replace(/["']+$/, '')
-    .replace(/\\n/g, '\n')
-    .replace(/\\"/g, '"')
-    .replace(/\\'/g, "'");
-
-const parseStructuredCandidate = (candidate: string): unknown | undefined => {
-  try {
-    const parsed = yaml.load(normalizeYamlText(candidate));
-    return isStructuredContainerValue(parsed) ? parsed : undefined;
-  } catch {
-    return undefined;
-  }
-};
-
-export const parseSerializedStructuredText = (
-  value: string
-): { prefix?: string; data: unknown } | undefined => {
-  const trimmed = value.trim();
-  if (!trimmed) return undefined;
-
-  if (STRUCTURED_TEXT_START_PATTERN.test(trimmed)) {
-    const direct = parseStructuredCandidate(trimmed);
-    if (direct !== undefined) return { data: direct };
-  }
-
-  const embeddedIndex = trimmed.search(YAML_EMBEDDED_START_PATTERN);
-  if (embeddedIndex > 0) {
-    const prefix = trimmed
-      .slice(0, embeddedIndex)
-      .replace(/\bError info:\s*["']?$/i, '')
-      .trim();
-    const embedded = parseStructuredCandidate(
-      normalizeEmbeddedStructuredText(trimmed.slice(embeddedIndex))
-    );
-    if (embedded !== undefined) return { prefix, data: embedded };
-  }
-
-  return undefined;
-};
-
-export const qorusDateStringToIso = (value: string): string | undefined => {
-  const match = value.trim().match(QORUS_DATE_PATTERN);
-  if (!match) return undefined;
-
-  const [, date, time, fraction, offsetHours, offsetMinutes] = match;
-  const ms = fraction ? `.${fraction.slice(0, 3).padEnd(3, '0')}` : '';
-  const offset = offsetHours && offsetMinutes ? `${offsetHours}:${offsetMinutes}` : '';
-
-  return `${date}T${time}${ms}${offset}`;
-};

package/src/components/form/engine/compactRowContext.ts

@@ -1,148 +0,0 @@
-import { IReqoreTheme } from '@qoretechnologies/reqore/dist/constants/theme';
-import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { useReqoreProperty } from '@qoretechnologies/reqore';
-import {
-  IQorusFormField,
-  IQorusFormSchema,
-  TQorusForm,
-  TQorusFormFieldSchema,
-} from '@qoretechnologies/ts-toolkit';
-import { MutableRefObject } from 'react';
-import { createContext } from 'use-context-selector';
-import { IOperatorsSchema } from './FormEngine';
-import { TOptionActions } from './optionActions';
-
-/**
- * The complete closure surface of the (former) `renderCompactRow` function,
- * threaded into the extracted `CompactRow` component via `use-context-selector`
- * so each row reads only the fields it needs. Assembled once (memoised) by
- * `FormEngine` and provided around the compact render output.
- */
-/**
- * Renders the read-first preview of a `code-editor` value.
- *
- * @param value the field's source text
- * @param name the field's name
- * @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, so the language
- * can be resolved from a sibling field rather than configured twice
- */
-export type TCodePreviewRenderer = (props: {
-  value: string;
-  name: string;
-  schema?: TQorusFormFieldSchema;
-  options?: IQorusFormSchema;
-  values?: TQorusForm;
-}) => React.ReactNode;
-
-export interface ICompactRowContext {
-  // Props / config
-  readOnly?: boolean;
-  /**
-   * What a click on a READ-ONLY row should do, when the consumer has somewhere
-   * to send it.
-   *
-   * A read-only row is not a control, so by default it opens nothing: it shows
-   * everything it has and answers a click with silence. That is right when
-   * there is nowhere else to go, and a dead end when there is — a reader
-   * clicking a value they want to change is telling you exactly what they want,
-   * and being ignored teaches them the surface is broken.
-   *
-   * Given this, the row becomes the way in to wherever that field IS editable,
-   * and says so: it takes a button's role and keyboard handling. Without it
-   * nothing changes, so a read-only form with no editor behind it stays inert.
-   */
-  onReadOnlyActivate?: (optionName: string) => void;
-  commitMode: 'immediate' | 'batched';
-  expandMode: 'single' | 'multi';
-
-  // State
-  options?: IQorusFormSchema;
-  operators?: IOperatorsSchema;
-  focusedEditing?: string;
-  showFieldTypes: boolean;
-  // Global field-info visibility (tri-state): undefined = default (critical
-  // messages auto-open), true = show all, false = hide all.
-  showAllDescriptions: boolean | undefined;
-  // Form templates ($local:…, etc.) — used to resolve a template value to its
-  // display name in the read-first chip.
-  templates?: IReqoreFormTemplates;
-  expandedOptions: string[];
-  highlightedOptions: string[];
-  flashedOptions: string[];
-  infoPanelOverrides: Record<string, boolean>;
-
-  // Setters
-  setHighlightedOptions: React.Dispatch<React.SetStateAction<string[]>>;
-  setInfoPanelOverrides: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
-  setFocusedEditing: React.Dispatch<React.SetStateAction<string | undefined>>;
-
-  // Refs
-  readRowHeights: MutableRefObject<Record<string, number>>;
-  originalValue: MutableRefObject<any>;
-
-  // Memoised
-  availableOptions: TQorusForm;
-  requiredGroupsInfo: {
-    members: Record<string, string[]>;
-    satisfiedBy: Record<string, string | undefined>;
-  };
-
-  // Handlers (useCallback)
-  handleValueChange: (optionName: string, val?: any, _type?: string, isFunction?: boolean) => void;
-  handleAddOptionalFieldChange: (_name: string, optionName: unknown) => void;
-  toggleExpandedOption: (optionName: string) => void;
-  flashOption: (optionName: string) => void;
-  hasOptionChanged: (optionValue: unknown, optionName: string) => boolean;
-  handleOptionLabelClick: (optionName: string) => void;
-  removeSelectedOption: (optionName: string) => void;
-  getTypeForOption: (type: string) => string;
-  /** Whether a `ui_type` names a bespoke editor, reqraft's or the consumer's own. */
-  isRendererOnly?: (type?: any) => boolean;
-  isOptionValid: (optionName: string, type: any, optionValue: any) => boolean;
-  confirmAction: ReturnType<typeof useReqoreProperty<'confirmAction'>>;
-
-  // Function passed through as a value (stays defined in FormEngine because the
-  // classic non-compact path uses it too).
-  optionActions?: TOptionActions;
-  /**
-   * Injected actions render inside the row's overflow menu instead of as inline
-   * buttons. True on touch (where a hover-gated button is unreachable) and on
-   * narrow viewports. Resolved once by FormEngine so rows share one subscription.
-   */
-  collapseOptionActions?: boolean;
-  renderOption: (
-    optionName: string,
-    field: IQorusFormField,
-    editorSize?: 'small',
-    suppressSchemaMessages?: boolean
-  ) => React.ReactNode;
-  /**
-   * Draws the read-first preview of a `code-editor` value.
-   *
-   * The built-in preview is a plain monospace block: this package cannot ship a
-   * syntax highlighter, and a code editor is exactly the dependency it keeps out
-   * (which is why the *editor* for `code-editor` also arrives through
-   * `componentOverrides`).  A host that already has a highlighter supplies one
-   * here and gets highlighted source in the row; everyone else keeps the plain
-   * block.  `options` is handed over so a host can resolve the language from a
-   * sibling field rather than being told it twice.
-   */
-  codePreviewRenderer?: TCodePreviewRenderer;
-
-  // Theme + theme-derived colours
-  theme: IReqoreTheme;
-  cText: string;
-  cMuted: string;
-  cFaint: string;
-  cKey: string;
-  cDivider: string;
-  cHover: string;
-  cDanger: string;
-  cWarning: string;
-  cInfo: string;
-  cBg: string;
-}
-
-export const CompactRowContext = createContext<ICompactRowContext>({} as ICompactRowContext);