@qoretechnologies/reqraft 0.10.10 → 0.10.11

package/src/components/form/fields/select/Select.stories.tsx

@@ -35,6 +35,14 @@ export const Items: Story = {
       { display_name: 'Item 2', value: 'item2' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with two simple items and no value. Clicking the trigger opens the popover with the item list.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await fireEvent.click(canvas.getByRole('button'));
@@ -45,6 +53,14 @@ export const Items: Story = {
 };
 
 export const ItemsWithDescription: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with twenty items, each carrying a description, icon or image. Opening the picker mounts a modal collection with all twenty entries.',
+      },
+    },
+  },
   args: {
     items: [
       { display_name: 'Item 1', desc: 'This is item 1', value: 'item1', icon: 'MoneyEuroCircleFill', groups: ['Miscellaneous'] },
@@ -81,6 +97,14 @@ export const ItemsWithDescription: Story = {
 };
 
 export const ItemsWithDescriptionAndMessages: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with two items that carry inline messages of different intents. The picker modal shows the messages beneath each item.',
+      },
+    },
+  },
   args: {
     items: [
       {
@@ -121,6 +145,14 @@ export const DisabledItemsWithIntent: Story = {
       { display_name: 'Disabled Item with Intent', intent: 'danger', disabled: true, value: 'item5' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with a mix of enabled, disabled and intent-tagged items — the disabled entries are non-interactive while success/danger items carry their intent styling.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await fireEvent.click(canvas.getByRole('button'));
@@ -138,6 +170,14 @@ export const DisabledItemsWithIntentAndDescriptions: Story = {
       { display_name: 'Disabled Item with Intent', intent: 'danger', disabled: true, short_desc: 'This is item 5', value: 'item5' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with five items mixing intents, descriptions and disabled states — the picker modal shows all five so their combined presentation can be reviewed.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await fireEvent.click(canvas.getByRole('button'));
@@ -157,6 +197,14 @@ export const WithValue: Story = {
       { display_name: 'Item 2', value: 'item2' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with two items and item2 pre-selected — the trigger shows the selected label and clicking it opens the popover.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await expect(canvas.getByRole('button')).toBeInTheDocument();
@@ -173,6 +221,14 @@ export const WithValueAndErrors: Story = {
       { display_name: 'Item 2', desc: 'This is item 1', value: 'item2', image: 'https://avatars.githubusercontent.com/u/8861481?v=4' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with a danger-intent item in the list, but the selected value points at the healthy item — the trigger stays clean while the picker highlights the danger item.',
+      },
+    },
+  },
 };
 
 export const WithValueAndErrorsSelected: Story = {
@@ -183,6 +239,14 @@ export const WithValueAndErrorsSelected: Story = {
       { display_name: 'Item 2', desc: 'This is item 1', value: 'item2' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with the danger-intent item pre-selected — the trigger carries the danger styling so the operator can see the selected item has an error.',
+      },
+    },
+  },
 };
 
 export const WithValueAndWarningsSelected: Story = {
@@ -193,6 +257,14 @@ export const WithValueAndWarningsSelected: Story = {
       { display_name: 'Item 2', desc: 'This is item 1', value: 'item2' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with a pre-selected item whose metadata declares needs_auth — the trigger surfaces the warning so the operator knows the item needs configuration.',
+      },
+    },
+  },
 };
 
 export const AutoSelect: Story = {
@@ -200,6 +272,14 @@ export const AutoSelect: Story = {
     autoSelect: true,
     items: [{ display_name: 'Item 1', value: 'item1' }],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with autoSelect and a single item — the field auto-selects the only option and the trigger shows its label on mount.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await waitFor(() => expect(canvas.getByText('Item 1')).toBeInTheDocument(), { timeout: 500 });
@@ -211,6 +291,14 @@ export const AutoSelectWithShortDescriptions: Story = {
     autoSelect: true,
     items: [{ display_name: 'Item 1', short_desc: 'Short item 1 description', value: 'item1' }],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with autoSelect and a single item that carries a short description — the field auto-selects and the trigger shows both the label and the short description.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await waitFor(() => expect(canvas.getByText('Item 1')).toBeInTheDocument(), { timeout: 500 });
@@ -222,6 +310,14 @@ export const AutoSelectWithDescriptions: Story = {
     autoSelect: true,
     items: [{ display_name: 'Item 1', desc: 'This is item 1', value: 'item1' }],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with autoSelect and a single item that carries a full description — the field auto-selects and the trigger shows the label with the description.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await waitFor(() => expect(canvas.getByText('Item 1')).toBeInTheDocument(), { timeout: 500 });
@@ -240,6 +336,14 @@ export const ItemValuesAreObjectsAndCanBeSelected: Story = {
       },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Select field with items whose values are hashes rather than primitives. The unlabelled first item shows its JSON as the trigger label; picking the second item swaps the selection to its display_name.',
+      },
+    },
+  },
   async play({ canvasElement }) {
     const canvas = within(canvasElement);
     await waitFor(

package/src/components/form/fields/string/String.stories.tsx

@@ -38,6 +38,14 @@ export const Default: Story = {
   args: {
     value: 'Qore',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the String field pre-populated with "Qore". Clicking clear empties the input and fires onClearClick; typing new text updates the value and fires onChange.',
+      },
+    },
+  },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
     const input = canvas.getByLabelText('Name');
@@ -60,6 +68,14 @@ export const Sensitive: Story = {
     sensitive: true,
     value: 'password',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the String field in sensitive mode — the input renders as type="password" so the value is masked.',
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const input = canvas.getByLabelText('Name');

package/src/components/form/fields/template/TemplateField.stories.tsx

@@ -209,6 +209,14 @@ export const StringComponent: StoryObj<typeof meta> = {
     value: 'Some string',
     type: 'string',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField wrapping a LongString component with a plain string value — the field shows the literal string in a textarea, no template selected.',
+      },
+    },
+  },
 };
 
 export const BooleanComponent: StoryObj<typeof meta> = {
@@ -218,6 +226,14 @@ export const BooleanComponent: StoryObj<typeof meta> = {
     allowTemplates: true,
     componentFromType: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for a boolean value with templates allowed — the boolean toggle is shown with the template toggle available on the side.',
+      },
+    },
+  },
 };
 
 export const NumberComponent: StoryObj<typeof meta> = {
@@ -227,6 +243,14 @@ export const NumberComponent: StoryObj<typeof meta> = {
     allowTemplates: true,
     componentFromType: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for an int value of 25 with templates allowed — the numeric input is shown alongside the template toggle.',
+      },
+    },
+  },
 };
 
 export const AutoComponent: StoryObj<typeof meta> = {
@@ -235,6 +259,14 @@ export const AutoComponent: StoryObj<typeof meta> = {
     allowTemplates: true,
     component: auto,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField wrapping the AutoFormField dispatcher — the operator can pick a type from the auto picker or switch to a template value.',
+      },
+    },
+  },
 };
 
 export const AllowedValuesWithTemplate: StoryObj<typeof meta> = {
@@ -249,6 +281,14 @@ export const AllowedValuesWithTemplate: StoryObj<typeof meta> = {
     ],
     component: auto,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField restricted to a single allowed value ("Test") but with templates also allowed — the operator can pick the allowed value or switch to a template.',
+      },
+    },
+  },
 };
 
 export const TemplateValue: StoryObj<typeof meta> = {
@@ -257,6 +297,14 @@ export const TemplateValue: StoryObj<typeof meta> = {
     type: 'int',
     value: '$local:id',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for an int wrapped over the Number component with a template value ($local:id) — the template selector replaces the number input.',
+      },
+    },
+  },
 };
 
 export const ElementTypeInListShowsCorrectTemplates: StoryObj<typeof meta> = {
@@ -271,6 +319,14 @@ export const ElementTypeInListShowsCorrectTemplates: StoryObj<typeof meta> = {
       { type: 'number', value: 3 },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField in list mode with three number items. Adding a new item and opening the templates popover shows the templates that resolve to the number element type.',
+      },
+    },
+  },
   play: async () => {
     await _testsClickButton({ label: 'Add new item for "Test"' });
     await _testsOpenTemplates();
@@ -280,6 +336,14 @@ export const ElementTypeInListShowsCorrectTemplates: StoryObj<typeof meta> = {
 
 export const ShowsTemplatesList: StoryObj<typeof meta> = {
   ...TemplateValue,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField with the $local:id template value, then opens the templates popover — the operator sees the available templates that resolve to an int.',
+      },
+    },
+  },
   play: async () => {
     await _testsOpenTemplates();
   },
@@ -287,6 +351,14 @@ export const ShowsTemplatesList: StoryObj<typeof meta> = {
 
 export const ShowsTemplatesListForString: StoryObj<typeof meta> = {
   ...StringComponent,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField over a LongString component with a plain string value, then opens the templates popover — the templates list is shown for a string target type.',
+      },
+    },
+  },
   play: async () => {
     await _testsOpenTemplates();
   },
@@ -294,6 +366,14 @@ export const ShowsTemplatesListForString: StoryObj<typeof meta> = {
 
 export const ShowsTemplatesListForBoolean: StoryObj<typeof meta> = {
   ...BooleanComponent,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for a boolean value, switches to template mode and opens the templates popover — the templates list is shown for a boolean target type.',
+      },
+    },
+  },
   play: async () => {
     await _testsSetTemplate();
     await _testsOpenTemplates();
@@ -302,6 +382,14 @@ export const ShowsTemplatesListForBoolean: StoryObj<typeof meta> = {
 
 export const ShowsTemplatesListForNumber: StoryObj<typeof meta> = {
   ...NumberComponent,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for an int value, then opens the templates popover — the templates list is shown for an int target type.',
+      },
+    },
+  },
   play: async () => {
     await _testsOpenTemplates();
   },
@@ -314,6 +402,14 @@ export const TemplateValueCanBeRemoved: StoryObj<typeof meta> = {
     allowTemplates: true,
     componentFromType: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField holding a $config:boolean template value. Clicking the template-remove action clears the template and the underlying boolean checkbox is shown instead.',
+      },
+    },
+  },
   play: async () => {
     await expect(document.querySelector('.template-selector')).toBeInTheDocument();
 
@@ -333,6 +429,14 @@ export const TemplateWithFunctions: StoryObj<typeof meta> = {
     fluid: false,
     expressions: storyExpressions as any,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField with allowFunctions enabled — the template menu now exposes a "Use Expression" entry alongside the plain templates.',
+      },
+    },
+  },
   play: async () => {
     await _testsOpenTemplateMenu();
     await _testsWaitForText('Use Expression');
@@ -358,6 +462,14 @@ export const TemplateWithFunctionValue: StoryObj<typeof meta> = {
     fluid: false,
     expressions: storyExpressions as any,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField holding a substr function value with three arguments — the expression builder shows the function name and each argument slot.',
+      },
+    },
+  },
 };
 
 export const TemplateWithNestedFunctionValue: StoryObj<typeof meta> = {
@@ -389,6 +501,14 @@ export const TemplateWithNestedFunctionValue: StoryObj<typeof meta> = {
     fluid: false,
     expressions: storyExpressions as any,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField holding a substr function whose second argument is itself a PLUS-INT expression — the expression builder shows the nested function inline within the outer call.',
+      },
+    },
+  },
 };
 
 export const TemplateCanBeSelected: StoryObj<typeof meta> = {
@@ -397,6 +517,14 @@ export const TemplateCanBeSelected: StoryObj<typeof meta> = {
     defaultType: 'string',
     defaultInternalType: 'string',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for a string, opens the templates popover and clicks the Interface ID template — the field switches to the $local:id template value.',
+      },
+    },
+  },
   play: async ({ canvasElement, ...rest }) => {
     const canvas = within(canvasElement);
 
@@ -410,6 +538,14 @@ export const TemplateCanBeSelected: StoryObj<typeof meta> = {
 };
 
 export const ValueIsResetWhenChangingToCustom: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField over a number type holding a $config:something template value. Clicking template-remove resets the value to undefined and fires onChange with the cleared value.',
+      },
+    },
+  },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
@@ -449,6 +585,14 @@ export const TemplatesWithMultipleLevels: StoryObj<typeof meta> = {
     type: 'string',
     templates: buildTemplates(multiLevelTemplates as any),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for a string with a hierarchical template catalogue. Drilling into "Testing Hash" narrows the list to templates that resolve to a string (Testing Int Item is filtered out).',
+      },
+    },
+  },
   play: async () => {
     await _testsOpenTemplates();
     await _testsClickButton({ label: 'Testing Hash' });
@@ -458,6 +602,14 @@ export const TemplatesWithMultipleLevels: StoryObj<typeof meta> = {
 };
 
 export const TemplatesWithMultipleLevelsAndHashField: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for a hash type with a hierarchical template catalogue — switching to template mode and opening the popover exposes the nested template groups.',
+      },
+    },
+  },
   render: (args) => {
     const [value, setValue] = useState(args.value);
 
@@ -486,6 +638,14 @@ export const TemplatesWithMultipleLevelsAndHashField: StoryObj<typeof meta> = {
 
 export const TemplateWithItemsCanBeSelected: StoryObj<typeof meta> = {
   ...TemplatesWithMultipleLevelsAndHashField,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders TemplateField for a hash type with a hierarchical catalogue. Selecting an item from a nested group updates the template value to the picked entry (Testing Hash).',
+      },
+    },
+  },
   play: async (args) => {
     await TemplatesWithMultipleLevelsAndHashField.play(args);
     await _testsClickButton({ selector: '.reqore-menu-item-left-action' });

package/src/components/form/fields/url/Url.stories.tsx

@@ -30,6 +30,14 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Url field with no value. Typing into the address input recomposes the URL and fires onChange after the debounce; because no protocol is selected, the composed value keeps a bare "://" prefix.',
+      },
+    },
+  },
   play: async ({ canvasElement, args }) => {
     const canvas = within(canvasElement);
     const input = canvas.getByLabelText('URL address');
@@ -49,6 +57,14 @@ export const WithValue: Story = {
   args: {
     value: 'https://example.com',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Url field pre-populated with "https://example.com" — the URL is split across the https protocol selector and the example.com address input.',
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     await expect(await canvas.findByDisplayValue('example.com')).toBeInTheDocument();
@@ -60,6 +76,14 @@ export const KeepsSeparatorInsideAddress: Story = {
   args: {
     value: 'https://proxy/forward?to=http://inner',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the Url field with a URL whose query-string embeds a second "://". The protocol split only consumes the leading separator; the inner "://" survives inside the address input.',
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     // `://` inside the address survives the protocol/address split.