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

package/src/components/form/fields/cron/Cron.stories.tsx

@@ -1,68 +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 { CronFormField } from './Cron';
-
-const meta = {
-  component: CronFormField,
-  title: 'Components/Form/Cron',
-  args: {
-    wrapperProps: {
-      'aria-label': 'Cron',
-    },
-    onChange: fn(),
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-
-    return (
-      <CronFormField
-        {...args}
-        value={value}
-        onChange={(value) => {
-          args.onChange?.(value);
-          setValue(value);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof CronFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    value: '1 1 1 1 1',
-    inputProps: ['Minute', 'Hour', 'Day', 'Month', 'Weekday'].map((label) => ({
-      'aria-label': label,
-    })),
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Cron field with a "1 1 1 1 1" schedule split across the Minute / Hour / Day / Month / Weekday inputs. Typing into a segment fires onChange with the recomposed expression; the clear button resets the value.',
-      },
-    },
-  },
-
-  async play({ args, canvasElement }) {
-    const canvas = within(canvasElement);
-    const wrapper = canvas.getByLabelText('Cron');
-    await expect(wrapper).toBeInTheDocument();
-
-    await Promise.all(
-      args.inputProps
-        .map((p) => p['aria-label'])
-        .map((label) => expect(canvas.getByLabelText(label)).toBeInTheDocument())
-    );
-    await userEvent.clear(canvas.getByLabelText('Minute'));
-    await userEvent.type(canvas.getByLabelText('Minute'), '30');
-    await expect(args.onChange).toHaveBeenLastCalledWith('30 1 1 1 1');
-
-    await userEvent.click(canvas.getByRole('button'));
-    await expect(args.onChange).toHaveBeenLastCalledWith('');
-  },
-};

package/src/components/form/fields/cron/Cron.tsx

@@ -1,80 +0,0 @@
-import {
-  ReqoreButton,
-  ReqoreControlGroup,
-  ReqoreInput,
-  ReqoreMessage,
-} from '@qoretechnologies/reqore';
-import { IReqoreControlGroupProps } from '@qoretechnologies/reqore/dist/components/ControlGroup';
-import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
-import { TSizes } from '@qoretechnologies/reqore/dist/constants/sizes';
-import cronstrue from 'cronstrue';
-import { useMemo } from 'react';
-
-export interface ICronFormFieldProps {
-  value?: string;
-  onChange?(value: string): void;
-  wrapperProps?: Partial<IReqoreControlGroupProps>;
-  inputProps?: IReqoreInputProps[];
-  size?: TSizes;
-}
-
-export const CronFormField = ({
-  onChange,
-  value = '',
-  wrapperProps,
-  inputProps,
-  size,
-}: ICronFormFieldProps) => {
-  const { message, isError } = useMemo(() => {
-    try {
-      return { message: cronstrue.toString(value, {}) };
-    } catch (message: any) {
-      return {
-        message,
-        isError: true,
-      };
-    }
-  }, [value]);
-
-  return (
-    <ReqoreControlGroup fluid stack={false} vertical gapSize='big' size={size} {...wrapperProps}>
-      <ReqoreControlGroup fluid stack size={size}>
-        {['Minute', 'Hour', 'Day', 'Month', 'Weekday'].map((label, index) => {
-          return (
-            <ReqoreInput
-              {...(inputProps?.[index] ?? {})}
-              key={index}
-              aria-label={label}
-              placeholder={label}
-              onChange={(event) => {
-                const cronData: Record<string, string> = {};
-                [
-                  cronData.minute = '',
-                  cronData.hour = '',
-                  cronData.day = '',
-                  cronData.month = '',
-                  cronData.weekday = '',
-                ] = value.split(' ');
-                cronData[label.toLowerCase() as any] = event.currentTarget.value;
-
-                onChange?.(
-                  `${cronData.minute} ${cronData.hour} ${cronData.day} ${cronData.month} ${cronData.weekday}`
-                );
-              }}
-              value={value.split(' ')?.[index] ?? ''}
-            />
-          );
-        })}
-
-        <ReqoreButton fixed onClick={() => onChange('')} icon={'CloseLine'} />
-      </ReqoreControlGroup>
-      {value && (
-        <ReqoreMessage intent={isError ? 'danger' : 'info'} opaque={false}>
-          {message}
-        </ReqoreMessage>
-      )}
-    </ReqoreControlGroup>
-  );
-};
-
-export default CronFormField;

package/src/components/form/fields/date/Date.stories.tsx

@@ -1,77 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn } from 'storybook/test';
-import { useState } from 'react';
-
-import { StoryMeta } from '../../../../types';
-import { DateFormField } from './Date';
-
-const meta = {
-  component: DateFormField,
-  title: 'Components/Form/Date',
-  args: {
-    onChange: fn(),
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-    return (
-      <DateFormField
-        {...args}
-        value={value}
-        onChange={(value) => {
-          args.onChange?.(value);
-          setValue(value);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof DateFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Empty: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story: 'Renders the Date field with no value — the input mounts empty.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const input = canvasElement.querySelector('input');
-    await expect(input).toBeInTheDocument();
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    value: '2025-01-15',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Date field pre-populated with 2025-01-15 — the input shows the initial value without firing onChange.',
-      },
-    },
-  },
-  async play({ canvasElement, args }) {
-    const input = canvasElement.querySelector('input');
-    await expect(input).toBeInTheDocument();
-    await expect(args.onChange).not.toHaveBeenCalled();
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    value: '2025-06-01',
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Renders the Date field with a value but disabled — the input is non-interactive.',
-      },
-    },
-  },
-};

package/src/components/form/fields/date/Date.tsx

@@ -1,55 +0,0 @@
-import { DatePicker, useReqoreTheme } from '@qoretechnologies/reqore';
-import { IDatePickerProps, TDateValue } from '@qoretechnologies/reqore/dist/components/DatePicker';
-
-export interface IDateFormFieldProps extends Omit<IDatePickerProps<TDateValue>, 'onChange' | 'value'> {
-  value?: string | Date;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  placeholder?: string;
-}
-
-const toFullIso = (value?: string | Date): string | Date | null => {
-  if (!value) return null;
-  if (value instanceof Date) return value;
-  // DatePicker requires a full ISO 8601 datetime string — append time if only a date is given
-  if (/^\d{4}-\d{2}-\d{2}$/.test(value)) return `${value}T00:00:00.000Z`;
-  if (/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}$/.test(value)) return `${value}.000Z`;
-  return value;
-};
-
-/**
- * The language a date is written in: the page's own (`<html lang>`, which is the
- * application's interface language), else the browser's preferred language.
- *
- * Reqore's DatePicker, given no locale, takes the first NON-English entry of
- * `navigator.languages`, so a browser set to English with French as its second
- * language showed "jj / mm / aaaa" in an English application.
- */
-const pageLocale = (): string | undefined => {
-  if (typeof document !== 'undefined' && document.documentElement.lang) {
-    return document.documentElement.lang;
-  }
-  return typeof navigator !== 'undefined' ? navigator.language : undefined;
-};
-
-export const DateFormField = ({ value, onChange, disabled, locale, ...rest }: IDateFormFieldProps) => {
-  const theme = useReqoreTheme();
-
-  const handleChange = (date: TDateValue): void => {
-    onChange?.(date as string);
-  };
-
-  return (
-    <DatePicker
-      {...rest}
-      locale={locale ?? pageLocale()}
-      style={{ width: '100%' }}
-      value={toFullIso(value) as TDateValue}
-      onChange={handleChange}
-      customTheme={theme}
-      isDisabled={disabled}
-    />
-  );
-};
-
-export default DateFormField;

package/src/components/form/fields/emittedValues.ts

@@ -1,70 +0,0 @@
-import { useRef } from 'react';
-
-/**
- * What a debounced field has told its parent and not yet heard back.
- *
- * A field that keeps a local copy of what is being typed reports it after a
- * short pause, and the parent hands that value back down as the `value` prop —
- * usually after its OWN debounce, so the echo of an emit arrives while the
- * person is already typing the next character. Treating every incoming value
- * as an external change copied that stale echo over the newer text: typing
- * "ship-order" with 150 ms between keys left "shp-order".
- *
- * So an incoming value is first checked against what is in flight. One that
- * matches an emit is the parent catching up, not a change, and it acknowledges
- * that emit and every one before it (a parent that debounces skips some).
- * Anything else is a genuine change from outside and replaces the local text;
- * it also drops whatever was in flight, since the parent has moved past it.
- *
- * A genuine external change that happens to equal an emit still in flight is
- * indistinguishable from its echo, and is treated as one — harmless, because it
- * sets the very value the field already reported.
- */
-export class EmittedValues<T> {
-  private pending: T[] = [];
-
-  /** Bounded: a parent that never feeds its value back never acknowledges. */
-  private static readonly LIMIT = 50;
-
-  constructor(private readonly equals: (a: T, b: T) => boolean = Object.is) {}
-
-  /** Record a value just reported to the parent. */
-  record(value: T): void {
-    this.pending.push(value);
-    if (this.pending.length > EmittedValues.LIMIT) {
-      this.pending.shift();
-    }
-  }
-
-  /**
-   * Whether `incoming` is one of the emits still in flight, without acknowledging anything: for a render,
-   * which may run more than once for one value, while `isEcho` is called once the value is committed.
-   */
-  includes(incoming: T): boolean {
-    return this.pending.some((value) => this.equals(value, incoming));
-  }
-
-  /**
-   * Whether `incoming` is the echo of an emit still in flight. An echo
-   * acknowledges that emit and every earlier one; anything else clears the
-   * in-flight list, because the parent has a value of its own.
-   */
-  isEcho(incoming: T): boolean {
-    const index = this.pending.findIndex((value) => this.equals(value, incoming));
-    if (index === -1) {
-      this.pending = [];
-      return false;
-    }
-    this.pending = this.pending.slice(index + 1);
-    return true;
-  }
-}
-
-/** One `EmittedValues` for the life of the component. */
-export const useEmittedValues = <T>(equals?: (a: T, b: T) => boolean): EmittedValues<T> => {
-  const ref = useRef<EmittedValues<T>>();
-  if (!ref.current) {
-    ref.current = new EmittedValues<T>(equals);
-  }
-  return ref.current;
-};

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

@@ -1,161 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fn, within } from 'storybook/test';
-import { useState } from 'react';
-
-import { StoryMeta } from '../../../../types';
-import { ReqraftFileFormField } from './File';
-
-const meta = {
-  component: ReqraftFileFormField,
-  title: 'Components/Form/File',
-  args: {
-    onChange: fn(),
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-    return (
-      <ReqraftFileFormField
-        {...args}
-        value={value}
-        onChange={(value) => {
-          args.onChange?.(value);
-          setValue(value);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof ReqraftFileFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Empty: Story = {
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the File field with no value — the "Click or drop files here to upload" drop zone is visible.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('Click or drop files here to upload')).toBeInTheDocument();
-  },
-};
-
-export const WithValue: Story = {
-  args: {
-    value: {
-      name: 'report.pdf',
-      content: 'data:application/pdf;base64,abc123',
-      size: 28736,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the File field pre-populated with a PDF value — the file name is displayed in place of the drop zone.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('report.pdf')).toBeInTheDocument();
-  },
-};
-
-export const WithImageValue: Story = {
-  args: {
-    value: {
-      name: 'photo.png',
-      content: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==',
-      size: 1024,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the File field pre-populated with a PNG image value — the file name and an inline preview thumbnail are shown.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('photo.png')).toBeInTheDocument();
-    await expect(canvasElement.querySelector('img')).toBeInTheDocument();
-  },
-};
-
-export const WithAcceptedExtensions: Story = {
-  args: {
-    options: {
-      accept: {
-        'image/png': ['.png'],
-        'image/jpeg': ['.jpg', '.jpeg'],
-        'application/pdf': ['.pdf'],
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the File field with an accept option limiting uploads to PNG, JPEG and PDF — the allowed extensions are listed below the drop zone.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('Click or drop files here to upload')).toBeInTheDocument();
-    await expect(canvas.getByText('.png, .jpg, .jpeg, .pdf')).toBeInTheDocument();
-  },
-};
-
-export const Multiple: Story = {
-  args: {
-    multiple: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the File field with multiple-selection enabled — the underlying input carries the multiple attribute and the drop zone stays visible after files are added.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('Click or drop files here to upload')).toBeInTheDocument();
-    // Even when a value is set externally, the click-or-drop area
-    // stays visible so the user can keep adding files. Multi-file
-    // consumers render their own picked-file list above the field.
-    const input = canvasElement.querySelector('input[type="file"]') as HTMLInputElement | null;
-    await expect(input).not.toBeNull();
-    await expect(input?.multiple).toBe(true);
-  },
-};
-
-export const WithBuildTab: Story = {
-  args: {
-    argSchema: {
-      filename: { type: 'string', ui_type: 'string', display_name: 'Filename', required: true },
-      content: { type: 'string', ui_type: 'string', display_name: 'Content', required: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the File field with an argSchema — a "Build a File" tab appears alongside the "Upload a File" drop zone so the user can synthesize a file from schema fields.',
-      },
-    },
-  },
-  async play({ canvasElement }) {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByText('Upload a File')).toBeInTheDocument();
-    await expect(canvas.getByText('Build a File')).toBeInTheDocument();
-  },
-};