@qoretechnologies/reqraft 0.5.1 → 0.6.0

package/dist/components/form/fields/long-string/LongString.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LongString.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/long-string/LongString.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACvF,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,EACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,KACzC,IAAI,CAAC;CACX;AAED,eAAO,MAAM,mBAAmB,wCAI7B,yBAAyB,4CAiB3B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"LongString.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/long-string/LongString.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACvF,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,EACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,KACzC,IAAI,CAAC;CACX;AAED,eAAO,MAAM,mBAAmB,wCAI7B,yBAAyB,4CAc3B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/form/fields/long-string/LongString.js

@@ -27,9 +27,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var reqore_1 = require("@qoretechnologies/reqore");
 var LongStringFormField = function (_a) {
     var onChange = _a.onChange, onClearClick = _a.onClearClick, rest = __rest(_a, ["onChange", "onClearClick"]);
-    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTextarea, __assign({ scaleWithContent: true, fluid: true, wrapperStyle: {
-            width: '100%',
-        }, onClearClick: function () {
+    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTextarea, __assign({ scaleWithContent: true, fluid: true, onClearClick: function () {
             onClearClick === null || onClearClick === void 0 ? void 0 : onClearClick();
             onChange === null || onChange === void 0 ? void 0 : onChange('');
         }, onChange: function (event) { return onChange(event.currentTarget.value, event); }, rows: 4 }, rest)));

package/dist/components/form/fields/long-string/LongString.js.map

@@ -1 +1 @@
-{"version":3,"file":"LongString.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/long-string/LongString.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAA0D;AAWnD,IAAM,mBAAmB,GAAG,UAAC,EAIR;IAH1B,IAAA,QAAQ,cAAA,EACR,YAAY,kBAAA,EACT,IAAI,cAH2B,4BAInC,CADQ;IAEP,OAAO,CACL,uBAAC,uBAAc,aACb,gBAAgB,QAChB,KAAK,QACL,YAAY,EAAE;YACZ,KAAK,EAAE,MAAM;SACd,EACD,YAAY,EAAE;YACZ,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAC;QACjB,CAAC,EACD,QAAQ,EAAE,UAAC,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,EAA1C,CAA0C,EAC/D,IAAI,EAAE,CAAC,IACH,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,mBAAmB,uBAqB9B;AAEF,kBAAe,2BAAmB,CAAC"}
+{"version":3,"file":"LongString.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/long-string/LongString.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAA0D;AAWnD,IAAM,mBAAmB,GAAG,UAAC,EAIR;IAH1B,IAAA,QAAQ,cAAA,EACR,YAAY,kBAAA,EACT,IAAI,cAH2B,4BAInC,CADQ;IAEP,OAAO,CACL,uBAAC,uBAAc,aACb,gBAAgB,QAChB,KAAK,QACL,YAAY,EAAE;YACZ,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAC;QACjB,CAAC,EACD,QAAQ,EAAE,UAAC,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,EAA1C,CAA0C,EAC/D,IAAI,EAAE,CAAC,IACH,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,mBAAmB,uBAkB9B;AAEF,kBAAe,2BAAmB,CAAC"}

package/dist/components/form/fields/object/Object.d.ts

@@ -0,0 +1,17 @@
+import { IReqoreTabsProps } from '@qoretechnologies/reqore/dist/components/Tabs';
+import { IReqoreTreeProps } from '@qoretechnologies/reqore/dist/components/Tree';
+import { ILongStringFormFieldProps } from '../long-string/LongString';
+export interface IReqraftObjectFormFieldProps extends Omit<IReqoreTabsProps, 'onChange'> {
+    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;
+}
+export declare const ReqraftObjectFormFieldTextarea: ({ value, onChange, dataType, resultDataType, ...rest }: Partial<ILongStringFormFieldProps> & Pick<IReqraftObjectFormFieldProps, 'dataType'> & {
+    resultDataType: 'json' | 'yaml';
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ReqraftObjectFormField: ({ onChange, value, type, dataType, resultDataType, editorProps, textareaProps, ...rest }: IReqraftObjectFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Object.d.ts.map

package/dist/components/form/fields/object/Object.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Object.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/object/Object.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,gBAAgB,EAAE,MAAM,+CAA+C,CAAC;AACjF,OAAO,EAAE,gBAAgB,EAAc,MAAM,+CAA+C,CAAC;AAG7F,OAA4B,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAE3F,MAAM,WAAW,4BAA6B,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IACtF,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC7D,KAAK,EAAE,MAAM,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAEzC,IAAI,EAAE,QAAQ,GAAG,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IAEtC,WAAW,CAAC,EAAE,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,cAAc,CAAC,CAAC;IAC9D,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC3C;AAED,eAAO,MAAM,8BAA8B,2DAMxC,QAAQ,yBAAyB,CAAC,GACnC,KAAK,4BAA4B,EAAE,UAAU,CAAC,GAAG;IAAE,cAAc,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,4CAoFrF,CAAC;AAEF,eAAO,MAAM,sBAAsB,6FAShC,4BAA4B,4CA0G9B,CAAC"}

package/dist/components/form/fields/object/Object.js

@@ -0,0 +1,139 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReqraftObjectFormField = exports.ReqraftObjectFormFieldTextarea = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var reqore_1 = require("@qoretechnologies/reqore");
+var Tree_1 = require("@qoretechnologies/reqore/dist/components/Tree");
+var js_yaml_1 = __importDefault(require("js-yaml"));
+var react_1 = require("react");
+var LongString_1 = __importDefault(require("../long-string/LongString"));
+var ReqraftObjectFormFieldTextarea = function (_a) {
+    var value = _a.value, onChange = _a.onChange, dataType = _a.dataType, resultDataType = _a.resultDataType, rest = __rest(_a, ["value", "onChange", "dataType", "resultDataType"]);
+    var _b = (0, react_1.useState)(value), localValue = _b[0], setValue = _b[1];
+    var handleChange = (0, react_1.useCallback)(function (newValue) {
+        setValue(newValue);
+    }, []);
+    var parseValue = (0, react_1.useCallback)(function (type) {
+        switch (type) {
+            case 'json':
+                return JSON.parse(localValue);
+            case 'yaml':
+                return js_yaml_1.default.load(localValue);
+            default:
+                return parseValue(resultDataType);
+        }
+    }, [dataType, localValue, resultDataType]);
+    var isValid = (0, react_1.useMemo)(function () {
+        if (localValue === '' || localValue === undefined) {
+            return true;
+        }
+        try {
+            !!parseValue(dataType);
+        }
+        catch (e) {
+            return false;
+        }
+        return true;
+    }, [dataType, resultDataType, localValue]);
+    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, children: [(0, jsx_runtime_1.jsx)(LongString_1.default, __assign({ value: localValue, onChange: handleChange, scaleWithContent: true }, rest, { intent: isValid ? rest.intent : 'danger' })), (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { stack: true, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { label: 'Save', icon: 'CheckLine', compact: true, fluid: true, intent: 'success', disabled: !isValid, onClick: function () {
+                            if (localValue === '' || localValue === undefined) {
+                                onChange(undefined);
+                                return;
+                            }
+                            var parsedValue = parseValue(dataType);
+                            if (resultDataType === 'json') {
+                                parsedValue = JSON.stringify(parsedValue, null, 2);
+                            }
+                            else if (resultDataType === 'yaml') {
+                                parsedValue = js_yaml_1.default.dump(parsedValue);
+                            }
+                            onChange(parsedValue);
+                        } }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { label: 'Discard', icon: 'HistoryLine', compact: true, fixed: true, disabled: localValue === value, onClick: function () { return setValue(value); } })] }), !isValid && ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreSpan, { intent: 'danger', size: 'small', children: ["Not a valid ", resultDataType.toUpperCase()] }))] }));
+};
+exports.ReqraftObjectFormFieldTextarea = ReqraftObjectFormFieldTextarea;
+var ReqraftObjectFormField = function (_a) {
+    var onChange = _a.onChange, value = _a.value, type = _a.type, dataType = _a.dataType, _b = _a.resultDataType, resultDataType = _b === void 0 ? dataType : _b, editorProps = _a.editorProps, textareaProps = _a.textareaProps, rest = __rest(_a, ["onChange", "value", "type", "dataType", "resultDataType", "editorProps", "textareaProps"]);
+    var handleTreeDataChange = (0, react_1.useCallback)(function (data) {
+        switch (resultDataType) {
+            case 'json':
+                onChange(JSON.stringify(data, null, 2));
+                break;
+            case 'yaml':
+                onChange(js_yaml_1.default.dump(data));
+                break;
+            default:
+                onChange(data);
+        }
+    }, [resultDataType, onChange]);
+    var treeData = (0, react_1.useMemo)(function () {
+        if (!value) {
+            return undefined;
+        }
+        switch (dataType) {
+            case 'json':
+                return JSON.parse(value);
+            case 'yaml':
+                return js_yaml_1.default.load(value);
+            default:
+                return value;
+        }
+    }, [value]);
+    var textData = (0, react_1.useMemo)(function () {
+        if (!value) {
+            return undefined;
+        }
+        switch (dataType) {
+            case 'json':
+                return value;
+            case 'yaml':
+                return value;
+            default:
+                switch (resultDataType) {
+                    case 'json':
+                        return JSON.stringify(value, null, 2);
+                    default:
+                        return js_yaml_1.default.dump(value);
+                }
+        }
+    }, [value]);
+    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreTabs, __assign({ tabsPadding: 'vertical' }, rest, { tabs: [
+            {
+                label: 'Editor',
+                icon: 'NodeTree',
+                id: 'editor',
+            },
+            {
+                label: 'Text',
+                icon: 'Text',
+                id: 'text',
+                show: resultDataType !== 'native',
+            },
+        ], children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreTabsContent, { tabId: 'editor', children: [!treeData && ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreButton, { onClick: function () { return handleTreeDataChange(type === 'array' ? [] : {}); }, fixed: true, icon: 'AddLine', children: ["New ", type === 'array' ? 'List' : 'Object'] })), treeData && ((0, jsx_runtime_1.jsx)(Tree_1.ReqoreTree, __assign({ data: treeData, onDataChange: handleTreeDataChange, editable: true, showControls: false }, editorProps))), treeData && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { onClick: function () { return handleTreeDataChange(undefined); }, fixed: true, icon: 'CloseLine', children: "Remove" }))] }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTabsContent, { tabId: 'text', children: (0, jsx_runtime_1.jsx)(exports.ReqraftObjectFormFieldTextarea, __assign({}, textareaProps, { value: textData, onChange: onChange, dataType: dataType, resultDataType: resultDataType })) })] })));
+};
+exports.ReqraftObjectFormField = ReqraftObjectFormField;
+//# sourceMappingURL=Object.js.map

package/dist/components/form/fields/object/Object.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Object.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/object/Object.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -53,7 +53,7 @@
     "@babel/preset-typescript": "^7.12.7",
     "@chromatic-com/storybook": "^1.5.0",
     "@netsells/storybook-mockdate": "^0.3.3",
-    "@qoretechnologies/reqore": "^0.46.6",
+    "@qoretechnologies/reqore": "^0.47.1",
     "@storybook/addon-actions": "^8.1.7",
     "@storybook/addon-essentials": "^8.1.7",
     "@storybook/addon-interactions": "^8.1.7",
@@ -69,6 +69,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^26.0.19",
+    "@types/js-yaml": "^4.0.9",
     "@types/lodash": "^4.14.166",
     "@types/node": "^14.14.14",
     "@types/react": "^18.3.1",
@@ -110,6 +111,7 @@
     "classnames": "^2.2.6",
     "cronstrue": "^2.50.0",
     "epoch-timeago": "^1.1.9",
+    "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "react-color": "^2.19.3",

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

@@ -18,9 +18,6 @@ export const LongStringFormField = ({
     <ReqoreTextarea
       scaleWithContent
       fluid
-      wrapperStyle={{
-        width: '100%',
-      }}
       onClearClick={() => {
         onClearClick?.();
         onChange?.('');

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

@@ -0,0 +1,267 @@
+import { StoryObj } from '@storybook/react';
+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',
+  },
+  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',
+  },
+  async play() {
+    await testsWaitForText('New List');
+    await testsClickButton({ label: 'New List' });
+    await testsWaitForText('[');
+    await testsWaitForText(']');
+  },
+};
+
+export const NativeOnly: Story = {
+  args: {
+    type: 'array',
+    dataType: 'native',
+    resultDataType: 'native',
+    value: [
+      {
+        key: 'value',
+      },
+      'Test',
+      12,
+      false,
+    ],
+  },
+  async play() {
+    await testsWaitForText('"value"');
+  },
+};
+
+export const ValueCanBeRemoved: Story = {
+  args: {
+    type: 'array',
+    dataType: 'native',
+    resultDataType: 'native',
+    value: [
+      {
+        key: 'value',
+      },
+      'Test',
+      12,
+      false,
+    ],
+  },
+  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',
+  },
+  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',
+  },
+  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',
+  },
+  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',
+  },
+  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

@@ -0,0 +1,234 @@
+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 { useCallback, useMemo, useState } from 'react';
+import LongStringFormField, { ILongStringFormFieldProps } from '../long-string/LongString';
+
+export interface IReqraftObjectFormFieldProps extends Omit<IReqoreTabsProps, 'onChange'> {
+  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;
+}
+
+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
+          label='Save'
+          icon='CheckLine'
+          compact
+          fluid
+          intent='success'
+          disabled={!isValid}
+          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
+          label='Discard'
+          icon='HistoryLine'
+          compact
+          fixed
+          disabled={localValue === value}
+          onClick={() => setValue(value)}
+        />
+      </ReqoreControlGroup>
+      {!isValid && (
+        <ReqoreSpan intent='danger' size='small'>
+          Not a valid {resultDataType.toUpperCase()}
+        </ReqoreSpan>
+      )}
+    </ReqoreControlGroup>
+  );
+};
+
+export const ReqraftObjectFormField = ({
+  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',
+        },
+        {
+          label: 'Text',
+          icon: 'Text',
+          id: 'text',
+          show: resultDataType !== 'native',
+        },
+      ]}
+    >
+      <ReqoreTabsContent tabId='editor'>
+        {!treeData && (
+          <ReqoreButton
+            onClick={() => handleTreeDataChange(type === 'array' ? [] : {})}
+            fixed
+            icon='AddLine'
+          >
+            New {type === 'array' ? 'List' : 'Object'}
+          </ReqoreButton>
+        )}
+        {treeData && (
+          <ReqoreTree
+            data={treeData}
+            onDataChange={handleTreeDataChange}
+            editable
+            showControls={false}
+            {...editorProps}
+          />
+        )}
+        {treeData && (
+          <ReqoreButton onClick={() => handleTreeDataChange(undefined)} fixed icon='CloseLine'>
+            Remove
+          </ReqoreButton>
+        )}
+      </ReqoreTabsContent>
+      <ReqoreTabsContent tabId='text'>
+        <ReqraftObjectFormFieldTextarea
+          {...textareaProps}
+          value={textData}
+          onChange={onChange}
+          dataType={dataType}
+          resultDataType={resultDataType as 'json' | 'yaml'}
+        />
+      </ReqoreTabsContent>
+    </ReqoreTabs>
+  );
+};