Upgrade PnPjsExample to SPFx 1.20.0 and switched to fluent ui instead…

… of office-ui-fabric due to compatibility issue (#5315)

samples/react-pnp-js-sample/.devcontainer/devcontainer.json

@@ -1,7 +1,7 @@
 // For more information on how to run this SPFx project in a VS Code Remote Container, please visit https://aka.ms/spfx-devcontainer
 {
-	"name": "SPFx 1.15.2",
-	"image": "docker.io/m365pnp/spfx:1.15.2",
+	"name": "SPFx 1.20.0",
+	"image": "docker.io/m365pnp/spfx:1.20.0",
 	// Set *default* container specific settings.json values on container create.
 	"settings": {},
 	// Add the IDs of extensions you want installed when the container is created.

samples/react-pnp-js-sample/.yo-rc.json

@@ -3,12 +3,17 @@
     "plusBeta": true,
     "isCreatingSolution": true,
     "environment": "spo",
-    "version": "1.15.2",
+    "version": "1.20.0",
+    "nodeVersion": "18.20.3",
     "libraryName": "spfx-pnp-js-example",
     "libraryId": "d20ceaf6-094b-4086-b7a0-85761bc8be23",
     "packageManager": "npm",
     "solutionShortDescription": "spfx-pnp-js-example description",
     "isDomainIsolated": false,
-    "componentType": "webpart"
+    "componentType": "webpart",
+    "sdkVersions": {
+      "@microsoft/teams-js": "2.24.0",
+      "@microsoft/microsoft-graph-client": "3.0.2"
+    }
   }
 }

samples/react-pnp-js-sample/README.md

@@ -15,8 +15,8 @@ This implementation refactors to take aspects out and utilize and showcase PnPjs
 | Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
 |Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility.   |
 
-![SPFx 1.15.2](https://img.shields.io/badge/SPFx-1.15.2-green.svg)
-![Node.js v14 | v12| v16](https://img.shields.io/badge/Node.js-v12%20%7C%20v14%20%7C%20v16-green.svg)
+![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
+![Node.js v18](https://img.shields.io/badge/Node.js-v18-green.svg)
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Incompatible with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg)
 ![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
@@ -35,9 +35,14 @@ For more information about SPFx compatibility, please refer to <https://aka.ms/s
 <!-- CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
 <!-- prettier-ignore-start -->
 <!-- markdownlint-disable -->
-|[![Julie Turner](https://avatars.githubusercontent.com/u/7570936?v=4&s=100)](https://github.com/juliemturner)|[![Beau Cameron](https://avatars.githubusercontent.com/u/7944457?v=4&s=100)](https://github.com/bcameron1231)|
-|:--:|:--:|
-**[Julie Turner](https://github.com/juliemturner)**|**[Beau Cameron](https://github.com/bcameron1231)**|
+|[![Julie Turner](https://avatars.githubusercontent.com/u/7570936?v=4&s=100)](https://github.com/juliemturner)|[![Beau Cameron](https://avatars.githubusercontent.com/u/7944457?v=4&s=100)](https://github.com/bcameron1231) 
+|:--:|:--:| 
+**[Julie Turner](https://github.com/juliemturner)**|**[Beau Cameron](https://github.com/bcameron1231)**
+[![Gretchun Kim](https://avatars.githubusercontent.com/u/8564035?v=4&s=100)](https://github.com/juliemturner)
+**[Gretchun Kim](https://github.com/gretchunkim)**
+
+
+
 <!-- markdownlint-restore -->
 <!-- prettier-ignore-end -->
 <!-- CONTRIBUTORS-LIST:END -->
@@ -47,6 +52,7 @@ For more information about SPFx compatibility, please refer to <https://aka.ms/s
 
 Version|Date|Comments
 -------|----|--------
+1.3| Oct 23, 2024| Upgraded SPFx to 1.20.0 
 1.2|Feb 14, 2023|Fixed context handling
 1.1|Aug 29, 2022|Bug fix & dependency updates
 1.0|Jan 13, 2022|Initial release

samples/react-pnp-js-sample/assets/sample.json

@@ -10,7 +10,7 @@
             "Shows how to use PnPjs in a React web part"
         ],
         "creationDateTime": "2023-02-18",
-        "updateDateTime": "2023-02-18",
+        "updateDateTime": "2024-10-23",
         "products": [
             "SharePoint"
         ],
@@ -21,7 +21,7 @@
             },
             {
                 "key": "SPFX-VERSION",
-                "value": "1.15.2"
+                "value": "1.20.0"
             }
         ],
         "thumbnails": [
@@ -42,7 +42,13 @@
                 "gitHubAccount": "bcameron1231",
                 "name": "Beau Cameron",
                 "pictureUrl": "https://github.com/bcameron1231.png"
+            },
+            {
+                "gitHubAccount": "gretchunkim",
+                "name": "Gretchun Kim",
+                "pictureUrl": "https://github.com/gretchunkim.png"
             }
+
         ],
         "references": [
             {

samples/react-pnp-js-sample/config/sass.json

@@ -0,0 +1,3 @@
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}

samples/react-pnp-js-sample/config/serve.json

@@ -2,5 +2,5 @@
   "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://enter-your-SharePoint-site/_layouts/workbench.aspx"
+  "initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"
 }