@qoretechnologies/reqraft 0.10.13-pr.74.gccefa54 → 0.10.13

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

@@ -1,156 +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: {
-    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 }
-    );
-  },
-};
-
-/** 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();
-  },
-};

package/src/components/imageLightbox/ImageLightbox.tsx

@@ -1,169 +0,0 @@
-import { ReqoreModal, ReqoreSpan, ReqoreSpinner, useLatestZIndex } from '@qoretechnologies/reqore';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import styled from 'styled-components';
-
-/*
- * The shared full-image viewer: a `ReqoreModal` holding one image at a time, with
- * click-to-zoom, keyboard/arrow paging across a set, and a download action. Both the
- * ticket thread (an image attachment on a message) and the References tab (the ticket's
- * screenshot grid) open this, so there is one lightbox rather than a Modal-backed one
- * here and a hand-rolled overlay there.
- *
- * reqore has no image-viewer primitive, so the zoom stage below is bespoke — but the
- * shell, backdrop, focus trap, Esc-to-close and header/actions are all `ReqoreModal`.
- * When reqore gains a real viewer this collapses onto it. It fetches the shown image's
- * bytes itself (caching per id), so a consumer only has to hand it `fetchAttachmentUrl`.
- */
-
-const Stage = styled.div<{ $zoom: boolean }>`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40vh;
-  max-height: 74vh;
-  overflow: auto;
-  background: rgba(0, 0, 0, 0.25);
-  border-radius: 8px;
-
-  img {
-    display: block;
-    cursor: ${({ $zoom }) => ($zoom ? 'zoom-out' : 'zoom-in')};
-    ${({ $zoom }) =>
-      $zoom
-        ? 'max-width: none; max-height: none;'
-        : 'max-width: 100%; max-height: 74vh; object-fit: contain;'}
-  }
-`;
-
-export interface IImageLightboxImage {
-  attachment_id: string;
-  filename: string;
-}
-
-export interface IImageLightboxProps {
-  /** the set the viewer pages across — one image is a set of one (no paging chrome) */
-  images: IImageLightboxImage[];
-  /** which image is shown */
-  index: number;
-  onIndex: (index: number) => void;
-  onClose: () => void;
-  /** resolve an image's bytes as an object URL (the consumer's authed endpoint) */
-  fetchAttachmentUrl: (attachmentId: string) => Promise<string>;
-  onDownload?: (attachmentId: string, filename: string) => void;
-}
-
-export const ImageLightbox = ({
-  images,
-  index,
-  onIndex,
-  onClose,
-  fetchAttachmentUrl,
-  onDownload,
-}: IImageLightboxProps) => {
-  const [zoom, setZoom] = useState<boolean>(false);
-  // url per attachment: undefined = not fetched, null = fetch failed, string = ready
-  const [urls, setUrls] = useState<Record<string, string | null>>({});
-  const requested = useRef<Set<string>>(new Set());
-  // Render above everything currently on screen: the ticket composer that can open this
-  // lightbox floats at its own climbed z-index (also useLatestZIndex), so a modal on a fixed
-  // z-index ends up BEHIND it. Climbing past the current top keeps the viewer on top wherever
-  // it's opened from.
-  const zIndex = useLatestZIndex();
-
-  const image = images[index];
-  const id = image?.attachment_id;
-  const url = id ? urls[id] : undefined;
-  const multiple = images.length > 1;
-
-  // Keep the latest fetcher in a ref so the fetch effect can depend on `id` ALONE.
-  // Consumers routinely pass `fetchAttachmentUrl` as an inline arrow — a new identity
-  // every render. If the effect depended on it, each parent re-render would re-run the
-  // effect: the previous run's cleanup fired first, so its in-flight fetch resolved with
-  // nothing to write to, and because `requested` already held the id nothing re-fetched.
-  // Net result: the spinner hung forever. Depending on `id` only breaks that cycle.
-  const fetchRef = useRef(fetchAttachmentUrl);
-  fetchRef.current = fetchAttachmentUrl;
-  // True only while mounted: a fetch that resolves after unmount is dropped, but one that
-  // resolves after a benign re-render still caches — the distinction a per-run flag missed.
-  const mounted = useRef(true);
-  useEffect(
-    () => () => {
-      mounted.current = false;
-    },
-    []
-  );
-
-  // fetch the shown image's bytes once per id; `requested` guards against re-fetching a
-  // page you've already visited
-  useEffect(() => {
-    if (!id || requested.current.has(id)) {
-      return undefined;
-    }
-    requested.current.add(id);
-    fetchRef.current(id)
-      .then((resolved) => mounted.current && setUrls((current) => ({ ...current, [id]: resolved })))
-      .catch(() => mounted.current && setUrls((current) => ({ ...current, [id]: null })));
-    return undefined;
-  }, [id]);
-
-  const step = useCallback(
-    (delta: number) => {
-      setZoom(false);
-      onIndex((index + delta + images.length) % images.length);
-    },
-    [index, images.length, onIndex]
-  );
-
-  useEffect(() => {
-    if (!multiple) {
-      return undefined;
-    }
-    const handler = (event: KeyboardEvent) => {
-      if (event.key === 'ArrowRight') {
-        step(1);
-      } else if (event.key === 'ArrowLeft') {
-        step(-1);
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [step, multiple]);
-
-  if (!image) {
-    return null;
-  }
-
-  return (
-    <ReqoreModal
-      isOpen
-      onClose={onClose}
-      customZIndex={zIndex}
-      blur={3}
-      icon='ImageLine'
-      label={image.filename}
-      badge={multiple ? `${index + 1} / ${images.length}` : undefined}
-      actions={[
-        { icon: 'ArrowLeftSLine', tooltip: 'Previous', onClick: () => step(-1), show: multiple },
-        { icon: 'ArrowRightSLine', tooltip: 'Next', onClick: () => step(1), show: multiple },
-        {
-          icon: 'DownloadLine',
-          tooltip: 'Download',
-          onClick: () => onDownload?.(image.attachment_id, image.filename),
-          show: !!onDownload,
-        },
-      ]}
-    >
-      <Stage $zoom={zoom}>
-        {url ? (
-          <img src={url} alt={image.filename} onClick={() => setZoom((z) => !z)} />
-        ) : url === null ? (
-          <ReqoreSpan effect={{ opacity: 0.6 }}>Preview unavailable — use Download.</ReqoreSpan>
-        ) : (
-          <ReqoreSpinner iconColor='info' size='big'>
-            Loading…
-          </ReqoreSpinner>
-        )}
-      </Stage>
-    </ReqoreModal>
-  );
-};

package/src/components/imageLightbox/index.ts

@@ -1 +0,0 @@
-export * from './ImageLightbox';

package/src/components/supportTicket/AttachmentChips.stories.tsx

@@ -1,122 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { expect, userEvent, waitFor, within } from 'storybook/test';
-import { StoryMeta } from '../../types';
-import { AttachmentChips } from './AttachmentChips';
-
-/**
- * Staged-file chips for a ticket composer. Image files show a thumbnail and open the shared
- * `ImageLightbox` on click; other files show a paperclip. The pencil renames a file inline
- * (a File name is read-only, so the host swaps in a renamed copy); the ✕ removes it.
- */
-const meta = {
-  component: AttachmentChips,
-  title: 'Components/AttachmentChips',
-} as StoryMeta<typeof AttachmentChips>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const imageFile = (label: string, hue: number, name: string): File => {
-  const svg =
-    `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='400'>` +
-    `<rect width='640' height='400' fill='hsl(${hue},40%,16%)'/>` +
-    `<text x='24' y='210' fill='white' font-family='sans-serif' font-size='30'>${label}</text></svg>`;
-  return new File([svg], name, { type: 'image/svg+xml' });
-};
-const textFile = (name: string): File => new File(['log contents'], name, { type: 'text/plain' });
-
-const FILES = [
-  imageFile('before', 265, 'screenshot-2026-07-26-17-41-44.png'),
-  imageFile('after', 205, 'canvas-after.png'),
-  textFile('server.log'),
-];
-
-// Plays the composer's role: owns the file set, swaps in a renamed copy on rename.
-const Harness = () => {
-  const [files, setFiles] = useState<File[]>(FILES);
-  return (
-    <AttachmentChips
-      files={files}
-      onRemove={(index) => setFiles((current) => current.filter((_, j) => j !== index))}
-      onRename={(index, name) =>
-        setFiles((current) =>
-          current.map((file, i) => (i === index ? new File([file], name, { type: file.type }) : file))
-        )
-      }
-    />
-  );
-};
-
-/**
- * Two screenshots + a log. Clicking a screenshot chip opens the lightbox (paging across the two
- * images); the log stays a plain chip. Proves the preview opens and paints the image.
- */
-export const WithImages: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders staged chips for two screenshots and a log, where clicking a screenshot chip opens the shared lightbox while the log stays a plain chip.',
-      },
-    },
-  },
-  render: () => <Harness />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('screenshot-2026-07-26-17-41-44.png')).toBeInTheDocument();
-    await expect(canvas.getByText('server.log')).toBeInTheDocument();
-
-    // clicking an image chip opens the shared lightbox (portals to the body)
-    await userEvent.click(canvas.getByText('canvas-after.png'));
-    await waitFor(() => expect(document.querySelector('[role="dialog"]')).not.toBeNull());
-    await waitFor(() =>
-      expect(document.body.querySelector('img[alt="canvas-after.png"]')).not.toBeNull()
-    );
-  },
-};
-
-/**
- * Renaming an auto-named screenshot: the pencil turns the chip into an inline input; Enter
- * commits and the chip shows the new name. Discriminating — remove the rename wiring and the
- * chip keeps its `screenshot-<timestamp>.png` name.
- */
-export const Rename: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the staged chips and renames an auto-named screenshot inline — the pencil opens an input, Enter commits, and the chip shows the new name.',
-      },
-    },
-  },
-  render: () => <Harness />,
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const chip = canvas.getByText('screenshot-2026-07-26-17-41-44.png').closest('.reqore-tag');
-    if (!chip) {
-      throw new Error('chip not found');
-    }
-    // click the rename pencil (its own action; the ✕ is a separate reqore-tag-remove)
-    const renameAction = chip.querySelector<HTMLElement>('.reqore-tag-action:not(.reqore-tag-remove)');
-    if (!renameAction) {
-      throw new Error('rename action not rendered');
-    }
-    await userEvent.click(renameAction);
-
-    // the inline input appears, pre-filled with the current name
-    const input = await waitFor(() => {
-      const el = canvasElement.querySelector<HTMLInputElement>('input');
-      if (!el) {
-        throw new Error('rename input not shown');
-      }
-      return el;
-    });
-    await userEvent.clear(input);
-    await userEvent.type(input, 'mapper-error.png');
-    await userEvent.keyboard('{Enter}');
-
-    // the chip now carries the new name; the auto-name is gone
-    await waitFor(() => expect(canvas.getByText('mapper-error.png')).toBeInTheDocument());
-    await expect(canvas.queryByText('screenshot-2026-07-26-17-41-44.png')).not.toBeInTheDocument();
-  },
-};

package/src/components/supportTicket/AttachmentChips.tsx

@@ -1,142 +0,0 @@
-import { ReqoreControlGroup, ReqoreInput, ReqoreTag } from '@qoretechnologies/reqore';
-import { useEffect, useState } from 'react';
-import { ImageLightbox } from '../imageLightbox';
-
-/*
- * Renders the files staged on a ticket composer as removable chips. Image files — whether
- * uploaded, pasted, or captured as a screenshot — show a thumbnail and open the shared
- * `ImageLightbox` on click (paging across the staged images, click-to-zoom); everything else
- * shows a paperclip + filename. When `onRename` is given, a pencil turns the chip into an
- * inline input so a captured `screenshot-<timestamp>.png` can be given a meaningful name (a
- * File's name is read-only, so the host swaps in a renamed copy).
- *
- * The thumbnail object URLs ARE the full-image URLs the lightbox shows, so they're created
- * once here and revoked when the file set changes or on unmount. Renders nothing when empty.
- */
-
-export interface IAttachmentChipsProps {
-  files: File[];
-  onRemove: (index: number) => void;
-  /** Rename a staged file. Omit to make chips non-renamable. The host replaces the File with a
-   *  renamed copy (`new File([file], newName, { type: file.type })`). */
-  onRename?: (index: number, newName: string) => void;
-  disabled?: boolean;
-}
-
-export const AttachmentChips = ({ files, onRemove, onRename, disabled }: IAttachmentChipsProps) => {
-  const [thumbnails, setThumbnails] = useState<string[]>([]);
-  // index into the image subset that's open in the lightbox, or null when closed.
-  const [previewIndex, setPreviewIndex] = useState<number | null>(null);
-  // the file index currently being renamed inline, plus its working name.
-  const [editingIndex, setEditingIndex] = useState<number | null>(null);
-  const [draftName, setDraftName] = useState<string>('');
-
-  useEffect(() => {
-    const urls = files.map((file) =>
-      file.type.startsWith('image/') ? URL.createObjectURL(file) : ''
-    );
-    setThumbnails(urls);
-    return () => urls.forEach((url) => url && URL.revokeObjectURL(url));
-  }, [files]);
-
-  if (!files.length) {
-    return null;
-  }
-
-  // The staged images in order, each with its original file index + object URL — the set the
-  // lightbox pages across. Non-image files are skipped.
-  const imageEntries = files
-    .map((file, index) => ({ file, index, url: thumbnails[index] }))
-    .filter((entry) => entry.url);
-
-  const startRename = (index: number) => {
-    setDraftName(files[index].name);
-    setEditingIndex(index);
-  };
-  const commitRename = () => {
-    if (editingIndex === null) {
-      return;
-    }
-    const name = draftName.trim();
-    if (onRename && name && name !== files[editingIndex].name) {
-      onRename(editingIndex, name);
-    }
-    setEditingIndex(null);
-  };
-
-  return (
-    <>
-      <ReqoreControlGroup wrap gapSize='small' verticalAlign='center'>
-        {files.map((file, index) => {
-          if (editingIndex === index) {
-            return (
-              <ReqoreInput
-                key={`edit-${index}`}
-                value={draftName}
-                onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                  setDraftName(event.target.value)
-                }
-                onBlur={commitRename}
-                onKeyDown={(event: React.KeyboardEvent) => {
-                  if (event.key === 'Enter') {
-                    commitRename();
-                  } else if (event.key === 'Escape') {
-                    setEditingIndex(null);
-                  }
-                }}
-                size='small'
-                fixed
-                autoFocus
-              />
-            );
-          }
-
-          const thumbnail = thumbnails[index];
-          const imageIndex = thumbnail
-            ? imageEntries.findIndex((entry) => entry.index === index)
-            : -1;
-          const actions =
-            onRename && !disabled
-              ? [
-                  {
-                    icon: 'Edit2Line' as const,
-                    tooltip: 'Rename',
-                    onClick: (event: React.MouseEvent<HTMLDivElement>) => {
-                      event.stopPropagation();
-                      startRename(index);
-                    },
-                  },
-                ]
-              : undefined;
-          return (
-            <ReqoreTag
-              key={`${file.name}-${index}`}
-              icon={thumbnail ? undefined : 'AttachmentLine'}
-              leftIconProps={thumbnail ? { image: thumbnail } : undefined}
-              label={file.name}
-              size='small'
-              tooltip={thumbnail ? 'Click to preview' : undefined}
-              actions={actions}
-              onClick={thumbnail ? () => setPreviewIndex(imageIndex) : undefined}
-              onRemoveClick={disabled ? undefined : () => onRemove(index)}
-            />
-          );
-        })}
-      </ReqoreControlGroup>
-      {previewIndex !== null && imageEntries[previewIndex] ? (
-        <ImageLightbox
-          images={imageEntries.map((entry) => ({
-            attachment_id: String(entry.index),
-            filename: entry.file.name,
-          }))}
-          index={previewIndex}
-          onIndex={setPreviewIndex}
-          onClose={() => setPreviewIndex(null)}
-          fetchAttachmentUrl={async (id) =>
-            imageEntries.find((entry) => String(entry.index) === id)?.url ?? ''
-          }
-        />
-      ) : null}
-    </>
-  );
-};