update mantine and Default cell renderers

uc-cdis · Jan 15, 2025 · 79af93a · 79af93a
1 parent de1db73
commit 79af93a
Show file tree

Hide file tree

Showing 11 changed files with 683 additions and 470 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,12 +36,12 @@
     "@grafana/faro-react": "^1.9.1",
     "@grafana/faro-web-sdk": "^1.9.1",
     "@grafana/faro-web-tracing": "^1.9.1",
-    "@mantine/core": "^7.15.2",
-    "@mantine/dates": "^7.15.2",
-    "@mantine/form": "^7.15.2",
-    "@mantine/hooks": "^7.15.2",
-    "@mantine/modals": "^7.15.2",
-    "@mantine/notifications": "^7.15.2",
+    "@mantine/core": "^7.16.0",
+    "@mantine/dates": "^7.16.0",
+    "@mantine/form": "^7.16.0",
+    "@mantine/hooks": "^7.16.0",
+    "@mantine/modals": "^7.16.0",
+    "@mantine/notifications": "^7.16.0",
     "classnames": "^2.3.1",
     "colorette": "^2.0.20",
     "cookies-next": "4.3.0",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gen3/core",
-  "version": "0.10.71",
+  "version": "0.10.72",
   "author": "CTDS",
   "description": "Core module for Gen3.2. Packages provides an interface for interacting with the gen3 API and a redux store for managing state.",
   "license": "Apache-2.0",

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -49,16 +49,17 @@
     "os": false
   },
   "dependencies": {
+    "@gen3/core": "^0.10.71",
     "@graphiql/react": "^0.23.1",
     "@hello-pangea/dnd": "^17.0.0",
     "@iconify/react": "^5.0.2",
     "@kbox-labs/react-echarts": "^1.4.0",
-    "@mantine/core": "^7.15.2",
-    "@mantine/dates": "^7.15.2",
-    "@mantine/form": "^7.15.2",
-    "@mantine/hooks": "^7.15.2",
-    "@mantine/modals": "^7.15.2",
-    "@mantine/notifications": "^7.15.2",
+    "@mantine/core": "^7.16.0",
+    "@mantine/dates": "^7.16.0",
+    "@mantine/form": "^7.16.0",
+    "@mantine/hooks": "^7.16.0",
+    "@mantine/modals": "^7.16.0",
+    "@mantine/notifications": "^7.16.0",
     "@mdx-js/loader": "^2.1.5",
     "@mdx-js/mdx": "^2.1.5",
     "@next/mdx": "^14.1.1",
@@ -114,6 +115,7 @@
     "yaml": "^2.3.4"
   },
   "devDependencies": {
+
     "@iconify/tools": "^4.0.7",
     "@iconify/types": "^2.0.0",
     "@svgr/webpack": "^8.1.0",
@@ -146,7 +148,7 @@
     "swr": "^2.2.5"
   },
   "peerDependencies": {
-    "@gen3/core": "^0.10.71",
+
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.16"

diff --git a/packages/frontend/src/components/Providers/Gen3Provider.tsx b/packages/frontend/src/components/Providers/Gen3Provider.tsx
@@ -11,16 +11,14 @@ import { SessionConfiguration } from '../../lib/session/types';
 import { Gen3ModalsProvider, type ModalsConfig } from '../Modals';
 
 interface Gen3ProviderProps {
-  colors: Record<string, TenStringArray>;
   icons: Array<RegisteredIcons>;
-  fonts: Fonts;
   sessionConfig: SessionConfiguration;
   modalsConfig: ModalsConfig;
   children?: ReactNode | undefined;
 }
 
 // Define theme for mantine v7
-const createMantineTheme = (
+export const createMantineTheme = (
   fonts: Fonts,
   colors: Record<string, TenStringArray>,
 ) => {
@@ -82,9 +80,7 @@ const createMantineTheme = (
  * inactivity limits for session timeouts.
  */
 const Gen3Provider = ({
-  colors,
   icons,
-  fonts,
   sessionConfig,
   modalsConfig,
   children,
@@ -93,20 +89,16 @@ const Gen3Provider = ({
     icons.forEach((i) => addCollection(i));
   }, [icons]);
 
-  const theme = createMantineTheme(fonts, colors);
-
   return (
     <CoreProvider>
-      <MantineProvider theme={theme}>
-        <ModalsProvider>
-          <Notifications />
-          <SessionProvider {...sessionConfig}>
-            <Gen3ModalsProvider config={modalsConfig}>
-              {children}
-            </Gen3ModalsProvider>
-          </SessionProvider>
-        </ModalsProvider>
-      </MantineProvider>
+      <ModalsProvider>
+        <Notifications />
+        <SessionProvider {...sessionConfig}>
+          <Gen3ModalsProvider config={modalsConfig}>
+            {children}
+          </Gen3ModalsProvider>
+        </SessionProvider>
+      </ModalsProvider>
     </CoreProvider>
   );
 };

diff --git a/packages/frontend/src/index.ts b/packages/frontend/src/index.ts
@@ -23,7 +23,9 @@ import { registerMetadataSchemaApp } from './features/Dictionary';
 import '@gen3/core';
 
 // export Gen3 data UI standard pages
-import Gen3Provider from './components/Providers/Gen3Provider';
+import Gen3Provider, {
+  createMantineTheme,
+} from './components/Providers/Gen3Provider';
 import DiscoveryPage from './pages/Discovery/Discovery';
 import { DiscoveryPageGetServerSideProps } from './pages/Discovery/data';
 
@@ -127,6 +129,7 @@ export {
   sessionLogout,
   credentialsLogin,
   credentialsLogout,
+  createMantineTheme,
   AiSearchPage,
   AISearchPageGetServerSideProps,
   CrosswalkPage,

diff --git a/packages/sampleCommons/next.config.js b/packages/sampleCommons/next.config.js
@@ -28,6 +28,7 @@ const nextConfig = {
     instrumentationHook: true,
   },
   pageExtensions: ['mdx', 'md', 'jsx', 'js', 'tsx', 'ts'],
+  transpilePackages: ['@gen3/core', '@gen3/frontend'],
   basePath: basePath,
   webpack: (config) => {
     config.infrastructureLogging = {

diff --git a/packages/sampleCommons/package.json b/packages/sampleCommons/package.json
@@ -20,12 +20,12 @@
     "@fontsource/source-sans-pro": "^5.0.8",
     "@gen3/core": "file:../core",
     "@gen3/frontend": "file:../frontend",
-    "@mantine/core": "^7.15.2",
-    "@mantine/dates": "^7.15.2",
-    "@mantine/form": "^7.15.2",
-    "@mantine/hooks": "^7.15.2",
-    "@mantine/modals": "^7.15.2",
-    "@mantine/notifications": "^7.15.2",
+    "@mantine/core": "^7.16.0",
+    "@mantine/dates": "^7.16.0",
+    "@mantine/form": "^7.16.0",
+    "@mantine/hooks": "^7.16.0",
+    "@mantine/modals": "^7.16.0",
+    "@mantine/notifications": "^7.16.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "cookies-next": "^4.3.0",

diff --git a/packages/sampleCommons/src/lib/Discovery/CustomRowRenderers.tsx b/packages/sampleCommons/src/lib/Discovery/CustomRowRenderers.tsx
@@ -41,7 +41,7 @@ const DetailsWithTagsRowRenderer = (
         </Text>
 
         <div className="flex space-x-6 space-y-6 flex-wrap">
-          {row.original?.tags.map((tagInfo: TagData) => {
+          {row.original?.tags?.map((tagInfo: TagData) => {
             const { color, display, label } = getTagInfo(tagInfo, config.tags);
 
             if (tagInfo.name === '') return null; // no tag

diff --git a/packages/sampleCommons/src/pages/_app.tsx b/packages/sampleCommons/src/pages/_app.tsx
@@ -1,8 +1,7 @@
 import App, { AppProps, AppContext, AppInitialProps } from 'next/app';
-import React, { useEffect, useRef } from 'react';
-
+import React, { useEffect, useMemo, useRef } from 'react';
+import { MantineProvider } from '@mantine/core';
 import { Faro, FaroErrorBoundary, withFaroProfiler } from '@grafana/faro-react';
-
 import { initGrafanaFaro } from '../lib/Grafana/grafana';
 
 import {
@@ -11,6 +10,7 @@ import {
   type ModalsConfig,
   RegisteredIcons,
   Fonts,
+  createMantineTheme,
   SessionConfiguration,
   // registerCohortDiscoveryApp,
   registerCohortDiversityApp,
@@ -28,7 +28,7 @@ import '@fontsource/poppins';
 
 import { setDRSHostnames } from '@gen3/core';
 import drsHostnames from '../../config/drsHostnames.json';
-import { loadContent } from '../lib/content/loadContent';
+import { loadContent } from '@/lib/content/loadContent';
 
 if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
@@ -78,17 +78,22 @@ const Gen3App = ({
     // }
   }, []);
 
+  const theme = useMemo(
+    () => createMantineTheme(themeFonts, colors),
+    [themeFonts, colors],
+  );
+
   return (
     <FaroErrorBoundary>
-      <Gen3Provider
-        colors={colors}
-        icons={icons}
-        fonts={themeFonts}
-        sessionConfig={sessionConfig}
-        modalsConfig={modalsConfig}
-      >
-        <Component {...pageProps} />
-      </Gen3Provider>
+      <MantineProvider theme={theme}>
+        <Gen3Provider
+          icons={icons}
+          sessionConfig={sessionConfig}
+          modalsConfig={modalsConfig}
+        >
+          <Component {...pageProps} />
+        </Gen3Provider>
+      </MantineProvider>
     </FaroErrorBoundary>
   );
 };

diff --git a/packages/tools/package.json b/packages/tools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gen3/toolsff",
-  "version": "0.10.71",
+  "version": "0.10.72",
   "description": "tools for processing Gen3 commons content: color theme, icons",
   "main": "index.js",
   "type": "module",