@qoretechnologies/reqraft 0.10.25 → 0.10.26

package/dist/providers/StorageProvider.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ReqraftUserProvider = void 0;
+exports.ReqraftUserProvider = exports.applyStorageWrite = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var lodash_1 = require("lodash");
 var react_1 = require("react");
@@ -9,6 +9,19 @@ var StorageContext_1 = require("../contexts/StorageContext");
 var useFetch_1 = require("../hooks/useFetch/useFetch");
 var useReqraftProperty_1 = require("../hooks/useReqraftProperty");
 var currentUser_1 = require("../stores/currentUser/currentUser");
+/**
+ * Apply a single path write onto the current storage blob, seeding a fresh object
+ * when the user has no storage yet.
+ *
+ * `?? {}` is load-bearing: a user who has never written storage has
+ * `storage === undefined | null`, and `set(cloneDeep(undefined), …)` returns
+ * `undefined` (lodash won't set on a nullish target). Without the seed the FIRST
+ * write for such a user — e.g. accepting the cookie-consent banner — persists an
+ * empty body and silently drops the value, so the flag stays unset forever and
+ * the banner never closes. Exported for testing.
+ */
+var applyStorageWrite = function (storage, path, value) { var _a; return (0, lodash_1.set)((_a = (0, lodash_1.cloneDeep)(storage)) !== null && _a !== void 0 ? _a : {}, path, value); };
+exports.applyStorageWrite = applyStorageWrite;
 var ReqraftUserProvider = function (_a) {
     var children = _a.children, waitForStorage = _a.waitForStorage;
     var appName = (0, useReqraftProperty_1.useReqraftProperty)('appName');
@@ -28,19 +41,30 @@ var ReqraftUserProvider = function (_a) {
         return (_a = (0, lodash_1.get)(currentUser === null || currentUser === void 0 ? void 0 : currentUser.storage, _path)) !== null && _a !== void 0 ? _a : defaultValue;
     }, [appName, currentUser === null || currentUser === void 0 ? void 0 : currentUser.storage]);
     var updateStorage = (0, react_1.useCallback)(function (path, value, includeAppPrefix) {
+        var _a;
         if (includeAppPrefix === void 0) { includeAppPrefix = true; }
         var _path = includeAppPrefix ? "".concat(appName, ".").concat(path) : path;
-        var updatedStorage = (0, lodash_1.set)((0, lodash_1.cloneDeep)(currentUser === null || currentUser === void 0 ? void 0 : currentUser.storage), _path, value);
+        // Base the write on the LATEST storage read straight from the store, not
+        // the blob captured in this callback's closure. A caller holding a stale
+        // updater — e.g. an imperative store subscription created on mount, before
+        // other keys had loaded — would otherwise persist an out-of-date blob and
+        // wipe every key written to storage since its closure was captured.
+        var latestStorage = (_a = currentUser_1.currentUserStore.getState().currentUser) === null || _a === void 0 ? void 0 : _a.storage;
+        var updatedStorage = (0, exports.applyStorageWrite)(latestStorage, _path, value);
         updateCurrentUserStorage(updatedStorage);
         load({ body: { storage: updatedStorage } });
-    }, [appName, currentUser === null || currentUser === void 0 ? void 0 : currentUser.storage, load, updateCurrentUserStorage]);
+    }, [appName, load, updateCurrentUserStorage]);
     var removeStorageValue = (0, react_1.useCallback)(function (path, includeAppPrefix) {
+        var _a;
         if (includeAppPrefix === void 0) { includeAppPrefix = true; }
         var _path = includeAppPrefix ? "".concat(appName, ".").concat(path) : path;
-        var updatedStorage = (0, lodash_1.set)((0, lodash_1.cloneDeep)(currentUser === null || currentUser === void 0 ? void 0 : currentUser.storage), _path, null);
+        // Same as `updateStorage`: mutate the LATEST blob (never a stale closure
+        // copy), seeding a fresh object when there's no storage yet.
+        var latestStorage = (_a = currentUser_1.currentUserStore.getState().currentUser) === null || _a === void 0 ? void 0 : _a.storage;
+        var updatedStorage = (0, exports.applyStorageWrite)(latestStorage, _path, null);
         updateCurrentUserStorage(updatedStorage);
         load({ body: { storage_path: _path } });
-    }, [appName, currentUser === null || currentUser === void 0 ? void 0 : currentUser.storage, load, updateCurrentUserStorage]);
+    }, [appName, load, updateCurrentUserStorage]);
     var contextValue = (0, react_1.useMemo)(function () { return ({ storage: currentUser === null || currentUser === void 0 ? void 0 : currentUser.storage, getStorage: getStorage, updateStorage: updateStorage, removeStorageValue: removeStorageValue }); }, [currentUser === null || currentUser === void 0 ? void 0 : currentUser.storage, getStorage, updateStorage, removeStorageValue]);
     if (loading && waitForStorage) {
         return null;

package/dist/providers/StorageProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"StorageProvider.js","sourceRoot":"","sources":["../../src/providers/StorageProvider.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"StorageProvider.js","sourceRoot":"","sources":["../../src/providers/StorageProvider.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.10.25",
+  "version": "0.10.26",
   "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",
@@ -20,6 +20,7 @@
     "storybook": "storybook dev -p 6008",
     "update-reqore": "yarn add -D @qoretechnologies/reqore@beta",
     "update-qlip": "yarn add @qoretechnologies/qlip@beta --dev",
+    "update-toolkit": "yarn add @qoretechnologies/ts-toolkit@beta",
     "install-playwright": "npx playwright@latest install --with-deps",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic",
@@ -54,8 +55,8 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
     "@netsells/storybook-mockdate": "^0.3.3",
-    "@qoretechnologies/qlip": "^0.1.3-beta.20260622084321",
-    "@qoretechnologies/reqore": "^0.69.4",
+    "@qoretechnologies/qlip": "^0.1.3-beta.20260724071501",
+    "@qoretechnologies/reqore": "^0.71.16",
     "@storybook/addon-docs": "^10.4.6",
     "@storybook/addon-links": "^10.4.6",
     "@storybook/addon-vitest": "^10.4.6",
@@ -98,12 +99,12 @@
     "vitest": "^4.1.8"
   },
   "peerDependencies": {
-    "@qoretechnologies/reqore": ">=0.68.5",
+    "@qoretechnologies/reqore": ">=0.71.16",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@qoretechnologies/ts-toolkit": "^0.5.78",
+    "@qoretechnologies/ts-toolkit": "^0.5.80",
     "@tanstack/react-query": "4",
     "classnames": "^2.2.6",
     "cron-validator": "^1.4.0",

package/src/components/FocusedEditing/index.tsx

@@ -2,7 +2,22 @@ import { IReqoreModalProps, ReqoreModal } from '@qoretechnologies/reqore/dist/co
 import { memo, useCallback, useEffect, useState } from 'react';
 
 export const FocusedEditing = memo(
-  ({ children, isFullscreen, ...rest }: IReqoreModalProps & { isFullscreen?: boolean }) => {
+  ({
+    children,
+    isFullscreen,
+    modalOnly,
+    ...rest
+  }: IReqoreModalProps & {
+    isFullscreen?: boolean;
+    /**
+     * Render ONLY the modal, not the in-place copy of `children`. For call
+     * sites that already render the field themselves and just need the focused
+     * overlay on top — e.g. the compact row's inline editor, which lives in the
+     * row grid and must stay there. Default (`false`) renders children in place
+     * as well, which is what the classic and card layouts wrap themselves in.
+     */
+    modalOnly?: boolean;
+  }) => {
     const [_isFullscreen, setIsFullscreen] = useState(isFullscreen);
 
     const handleFullscreenToggle = useCallback(() => {
@@ -28,7 +43,7 @@ export const FocusedEditing = memo(
             {children}
           </ReqoreModal>
         )}
-        {children}
+        {modalOnly ? null : children}
       </>
     );
   }

package/src/components/composer/Composer.stories.tsx

@@ -0,0 +1,238 @@
+import { ReqoreButton, ReqoreTag, ReqoreUIProvider } from '@qoretechnologies/reqore';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
+import { StoryMeta } from '../../types';
+import { Composer } from './Composer';
+
+const meta = {
+  component: Composer,
+  title: 'Components/Composer',
+  args: {
+    onSend: fn(),
+  },
+} as StoryMeta<typeof Composer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * The default: the rich, Qonsole-style editor (`ReqoreRichTextEditor`). It renders
+ * a Slate contenteditable (not a `<textarea>`), an attach button, and Send.
+ */
+export const Rich: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the default rich editor — a Slate contenteditable (not a textarea) with an attach button and Send, seeded with a multi-line draft.',
+      },
+    },
+  },
+  args: {
+    placeholder: 'Write a message…',
+    defaultText: 'A rich, multi-line draft.\nSecond paragraph survives as a newline.',
+  },
+  async play({ canvasElement }) {
+    await expect(canvasElement.querySelector('[contenteditable="true"]')).not.toBeNull();
+    await expect(canvasElement.querySelector('textarea')).toBeNull();
+    await expect(within(canvasElement).getByText('Send')).toBeInTheDocument();
+  },
+};
+
+/**
+ * The `plain` variant — a `ReqoreTextarea`, used where a simple text field is
+ * enough (and for deterministic tests). Typing enables Send; clicking it calls
+ * `onSend` with the plain body and the staged files.
+ */
+export const Plain: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the plain textarea variant, where typing enables Send and clicking it calls onSend with the plain body and the staged files.',
+      },
+    },
+  },
+  args: { editor: 'plain' },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+    const textarea = canvasElement.querySelector('textarea');
+    await expect(textarea).not.toBeNull();
+
+    await userEvent.type(textarea!, 'hello there');
+    await userEvent.click(canvas.getByText('Send'));
+    await waitFor(() =>
+      expect(args.onSend).toHaveBeenCalledWith(
+        'hello there',
+        expect.objectContaining({ files: [] })
+      )
+    );
+  },
+};
+
+/**
+ * Multiple `sendActions` split the send button — a primary button plus a caret
+ * dropdown. The primary is the first action; its `id` is echoed back to `onSend`.
+ */
+export const SplitSend: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the composer with multiple sendActions, splitting Send into a primary Publish button plus a caret dropdown — sending echoes the chosen action's id back to onSend.",
+      },
+    },
+  },
+  args: {
+    editor: 'plain',
+    sendActions: [
+      { id: 'publish', label: 'Publish', icon: 'SendPlane2Line' },
+      { id: 'draft', label: 'Save draft', icon: 'FileLine' },
+    ],
+  },
+  async play({ canvasElement, args }) {
+    const canvas = within(canvasElement);
+    const textarea = canvasElement.querySelector('textarea');
+    await userEvent.type(textarea!, 'ship it');
+    await userEvent.click(canvas.getByText('Publish'));
+    await waitFor(() =>
+      expect(args.onSend).toHaveBeenCalledWith(
+        'ship it',
+        expect.objectContaining({ action: 'publish' })
+      )
+    );
+  },
+};
+
+/**
+ * A map of the composer's injection slots. The same Composer becomes the Qonsole
+ * input or the helpdesk reply box by filling these — so here every slot renders a
+ * tag naming itself, to show exactly where each one lands:
+ *
+ * - `attachMenuItems` — turns the `+` into a dropdown (open it for the entry)
+ * - `toolbarStart` — after `+` on the left
+ * - `footerActions` — after `toolbarStart`
+ * - `rightActions` — just left of Send
+ * - `aboveInput` — on top of the editor, inside the bar (Qonsole's reference chips)
+ * - `belowInput` — under the whole bar
+ */
+const slotTag = (name: string) => <ReqoreTag label={name} size='small' intent='info' />;
+
+export const WithSlots: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders every composer injection slot — attachMenuItems, toolbarStart, footerActions, rightActions, aboveInput, and belowInput — each filled with a self-naming tag, so the story reads as a legible map of where each slot lands.',
+      },
+    },
+  },
+  args: {
+    editor: 'plain',
+    attachMenuItems: () => [
+      { label: 'attachMenuItems entry', icon: 'CameraAiLine', onClick: fn() },
+    ],
+    toolbarStart: slotTag('toolbarStart'),
+    footerActions: slotTag('footerActions'),
+    rightActions: slotTag('rightActions'),
+    aboveInput: slotTag('aboveInput'),
+    belowInput: slotTag('belowInput'),
+  },
+  async play({ canvasElement }) {
+    const canvas = within(canvasElement);
+    // every slot renders its own marker, so the story is a legible slot map
+    for (const slot of [
+      'toolbarStart',
+      'footerActions',
+      'rightActions',
+      'aboveInput',
+      'belowInput',
+    ]) {
+      await expect(canvas.getByText(slot)).toBeInTheDocument();
+    }
+  },
+};
+
+/**
+ * Proof that the composer is configurable enough to *be* the qorus-ide Qonsole
+ * input — no fork. Wrapped in qorus-ide's Reqore theme (`main #121212`,
+ * `custom1 #762f7e`) and given the same effect + controls the real QonsoleInput
+ * uses: the `custom1:darken` gradient bar, an icon-only `custom1` send, and the
+ * `+` / `/` / compass controls in the slots. Compare against
+ * :6006 story `qonsole-ui-components--business-impact`.
+ */
+export const QonsoleReplica: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Renders the composer configured to replicate qorus-ide's QonsoleInput — a dark custom1 theme, gradient bar, icon-only send, and the slash-commands and design-session compass controls in its slots.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ReqoreUIProvider theme={{ main: '#121212', intents: { custom1: '#762f7e' } }}>
+        <div style={{ padding: 20, background: '#121212' }}>
+          <Story />
+        </div>
+      </ReqoreUIProvider>
+    ),
+  ],
+  args: {
+    placeholder: "Tell Qorus what you're trying to do…",
+    // the exact QonsoleInput bar effect (a custom1 gradient border + fill)
+    effect: { gradient: { direction: 'to bottom right', colors: 'custom1:darken:1:0.9' } },
+    // icon-only, custom1-themed, minimal — the Qonsole send
+    sendActions: [{ id: 'send', icon: 'SendPlane2Line', customTheme: { main: 'custom1' }, minimal: true }],
+    // `+` becomes a dropdown once it has extra items (screenshot / capture), like Qonsole
+    attachMenuItems: () => [
+      { label: 'Take screenshot', icon: 'CameraAiLine', onClick: fn() },
+      { label: 'Capture area', icon: 'CropLine', onClick: fn() },
+    ],
+    // the `/` slash-commands control (a stand-in for the Qonsole completions dropdown)
+    toolbarStart: (
+      <ReqoreButton
+        icon='SlashCommands2'
+        minimal
+        flat
+        size='small'
+        customTheme={{ main: 'custom1' }}
+        tooltip='Slash commands'
+      />
+    ),
+    // the design-session compass, left of send — exactly where QonsoleInput puts it
+    rightActions: (
+      <ReqoreButton
+        icon='Compass3Line'
+        minimal
+        flat
+        size='small'
+        customTheme={{ main: 'custom1' }}
+        tooltip='Start a design session'
+      />
+    ),
+  },
+  async play({ canvasElement }) {
+    // rich editor + the icon-only send (no "Send" label) render
+    await expect(canvasElement.querySelector('[contenteditable="true"]')).not.toBeNull();
+    await expect(within(canvasElement).queryByText('Send')).not.toBeInTheDocument();
+  },
+};
+
+/** `disabled` replaces the whole composer with a muted notice. */
+export const Disabled: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Renders the disabled state, where the whole composer is replaced by a muted notice showing the disabledReason.',
+      },
+    },
+  },
+  args: { disabled: true, disabledReason: 'This channel is read-only.' },
+  async play({ canvasElement }) {
+    await expect(within(canvasElement).getByText('This channel is read-only.')).toBeInTheDocument();
+    await expect(canvasElement.querySelector('textarea')).toBeNull();
+  },
+};