@qoretechnologies/reqraft 0.10.10 → 0.10.12

package/src/components/form/fields/Field.stories.tsx

@@ -40,6 +40,14 @@ export const SoftInteger: Story = {
     type: 'softint',
     value: 5,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders FormField for a softint value — the dispatcher resolves the soft type to int and mounts the numeric input.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     // NumberFormField renders an input (a `softint` resolves to `int`).
     await expect(canvasElement.querySelector('input')).toBeInTheDocument();
@@ -52,6 +60,14 @@ export const Binary: Story = {
     type: 'binary',
     value: 'deadbeef',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders FormField for a binary value — the dispatcher mounts a textarea holding the encoded content.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     await expect(canvasElement.querySelector('textarea')).toBeInTheDocument();
   },
@@ -63,6 +79,14 @@ export const ByteSize: Story = {
     type: 'byte-size',
     value: '512MiB',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders FormField for a byte-size value — the dispatcher mounts the amount input and the MiB unit selector, split from "512MiB".',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(canvas.getByDisplayValue('512')).toBeInTheDocument();
@@ -76,6 +100,14 @@ export const Url: Story = {
     type: 'url',
     value: 'https://example.com',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders FormField for a url value — the dispatcher mounts the https protocol selector and the example.com address input, split from "https://example.com".',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(await canvas.findByDisplayValue('example.com')).toBeInTheDocument();
@@ -94,6 +126,14 @@ export const MultiSelect: Story = {
     ],
     value: ['red', 'blue'],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders FormField for a multi-select value — the two picked values (Red and Blue) render as chips using their display_name labels.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // The two selected values render as chips (by their display_name).

package/src/components/form/fields/array/ArrayAutoField.stories.tsx

@@ -83,6 +83,14 @@ export const CompactEmpty: Story = {
     type: 'string',
     value: [],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with no items — only the entry input and a disabled confirm button are visible.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
 
@@ -102,6 +110,14 @@ export const CompactWithValues: Story = {
     type: 'string',
     value: ['hello', 'world'],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with two existing items — the values are shown as tags above the entry input.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
 
@@ -122,6 +138,14 @@ export const CompactAddItem: Story = {
     type: 'string',
     value: ['existing'],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with one existing item. Typing into the input and clicking confirm appends the new item and fires onChange with the full list.',
+      },
+    },
+  },
   async play({ args }) {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(1),
@@ -157,6 +181,14 @@ export const CompactEditItem: Story = {
     type: 'string',
     value: ['alpha', 'beta'],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with two items. Clicking a tag\'s edit action loads its value into the input; editing and confirming replaces the tag in place.',
+      },
+    },
+  },
   async play({ args }) {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(2),
@@ -199,6 +231,14 @@ export const CompactRemoveItem: Story = {
     type: 'string',
     value: ['one', 'two', 'three'],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with three items. Clicking the middle tag\'s remove action drops it from the list and fires onChange with the remaining two.',
+      },
+    },
+  },
   async play({ args }) {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(3),
@@ -230,6 +270,14 @@ export const CompactWithNumbers: Story = {
     value: [10, 20, 30],
     renderItem: numberRenderItem,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact int mode with three numeric items — the tags show 10, 20 and 30 and the entry input uses the Number field.',
+      },
+    },
+  },
   async play() {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(3),
@@ -244,6 +292,14 @@ export const CompactDisabled: Story = {
     value: ['locked'],
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in compact string mode with one item but disabled — the tag is visible without edit/remove actions and no entry input is shown.',
+      },
+    },
+  },
   async play() {
     await waitFor(
       () => expect(document.querySelectorAll('.array-auto-compact-tag').length).toBe(1),
@@ -267,6 +323,14 @@ export const ComplexHashItems: Story = {
     value: [{ key: 'value' }],
     display_name: 'Hash Items',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ArrayAutoField in hash mode with one hash item — the field switches to the panel-based layout rather than compact tags.',
+      },
+    },
+  },
   async play() {
     // Should render panel-based UI, not compact tags
     await waitFor(() => expect(document.querySelectorAll('.array-auto-item').length).toBe(1), {

package/src/components/form/fields/auto/AutoFormField.stories.tsx

@@ -57,6 +57,14 @@ const waitForText = async (text: string | RegExp) => {
 /** Auto type, no value — the picker is shown and the field area prompts for a type. */
 export const Empty: Story = {
   args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with no value or defaultType — the type picker is shown and the field area prompts the operator to pick a data type.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // The IDE auto resolves its type in a mount effect — assert asynchronously.
@@ -71,6 +79,14 @@ export const InferredInteger: Story = {
   args: {
     value: 42,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with a pre-existing numeric value of 42 — the type is inferred as int and the numeric input is shown without prompting for a type.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // Resolved → a concrete field renders (post mount effect) and no prompt.
@@ -86,6 +102,14 @@ export const InferredText: Story = {
   args: {
     value: 'hello world',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with a pre-existing string value — the type is inferred as string and the text field is shown holding "hello world".',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(await canvas.findByDisplayValue('hello world')).toBeInTheDocument();
@@ -97,6 +121,14 @@ export const ConcreteString: Story = {
   args: {
     defaultType: 'string',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with a concrete defaultType of string — the text field is shown directly, no type picker. Typing "abc" fires onChange with the value and inferred type.',
+      },
+    },
+  },
   async play({ canvasElement, args }) {
     const canvas = within(canvasElement);
     // string renders the IDE's LongString field — a textarea. The verbatim
@@ -121,6 +153,14 @@ export const Nullable: Story = {
     value: 'some text',
     canBeNull: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with canBeNull enabled. Clicking "Set as null" clears the value to null, hides the field editor and flips the toggle to "Unset null".',
+      },
+    },
+  },
   async play({ canvasElement, args }) {
     const canvas = within(canvasElement);
 
@@ -147,6 +187,14 @@ export const AllowedTypesSubset: Story = {
       { name: 'string', display_name: 'Text' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with allowedTypes restricted to Integer and Text — the picker badge shows 2 available types instead of the full 14.',
+      },
+    },
+  },
   async play() {
     // The picker badge reflects the restricted list — 2 instead of 14.
     await waitForText('Please select data type');
@@ -159,6 +207,14 @@ export const NoSoftTypes: Story = {
   args: {
     noSoft: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with noSoft enabled — the soft* type variants are hidden and the picker badge reads 9 instead of 14.',
+      },
+    },
+  },
   async play() {
     await waitForText('Please select data type');
     await waitForText('9');
@@ -170,6 +226,14 @@ export const NoSoftTypes: Story = {
  * `auto` renders the picker for free, via FormEngine → TemplateField → auto.
  */
 export const ViaFormEngine: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a FormEngine schema whose single option is typed as auto — the engine flows through TemplateField and renders the AutoFormField picker without any extra wiring.',
+      },
+    },
+  },
   render: () => {
     const [val, setVal] = useState<any>({});
     return (
@@ -222,6 +286,14 @@ export const StringWithAllowedValues: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField for a string with two allowed values — the operator picks from the constrained list rather than typing freely.',
+      },
+    },
+  },
 };
 
 export const RichText: Story = {
@@ -231,6 +303,14 @@ export const RichText: Story = {
     allowTemplates: true,
     templates: buildTemplates(templates as any),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in richtext mode with templates enabled. Typing appends to the existing value inside the contenteditable editor.',
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
     await waitFor(() => canvasElement.querySelector('div[contenteditable]'), {
       timeout: 15000,
@@ -264,6 +344,14 @@ export const ConnectionWithAllowedValues: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField for a connection with two allowed values — clicking "Please select" opens the item picker modal titled "Select from items".',
+      },
+    },
+  },
   play: async () => {
     // connection is a no-compact type → the allowed values render as the
     // select with the item collection (the IDE asserts the same modal title).
@@ -277,6 +365,14 @@ export const Hash: Story = {
   args: {
     value: jsyaml.dump({ key: 'value' }),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField with a YAML-serialized hash value — the type is inferred as hash and the object editor is shown holding the parsed data.',
+      },
+    },
+  },
 };
 
 export const File: Story = {
@@ -288,6 +384,14 @@ export const File: Story = {
       size: 1234,
     },
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in file mode holding a text-file value — the file field shows the file name in place of the drop zone.',
+      },
+    },
+  },
 };
 
 export const AutoDoesNotChangeTypeBackToAuto: Story = {
@@ -295,6 +399,14 @@ export const AutoDoesNotChangeTypeBackToAuto: Story = {
     defaultType: 'auto',
     value: 'test',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in auto mode with a string value — the inferred type ("string") is shown and the picker still exposes all 14 types so the operator can switch away from auto without the field snapping back.',
+      },
+    },
+  },
   play: async () => {
     await waitForText('string');
     await waitForText('14');
@@ -317,6 +429,14 @@ export const ListWithAllowedValues: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in list mode restricted to two allowed list values — the operator picks one of the pre-defined lists rather than composing their own.',
+      },
+    },
+  },
 };
 
 export const ListWithCreatableAllowedValues: Story = {
@@ -337,6 +457,14 @@ export const ListWithCreatableAllowedValues: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in list mode with two allowed values but with allowed_values_creatable enabled — the operator can pick a canned list or compose a custom one.',
+      },
+    },
+  },
 };
 
 export const ListWithElementType: Story = {
@@ -344,4 +472,12 @@ export const ListWithElementType: Story = {
     defaultType: 'list',
     element_type: 'int',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders AutoFormField in list mode with an int element type — new items are added as integers rather than requiring the operator to pick a per-item type.',
+      },
+    },
+  },
 };

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

@@ -38,6 +38,14 @@ 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');
@@ -48,6 +56,14 @@ export const WithValue: Story = {
 };
 
 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');
@@ -61,6 +77,14 @@ export const TypingUpdatesValue: Story = {
 };
 
 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
@@ -81,6 +105,14 @@ export const Disabled: Story = {
     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');

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

@@ -34,6 +34,14 @@ 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);
 
@@ -49,6 +57,14 @@ 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);
 
@@ -64,4 +80,12 @@ export const Disabled: Story = {
     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/byte-size/ByteSize.stories.tsx

@@ -30,6 +30,14 @@ 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');
@@ -43,6 +51,14 @@ 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();
@@ -55,6 +71,14 @@ export const ReadOnly: Story = {
     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');

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

@@ -34,6 +34,14 @@ 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');
@@ -47,12 +55,26 @@ 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();
   },
@@ -63,6 +85,14 @@ export const Disabled: Story = {
     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/cron/Cron.stories.tsx

@@ -39,6 +39,14 @@ export const Default: Story = {
       '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);

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

@@ -30,6 +30,13 @@ 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();
@@ -40,6 +47,14 @@ 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();
@@ -52,4 +67,11 @@ export const Disabled: Story = {
     value: '2025-06-01',
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Renders the Date field with a value but disabled — the input is non-interactive.',
+      },
+    },
+  },
 };