Merge branch 'develop'

.eslintignore.js

@@ -17,13 +17,12 @@ function getIgnoredPatterns({ isCI, isLintStaged, isLintScript }) {
         'build',
         'node_modules',
         'templates',
-        'next-app',
+        'next-demo',
         'server/helpers/getFilterPredicate.js',
     ];
     if (isCI || isLintStaged) {
         // ignore in CI
         // still show any errors in IDE & in local running eslint script
-        ignored.push('uui-editor'); // TODO: it's temporarily ignored, uncomment when work related to editor is finished.
     }
     if (isCI || isLintStaged || isLintScript) {
         // ignore in CI & for local running eslint script

.github/workflows/e2e.yml

@@ -0,0 +1,46 @@
+name: e2e tests
+on:
+    pull_request:
+        branches:
+            - develop
+            - main
+    push:
+        branches: [ develop ]
+
+concurrency:
+    group: ${{ github.workflow }}-${{ github.base_ref }}-${{ github.head_ref }}
+    cancel-in-progress: true
+
+jobs:
+    e2e-tests:
+        timeout-minutes: 60
+        runs-on: ubuntu-latest
+        if: github.event.pull_request.draft == false
+        steps:
+            - uses: actions/checkout@v4
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '18.x'
+                  cache: 'yarn'
+                  cache-dependency-path: |
+                      **/yarn.lock
+
+            - name: 'Build'
+              run: |
+                  yarn
+                  yarn --cwd uui-e2e-tests local-test-e2e-deps-install
+                  yarn build
+                  cd server && yarn
+
+            - name: 'Run e2e tests'
+              run: |
+                  yarn --cwd uui-e2e-tests local-check-issues
+                  yarn --cwd uui-e2e-tests local-test-e2e
+
+            - name: 'Upload e2e HTML report'
+              if: always()
+              uses: actions/upload-artifact@v4
+              with:
+                  name: e2e-html-report
+                  path: ./uui-e2e-tests/tests/.report/report
+                  retention-days: 1

.gitignore

@@ -27,15 +27,16 @@ _ReSharper.Caches
 coverage
 .vscode/settings.json
 
-# next.js next-app
-next-app/.next/
-next-app/out/
-next-app/node_modules
-next-app/build
-next-app/.vercel
-next-app/npm-debug.log*
-next-app/yarn-debug.log*
-next-app/yarn-error.log*
+# next.js
+.next/
+.rollup.cache
+next-demo/**/.swc
+next-demo/**/out/
+next-demo/**/build
+next-demo/**/.vercel
+next-demo/**/npm-debug.log*
+next-demo/**/yarn-debug.log*
+next-demo/**/yarn-error.log*
 
 .templates
 .reports

.lintstagedrc.js

@@ -1,4 +1,4 @@
 module.exports = {
-    '!((templates/**)|(next-app/**))*.{js,ts,tsx}': ['eslint --fix'],
-    '!((templates/**)|(next-app/**))*.scss': ['stylelint'],
+    '!((templates/**)|(next-demo/**))*.{js,ts,tsx}': ['eslint --fix'],
+    '!((templates/**)|(next-demo/**))*.scss': ['stylelint'],
 };

.vscode/UUI.code-workspace

@@ -0,0 +1,10 @@
+{
+	"folders": [
+		{
+			"path": ".."
+		}
+    ],
+    "settings": {
+        "typescript.tsdk": "node_modules\\typescript\\lib"
+    }
+}

.vscode/launch.json

@@ -1,40 +1,44 @@
 {
-    // Use IntelliSense to learn about possible attributes.
-    // Hover to view descriptions of existing attributes.
-    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-    "version": "0.2.0",
-    "configurations": [
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Jest All",
-            "program": "${workspaceFolder}/node_modules/.bin/jest",
-            "args": ["--runInBand"],
-            "console": "integratedTerminal",
-            "internalConsoleOptions": "neverOpen",
-            "disableOptimisticBPs": true,
-            "windows": {
-              "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-            }
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Perf tests",
-            "program": "${workspaceFolder}/node_modules/ts-node/dist/bin.js",
-            "args": ["-T", "./uui-db/src/__benchmarks__/index.ts"],
-            "console": "integratedTerminal",
-            "internalConsoleOptions": "neverOpen",
-            "disableOptimisticBPs": true
-        },
-        {
-            "type": "node",
-            "request": "launch",
-            "name": "Dev Server",
-            "program": "${workspaceFolder}/uui-build/scripts/start",
-            "console": "integratedTerminal",
-            "internalConsoleOptions": "neverOpen",
-            "disableOptimisticBPs": true
-        }
-    ]
-}
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": [
+        "--runInBand",
+        "uui-editor/src/__tests__/serialization.test.ts"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "runtimeExecutable": "/Users/dzmitry_tamashevich/.nvm/versions/node/v18.18.0/bin/node",
+      "disableOptimisticBPs": true,
+      "windows": {
+        "program": "${workspaceFolder}/node_modules/jest/bin/jest"
+      }
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Perf tests",
+      "program": "${workspaceFolder}/node_modules/ts-node/dist/bin.js",
+      "args": ["-T", "./uui-db/src/__benchmarks__/index.ts"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Dev Server",
+      "program": "${workspaceFolder}/uui-build/scripts/start",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "disableOptimisticBPs": true
+    }
+  ]
+}

.vscode/settings.json

@@ -109,5 +109,6 @@
         "less",
         "scss"
     ],
-    "eslint.format.enable": true
+    "eslint.format.enable": true,
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
 }

app/app.d.ts

@@ -1,44 +1,8 @@
 /// <reference path="../uui_globals.d.ts" />
 /// <reference path="../public/docs/docsGenOutput/docsGenOutput.d.ts" />
-
 declare let __COMMIT_HASH__: string;
 
-// TBD: react-measure is abandoned, and it's typings are not compatible with modern react versions. We need to find a replacement.
-// declare module 'react-measure';
-
-declare module 'react-imask' {
-    import IMask from 'imask';
-
-    /**
-     * The props accepted by react-imask, based
-     * on the implementation of imask, with  some additions
-     */
-    export type IMaskInputProps = Partial<IMask.AnyMaskedOptions> & {
-        mask: IMask.AnyMaskedOptions['mask'];
-        blocks: { [key: string]: any };
-        value: string;
-        unmask?: boolean;
-        onAccept?: (value: string, mask: IMask.InputMask<IMask.AnyMaskedOptions>, e: React.ChangeEvent<HTMLInputElement>) => void;
-        onComplete?: (value: string, mask: IMask.InputMask<IMask.AnyMaskedOptions>, e: React.ChangeEvent<HTMLInputElement>) => void;
-    };
-
-    /**
-     * A function that decorates a react component
-     * with 'IMask' props
-     * @param Component Any React Component
-     */
-    export function IMaskMixin<T, D>(
-        Component: React.ComponentType<{ inputRef: React.Ref<D> } & T>,
-    ): React.ComponentType<T & IMaskInputProps>;
-
-    /**
-     * A basic IMask React Input
-     */
-    export const IMaskInput: React.ComponentType<IMaskInputProps>;
-}
-
 declare module 'tether-tooltip';
-declare module 'jsurl';
 declare module 'inline-style-transformer';
 declare module 'draft-js-plugins-editor';
 declare module 'draft-js-clear-formatting';
@@ -53,7 +17,6 @@ declare module '@mercuriya/slate-linkify';
 declare module '@mercuriya/slate-gallery';
 declare module 'slate-drop-or-paste-images';
 declare module 'slate-html-serializer';
-declare module 'get-video-id';
 declare module 'slate-uui-table-plugin';
 declare module 'markdown-draft-js';
 declare module 'react-breakpoints';

app/package.json

@@ -6,7 +6,7 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "start": "craco start",
+    "start": "cross-env PORT=3793 craco start",
     "start-sd": "cross-env isWrapUuiAppInShadowDom=true craco start",
     "build": "craco build",
     "build-dev": "craco build --app-dev",
@@ -30,30 +30,27 @@
     "@epam/uui-docs": "5.7.2",
     "@epam/uui-editor": "5.7.2",
     "@epam/uui-timeline": "5.7.2",
-    "@udecode/plate-common": "25.0.1",
+    "@udecode/plate-common": "31.3.2",
     "amplitude-js": "8.9.1",
+    "@tanstack/react-query": "^5.17.19",
     "classnames": "2.2.6",
     "codesandbox": "2.2.3",
     "dayjs": "1.10.7",
     "history": "4.10.1",
     "imask": "6.0.7",
     "lodash.assign": "4.2.0",
-    "lodash.clone": "4.5.0",
-    "lodash.isequal": "4.5.0",
-    "lodash.sortby": "4.7.0",
     "prismjs": "^1.19.0",
     "prop-types": "15.7.2",
     "qhistory": "1.0.3",
-    "query-string": "6.13.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-fast-compare": "^3.2.2",
     "react-imask": "6.0.7",
     "react-markdown": "8.0.4",
     "react-measure": "2.5.2",
     "react-router": "6.14.0",
     "react-router-dom": "6.14.0",
-    "remark-gfm": "3.0.1",
-    "slate": "0.94.1"
+    "remark-gfm": "3.0.1"
   },
   "browserslist": {
     "production": [
@@ -77,7 +74,7 @@
     "@craco/craco": "7.0.0",
     "@types/amplitude-js": "^8.0.1",
     "@types/history": "4.7.11",
-    "@types/node": "16.18.4",
+    "@types/node": "18.19.31",
     "@types/prismjs": "1.16.1",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.10",

app/src/App.tsx

@@ -4,6 +4,7 @@ import { Route, Routes } from 'react-router';
 import { DocumentsPage } from './documents';
 import { DemoPage } from './demo';
 import { SandboxPage } from './sandbox/SandboxPage';
+import { PreviewPage } from './preview/previewPage';
 
 function App() {
     return (
@@ -12,6 +13,7 @@ function App() {
             <Route path="/documents" Component={ DocumentsPage } />
             <Route path="/demo" Component={ DemoPage } />
             <Route path="/sandbox" Component={ SandboxPage } />
+            <Route path="/preview" Component={ PreviewPage } />
         </Routes>
     );
 }

app/src/common/AppHeader.tsx

@@ -201,7 +201,7 @@ export function AppHeader() {
                         target="_blank"
                         href="https://forms.office.com/e/9iEvJUKdeM"
                     >
-                        <img height="60px" src="/static/survey_banner.png" alt="Take part in UUI survey" />
+                        <img height="60px" width="172.5px" src="/static/survey_banner.png" alt="Take part in UUI survey" />
                     </Anchor>
                 ),
             },

app/src/common/Page.tsx

@@ -8,12 +8,15 @@ export interface PageProps extends IHasChildren {
     renderHeader?: () => React.ReactNode;
     renderFooter?: () => React.ReactNode;
     contentCx?: string;
+    rootCx?: string;
     isFullScreen?: boolean;
+    wrapperRef?: React.Ref<HTMLElement>;
+    onClick?: (e?: React.MouseEvent<HTMLElement>) => void;
 }
 
 export function Page(props: PageProps) {
     const {
-        renderHeader, renderFooter, contentCx, children, isFullScreen,
+        renderHeader, renderFooter, contentCx, children, isFullScreen, rootCx,
     } = props;
 
     const services = useUuiContext();
@@ -32,10 +35,16 @@ export function Page(props: PageProps) {
     }, [services.uuiRouter.getCurrentLink().search]);
 
     return (
-        <div className={ css.root }>
+        <div className={ cx(css.root, rootCx) }>
             <header>{!isFullScreen && renderHeader?.()}</header>
             <ErrorHandler cx={ css.errorBlock }>
-                <main className={ cx(css.content, contentCx) }>{children}</main>
+                <main
+                    className={ cx(css.content, contentCx) }
+                    ref={ props.wrapperRef }
+                    onClick={ props.onClick }
+                >
+                    {children}
+                </main>
                 <footer>{!isFullScreen && renderFooter?.()}</footer>
             </ErrorHandler>
         </div>

app/src/common/apiReference/TypeRefTable.tsx

@@ -68,7 +68,7 @@ export function TypeRefTable(props: TypeRefTableProps) {
         [items, props.isGrouped],
     );
 
-    const view = exportPropsDs.getView(tableState, setTableState, {
+    const view = exportPropsDs.useView(tableState, setTableState, {
         isFoldedByDefault: () => false,
     });