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

package/src/components/form/expressions/builder/argumentDetail.tsx

@@ -1,17 +0,0 @@
-import { IReqoreLabelProps, ReqoreLabel } from '@qoretechnologies/reqore';
-import { memo } from 'react';
-
-export interface IExpressionArgumentDetailProps extends IReqoreLabelProps {}
-
-export const ExpressionArgumentDetail = memo((props: IExpressionArgumentDetailProps) => {
-  return (
-    <ReqoreLabel
-      {...props}
-      color='transparent'
-      minimal
-      labelEffect={{ opacity: 0.3, uppercase: true }}
-      style={{ marginTop: 'auto', ...props.style }}
-      size='tiny'
-    />
-  );
-});

package/src/components/form/expressions/builder/argumentLabel.tsx

@@ -1,146 +0,0 @@
-import { ReqoreIcon, ReqoreP, ReqoreSpan } from '@qoretechnologies/reqore';
-import { uniq } from 'lodash';
-import { argumentMatchesType, getArgumentType } from '../../../../helpers/expressions';
-import { validateFieldWithResult } from '../../../../helpers/validations';
-import { useQorusTypes } from '../../../../hooks/useQorusTypes';
-import { IExpression, IExpressionSchema, IExpressionSchemaArg } from '../types';
-
-export interface IExpressionBuilderArgumentLabelProps {
-  label: string;
-  arg?: IExpression;
-  expressions: IExpressionSchema[];
-  schema?: IExpressionSchemaArg;
-  type?: string;
-}
-
-export const ExpressionBuilderArgumentLabel = ({
-  label,
-  arg,
-  schema,
-  expressions,
-  type,
-}: IExpressionBuilderArgumentLabelProps) => {
-  const types = useQorusTypes();
-
-  if (!schema) {
-    return (
-      <ReqoreP
-        size='tiny'
-        effect={{
-          uppercase: true,
-          spaced: 1,
-          weight: 'thick',
-          opacity: 0.6,
-        }}
-      >
-        {label}
-      </ReqoreP>
-    );
-  }
-
-  const matchesType = argumentMatchesType(expressions, arg, schema);
-
-  const argumentType = getArgumentType(expressions, arg, schema);
-  const matchesTypeExactly =
-    types.getExactMatches(schema.ui_type).includes(argumentType) ||
-    types.getExactMatches(schema.ui_type).includes('any') ||
-    type === 'any';
-  const acceptedTypes = uniq([
-    ...types.getExactMatches(schema.ui_type),
-    ...types.getAcceptedTypes(schema.ui_type),
-  ]);
-  /* `arg` is optional — an operand the author has not filled in yet has no
-     entry at all, and a literal carried straight from a parse can be the null
-     literal itself. Both were dereferenced unguarded here, which took the whole
-     expression editor down to its error boundary rather than drawing an empty
-     argument. */
-  const { isValid, reason } =
-    arg?.is_expression ?
-      validateFieldWithResult('expression', arg, { expressions })
-    : validateFieldWithResult(argumentType, arg?.value, schema, !schema.required);
-
-  return (
-    <ReqoreP
-      size='tiny'
-      effect={{
-        uppercase: true,
-        spaced: 1,
-        weight: 'thick',
-      }}
-    >
-      {!isValid && <ReqoreIcon icon='ErrorWarningLine' color='danger' size='10px' margin='right' />}
-      {schema.display_name && (
-        <ReqoreSpan
-          effect={{
-            opacity: 1,
-            underline: !isValid || !matchesType ? 'underline solid red' : undefined,
-          }}
-          tooltip={
-            isValid
-              ? !matchesType
-                ? `This arguments type does not match the required type (${acceptedTypes.join(', ')}) and has to wrapped`
-                : undefined
-              : reason
-          }
-        >
-          {schema.display_name}
-        </ReqoreSpan>
-      )}{' '}
-      {schema.required && <ReqoreIcon icon='Asterisk' color='danger' size='10px' />} {label}
-      <ReqoreSpan
-        effect={{
-          italic: true,
-          weight: 'light',
-          opacity: 0.5,
-        }}
-      >
-        {'['}
-        {types.getTypeDisplayName(schema.ui_type)}
-      </ReqoreSpan>
-      {!matchesType ? (
-        <ReqoreIcon icon='ErrorWarningLine' color='warning' size='10px' margin='both' />
-      ) : null}
-      {(argumentType || (arg?.is_expression && arg.value?.exp)) &&
-      types.getTypeDisplayName(argumentType) !== types.getTypeDisplayName(schema.ui_type) &&
-      !matchesTypeExactly ? (
-        <>
-          {matchesType ? (
-            <ReqoreIcon
-              icon='CheckLine'
-              color='pending'
-              size='10px'
-              margin='both'
-              tooltip='Type matches, but a transformation may be applied'
-            />
-          ) : null}
-
-          <ReqoreSpan
-            effect={{
-              italic: true,
-              weight: 'light',
-              opacity: 1,
-              underline: 'underline 1px dotted',
-            }}
-            intent={matchesType ? 'pending' : 'warning'}
-            tooltip={
-              matchesType
-                ? 'Type matches, but a transformation may be applied'
-                : `Type does not match expected type of ${acceptedTypes?.join(' or ')}`
-            }
-          >
-            {types.getTypeDisplayName(argumentType)}
-          </ReqoreSpan>
-        </>
-      ) : null}
-      <ReqoreSpan
-        effect={{
-          italic: true,
-          weight: 'light',
-          opacity: 0.5,
-        }}
-      >
-        {']'}
-      </ReqoreSpan>
-    </ReqoreP>
-  );
-};

package/src/components/form/expressions/builder/argumentSlot.tsx

@@ -1,101 +0,0 @@
-import { ReqoreButton, useReqoreTheme } from '@qoretechnologies/reqore';
-import { memo } from 'react';
-import { usePhoneViewport } from '../../../../hooks/usePhoneViewport';
-
-export interface IExpressionBuilderAddArgumentSlotProps {
-  /**
-   * What the catalogue calls the operand ("Value" for `concat` and `+`), so
-   * the slot reads "Add value" rather than a generic verb.
-   */
-  argumentName?: string;
-  /** The expression is incomplete, so another operand would only add to the problem. */
-  disabled?: boolean;
-  /** An operand is being dragged over the slot. */
-  dragOver?: boolean;
-  /** Accept a dragged operand: dropping here moves it to the end. */
-  droppable?: boolean;
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  onDragOver?: () => void;
-  onDrop?: () => void;
-}
-
-/**
- * The "add another operand" control of a varargs expression, rendered as the
- * operand it is about to become: a dashed, field-height slot after the last
- * operand. The button is where the new value will appear, so it needs no
- * tooltip to explain itself, it wraps with the operands (on a phone it is
- * simply the last row), and it costs no height while the row has room.
- *
- * On a phone the operands stack one per row, and the slot becomes a row of
- * its own: full width, label centred, so it reads as the next row rather
- * than a stray button under the last one. The width comes from the media
- * query (`usePhoneViewport`), not reqore's `isMobile`, so the phone story
- * captures the phone layout.
- *
- * It keeps the `expression-add-arg` class the header icon carried before it,
- * so consumers' stories and tests that click it keep working.
- */
-export const ExpressionBuilderAddArgumentSlot = memo(
-  ({
-    argumentName,
-    disabled,
-    dragOver,
-    droppable,
-    onClick,
-    onDragOver,
-    onDrop,
-  }: IExpressionBuilderAddArgumentSlotProps) => {
-    const theme = useReqoreTheme();
-    const isMobile = usePhoneViewport();
-    const name = (argumentName || 'argument').toLowerCase();
-
-    return (
-      <ReqoreButton
-        compact
-        fixed={!isMobile}
-        fluid={isMobile}
-        textAlign={isMobile ? 'center' : undefined}
-        iconsAlign={isMobile ? 'center' : undefined}
-        minimal
-        size='small'
-        className='expression-add-arg'
-        icon='AddLine'
-        label={`Add ${name}`}
-        tooltip={
-          disabled ? 'Fill in the current values first' : `Add another ${name} after the last one`
-        }
-        disabled={disabled}
-        onClick={onClick}
-        // Drag events stop here for the same reason they stop on an operand:
-        // a nested builder's slot must not light up the parent's.
-        {...(droppable
-          ? {
-              onDragOver: (event: React.DragEvent) => {
-                event.preventDefault();
-                event.stopPropagation();
-                onDragOver?.();
-              },
-              onDrop: (event: React.DragEvent) => {
-                event.preventDefault();
-                event.stopPropagation();
-                onDrop?.();
-              },
-            }
-          : {})}
-        style={{
-          // Sits on the field row: the operands carry a label above their
-          // field, and the slot has no label to carry. The operand group
-          // spaces its wrapped lines with a bottom margin on every child;
-          // with that margin the slot already fills the line and cannot
-          // reach its end, and as the last item it has nothing to space.
-          alignSelf: isMobile ? 'stretch' : 'flex-end',
-          marginBottom: 0,
-          borderStyle: 'dashed',
-          ...(dragOver
-            ? { outline: `1px dashed ${theme.intents.info}`, outlineOffset: 4, borderRadius: 4 }
-            : {}),
-        }}
-      />
-    );
-  }
-);

package/src/components/form/expressions/builder/argumentWrapper.tsx

@@ -1,243 +0,0 @@
-import {
-  ReqoreButton,
-  ReqoreControlGroup,
-  ReqoreDropdown,
-  ReqorePanel,
-  useReqoreTheme,
-} from '@qoretechnologies/reqore';
-import { memo } from 'react';
-import styled from 'styled-components';
-import { ordinal } from '../../../../helpers/common';
-import {
-  IExpression,
-  IExpressionSchema,
-  IExpressionSchemaArg,
-  TExpressionReorderSurface,
-} from '../types';
-import { ExpressionBuilderArgumentLabel } from './argumentLabel';
-
-/**
- * An operand's field row: the field (a value or a field reference, its clear button, its ⋮ menu) shrinks
- * with a narrow row. A control group that is not fluid does not shrink, and a field is several of them
- * nested, so in a narrow column - not only on a phone, where operands are fluid - the field kept its
- * natural width and its ⋮ was cut off at the expression's edge or hung past it. The value gives way, down
- * to its own least width, and the controls beside it stay in the row.
- *
- * The row's own control group, styled - not a wrapper inside it: a control group hands its size to its
- * children, and a wrapper between them drew the field at the normal size instead of the row's small one.
- */
-const StyledOperandFieldRow = styled(ReqoreControlGroup)`
-  min-width: 0;
-  max-width: 100%;
-
-  .reqore-control-group {
-    flex-shrink: 1;
-    min-width: 0;
-    max-width: 100%;
-  }
-`;
-
-export interface IExpressionBuilderArgumentWrapperProps {
-  children: React.ReactNode;
-  schema?: IExpressionSchemaArg;
-  arg?: IExpression;
-  onTypeChange?: (type: string | 'context') => void;
-  onRemoveArgClick?: () => void;
-  hasMultipleArgs?: boolean;
-  expressions: IExpressionSchema[];
-  label?: string;
-  readOnly?: boolean;
-  /** Span the operand row — a phone shows one operand per row, full width. */
-  fluid?: boolean;
-  /** Reorder surfaces to render; undefined = this operand cannot be moved. */
-  reorder?: TExpressionReorderSurface[];
-  argIndex?: number;
-  argCount?: number;
-  /** Another operand is being dragged over this one. */
-  dragOver?: boolean;
-  onMoveArg?: (from: number, to: number) => void;
-  onArgDragStart?: (index: number) => void;
-  onArgDragOver?: (index: number) => void;
-  onArgDrop?: (index: number) => void;
-  onArgDragEnd?: () => void;
-}
-
-export const ExpressionBuilderArgumentWrapper = memo(
-  ({
-    children,
-    schema,
-    arg,
-    onRemoveArgClick,
-    hasMultipleArgs,
-    expressions,
-    label,
-    readOnly,
-    fluid,
-    reorder,
-    argIndex = 0,
-    argCount = 0,
-    dragOver,
-    onMoveArg,
-    onArgDragStart,
-    onArgDragOver,
-    onArgDrop,
-    onArgDragEnd,
-  }: IExpressionBuilderArgumentWrapperProps) => {
-    const theme = useReqoreTheme();
-    const type = arg?.type || schema?.ui_type || 'context';
-    const draggable = !!reorder?.includes('dragHandle');
-
-    // Only the grip is `draggable`, so a drag never starts from inside the
-    // field and text selection there is untouched; the drag image is the
-    // whole operand. Drag events stop here: an operand of a nested builder
-    // must not light up (or drop into) the parent builder's slots.
-    const dragProps: React.HTMLAttributes<HTMLDivElement> = draggable
-      ? {
-          onDragOver: (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            onArgDragOver?.(argIndex);
-          },
-          onDrop: (event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            onArgDrop?.(argIndex);
-          },
-          onDragEnd: (event) => {
-            event.stopPropagation();
-            onArgDragEnd?.();
-          },
-          style: dragOver
-            ? { outline: `1px dashed ${theme.intents.info}`, outlineOffset: 4, borderRadius: 4 }
-            : undefined,
-        }
-      : {};
-
-    // A literal fragment, so the control group still clones its size onto
-    // the grip and the dropdown.
-    const renderReorderControls = () => (
-      <>
-        {draggable && (
-          <ReqoreButton
-            compact
-            fixed
-            minimal
-            flat
-            transparent
-            className='expression-arg-drag-handle'
-            icon='Draggable'
-            tooltip='Drag to reorder'
-            // As tight as the field's `⋮` button next to it.
-            style={{ cursor: 'grab', paddingLeft: 0, paddingRight: 0, minWidth: '10px' }}
-            draggable
-            onDragStart={(event) => {
-              event.stopPropagation();
-              // Synthetic drag events (play tests) carry no dataTransfer.
-              const operand = event.currentTarget.closest('.expression-arg');
-              if (event.dataTransfer && operand) {
-                event.dataTransfer.effectAllowed = 'move';
-                event.dataTransfer.setDragImage(operand, 0, 0);
-              }
-              onArgDragStart?.(argIndex);
-            }}
-          />
-        )}
-        {reorder?.includes('positionPicker') && (
-          <ReqoreDropdown
-            compact
-            fixed
-            minimal
-            flat
-            className='expression-arg-position'
-            label={ordinal(argIndex + 1)}
-            tooltip='Position — pick a new one to move this argument'
-            items={Array.from({ length: argCount }, (_, target) => ({
-              label: ordinal(target + 1),
-              selected: target === argIndex,
-              disabled: target === argIndex,
-              onClick: () => onMoveArg?.(argIndex, target),
-            }))}
-          />
-        )}
-      </>
-    );
-
-    if (arg?.is_expression) {
-      return (
-        <ReqoreControlGroup
-          vertical
-          fluid
-          gapSize='small'
-          className='expression-arg'
-          {...dragProps}
-        >
-          <ReqoreControlGroup verticalAlign='center' gapSize='small'>
-            <ExpressionBuilderArgumentLabel
-              arg={arg}
-              schema={schema}
-              label={label || ''}
-              expressions={expressions}
-              type={type}
-            />
-            {reorder && renderReorderControls()}
-          </ReqoreControlGroup>
-          <ReqorePanel
-            minimal
-            fluid
-            wrapperPadding='top'
-            responsiveTitle={false}
-            responsiveActions={false}
-            size='small'
-            flat
-            padded={false}
-            transparent
-          >
-            {children}
-          </ReqorePanel>
-        </ReqoreControlGroup>
-      );
-    }
-
-    return (
-      <ReqoreControlGroup
-        vertical
-        wrap
-        fluid={fluid}
-        size='small'
-        className='expression-arg'
-        {...dragProps}
-        // at most the width of the expression it is in: a narrow column shrinks its field instead
-        style={{ flexShrink: 1, minWidth: 0, maxWidth: '100%', ...dragProps.style }}
-      >
-        <ExpressionBuilderArgumentLabel
-          arg={arg}
-          schema={schema}
-          label={label}
-          expressions={expressions}
-        />
-        {/* A fluid operand is a phone row: grip, field and `⋮` share it, and
-            the field takes what is left; wrapping would put the grip on a
-            line of its own above a full-width field. */}
-        <StyledOperandFieldRow verticalAlign='flex-start' wrap={!fluid} fluid className='expression-arg-field'>
-          {reorder && renderReorderControls()}
-          {children}
-          {hasMultipleArgs && (
-            <ReqoreButton
-              compact
-              intent='danger'
-              minimal
-              fixed
-              className='expression-remove-arg'
-              icon='DeleteBinLine'
-              flat
-              transparent
-              tooltip='Remove argument'
-              onClick={onRemoveArgClick}
-              disabled={readOnly}
-            />
-          )}
-        </StyledOperandFieldRow>
-      </ReqoreControlGroup>
-    );
-  }
-);

package/src/components/form/expressions/builder/confirmMismatchedTypesModal.tsx

@@ -1,120 +0,0 @@
-import { ReqoreButton, ReqoreControlGroup, ReqoreModal, ReqoreP } from '@qoretechnologies/reqore';
-import { IReqoreModalProps } from '@qoretechnologies/reqore/dist/components/Modal';
-import { omit, size } from 'lodash';
-import { memo, useState } from 'react';
-import { getArgumentType } from '../../../../helpers/expressions';
-import { useQorusTypes } from '../../../../hooks/useQorusTypes';
-import { IExpression, IExpressionSchema } from '../types';
-
-export interface IConfirmMismatchedTypesModalProps extends Omit<IReqoreModalProps, 'onSubmit'> {
-  expression: IExpressionSchema;
-  expressions: IExpressionSchema[];
-  args: IExpression[];
-  onSubmit: (args: IExpression[]) => void;
-}
-
-export const ConfirmMismatchedTypesModal = memo(
-  ({ args, expression, expressions, onSubmit, ...rest }: IConfirmMismatchedTypesModalProps) => {
-    const types = useQorusTypes();
-    const [fixedArgs, setFixedArgs] = useState<IExpression[]>(() =>
-      args.map((a) => (a.types_mismatch ? { ...a, types_mismatch: false } : a))
-    );
-
-    const handleArgToggle = (arg: IExpression) => {
-      setFixedArgs((prev) =>
-        prev.map((a) => (a === arg ? { ...a, types_mismatch: !a.types_mismatch } : a))
-      );
-    };
-
-    return (
-      <ReqoreModal
-        isOpen
-        intent='warning'
-        icon='ErrorWarningLine'
-        label='Confirm type selection for mismatched arguments'
-        {...rest}
-        customZIndex={1000000}
-        bottomActions={[
-          {
-            position: 'left',
-            label: 'Discard all',
-            icon: 'CloseLine',
-            onClick: () => {
-              onSubmit(args.map(() => ({})));
-            },
-          },
-          {
-            position: 'right',
-            label: 'Accept all',
-            icon: 'CheckDoubleLine',
-            onClick: () => {
-              // We need to fix the values now - we accept all transformations
-              const finalArgs = fixedArgs.map((arg) => omit(arg, ['types_mismatch']));
-
-              onSubmit(finalArgs);
-            },
-          },
-          {
-            position: 'right',
-            label: 'Confirm selection',
-            icon: 'CheckLine',
-            onClick: () => {
-              // We need to fix the values now - if an arg still has types_mismatch true, we need to clear its value and type
-              // Otherwise, we keep it as is, but we need to remove the types_mismatch flag
-              const finalArgs = fixedArgs.map((arg) => {
-                if (arg.types_mismatch) {
-                  return {};
-                }
-
-                return omit(arg, ['types_mismatch']);
-              });
-
-              onSubmit(finalArgs);
-            },
-          },
-        ]}
-      >
-        <ReqoreControlGroup vertical fluid horizontalAlign='center' gapSize='big'>
-          <ReqoreP style={{ textAlign: 'center' }}>
-            The following arguments have types that do not match the expected types, but can be used
-            and will be transformed.
-          </ReqoreP>
-          <ReqoreP style={{ textAlign: 'center' }}>
-            Please deselect the arguments you do not wish to transform:
-          </ReqoreP>
-          <ReqoreControlGroup vertical fluid horizontalAlign='center'>
-            {args.map((arg, index) => (
-              <ReqoreButton
-                icon={
-                  arg.types_mismatch
-                    ? fixedArgs[index].types_mismatch
-                      ? 'CheckboxBlankCircleLine'
-                      : 'CheckboxCircleFill'
-                    : 'CheckDoubleLine'
-                }
-                key={index}
-                description={
-                  fixedArgs[index].types_mismatch === false
-                    ? `This argument will be transformed from ${types.getTypeDisplayName(getArgumentType(expressions, arg, expression.args[index]))} to ${types.getTypeDisplayName(expression.args[index].ui_type)}`
-                    : fixedArgs[index].types_mismatch === true
-                      ? 'This argument will be cleared and no transformation will be applied'
-                      : 'This argument requires no transformation'
-                }
-                disabled={!arg.types_mismatch}
-                onClick={() => handleArgToggle(fixedArgs[index])}
-                intent={arg.types_mismatch ? 'pending' : undefined}
-                minimal
-              >
-                {expression.args[index].display_name}
-              </ReqoreButton>
-            ))}
-          </ReqoreControlGroup>
-          <ReqoreP style={{ textAlign: 'center' }} size='small' intent='muted'>
-            {size(fixedArgs.filter((a) => a.types_mismatch === false))} argument(s) will be
-            transformed.
-          </ReqoreP>
-        </ReqoreControlGroup>
-      </ReqoreModal>
-    );
-  }
-);

package/src/components/form/expressions/builder/confirmUnsupportedTypeModal.tsx

@@ -1,69 +0,0 @@
-import {
-  ReqoreCheckbox,
-  ReqoreControlGroup,
-  ReqoreModal,
-  ReqoreP,
-  ReqoreTag,
-  ReqoreTagGroup,
-} from '@qoretechnologies/reqore';
-import { IReqoreModalProps } from '@qoretechnologies/reqore/dist/components/Modal';
-import { memo } from 'react';
-import { useReqraftStorage } from '../../../../hooks/useStorage/useStorage';
-import { useQorusTypes } from '../../../../hooks/useQorusTypes';
-
-export interface IConfirmUnsupportedTypeModalProps extends IReqoreModalProps {
-  acceptedTypes: string[];
-  exactMatch?: boolean;
-}
-
-export const ConfirmUnsupportedTypeModal = memo(
-  ({ acceptedTypes, children, ...rest }: IConfirmUnsupportedTypeModalProps) => {
-    const types = useQorusTypes();
-    const [doNotShowTypeConfirmation, setDoNotShowTypeConfirmation] = useReqraftStorage<boolean>(
-      'doNotShowTypeExpressionConfirmation',
-      false,
-      true
-    );
-
-    return (
-      <ReqoreModal
-        isOpen
-        intent='warning'
-        icon='ErrorWarningLine'
-        label='Confirm type selection'
-        {...rest}
-        customZIndex={1000000}
-      >
-        {children ? (
-          children
-        ) : (
-          <ReqoreControlGroup vertical fluid horizontalAlign='center' gapSize='big'>
-            <ReqoreP style={{ textAlign: 'center' }}>
-              The type you have selected does not conform to the expected types for this argument.
-              Expected types are:{' '}
-            </ReqoreP>
-            <ReqoreTagGroup size='small' align='center'>
-              {acceptedTypes?.map((t) => (
-                <ReqoreTag
-                  key={t}
-                  label={types.value?.find((type) => type.name === t)?.display_name || t}
-                />
-              ))}
-            </ReqoreTagGroup>
-            <ReqoreP style={{ textAlign: 'center' }}>
-              Are you sure you want to proceed with this type?
-            </ReqoreP>
-            <ReqoreCheckbox
-              label="Don't show again"
-              size='small'
-              asSwitch
-              intent={doNotShowTypeConfirmation ? 'info' : undefined}
-              checked={doNotShowTypeConfirmation}
-              onClick={() => setDoNotShowTypeConfirmation(!doNotShowTypeConfirmation)}
-            ></ReqoreCheckbox>
-          </ReqoreControlGroup>
-        )}
-      </ReqoreModal>
-    );
-  }
-);