@qoretechnologies/reqraft 0.10.1 → 0.10.2

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

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { useState } from 'react';
 
 import { StoryMeta } from '../../../../types';

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

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { expect, fireEvent, waitFor, within } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fireEvent, waitFor, within } from 'storybook/test';
 import { useState } from 'react';
 import { StoryMeta } from '../../../../types';
 import { SelectFormField } from './Select';

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

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { expect, fn, userEvent, within } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, within } from 'storybook/test';
 import { useState } from 'react';
 import { StoryMeta } from '../../../../types';
 import { StringFormField } from './String';

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

@@ -9,8 +9,8 @@
 // - the IDE's leaf story components (`LongStringField`, `Number`, `string`)
 //   are local 2-arg wrappers over reqraft's leaf fields, `auto` is the ported
 //   `AutoFormField`.
-import { Meta, StoryObj } from '@storybook/react';
-import { expect, fireEvent, fn, screen, userEvent, waitFor, within } from '@storybook/test';
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, fireEvent, fn, screen, userEvent, waitFor, within } from 'storybook/test';
 import { useState } from 'react';
 import { buildTemplates } from '../../../../helpers/templates';
 import { mockExpressions } from '../../expressions/mockExpressions';

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

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { useState } from 'react';
 import { StoryMeta } from '../../../../types';
 import { UrlFormField } from './Url';

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

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { expect, fireEvent, fn } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fireEvent, fn } from 'storybook/test';
 import { Server } from 'mock-socket';
 import { sleep, testsClickButton, testsWaitForText } from '../../../__tests__/utils';
 import { StoryMeta } from '../../types';

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

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { expect, fireEvent, fn, waitFor } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fireEvent, fn, waitFor } from 'storybook/test';
 import { storiesStorageMock, storiesStorageMockEmpty } from '../../../__tests__/ mock';
 import { testsWaitForText } from '../../../__tests__/utils';
 import menu from '../../../mock/menu';

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

@@ -1,5 +1,5 @@
-import { StoryObj } from '@storybook/react';
-import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fn, userEvent, waitFor, within } from 'storybook/test';
 import { useState } from 'react';
 import { sleep } from '../../../__tests__/utils';
 import { StoryMeta } from '../../types';

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

@@ -7,8 +7,8 @@
 // shape end-to-end before promoting the spike into a `QonsoleSmartInput`
 // component proper.
 
-import { StoryObj } from '@storybook/react';
-import { fn, userEvent, waitFor, within, expect } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { fn, userEvent, waitFor, within, expect } from 'storybook/test';
 import { sleep } from '../../../__tests__/utils';
 import { useState } from 'react';
 import { StoryMeta } from '../../types';

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

@@ -1,5 +1,5 @@
 import { ReqoreSpinner, ReqoreTree } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { testsWaitForText } from '../../../__tests__/utils';
 import { StoryMeta } from '../../types';
 import { useFetch } from './useFetch';
@@ -30,7 +30,7 @@ const meta = {
 export default meta;
 export type Story = StoryObj<typeof meta>;
 
-export const get: Story = {
+export const Get: Story = {
   args: {
     method: 'GET',
   },
@@ -61,7 +61,7 @@ export const get: Story = {
   },
 };
 
-export const put: Story = {
+export const Put: Story = {
   args: {
     method: 'PUT',
   },
@@ -83,7 +83,7 @@ export const put: Story = {
   },
 };
 
-export const post: Story = {
+export const Post: Story = {
   args: {
     method: 'POST',
   },
@@ -105,7 +105,7 @@ export const post: Story = {
   },
 };
 
-export const del: Story = {
+export const Del: Story = {
   args: {
     method: 'DELETE',
   },

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

@@ -1,6 +1,6 @@
 import { ReqoreButton, ReqoreControlGroup, ReqoreP } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react';
-import { fireEvent, within } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { fireEvent, within } from 'storybook/test';
 import { storiesStorageMock } from '../../../__tests__/ mock';
 import { testsWaitForText } from '../../../__tests__/utils';
 import { StoryMeta } from '../../types';

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

@@ -1,7 +1,7 @@
 import { ReqoreControlGroup, ReqoreP, ReqorePanel } from '@qoretechnologies/reqore';
 import { TReqoreIntent } from '@qoretechnologies/reqore/dist/constants/theme';
-import { StoryObj } from '@storybook/react';
-import { expect, fn, waitFor, within } from '@storybook/test';
+import { StoryObj } from '@storybook/react-vite';
+import { expect, fn, waitFor, within } from 'storybook/test';
 import { Server } from 'mock-socket';
 import { useEffect, useState } from 'react';
 import { useMount } from 'react-use';

package/src/index.tsx

@@ -10,26 +10,28 @@ export {
   validateOptionWithRequiredGroups,
 } from './helpers/validations';
 export type { IValidationResult } from './helpers/validations';
-export {
+export { ReqraftMenu } from './components/menu/Menu';
+export type {
   IReqraftMenuItem,
   IReqraftMenuProps,
-  ReqraftMenu,
   TReqraftMenu,
   TReqraftMenuItem,
 } from './components/menu/Menu';
 
-export { IReqraftUseFetch, useFetch } from './hooks/useFetch/useFetch';
-export { TReqraftUseStorage, useReqraftStorage } from './hooks/useStorage/useStorage';
+export { useFetch } from './hooks/useFetch/useFetch';
+export type { IReqraftUseFetch } from './hooks/useFetch/useFetch';
+export { useReqraftStorage } from './hooks/useStorage/useStorage';
+export type { TReqraftUseStorage } from './hooks/useStorage/useStorage';
 export * from './hooks/useWebSocket/useWebSocket';
 export {
   initializeReqraft,
   ReqraftProvider,
   ReqraftQueryClient,
 } from './providers/ReqraftProvider';
-export {
+export { currentUserStore as ReqraftCurrentUserStore } from './stores/currentUser/currentUser';
+export type {
   ICurrentUser,
   ICurrentUserStore,
-  currentUserStore as ReqraftCurrentUserStore,
 } from './stores/currentUser/currentUser';
 export { query } from './utils/fetch';
 export * from './utils/websocket';

package/src/stores/currentUser/currentUser.stories.tsx

@@ -1,5 +1,5 @@
 import { ReqoreP, ReqoreSpinner, ReqoreTree } from '@qoretechnologies/reqore';
-import { StoryObj } from '@storybook/react';
+import { StoryObj } from '@storybook/react-vite';
 import { testsWaitForText } from '../../../__tests__/utils';
 import { StoryMeta } from '../../types';
 import { currentUserStore } from './currentUser';
@@ -25,14 +25,14 @@ const meta = {
 export default meta;
 export type Story = StoryObj<typeof meta>;
 
-export const currentUserCanBeLoaded: Story = {
+export const CurrentUserCanBeLoaded: Story = {
   play: async () => {
     await testsWaitForText('"David Nichols"');
   },
 };
 
-export const currentUserHasPermissions: Story = {
-  ...currentUserCanBeLoaded,
+export const CurrentUserHasPermissions: Story = {
+  ...CurrentUserCanBeLoaded,
   render: () => {
     const { hasAnyPermission } = currentUserStore();
 

package/src/stories/Tests/utils.ts

@@ -1,4 +1,4 @@
-import { expect, fireEvent, screen, userEvent, waitFor } from '@storybook/test';
+import { expect, fireEvent, screen, userEvent, waitFor } from 'storybook/test';
 
 export const sleep = (ms: number) => {
   return new Promise((resolve) => setTimeout(resolve, ms));

package/src/types.ts

@@ -1,5 +1,5 @@
 import { IReqoreUIProviderProps } from '@qoretechnologies/reqore/dist/containers/UIProvider';
-import { Meta } from '@storybook/react';
+import { Meta } from '@storybook/react-vite';
 import { IReqraftProviderProps } from './providers/ReqraftProvider';
 
 export type StoryMeta<

package/vite.config.ts

@@ -0,0 +1,58 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig, loadEnv } from 'vite';
+
+// The old webpack `env` block injected these into process.env. Vite doesn't
+// define `process` in the browser, so source/stories that read
+// process.env.REACT_APP_QORUS_* (and NODE_ENV/CI) get `undefined` and the live
+// editor stories then 401.
+//
+// Source the values from BOTH .env files AND the shell: the Storybook webpack
+// builder used to auto-load `.env`/`.env.local` (see .gitignore), so a token
+// kept in a gitignored `.env.local` worked without retyping it each launch.
+// `loadEnv(mode, cwd, '')` reads all keys (empty prefix, not just VITE_); the
+// shell still wins (e.g. `REACT_APP_QORUS_TOKEN=… yarn storybook`).
+//
+// NOTE: keep this a module-level call + a plain OBJECT export. vitest.config.ts
+// does `mergeConfig(viteConfig, …)`, which throws "Cannot merge config in form
+// of callback" if this file exports the `defineConfig(() => …)` function form.
+const fileEnv = loadEnv(process.env.NODE_ENV || 'development', process.cwd(), '');
+// Resolve a value from the shell, then .env files. Accepts fallback keys so a
+// globally-exported `QORUS_TOKEN` (the CI secret name, and what's commonly set
+// in the shell) is picked up even though the app reads `REACT_APP_QORUS_TOKEN`.
+// Locally nothing ever bridged the two; CI bridges them in the workflow yaml.
+const env = (...keys: string[]) => {
+  for (const key of keys) {
+    if (process.env[key]) return process.env[key] as string;
+    if (fileEnv[key]) return fileEnv[key];
+  }
+  return '';
+};
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    // Ensure a single React instance across stories, the renderer and
+    // styled-components. Webpack deduped automatically; Vite needs this to
+    // avoid "A React Element from an older version of React was rendered".
+    dedupe: ['react', 'react-dom', 'react/jsx-runtime'],
+  },
+  // The Storybook Vite builder picks up this define, and the Vitest browser
+  // project merges this config — so both paths get the token.
+  define: {
+    // Map Node's `global` to the browser's globalThis. Some deps reference it —
+    // e.g. storybook-addon-mock's faker does `global.XMLHttpRequest`, which would
+    // throw "global is not defined" in the Vitest/Storybook browser otherwise.
+    global: 'globalThis',
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'storybook'),
+    'process.env.CI': JSON.stringify(env('CI')),
+    // Fall back to the unprefixed QORUS_TOKEN / QORUS_INSTANCE — the globally
+    // exported vars (qorus-ide reads the same QORUS_TOKEN). So a global
+    // QORUS_TOKEN now reaches Storybook without setting REACT_APP_QORUS_TOKEN.
+    'process.env.REACT_APP_QORUS_TOKEN': JSON.stringify(
+      env('REACT_APP_QORUS_TOKEN', 'QORUS_TOKEN')
+    ),
+    'process.env.REACT_APP_QORUS_INSTANCE': JSON.stringify(
+      env('REACT_APP_QORUS_INSTANCE', 'QORUS_INSTANCE')
+    ),
+  },
+});

package/vitest.config.ts

@@ -0,0 +1,69 @@
+import { qlipVitestPlugin } from '@qoretechnologies/qlip';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+import { playwright } from '@vitest/browser-playwright';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { defineConfig, mergeConfig } from 'vitest/config';
+import viteConfig from './vite.config';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+// qlip uploads only when a token is provided (CI). Local runs still capture
+// snapshots via the plugin's `auto` mode but skip the upload step.
+const qlipUploadToken = process.env.QLIP_UPLOAD_TOKEN;
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      projects: [
+        // Component/interaction tests: run every story in a real browser via
+        // Playwright. Replaces the former @storybook/test-runner.
+        {
+          extends: true,
+          plugins: [
+            qlipVitestPlugin({
+              auto: true,
+              captureOnError: true,
+              disableAnimations: true,
+              pauseAnimationsAtEnd: true,
+              viewport: { width: 1920, height: 1080 },
+              ...(qlipUploadToken ? { upload: { uploadToken: qlipUploadToken } } : {}),
+            }),
+            storybookTest({
+              configDir: path.join(dirname, '.storybook'),
+              storybookScript: 'yarn storybook --no-open',
+            }),
+          ],
+          test: {
+            name: 'storybook',
+            browser: {
+              enabled: true,
+              provider: playwright({}),
+              headless: true,
+              // Match the Chromatic snapshot viewport (preview.tsx sets [1440]).
+              viewport: { width: 1440, height: 900 },
+              instances: [{ browser: 'chromium' }],
+            },
+            setupFiles: ['./.storybook/vitest.setup.ts'],
+            // Some interaction stories deliberately render slow content (LSP /
+            // websocket editors) and the shared play helpers wait up to ~17s.
+            testTimeout: 30000,
+          },
+        },
+        // Unit tests: the former Jest suite, now on Vitest + jsdom.
+        {
+          extends: true,
+          test: {
+            name: 'unit',
+            globals: true,
+            environment: 'jsdom',
+            include: ['__tests__/**/*.test.{ts,tsx}'],
+            setupFiles: ['./__tests__/setup.ts'],
+            testTimeout: 30000,
+          },
+        },
+      ],
+    },
+  })
+);

package/dist/stories/Tests/utils.d.ts

@@ -1,32 +0,0 @@
-export declare const sleep: (ms: number) => Promise<unknown>;
-export declare function _testsScrollElementIntoView(selector: string, nth?: number): Promise<void>;
-export declare function _testsChangeRichText(value: string, nth?: number): Promise<void>;
-export declare function _testsConfirmDialog(): Promise<void>;
-export declare function _testsOpenTemplateMenu(nth?: number): Promise<void>;
-export declare function _testsSetTemplate(nth?: number): Promise<void>;
-export declare function _testsOpenTemplates(nth?: number): Promise<void>;
-export declare function _testsWaitForText(text: string | number | RegExp, selector?: string, nth?: number, exist?: boolean): Promise<void>;
-export declare function _testsWaitForInputValue(value: string | number, selector?: string, nth?: number, exist?: boolean): Promise<void>;
-export declare function _testsClickText(text: string, selector?: string, nth?: number): Promise<void>;
-export declare function _testsWaitForTextsCount(text: string, selector?: string, count?: number): Promise<void>;
-export declare function _testsWaitForTextToNotExist(text: string, selector?: string, nth?: number): Promise<void>;
-export declare function _testsChangeStringField({ selector, nth, value, }: {
-    selector: string;
-    nth?: number;
-    value: string | number;
-}): Promise<void>;
-export declare function _testsClickButton({ label, selector, nth, wait, parent, }: {
-    label?: string;
-    selector?: string;
-    nth?: number;
-    wait?: number;
-    parent?: string;
-}): Promise<void>;
-export declare function _testsDoubleClickButton({ label, selector, nth, wait, parent, }: {
-    label?: string;
-    selector?: string;
-    nth?: number;
-    wait?: number;
-    parent?: string;
-}): Promise<void>;
-//# sourceMappingURL=utils.d.ts.map

package/dist/stories/Tests/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/stories/Tests/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,OAAQ,MAAM,qBAE/B,CAAC;AAEF,wBAAsB,2BAA2B,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,GAAE,MAAU,iBAKlF;AAED,wBAAsB,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,GAAE,MAAU,iBAkBxE;AAED,wBAAsB,mBAAmB,kBAMxC;AAED,wBAAsB,sBAAsB,CAAC,GAAG,GAAE,MAAU,iBAE3D;AAED,wBAAsB,iBAAiB,CAAC,GAAG,GAAE,MAAU,iBAGtD;AAED,wBAAsB,mBAAmB,CAAC,GAAG,GAAE,MAAU,iBA2BxD;AAYD,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAC9B,QAAQ,CAAC,EAAE,MAAM,EACjB,GAAG,GAAE,MAAU,EACf,KAAK,GAAE,OAAc,iBAgBtB;AAED,wBAAsB,uBAAuB,CAC3C,KAAK,EAAE,MAAM,GAAG,MAAM,EACtB,QAAQ,CAAC,EAAE,MAAM,EACjB,GAAG,GAAE,MAAU,EACf,KAAK,GAAE,OAAc,iBAoBtB;AAED,wBAAsB,eAAe,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,GAAG,GAAE,MAAU,iBAIrF;AAED,wBAAsB,uBAAuB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,EAAE,KAAK,GAAE,MAAU,iBAW/F;AAED,wBAAsB,2BAA2B,CAC/C,IAAI,EAAE,MAAM,EACZ,QAAQ,CAAC,EAAE,MAAM,EACjB,GAAG,GAAE,MAAU,iBAGhB;AAED,wBAAsB,uBAAuB,CAAC,EAC5C,QAAQ,EACR,GAAO,EACP,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,iBAOA;AAED,wBAAsB,iBAAiB,CAAC,EACtC,KAAK,EACL,QAAQ,EACR,GAAO,EACP,IAAW,EACX,MAAyB,GAC1B,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,iBAsCA;AAED,wBAAsB,uBAAuB,CAAC,EAC5C,KAAK,EACL,QAAQ,EACR,GAAO,EACP,IAAW,EACX,MAAyB,GAC1B,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,iBAsCA"}