@qoretechnologies/reqraft 0.10.9 → 0.10.11

package/src/components/log/Log.stories.tsx

@@ -93,6 +93,14 @@ export default meta;
 export type Story = StoryObj<typeof meta>;
 
 export const Basic: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog wired to a mock WebSocket that emits a stream of test log lines — the messages accumulate in the log panel as they arrive.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('This is a message with a link: https://www.qoretechnologies.com');
   },
@@ -103,6 +111,14 @@ export const Filterable: Story = {
   args: {
     filterable: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog with the filter input enabled. Typing "error" narrows the visible list to the single ERROR message.',
+      },
+    },
+  },
   play: async (args) => {
     await Basic.play(args);
     await fireEvent.change(document.querySelector('.reqore-input'), { target: { value: 'error' } });
@@ -115,6 +131,14 @@ export const WithTimestamps: Story = {
   args: {
     showTimestamps: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog with per-message timestamps enabled — each streamed line is prefixed with its arrival time.',
+      },
+    },
+  },
 };
 
 export const WithDefaultMessages: Story = {
@@ -126,6 +150,14 @@ export const WithDefaultMessages: Story = {
       { message: 'This is another default message', timestamp: '08:00:00.000' },
     ],
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog seeded with two default messages — those lines appear before any messages arrive from the socket.',
+      },
+    },
+  },
 };
 
 export const WithCopyableMessages: Story = {
@@ -133,6 +165,14 @@ export const WithCopyableMessages: Story = {
   args: {
     allowMessageCopy: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog with allowMessageCopy — each message row exposes a copy action next to its content.',
+      },
+    },
+  },
   play: async (args) => {
     await Basic.play(args);
   },
@@ -144,6 +184,14 @@ export const WithDeletableMessages: Story = {
     allowMessageCopy: true,
     allowMessageDeletion: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog with copy and delete actions on every message. Clicking a message\'s delete action removes just that row from the log.',
+      },
+    },
+  },
   play: async (args) => {
     await Basic.play(args);
     await testsClickButton({ selector: '.reqraft-log-delete-message', nth: 4 });
@@ -155,6 +203,14 @@ export const Pause: Story = {
   args: {
     allowMessageDeletion: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog while messages stream in. Clicking the pause/resume action halts appending new messages until it is clicked again.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('This is another message');
     await testsClickButton({ selector: '.reqraft-log-pause-resume' });
@@ -166,6 +222,14 @@ export const Clear: Story = {
   args: {
     allowMessageDeletion: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog with messages streamed in. Clicking the clear action empties the log and the "No messages" empty state is shown.',
+      },
+    },
+  },
   play: async (args) => {
     await Basic.play(args);
     await testsClickButton({ selector: '.reqraft-log-clear' });
@@ -192,6 +256,14 @@ export const FormattedMessages: Story = {
       return { message, ...rest };
     },
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog with a messageFormatter that assigns intents by content — WARNING lines colour warning, ERROR lines danger and ALL-CAPS lines info.',
+      },
+    },
+  },
   play: async (args) => {
     await Basic.play(args);
   },
@@ -203,6 +275,14 @@ export const CanSendMessages: Story = {
     canSendMessages: true,
     showTimestamps: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog with canSendMessages — an input at the bottom lets the operator send a message back through the socket alongside the incoming stream.',
+      },
+    },
+  },
   play: async (args) => {
     await Basic.play(args);
   },
@@ -214,6 +294,14 @@ export const WithAutoScroll: Story = {
     autoScroll: true,
     style: { height: '200px' },
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog with autoScroll in a fixed 200px viewport — the log stays pinned to the newest message as new lines arrive.',
+      },
+    },
+  },
   play: async (args) => {
     await Basic.play(args);
   },
@@ -225,6 +313,14 @@ export const WithAutoScrollAndManualScroll: Story = {
     autoScroll: true,
     style: { height: '200px' },
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftLog with autoScroll while the operator scrolls the panel manually — auto-scroll pauses so the operator can inspect older messages without being yanked back to the tail.',
+      },
+    },
+  },
   play: async (args) => {
     await WithAutoScroll.play(args);
     await sleep(3000);

package/src/components/menu/Menu.stories.tsx

@@ -27,6 +27,14 @@ export const Basic: Story = {
   args: {
     menu: typedMenu,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with the mock Qorus navigation — sections and items appear in the sidebar with no active path highlighted.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
   },
@@ -36,6 +44,14 @@ export const ActivePath: Story = {
     path: '/Interfaces/mapper',
     menu: typedMenu,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with the /Interfaces/mapper path — the matching menu entry is highlighted as active.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
   },
@@ -47,6 +63,14 @@ export const ActiveMenuItemIntent: Story = {
     menu: typedMenu,
     activeItemIntent: 'success',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with the /Interfaces/mapper path and a "success" activeItemIntent — the active entry uses the success intent for its highlight colour.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
   },
@@ -57,6 +81,14 @@ export const WithDefaultQuery: Story = {
     menu: typedMenu,
     defaultQuery: 'mapper',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with a defaultQuery of "mapper" — the search input is pre-filled and the visible items are narrowed to those matching the query.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
     await expect(document.querySelector('.reqore-input')).toHaveValue('mapper');
@@ -69,6 +101,14 @@ export const Filtered: Story = {
     menu: typedMenu,
     onQueryChange: fn(),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with an onQueryChange handler. Typing "step" into the search filter narrows the visible items to just the matching entries.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
     await fireEvent.change(document.querySelector('.reqore-input'), { target: { value: 'step' } });
@@ -82,6 +122,12 @@ export const Filtered: Story = {
 export const WidthFromStorage: Story = {
   ...ActivePath,
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu backed by user storage that already holds a persisted width — the menu mounts at the stored width rather than the default.',
+      },
+    },
     mockData: [...storiesStorageMock],
   },
 };
@@ -93,6 +139,14 @@ export const WithCustomChildren: Story = {
     topChildren: <div style={{ padding: 10 }}>Top Custom Child</div>,
     bottomChildren: <div style={{ padding: 10 }}>Bottom Custom Child</div>,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders ReqraftMenu with topChildren and bottomChildren slots — custom nodes appear above and below the menu list.',
+      },
+    },
+  },
   play: async () => {
     await testsWaitForText('Interfaces & More');
     await testsWaitForText('Top Custom Child');

package/src/components/qonsoleSmartInput/QonsoleSmartInput.stories.tsx

@@ -398,6 +398,14 @@ export const BasicMock: Story = {
   args: {
     initialValue: '/list services ',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the QonsoleSmartInput against a mocked Qonsole LSP. Typing "-" after "/list services " opens the flag dropdown with --desc, --limit and --search; pressing Enter accepts the first item without producing a stray double dash.',
+      },
+    },
+  },
   async beforeEach() {
     const server = setupBasicQonsoleMockServer();
     return () => server.close();
@@ -509,6 +517,12 @@ export const LiveQonsoleWithContext: Story = {
   },
   parameters: {
     chromatic: { disable: true },
+    docs: {
+      description: {
+        story:
+          'Renders the QonsoleSmartInput against the real Qonsole LSP with a pre-bound "/use services" context — predictive text is scoped to the services resource via the qonsole/setContext call.',
+      },
+    },
   },
 };
 

package/src/components/smartEditor/SmartEditor.stories.tsx

@@ -72,6 +72,14 @@ export const BasicMock: Story = {
     initialValue: '',
     triggerCharacters: new Set([' ', '.']),
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SmartEditor against a mocked LSP server. Typing the "." trigger character sends a completion request and the dropdown mounts with the apple and banana suggestions.',
+      },
+    },
+  },
   async beforeEach() {
     const lsp = createMockLspServer(MOCK_LSP_URL, {
       capabilities: {},
@@ -295,6 +303,14 @@ export const WithDiagnostics: Story = {
     languageId: 'demo',
     initialValue: 'list services in pricing',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SmartEditor against a mocked LSP server that pushes diagnostics on didOpen — the text is decorated with wavy underlines and the stacked message panel below the editor lists both diagnostics.',
+      },
+    },
+  },
   async beforeEach() {
     const lsp = createMockLspServer(MOCK_LSP_URL, {
       capabilities: {},
@@ -342,6 +358,14 @@ export const ReadOnly: Story = {
     initialValue: 'frozen content',
     readOnly: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SmartEditor in read-only mode over an initial value — the Slate editor mounts as contenteditable=false so the content shows but cannot be edited.',
+      },
+    },
+  },
   async beforeEach() {
     const lsp = createMockLspServer(MOCK_LSP_URL, { capabilities: {} });
     return () => lsp.close();
@@ -367,6 +391,14 @@ export const LoadingOverlay: Story = {
     languageId: 'demo',
     initialValue: 'visible under the overlay',
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the SmartEditor against a mock LSP that never finishes initialize — the "Connecting to language server" overlay stays over the editor for the whole session.',
+      },
+    },
+  },
   async beforeEach() {
     const lsp = createMockLspServer(MOCK_LSP_URL, {
       capabilities: {},

package/src/hooks/useFetch/useFetch.stories.tsx

@@ -35,6 +35,12 @@ export const Get: Story = {
     method: 'GET',
   },
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a useFetch demo that issues a GET against /public/info on mount and displays the returned Qorus system info as a tree.',
+      },
+    },
     mockData: [
       {
         // An array of mock objects which will add in every story
@@ -66,6 +72,12 @@ export const Put: Story = {
     method: 'PUT',
   },
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a useFetch demo that issues a PUT against /public/info on mount and displays the returned success status.',
+      },
+    },
     mockData: [
       {
         // An array of mock objects which will add in every story
@@ -88,6 +100,12 @@ export const Post: Story = {
     method: 'POST',
   },
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a useFetch demo that issues a POST against /public/info on mount and displays the returned success status.',
+      },
+    },
     mockData: [
       {
         // An array of mock objects which will add in every story
@@ -110,6 +128,12 @@ export const Del: Story = {
     method: 'DELETE',
   },
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a useFetch demo that issues a DELETE against /public/info on mount and displays the returned success status.',
+      },
+    },
     mockData: [
       {
         // An array of mock objects which will add in every story
@@ -132,6 +156,12 @@ export const Error409: Story = {
     method: 'POST',
   },
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a useFetch demo that issues a POST returning a 409 error — the hook exposes errorData and the Qorus stack trace is rendered in place of the response.',
+      },
+    },
     mockData: [
       {
         // An array of mock objects which will add in every story

package/src/hooks/useStorage/useStorage.stories.tsx

@@ -35,6 +35,12 @@ export const DefaultValue: Story = {
     method: 'GET',
   },
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a useReqraftStorage demo where the server returns no stored value — the hook falls back to the default and displays it.',
+      },
+    },
     mockData: [
       {
         url: 'https://hq.qoretechnologies.com:8092/api/latest/users?action=current',
@@ -51,6 +57,12 @@ export const DefaultValue: Story = {
 
 export const StorageValue: Story = {
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders a useReqraftStorage demo with a value already persisted on the server — the hook loads it and displays it in place of the default.',
+      },
+    },
     mockData: [...storiesStorageMock],
   },
   play: async () => {
@@ -60,6 +72,15 @@ export const StorageValue: Story = {
 
 export const ValueCanBeUpdated: Story = {
   ...StorageValue,
+  parameters: {
+    ...StorageValue.parameters,
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftStorage demo with a stored value. When "Update storage" is clicked, the setter writes a new value and the display refreshes to match.',
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 
@@ -74,6 +95,15 @@ export const ValueCanBeUpdated: Story = {
 
 export const ValueCanBeRemoved: Story = {
   ...StorageValue,
+  parameters: {
+    ...StorageValue.parameters,
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftStorage demo with a stored value. When "Remove value" is clicked, the remover clears storage and the hook falls back to the default value.',
+      },
+    },
+  },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
 

package/src/hooks/useWebSocket/useWebsocket.stories.tsx

@@ -106,8 +106,25 @@ const meta = {
 export default meta;
 export type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftWebSocket demo with no lifecycle options — the socket stays CLOSED until the operator clicks Connect.',
+      },
+    },
+  },
+};
 export const OpenManually: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftWebSocket demo and clicks the Connect action — the socket opens and the onOpen callback fires.',
+      },
+    },
+  },
   play: async ({ args }) => {
     await testsClickButton({ label: 'Connect' });
     await testsWaitForText('Websocket Status: OPEN');
@@ -118,6 +135,14 @@ export const OpenOnMount: Story = {
   args: {
     openOnMount: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftWebSocket demo with openOnMount enabled — the socket opens immediately after mount without any user action.',
+      },
+    },
+  },
   play: async ({ args }) => {
     await testsWaitForText('Websocket Status: OPEN');
     await expect(args.onOpen).toHaveBeenCalled();
@@ -126,6 +151,15 @@ export const OpenOnMount: Story = {
 
 export const CloseManually: Story = {
   ...OpenOnMount,
+  parameters: {
+    ...OpenOnMount.parameters,
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftWebSocket demo opened on mount. When Disconnect is clicked, the socket transitions to CLOSED and the onClose callback fires.',
+      },
+    },
+  },
   play: async ({ args, ...rest }) => {
     await OpenOnMount.play({ args, ...rest });
     await testsClickButton({ label: 'Disconnect' });
@@ -141,6 +175,14 @@ export const Reconnects: Story = {
     maxReconnectTries: 5,
     openOnMount: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftWebSocket demo with reconnect enabled. When the server is killed, the socket transitions to CONNECTING and then back to OPEN once the server returns.',
+      },
+    },
+  },
   play: async ({ args, ...rest }) => {
     await OpenOnMount.play({ args, ...rest });
     await testsClickButton({ label: 'Kill' });
@@ -159,6 +201,12 @@ export const ReconnectFails: Story = {
     reconnectInterval: 500,
   },
   parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftWebSocket demo with a low maxReconnectTries. When the server never returns, the socket exhausts its reconnect attempts and fires onReconnectFailed.',
+      },
+    },
     jest: {
       timeout: 60000,
     },
@@ -178,6 +226,14 @@ export const SendMessage: Story = {
     includeSentMessagesInState: true,
     useState: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftWebSocket demo with useState enabled. When Send is clicked, the message is dispatched and the echoed reply appears in the accumulated message list.',
+      },
+    },
+  },
   play: async ({ args, ...rest }) => {
     await OpenOnMount.play({ args, ...rest });
     await testsClickButton({ label: 'Send' });
@@ -197,6 +253,14 @@ export const WithLogs: Story = {
     useState: true,
     reconnectInterval: 1500,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftWebSocket demo with includeLogMessagesInState. Connect / disconnect / reconnect lifecycle events are captured as log entries alongside regular messages.',
+      },
+    },
+  },
   play: async ({ args, ...rest }) => {
     await Reconnects.play({ args, ...rest });
 
@@ -206,6 +270,15 @@ export const WithLogs: Story = {
 
 export const ClearsMessages: Story = {
   ...SendMessage,
+  parameters: {
+    ...SendMessage.parameters,
+    docs: {
+      description: {
+        story:
+          'Renders the useReqraftWebSocket demo after sending a message. When Clear is clicked, the accumulated message list is emptied.',
+      },
+    },
+  },
   play: async ({ args, ...rest }) => {
     await SendMessage.play({ args, ...rest });
     await testsClickButton({ label: 'Clear' });
@@ -353,6 +426,14 @@ export const MultipleConnections: Story = {
     includeLogMessagesInState: true,
     useState: true,
   },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders three panels that each call useReqraftWebSocket against the same URL — proves the connections share one pooled underlying WebSocket while keeping independent message state.',
+      },
+    },
+  },
   // @ts-expect-error customprops
   render: (args: IUseReqraftWebSocketOptions) => {
     const [conectionStatus, setConnectionStatus] = useState<string>('CLOSED');
@@ -405,6 +486,15 @@ export const MultipleConnectionsOpenOnMount: Story = {
     ...MultipleConnections.args,
     openOnMount: true,
   },
+  parameters: {
+    ...MultipleConnections.parameters,
+    docs: {
+      description: {
+        story:
+          'Renders three pooled useReqraftWebSocket panels with openOnMount — all three transition to OPEN over the shared underlying socket without any user action.',
+      },
+    },
+  },
   play: async ({ args }) => {
     await testsWaitForText('First Connection Status: OPEN');
     await testsWaitForText('Second Connection Status: OPEN');
@@ -420,6 +510,15 @@ export const MultipleConnectionsClosedAtOnce: Story = {
     ...MultipleConnections.args,
     openOnMount: true,
   },
+  parameters: {
+    ...MultipleConnections.parameters,
+    docs: {
+      description: {
+        story:
+          'Renders three pooled useReqraftWebSocket panels. When Close All closes the shared socket, every consumer transitions to CLOSED at once and each panel logs its close handler.',
+      },
+    },
+  },
   play: async (args) => {
     await MultipleConnectionsOpenOnMount.play(args);
 
@@ -436,6 +535,15 @@ export const ConnectionIsClosedWhenAllUsersAreClosed: Story = {
     ...MultipleConnections.args,
     openOnMount: true,
   },
+  parameters: {
+    ...MultipleConnections.parameters,
+    docs: {
+      description: {
+        story:
+          'Renders three pooled useReqraftWebSocket panels. Closing them one by one keeps the shared socket OPEN until the last consumer unmounts, then it closes.',
+      },
+    },
+  },
   play: async (args) => {
     await MultipleConnectionsOpenOnMount.play(args);
 
@@ -454,6 +562,15 @@ export const MultipleConnectionsHaveCustomHandlers: Story = {
     ...MultipleConnections.args,
     openOnMount: true,
   },
+  parameters: {
+    ...MultipleConnections.parameters,
+    docs: {
+      description: {
+        story:
+          'Renders three pooled useReqraftWebSocket panels. Each panel attaches its own message handler, and sending a message triggers the handlers of only the connections still open.',
+      },
+    },
+  },
   play: async (args) => {
     const canvas = within(args.canvasElement);
 
@@ -480,6 +597,15 @@ export const MultipleConnectionsHaveCustomHandlers: Story = {
 
 export const MultipleConnectionsCanBeDisconnectedAndReconnected: Story = {
   ...MultipleConnectionsHaveCustomHandlers,
+  parameters: {
+    ...MultipleConnectionsHaveCustomHandlers.parameters,
+    docs: {
+      description: {
+        story:
+          'Renders three pooled useReqraftWebSocket panels after custom handlers have fired. Disconnecting one and reconnecting another proves individual consumers can toggle without disturbing peers.',
+      },
+    },
+  },
   play: async (args) => {
     await MultipleConnectionsHaveCustomHandlers.play(args);