@qoretechnologies/reqraft 0.10.9 → 0.10.11

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

@@ -30,6 +30,14 @@ 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();
@@ -44,6 +52,14 @@ export const WithValue: Story = {
       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();
@@ -58,6 +74,14 @@ export const WithImageValue: Story = {
       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();
@@ -75,6 +99,14 @@ export const WithAcceptedExtensions: Story = {
       },
     },
   },
+  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();
@@ -86,6 +118,14 @@ 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();
@@ -105,6 +145,14 @@ export const WithBuildTab: Story = {
       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();

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

@@ -39,6 +39,14 @@ export const WithValue: Story = {
   args: {
     value: 'Hello world',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the LongString field pre-populated with "Hello world". Clicking clear empties the textarea and fires onChange; typing new content updates the value after the debounce.',
+      },
+    },
+  },
   async play({ canvasElement, args, step }) {
     const canvas = within(canvasElement);
     const textarea = canvas.getByLabelText('LongString');
@@ -66,6 +74,14 @@ export const WithValue: Story = {
 };
 
 export const Empty: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the LongString field with no value. Typing into the empty textarea updates the value and fires onChange after the debounce.',
+      },
+    },
+  },
   async play({ canvasElement, args }) {
     const canvas = within(canvasElement);
     const textarea = canvas.getByLabelText('LongString');
@@ -86,6 +102,14 @@ export const Disabled: Story = {
     value: 'Cannot edit this',
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the LongString field with a value but disabled — the textarea shows the value and rejects further edits.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     const textarea = canvas.getByLabelText('LongString');

package/src/components/form/fields/markdown/Markdown.stories.tsx

@@ -35,6 +35,14 @@ export const Default: Story = {
   args: {
     'aria-label': 'MarkdownEditor',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Markdown field pre-populated with the sample markdown fixture — the editor and the live preview render side by side.',
+      },
+    },
+  },
   async play({ canvasElement, args }) {
     const canvas = within(canvasElement);
     const editor = canvas.getByLabelText('MarkdownEditor');

package/src/components/form/fields/number/Number.stories.tsx

@@ -38,6 +38,14 @@ export const Integer: Story = {
     value: 42,
     type: 'int',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Number field in integer mode with 42 pre-populated. Typing a new integer updates the value and fires onChange after the debounce.',
+      },
+    },
+  },
   async play({ args, canvasElement }) {
     const canvas = within(canvasElement);
     const input = canvas.getByLabelText('Number');
@@ -58,6 +66,14 @@ export const Float: Story = {
     value: 3.14,
     type: 'float',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Number field in float mode with 3.14 pre-populated — the input uses a 0.1 step and accepts decimals.',
+      },
+    },
+  },
   async play({ args, canvasElement }) {
     const canvas = within(canvasElement);
     const input = canvas.getByLabelText('Number');
@@ -76,6 +92,13 @@ export const Empty: Story = {
   args: {
     type: 'int',
   },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Renders the Number field in integer mode with no value — the input mounts empty.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     const input = canvas.getByLabelText('Number');
@@ -91,6 +114,14 @@ export const Disabled: Story = {
     type: 'int',
     disabled: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Number field with a value but disabled — the input shows the value and rejects further edits.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     const input = canvas.getByLabelText('Number');

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

@@ -50,6 +50,14 @@ export const Object: Story = {
     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' });
@@ -64,6 +72,14 @@ export const List: Story = {
     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' });
@@ -79,6 +95,14 @@ export const Disabled: Story = {
     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 = {
@@ -96,6 +120,14 @@ export const Small: Story = {
       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 = {
@@ -113,6 +145,14 @@ export const DisabledWithValue: Story = {
     ],
     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 = {
@@ -129,6 +169,14 @@ export const NativeOnly: Story = {
       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"');
   },
@@ -148,6 +196,14 @@ export const ValueCanBeRemoved: Story = {
       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' });
@@ -166,6 +222,14 @@ export const Json: Story = {
     }),
     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' });
@@ -213,6 +277,14 @@ export const Yaml: Story = {
     }),
     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' });
@@ -247,6 +319,14 @@ export const YamlToJson: Story = {
     }),
     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' });
@@ -281,6 +361,14 @@ export const NativeToYaml: Story = {
     },
     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' });

package/src/components/form/fields/radio-group/RadioGroup.stories.tsx

@@ -42,6 +42,14 @@ export const Default: Story = {
       { label: 'Python', value: 'Python', 'aria-label': 'Python' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the RadioGroup field with three language options and "Qore" pre-selected. Clicking a different option fires onChange with the new value.',
+      },
+    },
+  },
   async play({ canvasElement, args }) {
     const canvas = within(canvasElement);
     const java = canvas.getByLabelText('Java');
@@ -59,6 +67,14 @@ export const WithImages: Story = {
       { label: 'Python', value: 'Python', image: python },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the RadioGroup field with three language options — each option displays its language logo alongside the label.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     await expect(canvasElement.querySelector(`img[src="${qore}"]`)).toBeInTheDocument();
     await expect(canvasElement.querySelector(`img[src="${java}"]`)).toBeInTheDocument();
@@ -68,4 +84,12 @@ export const WithImages: Story = {
 
 export const Disabled: Story = {
   args: { ...Default.args, disabled: true },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the RadioGroup field with three language options but disabled — the group is visible and non-interactive.',
+      },
+    },
+  },
 };

package/src/components/form/fields/rich-text/RichText.stories.tsx

@@ -33,6 +33,14 @@ export const WithValue: Story = {
   args: {
     value: 'Hello world',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the RichText field pre-populated with the plain-string value "Hello world" — the editor mounts with the text rendered as a paragraph.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // Only assert on render — typing assertions would need waitFor due to debounce
@@ -42,6 +50,13 @@ export const WithValue: Story = {
 };
 
 export const Empty: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Renders the RichText field with no value — the editor mounts empty.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(canvas.getByRole('textbox')).toBeInTheDocument();
@@ -52,6 +67,14 @@ export const WithSlateValue: Story = {
   args: {
     value: [{ type: 'paragraph', children: [{ text: 'Rich text with Slate format' }] }],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the RichText field pre-populated with a Slate document rather than a plain string — the editor mounts with the paragraph node rendered as text.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(canvas.getByRole('textbox')).toBeInTheDocument();

package/src/components/form/fields/schema-definition/SchemaDefinitionField.stories.tsx

@@ -40,6 +40,14 @@ type Story = StoryObj<typeof meta>;
 /** Empty definition — the catalogue drives the full tab set. */
 export const Empty: Story = {
   args: {},
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SchemaDefinition editor with no existing value — the Schema, Tables, Sequences and Migrations tabs mount straight from the catalogue.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // Tabs come straight from the catalogue's `definition` sections.
@@ -59,6 +67,14 @@ export const Starter: Story = {
   args: {
     value: starterDefinition,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SchemaDefinition editor seeded with the "example_schema" starter template — the Schema tab shows the single scaffolded table.',
+      },
+    },
+  },
 };
 
 /** A realistic populated schema — two tables, sequence, reference data, migrations. */
@@ -66,6 +82,14 @@ export const Populated: Story = {
   args: {
     value: mockPopulatedDefinition,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SchemaDefinition editor with the populated fixture. Opening the Tables tab shows the customers and addresses tables.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // Open the Tables tab → the two table panels render from the value.
@@ -81,6 +105,14 @@ export const ReadOnly: Story = {
     value: mockPopulatedDefinition,
     readOnly: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SchemaDefinition editor with readOnly enabled — every input becomes a typeset display row and no inputs, textareas or selects are rendered.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(await canvas.findByText('Schema')).toBeInTheDocument();
@@ -94,6 +126,14 @@ export const CatalogError: Story = {
   args: {
     catalogError: 'Schema options are unavailable on this server.',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SchemaDefinition editor when the catalogue fetch fails — a "Could not load schema options" callout replaces the form.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(await canvas.findByText('Could not load schema options')).toBeInTheDocument();
@@ -106,6 +146,14 @@ export const CatalogError: Story = {
  * wired. `catalogOverride` rides in via `fieldProps`.
  */
 export const ViaFormField: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SchemaDefinition editor through the FormField dispatcher (type="schema-definition"). The catalogue is injected via fieldProps and the Schema and Tables tabs mount as usual.',
+      },
+    },
+  },
   render: () => {
     const [value, setValue] = useState<IDataSchemaDefinition | undefined>(mockPopulatedDefinition);
     return (
@@ -132,6 +180,14 @@ export const ViaFormField: Story = {
  * → FormField → SchemaDefinitionEditor).
  */
 export const ViaFormEngineUiType: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a FormEngine schema whose "definition" option declares ui_type: schema-definition — FormEngine flows through TemplateField and FormField and mounts the schema editor with the injected catalogue.',
+      },
+    },
+  },
   render: () => {
     const [value, setValue] = useState<any>({
       definition: { type: 'hash', value: mockPopulatedDefinition },
@@ -177,6 +233,14 @@ export const Sandboxed: Story = {
     wrapperName: 'example_customer_addresses',
     value: mockPopulatedDefinition,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SchemaDefinition editor for an untrusted (sandboxed) caller using the sandboxed catalogue — the Advanced tab and every trusted-only section are hidden.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(await canvas.findByText('Migrations')).toBeInTheDocument();
@@ -195,6 +259,14 @@ export const WithValidationBanner: Story = {
     wrapperName: 'renamed_schema',
     value: mockPopulatedDefinition,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SchemaDefinition editor when the wrapper interface name and the DataSchema name differ — the "name does not match" banner is shown, and clicking "Sync name" resolves the mismatch.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     // The banner renders the mismatch both as its title and its body text.