Release 13.0.0 (#503)

## What's changed

* feat: update to visyn_scripts 11
([#439](#439))
* deps: upgrade deps to Sep 2024
([#495](#495))

.github/workflows/release.yml

@@ -7,7 +7,7 @@ on:
         type: string
         description: 'The next version to release'
         required: true
-          
+
 jobs:
   release:
     uses: datavisyn/github-workflows/.github/workflows/release-source.yml@feat-automate-releases-releasenotes

cypress/tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "outDir": "./dist",
     "sourceMap": false,
+    "declarationMap": false,
     "types": [
       "cypress"
     ]

package.json

@@ -1,7 +1,7 @@
 {
   "name": "visyn_core",
   "description": "Core repository for datavisyn applications.",
-  "version": "12.0.0",
+  "version": "13.0.0",
   "author": {
     "name": "datavisyn GmbH",
     "email": "[email protected]",
@@ -54,8 +54,10 @@
     "all": "yarn run lint:fix && yarn run test && yarn run build && yarn run dist",
     "build": "yarn run clean && yarn run compile && yarn run copy",
     "clean": "visyn_scripts clean build dist lib",
-    "compile:watch": "visyn_scripts compile --watch",
-    "compile": "visyn_scripts compile",
+    "compile:watch": "visyn_scripts compile --watch -p tsconfig.lenient.json",
+    "compile": "visyn_scripts compile -p tsconfig.lenient.json",
+    "compile:strict:watch": "visyn_scripts compile --watch",
+    "compile:strict": "visyn_scripts compile",
     "copy": "visyn_scripts copy",
     "cy:open": "cypress open",
     "cy:run": "cypress run --e2e",
@@ -75,29 +77,29 @@
     "chromatic": "yarn run chromatic"
   },
   "dependencies": {
-    "@emotion/css": "^11.11.2",
-    "@emotion/react": "^11.11.4",
-    "@fortawesome/fontawesome-free": "^6.5.2",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@emotion/css": "^11.13.0",
+    "@emotion/react": "^11.13.3",
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@mantine/code-highlight": "~7.10.1",
-    "@mantine/core": "~7.10.1",
-    "@mantine/dates": "~7.10.1",
-    "@mantine/dropzone": "~7.10.1",
-    "@mantine/form": "~7.10.1",
-    "@mantine/hooks": "~7.10.1",
-    "@mantine/modals": "~7.10.1",
-    "@mantine/notifications": "~7.10.1",
+    "@mantine/code-highlight": "~7.12.2",
+    "@mantine/core": "~7.12.2",
+    "@mantine/dates": "~7.12.2",
+    "@mantine/dropzone": "~7.12.2",
+    "@mantine/form": "~7.12.2",
+    "@mantine/hooks": "~7.12.2",
+    "@mantine/modals": "~7.12.2",
+    "@mantine/notifications": "~7.12.2",
     "@mantine/styles": "~6.0.21",
-    "@mantine/tiptap": "~7.10.1",
+    "@mantine/tiptap": "~7.12.2",
     "@mantine6/core": "npm:@mantine/core@~6.0.21",
-    "@sentry/react": "^8.8.0",
+    "@sentry/react": "^8.27.0",
     "@types/d3-hexbin": "^0.2.5",
     "@types/d3v7": "npm:@types/d3@^7.4.3",
     "@types/plotly.js-dist-min": "^2.3.4",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-plotly.js": "^2.6.3",
     "arquero": "5.4.0",
@@ -106,7 +108,7 @@
     "d3v7": "npm:d3@^7.9.0",
     "fit-curve": "^0.2.0",
     "html-to-image": "^1.11.11",
-    "i18next": "^23.11.5",
+    "i18next": "^23.14.0",
     "jstat": "^1.9.6",
     "lineupjs": "4.11.0",
     "lodash": "~4.17.21",
@@ -115,14 +117,27 @@
     "react-dom": "~18.3.1",
     "react-highlight-words": "^0.20.0",
     "react-plotly.js": "^2.6.0",
-    "react-spring": "^9.7.3",
+    "react-spring": "^9.7.4",
     "use-deep-compare-effect": "^1.8.1",
-    "visyn_scripts": "^9.0.0"
+    "visyn_scripts": "^11.1.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.5.0",
-    "chromatic": "^11.5.3",
-    "cypress": "^13.11.0"
+    "@chromatic-com/storybook": "^1.8.0",
+    "@playwright/test": "^1.45.2",
+    "@storybook/addon-actions": "^7.6.20",
+    "@storybook/addon-essentials": "^7.6.20",
+    "@storybook/addon-interactions": "^7.6.20",
+    "@storybook/addon-links": "^7.6.20",
+    "@storybook/addon-styling": "^1.3.7",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/cli": "^7.6.20",
+    "@storybook/react": "^7.6.20",
+    "@storybook/react-webpack5": "^7.6.20",
+    "@storybook/testing-library": "0.2.2",
+    "chromatic": "^11.7.1",
+    "cypress": "^13.14.2",
+    "storybook": "^7.6.20",
+    "storybook-addon-swc": "^1.2.0"
   },
   "visyn": {
     "entries": {

requirements.txt

@@ -1,45 +1,50 @@
 # a2wsgi==1.6.0 # This WSIGMiddleware is not compatible with starlette_context
 alembic==1.13.2
 cachetools==5.3.3
-fastapi==0.111.0
+fastapi==0.112.2
 json-cfg==0.4.2
 openpyxl==3.1.5
-opentelemetry-api==1.25.0
-opentelemetry-exporter-otlp==1.25.0
-opentelemetry-exporter-prometheus==0.46b0
-opentelemetry-instrumentation-fastapi==0.46b0
-opentelemetry-instrumentation-httpx==0.46b0
-opentelemetry-instrumentation-logging==0.46b0
-opentelemetry-instrumentation-requests==0.46b0
-opentelemetry-instrumentation-sqlalchemy==0.46b0
-opentelemetry-instrumentation-system-metrics==0.46b0
-opentelemetry-sdk==1.25.0
-psycopg==3.1.19
+opentelemetry-api==1.27.0
+opentelemetry-exporter-otlp==1.27.0
+opentelemetry-exporter-prometheus==0.48b0
+opentelemetry-instrumentation-fastapi==0.48b0
+opentelemetry-instrumentation-httpx==0.48b0
+opentelemetry-instrumentation-logging==0.48b0
+opentelemetry-instrumentation-requests==0.48b0
+opentelemetry-instrumentation-sqlalchemy==0.48b0
+opentelemetry-instrumentation-system-metrics==0.48b0
+opentelemetry-sdk==1.27.0
+psycopg==3.2.1
 psycopg2==2.9.9
 pydantic==1.10.17
-pyjwt[crypto]==2.8.0
-pytest-postgresql==6.0.0
+pyjwt[crypto]==2.9.0
+pytest-postgresql==6.0.1
 python-dateutil==2.9.0.post0
 requests==2.32.3
-sentry-sdk~=2.11.0
-SQLAlchemy>=1.4.40,<=1.4.52
+sentry-sdk~=2.13.0
+SQLAlchemy>=1.4.40,<=1.4.53
 starlette-context==0.3.6
-uvicorn[standard]==0.30.1
 # Extras from fastapi[all], which we can't install because it requires pydantic v2: https://github.com/tiangolo/fastapi/blob/master/pyproject.toml#L79-L103
-fastapi-cli >=0.0.4
-# # For the test client
-httpx >=0.27.0
+fastapi-cli[standard]>=0.0.5
+# For the test client
+httpx>=0.23.0
 # For templates
-jinja2 >=2.11.2
+jinja2>=2.11.2
 # For forms and file uploads
-python-multipart >=0.0.7
+python-multipart>=0.0.7
 # For Starlette's SessionMiddleware, not commonly used with FastAPI
-itsdangerous >=1.1.0
+itsdangerous>=1.1.0
 # For Starlette's schema generation, would not be used with FastAPI
-pyyaml >=5.3.1
+pyyaml>=5.3.1
 # For UJSONResponse
-ujson >=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0
+ujson>=4.0.1,!=4.0.2,!=4.1.0,!=4.2.0,!=4.3.0,!=5.0.0,!=5.1.0
 # For ORJSONResponse
-orjson >=3.2.1
+orjson>=3.2.1
 # To validate email fields
-email_validator >=2.0.0
+email-validator>=2.0.0
+# Uvicorn with uvloop
+uvicorn[standard]>=0.30.6
+# Disabled as we are still on Pydantic 1: Settings management
+# pydantic-settings>=2.0.0
+# Disabled as we are still on Pydantic 1: Extra Pydantic data types
+# pydantic-extra-types>=2.0.0

src/app/VisynApp.tsx

@@ -27,15 +27,15 @@ export function VisynApp({
   children,
   loginMenu = <VisynLoginMenu watch />,
 }: {
-  header?: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
-  headerConfig?: Partial<AppShellProps['header']>;
-  navbar?: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
-  navbarConfig?: AppShellProps['navbar'];
-  aside?: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
-  footer?: ReactElement<unknown, string | JSXElementConstructor<unknown>>;
-  footerConfig?: AppShellProps['footer'];
-  appShellProps?: Partial<AppShellProps & React.RefAttributes<HTMLDivElement>>;
-  loginMenu?: JSX.Element;
+  header?: ReactElement<unknown, string | JSXElementConstructor<unknown>> | null;
+  headerConfig?: Partial<AppShellProps['header']> | null;
+  navbar?: ReactElement<unknown, string | JSXElementConstructor<unknown>> | null;
+  navbarConfig?: AppShellProps['navbar'] | null;
+  aside?: ReactElement<unknown, string | JSXElementConstructor<unknown>> | null;
+  footer?: ReactElement<unknown, string | JSXElementConstructor<unknown>> | null;
+  footerConfig?: AppShellProps['footer'] | null;
+  appShellProps?: Partial<AppShellProps & React.RefAttributes<HTMLDivElement>> | null;
+  loginMenu?: JSX.Element | null;
   children?: React.ReactNode;
 }) {
   useVisynAppContext();
@@ -52,8 +52,8 @@ export function VisynApp({
         },
       }}
       {...appShellProps}
-      navbar={navbarConfig}
-      footer={footerConfig}
+      navbar={navbarConfig ?? undefined}
+      footer={footerConfig ?? undefined}
       header={{ height: 50, ...headerConfig }}
     >
       <AppShell.Navbar>{navbar}</AppShell.Navbar>

src/app/VisynAppContext.tsx

@@ -5,8 +5,12 @@ import type { IUser } from '../security';
 export const VisynAppContext = React.createContext<{
   user: IUser | null;
   appName: JSX.Element | string;
-  clientConfig: IClientConfig;
-}>(null);
+  clientConfig: IClientConfig | null;
+}>({
+  user: null,
+  appName: '',
+  clientConfig: null,
+});
 
 export function useVisynAppContext() {
   const context = React.useContext(VisynAppContext);

src/app/header/AboutAppModal.tsx

@@ -9,7 +9,7 @@ import { WebpackEnv } from '../../base';
  */
 export interface IAboutAppModalConfig {
   // Middle section of the modal
-  content: JSX.Element;
+  content?: JSX.Element;
   // Bottom section of the modal
   bottom?: JSX.Element;
   customerLogo?: JSX.Element;
@@ -36,9 +36,9 @@ export function AboutAppModal({
   content,
   opened,
   onClose,
-  dvLogo = null,
+  dvLogo = undefined,
   bottom,
-  customerLogo = null,
+  customerLogo = undefined,
 }: {
   opened: boolean;
   onClose: () => void;

src/app/header/ConfigurationMenu.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import { useVisynAppContext } from '../VisynAppContext';
 import { AboutAppModal, IAboutAppModalConfig } from './AboutAppModal';
 
-export function ConfigurationMenu({ menu, dvLogo, aboutAppModal }: { menu: JSX.Element; dvLogo: JSX.Element; aboutAppModal?: IAboutAppModalConfig }) {
+export function ConfigurationMenu({ menu, dvLogo, aboutAppModal }: { menu?: JSX.Element; dvLogo: JSX.Element; aboutAppModal?: IAboutAppModalConfig }) {
   const { appName } = useVisynAppContext();
 
   const [showAboutModal, setShowAboutModal] = React.useState(false);

src/app/header/UserMenu.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import { css } from '@emotion/css';
 import { LoginUtils } from '../../security';
 
-export function UserMenu({ menu, user, color }: { menu: JSX.Element; user: string; color: string }) {
+export function UserMenu({ menu, user, color }: { menu?: JSX.Element; user: string; color?: string }) {
   return (
     <Menu shadow="md" data-testid="visyn-user-avatar">
       <Menu.Target>

src/app/login/UserStoreUIMap.tsx

@@ -86,7 +86,7 @@ export function AutoLoginForm({ setError, store }: IUserStoreRenderProps) {
       // Only allow a single concurrent login access
       setLoginInProgress(true);
 
-      let popup: Window = null;
+      let popup: Window | null = null;
       try {
         // Add timestamp to avoid no proper reloading due to cache hits.
         const authUrl = `${window.location.origin}?timestamp=${new Date().getTime()}`;

src/app/login/VisynLoginMenu.tsx

@@ -18,7 +18,7 @@ export function VisynLoginMenu({ watch = false }: { watch?: boolean }) {
     if (watch) {
       const watcher = SessionWatcher.startWatching(LoginUtils.logout);
       return () => {
-        watcher.stop();
+        watcher?.stop();
       };
     }
     return undefined;
@@ -86,13 +86,13 @@ export function VisynLoginMenu({ watch = false }: { watch?: boolean }) {
           </Alert>
         ) : null}
         {userStoreStatus === 'pending' ? <LoadingOverlay visible /> : null}
-        {!userStores || isOffline ? null : userStoresWithUI.length === 0 ? (
+        {!userStores || !userStoresWithUI || isOffline ? null : userStoresWithUI.length === 0 ? (
           // Use the dummy store as default if no store is found
           <DefaultLoginForm setError={setError} store={{ id: 'DummyStore', ui: 'DefaultLoginForm', configuration: {} }} />
         ) : (
           // Render all stores next to eachother
           userStoresWithUI.map((store, i, all) => {
-            const ToRender = UserStoreUIMap.get(store.ui);
+            const ToRender = UserStoreUIMap.get(store.ui!);
 
             return (
               <React.Fragment key={store.id}>

src/base/ajax.ts

@@ -140,6 +140,7 @@ export class Ajax {
           }
       }
       if (mimetype) {
+        // @ts-ignore
         mergedOptions.headers['Content-Type'] = mimetype;
       }
     }

src/base/event.ts

@@ -94,12 +94,14 @@ class SingleEventHandler {
     }
     const largs = [event].concat(event.args);
     if (this.listeners.length === 1) {
+      // @ts-ignore
       this.listeners[0].apply(event, largs);
     } else {
       // work on a copy in case the number changes
       const l = this.listeners.slice();
       const ll = l.length;
       for (let i = 0; i < ll && !event.isImmediatePropagationStopped(); ++i) {
+        // @ts-ignore
         l[i].apply(event, largs);
       }
     }
@@ -143,7 +145,8 @@ export class EventHandler implements IEventHandler {
         if (!this.handlers.has(event)) {
           this.handlers.set(event, new SingleEventHandler(event));
         }
-        this.handlers.get(event).push(handler);
+        // @ts-ignore
+        this.handlers.get(event)?.push(handler);
       });
     } else {
       Object.keys(events).forEach((event) => {
@@ -163,9 +166,10 @@ export class EventHandler implements IEventHandler {
     if (typeof events === 'string') {
       events.split(EventHandler.MULTI_EVENT_SEPARATOR).forEach((event) => {
         if (this.handlers.has(event)) {
-          const h: SingleEventHandler = this.handlers.get(event);
-          h.remove(handler);
-          if (h.length === 0) {
+          const h: SingleEventHandler | undefined = this.handlers.get(event);
+          // @ts-ignore
+          h?.remove(handler);
+          if (h?.length === 0) {
             this.handlers.delete(event);
           }
         }
@@ -204,8 +208,8 @@ export class EventHandler implements IEventHandler {
 
   private fireEvent = (event: Event) => {
     if (this.handlers.has(event.type)) {
-      const h: SingleEventHandler = this.handlers.get(event.type);
-      return h.fire(event);
+      const h: SingleEventHandler | undefined = this.handlers.get(event.type);
+      return h?.fire(event);
     }
     return false;
   };