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

package/src/components/form/fields/binary/Binary.stories.tsx

@@ -1,122 +0,0 @@
-import { ReqoreControlGroup } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
-
-import { StoryMeta } from '../../../../types';
-import { ReqraftBinaryFormField } from './Binary';
-
-const meta = {
-  component: ReqraftBinaryFormField,
-  title: 'Components/Form/Binary',
-  args: {
-    onChange: fn(),
-    'aria-label': 'Binary',
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-
-    return (
-      <ReqoreControlGroup>
-        <ReqraftBinaryFormField
-          {...args}
-          value={value}
-          onChange={(value) => {
-            args.onChange?.(value);
-            setValue(value);
-          }}
-        />
-      </ReqoreControlGroup>
-    );
-  },
-} as StoryMeta<typeof ReqraftBinaryFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithValue: Story = {
-  args: {
-    value: 'cGFzc3dvcmQ=',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Binary field pre-populated with a base64 payload — the textarea shows the encoded string.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const textarea = canvas.getByLabelText('Binary');
-
-    await expect(textarea).toBeInTheDocument();
-    await expect(textarea).toHaveValue('cGFzc3dvcmQ=');
-  },
-};
-
-export const TypingUpdatesValue: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the empty Binary field. Typing a base64 string into the textarea updates the value and fires onChange after the debounce.',
-      },
-    },
-  },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-    const textarea = canvas.getByLabelText('Binary');
-
-    await userEvent.type(textarea, 'YWJj');
-    await expect(textarea).toHaveValue('YWJj');
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith('YWJj'), {
-      timeout: 500,
-    });
-  },
-};
-
-export const UploadEncodesFileAsBase64: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Binary field with its file drop zone. Uploading a file encodes it as base64 (data-URL prefix stripped) and fires onChange with the encoded string.',
-      },
-    },
-  },
-  async play({ canvasElement, args }) {
-    const file = new File(['hello'], 'test.bin', { type: 'application/octet-stream' });
-    // the hidden file input rendered by the reused ReqraftFileFormField drop zone
-    const input = canvasElement.querySelector('input[type="file"]') as HTMLInputElement;
-
-    await expect(input).toBeInTheDocument();
-    await userEvent.upload(input, file);
-
-    // base64 of "hello" is "aGVsbG8="; the data: URL prefix must be stripped
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith('aGVsbG8='), {
-      timeout: 1000,
-    });
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    value: 'cGFzc3dvcmQ=',
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Binary field with a base64 value but disabled — the textarea is non-interactive.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    const textarea = canvas.getByLabelText('Binary');
-
-    await expect(textarea).toBeDisabled();
-  },
-};

package/src/components/form/fields/binary/Binary.tsx

@@ -1,91 +0,0 @@
-import { ReqoreControlGroup, ReqoreTextarea } from '@qoretechnologies/reqore';
-import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
-import { ChangeEvent, memo, useCallback, useEffect, useState } from 'react';
-import { useDebounce } from 'react-use';
-import { useEmittedValues } from '../emittedValues';
-import { IFileFormFieldValue, ReqraftFileFormField } from '../file/File';
-
-export interface IReqraftBinaryFormFieldProps extends Omit<IReqoreTextareaProps, 'onChange' | 'value'> {
-  value?: string;
-  onChange?: (value: string) => void;
-}
-
-/**
- * Strip a `data:<mime-type>;base64,` prefix so the emitted value carries raw base64, matching the
- * canonical binary wire form the Qorus server expects. `ReqraftFileFormField` reads uploads with
- * `readAsDataURL`, so its `content` always carries that prefix.
- */
-const stripDataUrlPrefix = (dataUrl: string): string => {
-  const commaIndex = dataUrl.indexOf(',');
-  return commaIndex === -1 ? dataUrl : dataUrl.slice(commaIndex + 1);
-};
-
-/**
- * A field for binary values encoded as base64. The value can be typed or pasted directly into the
- * textarea, or populated by uploading a file — the upload reuses {@link ReqraftFileFormField} (the
- * shared Reqraft file picker / drop zone) rather than a bespoke dropzone; its data-URL content is
- * decoded to raw base64 for the field value.
- */
-export const ReqraftBinaryFormField = memo(
-  ({ value, onChange, ...rest }: IReqraftBinaryFormFieldProps) => {
-    const [localValue, setLocalValue] = useState<string>(value ?? '');
-    // The parent's echo of an emit still in flight is not a change: copying it
-    // over the local value lost what was typed since. See `EmittedValues`.
-    const emitted = useEmittedValues<string | undefined>();
-
-    useEffect(() => {
-      if (emitted.isEcho(value)) {
-        return;
-      }
-      if (value !== localValue) {
-        setLocalValue(value ?? '');
-      }
-    }, [value]);
-
-    useDebounce(
-      () => {
-        if (localValue !== value) {
-          emitted.record(localValue);
-          onChange?.(localValue);
-        }
-      },
-      100,
-      [localValue, onChange]
-    );
-
-    const handleChange = useCallback((event: ChangeEvent<HTMLTextAreaElement>): void => {
-      setLocalValue(event.target.value);
-    }, []);
-
-    const handleFileChange = useCallback(
-      (file?: IFileFormFieldValue) => {
-        const base64 = stripDataUrlPrefix(file?.content ?? '');
-        setLocalValue(base64);
-        emitted.record(base64);
-        onChange?.(base64);
-      },
-      [onChange]
-    );
-
-    return (
-      <ReqoreControlGroup vertical fluid>
-        <ReqoreTextarea
-          scaleWithContent
-          fluid
-          value={localValue}
-          onChange={handleChange}
-          onClearClick={() => {
-            setLocalValue('');
-            emitted.record('');
-            onChange?.('');
-          }}
-          placeholder='Base64-encoded binary value'
-          {...rest}
-        />
-        <ReqraftFileFormField disabled={rest.disabled} onChange={handleFileChange} />
-      </ReqoreControlGroup>
-    );
-  }
-);
-
-export default ReqraftBinaryFormField;

package/src/components/form/fields/boolean/Boolean.stories.tsx

@@ -1,125 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, userEvent, within } from 'storybook/test';
-import { useState } from 'react';
-
-import { StoryMeta } from '../../../../types';
-import { BooleanFormField } from './Boolean';
-
-const meta = {
-  component: BooleanFormField,
-  title: 'Components/Form/Boolean',
-  args: {
-    onChange: fn(),
-    'aria-label': 'Boolean',
-  },
-  render(args) {
-    const [checked, setChecked] = useState(args.checked);
-    return (
-      <BooleanFormField
-        {...args}
-        checked={checked}
-        onChange={(checked) => {
-          args.onChange?.(checked);
-          setChecked(checked);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof BooleanFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Checked: Story = {
-  args: {
-    checked: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Boolean field in the checked state. Clicking the toggle flips it to unchecked and fires onChange with false.',
-      },
-    },
-  },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByText('Yes')).toBeInTheDocument();
-    await expect(canvas.getByText('No')).toBeInTheDocument();
-
-    await userEvent.click(canvas.getByLabelText('Boolean'));
-    await expect(args.onChange).toHaveBeenLastCalledWith(false);
-  },
-};
-
-export const Unchecked: Story = {
-  args: {
-    checked: false,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Boolean field in the unchecked state. Clicking the toggle flips it to checked and fires onChange with true.',
-      },
-    },
-  },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-
-    await expect(canvas.getByText('No')).toBeInTheDocument();
-
-    await userEvent.click(canvas.getByLabelText('Boolean'));
-    await expect(args.onChange).toHaveBeenLastCalledWith(true);
-  },
-};
-
-export const Unset: Story = {
-  args: {
-    checked: undefined,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Boolean field without a default choice. The switch remains visibly unset until the user explicitly chooses Yes or No.',
-      },
-    },
-  },
-};
-
-export const UnsetSelectsYes: Story = {
-  args: {
-    checked: undefined,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Verifies that an unset Boolean field saves the first explicit Yes selection instead of treating the missing value as No.',
-      },
-    },
-  },
-  async play({ canvasElement, args }) {
-    const canvas = within(canvasElement);
-
-    await userEvent.click(canvas.getByLabelText('Boolean'));
-    await expect(args.onChange).toHaveBeenLastCalledWith(true);
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    checked: true,
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Boolean field checked and disabled — the toggle is visible but non-interactive.',
-      },
-    },
-  },
-};

package/src/components/form/fields/boolean/Boolean.tsx

@@ -1,34 +0,0 @@
-import { ReqoreCheckbox } from '@qoretechnologies/reqore';
-import { IReqoreCheckboxProps } from '@qoretechnologies/reqore/dist/components/Checkbox';
-
-export interface IBooleanFormFieldProps extends Omit<IReqoreCheckboxProps, 'onChange'> {
-  onChange?(checked: boolean): void;
-}
-
-export const BooleanFormField = ({
-  checked,
-  onChange,
-  onClick,
-  ...rest
-}: IBooleanFormFieldProps) => {
-  const toggle: IReqoreCheckboxProps['onClick'] = (event) => {
-    onChange(!checked);
-    onClick?.(event);
-  };
-
-  return (
-    <ReqoreCheckbox
-      checked={checked}
-      onClick={toggle}
-      asSwitch
-      onText='Yes'
-      offText='No'
-      checkedIcon='CheckLine'
-      uncheckedIcon='CloseLine'
-      margin='none'
-      {...rest}
-    />
-  );
-};
-
-export default BooleanFormField;

package/src/components/form/fields/byte-size/ByteSize.stories.tsx

@@ -1,87 +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 { ByteSizeFormField } from './ByteSize';
-
-const meta = {
-  component: ByteSizeFormField,
-  title: 'Components/Form/ByteSize',
-  args: {
-    onChange: fn(),
-    'aria-label': 'Byte size amount',
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-    return (
-      <ByteSizeFormField
-        {...args}
-        value={value}
-        onChange={(v) => {
-          args.onChange?.(v);
-          setValue(v);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof ByteSizeFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the ByteSize field with no value. Typing a number into the amount input fires onChange with the composed byte-size expression.',
-      },
-    },
-  },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
-    const input = canvas.getByLabelText('Byte size amount');
-    await expect(input).toBeInTheDocument();
-    await userEvent.type(input, '42');
-    await waitFor(() => expect(args.onChange).toHaveBeenLastCalledWith('42'), { timeout: 5000 });
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    value: '512MiB',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the ByteSize field pre-populated with "512MiB" — the amount and unit are split across the number input and the MiB unit selector.',
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await expect(await canvas.findByDisplayValue('512')).toBeInTheDocument();
-    await expect(canvas.getByText('MiB')).toBeInTheDocument();
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    value: '512MiB',
-    readOnly: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the ByteSize field with "512MiB" in read-only mode — the amount input is marked readonly and rejects further edits.',
-      },
-    },
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const input = await canvas.findByDisplayValue('512');
-    await expect(input).toHaveAttribute('readonly');
-  },
-};

package/src/components/form/fields/byte-size/ByteSize.tsx

@@ -1,58 +0,0 @@
-import { ReqoreControlGroup } from '@qoretechnologies/reqore';
-import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
-import { memo } from 'react';
-import { splitByteSize } from '../../../../helpers/common';
-import NumberFormField from '../number/Number';
-import { SelectFormField } from '../select/Select';
-
-// IDE `byteSize.tsx` parity — the IDE offers exactly KiB/MiB. (GiB/TiB were a
-// reqraft addition in FORM_FIELD_EXTRAS; trimmed for 1:1, re-add post-parity
-// if needed.) SEAM: the IDE's mount-time `default_value` population is
-// intentionally NOT ported — onChange stays edge-triggered; FormEngine
-// materializes defaults at the form level.
-const SIZE_UNITS = [{ value: 'KiB' }, { value: 'MiB' }];
-
-export interface IByteSizeFormFieldProps {
-  /** The combined byte-size string, e.g. `"512MiB"`. */
-  value?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-  size?: TSizes;
-  /** Unknown props (`aria-label`, …) forward to the primary (amount) input;
-   * the IDE's ByteSizeField ignores extras. */
-  [key: string]: unknown;
-}
-
-/**
- * A byte-size input — a numeric amount stacked with a unit selector
- * (`KiB`/`MiB`/…). The field value is the concatenated string the
- * server stores (`"512MiB"`).
- */
-export const ByteSizeFormField = memo(
-  ({ value, onChange, disabled, readOnly, size, ...rest }: IByteSizeFormFieldProps) => {
-    const [amount, unit] = splitByteSize(value);
-
-    return (
-      <ReqoreControlGroup stack fluid size={size}>
-        <NumberFormField
-          {...(rest as any)}
-          fluid
-          value={amount}
-          onChange={(next) => onChange?.(`${next ?? ''}${unit ?? ''}`)}
-          disabled={disabled}
-          readOnly={readOnly}
-        />
-        <SelectFormField
-          fixed
-          items={SIZE_UNITS}
-          value={unit}
-          onChange={(next) => onChange?.(`${amount ?? ''}${next ?? ''}`)}
-          disabled={disabled || readOnly}
-        />
-      </ReqoreControlGroup>
-    );
-  }
-);
-
-export default ByteSizeFormField;

package/src/components/form/fields/color/Color.stories.tsx

@@ -1,99 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn } from 'storybook/test';
-import { useState } from 'react';
-
-import { StoryMeta } from '../../../../types';
-import { ColorFormField } from './Color';
-
-const meta = {
-  component: ColorFormField,
-  title: 'Components/Form/Color',
-  args: {
-    onChange: fn(),
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-
-    return (
-      <ColorFormField
-        {...args}
-        value={value}
-        onChange={(value) => {
-          args.onChange?.(value);
-          setValue(value);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof ColorFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithValue: Story = {
-  args: {
-    value: { r: 100, g: 149, b: 237, a: 1 },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Color field with a cornflower-blue RGBA value pre-selected in the sketch picker.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const picker = canvasElement.querySelector('.sketch-picker');
-    const colorPanel = canvasElement.querySelector('.saturation-white');
-
-    await expect(picker).toBeInTheDocument();
-    await expect(colorPanel).toBeInTheDocument();
-  },
-};
-
-export const Red: Story = {
-  args: {
-    value: { r: 220, g: 53, b: 69, a: 1 },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Renders the Color field with a red RGBA value pre-selected in the sketch picker.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    await expect(canvasElement.querySelector('.sketch-picker')).toBeInTheDocument();
-  },
-};
-
-export const Empty: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Renders the Color field with no value — the sketch picker mounts empty.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    await expect(canvasElement.querySelector('.sketch-picker')).toBeInTheDocument();
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    value: { r: 100, g: 149, b: 237, a: 1 },
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Color field with a value but disabled — the sketch picker is visible but non-interactive.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    await expect(canvasElement.querySelector('.sketch-picker')).toBeInTheDocument();
-  },
-};

package/src/components/form/fields/color/Color.tsx

@@ -1,46 +0,0 @@
-import { SketchPicker, SketchPickerProps } from 'react-color';
-import styled from 'styled-components';
-
-export interface IColorFormFieldProps extends Omit<SketchPickerProps, 'onChange' | 'onChangeComplete'> {
-  value?: { r: number; g: number; b: number; a?: number };
-  onChange?: (value: { r: number; g: number; b: number; a: number }) => void;
-  disabled?: boolean;
-  readOnly?: boolean;
-}
-
-export const StyledSketchPicker = styled(SketchPicker)`
-  background-color: transparent !important;
-  width: 100% !important;
-  max-width: 400px !important;
-  box-shadow: none !important;
-  padding: 0 !important;
-
-  > div:first-child {
-    padding-bottom: unset !important;
-    height: 100px !important;
-  }
-
-  label {
-    color: #fff !important;
-  }
-  input {
-    width: 100% !important;
-  }
-  .flexbox-fix {
-    border: none !important;
-  }
-`;
-
-export const ColorFormField = ({ value, onChange, disabled, readOnly, ...rest }: IColorFormFieldProps) => {
-  return (
-    <StyledSketchPicker
-      onChangeComplete={(color) => onChange?.(color.rgb)}
-      color={value}
-      readOnly={disabled || readOnly}
-      disableAlpha
-      {...rest}
-    />
-  );
-};
-
-export default ColorFormField;