feat: setup PDS | pbo,mkn,twe

pboeder · pboeder · commit 8e2668d6a1cd · 2023-05-10T17:11:51.000+02:00
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "test:ci": "yarn prettier:ci && yarn tsc --noEmit --noEmitHelpers && yarn lint:ci"
   },
   "dependencies": {
+    "@porsche-design-system/components-react": "3.0.0-rc.2",
     "@types/node": "20.1.2",
     "@types/react": "18.2.6",
     "@types/react-dom": "18.2.4",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import "./globals.css";
+import { AppProvider } from "../components/AppProvider";
 
 export const metadata = {
   title: "Create Next App",
@@ -8,7 +9,9 @@ export const metadata = {
 const RootLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <AppProvider>{children}</AppProvider>
+      </body>
     </html>
   );
 };
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,10 +1,12 @@
 import Image from "next/image";
 import styles from "./page.module.css";
+import { Heading } from "../components/01_atoms/Heading";
 
 const Home: React.FC = () => {
   return (
     <main className={styles.main}>
       <div className={styles.description}>
+        <Heading size="large">Hello</Heading>
         <p>
           Get started by editing&nbsp;
           <code className={styles.code}>src/app/page.tsx</code>
diff --git a/src/components/01_atoms/Heading.tsx b/src/components/01_atoms/Heading.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { PHeading } from "@porsche-design-system/components-react/ssr";
+import { ComponentProps } from "react";
+
+export const Heading: React.FC<
+  React.PropsWithChildren<ComponentProps<typeof PHeading>>
+> = ({ children, ...props }) => {
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return <PHeading {...props}>{children}</PHeading>;
+};
diff --git a/src/components/AppProvider.tsx b/src/components/AppProvider.tsx
@@ -0,0 +1,8 @@
+"use client";
+import { PorscheDesignSystemProvider } from "@porsche-design-system/components-react/ssr";
+
+export const AppProvider: React.FC<React.PropsWithChildren> = ({
+  children,
+}) => {
+  return <PorscheDesignSystemProvider>{children}</PorscheDesignSystemProvider>;
+};
diff --git a/tsconfig.json b/tsconfig.json
@@ -19,9 +19,6 @@
         "name": "next"
       }
     ],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]
diff --git a/yarn.lock b/yarn.lock
@@ -253,6 +253,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@porsche-design-system/components-js@npm:3.0.0-rc.2":
+  version: 3.0.0-rc.2
+  resolution: "@porsche-design-system/components-js@npm:3.0.0-rc.2"
+  checksum: b8a1413c4939aedf3a4408d63efc3170800a9d697f4b1784af8c2235477f1cfbcb8fa6f511d318b462ed925825fe80572fe99d9d14e9f051e117d9b06d891d66
+  languageName: node
+  linkType: hard
+
+"@porsche-design-system/components-react@npm:3.0.0-rc.2":
+  version: 3.0.0-rc.2
+  resolution: "@porsche-design-system/components-react@npm:3.0.0-rc.2"
+  dependencies:
+    "@porsche-design-system/components-js": 3.0.0-rc.2
+  peerDependencies:
+    react: ">=17.0.0 <19.0.0"
+    react-dom: ">=17.0.0 <19.0.0"
+  bin:
+    patchRemixRunProcessBrowserGlobalIdentifier: bin/patchRemixRunProcessBrowserGlobalIdentifier.js
+  checksum: 99d4d67e732a228485cf6e7469bce0b88f0b98ccd8dd4fa8b6d93088ddc1d996a2b582ebf85ed1e623d8c02b63572e7916cd93c3c26314d581a812e4da4906fb
+  languageName: node
+  linkType: hard
+
 "@porscheofficial/eslint-config-porschedigital-base@npm:3.0.1":
   version: 3.0.1
   resolution: "@porscheofficial/eslint-config-porschedigital-base@npm:3.0.1"
@@ -3240,6 +3261,7 @@ __metadata:
     "@mdx-js/react": 2.3.0
     "@next/eslint-plugin-next": 13.4.1
     "@next/mdx": 13.4.1
+    "@porsche-design-system/components-react": 3.0.0-rc.2
     "@porscheofficial/eslint-config-porschedigital-react": 3.0.1
     "@porscheofficial/prettier-config-porschedigital": 3.0.1
     "@types/mdx": 2.0.5
