@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

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

@@ -1,89 +0,0 @@
-import { ReqoreModal } from '@qoretechnologies/reqore';
-import {
-  IReqorePanelAction,
-  IReqorePanelProps,
-} from '@qoretechnologies/reqore/dist/components/Panel';
-import { rgba } from 'polished';
-import { useCallback, useState } from 'react';
-import styled, { css } from 'styled-components';
-
-export const StyledExpressionItem: React.FC<IExpressionItemProps> = styled.div`
-  position: relative;
-  overflow: unset;
-
-  ${({ isChild, isAndOr, index }) =>
-    isChild &&
-    css`
-      &::before {
-        content: '';
-        position: absolute;
-        ${index === 0 ? 'top' : 'bottom'}: ${isAndOr ? '50%' : '11px'};
-        left: -10px;
-        width: 10px;
-        height: 1px;
-        background-color: ${() => rgba('#fff', 0.3)};
-      }
-    `}
-`;
-
-export interface IExpressionItemProps extends IReqorePanelProps {
-  isChild?: boolean;
-  isAndOr?: boolean;
-  index?: number;
-  readOnly?: boolean;
-}
-
-export const ExpressionItem = (props: IExpressionItemProps) => {
-  const [isFullscreen, setIsFullscreen] = useState(false);
-
-  const handleFullscreenToggle = useCallback(() => {
-    setIsFullscreen((prev) => !prev);
-  }, []);
-
-  const renderContent = (focused?: boolean) => {
-    return (
-      <StyledExpressionItem
-        collapsible
-        responsiveActions={false}
-        responsiveTitle={false}
-        collapseButtonProps={{ size: 'tiny' }}
-        {...props}
-        actions={[
-          {
-            show: focused || props.readOnly ? false : 'hover',
-            icon: 'FullscreenLine',
-            tooltip: 'Focused Editing',
-            className: 'expression-item-fullscreen',
-            size: 'tiny',
-            onClick: handleFullscreenToggle,
-          },
-          ...(props.actions || []).map(
-            (action): IReqorePanelAction => ({ ...action, size: 'tiny' })
-          ),
-        ]}
-      >
-        {props.children}
-      </StyledExpressionItem>
-    );
-  };
-
-  return (
-    <>
-      {isFullscreen && (
-        <ReqoreModal
-          isOpen
-          label='Focused Editing'
-          icon='FullscreenFill'
-          blur={15}
-          customTheme={{ main: '#111111' }}
-          onClose={handleFullscreenToggle}
-          responsiveTitle={false}
-          responsiveActions={false}
-        >
-          {renderContent(true)}
-        </ReqoreModal>
-      )}
-      {renderContent()}
-    </>
-  );
-};

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

@@ -1,156 +0,0 @@
-import {
-  ReqoreButton,
-  ReqoreControlGroup,
-  ReqoreDropdown,
-  ReqoreInput,
-  ReqoreMenuItem,
-} from '@qoretechnologies/reqore';
-import { memo, useState } from 'react';
-import { ordinal } from '../../../../helpers/common';
-
-/** Positions offered as one-click segments before the typed field takes over. */
-export const QUICK_POSITIONS = 4;
-/** Up to this many operands, a single position dropdown replaces the strip. */
-export const PICKER_POSITIONS = 3;
-
-export interface IExpressionMoveToPositionStripProps {
-  index: number;
-  count: number;
-  onMoveTo: (to: number) => void;
-}
-
-const positionItems = (index: number, from: number, count: number) =>
-  Array.from({ length: count - from }, (_, i) => {
-    const to = from + i;
-
-    return {
-      label: ordinal(to + 1),
-      className: `expression-arg-move-to-${to + 1}`,
-      selected: to === index,
-      disabled: to === index,
-      value: to,
-    };
-  });
-
-/**
- * The "Move to position" row of the ⋮ menu's "Move Argument" section: an
- * icon and label in the shape of the rows above it. Up to three operands the
- * position sits beside the label as a small dropdown; past that the strip
- * follows under the label — the first four positions as segments, a number
- * field with an arrow, and a "More" list of the rest.
- */
-export const ExpressionMoveToPositionStrip = memo(
-  ({ index, count, onMoveTo }: IExpressionMoveToPositionStripProps) => {
-    const [draft, setDraft] = useState('');
-    const target = Number(draft);
-    const canGo =
-      draft !== '' &&
-      Number.isInteger(target) &&
-      target >= 1 &&
-      target <= count &&
-      target - 1 !== index;
-    const go = () => canGo && onMoveTo(target - 1);
-    const quick = Math.min(QUICK_POSITIONS, count);
-    // The label row: a menu item like its siblings, but not a control itself.
-    const label = (
-      <ReqoreMenuItem
-        icon='ListOrdered'
-        label='Move to position'
-        readOnly
-        fluid={false}
-        style={{ cursor: 'default' }}
-      />
-    );
-
-    if (count <= PICKER_POSITIONS) {
-      return (
-        <ReqoreControlGroup
-          size='small'
-          gapSize='small'
-          verticalAlign='center'
-          className='expression-arg-move-to'
-        >
-          {label}
-          <ReqoreDropdown
-            compact
-            className='expression-arg-move-to-picker'
-            label={ordinal(index + 1)}
-            caretPosition='right'
-            items={positionItems(index, 0, count).map((item) => ({
-              ...item,
-              onClick: () => onMoveTo(item.value),
-            }))}
-          />
-        </ReqoreControlGroup>
-      );
-    }
-
-    return (
-      <ReqoreControlGroup vertical gapSize='small' className='expression-arg-move-to'>
-        {label}
-        <ReqoreControlGroup
-          size='small'
-          gapSize='small'
-          fluid={false}
-          verticalAlign='center'
-          style={{ padding: '0 10px 6px 32px' }}
-        >
-          <ReqoreControlGroup stack size='small' fluid={false}>
-            {Array.from({ length: quick }, (_, to) => (
-              <ReqoreButton
-                key={to}
-                compact
-                textAlign='center'
-                className={`expression-arg-move-to-${to + 1}`}
-                active={to === index}
-                disabled={to === index}
-                label={String(to + 1)}
-                tooltip={to === index ? 'Current position' : `Move to ${ordinal(to + 1)}`}
-                onClick={() => onMoveTo(to)}
-              />
-            ))}
-          </ReqoreControlGroup>
-          {count > QUICK_POSITIONS && (
-            <>
-              <ReqoreControlGroup stack size='small' fluid={false}>
-                <ReqoreInput
-                  type='number'
-                  size='small'
-                  className='expression-arg-move-to-input'
-                  placeholder={`${QUICK_POSITIONS + 1}–${count}`}
-                  value={draft}
-                  min={1}
-                  max={count}
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
-                    setDraft(event.target.value)
-                  }
-                  onKeyDown={(event: React.KeyboardEvent) => event.key === 'Enter' && go()}
-                  style={{ width: 64 }}
-                />
-                <ReqoreButton
-                  compact
-                  className='expression-arg-move-to-go'
-                  icon='ArrowRightLine'
-                  tooltip='Move to that position'
-                  disabled={!canGo}
-                  onClick={go}
-                />
-              </ReqoreControlGroup>
-              <ReqoreDropdown
-                compact
-                className='expression-arg-move-to-more'
-                label='More'
-                caretPosition='right'
-                filterable={count - QUICK_POSITIONS > 8}
-                items={positionItems(index, QUICK_POSITIONS, count).map((item) => ({
-                  ...item,
-                  onClick: () => onMoveTo(item.value),
-                }))}
-              />
-            </>
-          )}
-        </ReqoreControlGroup>
-      </ReqoreControlGroup>
-    );
-  }
-);

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

@@ -1,42 +0,0 @@
-// SEAM (reqraft): the IDE rendered the readable expression via
-// `callBackendBasic('render-expression')` over the Creator WebSocket; here the
-// same server rendering arrives over the LSP (`dpql/renderExpression`, via
-// `useRenderExpression`) and is shown through `ExpressionRendering`, the one
-// read-only rendering every expression surface shares — monospace, coloured by
-// the language server, template references as chips.
-// The component name/shape is kept identical so `index.tsx`'s usage is
-// unchanged.
-import { ReqoreMessage } from '@qoretechnologies/reqore';
-import { IReqoreFormTemplates } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { validateField } from '../../../../helpers/validations';
-import { ExpressionRendering } from '../DpqlRendering';
-import { IExpression, IExpressionSchema } from '../types';
-
-export interface IExpressionRenderTemplateProps {
-  exp: IExpression;
-  expressions: IExpressionSchema[];
-  /** The builder's template catalogue: a reference in it reads as its name. */
-  templates?: IReqoreFormTemplates;
-}
-
-export const ExpressionRenderTemplate = ({
-  exp,
-  expressions,
-  templates,
-}: IExpressionRenderTemplateProps) => {
-  if (!validateField('expression', exp, { expressions })) {
-    return (
-      <ReqoreMessage size='small' intent='muted' flat opaque={false}>
-        Expression is invalid, unable to render summary
-      </ReqoreMessage>
-    );
-  }
-
-  return (
-    <ExpressionRendering
-      expression={exp.value}
-      templates={templates}
-      data-testid='expression-explanation'
-    />
-  );
-};