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

package/src/components/form/fields/object/Object.stories.tsx

@@ -1,398 +0,0 @@
-import { StoryObj } from '@storybook/react-vite';
-import { expect, fireEvent, fn } from 'storybook/test';
-import { useMemo, useState } from 'react';
-
-import jsyaml from 'js-yaml';
-import { sleep, testsClickButton, testsWaitForText } from '../../../../../__tests__/utils';
-import { StoryMeta } from '../../../../types';
-import { ReqraftObjectFormField } from './Object';
-
-const meta = {
-  component: ReqraftObjectFormField,
-  title: 'Components/Form/Object',
-  args: {
-    onChange: fn(),
-  },
-  render(args) {
-    const [value, setValue] = useState(args.value);
-
-    const val = useMemo(() => {
-      if (args.dataType === 'native' && typeof value === 'string') {
-        if (args.resultDataType === 'yaml') {
-          return jsyaml.load(value as string);
-        } else if (args.resultDataType === 'json') {
-          return JSON.parse(value as string);
-        }
-      }
-
-      return value;
-    }, [value, args.dataType, args.resultDataType]);
-
-    return (
-      <ReqraftObjectFormField
-        {...args}
-        value={val}
-        onChange={(value) => {
-          args.onChange?.(value);
-          setValue(value);
-        }}
-      />
-    );
-  },
-} as StoryMeta<typeof ReqraftObjectFormField>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Object: Story = {
-  args: {
-    type: 'object',
-    dataType: 'json',
-    resultDataType: 'json',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field in JSON object mode with no value. Clicking "New Object" seeds an empty JSON object in the editor.',
-      },
-    },
-  },
-  async play() {
-    await testsWaitForText('New Object');
-    await testsClickButton({ label: 'New Object' });
-    await testsWaitForText('{');
-    await testsWaitForText('}');
-  },
-};
-
-export const List: Story = {
-  args: {
-    type: 'array',
-    dataType: 'yaml',
-    resultDataType: 'yaml',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field in YAML list mode with no value. Clicking "New List" seeds an empty list in the editor.',
-      },
-    },
-  },
-  async play() {
-    await testsWaitForText('New List');
-    await testsClickButton({ label: 'New List' });
-    await testsWaitForText('[');
-    await testsWaitForText(']');
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    type: 'array',
-    dataType: 'native',
-    resultDataType: 'native',
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field in native-array mode but disabled — the field is visible and non-interactive.',
-      },
-    },
-  },
-};
-
-export const Small: Story = {
-  args: {
-    type: 'array',
-    size: 'small',
-    dataType: 'native',
-    resultDataType: 'yaml',
-    value: [
-      {
-        key: 'value',
-      },
-      'Test',
-      12,
-      false,
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field in native-array mode at "small" size with mixed item types — object, string, number and boolean.',
-      },
-    },
-  },
-};
-
-export const DisabledWithValue: Story = {
-  args: {
-    type: 'array',
-    dataType: 'native',
-    resultDataType: 'json',
-    value: [
-      {
-        key: 'value',
-      },
-      'Test',
-      12,
-      false,
-    ],
-    disabled: true,
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field in native-array mode with a populated value but disabled — the items are visible in read-only form.',
-      },
-    },
-  },
-};
-
-export const NativeOnly: Story = {
-  args: {
-    type: 'array',
-    dataType: 'native',
-    resultDataType: 'native',
-    value: [
-      {
-        key: 'value',
-      },
-      'Test',
-      12,
-      false,
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field in native-array mode with mixed item types — the native editor shows the items without a YAML/JSON textarea alternative.',
-      },
-    },
-  },
-  async play() {
-    await testsWaitForText('"value"');
-  },
-};
-
-export const ValueCanBeRemoved: Story = {
-  args: {
-    type: 'array',
-    dataType: 'native',
-    resultDataType: 'native',
-    value: [
-      {
-        key: 'value',
-      },
-      'Test',
-      12,
-      false,
-    ],
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field with a populated native array. Clicking Remove clears the value and the field falls back to the "New List" placeholder.',
-      },
-    },
-  },
-  async play() {
-    await testsWaitForText('"value"');
-    await testsClickButton({ label: 'Remove' });
-    await testsWaitForText('New List');
-  },
-};
-
-export const Json: Story = {
-  args: {
-    type: 'object',
-    dataType: 'json',
-    value: JSON.stringify({
-      key: 'value',
-      bool: false,
-      num: 23,
-    }),
-    resultDataType: 'json',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field with a JSON string value. Switching to Text mode, editing the JSON and clicking Save fires onChange with the new JSON serialization.',
-      },
-    },
-  },
-  async play({ args }) {
-    await testsWaitForText('"value"');
-    await testsClickButton({ label: 'Text' });
-    await sleep(300);
-    await fireEvent.change(document.querySelector('textarea'), {
-      target: {
-        value: JSON.stringify(
-          {
-            key: 'value',
-            key2: 'value2',
-            bool: false,
-            num: 23,
-          },
-          null,
-          2
-        ),
-      },
-    });
-    await testsClickButton({ label: 'Save' });
-    await expect(args.onChange).toHaveBeenLastCalledWith(
-      JSON.stringify(
-        {
-          key: 'value',
-          key2: 'value2',
-          bool: false,
-          num: 23,
-        },
-        null,
-        2
-      )
-    );
-    await testsClickButton({ label: 'Editor' });
-    await testsWaitForText('"value2"');
-  },
-};
-
-export const Yaml: Story = {
-  args: {
-    type: 'object',
-    dataType: 'yaml',
-    value: jsyaml.dump({
-      key: 'value',
-      bool: false,
-      num: 23,
-    }),
-    resultDataType: 'yaml',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field with a YAML string value. Switching to Text mode, editing the YAML and clicking Save fires onChange with the new YAML serialization.',
-      },
-    },
-  },
-  async play({ args }) {
-    await testsWaitForText('"value"');
-    await testsClickButton({ label: 'Text' });
-    await sleep(300);
-    await fireEvent.change(document.querySelector('textarea'), {
-      target: {
-        value: jsyaml.dump({
-          key: 'value',
-          key2: 'value2',
-          bool: false,
-          num: 23,
-        }),
-      },
-    });
-    await testsClickButton({ label: 'Save' });
-    await expect(args.onChange).toHaveBeenLastCalledWith(
-      'key: value\nkey2: value2\nbool: false\nnum: 23\n'
-    );
-    await testsClickButton({ label: 'Editor' });
-    await testsWaitForText('"value2"');
-  },
-};
-
-export const YamlToJson: Story = {
-  args: {
-    type: 'object',
-    dataType: 'yaml',
-    value: jsyaml.dump({
-      key: 'value',
-      bool: false,
-      num: 23,
-    }),
-    resultDataType: 'json',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field with a YAML input value and JSON output — editing the YAML in Text mode and saving fires onChange with the equivalent JSON string.',
-      },
-    },
-  },
-  async play({ args }) {
-    await testsWaitForText('"value"');
-    await testsClickButton({ label: 'Text' });
-    await sleep(300);
-    await fireEvent.change(document.querySelector('textarea'), {
-      target: {
-        value: jsyaml.dump({
-          key: 'value',
-          key2: 'value2',
-          bool: false,
-          num: 23,
-        }),
-      },
-    });
-    await testsClickButton({ label: 'Save' });
-    await expect(args.onChange).toHaveBeenLastCalledWith(
-      '{\n  "key": "value",\n  "key2": "value2",\n  "bool": false,\n  "num": 23\n}'
-    );
-    await testsClickButton({ label: 'Editor' });
-    await testsWaitForText('"value2"');
-  },
-};
-
-export const NativeToYaml: Story = {
-  args: {
-    type: 'object',
-    dataType: 'native',
-    value: {
-      key: 'value',
-      bool: false,
-      num: 23,
-    },
-    resultDataType: 'yaml',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Renders the Object field with a native object value and YAML output — editing in Text mode and saving fires onChange with the YAML serialization.',
-      },
-    },
-  },
-  async play({ args }) {
-    await testsWaitForText('"value"');
-    await testsClickButton({ label: 'Text' });
-    await sleep(300);
-    await fireEvent.change(document.querySelector('textarea'), {
-      target: {
-        value: jsyaml.dump({
-          key: 'value',
-          key2: 'value2',
-          bool: false,
-          num: 23,
-        }),
-      },
-    });
-    await testsClickButton({ label: 'Save' });
-    await expect(args.onChange).toHaveBeenLastCalledWith(
-      jsyaml.dump({
-        key: 'value',
-        key2: 'value2',
-        bool: false,
-        num: 23,
-      })
-    );
-    await testsClickButton({ label: 'Editor' });
-    await testsWaitForText('"value2"');
-  },
-};

package/src/components/form/fields/object/Object.tsx

@@ -1,255 +0,0 @@
-import {
-  ReqoreButton,
-  ReqoreControlGroup,
-  ReqoreSpan,
-  ReqoreTabs,
-  ReqoreTabsContent,
-} from '@qoretechnologies/reqore';
-import { IReqoreTabsProps } from '@qoretechnologies/reqore/dist/components/Tabs';
-import { IReqoreTreeProps, ReqoreTree } from '@qoretechnologies/reqore/dist/components/Tree';
-import jsyaml from 'js-yaml';
-import { memo, useCallback, useMemo, useState } from 'react';
-import LongStringFormField, { ILongStringFormFieldProps } from '../long-string/LongString';
-
-export interface IReqraftObjectFormFieldProps extends Omit<IReqoreTabsProps, 'onChange' | 'tabs'> {
-  tabs?: IReqoreTabsProps['tabs'];
-  onChange: (value: string | IReqoreTreeProps['data']) => void;
-  value: string | IReqoreTreeProps['data'];
-
-  type: 'object' | 'array';
-  resultDataType?: 'native' | 'json' | 'yaml';
-  dataType?: 'native' | 'json' | 'yaml';
-
-  editorProps?: Omit<IReqoreTreeProps, 'data' | 'onDataChange'>;
-  textareaProps?: ILongStringFormFieldProps;
-
-  disabled?: boolean;
-}
-
-export const ReqraftObjectFormFieldTextarea = ({
-  value,
-  onChange,
-  dataType,
-  resultDataType,
-  ...rest
-}: Partial<ILongStringFormFieldProps> &
-  Pick<IReqraftObjectFormFieldProps, 'dataType'> & { resultDataType: 'json' | 'yaml' }) => {
-  const [localValue, setValue] = useState(value);
-
-  const handleChange = useCallback((newValue: string) => {
-    setValue(newValue);
-  }, []);
-
-  const parseValue = useCallback(
-    (type: 'json' | 'yaml' | 'native') => {
-      switch (type) {
-        case 'json':
-          return JSON.parse(localValue);
-        case 'yaml':
-          return jsyaml.load(localValue);
-        default:
-          return parseValue(resultDataType);
-      }
-    },
-    [dataType, localValue, resultDataType]
-  );
-
-  const isValid = useMemo(() => {
-    if (localValue === '' || localValue === undefined) {
-      return true;
-    }
-
-    try {
-      !!parseValue(dataType);
-    } catch (e) {
-      return false;
-    }
-
-    return true;
-  }, [dataType, resultDataType, localValue]);
-
-  return (
-    <ReqoreControlGroup vertical>
-      <LongStringFormField
-        value={localValue}
-        onChange={handleChange}
-        scaleWithContent
-        {...rest}
-        intent={isValid ? rest.intent : 'danger'}
-      />
-      <ReqoreControlGroup stack>
-        <ReqoreButton
-          size={rest.size}
-          label='Save'
-          icon='CheckLine'
-          compact
-          fluid
-          intent='success'
-          disabled={!isValid || rest.disabled || localValue === value}
-          onClick={() => {
-            if (localValue === '' || localValue === undefined) {
-              onChange(undefined);
-              return;
-            }
-
-            let parsedValue = parseValue(dataType);
-
-            if (resultDataType === 'json') {
-              parsedValue = JSON.stringify(parsedValue, null, 2);
-            } else if (resultDataType === 'yaml') {
-              parsedValue = jsyaml.dump(parsedValue);
-            }
-            onChange(parsedValue);
-          }}
-        />
-        <ReqoreButton
-          size={rest.size}
-          label='Discard'
-          icon='HistoryLine'
-          compact
-          fixed
-          disabled={localValue === value || rest.disabled}
-          onClick={() => setValue(value)}
-        />
-      </ReqoreControlGroup>
-      {!isValid && (
-        <ReqoreSpan intent='danger' size='small'>
-          Not a valid {resultDataType.toUpperCase()}
-        </ReqoreSpan>
-      )}
-    </ReqoreControlGroup>
-  );
-};
-
-export const ReqraftObjectFormField = memo(
-  ({
-    onChange,
-    value,
-    type,
-    dataType,
-    resultDataType = dataType,
-    editorProps,
-    textareaProps,
-    ...rest
-  }: IReqraftObjectFormFieldProps) => {
-    const handleTreeDataChange = useCallback(
-      (data: IReqoreTreeProps['data']) => {
-        switch (resultDataType) {
-          case 'json':
-            onChange(JSON.stringify(data, null, 2));
-            break;
-          case 'yaml':
-            onChange(jsyaml.dump(data));
-            break;
-          default:
-            onChange(data);
-        }
-      },
-      [resultDataType, onChange]
-    );
-
-    const treeData = useMemo(() => {
-      if (!value) {
-        return undefined;
-      }
-
-      switch (dataType) {
-        case 'json':
-          return JSON.parse(value as string);
-        case 'yaml':
-          return jsyaml.load(value as string);
-        default:
-          return value;
-      }
-    }, [value]);
-
-    const textData: string = useMemo(() => {
-      if (!value) {
-        return undefined;
-      }
-
-      switch (dataType) {
-        case 'json':
-          return value as string;
-        case 'yaml':
-          return value as string;
-        default:
-          switch (resultDataType) {
-            case 'json':
-              return JSON.stringify(value, null, 2);
-            default:
-              return jsyaml.dump(value);
-          }
-      }
-    }, [value]);
-
-    return (
-      <ReqoreTabs
-        tabsPadding='vertical'
-        {...rest}
-        tabs={[
-          {
-            label: 'Editor',
-            icon: 'NodeTree',
-            id: 'editor',
-            size: rest.size,
-          },
-          {
-            label: 'Text',
-            icon: 'Text',
-            id: 'text',
-            show: resultDataType !== 'native',
-            size: rest.size,
-          },
-        ]}
-      >
-        <ReqoreTabsContent tabId='editor'>
-          {!treeData && (
-            <ReqoreButton
-              onClick={() => handleTreeDataChange(type === 'array' ? [] : {})}
-              fixed
-              icon='AddLine'
-              disabled={rest.disabled}
-              size={rest.size}
-            >
-              New {type === 'array' ? 'List' : 'Object'}
-            </ReqoreButton>
-          )}
-          {treeData && (
-            <ReqoreTree
-              disabled={rest.disabled}
-              data={treeData}
-              onDataChange={handleTreeDataChange}
-              editable
-              showControls={false}
-              size={rest.size}
-              {...editorProps}
-            />
-          )}
-          {treeData && (
-            <ReqoreButton
-              onClick={() => handleTreeDataChange(undefined)}
-              fixed
-              icon='CloseLine'
-              disabled={rest.disabled}
-              size={rest.size}
-            >
-              Remove
-            </ReqoreButton>
-          )}
-        </ReqoreTabsContent>
-        <ReqoreTabsContent tabId='text'>
-          <ReqraftObjectFormFieldTextarea
-            disabled={rest.disabled}
-            size={rest.size}
-            {...textareaProps}
-            value={textData}
-            onChange={onChange}
-            dataType={dataType}
-            resultDataType={resultDataType as 'json' | 'yaml'}
-          />
-        </ReqoreTabsContent>
-      </ReqoreTabs>
-    );
-  }
-);