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

package/src/components/form/fields/file/File.tsx

@@ -1,227 +0,0 @@
-import {
-  ReqoreButton,
-  ReqoreControlGroup,
-  ReqoreH4,
-  ReqoreIcon,
-  ReqoreP,
-  ReqorePanel,
-  ReqoreSkeleton,
-  ReqoreTabs,
-  ReqoreTabsContent,
-} from '@qoretechnologies/reqore';
-import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
-import { IReqorePanelProps } from '@qoretechnologies/reqore/dist/components/Panel';
-import { IReqoreTabsProps } from '@qoretechnologies/reqore/dist/components/Tabs';
-import { IQorusFormSchema } from '@qoretechnologies/ts-toolkit';
-import { filesize } from 'filesize';
-import { reduce, size } from 'lodash';
-import { memo, useCallback, useEffect, useMemo } from 'react';
-import { Accept, DropzoneOptions, useDropzone } from 'react-dropzone';
-// Direct import — circular dep is safe because modules are loaded before any component renders
-import { FormEngine } from '../../engine/FormEngine';
-
-export interface IFileFormFieldValue {
-  name?: string;
-  content?: string;
-  size?: number;
-  mime_type?: { type: string; value: any };
-}
-
-export interface IReqraftFileFormFieldProps extends Omit<IReqorePanelProps, 'onChange'> {
-  value?: IFileFormFieldValue;
-  onChange?: (value: IFileFormFieldValue) => void;
-  readonly?: boolean;
-  options?: DropzoneOptions;
-  valueButtonProps?: IReqoreButtonProps;
-  /** If provided, shows the "Build a File" tab with a FormEngine */
-  argSchema?: IQorusFormSchema;
-  /** While the arg_schema is being fetched from the API */
-  argSchemaLoading?: boolean;
-  /**
-   * Accept multiple files in the picker / drop zone. When set, `onChange`
-   * fires once per picked file (so consumers keep their existing
-   * single-file handler shape — they just receive it N times). Picked
-   * files are not previewed inline; the consumer is expected to render
-   * its own list / chip group from the accumulated values.
-   */
-  multiple?: boolean;
-}
-
-export const ReqraftFileFormField = memo(
-  ({
-    value,
-    onChange,
-    options = {},
-    valueButtonProps = {},
-    argSchema,
-    argSchemaLoading,
-    multiple,
-    ...rest
-  }: IReqraftFileFormFieldProps) => {
-    const contentStyle: React.CSSProperties = useMemo(
-      (): React.CSSProperties => ({
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }),
-      []
-    );
-
-    const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
-      disabled: rest.disabled || rest.readonly,
-      maxFiles: multiple ? 0 : 1,
-      multiple: !!multiple,
-      ...options,
-    });
-
-    const extensions = useMemo(() => {
-      if (!options.accept) {
-        return [];
-      }
-
-      return reduce<Accept, string[]>(
-        options.accept,
-        (acc, ext) => {
-          return [...acc, ...ext];
-        },
-        []
-      );
-    }, [options.accept]);
-
-    const renderExtensions = useCallback(
-      (asString?: boolean) => {
-        if (size(extensions) === 0) {
-          return '';
-        }
-
-        if (asString) {
-          return extensions.join(', ');
-        }
-
-        return (
-          <ReqoreP intent='muted' size='small'>
-            {extensions.join(', ')}
-          </ReqoreP>
-        );
-      },
-      [extensions]
-    );
-
-    useEffect(() => {
-      if (acceptedFiles.length === 0) {
-        return;
-      }
-
-      const filesToRead = multiple ? acceptedFiles : [acceptedFiles[0]];
-
-      filesToRead.forEach((file) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          onChange?.({
-            name: file.name,
-            content: reader.result as string,
-            size: file.size,
-          });
-        };
-        reader.readAsDataURL(file);
-      });
-    }, [acceptedFiles]);
-
-    const handleTabChange = useCallback(
-      (tabId: string | number) => {
-        if (tabId === 'build') {
-          onChange?.({ mime_type: { type: 'richtext', value: undefined } });
-        } else {
-          onChange?.(undefined);
-        }
-      },
-      [onChange]
-    );
-
-    const tabs = useMemo(
-      (): IReqoreTabsProps['tabs'] => [
-        { label: 'Upload a File', id: 'upload', icon: 'FileUploadLine', compact: true },
-        { label: 'Build a File', id: 'build', icon: 'FileAddLine', compact: true },
-      ],
-      []
-    );
-
-    const renderUploader = useCallback(() => {
-      // In multi-file mode, the consumer is responsible for rendering its
-      // own list of picked files (e.g. as a chip group). Always show the
-      // click-or-drop area so the user can keep adding files.
-      if (!multiple && value && !value.mime_type) {
-        return (
-          <>
-            <input {...getInputProps()} />
-            {typeof value.content === 'string' && value.content.startsWith('data:image') ? (
-              <img
-                src={value.content}
-                alt={value.name || 'Uploaded file'}
-                style={{ maxWidth: '100%', maxHeight: 60 }}
-              />
-            ) : null}
-            <ReqoreButton
-              label={value.name}
-              minimal
-              intent='info'
-              icon='FileLine'
-              rightIcon='FileUploadLine'
-              badge={filesize(value.size || 0)}
-              description={`Click here to upload a different ${renderExtensions(true)} file`}
-              {...valueButtonProps}
-              {...getRootProps()}
-            />
-          </>
-        );
-      }
-
-      return (
-        <ReqorePanel contentStyle={contentStyle} {...rest} {...getRootProps()} size='huge'>
-          <input {...getInputProps()} />
-          <ReqoreControlGroup vertical horizontalAlign='center'>
-            <ReqoreH4 size='small'>
-              <ReqoreIcon icon='FileAddLine' size='small' /> Click or drop files here to upload
-            </ReqoreH4>
-            {renderExtensions()}
-          </ReqoreControlGroup>
-        </ReqorePanel>
-      );
-    }, [value, rest, valueButtonProps, getInputProps, getRootProps, renderExtensions, contentStyle, multiple]);
-
-    if (!argSchema && !argSchemaLoading) {
-      return renderUploader();
-    }
-
-    return (
-      <ReqoreTabs
-        size={rest.size as any}
-        fill
-        onTabChange={handleTabChange}
-        tabsPadding='vertical'
-        activeTab={value?.mime_type ? 'build' : 'upload'}
-        tabs={tabs}
-      >
-        <ReqoreTabsContent tabId='upload'>{renderUploader()}</ReqoreTabsContent>
-        <ReqoreTabsContent tabId='build'>
-          {argSchemaLoading || !argSchema ?
-            <ReqoreSkeleton height='120px' />
-          : <FormEngine
-              name='file-build'
-              options={argSchema}
-              value={value as any}
-              onChange={(_name, val) => onChange?.(val as IFileFormFieldValue)}
-              flat
-              wrapperPadding='bottom'
-              columns={1}
-              minColumnWidth='150px'
-              size={rest.size as any}
-              disabled={rest.disabled}
-            />
-          }
-        </ReqoreTabsContent>
-      </ReqoreTabs>
-    );
-  }
-);

package/src/components/form/fields/long-string/LongString.stories.tsx

@@ -1,120 +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 { LongStringFormField } from './LongString';
-import { ReqoreControlGroup } from '@qoretechnologies/reqore';
-
-const meta = {
-  component: LongStringFormField,
-  title: 'Components/Form/LongString',
-  args: {
-    onChange: fn(),
-    onClearClick: fn(),
-    'aria-label': 'LongString',
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-
-    return (
-      <ReqoreControlGroup>
-        <LongStringFormField
-          {...args}
-          value={value}
-          onChange={(value) => {
-            args.onChange?.(value);
-            setValue(value);
-          }}
-        />
-      </ReqoreControlGroup>
-    );
-  },
-} as StoryMeta<typeof LongStringFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithValue: Story = {
-  args: {
-    value: 'Hello world',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the LongString field pre-populated with "Hello world". Clicking clear empties the textarea and fires onChange; typing new content updates the value after the debounce.',
-      },
-    },
-  },
-  async play({ canvasElement, args, step }) {
-    const canvas = within(canvasElement);
-    const textarea = canvas.getByLabelText('LongString');
-
-    await step('Initial value is displayed', async () => {
-      await expect(textarea).toBeInTheDocument();
-      await expect(textarea).toHaveValue('Hello world');
-    });
-
-    await step('Clear resets the field', async () => {
-      await userEvent.click(textarea.nextElementSibling);
-      await expect(textarea).toHaveValue('');
-      // onChange fires immediately on clear (no debounce)
-      await expect(args.onChange).toHaveBeenLastCalledWith('');
-    });
-
-    await step('Typing updates the value after debounce', async () => {
-      await userEvent.type(textarea, 'Qore');
-      await expect(textarea).toHaveValue('Qore');
-      await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith('Qore'), {
-        timeout: 500,
-      });
-    });
-  },
-};
-
-export const Empty: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the LongString field with no value. Typing into the empty textarea updates the value and fires onChange after the debounce.',
-      },
-    },
-  },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-    const textarea = canvas.getByLabelText('LongString');
-
-    await expect(textarea).toBeInTheDocument();
-    await expect(textarea).toHaveValue('');
-
-    await userEvent.type(textarea, 'New content');
-    await expect(textarea).toHaveValue('New content');
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith('New content'), {
-      timeout: 500,
-    });
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    value: 'Cannot edit this',
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the LongString field with a value but disabled — the textarea shows the value and rejects further edits.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const textarea = canvas.getByLabelText('LongString');
-
-    await expect(textarea).toBeDisabled();
-    await expect(textarea).toHaveValue('Cannot edit this');
-  },
-};

package/src/components/form/fields/long-string/LongString.tsx

@@ -1,130 +0,0 @@
-import { ReqoreTextarea } from '@qoretechnologies/reqore';
-import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { ChangeEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { useDebounce } from 'react-use';
-import {
-  flattenToSingleLine,
-  hasLineBreak,
-  isSingleLineStringType,
-} from '../../../../helpers/singleLineString';
-import { useEmittedValues } from '../emittedValues';
-
-export interface ILongStringFormFieldProps extends Omit<IReqoreTextareaProps, 'onChange'> {
-  value?: string;
-  onChange?: (value: string, event?: ChangeEvent<HTMLTextAreaElement>) => void;
-  /**
-   * The field's declared type, which decides whether it holds one line.
-   *
-   * Without it every string field is a growing textarea, so a technical name, a
-   * version and an IP address all accept Enter — and become YAML keys, class
-   * names and URLs with a newline in them. See `helpers/singleLineString`.
-   */
-  type?: string;
-}
-
-export const LongStringFormField = ({
-  value,
-  onChange,
-  onClearClick,
-  type,
-  ...rest
-}: ILongStringFormFieldProps) => {
-  const [localValue, setLocalValue] = useState<string>(value ?? '');
-  /* What this field last TOLD its parent, which is not the same as the value it
-     was given. Comparing against the prop loses a clear wherever the parent
-     does not feed the value back: the prop stays `undefined`, so emptying the
-     text makes `localValue` '' and `value ?? ''` '' too, and the parent never
-     learns the field was emptied. Seeded from the initial value so a mount
-     reports nothing — an empty field's text is '' and its value `undefined`,
-     and reporting that difference marked every form holding an empty text
-     field as changed before anyone typed. */
-  const lastEmittedRef = useRef<string>(value ?? '');
-  /* The emits the parent has not handed back yet. Its echo of an earlier one
-     arrives while the next keys are being typed, and copying it over the text
-     lost them ("ship-order" typed 150 ms apart became "shp-order"). An echo is
-     the parent catching up, not a change; see `EmittedValues`. */
-  const emitted = useEmittedValues<string>();
-
-  const emit = useCallback(
-    (next: string) => {
-      lastEmittedRef.current = next;
-      emitted.record(next);
-      onChange?.(next);
-    },
-    [onChange, emitted]
-  );
-
-  useEffect(() => {
-    const incoming = value ?? '';
-    if (emitted.isEcho(incoming)) {
-      return;
-    }
-    if (incoming !== localValue) {
-      setLocalValue(incoming);
-    }
-    // A value from outside is not something to report back to whoever sent it.
-    lastEmittedRef.current = incoming;
-  }, [value]);
-
-  useDebounce(
-    () => {
-      if (localValue !== lastEmittedRef.current) {
-        emit(localValue);
-      }
-    },
-    100,
-    [localValue, emit]
-  );
-
-  const singleLine = isSingleLineStringType(type);
-
-  const handleChange = useCallback(
-    (event: ChangeEvent<HTMLTextAreaElement>): void => {
-      const raw = event.target.value;
-      // Flatten here rather than only blocking the Enter key: a line break also
-      // arrives by paste, by drag-and-drop, from autofill and from an IME, and
-      // a keydown guard catches none of those.
-      setLocalValue(singleLine && hasLineBreak(raw) ? flattenToSingleLine(raw) : raw);
-    },
-    [singleLine]
-  );
-
-  // Stop Enter before it inserts anything, so the caret does not jump to a
-  // second line that is then flattened away under the cursor.
-  const handleKeyDown = useCallback(
-    (event: KeyboardEvent<HTMLTextAreaElement>): void => {
-      if (singleLine && event.key === 'Enter') {
-        event.preventDefault();
-      }
-      (rest as { onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void }).onKeyDown?.(
-        event
-      );
-    },
-    [singleLine, rest.onKeyDown]
-  );
-
-  const handleClearClick = useCallback(() => {
-    setLocalValue('');
-    // Reported at once, and recorded like any emit, so the debounce does not
-    // report it a second time and its echo is not mistaken for a change.
-    emit('');
-    onClearClick?.();
-  }, [emit, onClearClick]);
-
-  return (
-    <ReqoreTextarea
-      // A one-line field must not grow, and must not offer a resize grip that
-      // implies it can hold more than it will keep.
-      scaleWithContent={!singleLine}
-      rows={singleLine ? 1 : undefined}
-      fluid
-      value={localValue}
-      onChange={handleChange}
-      onClearClick={handleClearClick}
-      {...rest}
-      onKeyDown={handleKeyDown}
-    />
-  );
-};
-
-export default LongStringFormField;

package/src/components/form/fields/markdown/Markdown.stories.tsx

@@ -1,76 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, within } from 'storybook/test';
-import { useState } from 'react';
-
-import { markdown } from '../../../../../mock/fields';
-import { StoryMeta } from '../../../../types';
-import { MarkdownFormField } from './Markdown';
-
-const meta = {
-  component: MarkdownFormField,
-  title: 'Components/Form/Markdown',
-  args: {
-    onChange: fn(),
-    value: markdown,
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-    return (
-      <MarkdownFormField
-        {...args}
-        value={value}
-        onChange={(value) => {
-          args.onChange?.(value);
-          setValue(value);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof MarkdownFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    'aria-label': 'MarkdownEditor',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Markdown field pre-populated with the sample markdown fixture — the editor and the live preview render side by side, the preview showing the rendered document (headings, bold) rather than the source.',
-      },
-    },
-  },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-    const editor = canvas.getByLabelText('MarkdownEditor');
-    const preview = canvas.getByLabelText('Preview');
-
-    await expect(editor).toBeInTheDocument();
-    await expect(preview).toBeInTheDocument();
-    await expect(editor).toHaveValue(args.value);
-  },
-};
-
-export const PreviewHidden: Story = {
-  args: {
-    'aria-label': 'MarkdownEditor',
-    hidePreview: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Markdown field with the live preview suppressed — the editor takes the whole field. This is what a phone-width screen gets automatically, and what a host forces when it knows its container is narrow even on a wide viewport.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByLabelText('MarkdownEditor')).toBeInTheDocument();
-    await expect(canvas.queryByLabelText('Preview')).toBeNull();
-  },
-};

package/src/components/form/fields/markdown/Markdown.tsx

@@ -1,81 +0,0 @@
-import {
-  ReqoreColumn,
-  ReqoreColumns,
-  ReqoreMessage,
-  useReqoreProperty,
-} from '@qoretechnologies/reqore';
-import { IReqoreMessageProps } from '@qoretechnologies/reqore/dist/components/Message';
-import { ComponentProps } from 'react';
-import styled from 'styled-components';
-import LongStringFormField, { ILongStringFormFieldProps } from '../long-string/LongString';
-import { useMarkdownRenderer } from '../../../Description/markdownRendererContext';
-import { defaultMarkdownRenderer } from './MarkdownView';
-
-export interface IMarkdownFormFieldProps extends ILongStringFormFieldProps {
-  /**
-   * Hide the live preview regardless of the available width.
-   *
-   * The preview is dropped on its own below tablet width; this forces it off
-   * for a host that knows its container is narrow even on a wide viewport.
-   */
-  hidePreview?: boolean;
-}
-
-const StyledWrapper = styled(ReqoreColumns)<ComponentProps<typeof ReqoreColumns>>`
-  width: 100%;
-`;
-
-const StyledLongStringWrapper = styled(ReqoreColumn)`
-  .reqore-control-wrapper {
-    display: flex;
-    flex-direction: column;
-  }
-`;
-
-const StyledPreviewColumn = styled(ReqoreColumn)`
-  width: 100%;
-  min-width: 0;
-`;
-
-const StyledPreviewWrapper = styled(ReqoreMessage)<IReqoreMessageProps>`
-  & div div {
-    justify-content: start;
-  }
-`;
-
-export const MarkdownFormField = ({ hidePreview, ...rest }: IMarkdownFormFieldProps) => {
-  // The shared context is empty unless a host supplied a renderer. The row
-  // inset deliberately draws nothing in that case; the field's live preview
-  // cannot — a blank preview beside the editor is worse than reqraft's own
-  // CommonMark — so it falls back to the built-in view.
-  const renderMarkdown = useMarkdownRenderer() ?? defaultMarkdownRenderer;
-  // Side-by-side needs room for both halves. `ReqoreColumns` would stack them
-  // instead of dropping one, which on a phone means scrolling past a second
-  // copy of the text you are still typing -- so below tablet width the editor
-  // simply takes the whole field.
-  const isMobileOrTablet = useReqoreProperty('isMobileOrTablet');
-  const showPreview = !hidePreview && !isMobileOrTablet;
-
-  const editor = (
-    <StyledLongStringWrapper flexFlow='column'>
-      <LongStringFormField {...rest} />
-    </StyledLongStringWrapper>
-  );
-
-  if (!showPreview) {
-    return editor;
-  }
-
-  return (
-    <StyledWrapper columnsGap='10px'>
-      {editor}
-      <StyledPreviewColumn>
-        <StyledPreviewWrapper size='small' aria-label='Preview' flat fluid>
-          {renderMarkdown({ value: rest.value ?? '', compact: true })}
-        </StyledPreviewWrapper>
-      </StyledPreviewColumn>
-    </StyledWrapper>
-  );
-};
-
-export default MarkdownFormField;