Merge pull request #2266 from dxc-technology/jialecl-next-fix

Emotion and next.js compatibility

Author: Mil4n0r

apps/website/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

apps/website/next.config.js

@@ -13,6 +13,9 @@ module.exports = {
     return config;
   },
   reactStrictMode: true,
+  compiler: {
+    emotion: true,
+  },
   assetPrefix:
     process.env.NODE_ENV === "production"
       ? `/halstack/${process.env.NEXT_PUBLIC_SITE_VERSION?.split(".")[0]}`
@@ -25,6 +28,6 @@ module.exports = {
     "@cloudscape-design/components",
     "@cloudscape-design/component-toolkit",
     "@cloudscape-design/theming-runtime",
-    "react-data-grid",
+    "@dxc-technology/halstack-react",
   ],
 };

apps/website/package.json

@@ -16,7 +16,7 @@
     "@emotion/styled": "^11.14.0",
     "@radix-ui/react-popover": "^1.0.7",
     "cross-env": "^7.0.3",
-    "next": "^14.2.30",
+    "next": "^15.4.5",
     "raw-loader": "^4.0.2",
     "react": "^18",
     "react-color": "^2.19.3",

apps/website/screens/components/data-grid/DataGridPageLayout.tsx

@@ -15,12 +15,6 @@ const DataGridPageHeading = ({ children }: { children: ReactNode }) => {
       <PageHeading>
         <DxcFlex direction="column" gap="var(--spacing-gap-xl)">
           <ComponentHeading name="Data Grid" />
-          <DxcAlert
-            title="Issues"
-            semantic="warning"
-            message={{ text: "There are known styling issues with sortable columns when used in a NextJS app." }}
-            closable={false}
-          />
           <DxcParagraph>
             The datagrid component is used to display and manage large sets of data in a tabular format, allowing users
             to sort, filter, and interact with the data efficiently.