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

package/src/components/form/fields/string/String.tsx

@@ -1,43 +0,0 @@
-import { ReqoreInput } from '@qoretechnologies/reqore';
-import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
-import { ChangeEvent } from 'react';
-
-import { TFormFieldValueType } from '../../../../types/Form';
-
-export interface IStringFormFieldProps extends Omit<IReqoreInputProps, 'onChange' | 'value'> {
-  sensitive?: boolean;
-  value?: TFormFieldValueType<'string'>;
-  onChange?: (value?: TFormFieldValueType<'string'>, event?: ChangeEvent<HTMLInputElement>) => void;
-}
-
-export const StringFormField = ({ onChange, sensitive, ...rest }: IStringFormFieldProps) => {
-  // When input value changes
-  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
-    onChange(event.target.value?.toString(), event);
-  };
-
-  // Clear the input on reset click
-  const handleClearClick = (): void => {
-    onChange('');
-  };
-
-  return (
-    <ReqoreInput
-      wrapperStyle={{
-        width: '100%',
-      }}
-      onFocus={(event) => {
-        event.stopPropagation();
-        rest?.onFocus?.(event);
-      }}
-      onClick={(event) => {
-        event.stopPropagation();
-        rest?.onClick?.(event);
-      }}
-      onChange={handleChange}
-      type={sensitive ? 'password' : 'text'}
-      onClearClick={handleClearClick}
-      {...rest}
-    />
-  );
-};

package/src/components/form/fields/template/ExampleValueModal.stories.tsx

@@ -1,114 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fireEvent, fn, waitFor } from 'storybook/test';
-import { LONG_EXAMPLE_VALUE } from './__fixtures__/longExampleValue';
-import { ReqraftTemplateExampleValueModal } from './ExampleValueModal';
-
-const meta = {
-  component: ReqraftTemplateExampleValueModal,
-  title: 'Components/Form/TemplateExampleValueModal',
-  args: {
-    // Standalone render — in the app the modal rides reqore's global modal
-    // queue, whose wrapper injects `isOpen`/`onClose` itself.
-    isOpen: true,
-    label: 'Attachment Body',
-    value: LONG_EXAMPLE_VALUE,
-    onClose: fn(),
-  },
-} as Meta<typeof ReqraftTemplateExampleValueModal>;
-
-export default meta;
-
-export const Default: StoryObj<typeof meta> = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'The full example-value viewer for template items whose value is too long for the picker: the whole value in a selectable, scrollable textarea filling the modal body, with a Copy action. Copy surfaces a notification either way — success, or a danger notice when the browser denies clipboard access — never an unhandled rejection.',
-      },
-    },
-  },
-  play: async () => {
-    const modal = await waitFor(
-      () => {
-        const el = document.querySelector('.reqraft-template-example-value-modal');
-        if (!el) throw new Error('modal not rendered yet');
-        return el;
-      },
-      { timeout: 10000 }
-    );
-
-    // The modal holds the WHOLE value — down to the sentinel at the very end.
-    const textarea = modal.querySelector('textarea') as HTMLTextAreaElement;
-    await expect(textarea.value).toBe(LONG_EXAMPLE_VALUE);
-    await expect(textarea.value.endsWith('THE_VERY_END')).toBe(true);
-
-    // Copy notifies (success locally, clipboard-denied danger in headless CI).
-    const copy = Array.from(modal.querySelectorAll('button')).find((button) =>
-      button.textContent?.includes('Copy')
-    );
-    await expect(copy).toBeTruthy();
-    fireEvent.click(copy);
-    await waitFor(
-      () => {
-        if (!document.querySelector('.reqore-notification')) {
-          throw new Error('no notification yet');
-        }
-      },
-      { timeout: 10000 }
-    );
-  },
-};
-
-export const Mobile: StoryObj<typeof meta> = {
-  args: {
-    // The overridable strings double as the prop-passthrough coverage: the
-    // play below asserts THIS notification text, proving consumers (e.g.
-    // qorus-ide under Lingui) can supply translated copy.
-    copyLabel: 'Copy value',
-    copyNotificationContent: 'Value copied',
-    copyFailedNotificationContent: 'Copy was blocked',
-  },
-  parameters: {
-    qlip: { viewport: { width: 390, height: 844 } },
-    docs: {
-      description: {
-        story:
-          'The phone presentation of the full-value modal — the textarea still fills the modal body at phone width, and every user-visible string (Copy label, both notifications) is prop-overridden here, which doubles as coverage that consumers can pass translated copy.',
-      },
-    },
-  },
-  play: async () => {
-    const modal = await waitFor(
-      () => {
-        const el = document.querySelector('.reqraft-template-example-value-modal');
-        if (!el) throw new Error('modal not rendered yet');
-        return el;
-      },
-      { timeout: 10000 }
-    );
-
-    const textarea = modal.querySelector('textarea') as HTMLTextAreaElement;
-    await expect(textarea.value).toBe(LONG_EXAMPLE_VALUE);
-
-    // The overridden copy label renders…
-    const copy = Array.from(modal.querySelectorAll('button')).find((button) =>
-      button.textContent?.includes('Copy value')
-    );
-    await expect(copy).toBeTruthy();
-
-    // …and the overridden notification content is what surfaces (success or
-    // clipboard-denied, both prop-supplied).
-    fireEvent.click(copy);
-    await waitFor(
-      () => {
-        const notification = document.querySelector('.reqore-notification');
-        if (!notification) throw new Error('no notification yet');
-        const text = notification.textContent || '';
-        if (!text.includes('Value copied') && !text.includes('Copy was blocked')) {
-          throw new Error(`unexpected notification: ${text}`);
-        }
-      },
-      { timeout: 10000 }
-    );
-  },
-};

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

@@ -1,99 +0,0 @@
-import { ReqoreModal, ReqoreTextarea, useReqoreProperty } from '@qoretechnologies/reqore';
-import { IReqoreModalProps } from '@qoretechnologies/reqore/dist/components/Modal';
-import { CSSProperties, memo, useCallback } from 'react';
-
-export interface IReqraftTemplateExampleValueModalProps extends Partial<IReqoreModalProps> {
-  /** The template field's display name — the modal heading. */
-  label?: string;
-  /** The FULL serialized example value. */
-  value: string;
-  /** Copy-action label. @default 'Copy' */
-  copyLabel?: string;
-  /**
-   * Notification shown after a successful copy (prop-overridable so consumers
-   * can pass translated copy — same contract as `ReqoreExportModal`).
-   * @default 'Example value copied to clipboard'
-   */
-  copyNotificationContent?: string;
-  /** Notification shown when the browser denies clipboard access. @default 'Could not copy to clipboard' */
-  copyFailedNotificationContent?: string;
-}
-
-/* Fill the modal's fixed-height body instead of scaling with content: a
-   content-scaled textarea either stops short of the body (dead space below, a
-   partial-height scrollbar) or explodes it on huge values. Filling hands the
-   whole body to the textarea, so its scrollbar spans the modal body. Module
-   scope for stable identity. */
-const FILL_STYLE: CSSProperties = { height: '100%' };
-
-/**
- * Full example-value viewer for template/context-data items whose
- * `example_value` is too long for the picker's item description (a
- * binary-carrying field's example can be an entire base64 file). Opened by the
- * "?" item action wired in `helpers/templates.ts` via reqore's global
- * `modalStore.addModal()` — the modals wrapper injects `isOpen`/`onClose`, so
- * this component stays presentation-only (pass `isOpen` yourself only when
- * rendering it standalone, e.g. in a story).
- */
-export const ReqraftTemplateExampleValueModal = memo(
-  ({
-    label,
-    value,
-    copyLabel = 'Copy',
-    copyNotificationContent = 'Example value copied to clipboard',
-    copyFailedNotificationContent = 'Could not copy to clipboard',
-    ...rest
-  }: IReqraftTemplateExampleValueModalProps) => {
-    const addNotification = useReqoreProperty('addNotification');
-
-    const handleCopyClick = useCallback(async () => {
-      // Clipboard access can be denied (permissions, insecure context) — the
-      // failure surfaces as a notification instead of an unhandled rejection.
-      try {
-        await navigator.clipboard.writeText(value);
-        addNotification({
-          content: copyNotificationContent,
-          intent: 'success',
-          duration: 3000,
-        });
-      } catch (error) {
-        addNotification({
-          content: copyFailedNotificationContent,
-          intent: 'danger',
-          duration: 3000,
-        });
-      }
-    }, [value, addNotification, copyNotificationContent, copyFailedNotificationContent]);
-
-    return (
-      <ReqoreModal
-        label={label || 'Example value'}
-        icon='FileTextLine'
-        height='70vh'
-        className='reqraft-template-example-value-modal'
-        bottomActions={[
-          {
-            position: 'right',
-            label: copyLabel,
-            icon: 'ClipboardLine',
-            onClick: () => {
-              handleCopyClick();
-            },
-          },
-        ]}
-        {...rest}
-      >
-        <ReqoreTextarea
-          readOnly
-          value={value}
-          minimal
-          fluid
-          style={FILL_STYLE}
-          wrapperStyle={FILL_STYLE}
-        />
-      </ReqoreModal>
-    );
-  }
-);
-
-ReqraftTemplateExampleValueModal.displayName = 'ReqraftTemplateExampleValueModal';

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

@@ -1,47 +0,0 @@
-import { ReqoreTag, ReqoreTagGroup } from '@qoretechnologies/reqore';
-import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
-import { memo } from 'react';
-import {
-  getTemplateTagStyle,
-  describeTemplateReference,
-  templateTooltip,
-  TTemplateMeta,
-} from '../../../../helpers/templates';
-
-export interface IReadOnlyTemplateTagProps {
-  /** The template reference value, e.g. `$local:test`. */
-  value: string;
-  /** Template catalogue, for resolving the display name + image + metadata. */
-  templates?: IReqoreFormTemplates;
-  size?: TSizes;
-}
-
-/**
- * The read-only representation of a selected template — a picker-shaped chip:
- * the `$`-dollar icon, the resolved display name (and what the value IS in the
- * tooltip, not the reference that names it), the
- * app image when present, coloured by qorus-ide's scheme (info / qorus purple /
- * success — see `getTemplateTagStyle`). Shared by `TemplateField`'s disabled
- * branch and the compact read-first row so a template reads identically wherever
- * it's shown non-editably.
- */
-export const ReadOnlyTemplateTag = memo(
-  ({ value, templates, size }: IReadOnlyTemplateTagProps) => {
-    const { label, item } = describeTemplateReference(templates, value);
-    const metadata = item?.metadata as TTemplateMeta | undefined;
-    return (
-      <ReqoreTagGroup size={size}>
-        <ReqoreTag
-          icon='ExchangeDollarLine'
-          leftIconProps={{ image: metadata?.image }}
-          label={label}
-          tooltip={templateTooltip(templates, value)}
-          {...getTemplateTagStyle(metadata)}
-        />
-      </ReqoreTagGroup>
-    );
-  }
-);
-
-ReadOnlyTemplateTag.displayName = 'ReadOnlyTemplateTag';