@qoretechnologies/reqraft 0.10.66-pr.152.g3349989 → 0.10.66

package/src/components/form/fields/url/Url.stories.tsx

@@ -1,97 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-import { useState } from 'react';
-import { StoryMeta } from '../../../../types';
-import { UrlFormField } from './Url';
-
-const meta = {
-  component: UrlFormField,
-  title: 'Components/Form/Url',
-  args: {
-    onChange: fn(),
-    'aria-label': 'URL address',
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-    return (
-      <UrlFormField
-        {...args}
-        value={value}
-        onChange={(v) => {
-          args.onChange?.(v);
-          setValue(v);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof UrlFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Url field with no value. Typing into the address input recomposes the URL and fires onChange after the debounce; because no protocol is selected, the composed value keeps a bare "://" prefix.',
-      },
-    },
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText('URL address');
-    await expect(input).toBeInTheDocument();
-    // Nothing fires on mount — onChange is edge-triggered; the first user
-    // edit recomposes and emits. Protocol-less, so the bare `://` prefix,
-    // which the `url` validator flags rather than rewrites.
-    await expect(args.onChange).not.toHaveBeenCalled();
-    await userEvent.type(input, 'example.com');
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith('://example.com'), {
-      timeout: 5000,
-    });
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    value: 'https://example.com',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Url field pre-populated with "https://example.com" — the URL is split across the https protocol selector and the example.com address input.',
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByDisplayValue('example.com')).toBeInTheDocument();
-    await expect(canvas.getByText('https')).toBeInTheDocument();
-  },
-};
-
-export const KeepsSeparatorInsideAddress: Story = {
-  args: {
-    value: 'https://proxy/forward?to=http://inner',
-  },
-  parameters: {
-    // Interaction-only: the play assertions are the guard, and the end state
-    // is already pictured by `WithValue`.
-    qlip: { skip: true },
-    docs: {
-      description: {
-        story:
-          'Renders the Url field with a URL whose query-string embeds a second "://". The protocol split only consumes the leading separator; the inner "://" survives inside the address input.',
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    // `://` inside the address survives the protocol/address split.
-    await expect(
-      await canvas.findByDisplayValue('proxy/forward?to=http://inner')
-    ).toBeInTheDocument();
-  },
-};

package/src/components/form/fields/url/Url.tsx

@@ -1,85 +0,0 @@
-// Ported verbatim from qorus-ide `src/components/Field/urlField.tsx`
-// (FIELD_STACK_REPORT batch). Replaces the previous from-scratch single-input
-// URL field (FORM_FIELD_EXTRAS) — the IDE renders a protocol picker + `://` +
-// address, and the value-splitting (`getProtocol`/`getAddress`) handles `://`
-// inside the address. Seams: the `qorus_instance`-gated remote protocols
-// fetch (`options/remote?list`) is dropped; the `protocols` prop (with the
-// IDE's default list) remains. reqraft API kept: single-arg `onChange(value)`.
-import { ReqoreControlGroup, ReqoreP } from '@qoretechnologies/reqore';
-import { memo, useEffect, useState } from 'react';
-import { useUpdateEffect } from 'react-use';
-import { getAddress, getProtocol } from '../../../../helpers/common';
-import { SelectFormField } from '../select/Select';
-import { StringFormField } from '../string/String';
-
-// Re-exported so the existing public API (form barrel) keeps offering them;
-// the implementations moved to `helpers/common.ts` for non-component use.
-export { getAddress, getProtocol } from '../../../../helpers/common';
-
-export interface IUrlFormFieldProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  protocols?: string[];
-  disabled?: boolean;
-  [key: string]: any;
-}
-
-export const UrlFormField = memo(
-  ({ value, onChange, disabled, protocols: protocolsProp, ...rest }: IUrlFormFieldProps) => {
-    const [protocols] = useState<string[]>(protocolsProp || ['http', 'https', 'rest', 'rests']);
-    const [protocol, setProtocol] = useState<string>(getProtocol(value));
-    const [address, setAddress] = useState<string>(getAddress(value));
-
-    // SEAM: `useUpdateEffect`, not the IDE's mount-firing `useEffect` —
-    // onChange stays edge-triggered (the field never rewrites the consumer's
-    // value on mount). The IDE's 2020-era mount emission normalized values
-    // for consumers without a form layer; reqraft's FormEngine owns defaults,
-    // and the `url` validator flags protocol-less values instead.
-    useUpdateEffect(() => {
-      onChange?.(`${protocol}://${address}`);
-    }, [protocol, address]);
-
-    useEffect(() => {
-      setProtocol(getProtocol(value));
-      setAddress(getAddress(value));
-    }, [value]);
-
-    const handleAddressChange = (newAddress: string) => {
-      if (getProtocol(newAddress)) {
-        setProtocol(getProtocol(newAddress));
-      }
-
-      setAddress(getAddress(newAddress));
-    };
-
-    return (
-      <ReqoreControlGroup fluid size={rest.size} verticalAlign='center'>
-        <SelectFormField
-          fixed
-          size={rest.size}
-          items={protocols.map((prot) => ({ value: prot }))}
-          onChange={(v) => setProtocol(v as string)}
-          value={protocol}
-          disabled={disabled}
-        />
-        {/* IDE StringField renders its `label` as a muted paragraph beside
-            the input — mirrored here since reqraft's StringFormField has no
-            label prop. `flexShrink: 0` + nowrap keep `://` on one line; the
-            fluid group would otherwise squeeze it until the text wrapped. */}
-        <ReqoreP intent='muted' style={{ whiteSpace: 'nowrap', flexShrink: 0 }}>
-          ://
-        </ReqoreP>
-        {/* Rest props (`aria-label`, …) forward to the address input; the
-            IDE's URLField ignores extras. */}
-        <StringFormField
-          {...(rest as any)}
-          value={address}
-          onChange={(v) => handleAddressChange(v)}
-          disabled={disabled}
-        />
-      </ReqoreControlGroup>
-    );
-  }
-);
-
-export default UrlFormField;

package/src/components/form/index.tsx

@@ -1,47 +0,0 @@
-export * from './fields/Field';
-export * from './fields/allowed-values/AllowedValues';
-export * from './fields/array/ArrayAuto';
-export * from './fields/array/ArrayAutoField';
-export * from './fields/auto/AutoFormField';
-export * from './fields/byte-size/ByteSize';
-export * from './fields/timeout/Timeout';
-export * from './fields/url/Url';
-export * from './fields/schema-definition';
-export * from './fields/boolean/Boolean';
-export * from './fields/color/Color';
-export * from './fields/date/Date';
-export * from './fields/file/File';
-export * from './fields/long-string/LongString';
-export * from './fields/markdown/Markdown';
-export * from './fields/multi-select/MultiSelectFormField';
-export * from './fields/number/Number';
-export * from './fields/object/Object';
-export * from './fields/radio-group/RadioGroup';
-export * from './fields/rich-text/RichText';
-export * from './fields/select/Select';
-export * from './fields/select/SelectCollection';
-export * from './fields/string/String';
-export * from './fields/template/ExampleValueModal';
-export * from './fields/template/TemplateField';
-export * from './engine/FormEngine';
-export * from './engine/FormFieldsSkeleton';
-export * from './engine/optionActions';
-export * from './engine/rendererTypes';
-// A host's own editor is a compact row's editor too, so the instruction a row
-// gives when the AUTHOR opens it into a picker is part of the public surface.
-export * from './engine/rowOpenPicker';
-export * from './expressions/types';
-export * from './expressions/useExpressions';
-// Named (not wildcard) so the `_resetRenderExpressionTransportForTests`
-// test hook stays out of the public package surface.
-export { renderExpressionToText, useRenderExpression } from './expressions/useRenderExpression';
-export type {
-  IRenderedExpression,
-  IUseRenderExpressionResult,
-} from './expressions/useRenderExpression';
-export * from './expressions/ExpressionField';
-// The bare builder is public too: the library's own rule renders the shell at a
-// root field and the bare builder for nested operands, and a host that follows
-// it must be able to reach the builder without a deep import (#119).
-export { ExpressionBuilder } from './expressions/builder';
-export type { IExpressionBuilderProps } from './expressions/builder';

package/src/components/imageLightbox/ImageLightbox.stories.tsx

@@ -1,241 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-import { useEffect, useState } from 'react';
-import { StoryMeta } from '../../types';
-import { IImageLightboxImage, ImageLightbox } from './ImageLightbox';
-
-/**
- * The shared full-image viewer, on `ReqoreModal`. Opened by the ticket thread (an image
- * on a message) and the References tab (the screenshot grid) alike. Pages across a set,
- * click-to-zoom, download; the shell/backdrop/Esc are the modal's.
- */
-const meta = {
-  component: ImageLightbox,
-  title: 'Components/ImageLightbox',
-} as StoryMeta<typeof ImageLightbox>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const shot = (label: string, hue: number): string =>
-  `data:image/svg+xml,${encodeURIComponent(
-    `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='400'>` +
-      `<rect width='640' height='400' fill='hsl(${hue},38%,16%)'/>` +
-      `<text x='24' y='210' fill='white' font-family='sans-serif' font-size='28' opacity='0.7'>${label}</text>` +
-      `</svg>`
-  )}`;
-
-const IMAGES: IImageLightboxImage[] = [
-  { attachment_id: 'i1', filename: 'canvas-error.png' },
-  { attachment_id: 'i2', filename: 'console.png' },
-  { attachment_id: 'i3', filename: 'network.png' },
-];
-
-/** Open on a set of three, so the paging chrome (`1 / 3`, prev/next) shows. */
-export const Paging: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Renders the lightbox open on a set of three images, so the paging chrome ('1 / 3', prev/next) shows, and arrow keys page through the set.",
-      },
-    },
-  },
-  render: function Render() {
-    const [index, setIndex] = useState<number | null>(0);
-    if (index === null) {
-      return <div>closed</div>;
-    }
-    return (
-      <ImageLightbox
-        images={IMAGES}
-        index={index}
-        onIndex={setIndex}
-        onClose={() => setIndex(null)}
-        fetchAttachmentUrl={async (id) => shot(id, id === 'i1' ? 265 : id === 'i2' ? 205 : 150)}
-        onDownload={fn()}
-      />
-    );
-  },
-  async play() {
-    // the modal portals to the body, so query document-wide
-    await waitFor(() => expect(document.querySelector('[role="dialog"]')).not.toBeNull());
-    const dialog = within(document.body);
-    await expect(await dialog.findByText('canvas-error.png')).toBeInTheDocument();
-    await expect(dialog.getByText('1 / 3')).toBeInTheDocument();
-    // page forward via the keyboard (the action buttons are icon-only)
-    await userEvent.keyboard('{ArrowRight}');
-    await waitFor(() => expect(dialog.getByText('2 / 3')).toBeInTheDocument());
-  },
-};
-
-/**
- * Regression guard for the "screenshot preview stuck loading" bug.
- *
- * Consumers pass `fetchAttachmentUrl` as an inline arrow — a new identity every render —
- * and re-render for reasons unrelated to the lightbox. Here the parent ticks on a timer
- * (handing a fresh fetcher each render) while the fetch is deliberately slow, so those
- * re-renders land WHILE the image is still loading. When the fetch effect depended on
- * `fetchAttachmentUrl`, each re-render tore down the in-flight fetch and the `requested`
- * guard blocked a retry — the spinner hung forever. The image resolving proves the effect
- * now depends on `id` alone. Removing that fix makes this story time out.
- */
-export const ResolvesDespiteParentReRenders: Story = {
-  parameters: {
-    // Interaction-only: the play assertions are the guard, and the end state
-    // is already pictured by `Single`.
-    qlip: { skip: true },
-    docs: {
-      description: {
-        story:
-          'Renders the lightbox while the parent re-renders on a timer with a deliberately slow fetch — a regression guard proving the image still resolves instead of the spinner hanging forever.',
-      },
-    },
-  },
-  render: function Render() {
-    const [index, setIndex] = useState<number | null>(0);
-    const [, setTick] = useState(0);
-    useEffect(() => {
-      const timer = setInterval(() => setTick((n) => n + 1), 30);
-      return () => clearInterval(timer);
-    }, []);
-    if (index === null) {
-      return <div>closed</div>;
-    }
-    return (
-      <ImageLightbox
-        images={[IMAGES[0]]}
-        index={index}
-        onIndex={setIndex}
-        onClose={() => setIndex(null)}
-        // a brand-new arrow every render, and a slow fetch so the re-renders overlap it
-        fetchAttachmentUrl={async (id) => {
-          await new Promise((resolve) => setTimeout(resolve, 120));
-          return shot(id, 265);
-        }}
-        onDownload={fn()}
-      />
-    );
-  },
-  async play() {
-    await expect(await within(document.body).findByText('canvas-error.png')).toBeInTheDocument();
-    // the image resolves and paints — it never would while the spinner was hung
-    await waitFor(
-      () => expect(document.body.querySelector('img[alt="canvas-error.png"]')).not.toBeNull(),
-      { timeout: 3000 }
-    );
-  },
-};
-
-/**
- * Renaming from inside the preview. The pencil (only offered when `onRename` is wired)
- * swaps in an input row; Enter commits through the host, which owns the actual rename —
- * here the harness updates its image list, so the modal header shows the new name.
- * Esc cancels the edit WITHOUT closing the modal. Discriminating: remove the
- * `onRename` plumbing and the pencil never renders / the title never changes.
- */
-export const Renamable: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the lightbox with onRename wired — the header pencil opens an inline input; Enter commits the new name through the host and Esc cancels without closing the modal.',
-      },
-    },
-  },
-  render: function Render() {
-    const [index, setIndex] = useState<number | null>(0);
-    const [images, setImages] = useState<IImageLightboxImage[]>([IMAGES[0]]);
-    if (index === null) {
-      return <div>closed</div>;
-    }
-    return (
-      <ImageLightbox
-        images={images}
-        index={index}
-        onIndex={setIndex}
-        onClose={() => setIndex(null)}
-        fetchAttachmentUrl={async (id) => shot(id, 265)}
-        onRename={(id, name) =>
-          setImages((current) =>
-            current.map((img) => (img.attachment_id === id ? { ...img, filename: name } : img))
-          )
-        }
-      />
-    );
-  },
-  async play() {
-    const dialog = within(document.body);
-    await expect(await dialog.findByText('canvas-error.png')).toBeInTheDocument();
-
-    const pencil = await waitFor(() => {
-      const el = document.body.querySelector<HTMLButtonElement>('.imagelightbox-rename');
-      if (!el) {
-        throw new Error('rename action not rendered');
-      }
-      return el;
-    });
-    await userEvent.click(pencil);
-
-    // Esc cancels the edit but keeps the modal open
-    const input = await waitFor(() => {
-      const el = document.body.querySelector<HTMLInputElement>('.reqore-modal input');
-      if (!el) {
-        throw new Error('rename input not shown');
-      }
-      return el;
-    });
-    await expect(input).toHaveValue('canvas-error.png'); // pre-filled with the current name
-    await userEvent.keyboard('{Escape}');
-    await waitFor(() =>
-      expect(document.body.querySelector('.reqore-modal input')).toBeNull()
-    );
-    await expect(document.querySelector('[role="dialog"]')).not.toBeNull();
-
-    // now rename for real: pencil → clear → type → Enter → header carries the new name
-    await userEvent.click(document.body.querySelector<HTMLButtonElement>('.imagelightbox-rename')!);
-    const input2 = await waitFor(() => {
-      const el = document.body.querySelector<HTMLInputElement>('.reqore-modal input');
-      if (!el) {
-        throw new Error('rename input not shown (second open)');
-      }
-      return el;
-    });
-    await userEvent.clear(input2);
-    await userEvent.type(input2, 'mapper-crash.png');
-    await userEvent.keyboard('{Enter}');
-    await waitFor(() => expect(dialog.getByText('mapper-crash.png')).toBeInTheDocument());
-    await expect(dialog.queryByText('canvas-error.png')).not.toBeInTheDocument();
-  },
-};
-
-/** A single image: no paging chrome. */
-export const Single: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Renders the lightbox on a single image, so no paging chrome appears.',
-      },
-    },
-  },
-  render: function Render() {
-    const [index, setIndex] = useState<number | null>(0);
-    if (index === null) {
-      return <div>closed</div>;
-    }
-    return (
-      <ImageLightbox
-        images={[IMAGES[0]]}
-        index={index}
-        onIndex={setIndex}
-        onClose={() => setIndex(null)}
-        fetchAttachmentUrl={async (id) => shot(id, 265)}
-        onDownload={fn()}
-      />
-    );
-  },
-  async play() {
-    const dialog = within(document.body);
-    await expect(await dialog.findByText('canvas-error.png')).toBeInTheDocument();
-    await expect(dialog.queryByText('1 / 1')).not.toBeInTheDocument();
-  },
-};