fix storybook issues and other warnings

apps/exhibition-live/.storybook/main.ts

@@ -10,12 +10,17 @@ const config: StorybookConfig = {
     "@storybook/addon-docs",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
+    "storybook-addon-next-router",
   ],
   staticDirs: ["../public"],
 
   framework: {
     name: "@storybook/nextjs",
-    options: {},
+    options: {
+      builder: {
+        useSWC: true, // Enables SWC support
+      },
+    },
   },
   docs: {
     autodocs: true,

apps/exhibition-live/.storybook/preview.js

@@ -1,6 +1,7 @@
 import theme from "../components/theme/berry-theme";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 import {
   createNewIRI,
   defaultJsonldContext,
@@ -14,9 +15,16 @@ import {
   lobidTypemap,
   PUBLIC_BASE_PATH,
 } from "../components/config";
-import { AdbProvider } from "@slub/edb-state-hooks";
+import { AdbProvider, store } from "@slub/edb-state-hooks";
+import { EntityDetailModal } from "../components/form/show";
+import { EditEntityModal } from "../components/form/edit/EditEntityModal";
+import { Provider } from "react-redux";
+import { AppRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime";
 
 export const parameters = {
+  nextRouter: {
+    Provider: AppRouterContext.Provider, // next 13 next 13 (using next/navigation)
+  },
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
@@ -35,39 +43,48 @@ const finalTheme = theme({
   navType: "light",
 });
 const queryClient = new QueryClient();
-export const withMuiTheme = (Story) => (
-  <AdbProvider
-    queryBuildOptions={defaultQueryBuilderOptions}
-    typeNameToTypeIRI={(name) => sladb(name).value}
-    propertyNameToIRI={(name) => sladb(name).value}
-    typeIRIToTypeName={(iri) => iri?.substring(BASE_IRI.length, iri.length)}
-    propertyIRIToPropertyName={(iri) =>
-      iri?.substring(BASE_IRI.length, iri.length)
-    }
-    createEntityIRI={createNewIRI}
-    jsonLDConfig={{
-      defaultPrefix: defaultPrefix,
-      jsonldContext: defaultJsonldContext,
-      allowUnsafeSourceIRIs: false,
-    }}
-    normDataMapping={{
-      gnd: {
-        mapping: declarativeMappings,
-        typeToTypeMap: lobidTypemap,
-      },
-    }}
-    env={{
-      publicBasePath: PUBLIC_BASE_PATH,
-      baseIRI: BASE_IRI,
-    }}
-  >
-    <ThemeProvider theme={finalTheme}>
-      <QueryClientProvider client={queryClient}>
-        <CssBaseline />
-        <Story />
-      </QueryClientProvider>
-    </ThemeProvider>
-  </AdbProvider>
-);
+
+export const withMuiTheme = (Story) => {
+  return (
+    <Provider store={store}>
+      <AdbProvider
+        queryBuildOptions={defaultQueryBuilderOptions}
+        typeNameToTypeIRI={(name) => sladb(name).value}
+        propertyNameToIRI={(name) => sladb(name).value}
+        typeIRIToTypeName={(iri) => iri?.substring(BASE_IRI.length, iri.length)}
+        propertyIRIToPropertyName={(iri) =>
+          iri?.substring(BASE_IRI.length, iri.length)
+        }
+        createEntityIRI={createNewIRI}
+        jsonLDConfig={{
+          defaultPrefix: defaultPrefix,
+          jsonldContext: defaultJsonldContext,
+          allowUnsafeSourceIRIs: false,
+        }}
+        normDataMapping={{
+          gnd: {
+            mapping: declarativeMappings,
+            typeToTypeMap: lobidTypemap,
+          },
+        }}
+        env={{
+          publicBasePath: PUBLIC_BASE_PATH,
+          baseIRI: BASE_IRI,
+        }}
+        components={{
+          EntityDetailModal: EntityDetailModal,
+          EditEntityModal: EditEntityModal,
+        }}
+      >
+        <ThemeProvider theme={finalTheme}>
+          <QueryClientProvider client={queryClient}>
+            <CssBaseline />
+            <Story />
+          </QueryClientProvider>
+        </ThemeProvider>
+      </AdbProvider>
+    </Provider>
+  );
+};
 
 export const decorators = [withMuiTheme];

apps/exhibition-live/components/content/list/TypedList.tsx

@@ -49,7 +49,6 @@ import Button from "@mui/material/Button";
 import { download, generateCsv, mkConfig } from "export-to-csv";
 import { useModifiedRouter } from "../../basic";
 import { useSettings } from "@slub/edb-state-hooks";
-import { EntityDetailModal } from "../../form/show";
 import { useTranslation } from "next-i18next";
 import {
   jsonSchema2Select,
@@ -122,6 +121,7 @@ export const TypedList = ({ typeName }: Props) => {
     jsonLDConfig: { defaultPrefix },
     typeNameToTypeIRI,
     createEntityIRI,
+    components: { EntityDetailModal },
   } = useAdbContext();
 
   const typeIRI = useMemo(() => {
@@ -241,9 +241,9 @@ export const TypedList = ({ typeName }: Props) => {
         disableInlineEditing: true,
       });
     },
-    [typeIRI],
+    [typeIRI, EntityDetailModal],
   );
-  const extendedSchema = useExtendedSchema({ typeName, classIRI: typeIRI });
+  const extendedSchema = useExtendedSchema({ typeName });
   const queryClient = useQueryClient();
   const { mutateAsync: moveToTrashAsync, isLoading: aboutToMoveToTrash } =
     useMutation(

apps/exhibition-live/components/content/list/TypedListItem.tsx

@@ -8,7 +8,6 @@ import {
   ListItemText,
 } from "@mui/material";
 import NiceModal from "@ebay/nice-modal-react";
-import { EntityDetailModal } from "../../form/show/EntityDetailModal";
 import { useAdbContext } from "@slub/edb-state-hooks";
 
 interface OwnProps {
@@ -27,6 +26,7 @@ const TypedListItem: FunctionComponent<Props> = ({
   const {
     typeIRIToTypeName,
     queryBuildOptions: { primaryFieldExtracts },
+    components: { EntityDetailModal },
   } = useAdbContext();
   const typeIRI = data["@type"] as string;
   const entityIRI = data["@id"] as string;
@@ -52,7 +52,7 @@ const TypedListItem: FunctionComponent<Props> = ({
       disableLoad,
       disableInlineEditing: true,
     });
-  }, [typeIRI, entityIRI, data, disableLoad]);
+  }, [typeIRI, entityIRI, data, disableLoad, EntityDetailModal]);
 
   return (
     <ListItem>

apps/exhibition-live/components/content/list/listHelper.tsx

@@ -11,7 +11,6 @@ import * as React from "react";
 import { TFunction } from "i18next";
 import { MouseEvent, useCallback, useMemo } from "react";
 import NiceModal from "@ebay/nice-modal-react";
-import { EntityDetailModal } from "../../form/show";
 import {
   FieldExtractDeclaration,
   PrimaryField,
@@ -98,6 +97,7 @@ export const PrimaryColumnContent = ({
 }: PrimaryColumnContentProps) => {
   const {
     queryBuildOptions: { primaryFields },
+    components: { EntityDetailModal },
   } = useAdbContext();
   const primaryContent = useMemo(() => {
     const fieldDecl = primaryFields[typeName] as PrimaryField | undefined;
@@ -118,7 +118,7 @@ export const PrimaryColumnContent = ({
         disableInlineEditing: true,
       });
     },
-    [entityIRI],
+    [entityIRI, EntityDetailModal],
   );
 
   return (

apps/exhibition-live/components/content/main/Search.tsx

@@ -23,7 +23,6 @@ import {
 } from "./GenericVirtualizedList";
 import { useTranslation } from "next-i18next";
 import NiceModal from "@ebay/nice-modal-react";
-import { EntityDetailModal } from "../../form/show";
 import { fixSparqlOrder, withDefaultPrefix } from "@slub/sparql-schema";
 import { IRIToStringFn, PrimaryFieldDeclaration } from "@slub/edb-core-types";
 
@@ -181,9 +180,8 @@ export const SearchBar = ({ relevantTypes }: { relevantTypes: string[] }) => {
   const {
     queryBuildOptions: { primaryFields },
     typeIRIToTypeName,
-    typeNameToTypeIRI,
     jsonLDConfig: { defaultPrefix },
-    propertyNameToIRI,
+    components: { EntityDetailModal },
   } = useAdbContext();
   const { t } = useTranslation();
   const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -382,12 +380,15 @@ export const SearchBar = ({ relevantTypes }: { relevantTypes: string[] }) => {
     setTabIndex(newTabIndex);
   };
 
-  const showEntry = useCallback((entityIRI: string) => {
-    NiceModal.show(EntityDetailModal, {
-      entityIRI,
-      disableInlineEditing: true,
-    });
-  }, []);
+  const showEntry = useCallback(
+    (entityIRI: string) => {
+      NiceModal.show(EntityDetailModal, {
+        entityIRI,
+        disableInlineEditing: true,
+      });
+    },
+    [EntityDetailModal],
+  );
 
   return (
     <Grid container direction={"row"} spacing={3}>

apps/exhibition-live/components/content/main/TypedForm.tsx

@@ -106,7 +106,7 @@ const TypedForm = ({ typeName, entityIRI, classIRI }: MainFormProps) => {
     },
     [router, typeIRIToTypeName],
   );
-  const loadedSchema = useExtendedSchema({ typeName, classIRI });
+  const loadedSchema = useExtendedSchema({ typeName });
 
   const { width: rightDrawerWidth, open: rightDrawerOpen } =
     useRightDrawerState();

apps/exhibition-live/components/form/EditExhibitionJSONForm.stories.tsx

@@ -11,7 +11,7 @@ import {
 } from "./formConfigs";
 import NewSemanticJsonForm from "./SemanticJsonForm";
 
-export const queryClient = new QueryClient();
+const queryClient = new QueryClient();
 
 const classIRI = sladb.Exhibition.value;
 const exampleData = {
@@ -23,7 +23,7 @@ const exampleData = {
 const SemanticJsonFormOneShot = () => {
   const [data, setData] = useState<any>(exampleData);
   const typeName = "Exhibition";
-  const loadedSchema = useExtendedSchema({ typeName, classIRI });
+  const loadedSchema = useExtendedSchema({ typeName });
 
   return (
     <NewSemanticJsonForm

apps/exhibition-live/components/form/SemanticJSONFormNoOps.stories.tsx

@@ -44,7 +44,7 @@ const SemanticJsonFormNoOperationsExample = ({
 }) => {
   const { typeIRI, data: initialData } = makeExampleData(typeName, defaultData);
   const [data, setData] = useState<any>(initialData);
-  const loadedSchema = useExtendedSchema({ typeName, classIRI: typeIRI });
+  const loadedSchema = useExtendedSchema({ typeName });
   const uischema = useMemo(
     () => uischemata[typeName] || uischemas[typeName],
     [typeName],
@@ -72,7 +72,7 @@ const exhibitionExample = makeExampleData("Exhibition", {
 export const SemanticJsonFormNoOperationsExhibition = () => {
   const { typeIRI, typeName, data: initialData } = exhibitionExample;
   const [data, setData] = useState<any>(initialData);
-  const loadedSchema = useExtendedSchema({ typeName, classIRI: typeIRI });
+  const loadedSchema = useExtendedSchema({ typeName });
   const uischema = useMemo(
     () => uischemata[typeName] || uischemas[typeName],
     [typeName],

apps/exhibition-live/components/form/SemanticJsonForm.tsx

@@ -13,17 +13,16 @@ import React, {
 } from "react";
 
 import GenericModal from "./GenericModal";
-import { useCRUDWithQueryClient } from "@slub/edb-state-hooks";
+import { useAdbContext, useCRUDWithQueryClient } from "@slub/edb-state-hooks";
 import { useSnackbar } from "notistack";
 import { ChangeCause, SemanticJsonFormNoOps } from "./SemanticJsonFormNoOps";
 import { SemanticJsonFormToolbar } from "./SemanticJsonFormToolbar";
 import { useSettings } from "@slub/edb-state-hooks";
 import { useLoadQuery, useQueryKeyResolver } from "@slub/edb-state-hooks";
 import { Backdrop, Box, CircularProgress } from "@mui/material";
-import { EntityDetailModal } from "./show";
 import { create } from "zustand";
 import { useTranslation } from "next-i18next";
-import { cleanJSONLD } from "@slub/sparql-schema";
+import { cleanJSONLD, LoadResult } from "@slub/sparql-schema";
 import { FormDebuggingTools } from "@slub/edb-debug-utils";
 
 export interface SemanticJsonFormsProps {
@@ -101,6 +100,10 @@ const SemanticJsonForm: FunctionComponent<SemanticJsonFormsProps> = ({
   );
   const { enqueueSnackbar } = useSnackbar();
 
+  const {
+    components: { EntityDetailModal },
+  } = useAdbContext();
+
   const { saveMutation, removeMutation } = useCRUDWithQueryClient({
     entityIRI,
     typeIRI,
@@ -121,16 +124,18 @@ const SemanticJsonForm: FunctionComponent<SemanticJsonFormsProps> = ({
 
   const refetch = useCallback(
     () =>
-      loadEntity(entityIRI, typeIRI, schema).then((loadResult) => {
-        if (loadResult.document) {
-          console.log("(refetch) result from root load");
-          const data = loadResult.document;
-          updateSourceToTargets(entityIRI, loadResult.subjects);
-          if (!data["@id"] || !data["@type"]) return;
-          onChange(data);
-          return data;
-        }
-      }),
+      loadEntity(entityIRI, typeIRI, schema).then(
+        (loadResult: LoadResult | null) => {
+          if (loadResult !== null && loadResult?.document) {
+            console.log("(refetch) result from root load");
+            const data = loadResult.document;
+            updateSourceToTargets(entityIRI, loadResult.subjects);
+            if (!data["@id"] || !data["@type"]) return;
+            onChange(data);
+            return data;
+          }
+        },
+      ),
     [loadEntity, entityIRI, typeIRI, schema, onChange, updateSourceToTargets],
   );
 
@@ -251,7 +256,7 @@ const SemanticJsonForm: FunctionComponent<SemanticJsonFormsProps> = ({
       entityIRI: entityIRI,
       readonly: true,
     });
-  }, [typeIRI, entityIRI]);
+  }, [typeIRI, entityIRI, EntityDetailModal]);
 
   const handleOnChange = useCallback(
     (data: any, reason: ChangeCause) => {

apps/exhibition-live/components/form/SemanticJsonFormNoOps.tsx

@@ -58,6 +58,7 @@ import { ErrorObject } from "ajv";
 import { OptionsModal } from "./OptionsModal";
 import { useTranslation } from "next-i18next";
 import { MarkdownTextFieldRenderer } from "@slub/edb-markdown-renderer";
+import { JsonView } from "react-json-view-lite";
 
 export type CRUDOpsType = {
   load: () => Promise<void>;