@qoretechnologies/reqraft 0.10.66-pr.145.gcb1e59d → 0.10.66

package/src/stories/Tests/utils.ts

@@ -1,320 +0,0 @@
-import { expect, fireEvent, screen, userEvent, waitFor } from 'storybook/test';
-
-export const sleep = (ms: number) => {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-};
-
-export async function _testsScrollElementIntoView(selector: string, nth: number = 1) {
-  await waitFor(() => expect(document.querySelectorAll(selector)[nth - 1]).toBeInTheDocument(), {
-    timeout: 10000,
-  });
-  await document.querySelectorAll(selector)[nth - 1].scrollIntoView();
-}
-
-export async function _testsChangeRichText(value: string, nth: number = 1) {
-  await _testsScrollElementIntoView('div.system-option [contenteditable="true"]', nth);
-
-  const element = document.querySelectorAll('div.system-option [contenteditable="true"]')[nth - 1];
-
-  await sleep(500);
-
-  await userEvent.click(element);
-
-  await sleep(500);
-
-  await userEvent.click(element);
-
-  await sleep(500);
-
-  await userEvent.keyboard(value);
-
-  await sleep(500);
-}
-
-export async function _testsConfirmDialog() {
-  await waitFor(async () => screen.getAllByText('Confirm')[0], {
-    timeout: 5000,
-  });
-  await fireEvent.click(screen.getAllByText('Confirm')[0]);
-  await sleep(200);
-}
-
-export async function _testsOpenTemplateMenu(nth: number = 1) {
-  await _testsClickButton({ selector: '.template-more', nth: nth - 1 });
-}
-
-export async function _testsSetTemplate(nth: number = 1) {
-  await _testsOpenTemplateMenu(nth);
-  await _testsClickButton({ selector: '.template-toggle' });
-}
-
-export async function _testsOpenTemplates(nth: number = 1) {
-  await waitFor(
-    async () => {
-      await expect(
-        document.querySelectorAll('.template-selector.reqore-control')[nth - 1],
-        'Waiting for .template-selector in _testsOpenTemplates'
-      ).toBeInTheDocument();
-    },
-    { timeout: 10000 }
-  );
-
-  await sleep(1500);
-
-  await _testsClickButton({
-    selector: '.template-selector.reqore-control',
-    wait: 15000,
-    nth: nth - 1,
-  });
-
-  await waitFor(
-    () =>
-      expect(
-        document.querySelector('.reqore-popover-content'),
-        'Waiting for popover content in _testsOpenTemplate'
-      ).toBeInTheDocument(),
-    { timeout: 10000 }
-  );
-}
-
-// Storybook's iframe shell keeps hidden skeleton markup in the DOM at all
-// times (the `.sb-wrapper` preparing-story/docs blocks, whose args table
-// carries headers like "Name" and "Description"). It sorts BEFORE the story
-// root, so an unscoped text query can match the chrome instead of the story.
-function _queryAllByStoryText(text: string | number | RegExp, selector?: string) {
-  return screen
-    .queryAllByText(text, { selector })
-    .filter((element) => !element.closest('.sb-wrapper'));
-}
-
-export async function _testsWaitForText(
-  text: string | number | RegExp,
-  selector?: string,
-  nth: number = 1,
-  exist: boolean = true
-) {
-  await waitFor(
-    () => {
-      const element = _queryAllByStoryText(text, selector)[nth - 1];
-
-      if (!exist) {
-        return expect(element, `Expected text ${text} to not exist`).toBeUndefined();
-      }
-
-      return expect(element, `Expected text ${text}`).toBeInTheDocument();
-    },
-    {
-      timeout: 10000,
-    }
-  );
-}
-
-export async function _testsWaitForInputValue(
-  value: string | number,
-  selector?: string,
-  nth: number = 1,
-  exist: boolean = true
-) {
-  await waitFor(
-    () => {
-      const elements = screen
-        .queryAllByDisplayValue(value)
-        .filter((el) => (selector ? el.matches(selector) : true));
-
-      const element = elements[nth - 1];
-
-      if (!exist) {
-        return expect(element, `Expected input value ${value} to not exist`).toBeUndefined();
-      }
-
-      return expect(element, `Expected input value ${value}`).toBeInTheDocument();
-    },
-    {
-      timeout: 10000,
-    }
-  );
-}
-
-export async function _testsClickText(text: string, selector?: string, nth: number = 1) {
-  await _testsWaitForText(text, selector, nth);
-
-  await fireEvent.click(_queryAllByStoryText(text, selector)[nth - 1]);
-}
-
-export async function _testsWaitForTextsCount(text: string, selector?: string, count: number = 1) {
-  await waitFor(
-    () => {
-      const texts = _queryAllByStoryText(text, selector);
-
-      return expect(texts, `Expected text ${text} with count ${count}`).toHaveLength(count);
-    },
-    {
-      timeout: 10000,
-    }
-  );
-}
-
-export async function _testsWaitForTextToNotExist(
-  text: string,
-  selector?: string,
-  nth: number = 1
-) {
-  await _testsWaitForText(text, selector, nth, false);
-}
-
-export async function _testsChangeStringField({
-  selector,
-  nth = 1,
-  value,
-}: {
-  selector: string;
-  nth?: number;
-  value: string | number;
-}) {
-  await waitFor(() => expect(document.querySelectorAll(selector)[nth - 1]).toBeInTheDocument(), {
-    timeout: 10000,
-  });
-  await fireEvent.change(document.querySelectorAll(selector)[nth - 1], {
-    target: { value },
-  });
-}
-
-export async function _testsClickButton({
-  label,
-  selector,
-  nth = 0,
-  wait = 7000,
-  parent = '.reqore-button',
-}: {
-  label?: string;
-  selector?: string;
-  nth?: number;
-  wait?: number;
-  parent?: string;
-}) {
-  console.log('Waiting for button:', label, selector, nth, wait);
-  if (!label) {
-    await waitFor(
-      () =>
-        expect(
-          document.querySelectorAll(selector)[nth],
-          `Waited for button ${selector} ${nth}`
-        ).toBeInTheDocument(),
-      {
-        timeout: wait,
-      }
-    );
-    await waitFor(
-      () =>
-        expect(
-          document.querySelectorAll(selector)[nth],
-          `Waited for button ${selector} ${nth} to be enabled`
-        ).toBeEnabled(),
-      {
-        timeout: wait,
-      }
-    );
-    console.log('Clicking button:', label, selector, nth, wait);
-    await userEvent.click(document.querySelectorAll(selector)[nth]);
-  } else {
-    await waitFor(
-      () => expect(screen.queryAllByText(label, { selector })[nth]).toBeInTheDocument(),
-      { timeout: wait }
-    );
-    await waitFor(
-      () => expect(screen.queryAllByText(label, { selector })[nth].closest(parent)).toBeEnabled(),
-      { timeout: wait }
-    );
-    console.log('Clicking button:', label, selector, nth, wait);
-    await userEvent.click(screen.queryAllByText(label, { selector })[nth]);
-  }
-  console.log('Clicked button:', label, selector, nth, wait);
-}
-
-export async function _testsDoubleClickButton({
-  label,
-  selector,
-  nth = 0,
-  wait = 7000,
-  parent = '.reqore-button',
-}: {
-  label?: string;
-  selector?: string;
-  nth?: number;
-  wait?: number;
-  parent?: string;
-}) {
-  console.log('Waiting for button:', label, selector, nth, wait);
-  if (!label) {
-    await waitFor(
-      () =>
-        expect(
-          document.querySelectorAll(selector)[nth],
-          `Waited for button ${selector} ${nth}`
-        ).toBeInTheDocument(),
-      {
-        timeout: wait,
-      }
-    );
-    await waitFor(
-      () =>
-        expect(
-          document.querySelectorAll(selector)[nth],
-          `Waited for button ${selector} ${nth} to be enabled`
-        ).toBeEnabled(),
-      {
-        timeout: wait,
-      }
-    );
-    console.log('Clicking button:', label, selector, nth, wait);
-    await userEvent.dblClick(document.querySelectorAll(selector)[nth]);
-  } else {
-    await waitFor(
-      () => expect(screen.queryAllByText(label, { selector })[nth]).toBeInTheDocument(),
-      { timeout: wait }
-    );
-    await waitFor(
-      () => expect(screen.queryAllByText(label, { selector })[nth].closest(parent)).toBeEnabled(),
-      { timeout: wait }
-    );
-    console.log('Clicking button:', label, selector, nth, wait);
-    await userEvent.dblClick(screen.queryAllByText(label, { selector })[nth]);
-  }
-  console.log('Clicked button:', label, selector, nth, wait);
-}
-
-/**
- * Run `body` with the story's own viewport narrowed to `width` x `height`, then
- * put it back.
- *
- * qlip's `parameters.qlip.viewport` sizes the CAPTURE, which happens after the
- * play has finished — the play itself runs at the test browser's width. A play
- * that asserts the phone layout has to narrow the viewport itself, with the
- * same `page.viewport` call qlip makes. It is a DYNAMIC import: `vitest/browser`
- * throws on import outside Browser Mode, so a static one would take the
- * Storybook dev server down. Where the call is unavailable, `body` runs at the
- * width it already had and is told so (`narrowed` is false).
- */
-export const _testsWithViewport = async (
-  width: number,
-  height: number,
-  body: (narrowed: boolean) => Promise<void>
-) => {
-  let resize: ((w: number, h: number) => Promise<void>) | undefined;
-  try {
-    ({
-      page: { viewport: resize },
-    } = (await import('vitest/browser')) as never);
-  } catch {
-    resize = undefined;
-  }
-
-  const was = { width: window.innerWidth, height: window.innerHeight };
-  await resize?.(width, height);
-  try {
-    await body(!!resize && window.innerWidth === width);
-  } finally {
-    // Unconditional: a viewport left narrowed would narrow every later story.
-    await resize?.(was.width, was.height);
-  }
-};

package/src/stories/storyNetwork.ts

@@ -1,92 +0,0 @@
-// Copyright 2026 Qore Technologies, s.r.o.
-// Where a story's network goes: the instance its Reqraft points at, the URLs
-// its mocks must intercept, and the requests every story is mocked for.
-//
-// `query()` and `ReqraftWebSocket` build absolute URLs from the configured
-// instance, and both mock layers match on the host as well as the path —
-// storybook-addon-mock keys on `host + pathname`, mock-socket on the URL minus
-// its query. A mock written against a hard-coded host stops matching the moment
-// the instance is overridden, and the request goes out to the real network
-// instead, silently. Build mock URLs with the helpers below.
-import { defaultQorusTypes } from '../hooks/useQorusTypes';
-import { buildReqraftApiUrl } from '../utils/fetch';
-import { buildReqraftSocketUrl } from '../utils/websocket';
-
-/**
- * What storybook-addon-mock accepts as a response. Anything else — a bare
- * number or string — fails the addon's validation and the entry is kept but
- * never matched, so the request goes out to the network with no warning.
- */
-export type TStoryMockResponse = object | ((request: unknown) => unknown);
-
-export interface IStoryMockRequest {
-  url: string;
-  method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-  status: number;
-  response: TStoryMockResponse;
-}
-
-/**
- * The instance every story's Reqraft is initialized with. Override it with
- * `REACT_APP_QORUS_INSTANCE` (or `QORUS_INSTANCE`) to run live stories against
- * your own Qorus; mocks built from it follow the override.
- */
-export const STORY_QORUS_INSTANCE =
-  process.env.REACT_APP_QORUS_INSTANCE || 'https://hq.qoretechnologies.com:8092/';
-
-/** The URL `query()` requests for `path`. */
-export const storyApiUrl = (path: string): string =>
-  buildReqraftApiUrl(STORY_QORUS_INSTANCE, path);
-
-/**
- * The URL `ReqraftWebSocket` dials for `path`, token omitted — mock-socket
- * matches servers without the query string.
- */
-export const storySocketUrl = (path: string): string =>
-  buildReqraftSocketUrl(STORY_QORUS_INSTANCE, path);
-
-/** A GET of `path` answered with `response`. */
-const mockGet = (path: string, response: TStoryMockResponse): IStoryMockRequest[] => [
-  { url: storyApiUrl(path), method: 'GET', status: 200, response },
-];
-
-/**
- * The type catalogue, pinned to the built-in list. `useQorusTypes` uses a
- * reachable server's list *instead of* the built-in one, so an unmocked story
- * renders whichever labels that server happens to have — and every FormEngine
- * shows its loading skeleton until the request settles, which against an
- * unreachable instance is never.
- */
-const QORUS_TYPE_INFO_MOCK_DATA = mockGet('system/qorus-type-info', defaultQorusTypes);
-
-/**
- * The system expression catalogue, empty. `useExpressions` fetches it whenever
- * functions are allowed — even when the story passes its own list, which is
- * merged in as extras — and TemplateField shows a skeleton in place of "Use
- * Expression" until it arrives. Stories that need functions provide them
- * (`expressions`, or their own `mockData` for this URL).
- */
-const EXPRESSIONS_CATALOGUE_MOCK_DATA = mockGet('system?action=expressions&context=ui', []);
-
-/**
- * `ReqraftWebSocket`'s server probe, which every reconnect attempt awaits
- * before it dials. Unanswered, no attempt is ever made — a mock socket server
- * that comes back is never reconnected to, and one that stays down is never
- * given up on. The probe only needs an answer; its body is not read.
- */
-const SERVER_STATUS_MOCK_DATA = mockGet('system/pid', {});
-
-/**
- * Requests components make on their own, whatever the story is about —
- * mounting a FormEngine fetches the type catalogue; allowing functions fetches
- * the expression catalogue; a reconnecting socket probes the server.
- * Registered for every story as storybook-addon-mock's `globalMockData`
- * (`.storybook/preview.tsx`, and mirrored for the Vitest run in
- * `.storybook/vitest.setup.ts`); a story's own `mockData` entry for the same
- * URL takes precedence.
- */
-export const GLOBAL_STORY_MOCK_DATA: IStoryMockRequest[] = [
-  ...QORUS_TYPE_INFO_MOCK_DATA,
-  ...EXPRESSIONS_CATALOGUE_MOCK_DATA,
-  ...SERVER_STATUS_MOCK_DATA,
-];

package/src/stories/tracking.tsx

@@ -1,206 +0,0 @@
-/**
- * Story helpers for the A/B test UI: fixtures in the qorus-api shape, and the dark / light /
- * phone variants every visual story ships in.
- */
-import { ReqoreContent, ReqoreUIProvider } from '@qoretechnologies/reqore';
-import type { ReactNode } from 'react';
-import type { IAdminVariant, IExperimentEntry, IExperimentResults } from '../tracking/ui/types';
-
-export const PHONE_VIEWPORT = { width: 390, height: 844 };
-
-/** The page a light-mode product uses: Reqore derives every surface from this `main`. */
-export const LIGHT_MAIN = '#f6f6f6';
-
-/** Wraps a story in a light Reqore theme (the preview's own theme is dark). */
-export const LightTheme = ({ children }: { children: ReactNode }) => (
-  <ReqoreUIProvider
-    theme={{ main: LIGHT_MAIN }}
-    options={{ animations: { buttons: false, dialogs: false } }}
-  >
-    <ReqoreContent style={{ padding: 20, minHeight: '100vh' }}>{children}</ReqoreContent>
-  </ReqoreUIProvider>
-);
-
-type TVariant = 'Dark' | 'Light' | 'Phone';
-
-/**
- * A story in one of the three variants: the description gets the variant's words, Light wraps
- * the story in a light theme, Phone captures at 390 px.
- */
-export const variant = <S extends object>(story: S, description: string, mode: TVariant): S => {
-  const base = story as S & { parameters?: Record<string, any>; decorators?: any };
-  const light = (Story: () => JSX.Element) => (
-    <LightTheme>
-      <Story />
-    </LightTheme>
-  );
-  return {
-    ...story,
-    decorators: [...((base.decorators as any[]) ?? []), ...(mode === 'Light' ? [light] : [])],
-    parameters: {
-      ...base.parameters,
-      ...(mode === 'Phone' ? { qlip: { viewport: PHONE_VIEWPORT } } : {}),
-      docs: {
-        description: {
-          story:
-            mode === 'Dark' ? description
-            : mode === 'Light' ? `${description} On a light theme.`
-            : `${description} At phone width (390 px).`,
-        },
-      },
-    },
-  };
-};
-
-const v = (key: string, name: string, weight: number, control = false): IAdminVariant => ({
-  key,
-  name,
-  weight,
-  ...(control ? { control } : {}),
-});
-
-const results = (
-  numbers: [string, number, number, number | null][],
-  patch: Partial<IExperimentResults> = {}
-): IExperimentResults => ({
-  verdict: 'too-early',
-  metrics: [
-    {
-      key: 'signup-started',
-      name: 'Started a sign-up',
-      role: 'primary',
-      variants: numbers.map(([variant, exposed, converters, chance]) => ({
-        variant,
-        exposed,
-        converters,
-        rate: exposed ? converters / exposed : null,
-        chance_to_beat: chance,
-      })),
-    },
-  ],
-  ...patch,
-});
-
-export const EXPERIMENT_KEY = 'signup-cta';
-
-const TWO = [v('a', 'Current button', 0.5, true), v('b', 'Short copy', 0.5)];
-
-export const DRAFT: IExperimentEntry = {
-  experiment: {
-    key: EXPERIMENT_KEY,
-    name: 'Sign-up button copy',
-    status: 'draft',
-    phase: 1,
-    variants: TWO,
-  },
-  results: null,
-};
-
-export const RUNNING_TWO: IExperimentEntry = {
-  experiment: {
-    key: EXPERIMENT_KEY,
-    name: 'Sign-up button copy',
-    status: 'running',
-    phase: 1,
-    variants: TWO,
-  },
-  results: results(
-    [
-      ['a', 1240, 112, null],
-      ['b', 1228, 139, 0.91],
-    ],
-    {
-      verdict: 'likely-winner',
-      winner_variant: 'b',
-      verdict_text:
-        'Short copy is likely better: 91% chance it beats Current button on “Started a sign-up”.',
-    }
-  ),
-};
-
-export const RUNNING_FIVE: IExperimentEntry = {
-  experiment: {
-    key: EXPERIMENT_KEY,
-    name: 'Pricing page headline',
-    status: 'running',
-    phase: 1,
-    variants: [
-      v('a', 'Current headline', 0.2, true),
-      v('b', 'Price first', 0.2),
-      v('c', 'Customer quote', 0.2),
-      v('d', 'Question', 0.2),
-      v('e', 'Numbers', 0.2),
-    ],
-  },
-  results: results([
-    ['a', 604, 41, null],
-    ['b', 598, 47, 0.72],
-    ['c', 611, 38, 0.36],
-    ['d', 590, 44, 0.61],
-    ['e', 602, 30, 0.12],
-  ]),
-};
-
-export const PAUSED: IExperimentEntry = {
-  experiment: {
-    key: EXPERIMENT_KEY,
-    name: 'Sign-up button copy',
-    status: 'paused',
-    phase: 2,
-    variants: TWO,
-    phases: [
-      {
-        phase: 1,
-        started_at: '2026-09-10T08:00:00Z',
-        ended_at: '2026-09-20T10:00:00Z',
-        variants: [...TWO, v('c', 'Emoji', 0.33)],
-      },
-      { phase: 2, started_at: '2026-09-20T10:00:00Z', ended_at: null, variants: TWO },
-    ],
-    history: [
-      { at: '2026-09-20T10:00:00Z', action: 'remove-variant', variant: 'c', actor: 'admin' },
-    ],
-  },
-  results: results(
-    [
-      ['a', 380, 31, null],
-      ['b', 371, 33, 0.64],
-    ],
-    { verdict: 'no-clear-difference' }
-  ),
-};
-
-export const CONCLUDED: IExperimentEntry = {
-  experiment: {
-    key: EXPERIMENT_KEY,
-    name: 'Sign-up button copy',
-    status: 'concluded',
-    phase: 1,
-    winner: 'b',
-    variants: TWO,
-  },
-  results: RUNNING_TWO.results,
-};
-
-export const NO_DATA_YET: IExperimentEntry = {
-  experiment: {
-    key: EXPERIMENT_KEY,
-    name: 'Sign-up button copy',
-    status: 'running',
-    phase: 1,
-    variants: TWO,
-  },
-  results: results([
-    ['a', 0, 0, null],
-    ['b', 0, 0, null],
-  ]),
-};
-
-/** Runs the story as a test but takes no Qlip snapshot (a visually empty state). */
-export const noSnapshot = <S extends object>(story: S): S => {
-  const base = story as S & { parameters?: Record<string, any> };
-  return {
-    ...story,
-    parameters: { ...base.parameters, qlip: { ...base.parameters?.qlip, skip: true } },
-  };
-};