pnp · hugoabernier · Oct 21, 2024 · Oct 15, 2024 · Oct 15, 2024 · Oct 19, 2024
diff --git a/samples/react-carousel/.devcontainer/devcontainer.json b/samples/react-carousel/.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.12.1",
-	"image": "docker.io/m365pnp/spfx:1.12.1",
+	"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.
@@ -21,7 +21,7 @@
 			"onAutoForward": "silent",
 			"requireLocalPort": true
 		},
-		// Not needed for SPFx>= 1.12.1 
+		// Not needed for SPFx>= 1.12.1
 		// "5432": {
 		// 	"protocol": "https",
 		// 	"label": "Workbench",
@@ -36,4 +36,4 @@
 	},
 	"postCreateCommand": "bash .devcontainer/spfx-startup.sh",
 	"remoteUser": "node"
-}
+}
diff --git a/samples/react-carousel/.eslintrc.js b/samples/react-carousel/.eslintrc.js
@@ -0,0 +1,5 @@
+require('@rushstack/eslint-config/patch/modern-module-resolution');
+module.exports = {
+  extends: ['@microsoft/eslint-config-spfx/lib/profiles/react'],
+  parserOptions: { tsconfigRootDir: __dirname }
+};
diff --git a/samples/react-carousel/.gitignore b/samples/react-carousel/.gitignore
@@ -13,6 +13,7 @@ solution
 temp
 *.sppkg
 release
+.heft
 
 # Coverage directory used by tools like istanbul
 coverage

diff --git a/samples/react-carousel/.npmignore b/samples/react-carousel/.npmignore
diff --git a/samples/react-carousel/.nvmrc b/samples/react-carousel/.nvmrc
@@ -0,0 +1 @@
+20.16.0
diff --git a/samples/react-carousel/.yo-rc.json b/samples/react-carousel/.yo-rc.json
@@ -1,6 +1,13 @@
 {
   "@microsoft/generator-sharepoint": {
-    "version": "1.12.1",
+    "@microsoft/generator-sharepoint": {
+      "nodeVersion": "20.16.0"
+    },
+    "sdksVersions": {
+      "@microsoft/microsoft-graph-client": "3.0.2",
+      "@microsoft/teams-js": "2.24.0"
+    },
+    "version": "1.20.0",
     "libraryName": "react-carousel",
     "libraryId": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
     "environment": "spo",

diff --git a/samples/react-carousel/README.md b/samples/react-carousel/README.md
@@ -1,20 +1,3 @@
----
-page_type: sample
-products:
-- office-sp
-- sharepoint
-languages:
-- javascript
-- typescript
-extensions:
-  contentType: samples
-  technologies:
-  - SharePoint Framework
-  platforms:
-  - React
-  createdDate: 06/17/2016 12:00:00 AM
----
-
 # Images and Videos in a Carousel
 
 ## Summary
@@ -32,8 +15,8 @@ It uses Microsoft Graph API to get image/video url and use PnPjs to load files f
 | 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.12.1](https://img.shields.io/badge/SPFx-1.12.1-green.svg)
-![Node.js v14 | v12 | v10](https://img.shields.io/badge/Node.js-v14%20%7C%20v12%20%7C%20v10-green.svg) 
+![SPFx 1.20.0](https://img.shields.io/badge/SPFx-1.20.0-green.svg)
+![Node.js v20 ](https://img.shields.io/badge/Node.js-v20-green.svg) 
 ![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
 ![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
 ![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")
@@ -66,10 +49,11 @@ For all available methods, go [here](https://react-slick.neostack.com/docs/api#m
 
 ## Contributors
 
-* [João Mendes](https://github.com/joaojmendes)
+- [João Mendes](https://github.com/joaojmendes)
 - [Rahul Suryawanshi](https://github.com/Rahul)
 - [Harsha Vardhini](https://github.com/Harshagracy) 
 - [Giuliano De Luca](https://github.com/giuleon)
+- [Mohammad Amer](https://github.com/mohammadamer)
 
 ## Version history
 
@@ -79,7 +63,7 @@ Version|Date|Comments
 2.0.0|June 17, 2020|Upgraded to SPFx v1.10.0 (Rahul Suryawanshi)
 3.0.0|October 31, 2020|Upgraded to SPFx v1.11.0 (Don Kirkham)
 4.0.0|June 10, 2021|Upgraded to SPFx v1.12.1 (Giuliano De Luca)
-
+5.0.0|October 15, 2024|Upgraded to SPFx v1.20.0 (Mohammad Amer)
 
 ## Minimal Path to Awesome
 

diff --git a/samples/react-carousel/assets/sample.json b/samples/react-carousel/assets/sample.json
@@ -9,7 +9,7 @@
       "This web part show images and videos in carousel"
     ],
     "creationDateTime": "2020-10-31",
-    "updateDateTime": "2020-06-12",
+    "updateDateTime": "2024-10-15",
     "products": [
       "SharePoint"
     ],
@@ -20,7 +20,7 @@
       },
       {
         "key": "SPFX-VERSION",
-        "value": "1.12.1"
+        "value": "1.20.0"
       },
       {
         "key": "SPFX-TEAMSTAB",

diff --git a/samples/react-carousel/config/copy-assets.json b/samples/react-carousel/config/copy-assets.json
diff --git a/samples/react-carousel/config/package-solution.json b/samples/react-carousel/config/package-solution.json
@@ -3,7 +3,7 @@
 	"solution": {
 		"name": "react-carousel-client-side-solution",
 		"id": "263a1d21-f4c7-4a46-a364-e5f995286b9b",
-		"version": "4.0.0.0",
+		"version": "5.0.0.0",
 		"includeClientSideAssets": true,
 		"skipFeatureDeployment": true,
 		"isDomainIsolated": false,
@@ -13,7 +13,29 @@
 			"termsOfUseUrl": "https://contoso.com/terms-of-use",
 			"websiteUrl": "https://contoso.com/my-app",
 			"mpnId": "m365pnp"
-		}
+		},
+		"metadata": {
+			"shortDescription": {
+			  "default": "react-carousel shows images and videos in carousel"
+			},
+			"longDescription": {
+			  "default": "react-carousel shows images and videos in carousel"
+			},
+			"screenshotPaths": [],
+			"videoUrl": "",
+			"categories": []
+		  },
+		  "features": [
+			{
+			  "title": "react-carousel CarouselWebPart Feature",
+			  "description": "The feature that activates CarouselWebPart from the react-carousel solution.",
+			  "id": "6d2b91a3-2b33-492b-a372-f7d97dfc06cd",
+			  "version": "4.0.0.0",
+			  "componentIds": [
+				"6d2b91a3-2b33-492b-a372-f7d97dfc06cd"
+			  ]
+			}
+		  ]
 	},
 	"paths": {
 		"zippedPackage": "solution/react-carousel.sppkg"

diff --git a/samples/react-carousel/config/sass.json b/samples/react-carousel/config/sass.json
@@ -0,0 +1,3 @@
+{
+    "$schema": "https://developer.microsoft.com/json-schemas/core-build/sass.schema.json"
+}
diff --git a/samples/react-carousel/config/serve.json b/samples/react-carousel/config/serve.json
@@ -1,10 +1,6 @@
 {
-  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
+  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
   "port": 4321,
   "https": true,
-  "initialPage": "https://localhost:5432/workbench",
-  "api": {
-    "port": 5432,
-    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
-  }
+  "initialPage": "https://contoso.sharepoint.com/_layouts/workbench.aspx"
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,7 @@ solution @@
     temp
     *.sppkg
     release
+    .heft
     # Coverage directory used by tools like istanbul
     coverage
@@ Expand Down @@