Housekeeping/components 3.24.0

app/phn-header/page.tsx

@@ -1,19 +1,19 @@
 'use client';
 
 import { PButton, PIcon, PLinkPure } from '@porsche-design-system/components-react/ssr';
-import React, { useEffect } from 'react';
-import { defineCustomElements } from '@porschehn/navigation/loader';
+import React from 'react';
+// import { defineCustomElements } from '@porschehn/navigation/loader';
 
 export default function PhnHeaderPage() {
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      defineCustomElements(window);
-    }
-  }, []);
+  // useEffect(() => {
+  //   if (typeof window !== 'undefined') {
+  //     defineCustomElements(window);
+  //   }
+  // }, []);
 
   return (
     <>
-      <phn-header env="preview" locale="de-DE" style={{ position: 'absolute', left: 0, right: 0 }} />
+      {/*<phn-header env="preview" locale="de-DE" style={{ position: 'absolute', left: 0, right: 0 }} />*/}
 
       <div style={{ paddingTop: 180 }}>
         <PButton>Some PButton</PButton>

app/styles/page.tsx

@@ -0,0 +1,10 @@
+import { buttonStyle } from './vanilla-extract.css';
+
+export default function StylesPage() {
+    return (
+        <>
+            <p>Vanilla Extract Test</p>
+            <button className={buttonStyle}>Button with hover and focus style</button>
+        </>
+    );
+};

app/styles/vanilla-extract.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+import { getHoverStyle, getFocusStyle } from '@porsche-design-system/components-react/styles/vanilla-extract';
+
+export const buttonStyle = style({
+  backgroundColor: 'white',
+  ...getFocusStyle(),
+  ...getHoverStyle(),
+});

components/header.tsx

@@ -2,7 +2,7 @@ import { PDivider, PHeadline } from '@porsche-design-system/components-react/ssr
 import React from 'react';
 import { PrefixedLink } from './prefixedLink';
 
-export const Header = (): JSX.Element => (
+export const Header = () => (
   <>
     <PHeadline variant="headline-2" align="center">
       Example usage of the Porsche-Design-System NextJS
@@ -14,6 +14,7 @@ export const Header = (): JSX.Element => (
     <PrefixedLink href="/utilities">Utilities</PrefixedLink>
     <PrefixedLink href="/phn-header">Phn Header</PrefixedLink>
     <PrefixedLink href="/layout-shift">Layout Shift</PrefixedLink>
+    <PrefixedLink href="/styles">Styles</PrefixedLink>
 
     <PDivider className="divider" />
   </>

components/prefixedLink.tsx

@@ -2,7 +2,7 @@ import { PLinkPure } from '@porsche-design-system/components-react/ssr';
 import Link, { LinkProps } from 'next/link';
 import React, { PropsWithChildren } from 'react';
 
-export const PrefixedLink = ({ href, ...props }: PropsWithChildren<LinkProps>): JSX.Element => (
+export const PrefixedLink = ({ href, ...props }: PropsWithChildren<LinkProps>) => (
   <PLinkPure>
     <Link href={href} as={`${process.env.BASE_PATH ?? ''}${href}`} {...props} />
   </PLinkPure>

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/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.js

@@ -1,7 +1,13 @@
+const {
+  createVanillaExtractPlugin
+} = require('@vanilla-extract/next-plugin');
+
+const withVanillaExtract = createVanillaExtractPlugin();
+
 const BASE_PATH = process.env.CI ? '/sample-integration-nextjs' : '';
 
 /** @type {import('next').NextConfig} */
-module.exports = {
+const nextConfig = {
   output: 'export',
   assetPrefix: BASE_PATH,
   env: {
@@ -15,3 +21,5 @@ module.exports = {
     return config;
   },
 };
+
+module.exports = withVanillaExtract(nextConfig);

package.json

@@ -14,29 +14,31 @@
     "clean:build": "rm -rf ./out && rm -rf ./.next"
   },
   "dependencies": {
-    "@porsche-design-system/components-react": "3.20.0-rc.1",
+    "@porsche-design-system/components-react": "3.24.0",
     "@porsche-design-system/utilities": "5.4.1",
-    "@porschehn/navigation": "3.3.0",
-    "next": "14.2.5",
-    "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "next": "15.1.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
     "@porsche-design-system/prettier-config": "^1.0.0",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.6",
-    "@types/node": "^20.12.8",
-    "@types/react": "^18.3.1",
-    "@types/react-dom": "^18.3.0",
-    "core-js": "^3.37.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/node": "^22.10.5",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
+    "@vanilla-extract/css": "^1.17.0",
+    "@vanilla-extract/next-plugin": "^2.4.8",
+    "core-js": "^3.40.0",
     "ignore-loader": "^0.1.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "prettier": "^3.2.5",
+    "prettier": "^3.4.2",
     "regenerator-runtime": "0.14.1",
-    "sass": "^1.76.0",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.4.5"
+    "sass": "^1.83.1",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.7.2"
   },
   "volta": {
     "node": "20.10.0",

tsconfig.json

@@ -13,7 +13,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",